380254684: (feat) apply gm3 for filtering report

modules/ui/src/app/model/filters.ts

@@ -21,6 +21,13 @@ export enum FilterName {
   DateRange = 'dateRange',
 }
 
+export enum FilterTitle {
+  DeviceInfo = 'Enter device name',
+  DeviceFirmware = 'Enter firmware name',
+  Results = 'Select result',
+  Started = 'Select dates',
+}
+
 export interface ReportFilters {
   deviceInfo: string;
   deviceFirmware: string;

modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.html

@@ -40,15 +40,16 @@
     </mat-chip-row>
   </ng-container>
   <mat-chip-row class="filter-chip-clear-all">
-    <a
-      class="clear-all"
+    <button
       type="button"
       (click)="clearAllFilters()"
       (keydown.enter)="clearAllFilters()"
       (keydown.space)="clearAllFilters()"
       aria-label="Clear all filters"
       tabindex="0"
-      >Clear all filters</a
-    >
+      class="clear-button"
+      mat-button>
+      Clear all filters
+    </button>
   </mat-chip-row>
 </mat-chip-set>

modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.scss

@@ -19,39 +19,32 @@
   display: flex;
 }
 
-.clear-all {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 8px;
-  cursor: pointer;
-  color: colors.$primary;
-  font-weight: 400;
-  height: 32px;
-  margin: 4px 0 4px 8px;
-  border-radius: 16px;
-  flex-shrink: 0;
-  background: colors.$white;
-  font-family: Roboto, sans-serif;
-}
-
 .filter-chip.mat-mdc-chip {
-  background: colors.$white;
-  border: 1px solid colors.$primary;
+  background: colors.$light-grey;
+  &::ng-deep .mat-mdc-chip-primary-focus-indicator {
+    display: none;
+  }
 }
 
 .filter-chip.mat-mdc-chip ::ng-deep .mat-mdc-chip-action-label {
-  color: colors.$primary;
+  color: colors.$on-secondary-container;
   font-weight: 500;
 }
 
 .filter-chip.mat-mdc-chip ::ng-deep .mat-mdc-chip-remove {
-  color: colors.$primary;
+  color: colors.$on-secondary-container;
 }
 
 .filter-chip.cdk-keyboard-focused,
 .filter-chip-remove:focus-visible {
   outline: colors.$black solid 2px;
+  &:before {
+    content: none;
+  }
+}
+
+.clear-button ::ng-deep .mat-focus-indicator {
+  display: none;
 }
 
 .filter-chip .filter-chip-remove {

modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.spec.ts

@@ -73,15 +73,15 @@ describe('FilterChipsComponent', () => {
   describe('DOM tests', () => {
     describe('"Clear all filters" button', () => {
       it('should exist', () => {
-        const button = compiled.querySelector('.clear-all');
+        const button = compiled.querySelector('.clear-button');
 
         expect(button).toBeTruthy();
       });
 
       it('should clear all filters on click', () => {
         const clearAllFiltersSpy = spyOn(component, 'clearAllFilters');
         const button = compiled.querySelector(
-          '.clear-all'
+          '.clear-button'
         ) as HTMLButtonElement;
         button.click();
 

modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.ts

@@ -18,13 +18,20 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatChipsModule } from '@angular/material/chips';
 import { CommonModule, KeyValuePipe } from '@angular/common';
 import { DateRange, FilterName, Filters } from '../../../../model/filters';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-filter-chips',
   templateUrl: './filter-chips.component.html',
   styleUrls: ['./filter-chips.component.scss'],
   standalone: true,
-  imports: [MatIconModule, MatChipsModule, KeyValuePipe, CommonModule],
+  imports: [
+    MatIconModule,
+    MatChipsModule,
+    MatButtonModule,
+    KeyValuePipe,
+    CommonModule,
+  ],
 })
 export class FilterChipsComponent {
   @Input() filters!: Filters;

modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html

@@ -13,10 +13,14 @@
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+<h2 class="filter-dialog-title" mat-dialog-title>{{ data.title }}</h2>
+
 <mat-dialog-content
   class="filter-dialog-content"
-  [ngStyle]="{ 'max-height': 'calc(100vh - ' + topPosition + 'px)' }">
-  <form [formGroup]="filterForm">
+  [ngStyle]="{
+    'max-height': 'calc(100vh - ' + (topPosition + dialogTitle) + 'px)',
+  }">
+  <form [formGroup]="filterForm" class="filter-form">
     <mat-form-field
       appearance="outline"
       class="text-field"
@@ -27,7 +31,6 @@
         formControlName="deviceInfo"
         matInput
         aria-label="device name" />
-      <mat-hint>Please enter device model name</mat-hint>
       <mat-error
         *ngIf="deviceInfo.hasError('invalid_format')"
         role="alert"
@@ -49,7 +52,6 @@
         formControlName="deviceFirmware"
         matInput
         aria-label="device firmware" />
-      <mat-hint>Please enter firmware name</mat-hint>
       <mat-error
         *ngIf="deviceFirmware.hasError('invalid_format')"
         role="alert"
@@ -73,30 +75,29 @@
 
   <ng-container *ngIf="data.filter === FilterName.Started">
     <mat-form-field appearance="outline" class="date-field">
-      <mat-label>Started date</mat-label>
+      <mat-label>Dates</mat-label>
       <mat-date-range-input>
         <input
           matStartDate
-          placeholder="MM/DD/YYYY"
+          placeholder="mm/dd/yyyy"
           [(ngModel)]="range.start"
           #startDate="ngModel"
           (dateChange)="startDateChanged($event)" />
         <input
           matEndDate
-          placeholder="MM/DD/YYYY"
+          placeholder="mm/dd/yyyy"
           [(ngModel)]="range.end"
           #endDate="ngModel"
           (dateChange)="endDateChanged($event)" />
       </mat-date-range-input>
-      <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
       <mat-error
         *ngIf="
           (startDate.invalid && (startDate.dirty || startDate.touched)) ||
           (endDate.invalid && (endDate.dirty || endDate.touched))
         "
         role="alert"
         aria-live="assertive">
-        <span>Please, select the correct date range in MM/DD/YYYY format.</span>
+        <span>Please, select the correct date range in mm/dd/yyyy format.</span>
       </mat-error>
     </mat-form-field>
 
@@ -109,8 +110,6 @@
   </ng-container>
 </mat-dialog-content>
 <mat-dialog-actions align="end" class="filter-dialog-actions">
-  <button (click)="cancel()" class="cancel-button" mat-flat-button>
-    Cancel
-  </button>
-  <button (click)="confirm()" class="confirm-button" mat-flat-button>Ok</button>
+  <button (click)="cancel()" class="cancel-button" mat-button>Cancel</button>
+  <button (click)="confirm()" class="confirm-button" mat-button>Ok</button>
 </mat-dialog-actions>

modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.scss

@@ -16,11 +16,33 @@
 @use 'node_modules/@angular/material/index' as mat;
 @use 'm3-theme' as *;
 @use 'colors';
+@use 'variables';
+
+.filter-dialog-title {
+  padding: 24px 12px 16px 24px;
+  display: flex;
+  border-bottom: 1px solid colors.$outline-variant;
+  &:before {
+    height: 0;
+  }
+}
 
 .filter-dialog-content {
   display: flex;
   flex-direction: column;
-  padding: 16px 16px 0 16px;
+  padding: 0 4px;
+
+  &:has(.text-field) {
+    padding: 0 24px 16px;
+  }
+
+  &:has(.filter-result-item) {
+    padding: 0 24px;
+  }
+}
+
+.filter-form {
+  padding-top: 16px;
 }
 
 .date-field {
@@ -31,49 +53,70 @@
   flex-grow: 1;
   overflow: auto;
   min-height: 2em;
+
+  &::ng-deep .mat-calendar-body-label {
+    visibility: hidden;
+  }
+  &::ng-deep .mat-calendar-body-label[colspan='7'] {
+    display: none;
+  }
+
+  &::ng-deep .mat-calendar-header {
+    padding-top: 0;
+  }
 }
 
 .filter-dialog-actions {
-  border-top: 1px solid colors.$lighter-grey;
-  gap: 16px;
+  padding: 8px 12px 24px;
+  font-family: variables.$font-text;
+  gap: 8px;
 
   button {
     min-width: 38px;
     margin: 0;
-    padding: 0 8px;
-    color: mat.get-theme-color($light-theme, primary, 35);
+    padding: 0 16px;
     font-weight: 500;
     line-height: 20px;
-    letter-spacing: 0.25px;
+
+    ::ng-deep .mat-focus-indicator {
+      display: none;
+    }
   }
 }
 
-.text-field,
-.date-field {
+.text-field {
   width: 100%;
 }
 
+.date-field {
+  margin: 0 12px;
+}
+
 .filter-result-item {
   padding: 4px 0;
   margin: 0;
 
   &:first-child {
     padding-top: 0;
   }
+}
 
-  &:last-child {
-    padding-bottom: 20px;
+.date-field,
+.text-field {
+  &::ng-deep.mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+
+  &::ng-deep.mat-mdc-form-field-subscript-wrapper:has(mat-error) {
+    display: block;
   }
 }
 
 .text-field {
-  padding-bottom: 10px;
-
   &::ng-deep.mat-mdc-form-field-subscript-wrapper:has(mat-error) {
     height: 60px;
   }
 
-  &::ng-deep.mat-mdc-form-field-hint-wrapper,
   &::ng-deep.mat-mdc-form-field-error-wrapper {
     padding: 0 10px;
   }

modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.spec.ts

@@ -33,7 +33,7 @@ import {
   MatDatepickerModule,
 } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
-import { DateRange, FilterName } from '../../../../model/filters';
+import { DateRange, FilterName, FilterTitle } from '../../../../model/filters';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
 
@@ -84,6 +84,7 @@ describe('FilterDialogComponent', () => {
     component.data = {
       trigger: mockClientRest,
       filter: FilterName.DeviceInfo,
+      title: FilterTitle.DeviceInfo,
     };
     component.data.trigger.nativeElement = {
       getBoundingClientRect: () => mockData,
@@ -152,6 +153,7 @@ describe('FilterDialogComponent', () => {
       component.data = {
         trigger: mockClientRest,
         filter: FilterName.DeviceFirmware,
+        title: FilterTitle.DeviceFirmware,
       };
       fixture.detectChanges();
 
@@ -178,6 +180,7 @@ describe('FilterDialogComponent', () => {
       component.data = {
         trigger: mockClientRest,
         filter: FilterName.Started,
+        title: FilterTitle.Started,
       };
       fixture.detectChanges();
     });

modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts

@@ -64,6 +64,7 @@ import { DeviceValidators } from '../../../devices/components/device-form/device
 interface DialogData {
   trigger: ElementRef;
   filter: string;
+  title: string;
 }
 
 @Component({
@@ -108,6 +109,7 @@ export class FilterDialogComponent
   range: LocalDateRange = new LocalDateRange();
 
   topPosition = 0;
+  dialogTitle = 110;
 
   today = new Date();
 
@@ -149,12 +151,21 @@ export class FilterDialogComponent
     const rect = this.data.trigger?.nativeElement.getBoundingClientRect();
 
     matDialogConfig.position = {
-      left: `${rect.left - 80}px`,
-      top: `${rect.bottom + 0}px`,
+      left:
+        this.data.filter === FilterName.Results
+          ? `${rect.left - 240}px`
+          : `${rect.left}px`,
+      top: `${rect.bottom + 14}px`,
     };
 
     this.topPosition = rect.bottom + this.dialog_actions_height;
-    matDialogConfig.width = this.data.filter === 'results' ? '240px' : '328px';
+    if (this.data.filter === FilterName.Started) {
+      matDialogConfig.width = '360px';
+    } else if (this.data.filter === FilterName.Results) {
+      matDialogConfig.width = '240px';
+    } else {
+      matDialogConfig.width = '328px';
+    }
 
     this.dialogRef.updateSize(matDialogConfig.width);
     this.dialogRef.updatePosition(matDialogConfig.position);