From 8537d868220fdf7401c011822f6363e7c8ac729f Mon Sep 17 00:00:00 2001
From: Abhishek Negi <108608673+Abhinegi2@users.noreply.github.com>
Date: Fri, 3 Jan 2025 21:19:11 +0530
Subject: [PATCH] fix(Admin UI): manage related public forms directly from
 Admin Entity view (#2740)

closes #2708

---------

Co-authored-by: Sebastian Leidig <sebastian@aam-digital.com>
---
 .../admin-entity-details.component.ts         |  2 --
 .../admin-entity-list.component.ts            | 11 ++-----
 .../admin-entity-public-forms-component.html  | 20 +++++++++++++
 .../admin-entity-public-forms-component.scss  |  0
 ...dmin-entity-public-forms-component.spec.ts | 26 +++++++++++++++++
 .../admin-entity-public-forms-component.ts    | 29 +++++++++++++++++++
 ...admin-entity-general-settings.component.ts |  5 +---
 .../admin-entity/admin-entity.component.html  | 13 ++++++++-
 .../admin-entity/admin-entity.component.ts    |  4 ++-
 .../demo-public-form-generator.service.ts     |  3 +-
 10 files changed, 95 insertions(+), 18 deletions(-)
 create mode 100644 src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.html
 create mode 100644 src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.scss
 create mode 100644 src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.spec.ts
 create mode 100644 src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.ts

diff --git a/src/app/core/admin/admin-entity-details/admin-entity-details/admin-entity-details.component.ts b/src/app/core/admin/admin-entity-details/admin-entity-details/admin-entity-details.component.ts
index 85f1a9828b..c0e5a2a69f 100644
--- a/src/app/core/admin/admin-entity-details/admin-entity-details/admin-entity-details.component.ts
+++ b/src/app/core/admin/admin-entity-details/admin-entity-details/admin-entity-details.component.ts
@@ -9,7 +9,6 @@ import { NgForOf, NgIf } from "@angular/common";
 import { MatTabsModule } from "@angular/material/tabs";
 import { FaIconComponent } from "@fortawesome/angular-fontawesome";
 import { MatButtonModule } from "@angular/material/button";
-import { EntityTypeLabelPipe } from "../../../common-components/entity-type-label/entity-type-label.pipe";
 import { ViewTitleComponent } from "../../../common-components/view-title/view-title.component";
 import { AdminSectionHeaderComponent } from "../../building-blocks/admin-section-header/admin-section-header.component";
 import { AdminEntityFormComponent } from "../admin-entity-form/admin-entity-form.component";
@@ -31,7 +30,6 @@ import { AdminTabTemplateDirective } from "../../building-blocks/admin-tabs/admi
     MatTabsModule,
     FaIconComponent,
     MatButtonModule,
-    EntityTypeLabelPipe,
     ViewTitleComponent,
     AdminSectionHeaderComponent,
     AdminEntityFormComponent,
diff --git a/src/app/core/admin/admin-entity-list/admin-entity-list.component.ts b/src/app/core/admin/admin-entity-list/admin-entity-list.component.ts
index 1056392ab7..43153159e9 100644
--- a/src/app/core/admin/admin-entity-list/admin-entity-list.component.ts
+++ b/src/app/core/admin/admin-entity-list/admin-entity-list.component.ts
@@ -7,9 +7,6 @@ import {
   ViewChild,
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { FilterComponent } from "../../filter/filter/filter.component";
-import { MatTab, MatTabGroup } from "@angular/material/tabs";
-import { EntitiesTableComponent } from "../../common-components/entities-table/entities-table.component";
 import { EntityConstructor } from "../../entity/model/entity";
 import {
   EntityListConfig,
@@ -29,7 +26,6 @@ import {
   moveItemInArray,
 } from "@angular/cdk/drag-drop";
 import { FaIconComponent } from "@fortawesome/angular-fontawesome";
-import { MatIconButton } from "@angular/material/button";
 import { MatFormField, MatLabel } from "@angular/material/form-field";
 import { MatSelect } from "@angular/material/select";
 import { AdminTabsComponent } from "../building-blocks/admin-tabs/admin-tabs.component";
@@ -41,16 +37,11 @@ import { ViewTitleComponent } from "../../common-components/view-title/view-titl
   standalone: true,
   imports: [
     CommonModule,
-    FilterComponent,
-    MatTabGroup,
-    EntitiesTableComponent,
-    MatTab,
     EntityFieldsMenuComponent,
     MatTableModule,
     EntityFieldLabelComponent,
     CdkDrag,
     FaIconComponent,
-    MatIconButton,
     CdkDropList,
     MatFormField,
     MatLabel,
@@ -92,11 +83,13 @@ export class AdminEntityListComponent implements OnChanges, AfterViewInit {
       this.initAvailableFields();
     }
   }
+
   ngAfterViewInit() {
     const placeholderElement = this.placeholder.element.nativeElement;
     placeholderElement.style.display = "none";
     placeholderElement.parentNode.removeChild(placeholderElement);
   }
+
   /**
    * Config allows to not have columnGroups and by default then display all `columns`,
    * create an initial columnGroup in this case to allow full editing.
diff --git a/src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.html b/src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.html
new file mode 100644
index 0000000000..c19d8dab8f
--- /dev/null
+++ b/src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.html
@@ -0,0 +1,20 @@
+<div class="hint-banner" i18n>
+  You can share the link to a "Public Form" with people who do not have an
+  account or embed it in your website. People can submit new records through
+  this form without logging in. For example, you can let participants
+  self-register this way and then review their data later.
+</div>
+
+<app-view-title [disableBackButton]="true" [displayInPlace]="true" i18n>
+  Public Forms
+</app-view-title>
+
+<div>
+  <app-related-entities
+    entityType="PublicFormConfig"
+    property="entity"
+    [columns]="['title', 'route', 'description']"
+    [entity]="dummyEntity"
+    clickMode="popup-details"
+  ></app-related-entities>
+</div>
diff --git a/src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.scss b/src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.spec.ts b/src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.spec.ts
new file mode 100644
index 0000000000..cae1649bc6
--- /dev/null
+++ b/src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.spec.ts
@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { AdminEntityPublicFormsComponent } from "./admin-entity-public-forms-component";
+import { MockedTestingModule } from "../../../utils/mocked-testing.module";
+import { TestEntity } from "../../../utils/test-utils/TestEntity";
+
+describe("AdminEntityPublicFormsComponent", () => {
+  let component: AdminEntityPublicFormsComponent;
+  let fixture: ComponentFixture<AdminEntityPublicFormsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        AdminEntityPublicFormsComponent,
+        MockedTestingModule.withState(),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AdminEntityPublicFormsComponent);
+    component = fixture.componentInstance;
+    component.entityConstructor = TestEntity;
+  });
+
+  it("should create the component", () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.ts b/src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.ts
new file mode 100644
index 0000000000..cd12917733
--- /dev/null
+++ b/src/app/core/admin/admin-entity-public-forms/admin-entity-public-forms-component.ts
@@ -0,0 +1,29 @@
+import { Component, Input } from "@angular/core";
+import { EntityConstructor } from "app/core/entity/model/entity";
+import { ViewTitleComponent } from "../../common-components/view-title/view-title.component";
+import { RelatedEntitiesComponent } from "../../entity-details/related-entities/related-entities.component";
+
+@Component({
+  selector: "app-admin-entity-public-forms-component",
+  standalone: true,
+  templateUrl: "./admin-entity-public-forms-component.html",
+  styleUrls: [
+    "./admin-entity-public-forms-component.scss",
+    "../admin-entity/admin-entity-styles.scss",
+  ],
+  imports: [ViewTitleComponent, RelatedEntitiesComponent],
+})
+export class AdminEntityPublicFormsComponent {
+  /**
+   * The entity type for which to display public forms for.
+   */
+  @Input() entityConstructor: EntityConstructor;
+
+  /**
+   * Fake entity instance to correctly filter/link related PublicFormConfigs
+   * using the standard related-entities component.
+   */
+  protected dummyEntity: any = {
+    getId: () => this.entityConstructor.ENTITY_TYPE,
+  };
+}
diff --git a/src/app/core/admin/admin-entity/admin-entity-general-settings/admin-entity-general-settings.component.ts b/src/app/core/admin/admin-entity/admin-entity-general-settings/admin-entity-general-settings.component.ts
index 5d8a2728ba..750966b981 100644
--- a/src/app/core/admin/admin-entity/admin-entity-general-settings/admin-entity-general-settings.component.ts
+++ b/src/app/core/admin/admin-entity/admin-entity-general-settings/admin-entity-general-settings.component.ts
@@ -25,8 +25,6 @@ import { EntitySchemaField } from "app/core/entity/schema/entity-schema-field";
 import { AdminEntityService } from "../../admin-entity.service";
 import { StringDatatype } from "../../../basic-datatypes/string/string.datatype";
 import { HelpButtonComponent } from "../../../common-components/help-button/help-button.component";
-import { MatSort } from "@angular/material/sort";
-import { EntityFieldLabelComponent } from "../../../common-components/entity-field-label/entity-field-label.component";
 import { AnonymizeOptionsComponent } from "../../admin-entity-details/admin-entity-field/anonymize-options/anonymize-options.component";
 import { FaIconComponent } from "@fortawesome/angular-fontawesome";
 
@@ -54,8 +52,6 @@ import { FaIconComponent } from "@fortawesome/angular-fontawesome";
     CommonModule,
     MatTooltipModule,
     HelpButtonComponent,
-    MatSort,
-    EntityFieldLabelComponent,
     AnonymizeOptionsComponent,
     FaIconComponent,
   ],
@@ -162,6 +158,7 @@ export class AdminEntityGeneralSettingsComponent implements OnInit {
       ...unselectedOptions,
     ];
   }
+
   objectToLabel = (v: SimpleDropdownValue) => v?.label;
   objectToValue = (v: SimpleDropdownValue) => v?.key;
 }
diff --git a/src/app/core/admin/admin-entity/admin-entity.component.html b/src/app/core/admin/admin-entity/admin-entity.component.html
index 6bcf628e7b..3b912f7c35 100644
--- a/src/app/core/admin/admin-entity/admin-entity.component.html
+++ b/src/app/core/admin/admin-entity/admin-entity.component.html
@@ -39,7 +39,13 @@
       >
         General Settings
       </mat-list-item>
-
+      <mat-list-item
+        (click)="mode = 'publicForm'"
+        [activated]="mode === 'publicForm'"
+        i18n="admin entity: nav item"
+      >
+        Public Forms
+      </mat-list-item>
       <app-beta-feature></app-beta-feature>
     </mat-nav-list>
 
@@ -74,6 +80,11 @@
             [(generalSettings)]="configEntitySettings"
           ></app-admin-entity-general-settings>
         }
+        @case ("publicForm") {
+          <app-admin-entity-public-forms-component
+            [entityConstructor]="entityConstructor"
+          ></app-admin-entity-public-forms-component>
+        }
       }
     </div>
   </div>
diff --git a/src/app/core/admin/admin-entity/admin-entity.component.ts b/src/app/core/admin/admin-entity/admin-entity.component.ts
index 8873c2d9f6..80e94f9105 100644
--- a/src/app/core/admin/admin-entity/admin-entity.component.ts
+++ b/src/app/core/admin/admin-entity/admin-entity.component.ts
@@ -26,6 +26,7 @@ import { AdminEntityGeneralSettingsComponent } from "./admin-entity-general-sett
 import { BetaFeatureComponent } from "../../../features/coming-soon/beta-feature/beta-feature.component";
 import { DynamicComponentConfig } from "../../config/dynamic-components/dynamic-component-config.interface";
 import { AdminEntityService } from "../admin-entity.service";
+import { AdminEntityPublicFormsComponent } from "../admin-entity-public-forms/admin-entity-public-forms-component";
 
 @Component({
   selector: "app-admin-entity",
@@ -41,6 +42,7 @@ import { AdminEntityService } from "../admin-entity.service";
     AdminEntityDetailsComponent,
     AdminEntityGeneralSettingsComponent,
     BetaFeatureComponent,
+    AdminEntityPublicFormsComponent,
   ],
   templateUrl: "./admin-entity.component.html",
   styleUrl: "./admin-entity.component.scss",
@@ -53,7 +55,7 @@ export class AdminEntityComponent implements OnInit {
   configDetailsView: DynamicComponentConfig<EntityDetailsConfig>;
   configListView: DynamicComponentConfig<EntityListConfig>;
   configEntitySettings: EntityConfig;
-  protected mode: "details" | "list" | "general" = "details";
+  protected mode: "details" | "list" | "general" | "publicForm" = "details";
 
   @ContentChild(TemplateRef) templateRef: TemplateRef<any>;
 
diff --git a/src/app/features/public-form/demo-public-form-generator.service.ts b/src/app/features/public-form/demo-public-form-generator.service.ts
index 88e23c7e35..0406652bae 100644
--- a/src/app/features/public-form/demo-public-form-generator.service.ts
+++ b/src/app/features/public-form/demo-public-form-generator.service.ts
@@ -15,10 +15,11 @@ export class DemoPublicFormGeneratorService extends DemoDataGenerator<PublicForm
   }
 
   protected generateEntities(): PublicFormConfig[] {
-    const form = new PublicFormConfig("test");
+    const form = new PublicFormConfig();
     form.title = $localize`Example form`;
     form.description = $localize`This is a form that can be shared as a link or embedded in a website. It can be filled by users without having an account. For example you can let participants self-register their details and just review the records within Aam Digital.`;
     form.entity = "Child";
+    form.route = "test";
     form.columns = [
       {
         fields: [