Merge pull request #377 from catenax-ng/main

Added autocompletion for notifications

CHANGELOG.md

@@ -14,6 +14,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Added implementation for cucumber tests for quality investigations
 - Separation of auto complete mechanism (selected / searched elements)
 - Added new step definition for cucumber tests "I use assets with ids {string}" allowing to specify assets used for notification creation
+- Added autocomplete endpoints for notifications
 - Added BPN column to parts table
 - Emit change check to observables in frontend
 
@@ -29,29 +30,37 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Cucumber test steps for creating notifications no longer support default assetId when no asset is provided with previous step
 - Upgraded the Upload_Testdata job in Argo Workflow to fix bugs
 - Auto format for frontend source code applied
+- Updated user-manual for Parts filtering autocomplete functionality
+- Fixed issue when requesting autocomplete api endpoints with no size provided
 - Default pagination size to 50.
 - Split up bpn column in notification table views to show bpn and name separately
 - Changed detailed part view action from clicking on list item to a menu action column
-
+- Changed FE fieldName mapping to fix bug for properties catenaxSiteId and function
+- Fix of global search field
+- Parts autocomplete API now is case insensitive when using "startWith" parameter
 
 ### Removed
 - removed asset filters ( qualityInvestigationIdsInStatusActive, qualityInvestigationIdsInStatusActive )
 - Removed Cucumber tests steps for creating alerts with two parts as new step definition is enough for the same feature
 
-## [9.0.0-rc4 - xx.xx.2023]
-### Added
-- Added new dashboard layout and additional widgets
-- Refactored dashboard response
-- Added new fields to dashboard response
+## [9.0.0 - 05.12.2023]
+### Changed
+- Upgraded irs-client library from 1.4.1-SNAPSHOT to 1.4.1
+
+### Known knowns
+
+- Backend/Frontend [TRACEFOSS-2728]: Investigations / Alerts: Transition of the message status will take some time. If it fails the user will not be informed.
 
 ## [9.0.0-rc3 - 27.11.2023]
 ### Added
 - DEPENDENCIES_FRONTEND, SECURITY.md, NOTICE.md, LICENSE file to frontend docker image
 - Added a step-by-step guide to register a server in pgAdmin in the database dump README
 - Documentation about technical users
+- Added new dashboard layout and additional widgets
 
 ### Changed
 - Fixed helm repository path for backend & frontend (wrong prefix)
+- Refactored dashboard response
 - Updated user manual
 - Autocomplete endpoints changed owner String type param to Owner for input validation and sql injection prevention
 - Autocomplete endpoints repository uses now criteria api rather than native query

docs/src/docs/user/user-manual.adoc

@@ -113,6 +113,10 @@ Alternatively, you can use the view toggle to adjust the visibility of the table
 Both tables can be sorted, filtered and searched.
 The global search bar at the top returns part results from both Tables.
 
+Choosing filter input field for column and typing in any character will show filter suggestions that can be used for search functionality that starts with given characters or phrase.
+
+image::https://raw.githubusercontent.com/eclipse-tractusx/traceability-foss/main/docs/src/images/user-manual/parts-autosuggestion-filtering.png[]
+
 === AsBuilt Lifecycle Parts
 
 List view of own Parts with AsBuilt Lifecycle.

frontend/src/app/modules/shared/assembler/parts.assembler.ts

@@ -238,42 +238,54 @@ export class PartsAssembler {
     });
   }
 
+  public static mapFieldNameToApi(fieldName: string) {
+    if (!fieldName) {
+      return;
+    }
+
+    if(this.localToApiMapping.has(fieldName)) {
+      return this.localToApiMapping.get(fieldName);
+    } else {
+      return fieldName;
+    }
+
+  }
+
   public static mapSortToApiSort(sorting: TableHeaderSort): string {
     if (!sorting) {
       return '';
     }
 
-
-    const localToApiMapping = new Map<string, string>([
-      [ 'id', 'id' ],
-      [ 'idShort', 'idShort' ],
-      [ 'semanticModelId', 'semanticModelId' ],
-      [ 'manufacturer', 'manufacturerName' ],
-      [ 'manufacturerPartId', 'manufacturerPartId' ],
-      [ 'partId', 'manufacturerPartId' ],
-      [ 'nameAtManufacturer', 'nameAtManufacturer' ],
-      [ 'businessPartner', 'businessPartner' ],
-      [ 'name', 'nameAtManufacturer' ],
-      [ 'qualityType', 'qualityType' ],
-      [ 'van', 'van' ],
-      [ 'semanticDataModel', 'semanticDataModel' ],
-      [ 'classification', 'classification' ],
-      [ 'customerPartId', 'customerPartId' ],
-      [ 'nameAtCustomer', 'nameAtCustomer' ],
-      [ 'manufacturingDate', 'manufacturingDate' ],
-      [ 'manufacturingCountry', 'manufacturingCountry' ],
-      [ 'validityPeriodFrom', 'validityPeriodFrom' ],
-      [ 'validityPeriodTo', 'validityPeriodTo' ],
-      [ 'catenaXSiteId', 'catenaXSiteId' ],
-      [ 'psFunction', 'function' ],
-      [ 'functionValidFrom', 'functionValidFrom' ],
-      [ 'functionValidUntil', 'functionValidUntil' ],
-      [ 'sentActiveAlerts', 'sentQualityAlertIdsInStatusActive' ],
-      [ 'receivedActiveAlerts', 'receivedQualityAlertIdsInStatusActive' ],
-      [ 'sentActiveInvestigations', 'receivedQualityAlertIdsInStatusActive' ],
-      [ 'receivedActiveInvestigations', 'receivedQualityAlertIdsInStatusActive' ],
-    ]);
-
-    return `${ localToApiMapping.get(sorting[0]) || sorting },${ sorting[1] }`;
+    return `${ this.localToApiMapping.get(sorting[0]) || sorting },${ sorting[1] }`;
   }
+
+  public static localToApiMapping = new Map<string, string>([
+    [ 'id', 'id' ],
+    [ 'idShort', 'idShort' ],
+    [ 'semanticModelId', 'semanticModelId' ],
+    [ 'manufacturer', 'manufacturerName' ],
+    [ 'manufacturerPartId', 'manufacturerPartId' ],
+    [ 'partId', 'manufacturerPartId' ],
+    [ 'nameAtManufacturer', 'nameAtManufacturer' ],
+    [ 'businessPartner', 'businessPartner' ],
+    [ 'name', 'nameAtManufacturer' ],
+    [ 'qualityType', 'qualityType' ],
+    [ 'van', 'van' ],
+    [ 'semanticDataModel', 'semanticDataModel' ],
+    [ 'classification', 'classification' ],
+    [ 'customerPartId', 'customerPartId' ],
+    [ 'nameAtCustomer', 'nameAtCustomer' ],
+    [ 'manufacturingDate', 'manufacturingDate' ],
+    [ 'manufacturingCountry', 'manufacturingCountry' ],
+    [ 'validityPeriodFrom', 'validityPeriodFrom' ],
+    [ 'validityPeriodTo', 'validityPeriodTo' ],
+    [ 'catenaXSiteId', 'catenaxSiteId' ],
+    [ 'psFunction', 'function' ],
+    [ 'functionValidFrom', 'functionValidFrom' ],
+    [ 'functionValidUntil', 'functionValidUntil' ],
+    [ 'sentActiveAlerts', 'sentQualityAlertIdsInStatusActive' ],
+    [ 'receivedActiveAlerts', 'receivedQualityAlertIdsInStatusActive' ],
+    [ 'sentActiveInvestigations', 'receivedQualityAlertIdsInStatusActive' ],
+    [ 'receivedActiveInvestigations', 'receivedQualityAlertIdsInStatusActive' ],
+  ]);
 }

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

@@ -24,14 +24,12 @@ import { Component, EventEmitter, Inject, Input, LOCALE_ID, OnChanges, ViewChild
 import { FormControl } from '@angular/forms';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MatDatepickerInputEvent } from '@angular/material/datepicker';
+import { MatSelectChange } from '@angular/material/select';
 import { Owner } from '@page/parts/model/owner.enum';
 import { PartTableType } from '@shared/components/table/table.model';
-import {
-  FormatPartSemanticDataModelToCamelCasePipe,
-} from '@shared/pipes/format-part-semantic-data-model-to-camelcase.pipe';
+import { FormatPartSemanticDataModelToCamelCasePipe } from '@shared/pipes/format-part-semantic-data-model-to-camelcase.pipe';
 import { PartsService } from '@shared/service/parts.service';
 import { firstValueFrom } from 'rxjs';
-import { MatSelectChange } from '@angular/material/select';
 
 @Component({
   selector: 'app-multiselect',
@@ -299,18 +297,17 @@ export class MultiSelectAutocompleteComponent implements OnChanges {
     if (this.singleSearch) {
       return;
     }
-    // TODO the issue is that the selectedValue is already empty but still needs to be readded to the options if unselected
+    if (!this.allOptions) {
+      this.allOptions = [];
+    }
     this.options = this.allOptions.filter(option => !this.selectedValue.includes(option.value));
     if (!this.selectedValue) {
       this.options = this.allOptions;
     }
 
-
-    console.log('search options after update', this.searchedOptions);
-    console.log('options after update', this.options);
-
-    console.log(this.allOptions, 'all options in change');
-
+    if (!this.searchedOptions) {
+      this.searchedOptions = [];
+    }
     const filter = this.searchedOptions.filter(val => this.selectedValue.includes(val));
     for (const selected of this.selectedValue) {
       filter.push({ display: selected, value: selected });

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

@@ -219,7 +219,7 @@ <h3>{{ 'table.noResultFound' | i18n }}</h3>
 
                             <ng-template #notificationCountElement>
                                 <ng-container *ngIf="isNotificationCountColumn(column); else autoFormatRef">
-                                        <span (click)="deeplinkToNotification(column, element[column])">
+                                        <span (click)="deeplinkToNotification(column, element[column])" class="table--notification--cell--notification--count">
                                             {{element[column]?.length}}</span>
                                 </ng-container>
                             </ng-template>

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

@@ -56,7 +56,7 @@ table {
 }
 
 .mat-mdc-row .mat-mdc-cell {
-  cursor: pointer;
+  cursor: default;
 }
 
 .table--no-data {
@@ -86,6 +86,7 @@ table {
 .table--notification--cell {
   display: flex;
   align-items: center;
+  cursor: default;
 }
 
 .table--notification--cell--content {
@@ -132,16 +133,16 @@ table {
 }
 
 tr.highlighted {
-  @apply bg-warning bg-opacity-30;
+  background-color: #ffe581;
   &:hover {
-    @apply bg-warning bg-opacity-30;
+    background-color: #ffe271;
   }
 }
 
 tr.error {
-  @apply bg-danger bg-opacity-20;
+  background-color: #ff878c;
   &:hover {
-    @apply bg-danger bg-opacity-20;
+    background-color: #ff5960;
   }
 }
 
@@ -161,7 +162,6 @@ tr.error {
 }
 
 .table--menu {
-  background-color: white;
 
   &__mobile {
     display: none;
@@ -178,6 +178,20 @@ tr.error {
   }
 }
 
+.table--menu.highlighted {
+  background-color: #ffe581;
+  &:hover {
+    background-color: #ffe271;
+  }
+}
+
+.table--menu.error {
+  background-color: #ff878c;
+  &:hover {
+    background-color: #ff5960;
+  }
+}
+
 .expand-row {
   height: 0;
 }
@@ -243,3 +257,7 @@ tr.error {
   width: 90px;
 }
 
+.table--notification--cell--notification--count {
+  cursor: pointer;
+}
+

frontend/src/app/modules/shared/service/parts.service.ts

@@ -126,8 +126,9 @@ export class PartsService {
   }
 
   public getDistinctFilterValues(isAsBuilt: boolean, owner: Owner, fieldNames: string, startsWith: string) {
+    const mappedFieldName = PartsAssembler.mapFieldNameToApi(fieldNames);
     let params = new HttpParams()
-      .set('fieldName', fieldNames)
+      .set('fieldName', mappedFieldName)
       .set('startWith', startsWith)
       .set('size', 200)
       .set('owner', owner);

frontend/src/theme/base.scss

@@ -249,7 +249,8 @@ app-parts, app-other-parts, app-notifications-tab {
   }
 
   .mat-mdc-row:hover {
-    background-color: rgba(0, 0, 0, 0.04) !important;
+    transition: 0.1s ease !important;
+    filter: brightness(0.9) !important;
     border: none !important;
   }