feat(ui5-filter-item, ui5-sort-item,..): add filterItems to ui5-confirm event details

packages/fiori/src/ViewSettingsDialog.ts

@@ -561,9 +561,26 @@ class ViewSettingsDialog extends UI5Element {
 			return filter;
 		});
 
+		this._setSelectedProp(e);
+
 		this._currentSettings = JSON.parse(JSON.stringify(this._currentSettings));
 	}
 
+	/**
+	 * Sets the selected property of the clicked item.
+	 * @param e
+	 * @private
+	 */
+	_setSelectedProp(e: CustomEvent<ListItemClickEventDetail>) {
+		this.filterItems.forEach(filterItem => {
+			filterItem.values.forEach(option => {
+				if (option.text === e.detail.item.innerText) {
+					option.selected = !option.selected;
+				}
+			});
+		});
+	}
+
 	_navigateToFilters() {
 		this._filterStepTwo = false;
 	}
@@ -624,6 +641,7 @@ class ViewSettingsDialog extends UI5Element {
 			sortBy,
 			sortByItem,
 			filters: this.selectedFilters,
+			filterItems: this.filterItems,
 		};
 	}
 

packages/fiori/test/pages/ViewSettingsDialog.html

@@ -93,14 +93,83 @@ <h3> ViewSettingsDialog</h3>
 	<ui5-input id="sortByItem" style="display: none"></ui5-input>
 	<ui5-input id="sortOrder" style="display: none"></ui5-input>
 
+	<h3>ViewSettingsDialog with dataset properties</h3>
+
+	<ui5-button id="btnOpenDialogWithDataSet">Show ViewSettingsDialog</ui5-button>
+	<ui5-view-settings-dialog id="vsdWithDataSet">
+		<ui5-sort-item slot="sortItems" text="Name" data-key="sortName"></ui5-sort-item>
+		<ui5-sort-item slot="sortItems" text="Position" data-key="sortPosition"></ui5-sort-item>
+		<ui5-sort-item slot="sortItems" text="Company" data-key="sortCompany"></ui5-sort-item>
+
+		<ui5-filter-item slot="filterItems" text="Category" data-key="filterCategory">
+			<ui5-filter-item-option slot="values" text="Electronics" data-key="filterOptionElectronics" selected></ui5-filter-item-option>
+			<ui5-filter-item-option slot="values" text="Clothing" data-key="filterOptionClothing"></ui5-filter-item-option>
+		</ui5-filter-item>
+
+		<ui5-filter-item slot="filterItems" text="Color" data-key="filterColor">
+			<ui5-filter-item-option slot="values" text="Red" data-key="filterOptionRed"></ui5-filter-item-option>
+			<ui5-filter-item-option slot="values" text="Blue" data-key="filterOptionBlue"></ui5-filter-item-option>
+		</ui5-filter-item>
+
+	</ui5-view-settings-dialog>
+
 	<script>
+		btnOpenDialogWithDataSet.addEventListener("click", function () {
+			vsdWithDataSet.open = true;
+		});
+
+		vsdWithDataSet.addEventListener("ui5-confirm", function(e) {
+			const filterItems = e.detail.filterItems || [];
+
+			// Get all selected filter item options
+			const selectedFilterItems = filterItems.map(filterItem => {
+				return {
+					text: filterItem.text,
+					values: filterItem.values.filter(filterItemOption => filterItemOption.selected)
+				};
+			}).filter(filterItem => filterItem.values.length > 0);
+
+			// Get all NOT selected filter item options
+			const notSelectedFilterItems = filterItems.map(filterItem => {
+				return {
+					text: filterItem.text,
+					values: filterItem.values.filter(filterItemOption => !filterItemOption.selected)
+				};
+			}).filter(filterItem => filterItem.values.length > 0);
+
+			if (selectedFilterItems.length > 0) {
+				const firstSelectedFilterItem = selectedFilterItems[0];
+				const firstSelectedFilterItemKey = firstSelectedFilterItem.values[0].dataset.key;
+				const firstSelectedFilterItemText = firstSelectedFilterItem.values[0].text;
+
+				console.log(`First selected filter item key: ${firstSelectedFilterItemKey}`);
+				console.log(`First selected filter item text: ${firstSelectedFilterItemText}`);
+			} else {
+				console.log("No filters selected");
+			}
+
+			if (notSelectedFilterItems.length > 0) {
+				const firstNotSelectedFilterItem = notSelectedFilterItems[0];
+				const firstNotSelectedFilterItemKey = firstNotSelectedFilterItem.values[0].dataset.key;
+				const firstNotSelectedFilterItemText = firstNotSelectedFilterItem.values[0].text;
+
+				console.log(`First not selected filter item key: ${firstNotSelectedFilterItemKey}`);
+				console.log(`First not selected filter item text: ${firstNotSelectedFilterItemText}`);
+			} else {
+				console.log("No filters remain unselected");
+			}
+
+			alert("OK button clicked, returned info is: " + JSON.stringify(e.detail));
+		});
+
 		btnOpenDialog.addEventListener("click", function () {
 			vsd.open = true;
 		});
 		btnChangeSettings.addEventListener("click", function () {
 			vsd.setConfirmedSettings(JSON.parse(vsdSettings.value));
 		});
 		vsd.addEventListener("ui5-confirm", function(evt) {
+			debugger;
 			var sortByItemTagName = evt.detail.sortByItem && evt.detail.sortByItem.tagName;
 			sortByItem.value = `${sortByItemTagName} with text ${evt.detail.sortBy}`;
 			sortOrder.value = `${evt.detail.sortDescending}`;

packages/fiori/test/specs/ViewSettingsDialog.spec.js

@@ -139,7 +139,7 @@ describe("ViewSettingsDialog general interaction", () => {
 		await viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-header").$("ui5-button").click();
 
 		const sortByLiText = await viewSettingsDialog.shadow$("[sort-by]").$("ui5-li").getText();
-		assert.include(sortByLiText, "Name", "sortBy should  have an option selected");
+		assert.include(sortByLiText, "Name", "sortBy should have an option selected");
 
 		await browser.keys("Escape");
 	});