Skip to content

Commit

Permalink
fix(ui5-view-settings-dialog): implement single page functionality (#…
Browse files Browse the repository at this point in the history 
…4419)
  • Loading branch information
@tsanislavgatev
tsanislavgatev authored Jan 19, 2022
1 parent ed87ba5 commit 572a323
Show file tree
Hide file tree
Showing 4 changed files with 156 additions and 57 deletions.
118 changes: 62 additions & 56 deletions packages/fiori/src/ViewSettingsDialog.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,22 @@
{{else}}
<div class="ui5-vsd-bar-title">
<ui5-label class="ui5-vsd-title">{{_dialogTitle}}</ui5-label>
<ui5-segmented-button @ui5-selection-change="{{_handleModeChange}}">
<ui5-segmented-button-item
?pressed="{{isModeSort}}"
?focused="{{isModeSort}}"
icon="sort"
mode="Sort"
></ui5-segmented-button-item>
<ui5-segmented-button-item
?pressed="{{isModeFilter}}"
?focused="{{isModeFilter}}"
icon="filter"
mode="Filter"
></ui5-segmented-button-item>
</ui5-segmented-button>
{{#if hasPagination}}
<ui5-segmented-button @ui5-selection-change="{{_handleModeChange}}">
<ui5-segmented-button-item
?pressed="{{isModeSort}}"
?focused="{{isModeSort}}"
icon="sort"
mode="Sort"
></ui5-segmented-button-item>
<ui5-segmented-button-item
?pressed="{{isModeFilter}}"
?focused="{{isModeFilter}}"
icon="filter"
mode="Filter"
></ui5-segmented-button-item>
</ui5-segmented-button>
{{/if}}
</div>
{{/if}}
</div>
Expand All @@ -46,50 +48,54 @@
</div>

<div class="ui5-vsd-content">
{{#if isModeSort}}
<div class="ui5-vsd-sort">
<ui5-list
mode="SingleSelectBegin"
@ui5-item-click="{{_onSortOrderChange}}"
sort-order>
<ui5-li-groupheader>{{_sortOrderLabel}}</ui5-li-groupheader>
{{#each _currentSettings.sortOrder}}
<ui5-li
?selected="{{this.selected}}"
>{{this.text}}</ui5-li>
{{/each}}
</ui5-list>
<ui5-list
mode="SingleSelectBegin"
@ui5-item-click={{_onSortByChange}}
sort-by>
<ui5-li-groupheader>{{_sortByLabel}}</ui5-li-groupheader>
{{#each _currentSettings.sortBy}}
<ui5-li ?selected="{{this.selected}}">{{this.text}}</ui5-li>
{{/each}}
</ui5-list>
</div>
{{#if shouldBuildSort}}
{{#if isModeSort}}
<div class="ui5-vsd-sort">
<ui5-list
mode="SingleSelectBegin"
@ui5-item-click="{{_onSortOrderChange}}"
sort-order>
<ui5-li-groupheader>{{_sortOrderLabel}}</ui5-li-groupheader>
{{#each _currentSettings.sortOrder}}
<ui5-li
?selected="{{this.selected}}"
>{{this.text}}</ui5-li>
{{/each}}
</ui5-list>
<ui5-list
mode="SingleSelectBegin"
@ui5-item-click={{_onSortByChange}}
sort-by>
<ui5-li-groupheader>{{_sortByLabel}}</ui5-li-groupheader>
{{#each _currentSettings.sortBy}}
<ui5-li ?selected="{{this.selected}}">{{this.text}}</ui5-li>
{{/each}}
</ui5-list>
</div>
{{/if}}
{{/if}}

{{#if isModeFilter}}
{{#if _filterStepTwo}}
<ui5-list
mode="MultiSelect"
@ui5-item-click="{{_handleFilterValueItemClick}}"
>
{{#each _currentSettings.filters}}
{{#if this.selected}}
{{#each this.filterOptions}}
<ui5-li ?selected={{this.selected}}>{{this.text}}</ui5-li>
{{/each}}
{{/if}}
{{/each}}
</ui5-list>
{{else}}
<ui5-list @ui5-item-click="{{_changeCurrentFilter}}">
<ui5-li-groupheader>{{_filterByLabel}}</ui5-li-groupheader>
<slot name="filterItems"></slot>
</ui5-list>
{{#if shouldBuildFilter}}
{{#if isModeFilter}}
{{#if _filterStepTwo}}
<ui5-list
mode="MultiSelect"
@ui5-item-click="{{_handleFilterValueItemClick}}"
>
{{#each _currentSettings.filters}}
{{#if this.selected}}
{{#each this.filterOptions}}
<ui5-li ?selected={{this.selected}}>{{this.text}}</ui5-li>
{{/each}}
{{/if}}
{{/each}}
</ui5-list>
{{else}}
<ui5-list @ui5-item-click="{{_changeCurrentFilter}}">
<ui5-li-groupheader>{{_filterByLabel}}</ui5-li-groupheader>
<slot name="filterItems"></slot>
</ui5-list>
{{/if}}
{{/if}}
{{/if}}
</div>
Expand Down
18 changes: 17 additions & 1 deletion packages/fiori/src/ViewSettingsDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,10 @@ class ViewSettingsDialog extends UI5Element {
if (this._currentSettings.filters && this._currentSettings.filters.length) {
this._setAdditionalTexts();
}

if (!this.shouldBuildSort && this.shouldBuildFilter) {
this._currentMode = ViewSettingsDialogMode.Filter;
}
}

_setAdditionalTexts() {
Expand Down Expand Up @@ -279,6 +283,18 @@ class ViewSettingsDialog extends UI5Element {
return "";
}

get shouldBuildSort() {
return !!this.sortItems.length;
}

get shouldBuildFilter() {
return !!this.filterItems.length;
}

get hasPagination() {
return this.shouldBuildSort && this.shouldBuildFilter;
}

get _filterByTitle() {
return `${ViewSettingsDialog.i18nBundle.getText(VSD_FILTER_BY)}: ${this._selectedFilter.text}`;
}
Expand Down Expand Up @@ -494,7 +510,7 @@ class ViewSettingsDialog extends UI5Element {
* Sets focus on recently used control within the dialog.
*/
_focusRecentlyUsedControl() {
if (!Object.keys(this._recentlyFocused).length) {
if (!this._recentlyFocused || !Object.keys(this._recentlyFocused).length) {
return;
}
const recentlyFocusedSelectedItems = this._recentlyFocused.getSelectedItems(),
Expand Down
45 changes: 45 additions & 0 deletions packages/fiori/test/pages/ViewSettingsDialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@

<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>
<br>
<br>
<ui5-view-settings-dialog id="vsd">
Expand Down Expand Up @@ -55,13 +57,56 @@ <h3> ViewSettingsDialog</h3>
</ui5-filter-item>
</ui5-view-settings-dialog>

<ui5-view-settings-dialog id="vsdSort">

<ui5-sort-item slot="sortItems" text="Name"></ui5-sort-item>
<ui5-sort-item slot="sortItems" text="Position"></ui5-sort-item>
<ui5-sort-item slot="sortItems" text="Company"></ui5-sort-item>
<ui5-sort-item slot="sortItems" text="Department"></ui5-sort-item>
</ui5-view-settings-dialog>

<ui5-view-settings-dialog id="vsdFilter">
<ui5-filter-item slot="filterItems" text="Filter 1">
<ui5-filter-item-option slot="values" text="Some filter 1"></ui5-filter-item-option>
<ui5-filter-item-option slot="values" text="Some filter 2"></ui5-filter-item-option>
<ui5-filter-item-option slot="values" text="Some filter 3"></ui5-filter-item-option>
</ui5-filter-item>
<ui5-filter-item slot="filterItems" text="Filter 2">
<ui5-filter-item-option slot="values" text="Some filter 4"></ui5-filter-item-option>
<ui5-filter-item-option slot="values" text="Some filter 5"></ui5-filter-item-option>
<ui5-filter-item-option slot="values" text="Some filter 6"></ui5-filter-item-option>
</ui5-filter-item>
<ui5-filter-item slot="filterItems" text="Filter 3">
<ui5-filter-item-option slot="values" text="Some filter 7"></ui5-filter-item-option>
<ui5-filter-item-option slot="values" text="Some filter 8"></ui5-filter-item-option>
<ui5-filter-item-option slot="values" text="Some filter 9"></ui5-filter-item-option>
</ui5-filter-item>
<ui5-filter-item slot="filterItems" text="Filter 4">
<ui5-filter-item-option slot="values" text="Some filter 10"></ui5-filter-item-option>
<ui5-filter-item-option slot="values" text="Some filter 11"></ui5-filter-item-option>
<ui5-filter-item-option slot="values" text="Some filter 12"></ui5-filter-item-option>
</ui5-filter-item>
</ui5-view-settings-dialog>

<script>
btnOpenDialog.addEventListener("click", function () {
vsd.show();
});
vsd.addEventListener("confirm", function(evt) {
alert("OK button clicked, returned info is: " + JSON.stringify(evt.detail));
});
btnOpenDialogSort.addEventListener("click", function () {
vsdSort.show();
});
vsdSort.addEventListener("confirm", function(evt) {
alert("OK button clicked, returned info is: " + JSON.stringify(evt.detail));
});
btnOpenDialogFilter.addEventListener("click", function () {
vsdFilter.show();
});
vsdFilter.addEventListener("confirm", function(evt) {
alert("OK button clicked, returned info is: " + JSON.stringify(evt.detail));
});
</script>

</body>
Expand Down
32 changes: 32 additions & 0 deletions packages/fiori/test/specs/ViewSettingsDialog.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,4 +109,36 @@ describe("ViewSettingsDialog general interaction", () => {
await (await viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-footer").$$("ui5-button"))[1].click();
});

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

const vsdTitle = await viewSettingsDialog.shadow$("ui5-bar").$(".ui5-vsd-title").getText();
assert.strictEqual(vsdTitle, "Filter By", "Only filters are presented, when there are no sort items");

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

it("ViewSettingsDialog is in sort only mode", async () => {
const btnOpenDialog = await browser.$("#btnOpenDialogSort");
const viewSettingsDialog = await browser.$("#vsdSort");
await btnOpenDialog.click();

const vsdTitle = await viewSettingsDialog.shadow$("ui5-bar").$(".ui5-vsd-title").getText();
assert.strictEqual(vsdTitle, "View Settings", "Only sort options are presented, when there are no filters");

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

it("ViewSettingsDialog is in single page mode and the segmented button is not built", async () => {
const btnOpenDialog = await browser.$("#btnOpenDialogSort");
const viewSettingsDialog = await browser.$("#vsdSort");
await btnOpenDialog.click();

const vsdSegmentedButton = await viewSettingsDialog.shadow$("ui5-bar").$("ui5-segmented-button");
assert.strictEqual(await vsdSegmentedButton.isDisplayed(), false, "Segmented button is not built when there is only set of items");

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

0 comments on commit 572a323

Please sign in to comment.