Skip to content

Commit

Permalink
feat(ui5-view-settings-dialog): Implement behaviour for external sett…
Browse files Browse the repository at this point in the history 
…ing of confirmed settings (#5222)

fixes: #4896
  • Loading branch information
@tsanislavgatev
tsanislavgatev authored May 30, 2022
1 parent 4531582 commit 7fbb235
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 0 deletions.
64 changes: 64 additions & 0 deletions packages/fiori/src/ViewSettingsDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,14 @@ const metadata = {
filters: { type: Array },
},
},

/**
* Fired before the component is opened. <b>This event does not bubble.</b>
*
* @public
* @event sap.ui.webcomponents.fiori.ViewSettingsDialog#before-open
*/
"before-open": {},
},
};

Expand Down Expand Up @@ -488,6 +496,7 @@ class ViewSettingsDialog extends UI5Element {
this._restoreSettings(this._confirmedSettings);
}

this.fireEvent("before-open", {}, true, false);
this._dialog.show(true);

this._dialog.querySelector("[ui5-list]").focusFirstItem();
Expand Down Expand Up @@ -667,6 +676,61 @@ class ViewSettingsDialog extends UI5Element {
// 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 need to set its initial settings.
* The <code>ui5-view-settings-dialog</code> throws an event called "before-open", this can be used as trigger point.
* The object should have the following format:
* <code>{
* { "sortOrder" : "Ascending", "sortBy" : "Name", "filters" : [{"Filter 1": ["Some filter 1", "Some filter 2"]}, {"Filter 2": ["Some filter 4"]}]}
* }</code>
* @param {string} settings A value to be set as predefined settings.
* @public
*/
setConfirmedSettings(settings) {

This comment has been minimized.

Sign in to view

Copy link
@ilhan007

ilhan007 May 30, 2022 •
edited
Loading

Member

Did you also explore the option to expose a property from type Object.
We had similar request for the FlexibleColumnLayout by SFSF to provide custom layout configuration and we introduced the sap-restricted

_layoutsConfiguration: {
			type: Object,
			defaultValue: undefined,
		},

Perhaps similar approach would also work for the ViewSettingsDialog, but there might facts that I am not aware of. Is it easier to sync the settings via the method?

As this is not yet released, it's worth double check on the API:

  • method or property
  • param of type String or param of type Object

This comment has been minimized.

Sign in to view

Copy link
@tsanislavgatev

tsanislavgatev May 30, 2022 •
edited
Loading

Author Contributor

We've checked the option with a propety, but our goal was to have control, wether the dialog is created and also closed. This custom logic might have been moved to a setter, but this also would have been complex. Also the property itself is kept in different format than the format we expect here. Here we ask for format close to the one we throw the event in, and the Object that we actually keep is far more complex, as it contains every sort option, sort order and filters + subfilters. This would mean, the logic for keepig the correct format, order and data would be on application developer side, when the setter is used. So the decision was made, to use a method which would allow the app dev to set the value, in easy to use format, and with restricted possibilities. If you have other ideas, we can always check different approaches.
if (settings && this._dialog && !this._dialog.isOpen()) {
const tempSettings = JSON.parse(JSON.stringify(this._confirmedSettings));
if (settings.sortOrder) {
for (let i = 0; i < tempSettings.sortOrder.length; i++) {
if (tempSettings.sortOrder[i].text === settings.sortOrder) {
tempSettings.sortOrder[i].selected = true;
} else {
tempSettings.sortOrder[i].selected = false;
}
}
}

if (settings.sortBy) {
for (let i = 0; i < tempSettings.sortBy.length; i++) {
if (tempSettings.sortBy[i].text === settings.sortBy) {
tempSettings.sortBy[i].selected = true;
} else {
tempSettings.sortBy[i].selected = false;
}
}
}

if (settings.filters) {
const inputFilters = {};
for (let i = 0; i < settings.filters.length; i++) {
inputFilters[Object.keys(settings.filters[i])[0]] = settings.filters[i][Object.keys(settings.filters[i])[0]];
}

for (let i = 0; i < tempSettings.filters.length; i++) {
for (let j = 0; j < tempSettings.filters[i].filterOptions.length; j++) {
if (inputFilters[tempSettings.filters[i].text] && inputFilters[tempSettings.filters[i].text].indexOf(tempSettings.filters[i].filterOptions[j].text) > -1) {
tempSettings.filters[i].filterOptions[j].selected = true;
} else {
tempSettings.filters[i].filterOptions[j].selected = false;
}
}
}
}

this._confirmedSettings = JSON.parse(JSON.stringify(tempSettings));
}
}
}

ViewSettingsDialog.define();
Expand Down
6 changes: 6 additions & 0 deletions packages/fiori/test/pages/ViewSettingsDialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ <h3> ViewSettingsDialog</h3>
<ui5-button id="btnOpenDialog">Show ViewSettingsDialog</ui5-button>
<ui5-button id="btnOpenDialogSort">Show Sort Only ViewSettingsDialog</ui5-button>
<ui5-button id="btnOpenDialogFilter">Show Filter Only ViewSettingsDialog</ui5-button>
<ui5-button id="btnChangeSettings">Set Settings to the first VSD</ui5-button>
<ui5-textarea id="vsdSettings" placeholder="Basic text area" value='{"sortOrder":"Ascending","sortBy":"Name","filters":[{"Filter 3":["Some filter 7"]}, {"Filter 1":["Some filter 1", "Some filter 2"]}]}'>
</ui5-textarea>
<br>
<br>
<ui5-view-settings-dialog id="vsd">
Expand Down Expand Up @@ -97,6 +100,9 @@ <h3> ViewSettingsDialog</h3>
btnOpenDialog.addEventListener("click", function () {
vsd.show();
});
btnChangeSettings.addEventListener("click", function () {
vsd.setConfirmedSettings(JSON.parse(vsdSettings.value));
});
vsd.addEventListener("ui5-confirm", function(evt) {
var sortByItemTagName = evt.detail.sortByItem && evt.detail.sortByItem.tagName;
sortByItem.value = `${sortByItemTagName} with text ${evt.detail.sortBy}`;
Expand Down
15 changes: 15 additions & 0 deletions packages/fiori/test/specs/ViewSettingsDialog.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,21 @@ describe("ViewSettingsDialog general interaction", () => {
await (await viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-footer").$$("ui5-button"))[1].click();
});

it("test ViewSettingsDialog set settings", async () => {
const btnOpenDialog = await browser.$("#btnOpenDialog");
const btnSetSettings = await browser.$("#btnChangeSettings");
const viewSettingsDialog = await browser.$("#vsd");
await btnSetSettings.click();
await btnOpenDialog.click();

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");

await browser.keys("Escape");
});

it("ViewSettingsDialog is in filter only mode", async () => {
const btnOpenDialog = await browser.$("#btnOpenDialogFilter");
const viewSettingsDialog = await browser.$("#vsdFilter");
Expand Down

0 comments on commit 7fbb235

Please sign in to comment.