feat(ui5-view-settings-dialog): add more event.details to confirm/can…

…cel events (#4772)

The confirm event now contains two more fields:
sortByItem selected item (reference to element)
sortDescending Boolean result for SortOrder (if is true - Descending order is selected)

Fixes: #4539

packages/fiori/src/ViewSettingsDialog.hbs

@@ -68,7 +68,7 @@
 						sort-by>
 						<ui5-li-groupheader>{{_sortByLabel}}</ui5-li-groupheader>
 						{{#each _currentSettings.sortBy}}
-							<ui5-li ?selected="{{this.selected}}">{{this.text}}</ui5-li>
+							<ui5-li data-ui5-external-action-item-index="{{@index}}" ?selected="{{this.selected}}">{{this.text}}</ui5-li>
 						{{/each}}
 					</ui5-list>
 				</div>

packages/fiori/src/ViewSettingsDialog.js

@@ -145,14 +145,19 @@ const metadata = {
 		 * Fired when confirmation button is activated.
 		 *
 		 * @event sap.ui.webcomponents.fiori.ViewSettingsDialog#confirm
-		 * @param {string} sortOrder The current sort order selected.
-		 * @param {string} sortBy The currently selected <code>ui5-sort-item</code> text attribute.
+		 * @param {String} sortOrder The current sort order selected.
+		 * @param {String} sortBy The currently selected <code>ui5-sort-item</code> text attribute.
+		 * @param {HTMLElement} sortByItem The currently selected <code>ui5-sort-item</code>.
+		 * @param {Boolean} sortDescending The selected sort order (true = descending, false = ascending).
+		 * @param {Array} filterItems The selected filters items.
 		 * @public
 		 */
 		confirm: {
 			detail: {
 				sortOrder: { type: String },
 				sortBy: { type: String },
+				sortByItem: { type: HTMLElement },
+				sortDescending: { type: Boolean },
 				filters: { type: Array },
 			},
 		},
@@ -161,14 +166,19 @@ const metadata = {
 		 * Fired when cancel button is activated.
 		 *
 		 * @event sap.ui.webcomponents.fiori.ViewSettingsDialog#cancel
-		 * @param {string} sortOrder The current sort order selected.
-		 * @param {string} sortBy The currently selected <code>ui5-sort-item</code> text attribute.
+		 * @param {String} sortOrder The current sort order selected.
+		 * @param {String} sortBy The currently selected <code>ui5-sort-item</code> text attribute.
+		 * @param {HTMLElement} sortByItem The currently selected <code>ui5-sort-item</code>.
+		 * @param {Boolean} sortDescending The selected sort order (true = descending, false = ascending).
+		 * @param {Array} filterItems The selected filters items.
 		 * @public
 		 */
 		cancel: {
 			detail: {
 				sortOrder: { type: String },
 				sortBy: { type: String },
+				sortByItem: { type: HTMLElement },
+				sortDescending: { type: Boolean },
 				filters: { type: Array },
 			},
 		},
@@ -402,10 +412,12 @@ class ViewSettingsDialog extends UI5Element {
 	}
 
 	get initSortByItems() {
-		return this.sortItems.map(item => {
+		return this.sortItems.map((item, index) => {
 			return {
 				text: item.text,
 				selected: item.selected,
+				associatedItem: item,
+				index,
 			};
 		});
 	}
@@ -414,11 +426,11 @@ class ViewSettingsDialog extends UI5Element {
 		return [
 			{
 				text: this._ascendingLabel,
-				selected: true,
+				selected: !this.sortDescending,
 			},
 			{
 				text: this._descendingLabel,
-				selected: false,
+				selected: this.sortDescending,
 			},
 		];
 	}
@@ -550,11 +562,16 @@ class ViewSettingsDialog extends UI5Element {
 		const _currentSortOrderSelected = this._currentSettings.sortOrder.filter(item => item.selected)[0],
 			_currentSortBySelected = this._currentSettings.sortBy.filter(item => item.selected)[0],
 			sortOrder = _currentSortOrderSelected && _currentSortOrderSelected.text,
-			sortBy = _currentSortBySelected && _currentSortBySelected.text;
-
+			sortDescending = !this._currentSettings.sortOrder[0].selected,
+			sortBy = _currentSortBySelected && _currentSortBySelected.text,
+			sortByElementIndex = _currentSortBySelected && _currentSortBySelected.index,
+			initSortIByItem = this.initSortByItems.find((item, index) => index === sortByElementIndex),
+			sortByItem = initSortIByItem && initSortIByItem.associatedItem;
 		return {
 			sortOrder,
+			sortDescending,
 			sortBy,
+			sortByItem,
 			filters: this.selectedFilters,
 		};
 	}
@@ -630,12 +647,12 @@ class ViewSettingsDialog extends UI5Element {
 	 * Stores <code>Sort By</code> list as recently used control and its selected item in current state.
 	 */
 	 _onSortByChange(event) {
+		const selectedItemIndex = Number(event.detail.item.getAttribute("data-ui5-external-action-item-index"));
 		this._recentlyFocused = this._sortBy;
-		this._currentSettings.sortBy = this.initSortByItems.map(item => {
-			item.selected = item.text === event.detail.item.innerText;
+		this._currentSettings.sortBy = this.initSortByItems.map((item, index) => {
+			item.selected = index === selectedItemIndex;
 			return item;
 		});
-
 		// Invalidate
 		this._currentSettings = JSON.parse(JSON.stringify(this._currentSettings));
 	}

packages/fiori/test/pages/ViewSettingsDialog.html

@@ -88,11 +88,19 @@ <h3> ViewSettingsDialog</h3>
 		</ui5-filter-item>
 	</ui5-view-settings-dialog>
 
+	<br>
+	<br>
+	<ui5-input id="sortByItem" style="display: none"></ui5-input>
+	<ui5-input id="sortOrder" style="display: none"></ui5-input>
+
 	<script>
 		btnOpenDialog.addEventListener("click", function () {
 			vsd.show();
 		});
-		vsd.addEventListener("confirm", function(evt) {
+		vsd.addEventListener("ui5-confirm", function(evt) {
+			var sortByItemTagName = evt.detail.sortByItem && evt.detail.sortByItem.tagName;
+			sortByItem.value = `${sortByItemTagName} with text ${evt.detail.sortBy}`;
+			sortOrder.value = evt.detail.sortDescending;
 			alert("OK button clicked, returned info is: " + JSON.stringify(evt.detail));
 		});
 		btnOpenDialogSort.addEventListener("click", function () {

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

@@ -21,11 +21,13 @@ describe("ViewSettingsDialog general interaction", () => {
 	it("test ViewSettingsDialog - sortOrder confirm selected settings", async () => {
 		const btnOpenDialog = await browser.$("#btnOpenDialog");
 		const viewSettingsDialog = await browser.$("#vsd");
+		const input = await browser.$("#sortOrder")
 		await btnOpenDialog.click();
 
 		await (await viewSettingsDialog.shadow$("ui5-list").$$("ui5-li"))[1].click();
 
 		await viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-footer").$("ui5-button").click();
+		assert.equal(await input.getAttribute("value"), "true", "SortOrder in confirm event should have correct value true");
 
 		await btnOpenDialog.click();
 
@@ -38,13 +40,14 @@ describe("ViewSettingsDialog general interaction", () => {
 	it("test ViewSettingsDialog - sortBy confirm selected settings", async () => {
 		const btnOpenDialog = await browser.$("#btnOpenDialog");
 		const viewSettingsDialog = await browser.$("#vsd");
+		const input = await browser.$("#sortByItem");
 		await btnOpenDialog.click();
 
 		assert.notOk(await viewSettingsDialog.shadow$("[sort-by]").$("ui5-li[selected]").isExisting(), "sortBy should not have an option selected");
 
 		await viewSettingsDialog.shadow$("[sort-by]").$("ui5-li").click();
 		await viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-footer").$("ui5-button").click();
-
+		assert.equal(await input.getAttribute("value"), "UI5-SORT-ITEM with text Name", "sortByItem should return HTML element");
 		await btnOpenDialog.click();
 
 		const sortByLiText = await viewSettingsDialog.shadow$("[sort-by]").$("ui5-li").getText();
@@ -69,7 +72,7 @@ describe("ViewSettingsDialog general interaction", () => {
 		assert.include(sortBySelectedLiText, "Position", "sortBy should change selected option");
 
 		await browser.keys("Escape");
-	})
+	});
 
 	it("test ViewSettingsDialog cancel selected settings", async () => {
 		const btnOpenDialog = await browser.$("#btnOpenDialog");
@@ -93,7 +96,7 @@ describe("ViewSettingsDialog general interaction", () => {
 		assert.include(selectedLiText, "Descending", "sortOrder should not have a change in the selected option");
 
 		await browser.keys("Escape");
-	})
+	});
 
 	it("test ViewSettingsDialog reset settings", async () => {
 		const btnOpenDialog = await browser.$("#btnOpenDialog");