From 78a3dd776d26ec14f8dd37e113efaf6f8001e3f5 Mon Sep 17 00:00:00 2001
From: hinzzx <abvsuxhard@gmail.com>
Date: Tue, 10 Sep 2024 14:14:22 +0300
Subject: [PATCH 01/13] feat(ui5-filter-item, ui5-sort-item,..): add item-key
 property

---
 packages/fiori/src/FilterItem.ts              |  9 +++++
 packages/fiori/src/FilterItemOption.ts        |  9 +++++
 packages/fiori/src/SortItem.ts                |  9 +++++
 .../fiori/test/pages/ViewSettingsDialog.html  | 22 ++++++++++++
 .../test/specs/ViewSettingsDialog.spec.js     | 34 ++++++++++++++++++-
 5 files changed, 82 insertions(+), 1 deletion(-)

diff --git a/packages/fiori/src/FilterItem.ts b/packages/fiori/src/FilterItem.ts
index 70a40036ec68..6e7e71efb965 100644
--- a/packages/fiori/src/FilterItem.ts
+++ b/packages/fiori/src/FilterItem.ts
@@ -45,6 +45,15 @@ class FilterItem extends UI5Element {
 	 */
 	@slot()
 	values!: Array<FilterItemOption>;
+
+	/**
+	 * Defines a unique identifier for the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.3.0
+	 */
+	@property()
+	itemKey?: string;
 }
 
 FilterItem.define();
diff --git a/packages/fiori/src/FilterItemOption.ts b/packages/fiori/src/FilterItemOption.ts
index 11775afbb0e0..5256192207cd 100644
--- a/packages/fiori/src/FilterItemOption.ts
+++ b/packages/fiori/src/FilterItemOption.ts
@@ -36,6 +36,15 @@ class FilterItemOption extends UI5Element {
 	 */
 	@property({ type: Boolean })
 	selected = false;
+
+	/**
+	 * Defines a unique identifier for the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.3.0
+	 */
+	@property()
+	itemKey?: string;
 }
 
 FilterItemOption.define();
diff --git a/packages/fiori/src/SortItem.ts b/packages/fiori/src/SortItem.ts
index 4c36541b6569..3be37f1666c7 100644
--- a/packages/fiori/src/SortItem.ts
+++ b/packages/fiori/src/SortItem.ts
@@ -36,6 +36,15 @@ class SortItem extends UI5Element {
 	 */
 	@property({ type: Boolean })
 	selected = false;
+
+	/**
+	 * Defines a unique identifier for the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.3.0
+	 */
+	@property()
+	itemKey?: string;
 }
 
 SortItem.define();
diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index a8c22d46df9f..cd61126eea7b 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -93,7 +93,29 @@ <h3> ViewSettingsDialog</h3>
 	<ui5-input id="sortByItem" style="display: none"></ui5-input>
 	<ui5-input id="sortOrder" style="display: none"></ui5-input>
 
+	<h3>ViewSettingsDialog with item-keys</h3>
+
+	<ui5-button id="btnOpenDialogWithItemKey">Show ViewSettingsDialog</ui5-button>
+	<ui5-view-settings-dialog id="vsdWithItemKey">
+		<ui5-sort-item slot="sortItems" text="Name" item-key="sortName"></ui5-sort-item>
+		<ui5-sort-item slot="sortItems" text="Position" item-key="sortPosition"></ui5-sort-item>
+		<ui5-sort-item slot="sortItems" text="Company" item-key="sortCompany"></ui5-sort-item>
+
+		<ui5-filter-item slot="filterItems" text="Filter 1" item-key="filter1">
+			<ui5-filter-item-option slot="values" text="Some filter 1" item-key="filterOption1"></ui5-filter-item-option>
+			<ui5-filter-item-option slot="values" text="Some filter 2" item-key="filterOption2"></ui5-filter-item-option>
+		</ui5-filter-item>
+		<ui5-filter-item slot="filterItems" text="Filter 2" item-key="filter2">
+			<ui5-filter-item-option slot="values" text="Some filter 3" item-key="filterOption3"></ui5-filter-item-option>
+			<ui5-filter-item-option slot="values" text="Some filter 4" item-key="filterOption4"></ui5-filter-item-option>
+		</ui5-filter-item>
+	</ui5-view-settings-dialog>
+
 	<script>
+		btnOpenDialogWithItemKey.addEventListener("click", function () {
+			vsdWithItemKey.open = true;
+		});
+
 		btnOpenDialog.addEventListener("click", function () {
 			vsd.open = true;
 		});
diff --git a/packages/fiori/test/specs/ViewSettingsDialog.spec.js b/packages/fiori/test/specs/ViewSettingsDialog.spec.js
index 623b3e04eba8..b56ebd4df440 100644
--- a/packages/fiori/test/specs/ViewSettingsDialog.spec.js
+++ b/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");
 	});
@@ -176,4 +176,36 @@ describe("ViewSettingsDialog general interaction", () => {
 
 		await browser.keys("Escape");
 	});
+
+	it("should access the same sort item via item-key, after text being changed", async () => {
+		const btnOpenDialog = await browser.$("#btnOpenDialogWithItemKey");
+		const viewSettingsDialog = await browser.$("#vsdWithItemKey");
+
+		await btnOpenDialog.click();
+
+		// Access the sort item using item-key
+		const sortItem = await viewSettingsDialog.$(`[item-key="sortCompany"]`);
+		const secondSortItemLi = await viewSettingsDialog.shadow$("[sort-by]").$$("ui5-li")[1];
+
+		// Get the text of the list item
+		let sortItemLiText = await viewSettingsDialog.shadow$("[sort-by]").$$("ui5-li")[2].getText();
+		sortItemLiText = sortItemLiText.split("\n")[0]; // Trim the text because it returns 'Company\nNot Selected';
+
+		let sortItemText = await sortItem.getAttribute("text");
+
+		assert.strictEqual(sortItemLiText, sortItemText, "The sort item text is the same as the li text before update");
+
+		// Change the text of the item
+		await sortItem.setAttribute("text", "Cooperation");
+
+		await browser.keys("Escape");
+		await btnOpenDialog.click();
+		secondSortItemLi.click(); // Click on another item to re-render, so the text changes successfully.
+
+		sortItemLiText = await viewSettingsDialog.shadow$("[sort-by]").$$("ui5-li")[2].getText();
+		sortItemLiText = sortItemLiText.split("\n")[0];
+		sortItemText = await sortItem.getAttribute("text");
+
+		assert.strictEqual(sortItemLiText, sortItemText, "The sort item text is the same as the li text after update");
+	});
 });

From ab2b240bc160a45f8a7f0c89ce407ffe97a7206a Mon Sep 17 00:00:00 2001
From: hinzzx <abvsuxhard@gmail.com>
Date: Thu, 12 Sep 2024 13:51:48 +0300
Subject: [PATCH 02/13] fix: address comments

---
 packages/fiori/src/ViewSettingsDialog.ts      |  8 ++++---
 .../fiori/test/pages/ViewSettingsDialog.html  | 24 ++++++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts
index 61554759773d..0c967e8d3140 100644
--- a/packages/fiori/src/ViewSettingsDialog.ts
+++ b/packages/fiori/src/ViewSettingsDialog.ts
@@ -66,7 +66,7 @@ type ViewSettingsDialogCancelEventDetail = VSDSettings & {
 }
 
 // Common properties for several VSDInternalSettings fields
-type VSDItem = {text?: string, selected: boolean}
+type VSDItem = {text?: string, itemKey?: string, selected: boolean}
 
 // Used for the private properties _initialSettings, _confirmedSettings and _currentSettings
 type VSDInternalSettings = {
@@ -447,10 +447,12 @@ class ViewSettingsDialog extends UI5Element {
 			filters: this.filterItems.map(item => {
 				return {
 					text: item.text || "",
+					itemKey: item.itemKey || "",
 					selected: false,
 					filterOptions: item.values.map(optionValue => {
 						return {
 							text: optionValue.text || "",
+							itemKey: optionValue.itemKey || "",
 							selected: optionValue.selected,
 						};
 					}),
@@ -635,13 +637,13 @@ class ViewSettingsDialog extends UI5Element {
 
 			filter.filterOptions.forEach(option => {
 				if (option.selected) {
-					selectedOptions.push(option.text || "");
+					selectedOptions.push(option.itemKey || option.text || "");
 				}
 			});
 
 			if (selectedOptions.length) {
 				result.push({});
-				result[result.length - 1][filter.text || ""] = selectedOptions;
+				result[result.length - 1][filter.itemKey || filter.text || ""] = selectedOptions;
 			}
 		});
 
diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index cd61126eea7b..536cfc9d39bf 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -101,13 +101,13 @@ <h3>ViewSettingsDialog with item-keys</h3>
 		<ui5-sort-item slot="sortItems" text="Position" item-key="sortPosition"></ui5-sort-item>
 		<ui5-sort-item slot="sortItems" text="Company" item-key="sortCompany"></ui5-sort-item>
 
-		<ui5-filter-item slot="filterItems" text="Filter 1" item-key="filter1">
-			<ui5-filter-item-option slot="values" text="Some filter 1" item-key="filterOption1"></ui5-filter-item-option>
-			<ui5-filter-item-option slot="values" text="Some filter 2" item-key="filterOption2"></ui5-filter-item-option>
+		<ui5-filter-item slot="filterItems" text="Category" item-key="filterCategory">
+			<ui5-filter-item-option slot="values" text="Electronics" item-key="filterOptionElectronics"></ui5-filter-item-option>
+			<ui5-filter-item-option slot="values" text="Clothing" item-key="filterOptionClothing"></ui5-filter-item-option>
 		</ui5-filter-item>
-		<ui5-filter-item slot="filterItems" text="Filter 2" item-key="filter2">
-			<ui5-filter-item-option slot="values" text="Some filter 3" item-key="filterOption3"></ui5-filter-item-option>
-			<ui5-filter-item-option slot="values" text="Some filter 4" item-key="filterOption4"></ui5-filter-item-option>
+		<ui5-filter-item slot="filterItems" text="Color" item-key="filterColor">
+			<ui5-filter-item-option slot="values" text="Red" item-key="filterOptionRed"></ui5-filter-item-option>
+			<ui5-filter-item-option slot="values" text="Blue" item-key="filterOptionBlue"></ui5-filter-item-option>
 		</ui5-filter-item>
 	</ui5-view-settings-dialog>
 
@@ -116,6 +116,18 @@ <h3>ViewSettingsDialog with item-keys</h3>
 			vsdWithItemKey.open = true;
 		});
 
+		vsdWithItemKey.addEventListener("ui5-confirm", function(e) {
+			const filters = e.detail.filters || [];
+
+			filters.forEach(filter => {
+				const filterKey = Object.keys(filter)[0];
+				const selectedOptions = filter[filterKey];
+
+				console.log(`Filter Key: ${filterKey}, Selected Options: ${selectedOptions.join(", ")}`);
+				alert(`Filter: ${filterKey}, Selected Options: ${selectedOptions.join(", ")}`);
+			});
+		});
+
 		btnOpenDialog.addEventListener("click", function () {
 			vsd.open = true;
 		});

From e4e1f817d34ccf858d315f4c3efb04068b3ff02e Mon Sep 17 00:00:00 2001
From: hinzzx <abvsuxhard@gmail.com>
Date: Mon, 16 Sep 2024 10:48:35 +0300
Subject: [PATCH 03/13] fix: fix object structure in event detail

---
 packages/fiori/src/ViewSettingsDialog.ts      | 37 ++++++++++++++++++-
 .../fiori/test/pages/ViewSettingsDialog.html  | 15 ++++----
 2 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts
index 0c967e8d3140..28259a2cfb7a 100644
--- a/packages/fiori/src/ViewSettingsDialog.ts
+++ b/packages/fiori/src/ViewSettingsDialog.ts
@@ -75,6 +75,13 @@ type VSDInternalSettings = {
 	filters: Array<VSDItem & {filterOptions: Array<VSDItem>}>,
 }
 
+type FilterSelection = {
+	filterItem: VSDItem & {
+		filterOptions: Array<VSDItem>;
+	};
+	filterItemSelectedOptions: VSDItem[];
+};
+
 /**
  * @class
  * ### Overview
@@ -626,6 +633,7 @@ class ViewSettingsDialog extends UI5Element {
 			sortBy,
 			sortByItem,
 			filters: this.selectedFilters,
+			filterItems: this.selectedFilterItems,
 		};
 	}
 
@@ -637,13 +645,38 @@ class ViewSettingsDialog extends UI5Element {
 
 			filter.filterOptions.forEach(option => {
 				if (option.selected) {
-					selectedOptions.push(option.itemKey || option.text || "");
+					selectedOptions.push(option.text || "");
 				}
 			});
 
 			if (selectedOptions.length) {
 				result.push({});
-				result[result.length - 1][filter.itemKey || filter.text || ""] = selectedOptions;
+				result[result.length - 1][filter.text || ""] = selectedOptions;
+			}
+		});
+
+		return result;
+	}
+
+	get selectedFilterItems() {
+		const result: Array<FilterSelection> = [];
+
+		this._currentSettings.filters.forEach(filter => {
+			const selectedOptions: Array<VSDItem> = [];
+
+			filter.filterOptions.forEach(option => {
+				if (option.selected) {
+					selectedOptions.push(option);
+				}
+			});
+
+			if (selectedOptions.length) {
+				const filterItemObject: FilterSelection = {
+					filterItem: filter,
+					filterItemSelectedOptions: selectedOptions,
+				};
+
+				result.push(filterItemObject);
 			}
 		});
 
diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index 536cfc9d39bf..45c310a599dd 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -105,10 +105,12 @@ <h3>ViewSettingsDialog with item-keys</h3>
 			<ui5-filter-item-option slot="values" text="Electronics" item-key="filterOptionElectronics"></ui5-filter-item-option>
 			<ui5-filter-item-option slot="values" text="Clothing" item-key="filterOptionClothing"></ui5-filter-item-option>
 		</ui5-filter-item>
+
 		<ui5-filter-item slot="filterItems" text="Color" item-key="filterColor">
 			<ui5-filter-item-option slot="values" text="Red" item-key="filterOptionRed"></ui5-filter-item-option>
 			<ui5-filter-item-option slot="values" text="Blue" item-key="filterOptionBlue"></ui5-filter-item-option>
 		</ui5-filter-item>
+
 	</ui5-view-settings-dialog>
 
 	<script>
@@ -118,14 +120,11 @@ <h3>ViewSettingsDialog with item-keys</h3>
 
 		vsdWithItemKey.addEventListener("ui5-confirm", function(e) {
 			const filters = e.detail.filters || [];
-
-			filters.forEach(filter => {
-				const filterKey = Object.keys(filter)[0];
-				const selectedOptions = filter[filterKey];
-
-				console.log(`Filter Key: ${filterKey}, Selected Options: ${selectedOptions.join(", ")}`);
-				alert(`Filter: ${filterKey}, Selected Options: ${selectedOptions.join(", ")}`);
-			});
+			console.log("Selected Filters: ", filters);
+			console.log("First Filter Item Key: ", e.detail.filterItems[0].filterItem.itemKey);
+			console.log("First Selected Option Text: ", e.detail.filterItems[0].filterItemSelectedOptions[0].text);
+			console.log("First Selected Option Key: ", e.detail.filterItems[0].filterItemSelectedOptions[0].itemKey);
+			alert("OK button clicked, returned info is: " + JSON.stringify(e.detail));
 		});
 
 		btnOpenDialog.addEventListener("click", function () {

From 59c0812b6329a9eeb37ce012290556eafcf43639 Mon Sep 17 00:00:00 2001
From: Stoyan <88034608+hinzzx@users.noreply.github.com>
Date: Tue, 17 Sep 2024 14:26:33 +0300
Subject: [PATCH 04/13] fix: apply type convention

---
 packages/fiori/src/ViewSettingsDialog.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts
index 28259a2cfb7a..592731318585 100644
--- a/packages/fiori/src/ViewSettingsDialog.ts
+++ b/packages/fiori/src/ViewSettingsDialog.ts
@@ -79,7 +79,7 @@ type FilterSelection = {
 	filterItem: VSDItem & {
 		filterOptions: Array<VSDItem>;
 	};
-	filterItemSelectedOptions: VSDItem[];
+	filterItemSelectedOptions: Array<VSDItem>;
 };
 
 /**

From 6ccbf808ad6ea3b5147cd145b7494f1171191adf Mon Sep 17 00:00:00 2001
From: hinzzx <abvsuxhard@gmail.com>
Date: Tue, 17 Sep 2024 16:47:28 +0300
Subject: [PATCH 05/13] fix: remove object with only selected filter options

---
 packages/fiori/src/ViewSettingsDialog.ts          | 2 --
 packages/fiori/test/pages/ViewSettingsDialog.html | 5 +++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts
index 592731318585..225c808126cf 100644
--- a/packages/fiori/src/ViewSettingsDialog.ts
+++ b/packages/fiori/src/ViewSettingsDialog.ts
@@ -79,7 +79,6 @@ type FilterSelection = {
 	filterItem: VSDItem & {
 		filterOptions: Array<VSDItem>;
 	};
-	filterItemSelectedOptions: Array<VSDItem>;
 };
 
 /**
@@ -673,7 +672,6 @@ class ViewSettingsDialog extends UI5Element {
 			if (selectedOptions.length) {
 				const filterItemObject: FilterSelection = {
 					filterItem: filter,
-					filterItemSelectedOptions: selectedOptions,
 				};
 
 				result.push(filterItemObject);
diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index 45c310a599dd..b80c3e097e24 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -119,11 +119,12 @@ <h3>ViewSettingsDialog with item-keys</h3>
 		});
 
 		vsdWithItemKey.addEventListener("ui5-confirm", function(e) {
+			const selectedFilterItems = e.detail.filterItems[0].filterItem.filterOptions.filter(option => option.selected);
 			const filters = e.detail.filters || [];
 			console.log("Selected Filters: ", filters);
 			console.log("First Filter Item Key: ", e.detail.filterItems[0].filterItem.itemKey);
-			console.log("First Selected Option Text: ", e.detail.filterItems[0].filterItemSelectedOptions[0].text);
-			console.log("First Selected Option Key: ", e.detail.filterItems[0].filterItemSelectedOptions[0].itemKey);
+			console.log("First Selected Option Text: ", selectedFilterItems[0].text);
+			console.log("First Selected Option Text: ", selectedFilterItems[0].itemKey);
 			alert("OK button clicked, returned info is: " + JSON.stringify(e.detail));
 		});
 

From ab08238e3436ab1fdaf51fc7229d2d53546ea4b8 Mon Sep 17 00:00:00 2001
From: Stoyan <88034608+hinzzx@users.noreply.github.com>
Date: Tue, 17 Sep 2024 16:49:02 +0300
Subject: [PATCH 06/13] fix: typo

---
 packages/fiori/test/pages/ViewSettingsDialog.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index b80c3e097e24..618f0cbfedf0 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -124,7 +124,7 @@ <h3>ViewSettingsDialog with item-keys</h3>
 			console.log("Selected Filters: ", filters);
 			console.log("First Filter Item Key: ", e.detail.filterItems[0].filterItem.itemKey);
 			console.log("First Selected Option Text: ", selectedFilterItems[0].text);
-			console.log("First Selected Option Text: ", selectedFilterItems[0].itemKey);
+			console.log("First Selected Option Item key: ", selectedFilterItems[0].itemKey);
 			alert("OK button clicked, returned info is: " + JSON.stringify(e.detail));
 		});
 

From a04afc3f14db976db2c38c85095b840f8c26be89 Mon Sep 17 00:00:00 2001
From: hinzzx <abvsuxhard@gmail.com>
Date: Wed, 18 Sep 2024 10:18:50 +0300
Subject: [PATCH 07/13] fix: handle empty filters sample

---
 .../fiori/test/pages/ViewSettingsDialog.html  | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index 618f0cbfedf0..e1c312d037de 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -119,12 +119,19 @@ <h3>ViewSettingsDialog with item-keys</h3>
 		});
 
 		vsdWithItemKey.addEventListener("ui5-confirm", function(e) {
-			const selectedFilterItems = e.detail.filterItems[0].filterItem.filterOptions.filter(option => option.selected);
-			const filters = e.detail.filters || [];
-			console.log("Selected Filters: ", filters);
-			console.log("First Filter Item Key: ", e.detail.filterItems[0].filterItem.itemKey);
-			console.log("First Selected Option Text: ", selectedFilterItems[0].text);
-			console.log("First Selected Option Item key: ", selectedFilterItems[0].itemKey);
+			const filterItems = e.detail.filterItems || [];
+			const selectedFilterItems = filterItems.flatMap(item => item.filterItem.filterOptions.filter(option => option.selected));
+			console.log("Selected Filters: ", e.detail.filters || []);
+
+			if (filterItems.length > 0) {
+				console.log("First Filter Item Key: ", filterItems[0].filterItem.itemKey);
+			}
+
+			if (selectedFilterItems.length > 0) {
+				console.log("First Selected Option Text: ", selectedFilterItems[0].text);
+				console.log("First Selected Option Item Key: ", selectedFilterItems[0].itemKey);
+			}
+
 			alert("OK button clicked, returned info is: " + JSON.stringify(e.detail));
 		});
 

From 9aeefa8988ff71a4b69b84db5dd14e8be8480588 Mon Sep 17 00:00:00 2001
From: hinzzx <abvsuxhard@gmail.com>
Date: Tue, 1 Oct 2024 15:48:32 +0300
Subject: [PATCH 08/13] fix: address comments, fix bug

---
 packages/fiori/src/FilterItem.ts              |  9 ---
 packages/fiori/src/FilterItemOption.ts        |  9 ---
 packages/fiori/src/SortItem.ts                |  9 ---
 packages/fiori/src/ViewSettingsDialog.ts      | 53 +++++---------
 .../fiori/test/pages/ViewSettingsDialog.html  | 72 +++++++++++++------
 .../test/specs/ViewSettingsDialog.spec.js     | 32 ---------
 6 files changed, 69 insertions(+), 115 deletions(-)

diff --git a/packages/fiori/src/FilterItem.ts b/packages/fiori/src/FilterItem.ts
index 6e7e71efb965..70a40036ec68 100644
--- a/packages/fiori/src/FilterItem.ts
+++ b/packages/fiori/src/FilterItem.ts
@@ -45,15 +45,6 @@ class FilterItem extends UI5Element {
 	 */
 	@slot()
 	values!: Array<FilterItemOption>;
-
-	/**
-	 * Defines a unique identifier for the component.
-	 * @default undefined
-	 * @public
-	 * @since 2.3.0
-	 */
-	@property()
-	itemKey?: string;
 }
 
 FilterItem.define();
diff --git a/packages/fiori/src/FilterItemOption.ts b/packages/fiori/src/FilterItemOption.ts
index 5256192207cd..11775afbb0e0 100644
--- a/packages/fiori/src/FilterItemOption.ts
+++ b/packages/fiori/src/FilterItemOption.ts
@@ -36,15 +36,6 @@ class FilterItemOption extends UI5Element {
 	 */
 	@property({ type: Boolean })
 	selected = false;
-
-	/**
-	 * Defines a unique identifier for the component.
-	 * @default undefined
-	 * @public
-	 * @since 2.3.0
-	 */
-	@property()
-	itemKey?: string;
 }
 
 FilterItemOption.define();
diff --git a/packages/fiori/src/SortItem.ts b/packages/fiori/src/SortItem.ts
index 3be37f1666c7..4c36541b6569 100644
--- a/packages/fiori/src/SortItem.ts
+++ b/packages/fiori/src/SortItem.ts
@@ -36,15 +36,6 @@ class SortItem extends UI5Element {
 	 */
 	@property({ type: Boolean })
 	selected = false;
-
-	/**
-	 * Defines a unique identifier for the component.
-	 * @default undefined
-	 * @public
-	 * @since 2.3.0
-	 */
-	@property()
-	itemKey?: string;
 }
 
 SortItem.define();
diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts
index 225c808126cf..3c799f85af14 100644
--- a/packages/fiori/src/ViewSettingsDialog.ts
+++ b/packages/fiori/src/ViewSettingsDialog.ts
@@ -66,7 +66,7 @@ type ViewSettingsDialogCancelEventDetail = VSDSettings & {
 }
 
 // Common properties for several VSDInternalSettings fields
-type VSDItem = {text?: string, itemKey?: string, selected: boolean}
+type VSDItem = {text?: string, selected: boolean}
 
 // Used for the private properties _initialSettings, _confirmedSettings and _currentSettings
 type VSDInternalSettings = {
@@ -75,12 +75,6 @@ type VSDInternalSettings = {
 	filters: Array<VSDItem & {filterOptions: Array<VSDItem>}>,
 }
 
-type FilterSelection = {
-	filterItem: VSDItem & {
-		filterOptions: Array<VSDItem>;
-	};
-};
-
 /**
  * @class
  * ### Overview
@@ -453,12 +447,10 @@ class ViewSettingsDialog extends UI5Element {
 			filters: this.filterItems.map(item => {
 				return {
 					text: item.text || "",
-					itemKey: item.itemKey || "",
 					selected: false,
 					filterOptions: item.values.map(optionValue => {
 						return {
 							text: optionValue.text || "",
-							itemKey: optionValue.itemKey || "",
 							selected: optionValue.selected,
 						};
 					}),
@@ -569,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;
 	}
@@ -632,7 +641,7 @@ class ViewSettingsDialog extends UI5Element {
 			sortBy,
 			sortByItem,
 			filters: this.selectedFilters,
-			filterItems: this.selectedFilterItems,
+			filterItems: this.filterItems,
 		};
 	}
 
@@ -657,30 +666,6 @@ class ViewSettingsDialog extends UI5Element {
 		return result;
 	}
 
-	get selectedFilterItems() {
-		const result: Array<FilterSelection> = [];
-
-		this._currentSettings.filters.forEach(filter => {
-			const selectedOptions: Array<VSDItem> = [];
-
-			filter.filterOptions.forEach(option => {
-				if (option.selected) {
-					selectedOptions.push(option);
-				}
-			});
-
-			if (selectedOptions.length) {
-				const filterItemObject: FilterSelection = {
-					filterItem: filter,
-				};
-
-				result.push(filterItemObject);
-			}
-		});
-
-		return result;
-	}
-
 	/**
 	 * If the dialog is closed by [Escape] key, do the same as if the `Cancel` button is pressed.
 	 * @param evt
diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index e1c312d037de..b1b3cb674e7c 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -93,48 +93,75 @@ <h3> ViewSettingsDialog</h3>
 	<ui5-input id="sortByItem" style="display: none"></ui5-input>
 	<ui5-input id="sortOrder" style="display: none"></ui5-input>
 
-	<h3>ViewSettingsDialog with item-keys</h3>
+	<h3>ViewSettingsDialog with dataset properties</h3>
 
 	<ui5-button id="btnOpenDialogWithItemKey">Show ViewSettingsDialog</ui5-button>
-	<ui5-view-settings-dialog id="vsdWithItemKey">
-		<ui5-sort-item slot="sortItems" text="Name" item-key="sortName"></ui5-sort-item>
-		<ui5-sort-item slot="sortItems" text="Position" item-key="sortPosition"></ui5-sort-item>
-		<ui5-sort-item slot="sortItems" text="Company" item-key="sortCompany"></ui5-sort-item>
-
-		<ui5-filter-item slot="filterItems" text="Category" item-key="filterCategory">
-			<ui5-filter-item-option slot="values" text="Electronics" item-key="filterOptionElectronics"></ui5-filter-item-option>
-			<ui5-filter-item-option slot="values" text="Clothing" item-key="filterOptionClothing"></ui5-filter-item-option>
+	<ui5-view-settings-dialog id="vsdWithDatasetItemKey">
+		<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" item-key="filterColor">
-			<ui5-filter-item-option slot="values" text="Red" item-key="filterOptionRed"></ui5-filter-item-option>
-			<ui5-filter-item-option slot="values" text="Blue" item-key="filterOptionBlue"></ui5-filter-item-option>
+		<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>
 		btnOpenDialogWithItemKey.addEventListener("click", function () {
-			vsdWithItemKey.open = true;
+			vsdWithDatasetItemKey.open = true;
 		});
 
-		vsdWithItemKey.addEventListener("ui5-confirm", function(e) {
+		vsdWithDatasetItemKey.addEventListener("ui5-confirm", function(e) {
 			const filterItems = e.detail.filterItems || [];
-			const selectedFilterItems = filterItems.flatMap(item => item.filterItem.filterOptions.filter(option => option.selected));
-			console.log("Selected Filters: ", e.detail.filters || []);
 
-			if (filterItems.length > 0) {
-				console.log("First Filter Item Key: ", filterItems[0].filterItem.itemKey);
-			}
+			// 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) {
-				console.log("First Selected Option Text: ", selectedFilterItems[0].text);
-				console.log("First Selected Option Item Key: ", selectedFilterItems[0].itemKey);
+				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 not selected");
 			}
 
 			alert("OK button clicked, returned info is: " + JSON.stringify(e.detail));
 		});
-
+	
 		btnOpenDialog.addEventListener("click", function () {
 			vsd.open = true;
 		});
@@ -142,6 +169,7 @@ <h3>ViewSettingsDialog with item-keys</h3>
 			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}`;
diff --git a/packages/fiori/test/specs/ViewSettingsDialog.spec.js b/packages/fiori/test/specs/ViewSettingsDialog.spec.js
index b56ebd4df440..5306bd068a54 100644
--- a/packages/fiori/test/specs/ViewSettingsDialog.spec.js
+++ b/packages/fiori/test/specs/ViewSettingsDialog.spec.js
@@ -176,36 +176,4 @@ describe("ViewSettingsDialog general interaction", () => {
 
 		await browser.keys("Escape");
 	});
-
-	it("should access the same sort item via item-key, after text being changed", async () => {
-		const btnOpenDialog = await browser.$("#btnOpenDialogWithItemKey");
-		const viewSettingsDialog = await browser.$("#vsdWithItemKey");
-
-		await btnOpenDialog.click();
-
-		// Access the sort item using item-key
-		const sortItem = await viewSettingsDialog.$(`[item-key="sortCompany"]`);
-		const secondSortItemLi = await viewSettingsDialog.shadow$("[sort-by]").$$("ui5-li")[1];
-
-		// Get the text of the list item
-		let sortItemLiText = await viewSettingsDialog.shadow$("[sort-by]").$$("ui5-li")[2].getText();
-		sortItemLiText = sortItemLiText.split("\n")[0]; // Trim the text because it returns 'Company\nNot Selected';
-
-		let sortItemText = await sortItem.getAttribute("text");
-
-		assert.strictEqual(sortItemLiText, sortItemText, "The sort item text is the same as the li text before update");
-
-		// Change the text of the item
-		await sortItem.setAttribute("text", "Cooperation");
-
-		await browser.keys("Escape");
-		await btnOpenDialog.click();
-		secondSortItemLi.click(); // Click on another item to re-render, so the text changes successfully.
-
-		sortItemLiText = await viewSettingsDialog.shadow$("[sort-by]").$$("ui5-li")[2].getText();
-		sortItemLiText = sortItemLiText.split("\n")[0];
-		sortItemText = await sortItem.getAttribute("text");
-
-		assert.strictEqual(sortItemLiText, sortItemText, "The sort item text is the same as the li text after update");
-	});
 });

From 122495d1f98d4f5738882dbe254f3e3d6f000f22 Mon Sep 17 00:00:00 2001
From: Stoyan <88034608+hinzzx@users.noreply.github.com>
Date: Tue, 1 Oct 2024 16:05:15 +0300
Subject: [PATCH 09/13] fix: grammar

---
 packages/fiori/test/pages/ViewSettingsDialog.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index b1b3cb674e7c..c823f2ec683c 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -156,7 +156,7 @@ <h3>ViewSettingsDialog with dataset properties</h3>
 				console.log(`First not selected filter item key: ${firstNotSelectedFilterItemKey}`);
 				console.log(`First not selected filter item text: ${firstNotSelectedFilterItemText}`);
 			} else {
-				console.log("No filters not selected");
+				console.log("console.log("No filters remain unselected");
 			}
 
 			alert("OK button clicked, returned info is: " + JSON.stringify(e.detail));

From 9bff11520b9ca85d6f0380d0bb204d132e061aa9 Mon Sep 17 00:00:00 2001
From: Stoyan <88034608+hinzzx@users.noreply.github.com>
Date: Tue, 1 Oct 2024 16:05:57 +0300
Subject: [PATCH 10/13] fix: typo

---
 packages/fiori/test/pages/ViewSettingsDialog.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index c823f2ec683c..8461358b4c58 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -156,7 +156,7 @@ <h3>ViewSettingsDialog with dataset properties</h3>
 				console.log(`First not selected filter item key: ${firstNotSelectedFilterItemKey}`);
 				console.log(`First not selected filter item text: ${firstNotSelectedFilterItemText}`);
 			} else {
-				console.log("console.log("No filters remain unselected");
+				console.log("No filters remain unselected");
 			}
 
 			alert("OK button clicked, returned info is: " + JSON.stringify(e.detail));

From 0a56a659834b4bb546a75ac44788e2163778bc64 Mon Sep 17 00:00:00 2001
From: hinzzx <abvsuxhard@gmail.com>
Date: Tue, 1 Oct 2024 16:19:37 +0300
Subject: [PATCH 11/13] fix: change ids

---
 packages/fiori/test/pages/ViewSettingsDialog.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index b1b3cb674e7c..0ed1d4ec495d 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -95,8 +95,8 @@ <h3> ViewSettingsDialog</h3>
 
 	<h3>ViewSettingsDialog with dataset properties</h3>
 
-	<ui5-button id="btnOpenDialogWithItemKey">Show ViewSettingsDialog</ui5-button>
-	<ui5-view-settings-dialog id="vsdWithDatasetItemKey">
+	<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>
@@ -114,11 +114,11 @@ <h3>ViewSettingsDialog with dataset properties</h3>
 	</ui5-view-settings-dialog>
 
 	<script>
-		btnOpenDialogWithItemKey.addEventListener("click", function () {
-			vsdWithDatasetItemKey.open = true;
+		btnOpenDialogWithDataSet.addEventListener("click", function () {
+			vsdWithDataSet.open = true;
 		});
 
-		vsdWithDatasetItemKey.addEventListener("ui5-confirm", function(e) {
+		vsdWithDataSet.addEventListener("ui5-confirm", function(e) {
 			const filterItems = e.detail.filterItems || [];
 
 			// Get all selected filter item options

From 605f05c936d6a951a9352d64881c631d9f224d2a Mon Sep 17 00:00:00 2001
From: Stoyan <88034608+hinzzx@users.noreply.github.com>
Date: Tue, 8 Oct 2024 09:11:01 +0300
Subject: [PATCH 12/13] fix: remove debugger

---
 packages/fiori/test/pages/ViewSettingsDialog.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index 619ba4cc7f47..c61dd95714fe 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -169,7 +169,6 @@ <h3>ViewSettingsDialog with dataset properties</h3>
 			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}`;

From 298ccf35486014d1952b878365df21402a80d0df Mon Sep 17 00:00:00 2001
From: hinzzx <abvsuxhard@gmail.com>
Date: Mon, 14 Oct 2024 15:09:13 +0300
Subject: [PATCH 13/13] fix: address comment

---
 packages/fiori/src/ViewSettingsDialog.ts      |  5 ++-
 .../fiori/test/pages/ViewSettingsDialog.html  | 42 +++----------------
 2 files changed, 8 insertions(+), 39 deletions(-)

diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts
index 4a3bd331fa25..01212b0228d9 100644
--- a/packages/fiori/src/ViewSettingsDialog.ts
+++ b/packages/fiori/src/ViewSettingsDialog.ts
@@ -639,14 +639,15 @@ class ViewSettingsDialog extends UI5Element {
 			sortDescending = !this._currentSettings.sortOrder[0].selected,
 			sortBy = _currentSortBySelected && (_currentSortBySelected.text || ""),
 			sortByElementIndex = _currentSortBySelected && _currentSortBySelected.index,
-			sortByItem = this.sortItems[sortByElementIndex];
+			sortByItem = this.sortItems[sortByElementIndex],
+			selectedFilterItems = this.filterItems.filter(filterItem => filterItem.values.some(item => item.selected));
 		return {
 			sortOrder,
 			sortDescending,
 			sortBy,
 			sortByItem,
 			filters: this.selectedFilters,
-			filterItems: this.filterItems,
+			filterItems: selectedFilterItems,
 		};
 	}
 
diff --git a/packages/fiori/test/pages/ViewSettingsDialog.html b/packages/fiori/test/pages/ViewSettingsDialog.html
index c61dd95714fe..54a3c9aded0c 100644
--- a/packages/fiori/test/pages/ViewSettingsDialog.html
+++ b/packages/fiori/test/pages/ViewSettingsDialog.html
@@ -121,44 +121,12 @@ <h3>ViewSettingsDialog with dataset properties</h3>
 		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");
+			// Get the first selected filter and its selected item
+			if (filterItems.length > 0 && filterItems[0].values.length > 0) {
+				console.log("First Selected Filter: ", filterItems[0]);
+				console.log("Selected item within the first filter: ", filterItems[0].values[0]);
+				console.log("Selected item key within the first filter: ", filterItems[0].values[0].dataset.key);
 			}
-
-			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));
 		});