Release 3.40.0

Author: tomwwinter

src/app/child-dev-project/children/child-block/child-block.component.scss

@@ -1,4 +1,5 @@
 @use "variables/sizes";
+@use "variables/colors";
 
 .child-pic {
   width: sizes.$icon-block;
@@ -11,7 +12,7 @@
 }
 
 .inactive {
-  color: grey;
+  color: colors.$inactive;
 }
 
 .container {
@@ -24,7 +25,6 @@
   font-size: 1em;
   margin-right: 3px;
   font-weight: 500;
-  color: #262626;
 }
 
 .subnote {

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();
+  }
 }

src/app/core/basic-datatypes/entity/entity-block/entity-block.component.html

@@ -1,6 +1,9 @@
 <span
   class="block-height truncate-text"
-  [ngClass]="{ clickable: !linkDisabled }"
+  [ngClass]="{
+    clickable: !linkDisabled,
+    '.inactive': !entityToDisplay?.isActive,
+  }"
   (click)="showDetailsPage()"
 >
   @if (entityBlockComponent) {

src/app/core/basic-datatypes/entity/entity-block/entity-block.component.scss

@@ -1,4 +1,5 @@
 @use "variables/sizes";
+@use "variables/colors";
 
 .clickable {
   pointer-events: all;
@@ -11,3 +12,7 @@
 .block-height {
   line-height: sizes.$icon-block;
 }
+
+.inactive {
+  color: colors.$inactive;
+}

src/app/core/common-components/entities-table/entities-table.component.html

@@ -78,6 +78,7 @@
     <tr
       mat-row
       *matRowDef="let row; columns: _columnsToDisplay"
+      [class.inactive-row]="!row.record.isActive"
       [style.background-color]="getBackgroundColor?.(row.record)"
       class="table-row"
       (click)="onRowClick(row)"

src/app/core/common-components/entities-table/entities-table.component.scss

@@ -35,3 +35,7 @@
   background-color: white;
   border-top: none;
 }
+
+.inactive-row {
+  color: colors.$inactive;
+}

src/app/core/entity/database-field.decorator.ts

@@ -10,7 +10,7 @@ import { EntitySchema } from "./schema/entity-schema";
  * @param propertySchema (optional) SchemaField definition that configures additional options regarding this field
  */
 export function DatabaseField(propertySchema: EntitySchemaField = {}) {
-  return (target, propertyName: string) => {
+  return (target: any, propertyName: string) => {
     // Retrieve datatype from TypeScript type definition
     if (propertySchema.dataType === undefined) {
       const type = Reflect.getMetadata("design:type", target, propertyName);