Photo upload

ngsw-config.json

@@ -42,14 +42,15 @@
       }
     },
     {
-      "name": "childPhotos",
+      "name": "attachments",
       "urls": [
-        "**/child-photos/**"
+        "**/app-attachments/*/*"
       ],
       "cacheConfig": {
         "maxSize": 500,
-        "maxAge": "10d",
-        "strategy": "performance"
+        "maxAge": "100d",
+        "strategy": "freshness",
+        "timeout": "0u"
       }
     }
   ],

src/app/child-dev-project/attendance/activity-card/activity-card.stories.ts

@@ -3,7 +3,6 @@ import { moduleMetadata } from "@storybook/angular";
 import { ActivityCardComponent } from "./activity-card.component";
 import { Note } from "../../notes/model/note";
 import { DemoChildGenerator } from "../../children/demo-data-generators/demo-child-generator.service";
-import { addDefaultChildPhoto } from "../../../../../.storybook/utils/addDefaultChildPhoto";
 import { MatCardModule } from "@angular/material/card";
 import { RecurringActivity } from "../model/recurring-activity";
 import { MatTooltipModule } from "@angular/material/tooltip";
@@ -37,7 +36,6 @@ const demoChildren = [
   DemoChildGenerator.generateEntity("2"),
   DemoChildGenerator.generateEntity("3"),
 ];
-demoChildren.forEach((c) => addDefaultChildPhoto(c));
 
 const simpleEvent = Note.create(new Date(), "some meeting");
 demoChildren.forEach((c) => simpleEvent.addChild(c.getId()));

src/app/child-dev-project/attendance/add-day-attendance/roll-call-setup/roll-call-setup.stories.ts

@@ -1,6 +1,5 @@
 import { Meta, Story } from "@storybook/angular/types-6-0";
 import { DemoChildGenerator } from "../../../children/demo-data-generators/demo-child-generator.service";
-import { addDefaultChildPhoto } from "../../../../../../.storybook/utils/addDefaultChildPhoto";
 import { moduleMetadata } from "@storybook/angular";
 import { RollCallSetupComponent } from "./roll-call-setup.component";
 import moment from "moment";
@@ -32,7 +31,6 @@ const demoChildren = [
   DemoChildGenerator.generateEntity("2"),
   DemoChildGenerator.generateEntity("3"),
 ];
-demoChildren.forEach((c) => addDefaultChildPhoto(c));
 demoChildren.forEach((c) => demoEvent.addChild(c.getId()));
 
 const demoActivities = [

src/app/child-dev-project/children/child-block/child-block-tooltip/child-block-tooltip.component.html

@@ -1,4 +1,5 @@
-<img [src]="entity?.photo?.photo?.value" class="child-pic" alt=""/>
+<app-fa-dynamic-icon *ngIf="!imgPath" [icon]="icon"/>
+<img *ngIf="imgPath" [src]="imgPath" class="child-pic" alt=""/>
 <div>
   <!-- Font-weight is applied as style to override the default -->
   <h3 style="font-weight: bold">{{ entity?.name }}</h3>

src/app/child-dev-project/children/child-block/child-block-tooltip/child-block-tooltip.component.spec.ts

@@ -2,6 +2,8 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { ChildBlockTooltipComponent } from "./child-block-tooltip.component";
 import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing";
+import { FileService } from "../../../../features/file/file.service";
+import { Child } from "../../model/child";
 
 describe("ChildBlockTooltipComponent", () => {
   let component: ChildBlockTooltipComponent;
@@ -10,12 +12,14 @@ describe("ChildBlockTooltipComponent", () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [ChildBlockTooltipComponent, FontAwesomeTestingModule],
+      providers: [{ provide: FileService, useValue: {} }],
     }).compileComponents();
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ChildBlockTooltipComponent);
     component = fixture.componentInstance;
+    component.entity = new Child();
     fixture.detectChanges();
   });
 

src/app/child-dev-project/children/child-block/child-block-tooltip/child-block-tooltip.component.ts

@@ -1,8 +1,11 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 import { Child } from "../../model/child";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 import { NgForOf, NgIf } from "@angular/common";
 import { SchoolBlockComponent } from "../../../schools/school-block/school-block.component";
+import { FaDynamicIconComponent } from "../../../../core/view/fa-dynamic-icon/fa-dynamic-icon.component";
+import { SafeUrl } from "@angular/platform-browser";
+import { FileService } from "../../../../features/file/file.service";
 
 /**
  * Tooltip that is shown when hovering over a child block and the tooltip is enabled.
@@ -11,10 +14,28 @@ import { SchoolBlockComponent } from "../../../schools/school-block/school-block
   selector: "app-child-block-tooltip",
   templateUrl: "./child-block-tooltip.component.html",
   styleUrls: ["./child-block-tooltip.component.scss"],
-  imports: [FontAwesomeModule, NgIf, SchoolBlockComponent, NgForOf],
+  imports: [
+    FontAwesomeModule,
+    NgIf,
+    SchoolBlockComponent,
+    NgForOf,
+    FaDynamicIconComponent,
+  ],
   standalone: true,
 })
-export class ChildBlockTooltipComponent {
+export class ChildBlockTooltipComponent implements OnInit {
   /** The entity to show the tooltip for */
   @Input() entity: Child;
+  icon = Child.icon;
+  imgPath: SafeUrl;
+
+  constructor(private fileService: FileService) {}
+
+  ngOnInit() {
+    if (this.entity.photo) {
+      this.fileService
+        .loadFile(this.entity, "photo")
+        .subscribe((res) => (this.imgPath = res));
+    }
+  }
 }

src/app/child-dev-project/children/child-block/child-block-tooltip/child-block-tooltip.stories.ts

@@ -2,7 +2,6 @@ import { Story, Meta } from "@storybook/angular/types-6-0";
 import { Child } from "../../model/child";
 import { moduleMetadata } from "@storybook/angular";
 import { CommonModule } from "@angular/common";
-import { addDefaultChildPhoto } from "../../../../../../.storybook/utils/addDefaultChildPhoto";
 import { StorybookBaseModule } from "../../../../utils/storybook-base.module";
 import { ChildBlockTooltipComponent } from "./child-block-tooltip.component";
 import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
@@ -19,7 +18,6 @@ export default {
 
 const demoChild = new Child("1");
 demoChild.name = "John Doe";
-addDefaultChildPhoto(demoChild);
 demoChild.projectNumber = "99";
 demoChild.phone = "+49 199 1234567";
 demoChild.schoolClass = "5";

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

@@ -5,7 +5,8 @@
   [class.inactive]="!entity.isActive"
   class="truncate-text container"
 >
-  <img [src]="entity.photo?.photo?.value" class="child-pic" alt=""/>
+  <app-fa-dynamic-icon *ngIf="!imgPath" [icon]="icon" class="margin-right-small"/>
+  <img *ngIf="imgPath" [src]="imgPath" class="child-pic" alt=""/>
   <span class="font-size-rel">{{ entity?.toString() }}</span>
   <span class="subnote" *ngIf="entity?.projectNumber"> ({{ entity?.projectNumber }})</span>
 </span>

src/app/child-dev-project/children/child-block/child-block.component.spec.ts

@@ -4,6 +4,7 @@ import { ChildBlockComponent } from "./child-block.component";
 import { RouterTestingModule } from "@angular/router/testing";
 import { ChildrenService } from "../children.service";
 import { Child } from "../model/child";
+import { FileService } from "app/features/file/file.service";
 
 describe("ChildBlockComponent", () => {
   let component: ChildBlockComponent;
@@ -18,7 +19,10 @@ describe("ChildBlockComponent", () => {
 
     TestBed.configureTestingModule({
       imports: [ChildBlockComponent, RouterTestingModule],
-      providers: [{ provide: ChildrenService, useValue: mockChildrenService }],
+      providers: [
+        { provide: ChildrenService, useValue: mockChildrenService },
+        { provide: FileService, useValue: {} },
+      ],
     }).compileComponents();
   }));
 

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

@@ -5,13 +5,21 @@ import { DynamicComponent } from "../../../core/view/dynamic-components/dynamic-
 import { NgIf } from "@angular/common";
 import { TemplateTooltipDirective } from "../../../core/common-components/template-tooltip/template-tooltip.directive";
 import { ChildBlockTooltipComponent } from "./child-block-tooltip/child-block-tooltip.component";
+import { SafeUrl } from "@angular/platform-browser";
+import { FileService } from "../../../features/file/file.service";
+import { FaDynamicIconComponent } from "../../../core/view/fa-dynamic-icon/fa-dynamic-icon.component";
 
 @DynamicComponent("ChildBlock")
 @Component({
   selector: "app-child-block",
   templateUrl: "./child-block.component.html",
   styleUrls: ["./child-block.component.scss"],
-  imports: [NgIf, TemplateTooltipDirective, ChildBlockTooltipComponent],
+  imports: [
+    NgIf,
+    TemplateTooltipDirective,
+    ChildBlockTooltipComponent,
+    FaDynamicIconComponent,
+  ],
   standalone: true,
 })
 export class ChildBlockComponent implements OnInit {
@@ -24,11 +32,22 @@ export class ChildBlockComponent implements OnInit {
   /** prevent additional details to be displayed in a tooltip on mouse over */
   @Input() tooltipDisabled: boolean;
 
-  constructor(@Optional() private childrenService: ChildrenService) {}
+  imgPath: SafeUrl;
+  icon = Child.icon;
+
+  constructor(
+    private fileService: FileService,
+    @Optional() private childrenService: ChildrenService
+  ) {}
 
   async ngOnInit() {
     if (this.entityId) {
       this.entity = await this.childrenService.getChild(this.entityId);
     }
+    if (this.entity.photo) {
+      this.fileService
+        .loadFile(this.entity, "photo")
+        .subscribe((res) => (this.imgPath = res));
+    }
   }
 }

src/app/child-dev-project/children/child-block/child-block.stories.ts

@@ -3,7 +3,6 @@ import { ChildBlockComponent } from "./child-block.component";
 import { Child } from "../model/child";
 import { moduleMetadata } from "@storybook/angular";
 import { CommonModule } from "@angular/common";
-import { addDefaultChildPhoto } from "../../../../../.storybook/utils/addDefaultChildPhoto";
 import { StorybookBaseModule } from "../../../utils/storybook-base.module";
 
 export default {
@@ -18,7 +17,6 @@ export default {
 
 const demoChild = new Child("1");
 demoChild.name = "John Doe";
-addDefaultChildPhoto(demoChild);
 demoChild.projectNumber = "99";
 demoChild.phone = "+49 199 1234567";
 demoChild.schoolClass = "5";