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',
@@ -37,7 +40,8 @@ const platformTableFilterableTsSrc = 'platform-table-filterable-example.componen
         SeparatorComponent,
         PlatformTableFilterableExampleComponent,
         PlatformTableGroupableExampleComponent,
-        FdDatetimeModule
+        FdDatetimeModule,
+        PlatformTableSettingsDialogExampleComponent
     ]
 })
 export class SettingsDialogDocsComponent {
@@ -90,6 +94,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/examples/advanced-scrolling/advanced-scrolling-example.component.html

@@ -22,8 +22,8 @@
         key="name"
         label="Name"
         align="start"
+        [groupable]="true"
         [sortable]="true"
-        [filterable]="true"
         [dataType]="dataTypeEnum.STRING"
     >
     </fdp-column>
@@ -35,8 +35,9 @@
         key="price.value"
         label="Price"
         align="end"
-        [sortable]="true"
+        [groupable]="true"
         [filterable]="true"
+        [sortable]="true"
         [dataType]="dataTypeEnum.NUMBER"
     >
     </fdp-column>
@@ -46,12 +47,54 @@
         key="status"
         label="Status"
         align="center"
+        [groupable]="true"
+        [filterable]="true"
         [sortable]="true"
+        [dataType]="dataTypeEnum.STRING"
+    >
+    </fdp-column>
+
+    <fdp-column
+        name="statusColor"
+        key="statusColor"
+        label="statusColor"
+        align="center"
+        [groupable]="true"
         [filterable]="true"
+        [sortable]="true"
         [dataType]="dataTypeEnum.STRING"
     >
     </fdp-column>
 </fdp-table>
 
-<!-- Connect P13 Dialog to the table -->
-<fdp-table-p13-dialog [table]="table"></fdp-table-p13-dialog>
+<!-- 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>

libs/docs/platform/table/examples/advanced-scrolling/advanced-scrolling-example.component.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { DatetimeAdapter, FdDate, FdDatetimeModule } from '@fundamental-ngx/core/datetime';
-import { PlatformTableModule } from '@fundamental-ngx/platform/table';
+import { FormFieldComponent, FormGroupComponent, InputComponent } from '@fundamental-ngx/platform';
+import { PlatformTableModule, TableFilterSelectOption } from '@fundamental-ngx/platform/table';
 import {
     ChildTableDataSource,
     CollectionBooleanFilter,
@@ -39,14 +41,30 @@ import { delay } from 'rxjs/operators';
         TableInitialStateDirective,
         TableDraggableDirective,
         TableVirtualScrollDirective,
-        FdDatetimeModule
+        FdDatetimeModule,
+        FormFieldComponent,
+        FormGroupComponent,
+        InputComponent,
+        FormsModule
     ]
 })
 export class AdvancedScrollingExampleComponent {
     source: TableDataSource<ExampleItem>;
     childSource: ChildTableDataSource<ExampleItem>;
     readonly filterTypeEnum = FilterType;
     readonly dataTypeEnum = FilterableColumnDataType;
+    statusFilteringValues: TableFilterSelectOption[] = [
+        { value: 'Stocked on demand', label: 'Stocked on demand' },
+        { value: 'Out of stock', label: 'Out of stock' },
+        { value: 'No info', label: 'No info' },
+        { value: 'Available', label: 'Available' }
+    ];
+
+    statusColorFilteringValues: TableFilterSelectOption[] = [
+        { value: 'informative', label: 'Informative' },
+        { value: 'negative', label: 'Negative' },
+        { value: 'positive', label: 'Positive' }
+    ];
 
     constructor() {
         this.source = new TableDataSource(new TableDataProviderExample());

libs/docs/platform/table/examples/platform-table-filterable-example.component.html

@@ -1,15 +1,21 @@
 <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-table-toolbar title="Order Line Items" [hideItemCount]="false"></fdp-table-toolbar>
 
-    <fdp-column name="name" key="name" label="Name" align="start" [filterable]="true"> </fdp-column>
+    <fdp-column name="name" key="name" label="Name" align="start"></fdp-column>
 
-    <fdp-column name="description" key="description" label="Description" [filterable]="true"> </fdp-column>
+    <fdp-column name="description" key="description" label="Description"></fdp-column>
 
-    <fdp-column name="price" key="price.value" label="Price" align="end"> </fdp-column>
+    <fdp-column name="price" key="price.value" label="Price" align="end" [filterable]="true"></fdp-column>
 
-    <fdp-column name="status" key="status" label="Status" align="center"></fdp-column>
+    <fdp-column name="status" key="status" label="Status" align="center" [filterable]="true"></fdp-column>
 
-    <fdp-column name="statusColor" key="statusColor" label="Status Color" align="center"> </fdp-column>
+    <fdp-column
+        name="statusColor"
+        key="statusColor"
+        label="Status Color"
+        align="center"
+        [filterable]="true"
+    ></fdp-column>
 </fdp-table>
 
 <!-- View Settings Dialog-->

libs/docs/platform/table/examples/platform-table-filterable-example.component.ts

@@ -49,14 +49,16 @@ import {
 export class PlatformTableFilterableExampleComponent {
     readonly filterTypeEnum = FilterType;
     statusFilteringValues: TableFilterSelectOption[] = [
+        { value: 'Stocked on demand', label: 'Stocked on demand' },
         { value: 'Out of stock', label: 'Out of stock' },
-        { value: 'Stocked on demand', label: 'Stocked on demand' }
+        { value: 'No info', label: 'No info' },
+        { value: 'Available', label: 'Available' }
     ];
 
     statusColorFilteringValues: TableFilterSelectOption[] = [
-        { value: 'positive', label: 'Positive' },
+        { value: 'informative', label: 'Informative' },
         { value: 'negative', label: 'Negative' },
-        { value: 'critical', label: 'Critical' }
+        { value: 'positive', label: 'Positive' }
     ];
 
     source: TableDataSource<ExampleItem>;

libs/docs/platform/table/examples/platform-table-groupable-example.component.html

@@ -6,15 +6,15 @@
     selectionMode="multiple"
     emptyTableMessage="No data found"
 >
-    <fdp-table-toolbar title="Order Items" [hideItemCount]="false"> </fdp-table-toolbar>
+    <fdp-table-toolbar title="Order Items" [hideItemCount]="false"></fdp-table-toolbar>
 
-    <fdp-column name="name" key="name" label="Name" align="start" [groupable]="true"> </fdp-column>
+    <fdp-column name="name" key="name" label="Name" align="start" [groupable]="true"></fdp-column>
 
-    <fdp-column name="description" key="description" label="Description"> </fdp-column>
+    <fdp-column name="description" key="description" label="Description" [groupable]="true"></fdp-column>
 
-    <fdp-column name="price" key="price.value" label="Price" align="end"> </fdp-column>
+    <fdp-column name="price" key="price.value" label="Price" align="end" [groupable]="true"></fdp-column>
 
-    <fdp-column name="status" key="status" label="Status" align="center" [groupable]="true"> </fdp-column>
+    <fdp-column name="status" key="status" label="Status" align="center" [groupable]="true"></fdp-column>
 
     <fdp-column name="rowIndex" key="rowIndex" label="Row index">
         <fdp-table-cell *fdpCellDef="let item; let i = rowIndex">

libs/docs/platform/table/examples/platform-table-initial-state-example.component.html

@@ -1,37 +1,45 @@
 <fdp-table
     #table
     [dataSource]="source"
-    [initialVisibleColumns]="['updatedOn', 'name', 'price', 'status']"
+    [initialVisibleColumns]="['updatedOn', 'name', 'price', 'status', 'statusColor']"
     [initialSortBy]="[{ field: 'price.value', direction: sortDirectionEnum.ASC }]"
     [initialFilterBy]="initialFilterBy"
     [initialGroupBy]="[{ field: 'verified', direction: sortDirectionEnum.NONE, showAsColumn: true }]"
 >
     <fdp-table-toolbar title="Order Items"></fdp-table-toolbar>
 
-    <fdp-column name="name" key="name" label="Name" [sortable]="true" [groupable]="true" [filterable]="true">
+    <fdp-column name="name" key="name" label="Name" [sortable]="true" [groupable]="true"> </fdp-column>
+
+    <fdp-column name="description" key="description" label="Description"> </fdp-column>
+
+    <fdp-column name="price" key="price.value" label="Price" [sortable]="true" [groupable]="true" [filterable]="true">
     </fdp-column>
 
+    <fdp-column name="verified" key="verified" label="Verified"></fdp-column>
+
     <fdp-column
-        name="description"
-        key="description"
-        label="Description"
+        name="status"
+        key="status"
+        label="Status"
+        align="center"
         [sortable]="true"
         [groupable]="true"
         [filterable]="true"
-    >
-    </fdp-column>
+    ></fdp-column>
 
-    <fdp-column name="price" key="price.value" label="Price" [sortable]="true" [groupable]="true" [filterable]="true">
-    </fdp-column>
-
-    <fdp-column name="verified" key="verified" label="Verified" [groupable]="true"> </fdp-column>
-
-    <fdp-column name="status" key="status" label="Status" [sortable]="true" [groupable]="true" [filterable]="true">
-    </fdp-column>
+    <fdp-column
+        name="statusColor"
+        key="statusColor"
+        label="Status Color"
+        align="center"
+        [sortable]="true"
+        [groupable]="true"
+        [filterable]="true"
+    ></fdp-column>
 </fdp-table>
 
 <!-- View Settings Dialog-->
-<fdp-table-view-settings-dialog [table]="table" [allowDisablingSorting]="false">
+<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">

libs/docs/platform/table/examples/platform-table-p13-filter-example.component.html

@@ -1,24 +1,34 @@
 <fdp-table #table [dataSource]="source">
     <fdp-table-toolbar title="Order Items"></fdp-table-toolbar>
 
-    <fdp-column name="name" key="name" label="Name" [filterable]="true" [dataType]="dataTypeEnum.STRING"> </fdp-column>
+    <fdp-column name="name" key="name" label="Name" [dataType]="dataTypeEnum.STRING"> </fdp-column>
 
     <fdp-column name="description" key="description" label="Description"> </fdp-column>
 
     <fdp-column name="price" key="price.value" label="Price" [filterable]="true" [dataType]="dataTypeEnum.NUMBER">
     </fdp-column>
 
-    <fdp-column name="updatedOn" key="date" label="Updated On" [filterable]="true" [dataType]="dataTypeEnum.DATE">
+    <fdp-column name="updatedOn" key="date" label="Updated On" [dataType]="dataTypeEnum.DATE">
         <fdp-table-cell *fdpCellDef="let item">
             {{ item.date?.toDateString() }}
         </fdp-table-cell>
     </fdp-column>
 
-    <fdp-column name="verified" key="verified" label="Verified" [filterable]="true" [dataType]="dataTypeEnum.BOOLEAN">
-    </fdp-column>
+    <fdp-column name="verified" key="verified" label="Verified" [dataType]="dataTypeEnum.BOOLEAN"> </fdp-column>
 </fdp-table>
 
-<!-- Connect P13 Dialog to the table -->
-<fdp-table-p13-dialog [table]="table">
-    <fdp-table-p13-filter [validator]="validator"></fdp-table-p13-filter>
-</fdp-table-p13-dialog>
+<!-- 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-dialog>