mirror of https://github.com/Squidex/squidex.git
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.
133 lines
6.9 KiB
133 lines
6.9 KiB
<div class="table-items-row table-items-row-expandable field">
|
|
<div class="table-items-row-summary">
|
|
<i class="icon-drag2 drag-handle"></i>
|
|
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<span class="field-name">
|
|
<i class="field-icon icon-type-{{field.properties.fieldType}}"></i>
|
|
|
|
<span [class.field-hidden]="field.isHidden" title="{{field.isHidden ? 'Hidden Field' : 'Visible Field'}}">{{field.displayName}}</span>
|
|
<span class="field-partitioning ml-2" *ngIf="field['isLocalizable']">localizable</span>
|
|
</span>
|
|
</div>
|
|
<div class="col col-tags">
|
|
<div class="float-right">
|
|
<span class="badge badge-pill badge-danger" *ngIf="field.isLocked">Locked</span>
|
|
<span class="badge badge-pill badge-success" *ngIf="!field.isDisabled">Enabled</span>
|
|
<span class="badge badge-pill badge-danger" *ngIf="field.isDisabled">Disabled</span>
|
|
</div>
|
|
</div>
|
|
<div class="col col-options">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-secondary table-items-edit-button" [class.active]="isEditing" (click)="toggleEditing()">
|
|
<i class="icon-settings"></i>
|
|
</button>
|
|
|
|
<div class="dropdown dropdown-options">
|
|
<button type="button" class="btn btn-text-secondary ml-1" (click)="dropdown.toggle()" [class.active]="dropdown.isOpen | async" #optionsButton>
|
|
<i class="icon-dots"></i>
|
|
</button>
|
|
<div class="dropdown-menu" *sqxModalView="dropdown;closeAlways:true" [sqxModalTarget]="optionsButton" @fade>
|
|
<a class="dropdown-item" (click)="enableField()" *ngIf="field.isDisabled">
|
|
Enable in UI
|
|
</a>
|
|
<a class="dropdown-item" (click)="disableField()" *ngIf="!field.isDisabled">
|
|
Disable in UI
|
|
</a>
|
|
<a class="dropdown-item" (click)="hideField()" *ngIf="!field.isHidden && !field.isLocked">
|
|
Hide in API
|
|
</a>
|
|
<a class="dropdown-item" (click)="showField()" *ngIf="field.isHidden && !field.isLocked">
|
|
Show in API
|
|
</a>
|
|
|
|
<ng-container *ngIf="!field.isLocked">
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<a class="dropdown-item"
|
|
(sqxConfirmClick)="lockField()"
|
|
confirmTitle="Lock field"
|
|
confirmText="Do you really want to lock the field? Locked fields cannot be deleted or changed anymore.">
|
|
Lock and prevent changes
|
|
</a>
|
|
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<a class="dropdown-item dropdown-item-delete"
|
|
(sqxConfirmClick)="deleteField()"
|
|
confirmTitle="Delete field"
|
|
confirmText="Do you really want to delete the field?">
|
|
Delete
|
|
</a>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row-details" *ngIf="isEditing">
|
|
<form [formGroup]="editForm.form" (ngSubmit)="save()">
|
|
<div class="table-items-row-details-tabs clearfix">
|
|
<ul class="nav nav-tabs2">
|
|
<li class="nav-item">
|
|
<a class="nav-link" (click)="selectTab(0)" [class.active]="selectedTab === 0">Common</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" (click)="selectTab(1)" [class.active]="selectedTab === 1">Validation</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" (click)="selectTab(2)" [class.active]="selectedTab === 2">Editing</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="float-right">
|
|
<button [disabled]="field.isLocked" type="reset" class="btn btn-secondary" (click)="toggleEditing()">Cancel</button>
|
|
<button [disabled]="field.isLocked" type="submit" class="btn btn-primary ml-1">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 0">
|
|
<sqx-field-form-common [editForm]="editForm.form" [editFormSubmitted]="editForm.submitted | async" [field]="field"></sqx-field-form-common>
|
|
</div>
|
|
|
|
<div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 1">
|
|
<sqx-field-form-validation [patterns]="patterns" [editForm]="editForm.form" [field]="field"></sqx-field-form-validation>
|
|
</div>
|
|
|
|
<div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 2">
|
|
<sqx-field-form-ui [editForm]="editForm.form" [field]="field"></sqx-field-form-ui>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="nested-fields" *ngIf="field.properties.fieldType === 'Array'">
|
|
<ng-container *ngIf="field['nested']; let nested">
|
|
<span class="nested-field-line-v"></span>
|
|
|
|
<div [sqxSortModel]="nested" (sqxSorted)="sortFields($event)">
|
|
<div class="nested-field" *ngFor="let nested of nested; trackBy: trackByField.bind(this)">
|
|
<span class="nested-field-line-h"></span>
|
|
|
|
<sqx-field [field]="nested" [schema]="schema" [parent]="field" [patterns]="patterns"></sqx-field>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nested-field nested-field-add">
|
|
<span class="nested-field-line-h"></span>
|
|
|
|
<button type="button" class="btn btn-success btn-sm" (click)="addFieldDialog.show()">
|
|
<i class="icon icon-plus"></i> Add Nested Field
|
|
</button>
|
|
</div>
|
|
|
|
<ng-container *sqxModalView="addFieldDialog;onRoot:true;closeAuto:false;closeAlways:true">
|
|
<sqx-field-wizard [schema]="schema" [parent]="field"
|
|
(completed)="addFieldDialog.hide()">
|
|
</sqx-field-wizard>
|
|
</ng-container>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|