diff --git a/packages/fiori/cypress/specs/ViewSettingsDialog.cy.tsx b/packages/fiori/cypress/specs/ViewSettingsDialog.cy.tsx index 1cea9f293e9e..d40d095d6b3b 100644 --- a/packages/fiori/cypress/specs/ViewSettingsDialog.cy.tsx +++ b/packages/fiori/cypress/specs/ViewSettingsDialog.cy.tsx @@ -1,10 +1,11 @@ import ViewSettingsDialog from "../../src/ViewSettingsDialog.js"; +import GroupItem from "../../src/GroupItem.js"; import SortItem from "../../src/SortItem.js"; import FilterItem from "../../src/FilterItem.js"; import FilterItemOption from "../../src/FilterItemOption.js"; -describe("View settings dialog - selection", () => { - it("tests clicking on sort items (both on the text and radio button)", () => { +describe("View settings dialog - confirm event", () => { + it("should throw confirm event after selecting sort options and confirm button", () => { cy.mount( @@ -86,7 +87,7 @@ describe("View settings dialog - selection", () => { .should("equal", "Name"); }); - it("tests clicking on filter items, and filter item options (both on the text and checkbox)", () => { + it("should throw confirm event after selecting filter options and confirm button", () => { cy.mount( @@ -167,6 +168,61 @@ describe("View settings dialog - selection", () => { .find("[ui5-dialog]") .should("not.be.visible"); }); + + it("should throw confirm event after selecting group options and confirm button", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-view-settings-dialog]") + .as("vsd") + .invoke("prop", "open", true); + + cy.get("@vsd") + .shadow() + .find("[group-order] ui5-li") + .as("groupOrderItems"); + + cy.get("@groupOrderItems") + .should("have.length", 2); + + // Select the group order (Descending) + cy.get("@groupOrderItems") + .eq(1) + .realClick(); + + cy.get("@vsd") + .shadow() + .find("[group-by] ui5-li") + .as("groupByItems"); + + cy.get("@groupByItems") + .should("have.length", 3); + + // Select the group by (No Group) + cy.get("@groupByItems") + .eq(2) + .realClick(); + + // Confirm the selection + cy.get("@vsd") + .shadow() + .find(".ui5-vsd-footer ui5-button") + .realClick(); + + // Check the confirm event for groupOrder and groupBy + cy.get("@confirm") + .should("be.calledWithMatch", { + detail: { + groupOrder: "Descending", + groupBy: "(No Group)", + }, + }); + }); }); describe("ViewSettingsDialog Tests", () => { @@ -371,6 +427,31 @@ describe("ViewSettingsDialog Tests", () => { .invoke("prop", "open", false); }); + it("should handle group-only mode", () => { + cy.mount( + + + + + + + ); + + cy.get("#vsdGroup") + .as("vsd"); + + cy.get("@vsd") + .invoke("prop", "open", true); + + cy.get("@vsd") + .shadow() + .find("[ui5-segmented-button]") + .should("not.exist"); + + cy.get("@vsd") + .invoke("prop", "open", false); + }); + it("should focus first item in filter options", () => { cy.mount( @@ -407,4 +488,37 @@ describe("ViewSettingsDialog Tests", () => { .first() .should("be.focused"); }); + + it("should show a split button with all loaded VSD options", () => { + cy.mount( + + + + + + + + + + ); + + cy.get("[ui5-view-settings-dialog]") + .as("vsd") + .invoke("prop", "open", true); + + cy.get("@vsd") + .shadow() + .find("[ui5-segmented-button]") + .as("segmentedButton"); + + cy.get("@segmentedButton") + .should("be.visible"); + + cy.get("@segmentedButton") + .find("[ui5-segmented-button-item]") + .as("items"); + + cy.get("@items") + .should("have.length", 3); + }); }); diff --git a/packages/fiori/src/FilterItem.ts b/packages/fiori/src/FilterItem.ts index 70a40036ec68..dcf4233e150c 100644 --- a/packages/fiori/src/FilterItem.ts +++ b/packages/fiori/src/FilterItem.ts @@ -9,12 +9,16 @@ import type FilterItemOption from "./FilterItemOption.js"; * * ### Overview * + * The `ui5-filter-item` component defines the filtering criteria for data in `ui5-view-settings-dialog`. + * It represents a single filter category that contains multiple filter options that users can select. + * * ### Usage * - * For the `ui5-filter-item` + * The `ui5-filter-item` is used within the `ui5-view-settings-dialog` to provide filtering options. + * * ### ES6 Module Import * - * `import @ui5/webcomponents-fiori/dist/FilterItem.js";` + * `import "@ui5/webcomponents-fiori/dist/FilterItem.js";` * @constructor * @extends UI5Element * @abstract @@ -24,7 +28,7 @@ import type FilterItemOption from "./FilterItemOption.js"; @customElement("ui5-filter-item") class FilterItem extends UI5Element { /** - * Defines the text of the component. + * Defines the text of the filter item. * @default undefined * @public */ @@ -32,7 +36,8 @@ class FilterItem extends UI5Element { text?: string; /** - * Defines the additional text of the component. + * Defines the additional text of the filter item. + * This text is typically used to show the number of selected filter options within this category. * @default undefined * @public */ @@ -40,7 +45,7 @@ class FilterItem extends UI5Element { additionalText?: string; /** - * Defines the `values` list. + * Defines the filter options available for this filter category. * @public */ @slot() diff --git a/packages/fiori/src/FilterItemOption.ts b/packages/fiori/src/FilterItemOption.ts index 11775afbb0e0..67d516c9f2d4 100644 --- a/packages/fiori/src/FilterItemOption.ts +++ b/packages/fiori/src/FilterItemOption.ts @@ -7,12 +7,17 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement * * ### Overview * + * The `ui5-filter-item-option` component defines individual filter values within a `ui5-filter-item`. + * It represents a single selectable option that users can choose to filter data. + * * ### Usage * - * For the `ui5-filter-item-option` + * The `ui5-filter-item-option` is used as a child component within `ui5-filter-item` in the context + * of `ui5-view-settings-dialog`. Each option represents a specific value that can be used for filtering + * * ### ES6 Module Import * - * `import @ui5/webcomponents-fiori/dist/FilterItemOption.js";` + * `import "@ui5/webcomponents-fiori/dist/FilterItemOption.js";` * @constructor * @extends UI5Element * @abstract @@ -22,7 +27,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement @customElement("ui5-filter-item-option") class FilterItemOption extends UI5Element { /** - * Defines the text of the component. + * Defines the text of the filter option. * @default undefined * @public */ @@ -30,7 +35,7 @@ class FilterItemOption extends UI5Element { text?: string; /** - * Defines if the component is selected. + * Defines if the filter option is selected. * @default false * @public */ diff --git a/packages/fiori/src/GroupItem.ts b/packages/fiori/src/GroupItem.ts new file mode 100644 index 000000000000..c1de8f43dd80 --- /dev/null +++ b/packages/fiori/src/GroupItem.ts @@ -0,0 +1,48 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; + +/** + * @class + * + * ### Overview + * + * The `ui5-group-item` component defines the grouping criteria for data in `ui5-view-settings-dialog`. + * It represents a single group option that users can select to organize data into logical groups. + * + * ### Usage + * + * The `ui5-group-item` is used within the `ui5-view-settings-dialog` to provide grouping options. + * Each group item represents a column or field by which data can be grouped. + * + * ### ES6 Module Import + * + * `import "@ui5/webcomponents-fiori/dist/GroupItem.js";` + * @constructor + * @extends UI5Element + * @abstract + * @since 2.13.0 + * @public + */ +@customElement("ui5-group-item") +class GroupItem extends UI5Element { + /** + * Defines the text of the group item. + * @default undefined + * @public + */ + @property() + text?: string; + + /** + * Defines if the group item is selected. + * @default false + * @public + */ + @property({ type: Boolean }) + selected = false; +} + +GroupItem.define(); + +export default GroupItem; diff --git a/packages/fiori/src/SortItem.ts b/packages/fiori/src/SortItem.ts index 4c36541b6569..d9d04f676801 100644 --- a/packages/fiori/src/SortItem.ts +++ b/packages/fiori/src/SortItem.ts @@ -7,12 +7,17 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement * * ### Overview * + * The `ui5-sort-item` component defines the sorting criteria for data in `ui5-view-settings-dialog`. + * It represents a single sort option that users can select to organize data in ascending or descending order. + * * ### Usage * - * For the `ui5-sort-item` + * The `ui5-sort-item` is used within the `ui5-view-settings-dialog` to provide sorting options. + * Each sort item represents a column or field by which data can be sorted. + * * ### ES6 Module Import * - * `import @ui5/webcomponents-fiori/dist/SortItem.js";` + * `import "@ui5/webcomponents-fiori/dist/SortItem.js";` * @constructor * @extends UI5Element * @abstract @@ -22,7 +27,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement @customElement("ui5-sort-item") class SortItem extends UI5Element { /** - * Defines the text of the component. + * Defines the text of the sort item. * @default undefined * @public */ @@ -30,7 +35,7 @@ class SortItem extends UI5Element { text?: string; /** - * Defines if the component is selected. + * Defines if the sort item is selected. * @default false * @public */ diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts index baf9526d27e7..60ef67d59747 100644 --- a/packages/fiori/src/ViewSettingsDialog.ts +++ b/packages/fiori/src/ViewSettingsDialog.ts @@ -19,9 +19,11 @@ import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; import ViewSettingsDialogMode from "./types/ViewSettingsDialogMode.js"; import "@ui5/webcomponents-icons/dist/sort.js"; import "@ui5/webcomponents-icons/dist/filter.js"; +import "@ui5/webcomponents-icons/dist/group-2.js"; import "@ui5/webcomponents-icons/dist/nav-back.js"; import type SortItem from "./SortItem.js"; import type FilterItem from "./FilterItem.js"; +import type GroupItem from "./GroupItem.js"; import { VSD_DIALOG_TITLE_SORT, @@ -30,11 +32,14 @@ import { VSD_RESET_BUTTON, VSD_SORT_ORDER, VSD_SORT_BY, + VSD_GROUP_ORDER, + VSD_GROUP_BY, VSD_ORDER_ASCENDING, VSD_ORDER_DESCENDING, VSD_FILTER_BY, VSD_SORT_TOOLTIP, VSD_FILTER_TOOLTIP, + VSD_GROUP_TOOLTIP, VSD_RESET_BUTTON_ACTION, VSD_FILTER_ITEM_LABEL_TEXT, } from "./generated/i18n/i18n-defaults.js"; @@ -53,17 +58,23 @@ type VSDSettings = { sortOrder: string, sortBy: string, filters: VSDFilters, + groupOrder: string, + groupBy: string, } // Events' detail type ViewSettingsDialogConfirmEventDetail = VSDSettings & { sortByItem: SortItem, sortDescending: boolean, + groupByItem: GroupItem, + groupDescending: boolean, } type ViewSettingsDialogCancelEventDetail = VSDSettings & { sortByItem: SortItem, sortDescending: boolean, + groupByItem: GroupItem, + groupDescending: boolean, } // Common properties for several VSDInternalSettings fields @@ -74,6 +85,8 @@ type VSDInternalSettings = { sortOrder: Array, sortBy: Array, filters: Array}>, + groupOrder: Array, + groupBy: Array, } /** @@ -116,6 +129,10 @@ type VSDInternalSettings = { * @param {String} sortBy The currently selected `ui5-sort-item` text attribute. * @param {HTMLElement} sortByItem The currently selected `ui5-sort-item`. * @param {Boolean} sortDescending The selected sort order (true = descending, false = ascending). + * @param {String} groupOrder The current group order selected. + * @param {String} groupBy The currently selected `ui5-group-item` text attribute. + * @param {HTMLElement} groupByItem The currently selected `ui5-group-item`. + * @param {Boolean} groupDescending The selected group order (true = descending, false = ascending). * @param {Array} filters The selected filters items. * @public */ @@ -129,6 +146,10 @@ type VSDInternalSettings = { * @param {String} sortBy The currently selected `ui5-sort-item` text attribute. * @param {HTMLElement} sortByItem The currently selected `ui5-sort-item`. * @param {Boolean} sortDescending The selected sort order (true = descending, false = ascending). + * @param {String} groupOrder The current group order selected. + * @param {String} groupBy The currently selected `ui5-group-item` text attribute. + * @param {HTMLElement} groupByItem The currently selected `ui5-group-item`. + * @param {Boolean} groupDescending The selected group order (true = descending, false = ascending). * @param {Array} filters The selected filters items. * @public */ @@ -175,6 +196,15 @@ class ViewSettingsDialog extends UI5Element { @property({ type: Boolean }) sortDescending = false; + /** + * Defines the initial group order. + * @default false + * @since 2.13.0 + * @public + */ + @property({ type: Boolean }) + groupDescending = false; + /** * Indicates if the dialog is open. * @public @@ -200,6 +230,8 @@ class ViewSettingsDialog extends UI5Element { sortOrder: [], sortBy: [], filters: [], + groupOrder: [], + groupBy: [], }; /** @@ -239,7 +271,7 @@ class ViewSettingsDialog extends UI5Element { * @public */ @slot() - sortItems!: Array + sortItems!: Array; /** * Defines the `filterItems` list. @@ -250,13 +282,33 @@ class ViewSettingsDialog extends UI5Element { @slot() filterItems!: Array; + /** + * Defines the list of items against which the user could group data. + * + * **Note:** If you want to use this slot, you need to import used item: `import "@ui5/webcomponents-fiori/dist/GroupItem.js";` + * @public + */ + @slot() + groupItems!: Array; + @query("[ui5-list]") _list!: List; + @query("[ui5-dialog]") _dialog?: Dialog; + + @query("[ui5-list][sort-order]") _sortOrder?: List; + + @query("[ui5-list][sort-by]") _sortBy?: List; + @query("[ui5-list][group-order]") + _groupOrder?: List; + + @query("[ui5-list][group-by]") + _groupBy?: List; + @i18n("@ui5/webcomponents-fiori") static i18nBundle: I18nBundle; @@ -265,8 +317,17 @@ class ViewSettingsDialog extends UI5Element { this._setAdditionalTexts(); } - if (!this.shouldBuildSort && this.shouldBuildFilter) { + if (this.shouldBuildSort) { + return; + } + + if (this.shouldBuildFilter) { this._currentMode = ViewSettingsDialogMode.Filter; + return; + } + + if (this.shouldBuildGroup) { + this._currentMode = ViewSettingsDialogMode.Group; } } @@ -320,8 +381,13 @@ class ViewSettingsDialog extends UI5Element { return !!this.filterItems.length; } + get shouldBuildGroup() { + return !!this.groupItems.length; + } + get hasPagination() { - return this.shouldBuildSort && this.shouldBuildFilter; + const buildConditions = [this.shouldBuildSort, this.shouldBuildFilter, this.shouldBuildGroup]; + return buildConditions.filter(condition => condition).length > 1; } get _filterByTitle() { @@ -357,6 +423,10 @@ class ViewSettingsDialog extends UI5Element { return ViewSettingsDialog.i18nBundle.getText(VSD_SORT_ORDER); } + get _groupOrderLabel() { + return ViewSettingsDialog.i18nBundle.getText(VSD_GROUP_ORDER); + } + get _filterByLabel() { return ViewSettingsDialog.i18nBundle.getText(VSD_FILTER_BY); } @@ -365,6 +435,10 @@ class ViewSettingsDialog extends UI5Element { return ViewSettingsDialog.i18nBundle.getText(VSD_SORT_BY); } + get _groupByLabel() { + return ViewSettingsDialog.i18nBundle.getText(VSD_GROUP_BY); + } + get _sortButtonTooltip() { return ViewSettingsDialog.i18nBundle.getText(VSD_SORT_TOOLTIP); } @@ -373,6 +447,10 @@ class ViewSettingsDialog extends UI5Element { return ViewSettingsDialog.i18nBundle.getText(VSD_FILTER_TOOLTIP); } + get _groupButtonTooltip() { + return ViewSettingsDialog.i18nBundle.getText(VSD_GROUP_TOOLTIP); + } + get _resetButtonAction() { return ViewSettingsDialog.i18nBundle.getText(VSD_RESET_BUTTON_ACTION); } @@ -395,14 +473,14 @@ class ViewSettingsDialog extends UI5Element { * Determines disabled state of the `Reset` button. */ get _disableResetButton() { - return this._dialog && this._sortSetttingsAreInitial && this._filteresAreInitial; + return this._dialog && this._settingsAreInitial && this._filteresAreInitial; } - get _sortSetttingsAreInitial() { + get _settingsAreInitial() { let settingsAreInitial = true; - ["sortBy", "sortOrder"].forEach(sortList => { - this._currentSettings[sortList as keyof VSDInternalSettings].forEach((item, index) => { - if (item.selected !== this._initialSettings[sortList as keyof VSDInternalSettings][index].selected) { + ["sortBy", "sortOrder", "groupBy", "groupOrder"].forEach(settingsList => { + this._currentSettings[settingsList as keyof VSDInternalSettings].forEach((item, index) => { + if (item.selected !== this._initialSettings[settingsList as keyof VSDInternalSettings][index].selected) { settingsAreInitial = false; } }); @@ -431,6 +509,8 @@ class ViewSettingsDialog extends UI5Element { return { sortOrder: JSON.parse(JSON.stringify(this.initSortOrderItems)), sortBy: JSON.parse(JSON.stringify(this.initSortByItems)), + groupOrder: JSON.parse(JSON.stringify(this.initGroupOrderItems)), + groupBy: JSON.parse(JSON.stringify(this.initGroupByItems)), filters: this.filterItems.map(item => { return { text: item.text || "", @@ -456,6 +536,16 @@ class ViewSettingsDialog extends UI5Element { }); } + get initGroupByItems() { + return this.groupItems.map((item, index) => { + return { + text: item.text, + selected: item.selected, + index, + }; + }); + } + get initSortOrderItems() { return [ { @@ -469,6 +559,19 @@ class ViewSettingsDialog extends UI5Element { ]; } + get initGroupOrderItems() { + return [ + { + text: this._ascendingLabel, + selected: !this.groupDescending, + }, + { + text: this._descendingLabel, + selected: this.groupDescending, + }, + ]; + } + get expandContent() { return this._filterStepTwo || !this.hasPagination; } @@ -481,36 +584,23 @@ class ViewSettingsDialog extends UI5Element { return this._currentMode === ViewSettingsDialogMode.Filter; } - get showBackButton() { - return this.isModeFilter && this._filterStepTwo; + get isModeGroup() { + return this._currentMode === ViewSettingsDialogMode.Group; } - get _sortOrderListDomRef() { - return this.shadowRoot!.querySelector("[ui5-list][sort-order]")!; - } - - get _sortByList() { - return this.shadowRoot!.querySelector("[ui5-list][sort-by]")!; - } - - get _dialogDomRef() { - return this.shadowRoot!.querySelector("[ui5-dialog]")!; + get showBackButton() { + return this.isModeFilter && this._filterStepTwo; } /** * Shows the dialog. */ beforeDialogOpen(): void { - if (!this._dialog) { - this._sortOrder = this._sortOrderListDomRef; - this._sortBy = this._sortByList; - - // Sorting + // first time opening - initialize settings + if (this._currentSettings.sortOrder.length === 0) { this._initialSettings = this._settings; this._currentSettings = this._settings; this._confirmedSettings = this._settings; - - this._dialog = this._dialogDomRef; } else { this._restoreSettings(this._confirmedSettings); } @@ -618,17 +708,28 @@ class ViewSettingsDialog extends UI5Element { get eventsParams() { const _currentSortOrderSelected = this._currentSettings.sortOrder.filter(item => item.selected)[0], _currentSortBySelected = this._currentSettings.sortBy.filter(item => item.selected)[0], + _currentGroupOrderSelected = this._currentSettings.groupOrder.filter(item => item.selected)[0], + _currentGroupBySelected = this._currentSettings.groupBy.filter(item => item.selected)[0], sortOrder = _currentSortOrderSelected && (_currentSortOrderSelected.text || ""), sortDescending = !this._currentSettings.sortOrder[0].selected, sortBy = _currentSortBySelected && (_currentSortBySelected.text || ""), sortByElementIndex = _currentSortBySelected && _currentSortBySelected.index, sortByItem = this.sortItems[sortByElementIndex], + groupOrder = _currentGroupOrderSelected && (_currentGroupOrderSelected.text || ""), + groupDescending = !this._currentSettings.groupOrder[0].selected, + groupBy = _currentGroupBySelected && (_currentGroupBySelected.text || ""), + groupByElementIndex = _currentGroupBySelected && _currentGroupBySelected.index, + groupByItem = this.groupItems[groupByElementIndex], selectedFilterItems = this.filterItems.filter(filterItem => filterItem.values.some(item => item.selected)); return { sortOrder, sortDescending, sortBy, sortByItem, + groupOrder, + groupDescending, + groupBy, + groupByItem, filters: this.selectedFilters, filterItems: selectedFilterItems, }; @@ -715,6 +816,35 @@ class ViewSettingsDialog extends UI5Element { this._currentSettings = JSON.parse(JSON.stringify(this._currentSettings)); } + /** + * Stores `Group Order` list as recently used control and its selected item in current state. + */ + _onGroupOrderChange(e: CustomEvent) { + this._recentlyFocused = this._groupOrder!; + this._currentSettings.groupOrder = this.initGroupOrderItems.map(item => { + item.selected = item.text === e.detail.targetItem.innerText; + return item; + }); + + // Invalidate + this._currentSettings = JSON.parse(JSON.stringify(this._currentSettings)); + } + + /** + * Stores `Group By` list as recently used control and its selected item in current state. + */ + _onGroupByChange(e: CustomEvent) { + const selectedItemIndex = Number(e.detail.targetItem.getAttribute("data-ui5-external-action-item-index")); + this._recentlyFocused = this._groupBy!; + this._currentSettings.groupBy = this.initGroupByItems.map((item, index) => { + item.selected = index === selectedItemIndex; + return item; + }); + + // Invalidate + this._currentSettings = JSON.parse(JSON.stringify(this._currentSettings)); + } + /** * Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`. * This method can be used after the dialog is initially open, as the dialog needs @@ -748,6 +878,26 @@ class ViewSettingsDialog extends UI5Element { } } + if (settings.groupOrder) { + for (let i = 0; i < tempSettings.groupOrder.length; i++) { + if (tempSettings.groupOrder[i].text === settings.groupOrder) { + tempSettings.groupOrder[i].selected = true; + } else { + tempSettings.groupOrder[i].selected = false; + } + } + } + + if (settings.groupBy) { + for (let i = 0; i < tempSettings.groupBy.length; i++) { + if (tempSettings.groupBy[i].text === settings.groupBy) { + tempSettings.groupBy[i].selected = true; + } else { + tempSettings.groupBy[i].selected = false; + } + } + } + if (settings.filters) { const inputFilters: VSDFilter = {}; for (let i = 0; i < settings.filters.length; i++) { diff --git a/packages/fiori/src/ViewSettingsDialogTemplate.tsx b/packages/fiori/src/ViewSettingsDialogTemplate.tsx index 31534bc6a7b1..cfad8e34f6b7 100644 --- a/packages/fiori/src/ViewSettingsDialogTemplate.tsx +++ b/packages/fiori/src/ViewSettingsDialogTemplate.tsx @@ -9,6 +9,7 @@ import ListItemStandard from "@ui5/webcomponents/dist/ListItemStandard.js"; import navBackIcon from "@ui5/webcomponents-icons/dist/nav-back.js"; import sortIcon from "@ui5/webcomponents-icons/dist/sort.js"; import filterIcon from "@ui5/webcomponents-icons/dist/filter.js"; +import groupIcon from "@ui5/webcomponents-icons/dist/group-2.js"; import type ViewSettingsDialog from "./ViewSettingsDialog.js"; @@ -46,18 +47,7 @@ function ViewSettingsDialogTemplateHeader(this: ViewSettingsDialog) { - - + {_getSplitButtonItems.call(this)} @@ -66,6 +56,45 @@ function ViewSettingsDialogTemplateHeader(this: ViewSettingsDialog) { ); } +function _getSplitButtonItems(this: ViewSettingsDialog) { + const buttonItems = []; + + if (this.shouldBuildSort) { + buttonItems.push( + + ); + } + + if (this.shouldBuildFilter) { + buttonItems.push( + + ); + } + + if (this.shouldBuildGroup) { + buttonItems.push( + + ); + } + + return buttonItems; +} + function ViewSettingsDialogTemplateContent(this: ViewSettingsDialog) { return (
{this.shouldBuildSort && this.isModeSort && ( -
- - - {this._currentSettings.sortOrder.map(item => ( - {item.text} - ))} - - - - - {this._currentSettings.sortBy.map((item, index) => ( - {item.text} - ))} - - -
+ ViewSettingsDialogSortAndGroupTemplate.call(this, true) + )} + + {this.shouldBuildFilter && this.isModeFilter && ( + ViewSettingsDialogFilterTemplate.call(this) )} - {this.shouldBuildFilter && this.isModeFilter && (<> - {this._filterStepTwo ? ( - - {this._currentSettings.filters.filter(item => item.selected).map(item => (<> - {item.filterOptions.map(option => ( - {option.text} - ))} - ))} - - ) : ( // else - - - {this.filterItems.map(item => ( - {item.text} - ))} - - - )} - )} + + {this.shouldBuildGroup && this.isModeGroup && ( + ViewSettingsDialogSortAndGroupTemplate.call(this, false) + )} +
); } +function ViewSettingsDialogSortAndGroupTemplate(this: ViewSettingsDialog, isSortTemplate: boolean) { + const currentSettingsOrder = isSortTemplate ? this._currentSettings.sortOrder : this._currentSettings.groupOrder; + const currentSettingsBy = isSortTemplate ? this._currentSettings.sortBy : this._currentSettings.groupBy; + + return ( +
+ + + {currentSettingsOrder.map(item => ( + {item.text} + ))} + + + + + {currentSettingsBy.map((item, index) => ( + {item.text} + ))} + + +
+ ); +} + +function ViewSettingsDialogFilterTemplate(this: ViewSettingsDialog) { + return ( + <> + {this._filterStepTwo ? ( + + {this._currentSettings.filters.filter(item => item.selected).map(item => (<> + {item.filterOptions.map(option => ( + {option.text} + ))} + ))} + + ) : ( // else + + + {this.filterItems.map(item => ( + {item.text} + ))} + + + )} + + ); +} + function ViewSettingsDialogTemplateFooter(this: ViewSettingsDialog) { return (
diff --git a/packages/fiori/src/bundle.esm.ts b/packages/fiori/src/bundle.esm.ts index 7ab45ff077e3..65cdeab34fa2 100644 --- a/packages/fiori/src/bundle.esm.ts +++ b/packages/fiori/src/bundle.esm.ts @@ -18,6 +18,7 @@ import DynamicSideContent from "./DynamicSideContent.js"; import FilterItem from "./FilterItem.js"; import FilterItemOption from "./FilterItemOption.js"; import FlexibleColumnLayout from "./FlexibleColumnLayout.js"; +import GroupItem from "./GroupItem.js"; import IllustratedMessage from "./IllustratedMessage.js"; import MediaGallery from "./MediaGallery.js"; import MediaGalleryItem from "./MediaGalleryItem.js"; diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties index 3f993af88cc2..42ece845b079 100644 --- a/packages/fiori/src/i18n/messagebundle.properties +++ b/packages/fiori/src/i18n/messagebundle.properties @@ -254,15 +254,24 @@ VSD_SORT_TOOLTIP=Sort #XTOL View Settings Dialog Filter button tooltop text VSD_FILTER_TOOLTIP=Filter +#XTOL View Settings Dialog Group button tooltop text +VSD_GROUP_TOOLTIP=Group + #XBLI: View Settings Dialog Sort Order group header text VSD_SORT_ORDER=Sort Order -#XBLI: View Settings Dialog Sort Order group header text +#XBLI: View Settings Dialog Group Order group header text +VSD_GROUP_ORDER=Group Order + +#XBLI: View Settings Dialog Filter by group header text VSD_FILTER_BY=Filter By #XBLI: View Settings Dialog Sort By group header text VSD_SORT_BY=Sort By +#XBLI: View Settings Dialog Group By group header text +VSD_GROUP_BY=Group By + #XBLI: View Settings Dialog sort order list Ascending text VSD_ORDER_ASCENDING=Ascending diff --git a/packages/fiori/src/types/ViewSettingsDialogMode.ts b/packages/fiori/src/types/ViewSettingsDialogMode.ts index c4e3a7552992..5631bc97a6d9 100644 --- a/packages/fiori/src/types/ViewSettingsDialogMode.ts +++ b/packages/fiori/src/types/ViewSettingsDialogMode.ts @@ -1,5 +1,5 @@ /** - * Different types of Bar. + * Different types of ViewSettings. * @public */ enum ViewSettingsDialogMode { @@ -16,6 +16,13 @@ enum ViewSettingsDialogMode { * @public */ Filter = "Filter", + + /** + * Group type + * @since 2.13.0 + * @public + */ + Group = "Group", } export default ViewSettingsDialogMode; diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html index 54a3c9aded0c..951b383bc745 100644 --- a/packages/fiori/test/pages/ViewSettingsDialog.html +++ b/packages/fiori/test/pages/ViewSettingsDialog.html @@ -19,6 +19,15 @@ + Show VSD with group option + + + + + + + +

ViewSettingsDialog

Show ViewSettingsDialog Show Sort Only ViewSettingsDialog @@ -114,6 +123,23 @@

ViewSettingsDialog with dataset properties