Merge pull request #353 from catenax-ng/main

autocompletion and local filter selecttion on parts table
eclipse-tractusx · Nov 16, 2023 · ea7d049 · ea7d049
2 parents 8458975 + f315aa1
commit ea7d049
Show file tree

Hide file tree

Showing 25 changed files with 694 additions and 479 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,12 +7,20 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [UNRELEASED - DD.MM.YYYY]
 ### Added
+
+### Changed
+
+### Removed
+
+## [9.0.0-rc2 - 15.11.2023]
+### Added
 - Cypress Login to E2E Environment to enable cypress e2e tests.
 - Fixed bug in argo workflow which allows to successfully run on INT-A/INT-B
 - database dumps for environments A and B, along with a README guide for database recovery.
 - New job named 'print_environment' to the Argo-workflow that prints the selected environment to the GitHub Step Summary.
 - Added NOTIFICATION_COUNT_EQUAL filter strategy for Assets as built Specifications
 - Added new supported filter for notifications assetId that allows filtering alerts and investigations by assetId
+- Added autocompletion and local filter selection on parts table
 - Fixed bug in argo workflow which allows to successfully upload testdata
 - No logging option for cypress
 

diff --git a/COMPATIBILITY_MATRIX.md b/COMPATIBILITY_MATRIX.md
@@ -1,22 +1,23 @@
-# Compatibility matrix v1.0
+# Compatibility matrix Trace-X
 
 ## Catena-X Release?
-- [x] yes -> Catena-X Release <version>
+- [x] yes -> Catena-X Release 9.0.0-rc2
 - [ ] no
 
 
-### (Trace-X Release)  [<version>| Release Notes](https://github.com/catenax-ng/tx-traceability-foss/releases/tag/<version>)
+### (Trace-X Release)  [9.0.0-rc2| Release Notes](https://github.com/catenax-ng/tx-traceability-foss/releases/tag/9.0.0-rc2)
 
-#### Trace-X version 1.3.14
+#### Trace-X version 9.0.0-rc2
+#### Helm Version 1.3.21
 
-| Name of service                  | Version | Comments   |
-|----------------------------------|---------|------------|
-| postgresql                       | 12.1.6  |            |
-| postgresql alias: edc-postgresql | 12.1.6  |            |
-| pgadmin4                         | 1.13.6  |            |
-| irs-helm                         | 6.8.0   |            |
-| tractusx-connector               | 0.5.0   |            |
-| discovery service                | 0.1.0   |            |
-| portal                           | ?       |            |
-| SD-Factory                       | ?       |            |
-| wallet                           | ?       |            |
+| Name of service    | Version | Comments   |
+|--------------------|---------|------------|
+| postgresql         | 12.1.6  |            |
+| edc-postgresql     | 12.1.6  |            |
+| pgadmin4           | 1.13.6  |            |
+| irs-helm           | 6.9.1   |            |
+| tractusx-connector | 0.5.3   |            |
+| discovery service  | 0.1.0   |            |
+| portal             | ?       |            |
+| SD-Factory         | ?       |            |
+| wallet             | ?       |            |
diff --git a/charts/traceability-foss/Chart.yaml b/charts/traceability-foss/Chart.yaml
@@ -23,15 +23,15 @@ home: https://eclipse-tractusx.github.io/
 sources:
   - https://github.com/eclipse-tractusx/traceability-foss
 type: application
-version: 1.3.20
-appVersion: "9.0.0-rc1"
+version: 1.3.21
+appVersion: "9.0.0-rc2"
 dependencies:
   - name: frontend
     repository: "file://charts/frontend"
-    version: 1.3.20
+    version: 1.3.21
   - name: backend
     repository: "file://charts/backend"
-    version: 1.3.20
+    version: 1.3.21
   - name: postgresql
     repository: https://charts.bitnami.com/bitnami
     version: 12.1.6

diff --git a/charts/traceability-foss/charts/backend/Chart.yaml b/charts/traceability-foss/charts/backend/Chart.yaml
@@ -20,8 +20,8 @@ apiVersion: v2
 name: backend
 description: A Helm chart for Traceability backend application
 type: application
-version: 1.3.20
-appVersion: "9.0.0-rc1"
+version: 1.3.21
+appVersion: "9.0.0-rc2"
 dependencies:
   - name: postgresql
     repository: https://charts.bitnami.com/bitnami

diff --git a/charts/traceability-foss/charts/frontend/Chart.yaml b/charts/traceability-foss/charts/frontend/Chart.yaml
@@ -20,5 +20,5 @@ apiVersion: v2
 name: frontend
 description: A Helm chart for Traceability frontend application
 type: application
-version: 1.3.20
-appVersion: "9.0.0-rc1"
+version: 1.3.21
+appVersion: "9.0.0-rc2"
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "trace-x",
-  "version": "9.0.0-rc1",
+  "version": "9.0.0-rc2",
   "scripts": {
     "analyze": "ng build --configuration=production --stats-json && webpack-bundle-analyzer dist/stats.json",
     "build:prod": "ng build --output-hashing=all --configuration=debugProd --base-href /{baseHrefPlaceholder}/ --deploy-url /{baseHrefPlaceholder}/ ",

diff --git a/frontend/src/app/modules/page/parts/core/parts.helper.spec.ts b/frontend/src/app/modules/page/parts/core/parts.helper.spec.ts
@@ -17,9 +17,9 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import {PartsTableComponent} from '@shared/components/parts-table/parts-table.component';
-import {resetMultiSelectionAutoCompleteComponent} from "@page/parts/core/parts.helper";
-import {QueryList} from "@angular/core";
+import { QueryList } from '@angular/core';
+import { resetMultiSelectionAutoCompleteComponent } from '@page/parts/core/parts.helper';
+import { PartsTableComponent } from '@shared/components/parts-table/parts-table.component';
 
 describe('resetMultiSelectionAutoCompleteComponent', () => {
     it('should reset multiSelectAutocompleteComponents and set oneFilterSet to true if filterFormGroup is dirty', () => {
@@ -63,7 +63,7 @@ describe('resetMultiSelectionAutoCompleteComponent', () => {
 
         partsTableComponents.forEach((partsTableComponent) => {
             partsTableComponent.multiSelectAutocompleteComponents.forEach((multiSelectAutocompleteComponent) => {
-                expect(multiSelectAutocompleteComponent.theSearchElement).toBeNull();
+                expect(multiSelectAutocompleteComponent.searchElement).toBeNull();
                 expect(multiSelectAutocompleteComponent.clickClear).toHaveBeenCalled();
                 expect(multiSelectAutocompleteComponent.formControl.reset).toHaveBeenCalled();
             });

diff --git a/frontend/src/app/modules/page/parts/core/parts.helper.ts b/frontend/src/app/modules/page/parts/core/parts.helper.ts
@@ -17,13 +17,13 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import {QueryList} from "@angular/core";
-import {PartsTableComponent} from "@shared/components/parts-table/parts-table.component";
+import { QueryList } from '@angular/core';
+import { PartsTableComponent } from '@shared/components/parts-table/parts-table.component';
 
 export function resetMultiSelectionAutoCompleteComponent(partsTableComponents: QueryList<PartsTableComponent>, oneFilterSet: boolean): boolean {
     for (const partsTableComponent of partsTableComponents) {
         for (const multiSelectAutocompleteComponent of partsTableComponent.multiSelectAutocompleteComponents) {
-            multiSelectAutocompleteComponent.theSearchElement = null;
+            multiSelectAutocompleteComponent.searchElement = null;
             multiSelectAutocompleteComponent.clickClear();
             multiSelectAutocompleteComponent.formControl.reset();
             if (partsTableComponent.filterFormGroup.dirty && !oneFilterSet) {

diff --git a/frontend/src/app/modules/page/parts/presentation/parts.component.html b/frontend/src/app/modules/page/parts/presentation/parts.component.html
@@ -69,6 +69,7 @@
                                          [multiSortList]="tableAsBuiltSortList"
                                          [tableHeader]='"page.asBuiltParts" | i18n'
                                          [tableType]="PartTableType.AS_BUILT_OWN"
+                                         [mainAspectType]="MainAspectType.AS_BUILT"
                         ></app-parts-table>
                     </ng-template>
                 </div>
@@ -95,6 +96,7 @@
                                          [multiSortList]="tableAsPlannedSortList"
                                          [tableHeader]='"page.asPlannedParts" | i18n'
                                          [tableType]="PartTableType.AS_PLANNED_OWN"
+                                         [mainAspectType]="MainAspectType.AS_PLANNED"
                         ></app-parts-table>
 
                     </ng-template>

diff --git a/frontend/src/app/modules/page/parts/presentation/parts.component.ts b/frontend/src/app/modules/page/parts/presentation/parts.component.ts
@@ -223,4 +223,5 @@ export class PartsComponent implements OnInit, OnDestroy, AfterViewInit {
 
     protected readonly UserSettingView = UserSettingView;
     protected readonly PartTableType = PartTableType;
+    protected readonly MainAspectType = MainAspectType;
 }
diff --git a/...ules/shared/components/multi-select-autocomplete/multi-select-autocomplete.component.html b/...ules/shared/components/multi-select-autocomplete/multi-select-autocomplete.component.html
@@ -17,47 +17,56 @@
 SPDX-License-Identifier: Apache-2.0
 -->
 <mat-form-field>
-    <mat-select *ngIf="!isDate" #selectElem [placeholder]="placeholder" [formControl]="formControl"
-                [multiple]="multiple"
-                (selectionChange)="onSelectionChange($event)">
+
+    <mat-select *ngIf="!isDate" #selectElem [placeholder]="placeholder" [formControl]="formControl" (click)="filterItem('')"
+                [multiple]="true"
+                (selectionChange)="onSelectionChange($event)" panelClass="app-multiselect-filter-dropdown">
 
         <div class="box-search">
-            <mat-checkbox *ngIf="multiple" color="primary" class="box-select-all" [(ngModel)]="selectAllChecked"
+            <mat-checkbox  color="primary" class="box-select-all" [(ngModel)]="selectAllChecked"
                           (change)="toggleSelectAll($event)"></mat-checkbox>
-            <input [disabled]="!textSearch" #searchInput [(ngModel)]="theSearchElement" type="text"
-                   [ngClass]="{'pl-1': !multiple}"
+            <input [disabled]="" #searchInput [(ngModel)]="searchElement" type="text"
+                   [ngClass]="'pl-1'"
                    (input)="filterItem(searchInput.value)"
-                   [placeholder]="textSearch ? ('multiSelect.searchPlaceholder' | i18n): ('multiSelect.choosePlaceholder'| i18n)">
-            <div class="box-search-icon" (click)="filterItem(''); clickClear()">
+                   [placeholder]="('multiSelect.searchPlaceholder' | i18n)">
+          <mat-spinner *ngIf="isLoadingSuggestions" [diameter]="20"></mat-spinner>
+          <div class="box-search-icon" (click)="filterItem(''); clickClear()">
                 <button mat-icon-button class="search-button">
                     <mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>
                 </button>
             </div>
+
         </div>
 
+      <!-- hidden element just so that the mat-select dropdown opens -->
+      <mat-option [style.display]="'none'"></mat-option>
+      <div class="pl-1" *ngIf="suggestionError">{{'multiSelect.suggestionError' | i18n}}</div>
 
-        <mat-select-trigger *ngIf="!isDate">
-            {{onDisplayString()}}
-        </mat-select-trigger>
-        <mat-option (click)="changeSearchTextOption()" [value]=this.theSearchElement
-                    [style.display]="shouldHideTextSearchOptionField() ? 'none': 'flex'">{{this.theSearchElement}}
-        </mat-option>
-        <mat-option  *ngFor="let option of options" [disabled]="option.disabled" [value]="option[value]"
-                    [style.display]="hideOption(option) ? 'none': 'flex'">{{option[display]}}
-        </mat-option>
+      <mat-option  *ngFor="let option of options" [disabled]="option.disabled" [value]="option.value"
+                   [style.display]="hideOption(option) ? 'none': 'flex'">{{option.display}}
+      </mat-option>
 
+      <mat-option *ngIf="singleSearch" (click)="changeSearchTextOption()" [value]=this.searchElement
+                  [style.display]="this.shouldHideTextSearchOptionField() ? 'none': 'flex'">{{this.searchElement}}
+      </mat-option>
+      <mat-select-trigger *ngIf="selectedValue?.length > 1">
+       <div>
+         {{displayValue()}}
+       </div>
+      </mat-select-trigger>
     </mat-select>
 
+
     <div  *ngIf="isDate" class="date-search">
       <mat-date-range-input [rangePicker]="picker" disabled>
-        <input matStartDate [value]="startDate" [placeholder]="'datepicker.startDate' | i18n" (dateChange)="startDateSelected($event)" disabled="false">
+        <input matStartDate [value]="startDate" [placeholder]="'datepicker.startDate' | i18n" (dateChange)="startDateSelected($event)">
         <input matEndDate [value]="endDate" [placeholder]="'datepicker.endDate' | i18n" (dateChange)="endDateSelected($event)">
       </mat-date-range-input>
       <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
       <mat-date-range-picker #picker disabled="false">
         <mat-datepicker-actions>
-          <button (click)="filterItem(''); clickClear()" mat-button matDatepickerCancel>{{ 'datepicker.cancel' | i18n }}</button>
-          <button mat-raised-button color="primary" matDatepickerApply>{{ 'datepicker.apply' | i18n }}</button>
+          <button (click)="clickClear()" mat-button matDatepickerCancel>{{ 'datepicker.cancel' | i18n }}</button>
+          <button (click)="dateFilter()" mat-raised-button color="primary" matDatepickerApply>{{ 'datepicker.apply' | i18n }}</button>
         </mat-datepicker-actions>
       </mat-date-range-picker>
     </div>

diff --git a/...ules/shared/components/multi-select-autocomplete/multi-select-autocomplete.component.scss b/...ules/shared/components/multi-select-autocomplete/multi-select-autocomplete.component.scss
@@ -23,6 +23,8 @@
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
   transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
+  align-items: center;
+
 }
 
 .box-search, input {