Wfnews 2405 (#2102)

* add sort by discovery date to desktop and mobile list * align buttons in filter options dialog
bcgov · Oct 29, 2024 · 54f7734 · 54f7734
1 parent b700017
commit 54f7734
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 15 deletions.
diff --git a/...mponents/wildfires-list-header/filter-options-dialog/filter-options-dialog.component.html b/...mponents/wildfires-list-header/filter-options-dialog/filter-options-dialog.component.html
@@ -9,6 +9,8 @@
       <button [class]="'radius-button' + (filterData.sortColumn === 'incidentName' ? '-selected' : '')" (click)="setSortColumn('incidentName')" mat-flat-button ><span class="list-button-label">Wildfire Name</span></button>
       <button [class]="'radius-button' + (filterData.sortColumn === 'fireCentreName' ? '-selected' : '')" (click)="setSortColumn('fireCentreName')" mat-flat-button ><span class="list-button-label">Fire Centre</span></button>
       <button [class]="'radius-button' + (filterData.sortColumn === 'lastUpdatedTimestamp' ? '-selected' : '')" (click)="setSortColumn('lastUpdatedTimestamp')" mat-flat-button ><span class="list-button-label">Last Update</span></button>
+      <button [class]="'radius-button' + (filterData.sortColumn === 'discoveryDate' ? '-selected' : '')" (click)="setSortColumn('discoveryDate')" mat-flat-button ><span class="list-button-label">Discovery Date</span></button>
+
     </div>
     <div class="radius-panel">
       <div class="dialog-title">Sort By Direction</div>

diff --git a/...mponents/wildfires-list-header/filter-options-dialog/filter-options-dialog.component.scss b/...mponents/wildfires-list-header/filter-options-dialog/filter-options-dialog.component.scss
@@ -100,3 +100,8 @@
   padding-bottom: 20px;
   padding-top: 20px;
 }
+
+::ng-deep .mdc-button__label {
+  display: flex !important;
+  align-items: center !important;
+}
diff --git a/...app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.html b/...app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.html
@@ -84,7 +84,7 @@
             aria-label="Incident Table">
         <ng-container matColumnDef = "fireName">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Wildfire Name</th>
-            <td mat-cell style="cursor: pointer;" *matCellDef="let item" >
+            <td mat-cell style="cursor: pointer;" *matCellDef="let item" [matTooltip]="item.incidentName">
               <div class="fire-label-container">
                 <img *ngIf="item.fireOfNoteInd" height="24" width="24" src="/assets/images/local_fire_department.png" alt="Wildfire" class="icon fire-label-icon">
                 <div class="fire-label-holder">
@@ -97,7 +97,7 @@
 
         <ng-container matColumnDef = "stageOfControl">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Stage of Control</th>
-          <td mat-cell style="cursor: pointer;" *matCellDef="let item" >
+          <td mat-cell style="cursor: pointer;" *matCellDef="let item" [matTooltip]="convertToStageOfControlDescription(item.stageOfControlCode)">
             <img *ngIf="item.stageOfControlCode === 'OUT_CNTRL'" height="10" width="10" src="/assets/images/svg-icons/out-of-control.svg" alt="Out of Control" class="list-icon">
             <img *ngIf="item.stageOfControlCode === 'HOLDING'" height="10" width="10" src="/assets/images/svg-icons/being-held.svg" alt="Being Held" class="list-icon">
             <img *ngIf="item.stageOfControlCode === 'UNDR_CNTRL'" height="10" width="10" src="/assets/images/svg-icons/under-control.svg" alt="under control" class="list-icon">
@@ -108,17 +108,22 @@
 
         <ng-container matColumnDef = "fireCentreName">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Fire Centre</th>
-          <td mat-cell style="cursor: pointer;" *matCellDef="let item" ><span #el >{{item.fireCentreName}}</span></td>
+          <td mat-cell style="cursor: pointer;" *matCellDef="let item" [matTooltip]="item.fireCentreName"><span #el >{{item.fireCentreName}}</span></td>
         </ng-container>
 
         <ng-container matColumnDef = "location">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Location</th>
-            <td mat-cell style="cursor: pointer;" *matCellDef="let item" ><span #el >{{item.incidentLocation}}</span></td>
+            <td mat-cell style="cursor: pointer;" *matCellDef="let item" [matTooltip]="item.incidentLocation"><span #el >{{item.incidentLocation}}</span></td>
+        </ng-container>
+
+        <ng-container matColumnDef = "discoveryDate">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Discovery Date</th>
+          <td mat-cell style="cursor: pointer;" *matCellDef="let item" [matTooltip]="convertFromTimestamp(item.discoveryDate)"><span #el >{{convertFromTimestamp(item.discoveryDate)}}</span></td>
         </ng-container>
 
         <ng-container matColumnDef = "lastUpdated">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Updated</th>
-            <td mat-cell style="cursor: pointer;" *matCellDef="let item" ><span #el >{{convertFromTimestamp(item.lastUpdatedTimestamp)}}</span></td>
+            <td mat-cell style="cursor: pointer;" *matCellDef="let item" [matTooltip]="convertFromTimestamp(item.lastUpdatedTimestamp)"><span #el >{{convertFromTimestamp(item.lastUpdatedTimestamp)}}</span></td>
         </ng-container>
 
         <ng-container matColumnDef="viewMap">

diff --git a/...app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.scss b/...app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.scss
@@ -312,36 +312,36 @@ table tr:nth-child(even) td {
 }
 
 .mat-column-fireName {
-  width: 24%;
+  width: 25%;
   font-size: 15px !important;
   font-weight: 600 !important;
   line-height: 16px !important;
   letter-spacing: -0.02em !important;
   text-align: left !important;
 }
 
-.mat-column-lastUpdated {
-  width: 11%;
-}
-
 .mat-column-stageOfControl {
   width: 15%;
 }
 
 .mat-column-fireCentre {
-  width: 18%;
+  width: 13%;
 }
 
 .mat-column-location {
-  width: 24%;
+  width: 13%;
+}
+
+.mat-column-lastUpdated {
+  width: 12%;
 }
 
-.mat-column-addToWatchlist {
-  width: 5%;
+.mat-column-discoveryDate {
+  width: 12%;
 }
 
 .mat-column-viewMap {
-  width: 8%;
+  width:10%;
 }
 
 .cell-button {

diff --git a/...c/app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.ts b/...c/app/components/wildfires-list-header/wildfires-list/wildfires-list.component.desktop.ts
@@ -15,6 +15,7 @@ export class WildFiresListComponentDesktop extends WildFiresListComponent {
     'stageOfControl',
     'fireCentreName',
     'location',
+    'discoveryDate',
     'lastUpdated',
     'viewMap',
   ];

diff --git a/...gular/src/app/components/wildfires-list-header/wildfires-list/wildfires-list.component.ts b/...gular/src/app/components/wildfires-list-header/wildfires-list/wildfires-list.component.ts
@@ -71,6 +71,7 @@ export class WildFiresListComponent
     { description: 'Fire Centre', code: 'fireCentreName' },
     { description: 'Name', code: 'incidentName' },
     { description: 'Stage of Control', code: 'stageOfControlCode' },
+    { description: 'Discovey Date', code: 'discoveryDate' },
     { description: 'Last Updated', code: 'lastUpdatedTimestamp' },
   ];
   public selectedSortValue = '';