PMW-20: Expand/collapse 2034-2043

B3Partners · May 8, 2024 · 1bc08a1 · 1bc08a1
1 parent 6b0ca3b
commit 1bc08a1
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 12 deletions.
diff --git a/projects/planmonitor-wonen/src/lib/helpers/plancategorie.helper.ts b/projects/planmonitor-wonen/src/lib/helpers/plancategorie.helper.ts
@@ -90,6 +90,18 @@ export class PlancategorieHelper {
         year_2031: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2031, detailPlanningen) ?? '',
         year_2032: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2032, detailPlanningen) ?? '',
         year_2033: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2033, detailPlanningen) ?? '',
+        year_2034: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2034, detailPlanningen) ?? '',
+        year_2035: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2035, detailPlanningen) ?? '',
+        year_2036: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2036, detailPlanningen) ?? '',
+        year_2037: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2037, detailPlanningen) ?? '',
+        year_2038: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2038, detailPlanningen) ?? '',
+        year_2039: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2039, detailPlanningen) ?? '',
+        year_2040: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2040, detailPlanningen) ?? '',
+        year_2041: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2041, detailPlanningen) ?? '',
+        year_2042: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2042, detailPlanningen) ?? '',
+        year_2043: PlancategorieHelper.getDetailplanningGeplandForYear(planCategorie, 2043, detailPlanningen) ?? '',
+        year_2034_2038: 0,
+        year_2039_2043: 0,
         years_check: 0,
         valid: false,
       };
@@ -98,6 +110,8 @@ export class PlancategorieHelper {
       }
       const rowTotaal = PlancategorieHelper.getTotalForRow(row);
       row.years_check = restcapaciteit - rowTotaal;
+      row.year_2034_2038 = PlancategorieHelper.getTotalFor20342038(row);
+      row.year_2039_2043 = PlancategorieHelper.getTotalFor20392043(row);
       groupTotals.set(categorieRow.field, (groupTotals.get(categorieRow.field) || 0) + totalen);
       return row;
     });
@@ -155,7 +169,25 @@ export class PlancategorieHelper {
       (typeof row.year_2030 === 'number' ? row.year_2030 : 0) +
       (typeof row.year_2031 === 'number' ? row.year_2031 : 0) +
       (typeof row.year_2032 === 'number' ? row.year_2032 : 0) +
-      (typeof row.year_2033 === 'number' ? row.year_2033 : 0);
+      (typeof row.year_2033 === 'number' ? row.year_2033 : 0) +
+      PlancategorieHelper.getTotalFor20342038(row) +
+      PlancategorieHelper.getTotalFor20392043(row);
+  }
+
+  private static getTotalFor20342038(row: CategorieTableRowModel) {
+    return (typeof row.year_2034 === 'number' ? row.year_2034 : 0) +
+      (typeof row.year_2035 === 'number' ? row.year_2035 : 0) +
+      (typeof row.year_2036 === 'number' ? row.year_2036 : 0) +
+      (typeof row.year_2037 === 'number' ? row.year_2037 : 0) +
+      (typeof row.year_2038 === 'number' ? row.year_2038 : 0);
+  }
+
+  private static getTotalFor20392043(row: CategorieTableRowModel) {
+    return (typeof row.year_2039 === 'number' ? row.year_2039 : 0) +
+    (typeof row.year_2040 === 'number' ? row.year_2040 : 0) +
+    (typeof row.year_2041 === 'number' ? row.year_2041 : 0) +
+    (typeof row.year_2042 === 'number' ? row.year_2042 : 0) +
+    (typeof row.year_2043 === 'number' ? row.year_2043 : 0);
   }
 
 }
diff --git a/projects/planmonitor-wonen/src/lib/models/categorie-table-row.model.ts b/projects/planmonitor-wonen/src/lib/models/categorie-table-row.model.ts
@@ -21,6 +21,18 @@ export interface CategorieTableRowModel {
   year_2031: number | string;
   year_2032: number | string;
   year_2033: number | string;
+  year_2034: number | string;
+  year_2035: number | string;
+  year_2036: number | string;
+  year_2037: number | string;
+  year_2038: number | string;
+  year_2039: number | string;
+  year_2040: number | string;
+  year_2041: number | string;
+  year_2042: number | string;
+  year_2043: number | string;
+  year_2034_2038: number | string;
+  year_2039_2043: number | string;
   years_check: number;
   valid: boolean;
 }
diff --git a/projects/planmonitor-wonen/src/lib/plancategorie-list/plancategorie-list.component.css b/projects/planmonitor-wonen/src/lib/plancategorie-list/plancategorie-list.component.css
@@ -11,6 +11,14 @@ mat-row, mat-footer-row {
   min-height: 2em;
 }
 
+mat-header-row {
+  min-height: 32px;
+}
+
+mat-header-cell {
+  border-right: 1px solid var(--border-color);
+}
+
 .number-column {
   text-align: right;
   justify-content: flex-end;
@@ -36,9 +44,9 @@ mat-row, mat-footer-row {
 }
 
 .mat-column-totalen {
-  min-width: 60px;
-  max-width: 60px;
-  width: 60px;
+  min-width: 80px;
+  max-width: 80px;
+  width: 80px;
 }
 
 .mat-column-total_check,
@@ -62,17 +70,17 @@ mat-row, mat-footer-row {
 
 .number-input-cell {
   padding: 0;
+  border-right: 1px solid var(--border-color);
 }
 
 .number-input {
   -moz-appearance: textfield; /* Firefox */
   margin: 0;
   height: 100%;
-  border: 1px solid var(--border-color);
-  border-top: 0;
-  border-bottom: 0;
+  border: 0 none;
   text-align: right;
   width: 100%;
+  padding: 0 8px;
 }
 
 .number-input::-webkit-outer-spin-button,
@@ -88,6 +96,18 @@ mat-row, mat-footer-row {
   width: 80px;
 }
 
+.year-group {
+  min-width: 120px;
+  max-width: 120px;
+  width: 120px;
+  padding: 0 4px;
+  border-right: 1px solid var(--border-color);
+}
+
+.expand-collapse-container {
+  position: relative;
+}
+
 .check-success {
   background-color: #A5CC5D;
 }
@@ -129,3 +149,21 @@ mat-row, mat-footer-row {
 .group-sloop .mat-column-groeplabel {
   background-color: #F6BF34;
 }
+
+.expand-collapse {
+  position: absolute;
+  height: 24px;
+  bottom: 4px;
+  width: 24px;
+  min-width: auto;
+  left: 0;
+}
+
+.expand-collapse mat-icon {
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  margin-right: 0;
+  --mdc-icon-button-icon-size: 16px;
+  min-width: 16px;
+}
diff --git a/projects/planmonitor-wonen/src/lib/plancategorie-list/plancategorie-list.component.html b/projects/planmonitor-wonen/src/lib/plancategorie-list/plancategorie-list.component.html
@@ -39,15 +39,38 @@
         <mat-cell *matCellDef="let row" class="number-column info-cell">{{row.restcapaciteit}}</mat-cell>
       </ng-container>
 
-      @for (year of yearRange; track $index) {
+      @for (year of yearColumns; track $index) {
         <ng-container [matColumnDef]="'year_' + year">
-          <mat-header-cell *matHeaderCellDef class="number-column">{{year}}</mat-header-cell>
+          <mat-header-cell *matHeaderCellDef class="year number-column">{{year}}</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index;" class="year number-input-cell">
             <input type="number" class="number-input" [class]="'year_' + year + '_' + i" [value]="row['year_' + year]" (change)="updateDetailField($event, row.id, year)" />
           </mat-cell>
         </ng-container>
       }
 
+      <ng-container matColumnDef="year_2043">
+        <mat-header-cell *matHeaderCellDef class="year number-column expand-collapse-container">
+          2043
+          <button mat-button class="expand-collapse" (click)="toggleExpanded()"><mat-icon svgIcon="chevron_left"></mat-icon></button>
+        </mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index;" class="year number-input-cell">
+          <input type="number" class="number-input" [class]="'year_2043_' + i" [value]="row.year_2043" (change)="updateDetailField($event, row.id, 2043)" />
+        </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="year_2034_2038">
+        <mat-header-cell *matHeaderCellDef class="year-group number-column">2034 - 2038</mat-header-cell>
+        <mat-cell *matCellDef="let row" class="year-group number-column">{{row.year_2034_2038}}</mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="year_2039_2043">
+        <mat-header-cell *matHeaderCellDef class="year-group number-column expand-collapse-container">
+          2039 - 2043
+          <button mat-button class="expand-collapse" (click)="toggleExpanded()"><mat-icon svgIcon="chevron_right"></mat-icon></button>
+        </mat-header-cell>
+        <mat-cell *matCellDef="let row" class="year-group number-column">{{row.year_2039_2043}}</mat-cell>
+      </ng-container>
+
       <ng-container matColumnDef="years_check">
         <mat-header-cell *matHeaderCellDef  class="number-column">Check</mat-header-cell>
         <mat-cell *matCellDef="let row"
@@ -56,8 +79,8 @@
                   [class.check-failed]="row.years_check !== 0">{{row.years_check}}</mat-cell>
       </ng-container>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns;" [class]="row.cls"></mat-row>
+      <mat-header-row *matHeaderRowDef="expanded ? displayedColumnsExpanded : displayedColumns; sticky: true;"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: expanded ? displayedColumnsExpanded : displayedColumns;" [class]="row.cls"></mat-row>
 
     </mat-table>
   </div>

diff --git a/projects/planmonitor-wonen/src/lib/plancategorie-list/plancategorie-list.component.ts b/projects/planmonitor-wonen/src/lib/plancategorie-list/plancategorie-list.component.ts
@@ -14,7 +14,10 @@ const INTEGER_REGEX = /^\d+$/;
 })
 export class PlancategorieListComponent implements OnInit {
 
-  public yearRange = [ 2024, 2025, 2026, 2027, 2028, 2029, 2030, 2031, 2032, 2033 ];
+  public expanded = false;
+
+  public yearColumns = [ 2024, 2025, 2026, 2027, 2028, 2029, 2030, 2031, 2032, 2033, 2034, 2035, 2036, 2037, 2038, 2039, 2040, 2041, 2042 ];
+
   public displayedColumns: string[] = [
     'label',
     'groeplabel',
@@ -32,9 +35,27 @@ export class PlancategorieListComponent implements OnInit {
     'year_2031',
     'year_2032',
     'year_2033',
+    'year_2034_2038',
+    'year_2039_2043',
+    'years_check',
+  ];
+
+  public displayedColumnsExpanded = [
+    ...this.displayedColumns.slice(0, -3),
+    'year_2034',
+    'year_2035',
+    'year_2036',
+    'year_2037',
+    'year_2038',
+    'year_2039',
+    'year_2040',
+    'year_2041',
+    'year_2042',
+    'year_2043',
     'years_check',
   ];
 
+
   public tableData: CategorieTableRowModel[] | null = null;
   public trackByRowId: TrackByFunction<CategorieTableRowModel> = (idx, row) => row.id;
 
@@ -79,4 +100,8 @@ export class PlancategorieListComponent implements OnInit {
     return { row, value: +target.value };
   }
 
+  public toggleExpanded() {
+    this.expanded = !this.expanded;
+  }
+
 }