admin-panel: refact from table to d-grid; added sort- and delete-icons

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

@@ -3,9 +3,9 @@
 </ng-container>
 <ng-template #complexModel>
   <ng-container *ngIf="conjunction; else disjunctModel">
-    <app-service-check-conjunction [model]="conjunction"></app-service-check-conjunction>
+    <app-service-check-conjunction [model]="conjunction" [sortVisible]="sortVisible"></app-service-check-conjunction>
   </ng-container>
   <ng-template #disjunctModel>
-    <app-service-check-disjunction [model]="disjunction"></app-service-check-disjunction>
+    <app-service-check-disjunction [model]="disjunction" [sortVisible]="sortVisible"></app-service-check-disjunction>
   </ng-template>
 </ng-template>

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

@@ -28,6 +28,7 @@ export class ServiceCheckAdapterComponent {
   public get model() {
     return this._model;
   }
+  @Input() sortVisible: { up: boolean; down: boolean } = { up: true, down: true };
 
   private _model!: string | CheckDisjunction | CheckConjunction;
   public stringModel?: string;

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

@@ -1,22 +1,22 @@
-<table *ngIf="model?.and" class="check-conjunction w-100">
-  <colgroup>
-    <col width="20" />
-    <col width="*" />
-  </colgroup>
-  <tbody>
-    <tr>
-      <td [attr.rowspan]="(model?.and?.length || 1) + 1" class="bg-max label-upright-vertical">AND</td>
-      <td *ngIf="model?.and?.length" class="p-0">
-        <app-service-check-adapter [model]="model?.and?.[0] ?? ''"></app-service-check-adapter>
-      </td>
-    </tr>
-    <tr *ngFor="let check of model?.and | slice : 1">
-      <td class="p-0"><app-service-check-adapter [model]="check"></app-service-check-adapter></td>
-    </tr>
-    <tr>
-      <td class="ps-2">
-        <app-service-check-button-controls (create)="model?.and?.push($event)"></app-service-check-button-controls>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div
+  *ngIf="model?.and"
+  class="d-grid w-100 check-conjunction"
+  [style.grid-template-rows]="'repeat(' + ((model?.and?.length || 0) + 1) + ', max-content)'">
+  <div
+    class="d-flex flex-column align-items-center h-100 bg-max"
+    style="grid-column: 1 / span 1"
+    [style.grid-row]="'1 / span ' + (model?.and?.length ?? 0) + 1">
+    <fa-icon *ngIf="sortVisible.up" [icon]="fa.up" class="text-muted"></fa-icon>
+    <div class="flex-fill label-upright-vertical">AND</div>
+    <fa-icon [icon]="fa.times" class="text-danger"></fa-icon>
+    <fa-icon *ngIf="sortVisible.down" [icon]="fa.down" class="text-muted"></fa-icon>
+  </div>
+
+  <div *ngFor="let check of model?.and; index as i" style="grid-column: 2 / span 1" [style.grid-row]="i + 1 + ' / span 1'" [class.border-top]="i > 0">
+    <app-service-check-adapter [model]="check" [sortVisible]="{ up: i > 0, down: (model?.and?.length ?? 0) > i + 1 }"></app-service-check-adapter>
+  </div>
+
+  <div style="grid-column: 2 / span 1" [style.grid-row]="(model?.and?.length ?? 0) + 1 + ' / span 1'" class="ps-2 border-top">
+    <app-service-check-button-controls (create)="model?.and?.push($event)"></app-service-check-button-controls>
+  </div>
+</div>

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

@@ -1,4 +1,6 @@
 import { Component, Input, QueryList, ViewChildren } from '@angular/core';
+import { faCaretDown, faCaretUp, faTimes } from '@fortawesome/free-solid-svg-icons';
+
 import { ServiceCheckAdapterComponent } from 'src/app/components/service-check-editor/service-check-adapter/service-check-adapter.component';
 
 @Component({
@@ -9,6 +11,9 @@ import { ServiceCheckAdapterComponent } from 'src/app/components/service-check-e
 export class ServiceCheckConjunctionComponent {
   @ViewChildren(ServiceCheckAdapterComponent) adapters!: QueryList<ServiceCheckAdapterComponent>;
   @Input() model?: CheckConjunction;
+  @Input() sortVisible: { up: boolean; down: boolean } = { up: true, down: true };
+
+  public fa = { times: faTimes, down: faCaretDown, up: faCaretUp };
 
   public collect() {
     return { and: this.adapters.map(adpt => adpt.collect()) };

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

@@ -1,20 +1,16 @@
-<table *ngIf="model" class="check-disjunction w-100">
-  <colgroup>
-    <col width="20" />
-    <col width="*" />
-  </colgroup>
-  <tbody>
-    <tr>
-      <td [attr.rowspan]="(model.length || 1) + 1" class="bg-peak label-upright-vertical">OR</td>
-      <td *ngIf="model.length" class="p-0"><app-service-check-adapter [model]="model[0]"></app-service-check-adapter></td>
-    </tr>
-    <tr *ngFor="let check of model | slice : 1">
-      <td class="p-0"><app-service-check-adapter [model]="check"></app-service-check-adapter></td>
-    </tr>
-    <tr>
-      <td class="ps-2">
-        <app-service-check-button-controls (create)="model.push($event)"></app-service-check-button-controls>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div *ngIf="model" class="d-grid w-100 check-disjunction" [style.grid-template-rows]="'repeat(' + (model.length + 1) + ', max-content)'">
+  <div class="d-flex flex-column align-items-center h-100 bg-peak" style="grid-column: 1 / span 1" [style.grid-row]="'1 / span ' + model.length + 1">
+    <fa-icon *ngIf="sortVisible.up" [icon]="fa.up" class="text-muted"></fa-icon>
+    <div class="flex-fill label-upright-vertical">OR</div>
+    <fa-icon [icon]="fa.times" class="text-danger"></fa-icon>
+    <fa-icon *ngIf="sortVisible.down" [icon]="fa.down" class="text-muted"></fa-icon>
+  </div>
+
+  <div *ngFor="let check of model; index as i" style="grid-column: 2 / span 1" [style.grid-row]="i + 1 + ' / span 1'" [class.border-top]="i > 0">
+    <app-service-check-adapter [model]="check" [sortVisible]="{ up: i > 0, down: model.length > i + 1 }"></app-service-check-adapter>
+  </div>
+
+  <div style="grid-column: 2 / span 1" [style.grid-row]="model.length + 1 + ' / span 1'" class="ps-2 border-top">
+    <app-service-check-button-controls (create)="model.push($event)"></app-service-check-button-controls>
+  </div>
+</div>

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

@@ -1,4 +1,6 @@
 import { Component, Input, QueryList, ViewChildren } from '@angular/core';
+import { faCaretDown, faCaretUp, faTimes } from '@fortawesome/free-solid-svg-icons';
+
 import { ServiceCheckAdapterComponent } from 'src/app/components/service-check-editor/service-check-adapter/service-check-adapter.component';
 
 @Component({
@@ -9,6 +11,9 @@ import { ServiceCheckAdapterComponent } from 'src/app/components/service-check-e
 export class ServiceCheckDisjunctionComponent {
   @ViewChildren(ServiceCheckAdapterComponent) adapters!: QueryList<ServiceCheckAdapterComponent>;
   @Input() model?: CheckDisjunction;
+  @Input() sortVisible: { up: boolean; down: boolean } = { up: true, down: true };
+
+  public fa = { times: faTimes, down: faCaretDown, up: faCaretUp };
 
   public collect() {
     return this.adapters.map(adpt => adpt.collect());

ng/src/app/components/service-check-form/service-check-form.component.html

@@ -80,7 +80,7 @@
     <div class="col-12">
       <label class="mt-2">Check</label>
       <div class="mt-2 position-relative border">
-        <app-service-check-disjunction [model]="serviceCheck.checks"></app-service-check-disjunction>
+        <app-service-check-disjunction [model]="serviceCheck.checks" [sortVisible]="{ up: false, down: false }"></app-service-check-disjunction>
       </div>
     </div>
   </div>

ng/src/styles.scss

@@ -34,13 +34,13 @@
 
 .check-disjunction,
 .check-conjunction {
+  &.d-grid {
+    grid-template-columns: 26px 1fr;
+  }
+
   .label-upright-vertical {
     writing-mode: vertical-lr;
     text-orientation: upright;
     text-align: center;
   }
-
-  tr:not(:first-child) {
-    border-top: 1px solid $border-color !important;
-  }
 }