Browse Source

fix(admin-ui): Do not allow adding/re-ording readonly list inputs

Michael Bromley 3 years ago
parent
commit
61b29ae48a

+ 14 - 4
packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/dynamic-form-input/dynamic-form-input.component.html

@@ -3,17 +3,27 @@
 </ng-container>
 <ng-template #list>
     <div class="list-container" cdkDropList (cdkDropListDropped)="moveListItem($event)">
-        <div class="list-item-row" *ngFor="let item of listItems; trackBy: trackById" cdkDrag [cdkDragData]="item">
+        <div
+            class="list-item-row"
+            *ngFor="let item of listItems; trackBy: trackById"
+            cdkDrag
+            [cdkDragData]="item"
+        >
             <ng-container #listItem></ng-container>
-            <button class="btn btn-link btn-sm btn-warning" (click)="removeListItem(item)" [title]="'common.remove-item-from-list' | translate">
+            <button
+                class="btn btn-link btn-sm btn-warning"
+                *ngIf="!readonly"
+                (click)="removeListItem(item)"
+                [title]="'common.remove-item-from-list' | translate"
+            >
                 <clr-icon shape="times"></clr-icon>
             </button>
             <div class="flex-spacer"></div>
-            <div class="drag-handle" cdkDragHandle *ngIf="!readonly">
+            <div class="drag-handle" cdkDragHandle [class.hidden]="readonly">
                 <clr-icon shape="drag-handle" size="24"></clr-icon>
             </div>
         </div>
-        <button class="btn btn-secondary btn-sm" (click)="addListItem()">
+        <button class="btn btn-secondary btn-sm" (click)="addListItem()" *ngIf="!readonly">
             <clr-icon shape="plus"></clr-icon> {{ 'common.add-item-to-list' | translate }}
         </button>
     </div>

+ 4 - 0
packages/admin-ui/src/lib/core/src/shared/dynamic-form-inputs/dynamic-form-input/dynamic-form-input.component.scss

@@ -30,6 +30,10 @@
         0 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 
+.drag-handle.hidden {
+    display: none;
+}
+
 .cdk-drag-placeholder {
     opacity: 0.1;
 }