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.
114 lines
5.3 KiB
114 lines
5.3 KiB
<ng-container *ngIf="formModel.itemChanges | async; let items">
|
|
<div class="array-container" *ngIf="items.length > 0">
|
|
<div class="cdk-container" *ngIf="items.length <= 50;"
|
|
cdkDropList
|
|
[cdkDropListDisabled]="false"
|
|
[cdkDropListData]="items"
|
|
(cdkDropListDropped)="sort($event)">
|
|
<div *ngFor="let itemForm of items; index as i; last as isLast; first as isFirst" class="table-drag item"
|
|
cdkDrag
|
|
cdkDragLockAxis="y">
|
|
<sqx-array-item
|
|
[canUnset]="canUnset"
|
|
[form]="form"
|
|
[formContext]="formContext"
|
|
[formModel]="itemForm"
|
|
[index]="i"
|
|
[isCollapsedInitial]="isCollapsedInitial"
|
|
[isDisabled]="isDisabled | async"
|
|
[isFirst]="isFirst"
|
|
[isLast]="isLast"
|
|
[language]="language"
|
|
[languages]="languages"
|
|
(clone)="addCopy(itemForm)"
|
|
(itemRemove)="removeItem(i)"
|
|
(itemMove)="move(itemForm, $event)" >
|
|
<i cdkDragHandle class="icon-drag2"></i>
|
|
</sqx-array-item>
|
|
</div>
|
|
</div>
|
|
|
|
<cdk-virtual-scroll-viewport autosize *ngIf="items.length > 50">
|
|
<div *cdkVirtualFor="let itemForm of items; index as i; last as isLast; first as isFirst" class="table-drag item">
|
|
<sqx-array-item
|
|
[canUnset]="canUnset"
|
|
[form]="form"
|
|
[formContext]="formContext"
|
|
[formModel]="itemForm"
|
|
[index]="i"
|
|
[isCollapsedInitial]="isCollapsedInitial"
|
|
[isDisabled]="isDisabled | async"
|
|
[isFirst]="isFirst"
|
|
[isLast]="isLast"
|
|
[language]="language"
|
|
[languages]="languages"
|
|
(clone)="addCopy(itemForm)"
|
|
(itemRemove)="removeItem(i)"
|
|
(itemMove)="move(itemForm, $event)" >
|
|
</sqx-array-item>
|
|
</div>
|
|
</cdk-virtual-scroll-viewport>
|
|
</div>
|
|
|
|
<div class="row g-0 align-items-center">
|
|
<div class="col-auto">
|
|
<ng-container *ngIf="isArray; else component">
|
|
<ng-container *ngIf="hasField">
|
|
<button type="button" class="btn btn-outline-success" [disabled]="isFull | async" (click)="addItem()">
|
|
{{ 'contents.arrayAddItem' | sqxTranslate }}
|
|
</button>
|
|
</ng-container>
|
|
<ng-container *ngIf="!hasField">
|
|
<sqx-form-hint>
|
|
{{ 'contents.arrayNoFields' | sqxTranslate }}
|
|
</sqx-form-hint>
|
|
</ng-container>
|
|
</ng-container>
|
|
|
|
<ng-template #component>
|
|
<ng-container *ngIf="schemasList.length > 1">
|
|
<button type="button" class="btn btn-outline-success dropdown-toggle" [disabled]="isFull | async" (click)="schemasDropdown.show()" #buttonSelect>
|
|
{{ 'contents.addComponent' | sqxTranslate}}
|
|
</button>
|
|
|
|
<ng-container *sqxModal="schemasDropdown;closeAlways:true">
|
|
<div class="dropdown-menu" [sqxAnchoredTo]="buttonSelect" [scrollY]="true" @fade>
|
|
<a class="dropdown-item" *ngFor="let schema of schemasList" (click)="addComponent(schema)">
|
|
{{schema.displayName}}
|
|
</a>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
<ng-container *ngIf="schemasList.length === 1">
|
|
<button type="button" class="btn btn-outline-success" [disabled]="isFull | async" (click)="addComponent(schemasList[0])">
|
|
{{ 'contents.addComponent' | sqxTranslate}}
|
|
</button>
|
|
</ng-container>
|
|
<ng-container *ngIf="schemasList.length === 0">
|
|
<sqx-form-hint>
|
|
{{ 'contents.componentsNoSchema' | sqxTranslate }}
|
|
</sqx-form-hint>
|
|
</ng-container>
|
|
</ng-template>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<button type="button" class="btn btn-text-danger ms-2" *ngIf="items.length > 0"
|
|
(sqxConfirmClick)="clear()"
|
|
confirmTitle="i18n:contents.arrayClearConfirmTitle"
|
|
confirmText="i18n:contents.arrayClearConfirmText"
|
|
confirmRememberKey="leaveApp">
|
|
{{ 'contents.arrayClear' | sqxTranslate }}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="col-auto" *ngIf="items.length > 0">
|
|
<button type="button" class="btn btn-text-secondary" (click)="expandAll()" title="i18n:contents.arrayExpandAll">
|
|
<i class="icon-plus-square"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-text-secondary" (click)="collapseAll()" title="i18n:contents.arrayCollapseAll">
|
|
<i class="icon-minus-square"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</ng-container>
|