fix(forms): display label for photo fields

src/app/child-dev-project/children/model/child.ts

@@ -109,7 +109,7 @@ export class Child extends Entity {
 
   @DatabaseField({
     dataType: "file",
-    label: $localize`:Label for the filename of a photo of a child:Photo Filename`,
+    label: $localize`:Label for the file field of a photo of a child:Photo`,
     editComponent: "EditPhoto",
   })
   photo: string;

src/app/features/file/edit-photo/edit-photo.component.html

@@ -5,13 +5,22 @@
   accept="image/*"
   #fileUpload
 />
-<img
-  [src]="imgPath"
-  alt="profile photo"
-  class="child-pic"
-  (click)="openPopup()"
-/>
-<div>
+
+<mat-form-field
+  floatLabel="always"
+  [class.form-field-disabled]="!formControl.enabled"
+>
+  <mat-label>{{ label }}</mat-label>
+
+  <img
+    [src]="imgPath"
+    alt="profile photo"
+    class="image"
+    (click)="openPopup()"
+  />
+  <input matInput readonly style="display: none" [formControl]="formControl" />
+
+  <!-- edit mode -->
   <button
     *ngIf="formControl.value && formControl.enabled"
     type="button"
@@ -32,4 +41,8 @@
   >
     <fa-icon icon="upload"></fa-icon>
   </button>
-</div>
+
+  <mat-error>
+    <app-error-hint [form]="formControl"></app-error-hint>
+  </mat-error>
+</mat-form-field>

src/app/features/file/edit-photo/edit-photo.component.scss

@@ -1,13 +1,14 @@
-.child-pic {
+.image {
   width: 150px;
   height: 150px;
   border-radius: 50%;
   object-fit: cover;
   cursor: pointer;
+  background: lightgrey;
+  display: block;
 }
 
-:host {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+:host .form-field-disabled ::ng-deep .mat-mdc-text-field-wrapper {
+  // hide form-field bottom line if not in edit mode
+  --mdc-filled-text-field-active-indicator-height: 0;
 }

src/app/features/file/edit-photo/edit-photo.component.ts

@@ -13,13 +13,27 @@ import { MatButtonModule } from "@angular/material/button";
 import { resizeImage } from "../file-utils";
 import { MatDialog } from "@angular/material/dialog";
 import { ImagePopupComponent } from "./image-popup/image-popup.component";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatInputModule } from "@angular/material/input";
+import { ReactiveFormsModule } from "@angular/forms";
+import { ErrorHintComponent } from "../../../core/common-components/error-hint/error-hint.component";
 
 @DynamicComponent("EditPhoto")
 @Component({
   selector: "app-edit-photo",
   templateUrl: "./edit-photo.component.html",
   styleUrls: ["./edit-photo.component.scss"],
-  imports: [MatButtonModule, MatTooltipModule, FontAwesomeModule, NgIf],
+  imports: [
+    MatButtonModule,
+    MatTooltipModule,
+    FontAwesomeModule,
+    NgIf,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+    EditFileComponent,
+    ErrorHintComponent,
+  ],
   standalone: true,
 })
 export class EditPhotoComponent extends EditFileComponent implements OnInit {