fix(Admin UI) add button for easier hiding of fields in form builder (#2498)

closes: #2415

---------

Co-authored-by: Sebastian <[email protected]>

Author: sadaf895

src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.html

@@ -26,15 +26,29 @@
           cdkDragBoundary=".overall-container"
         >
           <fa-icon icon="grip-vertical" size="xl" class="drag-handle"></fa-icon>
-          <button
-            mat-stroked-button
-            color="accent"
-            class="field-edit-button"
-            (click)="openConfigDetails(field)"
-            i18n="Button label"
-          >
-            Edit Field
-          </button>
+
+          <div class="field-hover-buttons flex-row align-center gap-small">
+            <button
+              class="field-edit-button"
+              mat-stroked-button
+              color="accent"
+              (click)="openConfigDetails(field)"
+              i18n="Button label"
+            >
+              Edit Field
+            </button>
+
+            <button
+              mat-icon-button
+              color="black"
+              (click)="hideField(field, group)"
+              aria-label="Hide Field"
+              matTooltip="remove (i.e. hide) this field from the form"
+              i18n-matTooltip
+            >
+              <fa-icon icon="times"></fa-icon>
+            </button>
+          </div>
 
           <div class="dummy-form-field">
             <app-entity-field-edit
@@ -111,7 +125,7 @@
             "
             mat-stroked-button
             color="accent"
-            class="field-edit-button field-edit-button-small"
+            class="field-hover-buttons field-edit-button-small"
             (click)="openFieldConfig(field)"
           >
             Edit

src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.scss

@@ -66,11 +66,9 @@ $toolbar-width: 300px;
   text-align: center;
 }
 
-.field-edit-button {
+.field-hover-buttons {
   visibility: hidden;
-  background: white !important;
   z-index: 10;
-  padding: 1.5em;
 
   position: absolute;
   /* center within parent: */
@@ -80,14 +78,21 @@ $toolbar-width: 300px;
   right: 0;
   margin: auto;
   width: fit-content;
+
+  align-self: center;
 }
-.admin-form-field:hover .field-edit-button {
+.admin-form-field:hover .field-hover-buttons {
   visibility: visible;
 }
 .field-edit-button-small {
   left: unset;
 }
 
+.field-edit-button {
+  background: white !important;
+  padding: 1.5em;
+}
+
 .dummy-form-field {
   width: 100%;
 }
@@ -98,6 +103,9 @@ $toolbar-width: 300px;
 .dummy-form-field ::ng-deep mat-form-field {
   width: 100%;
 }
+.dummy-form-field ::ng-deep app-help-button {
+  opacity: 50%;
+}
 
 .drop-area-hint {
   text-align: center;

src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.spec.ts

@@ -180,4 +180,12 @@ describe("AdminEntityFormComponent", () => {
       jasmine.arrayContaining(removedFields),
     );
   }));
+
+  it("should hide a single field", fakeAsync(() => {
+    const field = "subject";
+    const group = component.config.fieldGroups[0];
+    component.hideField(field, group);
+
+    expect(component.config.fieldGroups[0].fields).not.toContain(field);
+  }));
 });

src/app/core/admin/admin-entity-details/admin-entity-form/admin-entity-form.component.ts

@@ -28,6 +28,7 @@ import { AdminSectionHeaderComponent } from "../../building-blocks/admin-section
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { FormConfig } from "../../../entity-details/form/form.component";
 import { AdminEditDescriptionOnlyFieldComponent } from "../admin-entity-field/admin-edit-description-only-field/admin-edit-description-only-field.component";
+import { FieldGroup } from "app/core/entity-details/form/field-group";
 
 @UntilDestroy()
 @Component({
@@ -287,4 +288,10 @@ export class AdminEntityFormComponent implements OnChanges {
     const [removedFieldGroup] = this.config.fieldGroups.splice(i, 1);
     this.initAvailableFields();
   }
+
+  hideField(field: ColumnConfig, group: FieldGroup) {
+    const fieldIndex = group.fields.indexOf(field);
+    group.fields.splice(fieldIndex, 1);
+    this.initAvailableFields();
+  }
 }