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.
132 lines
6.4 KiB
132 lines
6.4 KiB
<div class="table-items-row table-items-row-expandable field">
|
|
<div class="table-items-row-summary">
|
|
<span class="drag-container">
|
|
<ng-content></ng-content>
|
|
</span>
|
|
|
|
<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="ml-1 badge badge-pill badge-danger" *ngIf="field.isLocked">Locked</span>
|
|
<span class="ml-1 badge badge-pill badge-success" *ngIf="!field.isDisabled">Enabled</span>
|
|
<span class="ml-1 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()" [disabled]="!field.properties.isContentField && field.isLocked" [class.active]="dropdown.isOpen | async" #buttonOptions>
|
|
<i class="icon-dots"></i>
|
|
</button>
|
|
|
|
<ng-container *sqxModal="dropdown;closeAlways:true">
|
|
<div class="dropdown-menu" [sqxAnchoredTo]="buttonOptions" @fade>
|
|
<ng-container *ngIf="field.properties.isContentField">
|
|
<a class="dropdown-item" (click)="enableField()" *ngIf="field.canEnable">
|
|
Enable in UI
|
|
</a>
|
|
<a class="dropdown-item" (click)="disableField()" *ngIf="field.canDisable">
|
|
Disable in UI
|
|
</a>
|
|
<a class="dropdown-item" (click)="hideField()" *ngIf="field.canHide">
|
|
Hide in API
|
|
</a>
|
|
<a class="dropdown-item" (click)="showField()" *ngIf="field.canShow">
|
|
Show in API
|
|
</a>
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="field.canLock">
|
|
<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>
|
|
</ng-container>
|
|
|
|
<ng-container>
|
|
<div class="dropdown-divider"></div>
|
|
|
|
<a class="dropdown-item dropdown-item-delete"
|
|
[class.disabled]="!field.canDelete"
|
|
(sqxConfirmClick)="deleteField()"
|
|
confirmTitle="Delete field"
|
|
confirmText="Do you really want to delete the field?">
|
|
Delete
|
|
</a>
|
|
</ng-container>
|
|
</div>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row-details" *ngIf="isEditing">
|
|
<form [formGroup]="editForm.form" (ngSubmit)="save()">
|
|
<sqx-field-form
|
|
(cancel)="toggleEditing()"
|
|
[showButtons]="true"
|
|
[patterns]="patterns"
|
|
[editForm]="editForm.form"
|
|
[editFormSubmitted]="editForm.submitted | async"
|
|
[isEditable]="isEditable"
|
|
[field]="field">
|
|
</sqx-field-form>
|
|
</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
|
|
cdkDropList
|
|
[cdkDropListDisabled]="!isEditable"
|
|
[cdkDropListData]="nested"
|
|
(cdkDropListDropped)="sortFields($event)">
|
|
<div *ngFor="let nested of nested; trackBy: trackByFieldFn"
|
|
class="nested-field table-drag"
|
|
cdkDrag
|
|
cdkDragLockAxis="y">
|
|
|
|
<span class="nested-field-line-h"></span>
|
|
|
|
<sqx-field [field]="nested" [schema]="schema" [parent]="field" [patterns]="patterns">
|
|
<i cdkDragHandle class="icon-drag2 drag-handle"></i>
|
|
</sqx-field>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nested-field nested-field-add" *ngIf="isEditable">
|
|
<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 *sqxModal="addFieldDialog">
|
|
<sqx-field-wizard [schema]="schema" [parent]="field"
|
|
(complete)="addFieldDialog.hide()">
|
|
</sqx-field-wizard>
|
|
</ng-container>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|