Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-view-settings-dialog): improve the options returned by the confurn event #4772

Merged
merged 10 commits into from
Feb 25, 2022
Merged

fix(ui5-view-settings-dialog): improve the options returned by the confurn event #4772

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8f1022c
now in the confurn event the selected element is provided
Todor-ads Feb 17, 2022
630434d
add test
Todor-ads Feb 18, 2022
1c402b5
fixed comments
Todor-ads Feb 21, 2022
2aeb0f2
fixed comments
Todor-ads Feb 21, 2022
8516301
fixed comments
Todor-ads Feb 22, 2022
45ba71b
fixed comments
Todor-ads Feb 24, 2022
09ab9c5
Merge branch 'master' into vsd_add_more_return_optiom
ilhan007 Feb 25, 2022
e71f371
Update ViewSettingsDialog.html
ilhan007 Feb 25, 2022
ed452cd
Update ViewSettingsDialog.html
ilhan007 Feb 25, 2022
327e533
fixed comments
Todor-ads Feb 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/fiori/src/ViewSettingsDialog.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ?selected="{{this.selected}}" .associatedItem="{{this.item2}}">{{this.text}}</ui5-li>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is "item2" an existing field, somehow did not find it in the change?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, I forgot to delete it

{{/each}}
</ui5-list>
</div>
Expand Down
12 changes: 8 additions & 4 deletions packages/fiori/src/ViewSettingsDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,6 +404,7 @@ class ViewSettingsDialog extends UI5Element {
return {
text: item.text,
selected: item.selected,
associatedItem: item,
};
});
}
Expand All @@ -412,11 +413,11 @@ class ViewSettingsDialog extends UI5Element {
return [
{
text: this._ascendingLabel,
selected: true,
selected: !this.sortDescending,
},
{
text: this._descendingLabel,
selected: false,
selected: this.sortDescending,
},
];
}
Expand Down Expand Up @@ -548,11 +549,14 @@ 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,
sortByItem = sortBy && this.initSortByItems.filter(item => item.text === sortBy)[0].associatedItem;
Copy link
Member

@ilhan007 ilhan007 Feb 24, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to make sure I won't overlook something. What will happen if the app developer uses two sort items with the same name (although does not make sense).
Then would not this always return the first:

this.initSortByItems.filter(item => item.text === sortBy)[0].associatedItem;

Discovering the associated item by filtering the sort items by text does not seem robust.

Check it out and if it fails as described above, please create a separate issue, so that this is improved in future or you can try fixing it here.

One way or another, you can see a solution pattern in the Shellbar.js/ShellBar.hbs where refItemId is set to the internally rendered items (ui5-li), this refItemId maps to the external element (in your case ui5-sort-item). Then to get the external element you can:

const sortByItem = this.initSortByItems.find(item => {
				return item._id === refItemId;
	});

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO using the same named Sort Items is not a good idea in general...

return {
sortOrder,
sortDescending,
sortBy,
sortByItem,
filters: this.selectedFilters,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'confirm' and 'cancel' events 'detail' description don't inlcude newly added 'sortDescending' and 'sortByItem' properties, please fix this!

};
}
Expand Down
11 changes: 10 additions & 1 deletion packages/fiori/test/pages/ViewSettingsDialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,20 @@ <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) {
const sortByItemTagName = evt.detail.sortByItem && evt.detail.sortByItem.tagName;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's stick to es5 for the moment as we do everywhere in the test pages
const -> var

I think const isSortDescending is not needed, you can just
sortOrder.value = evt.detail.sortDescending;

const isSortDescending = evt.detail.sortDescending;
sortByItem.value = `${sortByItemTagName} with text ${evt.detail.sortBy}`;
sortOrder.value = isSortDescending;
alert("OK button clicked, returned info is: " + JSON.stringify(evt.detail));
});
btnOpenDialogSort.addEventListener("click", function () {
Expand Down
9 changes: 6 additions & 3 deletions packages/fiori/test/specs/ViewSettingsDialog.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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();
Expand All @@ -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");
Expand All @@ -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");
Expand Down