Release 3.6.0

build/default.conf

@@ -14,6 +14,11 @@ server {
         try_files $uri /assets/$1 =404;
     }
 
+    # Service Worker requests should not be changed
+    location ~* ^/ngsw {
+        try_files $uri =404;
+    }
+
     location /de {
         index  index.html index.htm;
         try_files $uri $uri/ /de/index.html;
@@ -29,9 +34,9 @@ server {
         try_files $uri $uri/ /en-US/index.html;
     }
 
-    # Set the default language when nothing is entered in the url
+    # Append the default language when no other path matches (e.g. requesting root index.html)
     location / {
-        try_files $uri /${DEFAULT_LANGUAGE}/index.html;
+        rewrite ^/ /${DEFAULT_LANGUAGE}/$uri;
     }
 
     #error_page  404              /404.html;

build/merge-service-workers.js

@@ -41,6 +41,8 @@ locales.forEach((locale) => {
 });
 
 combined.index = "/index.html";
+// add root index.html to correctly cache direct app entry (e.g. without en-US)
+combined["assetGroups"][0]["urls"].push("/index.html");
 
 fs.writeFileSync(`${distFolder}/ngsw.json`, JSON.stringify(combined));
 fs.unlinkSync(`${distFolder}/${firstLocale}/ngsw.json`);
@@ -51,7 +53,9 @@ const swFile = fs
   .toString();
 const patchedSw = swFile.replace(
   "return this.handleFetch(this.adapter.newRequest(this.indexUrl), context);",
-  "return this.handleFetch(this.adapter.newRequest('/' + this.adapter.normalizeUrl(req.url).split('/')[1] + '/index.html'), context);"
+  `const locale = this.adapter.normalizeUrl(req.url).split("/")[1];
+                    const url = locale ? "/" + locale + "/index.html": "/index.html";
+                    return this.handleFetch(this.adapter.newRequest(url), context);`
 );
 fs.writeFileSync(`${distFolder}/ngsw-worker.js`, patchedSw);
 fs.unlinkSync(`${distFolder}/${firstLocale}/ngsw-worker.js`);

package.json

@@ -44,7 +44,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@ngneat/until-destroy": "^8.1.4",
-    "@sentry/browser": "^6.19.4",
+    "@sentry/browser": "^6.19.6",
     "angulartics2": "^10.1.0",
     "crypto-js": "^4.1.1",
     "deep-object-diff": "^1.1.7",
@@ -53,11 +53,11 @@
     "json-query": "^2.2.2",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
-    "moment": "^2.29.2",
+    "moment": "^2.29.3",
     "ngx-markdown": "^11.2.0",
     "ngx-papaparse": "^5.1.0",
-    "pouchdb-adapter-memory": "^7.2.2",
-    "pouchdb-browser": "^7.2.2",
+    "pouchdb-adapter-memory": "^7.3.0",
+    "pouchdb-browser": "^7.3.0",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.7",
     "tslib": "^2.3.1",

src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.html

@@ -1,13 +1,13 @@
 <!-- Individual Student's Page -->
-<div *ngIf="entries?.length > 0">
+<div *ngIf="children?.length > 0">
   <div class="attendance-progress-bar">
     <mat-progress-bar
       class="filler"
       mode="determinate"
-      [value]="(currentIndex / entries.length) * 100"
+      [value]="(currentIndex / children.length) * 100"
     ></mat-progress-bar>
-    <div class="progress-label" [style.visibility]="currentIndex < entries.length ? 'visible' : 'hidden'">
-      {{ currentIndex+1 }} / {{ entries.length }}
+    <div class="progress-label" [style.visibility]="currentIndex < children.length ? 'visible' : 'hidden'">
+      {{ currentIndex+1 }} / {{ children.length }}
     </div>
 
     <div class="navigation-bar">
@@ -28,7 +28,7 @@
   </div>
 
   <div
-    *ngIf="!isFinished"
+    *ngIf="!isFinished && currentAttendance"
     fxLayout="column"
     fxLayoutAlign="space-between stretch"
     class="options-wrapper"
@@ -38,13 +38,13 @@
       *ngFor="let option of availableStatus"
       (click)="markAttendance(option)"
       [ngClass]="
-        currentStatus.id === option.id
+        currentAttendance.status.id === option.id
           ? option.style
           : ''
       "
     >
       <fa-icon
-        *ngIf="currentStatus.id === option.id"
+        *ngIf="currentAttendance.status.id === option.id"
         icon="check"
       ></fa-icon>
       {{ option.label }}
@@ -53,20 +53,32 @@
 </div>
 
 <!-- Completion Page -->
-<div *ngIf="isFinished" class="roll-call-complete" [@completeRollCall] (click)="finish()">
-  <fa-icon icon="check-circle" class="roll-call-complete-icon"></fa-icon>
-  <div
-    i18n="
-      Attendance completed|shows when the user has registered the attendance of
-      all children
-    "
-  >
-    Attendance completed.
+<div *ngIf="isFinished">
+  <div class="roll-call-complete" [@completeRollCall]>
+    <fa-icon icon="check-circle" class="roll-call-complete-icon"></fa-icon>
+    <div
+      i18n="
+        Attendance completed|shows when the user has registered the attendance of
+        all children
+      "
+      (click)="finish()"
+    >
+      Attendance completed.
+    </div>
+
+    <button
+      (click)="showDetails()"
+      class="finished-screen-button"
+      mat-stroked-button
+      i18n="Open details of recorded event for review"
+    >
+      Review Details
+    </button>
   </div>
 
   <button
     (click)="finish()"
-    class="completed-button"
+    class="finished-screen-button full-width"
     mat-stroked-button
     i18n="Back to overview button after finishing a roll call"
   >

src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.scss

@@ -62,6 +62,10 @@
   justify-content: center;
 }
 
-.completed-button {
+.finished-screen-button {
   margin-top: 1em;
 }
+
+.full-width {
+  width: 100%;
+}

src/app/child-dev-project/attendance/add-day-attendance/roll-call/roll-call.component.spec.ts

@@ -115,7 +115,7 @@ describe("RollCallComponent", () => {
     component.ngOnChanges(dummyChanges);
     tick();
 
-    expect(component.entries.map((e) => e.child)).toEqual([participant1]);
+    expect(component.children).toEqual([participant1]);
     expect(component.eventEntity.children).not.toContain(nonExistingChildId);
     expect(mockLoggingService.warn).toHaveBeenCalled();
     flush();
@@ -284,9 +284,7 @@ describe("RollCallComponent", () => {
     });
     tick();
 
-    expect(component.entries.map((e) => e.child)).toEqual(
-      expectedParticipantsOrder
-    );
+    expect(component.children).toEqual(expectedParticipantsOrder);
     expect(component.eventEntity.children).toEqual(
       expectedParticipantsOrder.map((p) => p.getId())
     );

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

@@ -19,6 +19,8 @@ import { Child } from "../../../children/model/child";
 import { LoggingService } from "../../../../core/logging/logging.service";
 import { FormGroup } from "@angular/forms";
 import { sortByAttribute } from "../../../../utils/utils";
+import { NoteDetailsComponent } from "../../../notes/note-details/note-details.component";
+import { FormDialogService } from "../../../../core/form-dialog/form-dialog.service";
 
 /**
  * Displays the participants of the given event one by one to mark attendance status.
@@ -58,40 +60,27 @@ export class RollCallComponent implements OnChanges {
   @Output() exit = new EventEmitter();
 
   /**
-   * private model; should only be set within this component
-   * @private
+   * The index, child and attendance that is currently being processed
    */
-  private _currentIndex: number;
+  currentIndex = 0;
+  currentChild: Child;
+  currentAttendance: EventAttendance;
   /**
    * whether any changes have been made to the model
    */
   isDirty: boolean = false;
-  /**
-   * The index of the child that is currently being processed
-   */
-  get currentIndex(): number {
-    return this._currentIndex;
-  }
-  get currentStatus(): AttendanceStatusType {
-    return this.entries[this.currentIndex].attendance.status;
-  }
-  set currentStatus(newStatus: AttendanceStatusType) {
-    this.entries[this.currentIndex].attendance.status = newStatus;
-  }
-  get currentChild(): Child {
-    return this.entries[this.currentIndex].child;
-  }
 
   /** options available for selecting an attendance status */
   availableStatus: AttendanceStatusType[];
 
-  entries: { child: Child; attendance: EventAttendance }[] = [];
+  children: Child[] = [];
   form: FormGroup;
   private transitionInProgress;
 
   constructor(
     private configService: ConfigService,
     private entityMapper: EntityMapperService,
+    private formDialog: FormDialogService,
     private loggingService: LoggingService
   ) {}
 
@@ -115,19 +104,19 @@ export class RollCallComponent implements OnChanges {
    */
   private setInitialIndex() {
     let index = 0;
-    for (const entry of this.entries) {
-      if (!this.eventEntity.getAttendance(entry.child.getId())?.status?.id) {
+    for (const entry of this.children) {
+      if (!this.eventEntity.getAttendance(entry.getId())?.status?.id) {
         break;
       }
       index += 1;
     }
 
     // do not jump to end - if all participants are recorded, start with first instead
-    if (index >= this.entries.length) {
+    if (index >= this.children.length) {
       index = 0;
     }
 
-    this._currentIndex = index;
+    this.goToParticipantWithIndex(index);
   }
 
   private loadAttendanceStatusTypes() {
@@ -137,8 +126,7 @@ export class RollCallComponent implements OnChanges {
   }
 
   private async loadParticipants() {
-    this.entries = [];
-    this._currentIndex = 0;
+    this.children = [];
     for (const childId of this.eventEntity.children) {
       let child;
       try {
@@ -153,10 +141,7 @@ export class RollCallComponent implements OnChanges {
         this.eventEntity.removeChild(childId);
         continue;
       }
-      this.entries.push({
-        child: child,
-        attendance: this.eventEntity.getAttendance(childId),
-      });
+      this.children.push(child);
     }
     this.sortParticipants();
   }
@@ -166,18 +151,16 @@ export class RollCallComponent implements OnChanges {
       return;
     }
 
-    this.entries.sort((a, b) =>
-      sortByAttribute<any>(this.sortParticipantsBy, "asc")(a.child, b.child)
-    );
+    this.children.sort(sortByAttribute<any>(this.sortParticipantsBy, "asc"));
     // also sort the participants in the Note entity itself for display in details view later
-    this.eventEntity.children = this.entries.map((e) => e.child.getId());
+    this.eventEntity.children = this.children.map((e) => e.getId());
   }
 
   markAttendance(status: AttendanceStatusType) {
     if (this.transitionInProgress) {
       return;
     }
-    this.currentStatus = status;
+    this.currentAttendance.status = status;
     this.isDirty = true;
 
     // automatically move to next participant after a short delay giving the user visual feedback on the selected status
@@ -188,10 +171,15 @@ export class RollCallComponent implements OnChanges {
   }
 
   goToParticipantWithIndex(newIndex: number) {
-    this._currentIndex = newIndex;
+    this.currentIndex = newIndex;
 
     if (this.isFinished) {
       this.complete.emit(this.eventEntity);
+    } else {
+      this.currentChild = this.children[this.currentIndex];
+      this.currentAttendance = this.eventEntity.getAttendance(
+        this.currentChild.getId()
+      );
     }
   }
 
@@ -208,14 +196,18 @@ export class RollCallComponent implements OnChanges {
   }
 
   get isLast(): boolean {
-    return this.currentIndex === this.entries.length - 1;
+    return this.currentIndex === this.children.length - 1;
   }
 
   get isFinished(): boolean {
-    return this.currentIndex >= this.entries.length;
+    return this.currentIndex >= this.children.length;
   }
 
   finish() {
     this.exit.emit();
   }
+
+  showDetails() {
+    this.formDialog.openDialog(NoteDetailsComponent, this.eventEntity);
+  }
 }

src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.html

@@ -1,9 +1,13 @@
 <div>
   <span class="indicator {{ value.style }}">&nbsp;</span>
-
   <mat-form-field class="compact-form-field">
-    <mat-select [(ngModel)]="value" (ngModelChange)="valueChange.emit(value)" [disabled]="disabled">
-      <mat-option *ngFor="let s of statusValues" [value]="s">
+    <mat-select
+      [(ngModel)]="value"
+      (ngModelChange)="valueChange.emit(value)"
+      [disabled]="disabled"
+      [compareWith]="compareFn"
+    >
+      <mat-option *appConfigurableEnum="let s of statusID" [value]="s">
         <span class="indicator {{ s.style }}">&nbsp;</span>
         {{ s.label }}
       </mat-option>

src/app/child-dev-project/attendance/attendance-status-select/attendance-status-select.component.ts

@@ -1,14 +1,10 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { ConfigService } from "../../../core/config/config.service";
-import {
-  CONFIGURABLE_ENUM_CONFIG_PREFIX,
-  ConfigurableEnumConfig,
-} from "../../../core/configurable-enum/configurable-enum.interface";
 import {
   ATTENDANCE_STATUS_CONFIG_ID,
   AttendanceStatusType,
   NullAttendanceStatusType,
 } from "../model/attendance-status";
+import { compareEnums } from "../../../utils/utils";
 
 @Component({
   selector: "app-attendance-status-select",
@@ -19,12 +15,6 @@ export class AttendanceStatusSelectComponent {
   @Input() value: AttendanceStatusType = NullAttendanceStatusType;
   @Input() disabled: boolean = false;
   @Output() valueChange = new EventEmitter<AttendanceStatusType>();
-
-  statusValues: AttendanceStatusType[];
-
-  constructor(private configService: ConfigService) {
-    this.statusValues = this.configService.getConfig<
-      ConfigurableEnumConfig<AttendanceStatusType>
-    >(CONFIGURABLE_ENUM_CONFIG_PREFIX + ATTENDANCE_STATUS_CONFIG_ID);
-  }
+  statusID = ATTENDANCE_STATUS_CONFIG_ID;
+  compareFn = compareEnums;
 }