feat(attendance): overview page for attendance register

src/app/app.routing.ts

@@ -32,6 +32,7 @@ import { AddDayAttendanceComponent } from "./child-dev-project/attendance/add-da
 import { AttendanceManagerComponent } from "./child-dev-project/attendance/attendance-manager/attendance-manager.component";
 import { HowToComponent } from "./core/help/how-to/how-to.component";
 import { UserListComponent } from "./core/admin/user-list/user-list.component";
+import { AttendanceAnalysisComponent } from "./child-dev-project/attendance/attendance-analysis/attendance-analysis.component";
 
 /**
  * All routes configured for the main app routing.
@@ -46,6 +47,7 @@ export const routes: Routes = [
   { path: "child/:id/attendance", component: ChildAttendanceComponent },
   { path: "note", component: NotesManagerComponent },
   { path: "attendance", component: AttendanceManagerComponent },
+  { path: "attendance/analysis", component: AttendanceAnalysisComponent },
   { path: "attendance/add/month", component: AddMonthAttendanceComponent },
   { path: "attendance/add/day", component: AddDayAttendanceComponent },
   { path: "admin", component: AdminComponent, canActivate: [AdminGuard] },

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

@@ -0,0 +1,205 @@
+<h1>Attendance Analysis</h1>
+
+<mat-expansion-panel
+  expanded="true"
+  fxLayout="column"
+  fxLayoutGap="10px"
+  class="filter-panel"
+>
+  <div fxHide.gt-xs>
+    <button mat-raised-button (click)="applyFilterSelections()">
+      Search records
+    </button>
+  </div>
+  <div fxLayout="row" fxLayoutGap="10px" style="margin-top: 20px;">
+    <div>
+      <mat-form-field>
+        <input
+          matInput
+          placeholder="From"
+          [value]="filterFrom"
+          (dateChange)="filterFrom = $event.target.value"
+          [matDatepicker]="attendanceFromDatepicker"
+        />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="attendanceFromDatepicker"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #attendanceFromDatepicker></mat-datepicker>
+      </mat-form-field>
+      <mat-form-field>
+        <input
+          matInput
+          placeholder="Until"
+          [value]="filterUntil"
+          (dateChange)="filterUntil = $event.target.value"
+          [matDatepicker]="attendanceUntilDatepicker"
+        />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="attendanceUntilDatepicker"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #attendanceUntilDatepicker></mat-datepicker>
+      </mat-form-field>
+    </div>
+
+    <div *ngIf="false">
+      <mat-button-toggle-group name="displayType" [(value)]="displayType">
+        <mat-button-toggle value="daily">Daily</mat-button-toggle>
+        <mat-button-toggle value="monthly">Monthly</mat-button-toggle>
+      </mat-button-toggle-group>
+    </div>
+
+    <div *ngIf="false">
+      <mat-button-toggle-group name="attendanceType" [(value)]="attendanceType">
+        <mat-button-toggle value="">Any</mat-button-toggle>
+        <mat-button-toggle value="school">School Attendance</mat-button-toggle>
+        <mat-button-toggle value="coaching"
+          >Coaching Attendance</mat-button-toggle
+        >
+        <mat-button-toggle value="none">Has No Attendance</mat-button-toggle>
+      </mat-button-toggle-group>
+    </div>
+
+    <div fxHide.lt-sm>
+      <button mat-raised-button (click)="applyFilterSelections()">
+        Search records
+      </button>
+    </div>
+  </div>
+
+  <div
+    fxLayout="row wrap"
+    fxLayoutGap="10px"
+    class="filter-button"
+    fxHide.lt-sm
+  >
+    <mat-button-toggle-group
+      *ngFor="let filterSelection of filterSelections"
+      [name]="filterSelection.name"
+      [value]="filterSelection.selectedOption"
+    >
+      <mat-button-toggle
+        *ngFor="let option of filterSelection.options"
+        [value]="option.key"
+        (click)="
+          filterSelection.selectedOption = option.key; applyFilterSelections()
+        "
+      >
+        {{ option.label }}
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+    <div class="align-form-field">
+      (Showing {{ dataSource.filteredData.length / 2 }} children)
+    </div>
+  </div>
+  <div fxLayout="row wrap" fxHide.gt-xs>
+    <mat-form-field
+      *ngFor="let filterSelection of filterSelections"
+      style="padding-right: 1%;"
+    >
+      <mat-label>{{ filterSelection.name }}</mat-label>
+      <mat-select
+        [id]="filterSelection.name"
+        [value]="filterSelection.selectedOption"
+        placeholder="filterSelection.name"
+      >
+        <mat-option
+          *ngFor="let option of filterSelection.options"
+          [value]="option.key"
+          (click)="
+            filterSelection.selectedOption = option.key; applyFilterSelections()
+          "
+        >
+          {{ option.label }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+</mat-expansion-panel>
+
+<div *ngIf="loading > 0">
+  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  <div>Loading data ({{ loading }}) ...</div>
+</div>
+
+<table
+  mat-table
+  [dataSource]="dataSource"
+  matSort
+  class="mat-elevation-z8 table-list"
+>
+  <ng-container matColumnDef="child">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Student</th>
+    <td mat-cell *matCellDef="let record">
+      <app-child-block [entity]="record.child"></app-child-block>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="attendanceType">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
+    <td mat-cell *matCellDef="let record">
+      {{ record.attendanceType }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="averageAttendance">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Attendance</th>
+    <td mat-cell *matCellDef="let record">
+      {{ record.averageAttendance | percent: "1.0-0" }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="recordCount">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Count</th>
+    <td mat-cell *matCellDef="let record">
+      {{ record.recordCount }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="totalWorking">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Working Days</th>
+    <td mat-cell *matCellDef="let record">
+      {{ record.totalWorking }}
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="totalAttended">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Attended</th>
+    <td mat-cell *matCellDef="let record">
+      {{ record.totalAttended }}
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="totalAbsent">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Absent</th>
+    <td mat-cell *matCellDef="let record">
+      {{ record.totalAbsent }}
+    </td>
+  </ng-container>
+  <ng-container matColumnDef="totalLate">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Late</th>
+    <td mat-cell *matCellDef="let record">
+      {{ record.totalLate }}
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="attendance">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Attendance</th>
+    <td mat-cell *matCellDef="let record">
+      <app-attendance-block
+        *ngFor="let att of record.attendance"
+        [attendanceData]="att"
+      ></app-attendance-block>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+  <tr
+    mat-row
+    *matRowDef="let record; columns: columnsToDisplay; let i = index;"
+    class="table-list-item"
+    angulartics2On="click"
+    angularticsCategory="Navigation"
+    angularticsAction="attendance_manager_list_link"
+    [angularticsLabel]="'list-entry-' + i"
+  ></tr>
+</table>

src/app/child-dev-project/attendance/attendance-analysis/attendance-analysis.component.scss

@@ -0,0 +1,19 @@
+.attendance-line {
+  margin: 10px;
+}
+
+.table-list{
+  margin-top: 10px;
+}
+
+.table-list td {
+  padding-left: 8px;
+}
+
+.table-list-item:hover{
+  background: #f5f5f5;
+}
+
+.filter-panel {
+  padding-top: 10px;
+}

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

@@ -0,0 +1,81 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { MatButtonModule } from "@angular/material/button";
+import { MatButtonToggleModule } from "@angular/material/button-toggle";
+import { MatExpansionModule } from "@angular/material/expansion";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+import { MatProgressBarModule } from "@angular/material/progress-bar";
+import { MatSelectModule } from "@angular/material/select";
+import { MatTableModule } from "@angular/material/table";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { ChildBlockComponent } from "../../children/child-block/child-block.component";
+import { AttendanceBlockComponent } from "../attendance-block/attendance-block.component";
+import { AttendanceDayBlockComponent } from "../attendance-days/attendance-day-block.component";
+import { SchoolBlockComponent } from "../../schools/school-block/school-block.component";
+import { AttendanceDaysComponent } from "../attendance-days/attendance-days.component";
+import { FormsModule } from "@angular/forms";
+import { EntitySubrecordModule } from "../../../core/entity-subrecord/entity-subrecord.module";
+import { ChildrenService } from "../../children/children.service";
+import { EntityModule } from "../../../core/entity/entity.module";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { MatDatepickerModule } from "@angular/material/datepicker";
+import { MatNativeDateModule } from "@angular/material/core";
+import { BehaviorSubject } from "rxjs";
+import { AttendanceAnalysisComponent } from "./attendance-analysis.component";
+
+describe("AttendanceRegisterComponent", () => {
+  let component: AttendanceAnalysisComponent;
+  let fixture: ComponentFixture<AttendanceAnalysisComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AttendanceAnalysisComponent,
+        ChildBlockComponent,
+        AttendanceBlockComponent,
+        AttendanceDayBlockComponent,
+        AttendanceDaysComponent,
+        SchoolBlockComponent,
+      ],
+      imports: [
+        MatFormFieldModule,
+        MatInputModule,
+        MatButtonToggleModule,
+        MatExpansionModule,
+        MatButtonModule,
+        MatTableModule,
+        MatProgressBarModule,
+        MatTooltipModule,
+        MatSelectModule,
+        MatIconModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        FormsModule,
+        NoopAnimationsModule,
+        EntitySubrecordModule,
+        EntityModule,
+      ],
+      providers: [
+        {
+          provide: ChildrenService,
+          useValue: {
+            getChildren: () => new BehaviorSubject([]),
+            getAttendancesOfChild: () => new BehaviorSubject([]),
+          },
+        },
+      ],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AttendanceAnalysisComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});