Skip to content

Commit 89e07b1

Browse files
fifoosidfifoosid
committed
feat(ui5-view-settings-dialog): introduce filter section (#3616)
1 parent 983af6a commit 89e07b1

12 files changed

+693
-66
lines changed

‎packages/fiori/src/FilterItem.hbs

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{{>include "../../main/src/StandardListItem.hbs"}}
2+
3+
{{#*inline "listItemContent"}}
4+
<span part="title" class="ui5-li-title">{{text}}</span>
5+
{{#if additionalText}}
6+
<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
7+
{{/if}}
8+
{{/inline}}

‎packages/fiori/src/FilterItem.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
2+
import ListItem from "@ui5/webcomponents/dist/ListItem.js";
3+
import FilterItemTemplate from "./generated/templates/FilterItemTemplate.lit.js";
4+
5+
import FilterItemCSS from "./generated/themes/FilterItem.css.js";
6+
7+
/**
8+
* @public
9+
*/
10+
const metadata = {
11+
tag: "ui5-filter-item",
12+
managedSlots: true,
13+
properties: /** @lends sap.ui.webcomponents.fiori.FilterItem.prototype */ {
14+
/**
15+
* Defines the text of the component.
16+
*
17+
* @type {String}
18+
* @defaultvalue ""
19+
* @public
20+
*/
21+
text: {
22+
type: String,
23+
},
24+
25+
/**
26+
* Defines the additional text of the component.
27+
*
28+
* @type {String}
29+
* @defaultvalue ""
30+
* @private
31+
*/
32+
additionalText: {
33+
type: String,
34+
},
35+
},
36+
slots: /** @lends sap.ui.webcomponents.fiori.FilterItem.prototype */ {
37+
/**
38+
* Defines the <code>values</code> list.
39+
* @type {ui5-filter-item-option}
40+
* @slot values
41+
* @public
42+
*/
43+
values: {
44+
type: HTMLElement,
45+
},
46+
},
47+
events: /** @lends sap.ui.webcomponents.fiori.FilterItem.prototype */ {
48+
//
49+
},
50+
};
51+
52+
/**
53+
* @class
54+
*
55+
* <h3 class="comment-api-title">Overview</h3>
56+
*
57+
*
58+
* <h3>Usage</h3>
59+
*
60+
* For the <code>ui5-filter-item</code>
61+
* <h3>ES6 Module Import</h3>
62+
*
63+
* <code>import @ui5/webcomponents-fiori/dist/FilterItem.js";</code>
64+
*
65+
* @constructor
66+
* @author SAP SE
67+
* @alias sap.ui.webcomponents.fiori.FilterItem
68+
* @extends ListItem
69+
* @since 1.0.0-rc.16
70+
* @tagname ui5-filter-item
71+
* @public
72+
*/
73+
class FilterItem extends ListItem {
74+
static get metadata() {
75+
return metadata;
76+
}
77+
78+
static get render() {
79+
return litRender;
80+
}
81+
82+
static get styles() {
83+
return [ListItem.styles, FilterItemCSS];
84+
}
85+
86+
static get template() {
87+
return FilterItemTemplate;
88+
}
89+
}
90+
91+
FilterItem.define();
92+
93+
export default FilterItem;

‎packages/fiori/src/FilterItemOption.js

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2+
3+
/**
4+
* @public
5+
*/
6+
const metadata = {
7+
tag: "ui5-filter-item-option",
8+
properties: /** @lends sap.ui.webcomponents.fiori.FilterItemOption.prototype */ {
9+
/**
10+
* Defines the text of the component.
11+
*
12+
* @public
13+
* @type {String}
14+
* @defaultvalue ""
15+
*/
16+
text: {
17+
type: String,
18+
},
19+
20+
/**
21+
* Defines whether the option is selected
22+
*
23+
* @public
24+
* @type {Boolean}
25+
* @defaultvalue false
26+
*/
27+
selected: {
28+
type: Boolean,
29+
},
30+
},
31+
slots: /** @lends sap.ui.webcomponents.fiori.FilterItemOption.prototype */ {
32+
//
33+
},
34+
events: /** @lends sap.ui.webcomponents.fiori.FilterItemOption.prototype */ {
35+
//
36+
},
37+
};
38+
39+
/**
40+
* @class
41+
*
42+
* <h3 class="comment-api-title">Overview</h3>
43+
*
44+
*
45+
* <h3>Usage</h3>
46+
*
47+
* For the <code>ui5-filter-item-option</code>
48+
* <h3>ES6 Module Import</h3>
49+
*
50+
* <code>import @ui5/webcomponents-fiori/dist/FilterItemOption.js";</code>
51+
*
52+
* @constructor
53+
* @author SAP SE
54+
* @alias sap.ui.webcomponents.fiori.FilterItemOption
55+
* @extends UI5Element
56+
* @since 1.0.0-rc.16
57+
* @tagname ui5-filter-item-option
58+
* @public
59+
*/
60+
class FilterItemOption extends UI5Element {
61+
static get metadata() {
62+
return metadata;
63+
}
64+
}
65+
66+
FilterItemOption.define();
67+
68+
export default FilterItemOption;

‎packages/fiori/src/SortItem.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2+
3+
/**
4+
* @public
5+
*/
6+
const metadata = {
7+
tag: "ui5-sort-item",
8+
properties: /** @lends sap.ui.webcomponents.fiori.SortItem.prototype */ {
9+
/**
10+
* Defines the text of the component.
11+
*
12+
* @type {String}
13+
* @defaultvalue ""
14+
* @public
15+
*/
16+
text: {
17+
type: String,
18+
},
19+
20+
/**
21+
* Defines if the component is selected.
22+
* @type {Boolean}
23+
* @defaultvalue false
24+
* @public
25+
*/
26+
selected: {
27+
type: Boolean,
28+
},
29+
},
30+
slots: /** @lends sap.ui.webcomponents.fiori.SortItem.prototype */ {
31+
//
32+
},
33+
events: /** @lends sap.ui.webcomponents.fiori.SortItem.prototype */ {
34+
//
35+
},
36+
};
37+
38+
/**
39+
* @class
40+
*
41+
* <h3 class="comment-api-title">Overview</h3>
42+
*
43+
*
44+
* <h3>Usage</h3>
45+
*
46+
* For the <code>ui5-sort-item</code>
47+
* <h3>ES6 Module Import</h3>
48+
*
49+
* <code>import @ui5/webcomponents-fiori/dist/SortItem.js";</code>
50+
*
51+
* @constructor
52+
* @author SAP SE
53+
* @alias sap.ui.webcomponents.fiori.SortItem
54+
* @extends UI5Element
55+
* @since 1.0.0-rc.16
56+
* @tagname ui5-sort-item
57+
* @public
58+
*/
59+
class SortItem extends UI5Element {
60+
static get metadata() {
61+
return metadata;
62+
}
63+
}
64+
65+
SortItem.define();
66+
67+
export default SortItem;

‎packages/fiori/src/ViewSettingsDialog.hbs

Lines changed: 63 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,35 @@
77

88
<div slot="header" class="ui5-vsd-header">
99
<ui5-bar>
10-
<ui5-label
11-
slot="startContent"
12-
class="ui5-vsd-title">{{_dialogTitle}}</ui5-label>
10+
<div slot="startContent" class="ui5-vsd-start">
11+
{{#if showBackButton}}
12+
<ui5-button
13+
design="Transparent"
14+
icon="nav-back"
15+
class="ui5-vsd-back-button"
16+
@click="{{_navigateToFilters}}"
17+
></ui5-button>
18+
<ui5-label>{{_filterByTitle}}</ui5-label>
19+
{{else}}
20+
<div class="ui5-vsd-bar-title">
21+
<ui5-label class="ui5-vsd-title">{{_dialogTitle}}</ui5-label>
22+
<ui5-segmented-button @ui5-selection-change="{{_handleModeChange}}">
23+
<ui5-segmented-button-item
24+
?pressed="{{isModeSort}}"
25+
?focused="{{isModeSort}}"
26+
icon="sort"
27+
mode="Sort"
28+
></ui5-segmented-button-item>
29+
<ui5-segmented-button-item
30+
?pressed="{{isModeFilter}}"
31+
?focused="{{isModeFilter}}"
32+
icon="filter"
33+
mode="Filter"
34+
></ui5-segmented-button-item>
35+
</ui5-segmented-button>
36+
</div>
37+
{{/if}}
38+
</div>
1339
<ui5-button
1440
slot="endContent"
1541
design="Transparent"
@@ -20,27 +46,52 @@
2046
</div>
2147

2248
<div class="ui5-vsd-content">
49+
{{#if isModeSort}}
2350
<div class="ui5-vsd-sort">
2451
<ui5-list
2552
mode="SingleSelectBegin"
26-
@ui5-selection-change="{{_onSortOrderChange}}"
53+
@ui5-item-click="{{_onSortOrderChange}}"
2754
sort-order>
2855
<ui5-li-groupheader>{{_sortOrderLabel}}</ui5-li-groupheader>
29-
<ui5-li
30-
?selected="{{_sortAscending}}"
31-
>{{_ascendingLabel}}</ui5-li>
32-
<ui5-li
33-
?selected="{{sortDescending}}"
34-
>{{_descendingLabel}}</ui5-li>
56+
{{#each _currentSettings.sortOrder}}
57+
<ui5-li
58+
?selected="{{this.selected}}"
59+
>{{this.text}}</ui5-li>
60+
{{/each}}
3561
</ui5-list>
3662
<ui5-list
3763
mode="SingleSelectBegin"
38-
@ui5-selection-change={{_onSortByChange}}
64+
@ui5-item-click={{_onSortByChange}}
3965
sort-by>
4066
<ui5-li-groupheader>{{_sortByLabel}}</ui5-li-groupheader>
41-
<slot name="sortItems"></slot>
67+
{{#each _currentSettings.sortBy}}
68+
<ui5-li ?selected="{{this.selected}}">{{this.text}}</ui5-li>
69+
{{/each}}
4270
</ui5-list>
4371
</div>
72+
{{/if}}
73+
74+
{{#if isModeFilter}}
75+
{{#if _filterStepTwo}}
76+
<ui5-list
77+
mode="MultiSelect"
78+
@ui5-item-click="{{_handleFilterValueItemClick}}"
79+
>
80+
{{#each _currentSettings.filters}}
81+
{{#if this.selected}}
82+
{{#each this.filterOptions}}
83+
<ui5-li ?selected={{this.selected}}>{{this.text}}</ui5-li>
84+
{{/each}}
85+
{{/if}}
86+
{{/each}}
87+
</ui5-list>
88+
{{else}}
89+
<ui5-list @ui5-item-click="{{_changeCurrentFilter}}">
90+
<ui5-li-groupheader>{{_filterByLabel}}</ui5-li-groupheader>
91+
<slot name="filterItems"></slot>
92+
</ui5-list>
93+
{{/if}}
94+
{{/if}}
4495
</div>
4596

4697
<div slot="footer" class="ui5-vsd-footer">

0 commit comments

Comments
 (0)