feat(ui5-view-settings-dialog): introduce filter section (#3616)

packages/fiori/src/FilterItem.hbs

@@ -0,0 +1,8 @@
+{{>include "../../main/src/StandardListItem.hbs"}}
+
+{{#*inline "listItemContent"}}
+    <span part="title" class="ui5-li-title">{{text}}</span>
+    {{#if additionalText}}
+        <span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+    {{/if}}
+{{/inline}}

packages/fiori/src/FilterItem.js

@@ -0,0 +1,93 @@
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ListItem from "@ui5/webcomponents/dist/ListItem.js";
+import FilterItemTemplate from "./generated/templates/FilterItemTemplate.lit.js";
+
+import FilterItemCSS from "./generated/themes/FilterItem.css.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-filter-item",
+	managedSlots: true,
+	properties: /** @lends sap.ui.webcomponents.fiori.FilterItem.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+
+		/**
+		 * Defines the additional text of the component.
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @private
+		 */
+		additionalText: {
+			type: String,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.fiori.FilterItem.prototype */ {
+		/**
+		 * Defines the <code>values</code> list.
+		 * @type {ui5-filter-item-option}
+		 * @slot values
+		 * @public
+		 */
+		values: {
+			type: HTMLElement,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.fiori.FilterItem.prototype */ {
+		//
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-filter-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents-fiori/dist/FilterItem.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.FilterItem
+ * @extends ListItem
+ * @since 1.0.0-rc.16
+ * @tagname ui5-filter-item
+ * @public
+ */
+class FilterItem extends ListItem {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return [ListItem.styles, FilterItemCSS];
+	}
+
+	static get template() {
+		return FilterItemTemplate;
+	}
+}
+
+FilterItem.define();
+
+export default FilterItem;

packages/fiori/src/FilterItemOption.js

@@ -0,0 +1,68 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-filter-item-option",
+	properties: /** @lends sap.ui.webcomponents.fiori.FilterItemOption.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 *
+		 * @public
+		 * @type {String}
+		 * @defaultvalue ""
+		 */
+		text: {
+			type: String,
+		},
+
+		/**
+		 * Defines whether the option is selected
+		 *
+		 * @public
+		 * @type {Boolean}
+		 * @defaultvalue false
+		 */
+		selected: {
+			type: Boolean,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.fiori.FilterItemOption.prototype */ {
+		//
+	},
+	events: /** @lends sap.ui.webcomponents.fiori.FilterItemOption.prototype */ {
+		//
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-filter-item-option</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents-fiori/dist/FilterItemOption.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.FilterItemOption
+ * @extends UI5Element
+ * @since 1.0.0-rc.16
+ * @tagname ui5-filter-item-option
+ * @public
+ */
+class FilterItemOption extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+}
+
+FilterItemOption.define();
+
+export default FilterItemOption;

packages/fiori/src/SortItem.js

@@ -0,0 +1,67 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-sort-item",
+	properties: /** @lends sap.ui.webcomponents.fiori.SortItem.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+
+		/**
+		 * Defines if the component is selected.
+		 * @type {Boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		selected: {
+			type: Boolean,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.fiori.SortItem.prototype */ {
+		//
+	},
+	events: /** @lends sap.ui.webcomponents.fiori.SortItem.prototype */ {
+		//
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-sort-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents-fiori/dist/SortItem.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.fiori.SortItem
+ * @extends UI5Element
+ * @since 1.0.0-rc.16
+ * @tagname ui5-sort-item
+ * @public
+ */
+class SortItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+}
+
+SortItem.define();
+
+export default SortItem;

packages/fiori/src/ViewSettingsDialog.hbs

@@ -7,9 +7,35 @@
 
 	<div slot="header" class="ui5-vsd-header">
 		<ui5-bar>
-			<ui5-label
-				slot="startContent"
-				class="ui5-vsd-title">{{_dialogTitle}}</ui5-label>
+			<div slot="startContent" class="ui5-vsd-start">
+				{{#if showBackButton}}
+					<ui5-button
+						design="Transparent"
+						icon="nav-back"
+						class="ui5-vsd-back-button"
+						@click="{{_navigateToFilters}}"
+					></ui5-button>
+					<ui5-label>{{_filterByTitle}}</ui5-label>
+				{{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>
+					</div>
+				{{/if}}
+			</div>
 			<ui5-button
 				slot="endContent"
 				design="Transparent"
@@ -20,27 +46,52 @@
 	</div>
 
 	<div class="ui5-vsd-content">
+		{{#if isModeSort}}
 		<div class="ui5-vsd-sort">
 			<ui5-list
 				mode="SingleSelectBegin"
-				@ui5-selection-change="{{_onSortOrderChange}}"
+				@ui5-item-click="{{_onSortOrderChange}}"
 				sort-order>
 				<ui5-li-groupheader>{{_sortOrderLabel}}</ui5-li-groupheader>
-				<ui5-li
-					?selected="{{_sortAscending}}"
-				>{{_ascendingLabel}}</ui5-li>
-				<ui5-li
-					?selected="{{sortDescending}}"
-				>{{_descendingLabel}}</ui5-li>
+				{{#each _currentSettings.sortOrder}}
+					<ui5-li
+						?selected="{{this.selected}}"
+					>{{this.text}}</ui5-li>
+				{{/each}}
 			</ui5-list>
 			<ui5-list
 				mode="SingleSelectBegin"
-				@ui5-selection-change={{_onSortByChange}}
+				@ui5-item-click={{_onSortByChange}}
 				sort-by>
 				<ui5-li-groupheader>{{_sortByLabel}}</ui5-li-groupheader>
-				<slot name="sortItems"></slot>
+				{{#each _currentSettings.sortBy}}
+					<ui5-li ?selected="{{this.selected}}">{{this.text}}</ui5-li>
+				{{/each}}
 			</ui5-list>
 		</div>
+		{{/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}}
+		{{/if}}
 	</div>
 
 	<div slot="footer" class="ui5-vsd-footer">