Merge pull request #359 from catenax-ng/main

fixed several bugs in frontend filtering in parts table
eclipse-tractusx · Nov 22, 2023 · 86c9445 · 86c9445
2 parents b33c8dc + c443377
commit 86c9445
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@ to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ### Changed
 - Fixed helm repository path for backend & frontend (wrong prefix)
+- Fixed several bugs in local filtering of the parts table
 
 ### Removed
 - apk upgrade in docker image built as requested by TRG 4.02

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
@@ -27,6 +27,7 @@
                           (change)="toggleSelectAll($event)"></mat-checkbox>
             <input [disabled]="" #searchInput [(ngModel)]="searchElement" type="text"
                    [ngClass]="'pl-1'"
+                   (keydown)="filterKeyCommands($event)"
                    (input)="filterItem(searchInput.value)"
                    [placeholder]="('multiSelect.searchPlaceholder' | i18n)">
           <mat-spinner *ngIf="isLoadingSuggestions" [diameter]="20"></mat-spinner>
@@ -41,15 +42,16 @@
       <!-- 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-option  *ngFor="let option of options" [disabled]="option.disabled" [value]="option.value"
-                   [style.display]="hideOption(option) ? 'none': 'flex'">{{option.display}}
-      </mat-option>
+      <ng-container *ngIf="options?.length">
+        <mat-option  *ngFor="let option of options" [disabled]="option.disabled" [value]="option.value"
+                     [style.display]="hideOption(option) ? 'none': 'flex'">{{option.display}}
+        </mat-option>
+      </ng-container>
 
       <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">
+      <mat-select-trigger  *ngIf="selectedValue?.length > 1">
        <div>
          {{displayValue()}}
        </div>

diff --git a/...s/shared/components/multi-select-autocomplete/multi-select-autocomplete.component.spec.ts b/...s/shared/components/multi-select-autocomplete/multi-select-autocomplete.component.spec.ts
@@ -41,6 +41,7 @@ describe('MultiSelectAutocompleteComponent', () => {
         const {fixture} = await renderMultiSelectAutoCompleteComponent();
         const {componentInstance} = fixture;
 
+        componentInstance.searchElement = 'B'
         const selectedOptions = [SemanticDataModel.BATCH];
         componentInstance.selectedValue = selectedOptions;
         fixture.detectChanges();
@@ -60,12 +61,14 @@ describe('MultiSelectAutocompleteComponent', () => {
         componentInstance.selectedValue = ['initialValue'];
         componentInstance.startDate = new Date('2022-02-04');
         componentInstance.endDate = new Date('2022-02-04');
+        componentInstance.filteredOptions = ['test']
 
         componentInstance.clickClear();
 
         // Assert
         expect(componentInstance.searchElement).toBe('');
         expect(componentInstance.selectedValue).toEqual([]);
+        expect(componentInstance.filteredOptions).toEqual([]);
     });
 
     it('should return correct display string when textSearch is true', async () => {
@@ -74,7 +77,7 @@ describe('MultiSelectAutocompleteComponent', () => {
         const {componentInstance} = fixture;
 
         componentInstance.selectedValue = ['TestValue'];
-
+        componentInstance.searchElement = 'TestValue';
         const result = componentInstance.displayValue();
 
         expect(result).toBe('TestValue');
@@ -87,6 +90,7 @@ describe('MultiSelectAutocompleteComponent', () => {
         componentInstance.selectedValue = ['value1', 'value2', 'value3']; // Replace with your test values
         componentInstance.labelCount = 2; // Replace with the number of labels you expect
 
+        componentInstance.searchElement = 'v'
         componentInstance.options = [
             {value: 'value1', display: 'Display1'},
             {value: 'value2', display: 'Display2'},
@@ -105,6 +109,7 @@ describe('MultiSelectAutocompleteComponent', () => {
 
         componentInstance.selectedValue = ['value1']; // Replace with your test value
 
+        componentInstance.searchElement = 'v';
         componentInstance.options = [
             {value: 'value1', display: 'Display1'},
             {value: 'value2', display: 'Display2'},
@@ -310,4 +315,103 @@ describe('MultiSelectAutocompleteComponent', () => {
         expect(searchElementChangeSpy).toHaveBeenCalledWith(['test']);
     })
 
+    it('should return when calling displayValue() without searchElement', async () => {
+        const {fixture} = await renderMultiSelectAutoCompleteComponent();
+        const {componentInstance} = fixture;
+
+        componentInstance.searchElement = '';
+        componentInstance.displayValue();
+
+        const dValue = componentInstance.displayValue();
+        expect(dValue).toEqual(undefined);
+    })
+
+    it('should return when calling filterItem() without searchElement', async () => {
+        const {fixture} = await renderMultiSelectAutoCompleteComponent();
+        const {componentInstance} = fixture;
+
+        componentInstance.searchElement = '';
+        componentInstance.filterItem('')
+
+        const option = componentInstance.filteredOptions;
+        expect(option).toEqual([]);
+    })
+
+    it('should return when calling filterItem() without value', async () => {
+        const {fixture} = await renderMultiSelectAutoCompleteComponent();
+        const {componentInstance} = fixture;
+
+        componentInstance.searchElement = 'test';
+        componentInstance.filterItem(undefined)
+
+        const option = componentInstance.filteredOptions;
+        expect(option).toEqual([]);
+    })
+
+    it('should return when calling filterItem() without value', async () => {
+        const {fixture} = await renderMultiSelectAutoCompleteComponent();
+        const {componentInstance} = fixture;
+
+        componentInstance.searchElement = ''; // Set searchElement to an empty string
+        spyOn(componentInstance, 'getFilteredOptionsValues'); // Mock any necessary methods
+
+        // Act
+        componentInstance.onSelectionChange({ value: 'someValue' });
+
+        // Assert
+        // Add assertions as needed, for example:
+        expect(componentInstance.selectedValue).toEqual(null);
+    })
+
+    it('should stop event propagation for Enter key and Ctrl+A combination', async() => {
+        // Arrange
+        const {fixture} = await renderMultiSelectAutoCompleteComponent();
+        const {componentInstance} = fixture;
+        const eventMock = {
+            key: 'Enter',
+            ctrlKey: false,
+            stopPropagation: jasmine.createSpy('stopPropagation')
+        };
+
+        // Act
+        componentInstance.filterKeyCommands(eventMock);
+
+        // Assert
+        expect(eventMock.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should stop event propagation for Ctrl+A combination', async() => {
+        // Arrange
+        const {fixture} = await renderMultiSelectAutoCompleteComponent();
+        const {componentInstance} = fixture;
+        const eventMock = {
+            key: 'a',
+            ctrlKey: true,
+            stopPropagation: jasmine.createSpy('stopPropagation')
+        };
+
+        // Act
+        componentInstance.filterKeyCommands(eventMock);
+
+        // Assert
+        expect(eventMock.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should not stop event propagation for other keys', async() => {
+        // Arrange
+        const {fixture} = await renderMultiSelectAutoCompleteComponent();
+        const {componentInstance} = fixture;
+        const eventMock = {
+            key: 'B',
+            ctrlKey: false,
+            stopPropagation: jasmine.createSpy('stopPropagation')
+        };
+
+        // Act
+        componentInstance.filterKeyCommands(eventMock);
+
+        // Assert
+        expect(eventMock.stopPropagation).not.toHaveBeenCalled();
+    });
+
 });
diff --git a/...odules/shared/components/multi-select-autocomplete/multi-select-autocomplete.component.ts b/...odules/shared/components/multi-select-autocomplete/multi-select-autocomplete.component.ts
@@ -141,14 +141,10 @@ export class MultiSelectAutocompleteComponent implements OnChanges {
       }
 
     } else {
-      const filteredValues = this.getFilteredOptionsValues();
-      this.selectedValue = this.selectedValue.filter(
-        item => !filteredValues.includes(item),
-      );
+      this.selectedValue = [];
     }
     this.formControl.patchValue(this.selectedValue);
     this.selectionChange.emit(this.selectedValue);
-    this.searchElement = this.selectedValue;
   };
 
   changeSearchTextOption() {
@@ -161,6 +157,9 @@ export class MultiSelectAutocompleteComponent implements OnChanges {
   }
 
   displayValue() {
+    if(!this.searchElement.length) {
+      return;
+    }
     let suffix = '';
     let displayValue;
     // add +X others label if multiple
@@ -184,7 +183,12 @@ export class MultiSelectAutocompleteComponent implements OnChanges {
   }
 
   filterItem(value: any): void {
+    if(!this.searchElement.length) {
+      return;
+    }
+
     if (!value) {
+      this.filteredOptions = [];
       return;
     }
 
@@ -244,14 +248,20 @@ export class MultiSelectAutocompleteComponent implements OnChanges {
   }
 
   hideOption(option: any): boolean {
+    if(!this.searchElement.length) {
+      return true;
+    }
     return !(this.filteredOptions.indexOf(option) > -1);
   }
 
   // Returns plain strings array of filtered values
   getFilteredOptionsValues(): string[] {
+      console.log("getFiltered")
     const filteredValues = [];
     this.filteredOptions.forEach(option => {
-      filteredValues.push(option.value);
+      if(option.length) {
+          filteredValues.push(option.value);
+      }
     });
     return filteredValues;
   }
@@ -276,7 +286,7 @@ export class MultiSelectAutocompleteComponent implements OnChanges {
     this.selectedValue = [];
     this.startDate = null;
     this.endDate = null;
-    this.filterItem('');
+    this.filteredOptions = [];
   }
 
   dateFilter(){
@@ -285,6 +295,9 @@ export class MultiSelectAutocompleteComponent implements OnChanges {
 
 
   onSelectionChange(val: any) {
+    if(!this.searchElement.length) {
+      return;
+    }
     const filteredValues = this.getFilteredOptionsValues();
 
     const selectedCount = this.selectedValue.filter(item => filteredValues.includes(item)).length;
@@ -308,4 +321,9 @@ export class MultiSelectAutocompleteComponent implements OnChanges {
     }
   }
 
+    filterKeyCommands(event: any) {
+        if (event.key === 'Enter' || (event.ctrlKey && event.key === 'a')) {
+          event.stopPropagation();
+        }
+    }
 }