Task module

src/app/app.module.ts

@@ -82,15 +82,17 @@ import {
   DEFAULT_LANGUAGE,
   LANGUAGE_LOCAL_STORAGE_KEY,
 } from "./core/language/language-statics";
-import { DateAdapter, MAT_DATE_FORMATS } from "@angular/material/core";
+import {DateAdapter, MAT_DATE_FORMATS} from "@angular/material/core";
 import {
   DATE_FORMATS,
   DateAdapterWithFormatting,
 } from "./core/language/date-adapter-with-formatting";
-import { FileModule } from "./features/file/file.module";
-import { ConfigSetupModule } from "./core/config-setup/config-setup.module";
-import { LocationModule } from "./features/location/location.module";
-import { MatchingEntitiesModule } from "./features/matching-entities/matching-entities.module";
+import {FileModule} from "./features/file/file.module";
+import {ConfigSetupModule} from "./core/config-setup/config-setup.module";
+import {LocationModule} from "./features/location/location.module";
+import {MatchingEntitiesModule} from "./features/matching-entities/matching-entities.module";
+import {TodosModule} from "./features/todos/todos.module";
+import {DemoTodoGeneratorService} from "./features/todos/model/demo-todo-generator.service";
 
 /**
  * Main entry point of the application.
@@ -162,6 +164,7 @@ import { MatchingEntitiesModule } from "./features/matching-entities/matching-en
         maxCountAttributes: 5,
       }),
       ...DemoPermissionGeneratorService.provider(),
+      ...DemoTodoGeneratorService.provider(),
     ]),
     AttendanceModule,
     DashboardShortcutWidgetModule,
@@ -170,6 +173,7 @@ import { MatchingEntitiesModule } from "./features/matching-entities/matching-en
     DatabaseModule,
     LocationModule,
     MatchingEntitiesModule,
+    TodosModule,
   ],
   providers: [
     { provide: ErrorHandler, useClass: LoggingErrorHandler },

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

@@ -1,7 +1,8 @@
+@use "src/styles/variables/sizes";
 
 .child-pic {
-  width: 28px;
-  height: 28px;
+  width: sizes.$icon-block;
+  height: sizes.$icon-block;
   border-radius: 50%;
   object-fit: cover;
   margin-right: 4px;

src/app/child-dev-project/notes/dashboard-widgets/important-notes-dashboard/important-notes-dashboard.component.html

@@ -1,60 +1,35 @@
-<app-dashboard-widget
+<app-dashboard-list-widget
   icon="exclamation-triangle"
-  [title]="notesDataSource.data.length"
   subtitle="Notes needing follow-up"
   i18n-subtitle="subtitle|dashboard showing notes that require action"
   theme="note"
-  [loading]="loading"
+  entityType="Note"
+  [dataMapper]="dataMapper"
 >
-  <app-widget-content>
-    <div *ngIf="notesDataSource.data.length > 0">
-      <table
-        mat-table
-        [dataSource]="notesDataSource"
-        aria-label="Notes needing follow-up"
-      >
-        <!-- Table header only for assistive technologies like screen readers -->
-        <tr hidden="true">
-          <th scope="col">Date</th>
-          <th scope="col">Title</th>
-        </tr>
-        <ng-container matColumnDef="date">
-          <td *matCellDef="let note" class="date-cell">
-            {{ note.date | date }}
-          </td>
-        </ng-container>
+  <table mat-table aria-label="Notes needing follow-up">
+    <!-- Table header only for assistive technologies like screen readers -->
+    <tr hidden="true">
+      <th scope="col">Date</th>
+      <th scope="col">Title</th>
+    </tr>
+    <ng-container matColumnDef="date">
+      <td *matCellDef="let note" class="date-cell row-indicator">
+        {{ note.date | date }}
+      </td>
+    </ng-container>
 
-        <ng-container
-          matColumnDef="title"
-        >
-          <td *matCellDef="let note" class="subject-cell">
-            {{ note.subject }}
-          </td>
-        </ng-container>
+    <ng-container matColumnDef="title">
+      <td *matCellDef="let note" class="subject-cell">
+        {{ note.subject }}
+      </td>
+    </ng-container>
 
-        <tr
-          mat-row
-          *matRowDef="let row; columns: ['date', 'title'];"
-          class="dashboard-table-row row-view"
-          (click)="openNote(row)"
-          [ngStyle]="{'--important-notes-bg-color': row.getColor?.()}"
-        ></tr>
-      </table>
-    </div>
-    <div
-      *ngIf="notesDataSource.data.length === 0"
-      class="headline"
-    >
-      <span i18n="Description when there are no notes that need a follow-up">
-        no notes that need immediate attention
-      </span>
-    </div>
-    <mat-paginator
-      #paginator
-      [style.display]="paginator.getNumberOfPages() === 0 ? 'none' : ''"
-      [pageSizeOptions]="[5]"
-      [hidePageSize]="true"
-    >
-    </mat-paginator>
-  </app-widget-content>
-</app-dashboard-widget>
+    <tr
+      mat-row
+      *matRowDef="let row; columns: ['date', 'title']"
+      class="dashboard-table-row row-view"
+      (click)="openNote(row)"
+      [ngStyle]="{'--row-indicator-color': row.getColor?.()}"
+    ></tr>
+  </table>
+</app-dashboard-list-widget>

src/app/child-dev-project/notes/dashboard-widgets/important-notes-dashboard/important-notes-dashboard.component.scss

@@ -5,21 +5,6 @@
   text-align: right;
 }
 
-.date-cell {
-  position: relative;
-
-  &::before {
-    left: 0;
-    top: 0;
-    content: '';
-    display: block;
-    width: sizes.$small;
-    height: 100%;
-    position: absolute;
-    background-color: var(--important-notes-bg-color);
-  }
-}
-
 .row-view {
   cursor: pointer;
   position: relative;

src/app/child-dev-project/notes/dashboard-widgets/important-notes-dashboard/important-notes-dashboard.component.spec.ts

@@ -1,13 +1,20 @@
-import { ComponentFixture, fakeAsync, TestBed } from "@angular/core/testing";
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+} from "@angular/core/testing";
 
 import { ImportantNotesDashboardComponent } from "./important-notes-dashboard.component";
 import { MockedTestingModule } from "../../../../utils/mocked-testing.module";
 import { LoginState } from "../../../../core/session/session-states/login-state.enum";
 import { Note } from "../../model/note";
 import { FormDialogService } from "../../../../core/form-dialog/form-dialog.service";
-import { MatPaginatorModule } from "@angular/material/paginator";
 import { warningLevels } from "../../../warning-levels";
 import { DashboardModule } from "../../../../core/dashboard/dashboard.module";
+import { MatTableModule } from "@angular/material/table";
+import { of } from "rxjs";
+import { map } from "rxjs/operators";
 
 describe("ImportantNotesDashboardComponent", () => {
   let component: ImportantNotesDashboardComponent;
@@ -23,8 +30,8 @@ describe("ImportantNotesDashboardComponent", () => {
     await TestBed.configureTestingModule({
       imports: [
         MockedTestingModule.withState(LoginState.LOGGED_IN, mockNotes),
-        MatPaginatorModule,
         DashboardModule,
+        MatTableModule,
       ],
       declarations: [ImportantNotesDashboardComponent],
       providers: [
@@ -56,6 +63,12 @@ describe("ImportantNotesDashboardComponent", () => {
     const expectedNotes = mockNotes
       .filter((note) => ["WARNING", "URGENT"].includes(note.warningLevel.id))
       .reverse();
-    expect(component.notesDataSource.data).toEqual(expectedNotes);
+
+    let actualNotes;
+    of(mockNotes)
+      .pipe(map((d) => component.dataMapper(d)))
+      .subscribe((data) => (actualNotes = data));
+    tick();
+    expect(actualNotes).toEqual(expectedNotes);
   }));
 });

src/app/child-dev-project/notes/dashboard-widgets/important-notes-dashboard/important-notes-dashboard.component.ts

@@ -1,16 +1,12 @@
-import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
+import { Component } from "@angular/core";
 import { Note } from "../../model/note";
-import { EntityMapperService } from "../../../../core/entity/entity-mapper.service";
 import { DynamicComponent } from "../../../../core/view/dynamic-components/dynamic-component.decorator";
 import { OnInitDynamicComponent } from "../../../../core/view/dynamic-components/on-init-dynamic-component.interface";
-import { MatTableDataSource } from "@angular/material/table";
-import { MatPaginator } from "@angular/material/paginator";
 import { FormDialogService } from "../../../../core/form-dialog/form-dialog.service";
 import { NoteDetailsComponent } from "../../note-details/note-details.component";
-import { applyUpdate } from "../../../../core/entity/model/entity-update";
-import { concat, Observable } from "rxjs";
-import { first, map } from "rxjs/operators";
-import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { OperatorFunction } from "rxjs";
+import { map } from "rxjs/operators";
+import { UntilDestroy } from "@ngneat/until-destroy";
 
 @DynamicComponent("ImportantNotesDashboard")
 @DynamicComponent("ImportantNotesComponent") // TODO remove after all existing instances are updated
@@ -21,47 +17,20 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
   styleUrls: ["./important-notes-dashboard.component.scss"],
 })
 export class ImportantNotesDashboardComponent
-  implements OnInit, OnInitDynamicComponent, AfterViewInit
+  implements OnInitDynamicComponent
 {
   private relevantWarningLevels: string[] = [];
+  dataMapper: (data: Note[]) => Note[] = (data) =>
+    data
+      .filter((note) => note.warningLevel && this.noteIsRelevant(note))
+      .sort((a, b) => b.warningLevel._ordinal - a.warningLevel._ordinal);
 
-  private notes: Observable<Note[]>;
-  public loading: boolean = true;
-
-  public notesDataSource = new MatTableDataSource<Note>();
-
-  @ViewChild("paginator") private paginator: MatPaginator;
-
-  constructor(
-    private entityMapperService: EntityMapperService,
-    private formDialog: FormDialogService
-  ) {}
-
-  ngOnInit(): void {
-    // This feed always contains the latest notes plus the initial notes
-    this.notes = concat(
-      this.entityMapperService.loadType(Note),
-      this.entityMapperService
-        .receiveUpdates(Note)
-        .pipe(map((next) => applyUpdate(this.notesDataSource.data, next)))
-    );
-    // set loading to `false` when the first chunk of notes (the initial notes) have arrived
-    this.notes.pipe(first()).subscribe(() => (this.loading = false));
-    this.notes.pipe(untilDestroyed(this)).subscribe((next) => {
-      this.notesDataSource.data = next
-        .filter((note) => note.warningLevel && this.noteIsRelevant(note))
-        .sort((a, b) => b.warningLevel._ordinal - a.warningLevel._ordinal);
-    });
-  }
+  constructor(private formDialog: FormDialogService) {}
 
   onInitFromDynamicConfig(config: any) {
     this.relevantWarningLevels = config.warningLevels;
   }
 
-  ngAfterViewInit() {
-    this.notesDataSource.paginator = this.paginator;
-  }
-
   private noteIsRelevant(note: Note): boolean {
     return this.relevantWarningLevels.includes(note.warningLevel.id);
   }

src/app/child-dev-project/schools/activities-overview/activities-overview.component.html

@@ -1,5 +1,5 @@
 <app-entity-subrecord
-  [(records)]="records"
+  [records]="records"
   [columns]="columns"
   [getBackgroundColor]="null"
   [newRecordFactory]="generateNewRecordFactory()"

src/app/core/config/config-fix.ts

@@ -52,6 +52,11 @@ export const defaultJsonConfig = {
         "icon": "file-alt",
         "link": "/note"
       },
+      {
+        "name": $localize`:Menu item:Tasks`,
+        "icon": "tasks",
+        "link": "/todo"
+      },
       {
         "name": $localize`:Menu item:Admin`,
         "icon": "wrench",
@@ -176,6 +181,10 @@ export const defaultJsonConfig = {
             "warningLevels": ["WARNING", "URGENT"],
           }
         },
+        {
+          "component": "TodosDashboard",
+          "config": {}
+        },
         {
           "component": "NotesDashboard",
           "config": {
@@ -688,11 +697,15 @@ export const defaultJsonConfig = {
           ]
         },
         {
-          "title": $localize`:Panel title:Notes & Reports`,
+          "title": $localize`:Panel title:Notes & Tasks`,
           "components": [
             {
               "title": "",
               "component": "NotesRelatedToEntity"
+            },
+            {
+              "title": "Tasks",
+              "component": "TodosRelatedToEntity"
             }
           ]
         },
@@ -1131,5 +1144,59 @@ export const defaultJsonConfig = {
       "newEntityMatchPropertyRight": "schoolId",
       "columnsToReview": ["start", "end", "result", "childId", "schoolId"]
     }
+  },
+
+  "entity:Todo": {
+    "attributes": []
+  },
+  "view:todo": {
+    "component": "TodoList",
+    "config": {
+      "entity": "Todo",
+      "columns": ["deadline", "subject", "assignedTo", "startDate", "relatedEntities"],
+      "filters": [
+        { "id": "assignedTo" },
+
+        {
+          "id": "due-status",
+          "type": "prebuilt"
+        },
+        { "id": "deadline" },
+        { "id": "deadline" },
+        { "id": "startDate" }
+      ]
+    }
+  },
+  "view:todo/:id": {
+    "component": "EntityDetails",
+    "config": {
+      "entity": "Todo",
+      "panels": [
+        {
+          "title": $localize`:Panel title:Overview`,
+          "components": [
+            {
+              "title": "",
+              "component": "Form",
+              "config": {
+                "cols": [
+                  [
+                    "subject",
+                    "description",
+                    "relatedEntities"
+                  ],
+                  [
+                    "assignedTo",
+                    "deadline",
+                    "startDate",
+                    "repetitionInterval"
+                  ]
+                ]
+              }
+            }
+          ]
+        }
+      ],
+    }
   }
 };

src/app/core/confirmation-dialog/confirmation-dialog.service.ts

@@ -53,7 +53,6 @@ export class ConfirmationDialogService {
           },
         })
         .afterClosed()
-        .pipe(map((choice) => !!choice))
     );
   }
 }