Skip to content

Commit

Permalink
refactor: dashboard widgets all using generalized dashboard-list-widg…
Browse files Browse the repository at this point in the history 
…et code (#2170)

closes #1629 

---------

Co-authored-by: Sebastian Leidig <sebastian@aam-digital.com>
  • Loading branch information
@sadaf895 @sleidig
sadaf895 and sleidig authored Feb 15, 2024
1 parent 082fca5 commit da2066d
Show file tree
Hide file tree
Showing 13 changed files with 166 additions and 274 deletions.
24 changes: 5 additions & 19 deletions angular.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,7 @@
"node_modules/leaflet/dist/leaflet.css"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/",
"src/styles"
]
"includePaths": ["node_modules/", "src/styles"]
},
"vendorChunk": true,
"extractLicenses": false,
Expand Down Expand Up @@ -105,20 +102,14 @@
"builder": "@angular-devkit/build-angular:karma",
"options": {
"karmaConfig": "./karma.conf.js",
"polyfills": [
"src/polyfills.ts",
"zone.js/testing"
],
"polyfills": ["src/polyfills.ts", "zone.js/testing"],
"tsConfig": "src/tsconfig.spec.json",
"styles": [
"src/styles/styles.scss",
"src/styles/themes/ndb-theme.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/",
"src/styles"
]
"includePaths": ["node_modules/", "src/styles"]
},
"assets": [
"src/assets",
Expand Down Expand Up @@ -152,10 +143,7 @@
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
},
"cypress-open": {
Expand Down Expand Up @@ -199,8 +187,6 @@
},
"cli": {
"analytics": "0bd2cce5-bfb0-4375-af96-a8222d782810",
"schematicCollections": [
"@angular-eslint/schematics"
]
"schematicCollections": ["@angular-eslint/schematics"]
}
}
105 changes: 44 additions & 61 deletions ...ance/dashboard-widgets/attendance-week-dashboard/attendance-week-dashboard.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,59 @@
<app-dashboard-widget
<app-dashboard-list-widget
icon="exclamation-triangle"
theme="attendance"
[title]="tableDataSource.data.length"
[subtitle]="label"
explanation="Cases absent multiple times in the given week"
i18n-explanation="Dashboard attendance component explanation tooltip"
[loading]="!loadingDone"
[entries]="entries"
>
<app-widget-content>
<div *ngIf="tableDataSource.data.length > 0" class="table-wrapper">
<table
mat-table
[dataSource]="tableDataSource"
i18n-aria-label
aria-label="cases absent multiple times"
>
<!-- Table header only for assistive technologies like screen readers -->
<tr hidden="true">
<th scope="col" i18n="The participant of a group, e.g. a school">
Participant
</th>
<th
scope="col"
i18n="The attendance of a participant, e.g. a student"
>
Attendance
</th>
</tr>
<ng-container matColumnDef="child">
<td
*matCellDef="let rowGroup"
(click)="goToChild(rowGroup[0].childId)"
class="pointer"
<div class="table-wrapper">
<table mat-table i18n-aria-label aria-label="cases absent multiple times">
<!-- Table header only for assistive technologies like screen readers -->
<tr hidden="true">
<th scope="col" i18n="The participant of a group, e.g. a school">
Participant
</th>
<th scope="col" i18n="The attendance of a participant, e.g. a student">
Attendance
</th>
</tr>
<ng-container matColumnDef="child">
<td
*matCellDef="let rowGroup"
(click)="goToChild(rowGroup[0].childId)"
class="pointer"
>
<app-display-entity
[entityId]="rowGroup[0].childId"
entityType="Child"
></app-display-entity>
</td>
</ng-container>

<ng-container matColumnDef="attendance">
<td *matCellDef="let rowGroup">
<div
*ngFor="let activityRecord of rowGroup"
class="activities-record"
>
<app-display-entity
[entityId]="rowGroup[0].childId"
entityType="Child"
></app-display-entity>
</td>
</ng-container>
<ng-container *ngFor="let day of activityRecord.attendanceDays">
<app-attendance-day-block
[attendance]="day"
></app-attendance-day-block>
</ng-container>
</div>
</td>
</ng-container>

<ng-container matColumnDef="attendance">
<td *matCellDef="let rowGroup">
<div
*ngFor="let activityRecord of rowGroup"
class="activities-record"
>
<ng-container *ngFor="let day of activityRecord.attendanceDays">
<app-attendance-day-block
[attendance]="day"
></app-attendance-day-block>
</ng-container>
</div>
</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: ['child', 'attendance']"></tr>
</table>

<tr mat-row *matRowDef="let row; columns: ['child', 'attendance']"></tr>
</table>
</div>
<div
*ngIf="tableDataSource.data.length === 0 && loadingDone"
*ngIf="entries?.length === 0"
i18n="Placeholder if no absences are visible in dashboar"
class="headline"
>
no absences recorded
</div>
<mat-paginator
[style.display]="paginator.getNumberOfPages() === 0 ? 'none' : ''"
#paginator
[pageSizeOptions]="[5]"
[hidePageSize]="true"
>
</mat-paginator>
</app-widget-content>
</app-dashboard-widget>
</div>
</app-dashboard-list-widget>
3 changes: 1 addition & 2 deletions ...e/dashboard-widgets/attendance-week-dashboard/attendance-week-dashboard.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,7 @@ describe("AttendanceWeekDashboardComponent", () => {

await component.ngOnInit();

expect(component.loadingDone).toBeTrue();
expect(component.tableDataSource.data).toEqual([
expect(component.entries).toEqual([
[
{
childId: absentChild.getId(),
Expand Down
34 changes: 8 additions & 26 deletions ...ndance/dashboard-widgets/attendance-week-dashboard/attendance-week-dashboard.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
import {
AfterViewInit,
Component,
Input,
OnInit,
ViewChild,
} from "@angular/core";
import { Component, Input, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { Child } from "../../../children/model/child";
import { AttendanceLogicalStatus } from "../../model/attendance-status";
Expand All @@ -14,16 +8,14 @@ import { ActivityAttendance } from "../../model/activity-attendance";
import { RecurringActivity } from "../../model/recurring-activity";
import moment, { Moment } from "moment";
import { groupBy } from "../../../../utils/utils";
import { MatTableDataSource, MatTableModule } from "@angular/material/table";
import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
import { MatTableModule } from "@angular/material/table";
import { DynamicComponent } from "../../../../core/config/dynamic-components/dynamic-component.decorator";
import { NgForOf, NgIf } from "@angular/common";
import { DisplayEntityComponent } from "../../../../core/basic-datatypes/entity/display-entity/display-entity.component";
import { DashboardWidgetComponent } from "../../../../core/dashboard/dashboard-widget/dashboard-widget.component";
import { AttendanceDayBlockComponent } from "./attendance-day-block/attendance-day-block.component";
import { WidgetContentComponent } from "../../../../core/dashboard/dashboard-widget/widget-content/widget-content.component";
import { DashboardWidget } from "../../../../core/dashboard/dashboard-widget/dashboard-widget";
import { EventNote } from "../../model/event-note";
import { DashboardListWidgetComponent } from "../../../../core/dashboard/dashboard-list-widget/dashboard-list-widget.component";

interface AttendanceWeekRow {
childId: string;
Expand All @@ -36,21 +28,19 @@ interface AttendanceWeekRow {
selector: "app-attendance-week-dashboard",
templateUrl: "./attendance-week-dashboard.component.html",
styleUrls: ["./attendance-week-dashboard.component.scss"],
standalone: true,
imports: [
NgIf,
MatTableModule,
NgForOf,
MatPaginatorModule,
DisplayEntityComponent,
DashboardWidgetComponent,
WidgetContentComponent,
AttendanceDayBlockComponent,
DashboardListWidgetComponent,
],
standalone: true,
})
export class AttendanceWeekDashboardComponent
extends DashboardWidget
implements OnInit, AfterViewInit
implements OnInit
{
static getRequiredEntities() {
return EventNote.ENTITY_TYPE;
Expand Down Expand Up @@ -90,10 +80,7 @@ export class AttendanceWeekDashboardComponent
*/
@Input() attendanceStatusType: string;

@ViewChild("paginator") paginator: MatPaginator;
tableDataSource = new MatTableDataSource<AttendanceWeekRow[]>();

loadingDone = false;
entries: AttendanceWeekRow[][];

constructor(
private attendanceService: AttendanceService,
Expand Down Expand Up @@ -137,10 +124,9 @@ export class AttendanceWeekDashboardComponent
}

const groups = groupBy(records, "childId");
this.tableDataSource.data = groups
this.entries = groups
.filter(([childId]) => lowAttendanceCases.has(childId))
.map(([_, attendance]) => attendance);
this.loadingDone = true;
}

private generateRowsFromActivityAttendance(
Expand Down Expand Up @@ -196,8 +182,4 @@ export class AttendanceWeekDashboardComponent
goToChild(childId: string) {
this.router.navigate([Child.route, childId]);
}

ngAfterViewInit() {
this.tableDataSource.paginator = this.paginator;
}
}
83 changes: 37 additions & 46 deletions .../child-dev-project/notes/dashboard-widgets/notes-dashboard/notes-dashboard.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,45 @@
<app-dashboard-widget
<app-dashboard-list-widget
icon="file-alt"
theme="note"
[title]="dataSource.data.length"
[subtitle]="subtitle"
[explanation]="tooltip"
[loading]="isLoading"
[entries]="entries"
>
<app-widget-content>
<div *ngIf="dataSource.data.length > 0" class="table-wrapper">
<table mat-table [dataSource]="dataSource" [attr.aria-label]="subtitle">
<!-- Table header only for assistive technologies like screen readers -->
<tr hidden="true">
<th scope="col">{{ _entity.label }}</th>
<th scope="col">Days since last note</th>
</tr>
<ng-container matColumnDef="entity">
<td *matCellDef="let entityNoteInfo">
<app-display-entity
[entityId]="entityNoteInfo.entityId"
[entityType]="_entity"
></app-display-entity>
</td>
</ng-container>
<div class="table-wrapper">
<table mat-table [attr.aria-label]="subtitle">
<!-- Table header only for assistive technologies like screen readers -->
<tr hidden="true">
<th scope="col">{{ _entity.label }}</th>
<th scope="col">Days since last note</th>
</tr>
<ng-container matColumnDef="entity">
<td *matCellDef="let entityNoteInfo">
<app-display-entity
[entityId]="entityNoteInfo.entityId"
[entityType]="_entity"
></app-display-entity>
</td>
</ng-container>

<ng-container
matColumnDef="daysSinceLastNote"
i18n="Amount of days back|Format like 'Days passed > 5 days'"
>
<td *matCellDef="let entityNoteInfo" class="text-align-end">
<ng-container *ngIf="entityNoteInfo.moreThanDaysSince">
&gt;&nbsp;
</ng-container>
{{ entityNoteInfo.daysSinceLastNote | number: "1.0-0" }} days
</td>
</ng-container>

<ng-container
matColumnDef="daysSinceLastNote"
i18n="Amount of days back|Format like 'Days passed > 5 days'"
>
<td *matCellDef="let entityNoteInfo" class="text-align-end">
<ng-container *ngIf="entityNoteInfo.moreThanDaysSince">
&gt;&nbsp;
</ng-container>
{{ entityNoteInfo.daysSinceLastNote | number: "1.0-0" }} days
</td>
</ng-container>
<tr
mat-row
*matRowDef="let row; columns: ['entity', 'daysSinceLastNote']"
></tr>
</table>

<tr
mat-row
*matRowDef="let row; columns: ['entity', 'daysSinceLastNote']"
></tr>
</table>
</div>
<div *ngIf="dataSource.data.length === 0 && !isLoading" class="headline">
<div *ngIf="entries?.length === 0">
<ng-container
*ngIf="mode === 'without-recent-notes'"
i18n="
Expand All @@ -60,12 +58,5 @@
no records with recent report
</ng-container>
</div>
<mat-paginator
#paginator
[style.display]="paginator.getNumberOfPages() === 0 ? 'none' : ''"
[pageSizeOptions]="[5]"
[hidePageSize]="true"
>
</mat-paginator>
</app-widget-content>
</app-dashboard-widget>
</div>
</app-dashboard-list-widget>
Loading

0 comments on commit da2066d

Please sign in to comment.