Note Details redesign

src/app/child-dev-project/attendance/activity-attendance-section/activity-attendance-section.component.ts

@@ -6,7 +6,6 @@ import { formatPercent, NgIf } from "@angular/common";
 import { ActivityAttendance } from "../model/activity-attendance";
 import moment from "moment";
 import { FormFieldConfig } from "../../../core/entity-components/entity-form/entity-form/FormConfig";
-import { FormDialogService } from "../../../core/form-dialog/form-dialog.service";
 import { DynamicComponent } from "../../../core/view/dynamic-components/dynamic-component.decorator";
 import { MatProgressBarModule } from "@angular/material/progress-bar";
 import { MatSlideToggleModule } from "@angular/material/slide-toggle";
@@ -15,6 +14,7 @@ import { MatButtonModule } from "@angular/material/button";
 import { EntitySubrecordComponent } from "../../../core/entity-components/entity-subrecord/entity-subrecord/entity-subrecord.component";
 import { AttendanceCalendarComponent } from "../attendance-calendar/attendance-calendar.component";
 import { AttendanceSummaryComponent } from "../attendance-summary/attendance-summary.component";
+import { MatDialog } from "@angular/material/dialog";
 
 @DynamicComponent("ActivityAttendanceSection")
 @Component({
@@ -81,7 +81,7 @@ export class ActivityAttendanceSectionComponent implements OnInit {
   constructor(
     private attendanceService: AttendanceService,
     @Inject(LOCALE_ID) private locale: string,
-    private formDialog: FormDialogService
+    private dialog: MatDialog
   ) {}
 
   ngOnInit() {
@@ -149,8 +149,11 @@ export class ActivityAttendanceSectionComponent implements OnInit {
   }
 
   showDetails(activity: ActivityAttendance) {
-    this.formDialog.openDialog(AttendanceDetailsComponent, activity, {
-      forChild: this.forChild,
+    this.dialog.open(AttendanceDetailsComponent, {
+      data: {
+        forChild: this.forChild,
+        attendance: activity,
+      },
     });
   }
 

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

@@ -192,7 +192,7 @@ export class RollCallSetupComponent implements OnInit {
     newNote.authors = [this.sessionService.getCurrentUser().name];
 
     this.formDialog
-      .openDialog(NoteDetailsComponent, newNote)
+      .openFormPopup(newNote, [], NoteDetailsComponent)
       .afterClosed()
       .subscribe((createdNote: Note) => {
         if (createdNote) {

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

@@ -252,6 +252,6 @@ export class RollCallComponent implements OnChanges {
   }
 
   showDetails() {
-    this.formDialog.openDialog(NoteDetailsComponent, this.eventEntity);
+    this.formDialog.openFormPopup(this.eventEntity, [], NoteDetailsComponent);
   }
 }

src/app/child-dev-project/attendance/attendance-calendar/attendance-calendar.component.ts

@@ -217,6 +217,6 @@ export class AttendanceCalendarComponent implements OnChanges {
   }
 
   showEventDetails(selectedEvent: Note) {
-    this.formDialog.openDialog(NoteDetailsComponent, selectedEvent);
+    this.formDialog.openFormPopup(selectedEvent, [], NoteDetailsComponent);
   }
 }

src/app/child-dev-project/attendance/attendance-components.ts

@@ -29,4 +29,11 @@ export const attendanceComponents: ComponentTuple[] = [
         "./dashboard-widgets/attendance-week-dashboard/attendance-week-dashboard.component"
       ).then((c) => c.AttendanceWeekDashboardComponent),
   ],
+  [
+    "EditAttendance",
+    () =>
+      import("./edit-attendance/edit-attendance.component").then(
+        (c) => c.EditAttendanceComponent
+      ),
+  ],
 ];

src/app/child-dev-project/attendance/attendance-details/attendance-details.component.html

@@ -15,113 +15,110 @@
   ~     along with ndb-core.  If not, see <http://www.gnu.org/licenses/>.
   -->
 
-<app-form-dialog-wrapper #dialogForm [entity]="entity" [readonly]="true">
-  <h1 mat-dialog-title>
-    <app-dialog-close mat-dialog-close></app-dialog-close>
-    {{ entity?.activity?.title }}: {{ entity.periodFrom | date: "shortDate" }} -
-    {{ entity.periodTo | date: "shortDate" }}
-  </h1>
-
-  <form #entityForm="ngForm">
-    <div
-      class="summary w-{{ entity.getWarningLevel() }}"
-      i18n="
+<h1 mat-dialog-title>
+  <app-dialog-close mat-dialog-close></app-dialog-close>
+  {{ entity?.activity?.title }}: {{ entity.periodFrom | date: "shortDate" }} -
+  {{ entity.periodTo | date: "shortDate" }}
+</h1>
+<div mat-dialog-content>
+  <div
+    class="summary w-{{ entity.getWarningLevel() }}"
+    i18n="
         Attendance|Attendance of a child (in percent) or the average of the
         event (in percent)
       "
-    >
-      Attendance:
-      {{
-      (forChild
-          ? entity?.getAttendancePercentage(forChild)
-          : entity?.getAttendancePercentageAverage()
-      ) | percent: "1.0-0"
-      }}
-    </div>
+  >
+    Attendance:
+    {{
+    (forChild
+        ? entity?.getAttendancePercentage(forChild)
+        : entity?.getAttendancePercentageAverage()
+    ) | percent: "1.0-0"
+    }}
+  </div>
 
-    <div class="flex-row flex-wrap gap-regular" *ngIf="forChild">
-      <mat-form-field>
-        <input
-          matInput
-          type="number"
-          i18n-placeholder="days present|How many days a child was present"
-          placeholder="days present"
-          [value]="entity.countEventsPresent(forChild)"
-          readonly
-        />
-      </mat-form-field>
+  <div class="flex-row flex-wrap gap-regular" *ngIf="forChild">
+    <mat-form-field>
+      <input
+        matInput
+        type="number"
+        i18n-placeholder="days present|How many days a child was present"
+        placeholder="days present"
+        [value]="entity.countEventsPresent(forChild)"
+        readonly
+      />
+    </mat-form-field>
 
-      <mat-form-field>
-        <input
-          matInput
-          type="number"
-          i18n-placeholder="days absent|How many days a child was absent"
-          placeholder="days absent"
-          [value]="entity.countEventsAbsent(forChild)"
-          readonly
-        />
-      </mat-form-field>
+    <mat-form-field>
+      <input
+        matInput
+        type="number"
+        i18n-placeholder="days absent|How many days a child was absent"
+        placeholder="days absent"
+        [value]="entity.countEventsAbsent(forChild)"
+        readonly
+      />
+    </mat-form-field>
 
-      <mat-form-field>
-        <input
-          matInput
-          type="number"
-          i18n-placeholder="days absent|How many days the presence or absence of a child is unknown"
-          placeholder="unknown status"
-          [value]="entity.countEventsWithUnknownStatus(forChild)"
-          readonly
-        />
-      </mat-form-field>
-    </div>
+    <mat-form-field>
+      <input
+        matInput
+        type="number"
+        i18n-placeholder="days absent|How many days the presence or absence of a child is unknown"
+        placeholder="unknown status"
+        [value]="entity.countEventsWithUnknownStatus(forChild)"
+        readonly
+      />
+    </mat-form-field>
+  </div>
 
-    <div class="flex-row flex-wrap gap-regular" *ngIf="!forChild">
-      <mat-form-field>
-        <input
-          matInput
-          type="number"
-          i18n-placeholder="Total present|How many children were present"
-          placeholder="Total present"
-          [value]="entity.countTotalPresent()"
-          readonly
-        />
-      </mat-form-field>
+  <div class="flex-row flex-wrap gap-regular" *ngIf="!forChild">
+    <mat-form-field>
+      <input
+        matInput
+        type="number"
+        i18n-placeholder="Total present|How many children were present"
+        placeholder="Total present"
+        [value]="entity.countTotalPresent()"
+        readonly
+      />
+    </mat-form-field>
 
-      <mat-form-field>
-        <input
-          matInput
-          type="number"
-          i18n-placeholder="Total absent|How many children were absent"
-          placeholder="Total absent"
-          [value]="entity.countTotalAbsent()"
-          readonly
-        />
-      </mat-form-field>
+    <mat-form-field>
+      <input
+        matInput
+        type="number"
+        i18n-placeholder="Total absent|How many children were absent"
+        placeholder="Total absent"
+        [value]="entity.countTotalAbsent()"
+        readonly
+      />
+    </mat-form-field>
 
-      <mat-form-field>
-        <input
-          matInput
-          type="number"
-          i18n-placeholder="Total unknown|How many children have an unknown presence or absence status"
-          placeholder="Total unknown"
-          [value]="entity.countEventsWithUnknownStatus()"
-          readonly
-        />
-      </mat-form-field>
-    </div>
+    <mat-form-field>
+      <input
+        matInput
+        type="number"
+        i18n-placeholder="Total unknown|How many children have an unknown presence or absence status"
+        placeholder="Total unknown"
+        [value]="entity.countEventsWithUnknownStatus()"
+        readonly
+      />
+    </mat-form-field>
+  </div>
 
-    <app-entity-subrecord
-      [records]="entity.events"
-      [columns]="eventsColumns"
-      clickMode="none"
-      (rowClick)="showEventDetails($event)"
-      [editable]="false"
-    >
-    </app-entity-subrecord>
+  <app-entity-subrecord
+    [records]="entity.events"
+    [columns]="eventsColumns"
+    clickMode="none"
+    (rowClick)="showEventDetails($event)"
+    [editable]="false"
+  >
+  </app-entity-subrecord>
 
-    <app-attendance-calendar
-      [records]="entity.events"
-      [highlightForChild]="forChild"
-      [activity]="entity.activity"
-    ></app-attendance-calendar>
-  </form>
-</app-form-dialog-wrapper>
+  <app-attendance-calendar
+    [records]="entity.events"
+    [highlightForChild]="forChild"
+    [activity]="entity.activity"
+  ></app-attendance-calendar>
+</div>

src/app/child-dev-project/attendance/attendance-details/attendance-details.component.spec.ts

@@ -7,7 +7,7 @@ import {
 } from "../model/activity-attendance";
 import { AttendanceLogicalStatus } from "../model/attendance-status";
 import { RecurringActivity } from "../model/recurring-activity";
-import { MatDialogRef } from "@angular/material/dialog";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { EventNote } from "../model/event-note";
 import { AttendanceService } from "../attendance.service";
 import { MockedTestingModule } from "../../../utils/mocked-testing.module";
@@ -16,43 +16,43 @@ describe("AttendanceDetailsComponent", () => {
   let component: AttendanceDetailsComponent;
   let fixture: ComponentFixture<AttendanceDetailsComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      const mockAttendanceService = jasmine.createSpyObj([
-        "createEventForActivity",
-      ]);
-      mockAttendanceService.createEventForActivity.and.resolveTo(
-        new EventNote()
-      );
+  beforeEach(waitForAsync(() => {
+    const mockAttendanceService = jasmine.createSpyObj([
+      "createEventForActivity",
+    ]);
+    mockAttendanceService.createEventForActivity.and.resolveTo(new EventNote());
 
-      const entity = ActivityAttendance.create(new Date(), [
-        generateEventWithAttendance(
-          [
-            ["1", AttendanceLogicalStatus.PRESENT],
-            ["2", AttendanceLogicalStatus.PRESENT],
-            ["3", AttendanceLogicalStatus.ABSENT],
-          ],
-          new Date("2020-01-01")
-        ),
-        generateEventWithAttendance(
-          [
-            ["1", AttendanceLogicalStatus.PRESENT],
-            ["2", AttendanceLogicalStatus.ABSENT],
-          ],
-          new Date("2020-01-02")
-        ),
-      ]);
-      entity.activity = RecurringActivity.create("Test Activity");
-
-      TestBed.configureTestingModule({
-        imports: [AttendanceDetailsComponent, MockedTestingModule.withState()],
-        providers: [
-          { provide: MatDialogRef, useValue: {} },
-          { provide: AttendanceService, useValue: mockAttendanceService },
+    const entity = ActivityAttendance.create(new Date(), [
+      generateEventWithAttendance(
+        [
+          ["1", AttendanceLogicalStatus.PRESENT],
+          ["2", AttendanceLogicalStatus.PRESENT],
+          ["3", AttendanceLogicalStatus.ABSENT],
+        ],
+        new Date("2020-01-01")
+      ),
+      generateEventWithAttendance(
+        [
+          ["1", AttendanceLogicalStatus.PRESENT],
+          ["2", AttendanceLogicalStatus.ABSENT],
         ],
-      }).compileComponents();
-    })
-  );
+        new Date("2020-01-02")
+      ),
+    ]);
+    entity.activity = RecurringActivity.create("Test Activity");
+
+    TestBed.configureTestingModule({
+      imports: [AttendanceDetailsComponent, MockedTestingModule.withState()],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: AttendanceService, useValue: mockAttendanceService },
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: { attendance: new ActivityAttendance() },
+        },
+      ],
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(AttendanceDetailsComponent);