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.
185 lines
9.8 KiB
185 lines
9.8 KiB
<div class="table-items-row table-items-row-expandable field">
|
|
<div class="table-items-row-summary">
|
|
<div class="row">
|
|
<div class="col col-6">
|
|
<span class="field-name">
|
|
<i class="field-icon icon-type-{{field.properties.fieldType}}"></i>
|
|
|
|
<span [class.field-hidden]="field.isHidden" [attr.title]="field.isHidden ? 'Hidden Field' : 'Visible Field'">{{displayName}}</span>
|
|
<span class="field-hints">{{field.properties.hints}}</span>
|
|
</span>
|
|
</div>
|
|
<div class="col col-3">
|
|
<div class="float-right">
|
|
<span class="tag tag-success" *ngIf="!field.isDisabled">Enabled</span>
|
|
<span class="tag tag-danger" *ngIf="field.isDisabled">Disabled</span>
|
|
</div>
|
|
</div>
|
|
<div class="col col-3">
|
|
<div class="float-right">
|
|
<button type="button" class="btn btn-secondary table-items-edit-button" [class.active]="isEditing" (click)="toggleEditing()">
|
|
<i class="icon-settings2"></i>
|
|
</button>
|
|
|
|
<div class="dropdown dropdown-options">
|
|
<button type="button" class="btn btn-link btn-decent" (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" position="right" [@fade]>
|
|
<a class="dropdown-item" (click)="enabling.emit()" *ngIf="field.isDisabled">
|
|
Enable
|
|
</a>
|
|
<a class="dropdown-item" (click)="disabling.emit()" *ngIf="!field.isDisabled">
|
|
Disable
|
|
</a>
|
|
<a class="dropdown-item" (click)="hiding.emit()" *ngIf="!field.isHidden">
|
|
Hide
|
|
</a>
|
|
<a class="dropdown-item" (click)="showing.emit()" *ngIf="field.isHidden">
|
|
Show
|
|
</a>
|
|
<a class="dropdown-item dropdown-item-delete" (click)="deleting.emit()">
|
|
Delete
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row-details" *ngIf="isEditing">
|
|
<form [formGroup]="editForm" (ngSubmit)="save()">
|
|
<div class="table-items-row-details-tabs clearfix">
|
|
<ul class="nav nav-inline nav-field-tabs">
|
|
<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 type="reset" class="btn btn-link" (click)="cancel()" [disabled]="editFormSubmitted">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Save</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 0">
|
|
<div class="form-group row">
|
|
<label for="field-label" class="col col-3 col-form-label">Name</label>
|
|
|
|
<div class="col col-6">
|
|
<input type="text" class="form-control" id="field-label" readonly [ngModel]="field.name" [ngModelOptions]="{standalone: true}" />
|
|
|
|
<small class="form-text text-muted">
|
|
The name of the field in the API response.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<label for="field-label" class="col col-3 col-form-label">Label</label>
|
|
|
|
<div class="col col-6">
|
|
<sqx-control-errors for="label" [submitted]="editFormSubmitted"></sqx-control-errors>
|
|
|
|
<input type="text" class="form-control" id="field-label" maxlength="100" formControlName="label" />
|
|
|
|
<small class="form-text text-muted">
|
|
Define the display name for the field for documentation and user interfaces.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<label for="field-hints" class="col col-3 col-form-label">Hints</label>
|
|
|
|
<div class="col col-6">
|
|
<sqx-control-errors for="hints" [submitted]="editFormSubmitted"></sqx-control-errors>
|
|
|
|
<input type="text" class="form-control" id="field-hints" maxlength="100" formControlName="hints" />
|
|
|
|
<small class="form-text text-muted">
|
|
Define some hints for the user and editor for the field for documentation and user interfaces.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group row">
|
|
<div class="form-check offset-3 col col-9">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" formControlName="isListField"> List Field
|
|
</label>
|
|
|
|
<small class="form-text text-muted">
|
|
List fields are shown as a column in the content list. If no list field is defined, the first field is shown.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 1">
|
|
<div [ngSwitch]="field.properties.fieldType">
|
|
<div *ngSwitchCase="'Number'">
|
|
<sqx-number-validation [editForm]="editForm" [properties]="field.properties"></sqx-number-validation>
|
|
</div>
|
|
<div *ngSwitchCase="'String'">
|
|
<sqx-string-validation [editForm]="editForm" [properties]="field.properties"></sqx-string-validation>
|
|
</div>
|
|
<div *ngSwitchCase="'Boolean'">
|
|
<sqx-boolean-validation [editForm]="editForm" [properties]="field.properties"></sqx-boolean-validation>
|
|
</div>
|
|
<div *ngSwitchCase="'DateTime'">
|
|
<sqx-date-time-validation [editForm]="editForm" [properties]="field.properties"></sqx-date-time-validation>
|
|
</div>
|
|
<div *ngSwitchCase="'Geolocation'">
|
|
<sqx-geolocation-validation [editForm]="editForm" [properties]="field.properties"></sqx-geolocation-validation>
|
|
</div>
|
|
<div *ngSwitchCase="'Json'">
|
|
<sqx-json-validation [editForm]="editForm" [properties]="field.properties"></sqx-json-validation>
|
|
</div>
|
|
<div *ngSwitchCase="'Assets'">
|
|
<sqx-assets-validation [editForm]="editForm" [properties]="field.properties"></sqx-assets-validation>
|
|
</div>
|
|
<div *ngSwitchCase="'References'">
|
|
<sqx-references-validation [editForm]="editForm" [properties]="field.properties"></sqx-references-validation>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-items-row-details-tab" [class.hidden]="selectedTab !== 2">
|
|
<div [ngSwitch]="field.properties.fieldType">
|
|
<div *ngSwitchCase="'Number'">
|
|
<sqx-number-ui [editForm]="editForm" [properties]="field.properties"></sqx-number-ui>
|
|
</div>
|
|
<div *ngSwitchCase="'String'">
|
|
<sqx-string-ui [editForm]="editForm" [properties]="field.properties"></sqx-string-ui>
|
|
</div>
|
|
<div *ngSwitchCase="'Boolean'">
|
|
<sqx-boolean-ui [editForm]="editForm" [properties]="field.properties"></sqx-boolean-ui>
|
|
</div>
|
|
<div *ngSwitchCase="'DateTime'">
|
|
<sqx-date-time-ui [editForm]="editForm" [properties]="field.properties"></sqx-date-time-ui>
|
|
</div>
|
|
<div *ngSwitchCase="'Geolocation'">
|
|
<sqx-geolocation-ui [editForm]="editForm" [properties]="field.properties"></sqx-geolocation-ui>
|
|
</div>
|
|
<div *ngSwitchCase="'Json'">
|
|
<sqx-json-ui [editForm]="editForm" [properties]="field.properties"></sqx-json-ui>
|
|
</div>
|
|
<div *ngSwitchCase="'Assets'">
|
|
<sqx-assets-ui [editForm]="editForm" [properties]="field.properties"></sqx-assets-ui>
|
|
</div>
|
|
<div *ngSwitchCase="'References'">
|
|
<sqx-references-ui [editForm]="editForm" [properties]="field.properties" [schemas]="schemas"></sqx-references-ui>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|