fix(platform): Combine Sorting, Filtering, and Grouping Settings into a Single Dialog

libs/docs/platform/table/child-docs/settings-dialog/settings-dialog-docs.component.html

@@ -51,3 +51,28 @@
     <fdp-platform-table-groupable-example></fdp-platform-table-groupable-example>
 </component-example>
 <code-example [exampleFiles]="groupableTableFiles"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="combined-settings" componentName="table">
+    Combined Table Settings Dialog</fd-docs-section-title
+>
+<description>
+    <p>
+        The <code>fdp-table-view-settings-dialog</code> component allows users to manage sorting, filtering, and
+        grouping settings in one convenient dialog.
+    </p>
+    <p>
+        By using the properties <code>[sortable]="true"</code>, <code>[filterable]="true"</code>, and
+        <code>[groupable]="true"</code>, developers can enable the respective functionalities directly in the table
+        columns.
+    </p>
+    <p>
+        This dialog streamlines user interactions, making it easier to adjust table settings without navigating through
+        multiple interfaces.
+    </p>
+</description>
+<component-example>
+    <fdp-platform-table-settings-dialog-example></fdp-platform-table-settings-dialog-example>
+</component-example>
+<code-example [exampleFiles]="settingsTableFiles"></code-example>

libs/docs/platform/table/child-docs/settings-dialog/settings-dialog-docs.component.ts

@@ -13,6 +13,7 @@ import {
 } from '@fundamental-ngx/docs/shared';
 import { PlatformTableFilterableExampleComponent } from '../../examples/platform-table-filterable-example.component';
 import { PlatformTableGroupableExampleComponent } from '../../examples/platform-table-groupable-example.component';
+import { PlatformTableSettingsDialogExampleComponent } from '../../examples/platform-table-settings-dialog-example.component';
 import { PlatformTableSortableExampleComponent } from '../../examples/platform-table-sortable-example.component';
 
 const platformTableSortableSrc = 'platform-table-sortable-example.component.html';
@@ -21,6 +22,8 @@ const platformTableGroupableSrc = 'platform-table-groupable-example.component.ht
 const platformTableGroupableTsSrc = 'platform-table-groupable-example.component.ts';
 const platformTableFilterableSrc = 'platform-table-filterable-example.component.html';
 const platformTableFilterableTsSrc = 'platform-table-filterable-example.component.ts';
+const platformTableSettingsSrc = 'platform-table-settings-dialog-example.component.html';
+const platformTableFiSettingsSrc = 'platform-table-settings-dialog-example.component.ts';
 @Component({
     selector: 'fd-settings-dialog-docs',
     templateUrl: './settings-dialog-docs.component.html',
@@ -36,7 +39,8 @@ const platformTableFilterableTsSrc = 'platform-table-filterable-example.componen
         SeparatorComponent,
         PlatformTableFilterableExampleComponent,
         PlatformTableGroupableExampleComponent,
-        FdDatetimeModule
+        FdDatetimeModule,
+        PlatformTableSettingsDialogExampleComponent
     ]
 })
 export class SettingsDialogDocsComponent {
@@ -89,6 +93,22 @@ export class SettingsDialogDocsComponent {
             name: 'platform-table-example.component.ts'
         }
     ];
+
+    settingsTableFiles: ExampleFile[] = [
+        {
+            language: 'html',
+            code: getAssetFromModuleAssets(platformTableSettingsSrc),
+            fileName: 'platform-table-settings-dialog-example',
+            name: 'platform-table-example.component.html'
+        },
+        {
+            language: 'typescript',
+            code: getAssetFromModuleAssets(platformTableFiSettingsSrc),
+            fileName: 'platform-table-settings-dialog-example',
+            component: 'PlatformTableSettingsDialogExampleComponent',
+            name: 'platform-table-example.component.ts'
+        }
+    ];
     constructor() {
         this.childService.setLink(this.route.snapshot.routeConfig?.path);
     }

libs/docs/platform/table/e2e/table-settings-dialog.e2e-spec.ts

@@ -149,7 +149,6 @@ describe('Table component test suite', () => {
             elem.click();
             await expect((await getText(tableCellStatusColor, 2)).trim()).withContext('negative');
         });
-
         it('should check filtering by status', async () => {
             await scrollIntoView(tableFilterableExample);
             await click(tableFilterableExample + toolbarButton);
@@ -165,14 +164,18 @@ describe('Table component test suite', () => {
 
         it('should check on filter by price reset button is clickable', async () => {
             await scrollIntoView(tableFilterableExample);
-            await click(tableFilterableExample + buttonFilter);
+            await click(tableFilterableExample + toolbarButton);
+            const elem = $('li:nth-child(2)');
+            elem.click();
+            const rowLength = await getElementArrayLength(tableFilterableExample + tableRow);
+            for (let i = 0; i < rowLength; i++) {
+                await expect((await getText(tableFilterableExample + tableCellStatus, i)).trim()).withContext(
+                    'Out of stock'
+                );
+            }
             await click(dialogFilters);
             await setValue(filterInput, '10');
             await setValue(filterInput, '40', 1);
-            await click(filterButtonOk);
-            await pause(500);
-            await click(tableFilterableExample + buttonFilter);
-            await click(dialogFilters);
             await expect(await isElementClickable(filterResetButton)).withContext(true, 'reset button not clickable');
         });
     });

libs/docs/platform/table/examples/platform-table-settings-dialog-example.component.html

@@ -0,0 +1,75 @@
+<fdp-table #table [dataSource]="source" (filterChange)="logFilterChange($event)" emptyTableMessage="No data found">
+    <fdp-table-toolbar title="Order Line Items" [hideItemCount]="false"></fdp-table-toolbar>
+
+    <fdp-column name="name" key="name" label="Name" align="start" [groupable]="true" [sortable]="true"></fdp-column>
+
+    <fdp-column
+        name="description"
+        key="description"
+        label="Description"
+        [groupable]="true"
+        [sortable]="true"
+    ></fdp-column>
+
+    <fdp-column
+        name="price"
+        key="price.value"
+        label="Price"
+        align="end"
+        [groupable]="true"
+        [filterable]="true"
+        [sortable]="true"
+    ></fdp-column>
+
+    <fdp-column
+        name="status"
+        key="status"
+        label="Status"
+        align="center"
+        [groupable]="true"
+        [filterable]="true"
+        [sortable]="true"
+    ></fdp-column>
+
+    <fdp-column
+        name="statusColor"
+        key="statusColor"
+        label="Status Color"
+        align="center"
+        [groupable]="true"
+        [filterable]="true"
+        [sortable]="true"
+    ></fdp-column>
+</fdp-table>
+
+<!-- View Settings Dialog-->
+<fdp-table-view-settings-dialog [table]="table">
+    <fdp-table-view-settings-filter column="price" label="Price" [type]="filterTypeEnum.CUSTOM">
+        <ng-container *fdpViewSettingsFilterCustomDef="let model">
+            <fdp-form-group #fg1 columnLayout="XL1-L1-M1-S1" labelLayout="vertical">
+                <fdp-form-field label="Minimum Price">
+                    <fdp-input type="number" name="min" [(ngModel)]="model.min"></fdp-input>
+                </fdp-form-field>
+                <fdp-form-field label="Maximum Price">
+                    <fdp-input type="number" name="max" [(ngModel)]="model.max"></fdp-input>
+                </fdp-form-field>
+            </fdp-form-group>
+        </ng-container>
+    </fdp-table-view-settings-filter>
+
+    <fdp-table-view-settings-filter
+        column="status"
+        [type]="filterTypeEnum.MULTI"
+        label="Status"
+        [values]="statusFilteringValues"
+    >
+    </fdp-table-view-settings-filter>
+
+    <fdp-table-view-settings-filter
+        column="statusColor"
+        [type]="filterTypeEnum.SINGLE"
+        label="Status Color"
+        [values]="statusColorFilteringValues"
+    >
+    </fdp-table-view-settings-filter>
+</fdp-table-view-settings-dialog>