diff --git a/modules/ui/src/app/model/filters.ts b/modules/ui/src/app/model/filters.ts index 15144349e..a2178a6f3 100644 --- a/modules/ui/src/app/model/filters.ts +++ b/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; diff --git a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.html b/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.html index 07cf43aa0..3826a20ed 100644 --- a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.html +++ b/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.html @@ -40,15 +40,16 @@ - Clear all filters + class="clear-button" + mat-button> + Clear all filters + diff --git a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.scss b/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.scss index 98b4a4e89..dfe13eb8d 100644 --- a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.scss +++ b/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 { diff --git a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.spec.ts b/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.spec.ts index 508bb7c54..ec48d528a 100644 --- a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.spec.ts +++ b/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.spec.ts @@ -73,7 +73,7 @@ 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(); }); @@ -81,7 +81,7 @@ describe('FilterChipsComponent', () => { it('should clear all filters on click', () => { const clearAllFiltersSpy = spyOn(component, 'clearAllFilters'); const button = compiled.querySelector( - '.clear-all' + '.clear-button' ) as HTMLButtonElement; button.click(); diff --git a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.ts b/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.ts index 45e4cce62..fc716a5b1 100644 --- a/modules/ui/src/app/pages/reports/components/filter-chips/filter-chips.component.ts +++ b/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; diff --git a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html index 5f936e1ce..fcf5b564b 100644 --- a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.html +++ b/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. --> +

{{ data.title }}

+ -
+ [ngStyle]="{ + 'max-height': 'calc(100vh - ' + (topPosition + dialogTitle) + 'px)', + }"> + - Please enter device model name - Please enter firmware name - Started date + Dates - MM/DD/YYYY – MM/DD/YYYY - Please, select the correct date range in MM/DD/YYYY format. + Please, select the correct date range in mm/dd/yyyy format. @@ -109,8 +110,6 @@ - - + + diff --git a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.scss b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.scss index bfe12ec61..940d11a1b 100644 --- a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.scss +++ b/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,28 +53,45 @@ 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; @@ -60,20 +99,24 @@ &: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; } diff --git a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.spec.ts b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.spec.ts index dfa48e8f0..551b4182d 100644 --- a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.spec.ts +++ b/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(); }); diff --git a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts b/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts index 3d8ac231a..cae7f72c6 100644 --- a/modules/ui/src/app/pages/reports/components/filter-dialog/filter-dialog.component.ts +++ b/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); diff --git a/modules/ui/src/app/pages/reports/components/filter-header/filter-header.component.html b/modules/ui/src/app/pages/reports/components/filter-header/filter-header.component.html index 82114b0ec..e6f7356a3 100644 --- a/modules/ui/src/app/pages/reports/components/filter-header/filter-header.component.html +++ b/modules/ui/src/app/pages/reports/components/filter-header/filter-header.component.html @@ -12,6 +12,7 @@ filterButton; context: { name: filterName, + title: filterTitle, filterOpened: filterOpened, activeFilter: activeFilter, } @@ -23,14 +24,17 @@