Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a5a6abc
refactor(platform): Refactor to leverage signals and combine sorting,…
dpavlenishvili Oct 2, 2024
883a1b2
refactor(platform, docs): generate tests, add combined settings example
dpavlenishvili Oct 3, 2024
830debb
fix(platform): add cursor pointer style to filter list items
dpavlenishvili Oct 3, 2024
51d98d3
fix(platform): remove cursor pointer style temp fix to filter list it…
dpavlenishvili Oct 9, 2024
2b18f76
Merge branch 'main' into 12441-table-settings-dialog-revisit
dpavlenishvili Oct 9, 2024
f08631d
fix(platform): merge conflict missing parts
dpavlenishvili Oct 9, 2024
5cf2261
Merge branch 'main' into 12441-table-settings-dialog-revisit
dpavlenishvili Oct 14, 2024
40b4983
fix(docs): sync settings dialog and table data in platform table exam…
dpavlenishvili Oct 14, 2024
aae72fa
fix(platform): remove settings dialog scss file and set height style …
dpavlenishvili Oct 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions libs/docs/platform/table/child-docs/settings-dialog/settings-dialog-docs.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
22 changes: 21 additions & 1 deletion libs/docs/platform/table/child-docs/settings-dialog/settings-dialog-docs.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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',
Expand All @@ -37,7 +40,8 @@ const platformTableFilterableTsSrc = 'platform-table-filterable-example.componen
SeparatorComponent,
PlatformTableFilterableExampleComponent,
PlatformTableGroupableExampleComponent,
FdDatetimeModule
FdDatetimeModule,
PlatformTableSettingsDialogExampleComponent
]
})
export class SettingsDialogDocsComponent {
Expand Down Expand Up @@ -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);
}
Expand Down
68 changes: 68 additions & 0 deletions libs/docs/platform/table/examples/platform-table-settings-dialog-example.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<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"
[filterable]="true"
[sortable]="true"
></fdp-column>

<fdp-column
name="description"
key="description"
label="Description"
[groupable]="true"
[filterable]="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"></fdp-column>

<fdp-column name="statusColor" key="statusColor" label="Status Color" align="center"> </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>
Loading
Loading