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.
230 lines
12 KiB
230 lines
12 KiB
<div class="field" *ngIf="formModel">
|
|
<label>
|
|
{{field.displayName}} {{displaySuffix}} <span class="field-required" [class.hidden]="!field.properties.isRequired">*</span>
|
|
</label>
|
|
|
|
<small class="field-disabled ps-1" *ngIf="field.isDisabled">Disabled</small>
|
|
|
|
<sqx-control-errors *ngIf="form" [for]="$any(fieldForm)" [fieldName]="field.displayName"></sqx-control-errors>
|
|
|
|
<div>
|
|
<ng-container *ngIf="field.properties.editorUrl; else noEditor">
|
|
<sqx-iframe-editor [url]="field.properties.editorUrl" #editor
|
|
[context]="formContext"
|
|
[formControlBinding]="$any(fieldForm)"
|
|
[formValue]="form.valueChanges | async"
|
|
[formIndex]="index"
|
|
[language]="language?.iso2Code">
|
|
</sqx-iframe-editor>
|
|
</ng-container>
|
|
|
|
<ng-template #noEditor>
|
|
<ng-container [ngSwitch]="field.properties.fieldType">
|
|
<ng-container *ngSwitchCase="'Array'">
|
|
<sqx-array-editor
|
|
[canUnset]="canUnset"
|
|
[form]="form"
|
|
[formLevel]="formLevel"
|
|
[formModel]="$any(formModel)"
|
|
[formContext]="formContext"
|
|
[language]="language"
|
|
[languages]="languages">
|
|
</sqx-array-editor>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Assets'">
|
|
<sqx-assets-editor [formControl]="$any(fieldForm)" [folderId]="field.rawProperties.folderId"></sqx-assets-editor>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Boolean'">
|
|
<ng-container [ngSwitch]="field.rawProperties.editor">
|
|
<ng-container *ngSwitchCase="'Toggle'">
|
|
<sqx-toggle [formControl]="$any(fieldForm)" [threeStates]="!field.properties.isRequired"></sqx-toggle>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Checkbox'">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" [formControl]="$any(fieldForm)" id="{{uniqueId}}" sqxIndeterminateValue [threeStates]="!field.properties.isRequired">
|
|
<label class="form-check-label" for="{{uniqueId}}"></label>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Component'">
|
|
<sqx-component
|
|
[canUnset]="canUnset"
|
|
[form]="form"
|
|
[formContext]="formContext"
|
|
[formLevel]="formLevel"
|
|
[formModel]="$any(formModel)"
|
|
[language]="language"
|
|
[languages]="languages">
|
|
</sqx-component>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Components'">
|
|
<sqx-array-editor
|
|
[canUnset]="canUnset"
|
|
[form]="form"
|
|
[formLevel]="formLevel"
|
|
[formModel]="$any(formModel)"
|
|
[formContext]="formContext"
|
|
[language]="language"
|
|
[languages]="languages">
|
|
</sqx-array-editor>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'DateTime'">
|
|
<sqx-date-time-editor [formControl]="$any(fieldForm)" [mode]="field.rawProperties.editor" [enforceTime]="true"></sqx-date-time-editor>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Geolocation'">
|
|
<sqx-geolocation-editor [formControl]="$any(fieldForm)"></sqx-geolocation-editor>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Json'">
|
|
<sqx-code-editor [formControl]="$any(fieldForm)" valueMode="Json" [height]="350"></sqx-code-editor>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Number'">
|
|
<ng-container [ngSwitch]="field.rawProperties.editor">
|
|
<ng-container *ngSwitchCase="'Input'">
|
|
<input class="form-control" type="number" [formControl]="$any(fieldForm)" [placeholder]="field.displayPlaceholder">
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Stars'">
|
|
<sqx-stars [formControl]="$any(fieldForm)" [maximumStars]="field.rawProperties.maxValue"></sqx-stars>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Dropdown'">
|
|
<select class="form-select" [formControl]="$any(fieldForm)">
|
|
<option [ngValue]="null"></option>
|
|
<option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
|
|
</select>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Radio'">
|
|
<div class="form-check" *ngFor="let value of field.rawProperties.allowedValues">
|
|
<input class="form-check-input" type="radio" [value]="value" [formControl]="$any(fieldForm)" [name]="uniqueId" id="{{uniqueId}}_{{value}}">
|
|
<label class="form-check-label" for="{{uniqueId}}_{{value}}">
|
|
{{value}}
|
|
</label>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'References'">
|
|
<ng-container [ngSwitch]="field.rawProperties.editor">
|
|
<ng-container *ngSwitchCase="'List'">
|
|
<sqx-references-editor
|
|
[formControl]="$any(fieldForm)"
|
|
[allowDuplicates]="field.rawProperties.allowDuplicated"
|
|
[formContext]="formContext"
|
|
[language]="language"
|
|
[languages]="languages"
|
|
[schemaIds]="field.rawProperties.schemaIds">
|
|
</sqx-references-editor>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Dropdown'">
|
|
<sqx-reference-dropdown
|
|
mode="Array"
|
|
[formControl]="$any(fieldForm)"
|
|
[language]="language"
|
|
[languages]="languages"
|
|
[schemaId]="field.rawProperties.singleId">
|
|
</sqx-reference-dropdown>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Input'">
|
|
<sqx-reference-input
|
|
mode="Array"
|
|
[formControl]="$any(fieldForm)"
|
|
[language]="language"
|
|
[languages]="languages"
|
|
[schemaIds]="field.rawProperties.schemaIds">
|
|
</sqx-reference-input>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Tags'">
|
|
<sqx-references-tags
|
|
[formControl]="$any(fieldForm)"
|
|
[language]="language"
|
|
[languages]="languages"
|
|
[schemaId]="field.rawProperties.singleId">
|
|
</sqx-references-tags>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Checkboxes'">
|
|
<sqx-references-checkboxes
|
|
[formControl]="$any(fieldForm)"
|
|
[language]="language"
|
|
[schemaId]="field.rawProperties.singleId">
|
|
</sqx-references-checkboxes>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'String'">
|
|
<ng-container [ngSwitch]="field.rawProperties.editor">
|
|
<ng-container *ngSwitchCase="'Input'">
|
|
<input class="form-control" type="text" [formControl]="$any(fieldForm)" [placeholder]="field.displayPlaceholder">
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Slug'">
|
|
<input class="form-control" type="text" [formControl]="$any(fieldForm)" [placeholder]="field.displayPlaceholder" sqxTransformInput="Slugify">
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'TextArea'">
|
|
<textarea class="form-control" [formControl]="$any(fieldForm)" [placeholder]="field.displayPlaceholder" rows="5"></textarea>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'RichText'">
|
|
<sqx-rich-editor [formControl]="$any(fieldForm)" #editor [folderId]="field.rawProperties.folderId"></sqx-rich-editor>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Html'">
|
|
<sqx-code-editor [formControl]="$any(fieldForm)" #editor mode="ace/mode/html" [height]="350" ></sqx-code-editor>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Markdown'">
|
|
<sqx-markdown-editor [formControl]="$any(fieldForm)" #editor [folderId]="field.rawProperties.folderId"></sqx-markdown-editor>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'StockPhoto'">
|
|
<sqx-stock-photo-editor [formControl]="$any(fieldForm)"></sqx-stock-photo-editor>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Dropdown'">
|
|
<select class="form-select" [formControl]="$any(fieldForm)">
|
|
<option [ngValue]="null"></option>
|
|
<option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
|
|
</select>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Radio'">
|
|
<div class="form-check custom-control-inline" *ngFor="let value of field.rawProperties.allowedValues">
|
|
<input class="form-check-input" type="radio" [value]="value" [formControl]="$any(fieldForm)" [name]="uniqueId" id="{{uniqueId}}_{{value}}">
|
|
<label class="form-check-label" for="{{uniqueId}}_{{value}}">
|
|
{{value}}
|
|
</label>
|
|
</div>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Color'">
|
|
<sqx-color-picker [formControl]="$any(fieldForm)" [placeholder]="field.displayPlaceholder"></sqx-color-picker>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Tags'">
|
|
<ng-container [ngSwitch]="field.rawProperties.editor">
|
|
<ng-container *ngSwitchCase="'Tags'">
|
|
<sqx-tag-editor [formControl]="$any(fieldForm)" [placeholder]="field.displayPlaceholder" [suggestions]="field.rawProperties.allowedValues"></sqx-tag-editor>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Checkboxes'">
|
|
<sqx-checkbox-group [formControl]="$any(fieldForm)" [values]="field.rawProperties.allowedValues"></sqx-checkbox-group>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'Dropdown'">
|
|
<select multiple class="form-select" [formControl]="$any(fieldForm)">
|
|
<option *ngFor="let value of field.rawProperties.allowedValues" [ngValue]="value">{{value}}</option>
|
|
</select>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
<ng-container *ngSwitchCase="'UI'">
|
|
<h4 class="ui-separator">{{field.displayName}}</h4>
|
|
</ng-container>
|
|
</ng-container>
|
|
</ng-template>
|
|
</div>
|
|
|
|
<div *ngIf="canUnset" class="unset" >
|
|
<button type="button" class="btn btn-sm btn-text-secondary force" [disabled]="isEmpty | async"
|
|
(sqxConfirmClick)="unset()"
|
|
confirmTitle="i18n:contents.unsetValueConfirmTitle"
|
|
confirmText="i18n:contents.unsetValueConfirmText"
|
|
confirmRememberKey="unsetValue"
|
|
title="i18n:contents.unsetValue">
|
|
<i class="icon-close"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<sqx-form-hint *ngIf="field.properties.hints && field.properties.hints.length > 0">
|
|
<span [sqxMarkdown]="field.properties.hints" [optional]="true" [inline]="true"></span>
|
|
</sqx-form-hint>
|
|
</div>
|
|
|