admin-panel: check editor: implemented remove buttons

ng/src/app/components/service-check-editor/service-check-adapter/service-check-adapter.component.html

@@ -1,11 +1,23 @@
 <ng-container *ngIf="stringModel !== undefined; else complexModel">
-  <app-service-check-string [model]="stringModel" [sortVisible]="sortVisible" (sort)="sort.emit($event)"></app-service-check-string>
+  <app-service-check-string
+    [model]="stringModel"
+    [sortVisible]="sortVisible"
+    (sort)="sort.emit($event)"
+    (remove)="remove.emit()"></app-service-check-string>
 </ng-container>
 <ng-template #complexModel>
   <ng-container *ngIf="conjunction; else disjunctModel">
-    <app-service-check-conjunction [model]="conjunction" [sortVisible]="sortVisible" (sort)="sort.emit($event)"></app-service-check-conjunction>
+    <app-service-check-conjunction
+      [model]="conjunction"
+      [sortVisible]="sortVisible"
+      (sort)="sort.emit($event)"
+      (remove)="remove.emit()"></app-service-check-conjunction>
   </ng-container>
   <ng-template #disjunctModel>
-    <app-service-check-disjunction [model]="disjunction" [sortVisible]="sortVisible" (sort)="sort.emit($event)"></app-service-check-disjunction>
+    <app-service-check-disjunction
+      [model]="disjunction"
+      [sortVisible]="sortVisible"
+      (sort)="sort.emit($event)"
+      (remove)="remove.emit()"></app-service-check-disjunction>
   </ng-template>
 </ng-template>

ng/src/app/components/service-check-editor/service-check-conjunction/service-check-conjunction.component.html

@@ -15,7 +15,8 @@
     <app-service-check-adapter
       [model]="check"
       [sortVisible]="{ up: i > 0, down: (model?.and?.length ?? 0) > i + 1 }"
-      (sort)="onSubSort(i, $event)"></app-service-check-adapter>
+      (sort)="onSubSort(i, $event)"
+      (remove)="onSubRemove(i)"></app-service-check-adapter>
   </div>
 
   <div
@@ -25,7 +26,7 @@
     [class.border-top]="model?.and?.length ?? 0 > 0">
     <div class="d-flex align-items-baseline w-100">
       <app-service-check-button-controls class="flex-fill" (create)="model?.and?.push($event)"></app-service-check-button-controls>
-      <fa-icon [icon]="fa.times" class="text-danger ps-2 pe-2"></fa-icon>
+      <fa-icon [icon]="fa.times" class="text-danger ps-2 pe-2 pointer" (click)="remove.emit()"></fa-icon>
     </div>
   </div>
 </div>

ng/src/app/components/service-check-editor/service-check-conjunction/service-check-conjunction.component.ts

@@ -29,4 +29,10 @@ export class ServiceCheckConjunctionComponent extends SortableComponent {
       this.model.and.splice(idx + 1, 0, ...a);
     }
   }
+
+  public onSubRemove(idx: number) {
+    if (!this.model?.and) return;
+
+    this.model.and.splice(idx, 1);
+  }
 }

ng/src/app/components/service-check-editor/service-check-disjunction/service-check-disjunction.component.html

@@ -9,7 +9,8 @@
     <app-service-check-adapter
       [model]="check"
       [sortVisible]="{ up: i > 0, down: model.length > i + 1 }"
-      (sort)="onSubSort(i, $event)"></app-service-check-adapter>
+      (sort)="onSubSort(i, $event)"
+      (remove)="onSubRemove(i)"></app-service-check-adapter>
   </div>
 
   <div
@@ -19,7 +20,7 @@
     [class.border-top]="model.length > 0">
     <div class="d-flex align-items-baseline w-100">
       <app-service-check-button-controls class="flex-fill" (create)="model.push($event)"></app-service-check-button-controls>
-      <fa-icon *ngIf="removable" [icon]="fa.times" class="text-danger ps-2 pe-2"></fa-icon>
+      <fa-icon *ngIf="removable" [icon]="fa.times" class="text-danger ps-2 pe-2 pointer" (click)="remove.emit()"></fa-icon>
     </div>
   </div>
 </div>

ng/src/app/components/service-check-editor/service-check-disjunction/service-check-disjunction.component.ts

@@ -30,4 +30,10 @@ export class ServiceCheckDisjunctionComponent extends SortableComponent {
       this.model.splice(idx + 1, 0, ...a);
     }
   }
+
+  public onSubRemove(idx: number) {
+    if (!this.model) return;
+
+    this.model.splice(idx, 1);
+  }
 }

ng/src/app/components/service-check-editor/service-check-string/service-check-string.component.html

@@ -7,5 +7,5 @@
     <fa-icon *ngIf="sortVisible.down" [icon]="fa.down" class="text-muted pointer" (click)="sort.emit('down')"></fa-icon>
   </div>
   <input type="text" class="border-0 form-control flex-fill" [(ngModel)]="model" />
-  <fa-icon [icon]="fa.times" class="text-danger align-self-center ps-2 pe-2"></fa-icon>
+  <fa-icon [icon]="fa.times" class="text-danger align-self-center ps-2 pe-2 pointer" (click)="remove.emit()"></fa-icon>
 </div>

ng/src/app/components/service-check-editor/sortable.component.ts

@@ -6,4 +6,5 @@ export type SortDirection = 'up' | 'down';
 export abstract class SortableComponent {
   @Input() sortVisible: { up: boolean; down: boolean } = { up: true, down: true };
   @Output() sort: EventEmitter<SortDirection> = new EventEmitter();
+  @Output() remove: EventEmitter<void> = new EventEmitter();
 }