feat(public forms): custom logo in public form (#2706)

closes #2626
Aam-Digital · Dec 11, 2024 · b521806 · b521806
1 parent 6464c5b
commit b521806
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 3 deletions.
diff --git a/src/app/features/public-form/public-form-config.ts b/src/app/features/public-form/public-form-config.ts
@@ -15,6 +15,14 @@ export class PublicFormConfig extends Entity {
   static override route = "admin/public-form";
   static override toStringAttributes = ["title"];
 
+  @DatabaseField({
+    label: $localize`:PublicFormConfig:Form Logo`,
+    description: $localize`:PublicFormConfig:Add an image to be displayed at the top of the form`,
+    dataType: "file",
+    additional: 300,
+  })
+  logo: string;
+
   @DatabaseField({
     label: $localize`:PublicFormConfig:Title`,
   })

diff --git a/src/app/features/public-form/public-form.component.html b/src/app/features/public-form/public-form.component.html
@@ -1,7 +1,18 @@
 <mat-card>
   <mat-card-header>
-    <mat-card-title>{{ formConfig?.title }}</mat-card-title>
-    <mat-card-subtitle>{{ formConfig?.description }}</mat-card-subtitle>
+    <div>
+      <mat-card-title>{{ formConfig?.title }}</mat-card-title>
+      <div class="public-form-container">
+        @if (formConfig?.logo) {
+          <app-display-img
+            [entity]="formConfig"
+            imgProperty="logo"
+            class="public-form-image"
+          ></app-display-img>
+        }
+      </div>
+      <mat-card-subtitle>{{ formConfig?.description }}</mat-card-subtitle>
+    </div>
   </mat-card-header>
 
   @if (formConfig && form) {

diff --git a/src/app/features/public-form/public-form.component.scss b/src/app/features/public-form/public-form.component.scss
@@ -10,3 +10,13 @@ button {
   margin-left: 2.5%;
   margin-bottom: 10px;
 }
+
+.public-form-container{
+  text-align: center;
+}
+
+.public-form-image {
+  max-width: 100%;
+  height: 100px;
+  object-fit: contain;
+}
diff --git a/src/app/features/public-form/public-form.component.ts b/src/app/features/public-form/public-form.component.ts
@@ -19,13 +19,19 @@ import { FieldGroup } from "../../core/entity-details/form/field-group";
 import { InvalidFormFieldError } from "../../core/common-components/entity-form/invalid-form-field.error";
 import { FormFieldConfig } from "app/core/common-components/entity-form/FormConfig";
 import { DefaultValueConfig } from "../../core/entity/schema/default-value-config";
+import { DisplayImgComponent } from "../file/display-img/display-img.component";
 
 @UntilDestroy()
 @Component({
   selector: "app-public-form",
   templateUrl: "./public-form.component.html",
   styleUrls: ["./public-form.component.scss"],
-  imports: [EntityFormComponent, MatButtonModule, MatCardModule],
+  imports: [
+    EntityFormComponent,
+    MatButtonModule,
+    MatCardModule,
+    DisplayImgComponent,
+  ],
   standalone: true,
 })
 export class PublicFormComponent<E extends Entity> implements OnInit {

diff --git a/src/app/features/public-form/public-form.module.ts b/src/app/features/public-form/public-form.module.ts
@@ -80,6 +80,7 @@ const viewConfigs: ViewConfig[] = [
                       },
                       "entity",
                       "description",
+                      "logo",
                     ],
                   },
                 ],
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,6 +80,7 @@ const viewConfigs: ViewConfig[] = [ @@
                           },
                           "entity",
                           "description",
+                          "logo",
                         ],
                       },
                     ],
@@ Expand Down @@