Headless CMS and Content Managment Hub
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

86 lines
4.3 KiB

<sqx-modal-dialog (close)="emitComplete()" size="lg">
<ng-container title>
<ng-container *ngIf="parent; else noParent">
{{ 'schemas.addNestedField' | sqxTranslate }}
</ng-container>
<ng-template #noParent>
{{editing ? 'Edit' : 'Add'}} Field
</ng-template>
</ng-container>
<ng-container content>
<ng-container *ngIf="!editing; else notEditing">
<form [formGroup]="addFieldForm.form" (ngSubmit)="addField(false)">
<sqx-form-error [error]="addFieldForm.error | async"></sqx-form-error>
<div class="form-group">
<div class="row">
<div class="col-4 type" *ngFor="let fieldType of fieldTypes">
<label>
<input type="radio" class="radio-input" name="type" formControlName="type" value="{{fieldType.type}}">
<div class="row no-gutters">
<div class="col-auto">
<div class="btn-radio" [class.active]="addFieldForm.form.controls['type'].value === fieldType.type">
<i class="icon-type-{{fieldType.type}}"></i>
</div>
</div>
<div class="col">
<div class="type-title">{{fieldType.type}}</div>
<div class="type-text text-muted">{{fieldType.description | sqxTranslate}}</div>
</div>
</div>
</label>
</div>
</div>
</div>
<div class="form-group">
<sqx-control-errors for="name" submitOnly="true"></sqx-control-errors>
<input type="text" class="form-control" formControlName="name" maxlength="40" #nameInput placeholder="{{ 'schemas.field.namePlaceholder' | sqxTranslate }}" sqxFocusOnInit>
</div>
<div class="form-group" *ngIf="!parent && (addFieldForm.isContentField | async)">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="isLocalizable" formControlName="isLocalizable">
<label class="form-check-label" for="isLocalizable">
{{ 'schemas.field.localizable' | sqxTranslate }}
</label>
</div>
<sqx-form-hint>
{{ 'schemas.field.localizableHint' | sqxTranslate }}
</sqx-form-hint>
</div>
<sqx-form-alert class="mt-4">
{{ 'schemas.nameWarning' | sqxTranslate }}
</sqx-form-alert>
</form>
</ng-container>
<ng-template #notEditing>
<form [formGroup]="editForm.form" class="edit-form" (ngSubmit)="save()">
<sqx-field-form [isEditable]="true" [field]="field" [fieldForm]="editForm.form" [patterns]="patternsState.patterns | async">
</sqx-field-form>
</form>
</ng-template>
</ng-container>
<ng-container footer>
<button type="reset" class="float-left btn btn-secondary" (click)="emitComplete()">{{ 'common.cancel' | sqxTranslate }}</button>
<div *ngIf="!editing">
<button type="button" class="btn btn-outline-success" (click)="addField(false)">{{ 'schemas.addFieldAndClose' | sqxTranslate }}</button>
<button type="button" class="btn btn-success ml-1" (click)="addField(true)">{{ 'schemas.addFieldAndCreate' | sqxTranslate }}</button>
<button type="button" class="btn btn-success ml-1" (click)="addField(false, true)">{{ 'schemas.addFieldAndEdit' | sqxTranslate }}</button>
</div>
<div *ngIf="editing">
<button type="button" class="btn btn-success" (click)="save(true)">{{ 'schemas.saveFieldAndNew' | sqxTranslate }}</button>
<button type="button" class="btn btn-primary ml-1" (click)="save()">{{ 'schemas.saveFieldAndClose' | sqxTranslate }}</button>
</div>
</ng-container>
</sqx-modal-dialog>