fix(platform): update grouping selection flow to prevent duplicate gr…

…oupings (#12271) Co-authored-by: Inna Atanasova <[email protected]>
SAP · Aug 16, 2024 · a921273 · a921273
1 parent 5041138
commit a921273
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/libs/platform/table/components/table-p13-dialog/grouping/grouping.component.html b/libs/platform/table/components/table-p13-dialog/grouping/grouping.component.html
@@ -15,15 +15,15 @@ <h4 fd-title [headerSize]="4">{{ 'platformTable.P13GroupDialogHeader' | fdTransl
     </fd-dialog-header>
 
     <fd-dialog-body>
-        @for (rule of rules; track rule) {
+        @for (rule of rules; track rule; let i = $index) {
             <div class="group-row">
                 <fd-select
                     class="group-row__select"
                     [value]="rule.columnKey"
                     (valueChange)="_onRuleColumnKeyChange(rule, $event)"
                     [placeholder]="'platformTable.P13GroupDialogNoneSelectedColumnSelectPlaceholder' | fdTranslate"
                 >
-                    @for (column of columns; track column) {
+                    @for (column of getAvailableColumns(rule); track column) {
                         <li fd-option [value]="column.key">
                             {{ column.label }}
                         </li>
@@ -45,6 +45,7 @@ <h4 fd-title [headerSize]="4">{{ 'platformTable.P13GroupDialogHeader' | fdTransl
                         [attr.aria-label]="'platformTable.P13GroupDialogRemoveGroupBtnTitle' | fdTranslate"
                         [title]="'platformTable.P13GroupDialogRemoveGroupBtnTitle' | fdTranslate"
                         (click)="_removeRule(rule)"
+                        [disabled]="!rule.columnKey"
                     ></button>
 
                     <button
@@ -53,7 +54,8 @@ <h4 fd-title [headerSize]="4">{{ 'platformTable.P13GroupDialogHeader' | fdTransl
                         glyph="add"
                         [attr.aria-label]="'platformTable.P13GroupDialogAddNewGroupBtnTitle' | fdTranslate"
                         [title]="'platformTable.P13GroupDialogAddNewGroupBtnTitle' | fdTranslate"
-                        (click)="_addNew($index)"
+                        (click)="_addNew(i)"
+                        [disabled]="rules.length >= columns.length || !rule.columnKey"
                     ></button>
                 </div>
             </div>

diff --git a/libs/platform/table/components/table-p13-dialog/grouping/grouping.component.ts b/libs/platform/table/components/table-p13-dialog/grouping/grouping.component.ts
@@ -1,12 +1,18 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, signal, ViewEncapsulation } from '@angular/core';
 import {
     CollectionGroup,
+    getUniqueListValuesByKey,
     SortDirection,
-    TableDialogCommonData,
-    getUniqueListValuesByKey
+    TableDialogCommonData
 } from '@fundamental-ngx/platform/table-helpers';
 
-import { DialogRef } from '@fundamental-ngx/core/dialog';
+import {
+    DialogBodyComponent,
+    DialogComponent,
+    DialogFooterComponent,
+    DialogHeaderComponent,
+    DialogRef
+} from '@fundamental-ngx/core/dialog';
 
 import { CdkScrollable } from '@angular/cdk/overlay';
 
@@ -20,17 +26,11 @@ import {
 } from '@fundamental-ngx/core/bar';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
 import { CheckboxComponent } from '@fundamental-ngx/core/checkbox';
-import {
-    DialogBodyComponent,
-    DialogComponent,
-    DialogFooterComponent,
-    DialogHeaderComponent
-} from '@fundamental-ngx/core/dialog';
 import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
 import { OptionComponent, SelectComponent } from '@fundamental-ngx/core/select';
 import { TitleComponent } from '@fundamental-ngx/core/title';
 import { FdTranslatePipe } from '@fundamental-ngx/i18n';
-import { RESETTABLE_TOKEN, ResetButtonComponent, Resettable } from '../../reset-button/reset-button.component';
+import { ResetButtonComponent, Resettable, RESETTABLE_TOKEN } from '../../reset-button/reset-button.component';
 
 export interface GroupDialogColumn {
     label: string;
@@ -161,6 +161,12 @@ export class P13GroupingDialogComponent implements Resettable {
         this._recalculateResetAvailability();
     }
 
+    /** Get available columns for a rule */
+    getAvailableColumns(rule: GroupRule): GroupDialogColumn[] {
+        const selectedKeys = this.rules.map((r) => r.columnKey).filter((key) => key !== NOT_SELECTED_OPTION_VALUE);
+        return this.columns.filter((column) => !selectedKeys.includes(column.key) || column.key === rule.columnKey);
+    }
+
     /** @hidden */
     private _initiateRules(collectionGroup?: CollectionGroup[]): void {
         this.rules = this._createGroupRules(collectionGroup);