Merge branch 'dev' into chore/BA-198_Merge_upstream_10_05_0

cfx-frontend/src/app/modules/page/parts/presentation/own-parts/own-parts.component.html

@@ -32,8 +32,6 @@
       (configChanged)="onAsBuiltTableConfigChange($event)"
       (multiSelect)="onMultiSelect($event)"
       (clickSelectAction)="openDialog()"
-      [multiSortList]="tableAsBuiltSortList"
-      [multiSelectActive]="true"
       (filterActivated)="filterActivated(MainAspectType.AS_BUILT, $event )"
       (onPaginationPageSizeChange)="onDefaultPaginationSizeChange($event)"></app-parts-table>
   </ng-template>
@@ -59,15 +57,13 @@
       [addTrigger]="addPartTrigger$ | async"
       [noShadow]="true"
       [labelId]="customContext.labelId"
-      [multiSortList]="tableAsPlannedSortList"
       [multiSelectActive]="true"
       [tableType]="TableType.AS_PLANNED_OWN"
       (selected)="onSelectItem($event)"
       (configChanged)="onAsPlannedTableConfigChange($event)"
       (multiSelect)="onMultiSelect($event)"
       (clickSelectAction)="openDialog()"
       [multiSortList]="tableAsPlannedSortList"
-      [multiSelectActive]="true"
       (filterActivated)="filterActivated(MainAspectType.AS_PLANNED, $event)"
       (onPaginationPageSizeChange)="onDefaultPaginationSizeChange($event)"></app-parts-table>
   </ng-template>

cfx-frontend/src/app/modules/shared/components/multi-select-autocomplete/multi-select-autocomplete.component.html

@@ -22,7 +22,7 @@
     <div class="filter-input__label">
       {{ 'multiSelect.' + filterName | i18n }}
       <button (click)="clickClear();">
-        <img src="/assets/images/icons/refresh_icon.svg"
+        <img src="/assets/images/icons/reset_icon.svg"
           alt="refresh" />
       </button>
     </div>
@@ -59,8 +59,7 @@
     class="filter-input__textarea date-search"
     data-testid="multi-select-autocomplete--date-search-form">
     <mat-label>{{ 'multiSelect.inputLabelDate' | i18n }}</mat-label>
-    <mat-date-range-input [rangePicker]="picker"
-      disabled>
+    <mat-date-range-input [rangePicker]="picker">
       <input matStartDate
         [value]="startDate"
         [placeholder]="'datepicker.startDate' | i18n"
@@ -71,17 +70,31 @@
         (dateChange)="endDateSelected($event)">
     </mat-date-range-input>
     <mat-datepicker-toggle matSuffix
-      [for]="picker"></mat-datepicker-toggle>
+      [disableRipple]="true"
+      [for]="picker">
+      <mat-icon matDatepickerToggleIcon>
+        <img class="calendar-icon"
+          [src]='isOpen ? activeIconSource : iconSource'
+          alt="calendar icon">
+      </mat-icon>
+    </mat-datepicker-toggle>
     <mat-date-range-picker #picker
-      disabled="false">
+      (opened)="onFilterChanged(true)"
+      (closed)="onFilterChanged(false)"
+      yPosition='below'>
       <mat-datepicker-actions>
-        <button (click)="clickClear()"
-          mat-button
-          matDatepickerCancel>{{ 'datepicker.cancel' | i18n }}</button>
-        <button (click)="dateFilter()"
-          mat-raised-button
-          color="primary"
-          matDatepickerApply>{{ 'datepicker.apply' | i18n }}</button>
+        <app-button [variant]="'stroked'"
+          (click)="clickClear()"
+          matDatepickerCancel>
+          <div class="cancel-button-text">{{ 'datepicker.cancel' | i18n }}</div>
+        </app-button>
+        <app-button class="pl-2"
+          [variant]="'flat'"
+          [color]="'primary'"
+          matDatepickerApply
+          (click)="dateFilter()">
+          <div class="accept-button-text">{{ 'datepicker.apply' | i18n }}</div>
+        </app-button>
       </mat-datepicker-actions>
     </mat-date-range-picker>
   </mat-form-field>

cfx-frontend/src/app/modules/shared/components/multi-select-autocomplete/multi-select-autocomplete.component.scss

@@ -69,6 +69,12 @@
   }
 }
 
+.calendar-icon {
+  width: 22px;
+  height: 24px;
+  padding-left: 2px;
+}
+
 .option {
   display: flex;
   flex-direction: row;
@@ -120,7 +126,7 @@ input {
 }
 
 .date-box {
-  width: 275px;
+  width: 280px;
 }
 
 .text-box {
@@ -141,4 +147,28 @@ input {
 
 .selected-values-text {
   max-width: 230px;
+}
+
+.date-search {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button-text {
+  @extend .label-medium;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: 0.1px;
+  padding: 0 5px 0 5px;
+}
+
+.accept-button-text {
+  @extend .button-text;
+  @apply text-white;
+}
+
+.cancel-button-text {
+  @extend .button-text;
+  @apply text-black;
 }

cfx-frontend/src/app/modules/shared/components/multi-select-autocomplete/multi-select-autocomplete.component.ts

@@ -33,7 +33,7 @@ import {
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
-import { MatDatepickerInputEvent } from '@angular/material/datepicker';
+import { DatepickerDropdownPositionY, MatDatepickerInputEvent } from '@angular/material/datepicker';
 import {
   AutocompleteStrategy,
   AutocompleteStrategyMap,
@@ -117,6 +117,9 @@ export class MultiSelectAutocompleteComponent implements OnChanges {
   isLoadingSuggestions: boolean;
 
   filterName = 'filterLabel';
+  iconSource = './assets/images/icons/calendar.svg';
+  activeIconSource = './assets/images/icons/calendar_active.svg';
+  isOpen = false;
 
   private cleared = false;
 
@@ -283,6 +286,10 @@ export class MultiSelectAutocompleteComponent implements OnChanges {
     this.searchElement += ',' + this.datePipe.transform(this.endDate, 'yyyy-MM-dd');
   }
 
+  onFilterChanged(isOpen: boolean) {
+    this.isOpen = isOpen;
+  }
+
   clickClear(): void {
     this.selectAllChecked = false;
 

cfx-frontend/src/app/modules/shared/components/parts-table/parts-table.component.html

@@ -110,10 +110,11 @@ <h3>{{ 'table.noResultFound' | i18n }}</h3>
         <th *matHeaderCellDef
           mat-header-cell
           class="table--header--sticky">
-          <button (click)="openDialog()"
+          <button [matMenuTriggerFor]="menu"
+            (click)="menuOpened(true)"
             mat-icon-button>
-            <img class="settings-icon"
-              src="/assets/images/icons/settings_icon.svg"
+            <img [class]="isMenuOpen ? 'close-settings-icon' : 'settings-icon'"
+              [src]="isMenuOpen ? '/assets/images/icons/closeDialog_icon.svg' : '/assets/images/icons/settings_icon.svg'"
               alt="*" />
           </button>
         </th>
@@ -200,7 +201,7 @@ <h3>{{ 'table.noResultFound' | i18n }}</h3>
                 (click)="$event.stopPropagation()"
                 class="table--header--row__filter"
                 [matMenuTriggerFor]="selectMenu"
-                [ngClass]="filterFormGroup.value[column].length > 0 ? 'filter-active' : 'filter-inactive'">
+                [ngClass]="filterFormGroup.value[column]?.length > 0 ? 'filter-active' : 'filter-inactive'">
                 <div class="table--header--row__filter--border--top"></div>
                 <div class="table--header--row__filter--content">
                   <img src="\assets\images\icons\filterAltIcon.svg"
@@ -298,4 +299,12 @@ <h3>{{ 'table.noResultFound' | i18n }}</h3>
 <ng-template #autoFormat
   let-value="value">
   {{ value | autoFormat | i18n }}
-</ng-template>
+</ng-template>
+
+<mat-menu #menu="matMenu"
+  (closed)="menuOpened(false)">
+  <app-table-settings (filtersReset)="onFiltersReset()"
+    [tableType]="tableType"
+    [defaultColumns]="tableViewConfig.displayedColumns"
+    [defaultFilterColumns]="tableViewConfig.displayedColumns"></app-table-settings>
+</mat-menu>

cfx-frontend/src/app/modules/shared/components/parts-table/parts-table.component.scss

@@ -31,6 +31,15 @@
   cursor: pointer;
 }
 
+.close-settings-icon {
+  margin: 0;
+  margin-left: 5px;
+  width: 14px;
+  height: 14px;
+  padding: 0px;
+  cursor: pointer;
+}
+
 .table-menu {
   width: 40px;
 }
@@ -376,4 +385,30 @@ tr.error {
 
 .table--body--row .table--cell--sticky {
   padding: 0px !important;
+}
+
+.menu-button {
+  padding: 10px;
+  display: flex;
+}
+
+.menu-text {
+  @extend .body-medium;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25.2px;
+  padding-left: 10px;
+}
+
+.menu-header {
+  @extend .title-medium;
+  color: #333333;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 24px;
+  padding: 0 10px 10px 10px;
+}
+
+.divider {
+  color: #d2d2d2;
 }

cfx-frontend/src/app/modules/shared/components/parts-table/parts-table.component.ts

@@ -44,14 +44,11 @@ import {
 } from '@shared/components/table/table.model';
 import { addSelectedValues, removeSelectedValues } from '@shared/helper/table-helper';
 import { isDateFilter } from '@shared/helper/filter-helper';
-import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { TableSettingsService } from '@core/user/table-settings.service';
 import { TableViewConfig } from './table-view-config.model';
-import { TableSettingsComponent } from '../table-settings/table-settings.component';
 import { FilterConfigOptions } from '@shared/model/filter-config';
 import { RoleService } from '@core/user/role.service';
 import { Role } from '@core/user/role.model';
-import { DeeplinkService } from '@shared/service/deeplink.service';
 import { ToastService } from '../toasts/toast.service';
 import { TableType } from '../multi-select-autocomplete/table-type.model';
 import { PartsAsBuiltConfigurationModel } from './parts-as-built-configuration.model';
@@ -92,6 +89,8 @@ export class PartsTableComponent implements OnInit {
 
   public tableConfig: TableConfig;
 
+  @ViewChildren(MultiSelectAutocompleteComponent) multiSelectAutocomplete: QueryList<MultiSelectAutocompleteComponent>;
+
   filterKey = 'Filter';
 
   @Input() set paginationData({ page, pageSize, totalItems, content, pageCount }: Pagination<unknown>) {
@@ -169,9 +168,7 @@ export class PartsTableComponent implements OnInit {
   }
 
   constructor(private readonly tableSettingsService: TableSettingsService,
-    private dialog: MatDialog,
     private readonly roleService: RoleService,
-    private deeplinkService: DeeplinkService,
     private toastService: ToastService,
   ) {
 
@@ -293,19 +290,6 @@ export class PartsTableComponent implements OnInit {
     }
   }
 
-  openDialog(): void {
-    const config = new MatDialogConfig();
-    config.autoFocus = false;
-    config.data = {
-      title: 'table.tableSettings.title',
-      panelClass: 'custom',
-      tableType: this.tableType,
-      defaultColumns: this.tableViewConfig.displayedColumns,
-      defaultFilterColumns: this.tableViewConfig.displayedColumns,
-    };
-    this.dialog.open(TableSettingsComponent, config);
-  }
-
   public areAllRowsSelected(): boolean {
     return this.dataSource.data.every(data => this.isSelected(data));
   }
@@ -383,4 +367,17 @@ export class PartsTableComponent implements OnInit {
       }
     });
   }
+
+  public onFiltersReset(): void {
+    for (const multiSelect of this.multiSelectAutocompleteComponents) {
+      multiSelect.clickClear();
+    }
+    this.multiSortList = [];
+    this.updateSortingOfData({ active: null, direction: null });
+  }
+
+  public menuOpened(state: boolean): void {
+    this.isMenuOpen = state;
+  }
+
 }

cfx-frontend/src/app/modules/shared/components/request-notification/request-stepper/request-stepper.component.scss

@@ -37,7 +37,7 @@
 
 .cancel-button-text {
   @extend .button-text;
-  @apply text-secondary;
+  @apply text-black;
 }
 
 .buttons-wrapper {