@sapui5/sap.fe.controls 1.130.0

package/src/sap/fe/controls/easyFilter/EasyFilterInput.tsx

@@ -0,0 +1,455 @@
+import Log from "sap/base/Log";
+import type ResourceBundle from "sap/base/i18n/ResourceBundle";
+import type { PathInModelExpression } from "sap/fe/base/BindingToolkit";
+import { and, bindState, greaterThan, ifElse, length, lessThan } from "sap/fe/base/BindingToolkit";
+import { aggregation, defineState, defineUI5Class, event, property, type PropertiesOf, type StateOf } from "sap/fe/base/ClassSupport";
+import EventDelegateHook from "sap/fe/base/EventDelegateHook";
+import jsx from "sap/fe/base/jsx-runtime/jsx";
+import ShellHistoryProvider from "sap/fe/controls/easyFilter/ShellHistoryProvider";
+import type { Button$PressEvent } from "sap/m/Button";
+import Button from "sap/m/Button";
+import CustomListItem from "sap/m/CustomListItem";
+import FlexBox from "sap/m/FlexBox";
+import HBox from "sap/m/HBox";
+import IllustratedMessage from "sap/m/IllustratedMessage";
+import IllustratedMessageSize from "sap/m/IllustratedMessageSize";
+import IllustratedMessageType from "sap/m/IllustratedMessageType";
+import Input from "sap/m/Input";
+import List from "sap/m/List";
+import type { ListBase$DeleteEvent } from "sap/m/ListBase";
+import Popover from "sap/m/Popover";
+import type StandardListItem from "sap/m/StandardListItem";
+import Text from "sap/m/Text";
+import Title from "sap/m/Title";
+import { ButtonType, FlexAlignItems, FlexDirection, FlexJustifyContent, FlexWrap, ListMode, PlacementType } from "sap/m/library";
+import type UI5Event from "sap/ui/base/Event";
+import type { $ControlSettings } from "sap/ui/core/Control";
+import Control from "sap/ui/core/Control";
+import CustomData from "sap/ui/core/CustomData";
+import Lib from "sap/ui/core/Lib";
+import type RenderManager from "sap/ui/core/RenderManager";
+import { TitleLevel, ValueState } from "sap/ui/core/library";
+import type Context from "sap/ui/model/Context";
+import type { EventHandler } from "../../../../../../../types/extension_types";
+
+@defineUI5Class("sap.fe.controls.easyFilter.EasyFilterInput")
+export default class EasyFilterInput extends Control {
+	@aggregation({ type: "sap.m.Input", multiple: false, isDefault: true })
+	$searchInput!: Input;
+
+	@property({ type: "string" })
+	appId?: string;
+
+	@property({ type: "array" })
+	recommendedValues?: string[];
+
+	@event()
+	queryChanged?: EventHandler<UI5Event<{ query: string }, EasyFilterInput>>;
+
+	@event()
+	enterPressed?: EventHandler<UI5Event<{ query: string }, EasyFilterInput>>;
+
+	private resourceBundle!: ResourceBundle;
+
+	shellHistoryProvider: ShellHistoryProvider | undefined;
+
+	$favoritePopover: Popover | undefined;
+
+	@defineState()
+	protected state: StateOf<{
+		queryChanged: boolean;
+		recentQueries: readonly { text: string; isFavorite: boolean }[];
+		isHistoryEnabled: boolean;
+		favoriteQueries: string[];
+		recommendedQueries: string[];
+	}> = {
+		queryChanged: false,
+		isHistoryEnabled: false,
+		recentQueries: [],
+		favoriteQueries: [] as string[],
+		recommendedQueries: [] as string[]
+	};
+
+	constructor(properties: string | ($ControlSettings & PropertiesOf<EasyFilterInput>), others?: $ControlSettings) {
+		super(properties as string, others);
+		this.initialize();
+	}
+
+	public getValue(): string {
+		return this.$searchInput.getValue();
+	}
+
+	setValue(value: string): void {
+		this.$searchInput.setPlaceholder(this.$searchInput.getValue());
+		this.$searchInput.setValue(value);
+	}
+
+	initialize(): void {
+		this.state.recommendedQueries = this.recommendedValues ?? [];
+		this.resourceBundle = Lib.getResourceBundleFor("sap.fe.controls")!;
+		this.createInput();
+	}
+
+	setAsInvalid(message: string): void {
+		this.$searchInput.setValueState(ValueState.Warning);
+		this.$searchInput.setValueStateText(message);
+	}
+
+	createInput(): void {
+		this.$searchInput = (
+			<Input
+				width="100%"
+				showClearIcon={true}
+				change={(e): void => {
+					this.fireEvent("queryChanged", { query: e.getParameter("value") });
+				}}
+				liveChange={(): void => {
+					this.state.queryChanged = true;
+				}}
+				placeholder={this.resourceBundle.getText("M_EASY_FILTER_PLACEHOLDER")}
+			></Input>
+		);
+		this.createFavoritePopover()
+			.then((favoritePopover) => {
+				this.$favoritePopover = favoritePopover;
+				this.$searchInput.addDependent(favoritePopover);
+				return;
+			})
+			.catch((e) => {
+				Log.error("Couldn't create the favorite popover", e);
+			});
+		this.$searchInput.addEventDelegate({
+			onkeyup: (e: KeyboardEvent) => {
+				if (e.key === "Enter") {
+					this.onEnterPressed();
+				}
+				if (this.$favoritePopover) {
+					this.$favoritePopover.close();
+				}
+			},
+			onkeydown: (e: KeyboardEvent) => {
+				if (
+					e.key === "Tab" &&
+					this.$searchInput?.getValue().length === 0 &&
+					this.$searchInput?.getValue() !== this.$searchInput?.getPlaceholder()
+				) {
+					e.preventDefault();
+					this.$searchInput?.setValue(this.$searchInput?.getPlaceholder());
+				}
+			},
+			ontap: () => {
+				this.openSuggestionPopover();
+			},
+			onfocusin: () => {
+				this.openSuggestionPopover();
+			}
+		});
+	}
+
+	private openSuggestionPopover(): void {
+		if (!this.$searchInput?.getValue() && (!this.$favoritePopover || !this.$favoritePopover?.isOpen())) {
+			// Open the easy filter popover
+			this.state.isHistoryEnabled = this.shellHistoryProvider?.isHistoryEnabled() ?? false;
+			this.state.favoriteQueries = this.shellHistoryProvider?.getFavoriteQueries() ?? [];
+			this.state.recentQueries = (this.shellHistoryProvider?.getRecentQueries() ?? []).map((query) => {
+				return {
+					text: query,
+					isFavorite: this.state.favoriteQueries.includes(query)
+				};
+			});
+			this.$favoritePopover?.openBy(this.$searchInput);
+		}
+	}
+
+	requestFavorite(e: Button$PressEvent): void {
+		this.$favoritePopover?.close();
+		this.$searchInput?.setValue(e.getSource().getText());
+		this.onEnterPressed();
+	}
+
+	onEnterPressed(): void {
+		this.$favoritePopover?.close();
+		this.state.queryChanged = false;
+		this.$searchInput?.setEditable(true);
+		const magicQuery = this.$searchInput?.getValue();
+		this.$searchInput?.setValueStateText("");
+		this.$searchInput?.setValueState("None");
+		this.fireEvent("enterPressed", { query: magicQuery });
+	}
+
+	addRecentQuery(queryString: string | undefined): void {
+		const isQueryPresent = !!this.state.recentQueries.find((query) => query.text === queryString);
+		if (queryString && !isQueryPresent) {
+			this.state.recentQueries = this.state.recentQueries.concat([
+				{
+					text: queryString,
+					isFavorite: false
+				}
+			]);
+			if (this.state.recentQueries.length > 5) {
+				this.state.recentQueries = this.state.recentQueries.slice(1);
+			}
+		}
+	}
+
+	onStateChange(changedProps: string[] = []): void {
+		if (changedProps.includes("favoriteQueries") || changedProps.includes("recentQueries")) {
+			this.shellHistoryProvider?.setFavoriteQueries(this.state.favoriteQueries);
+			this.shellHistoryProvider?.setRecentQueries(this.state.recentQueries.map((query) => query.text));
+		}
+	}
+
+	async initShellHistoryProvider(): Promise<void> {
+		try {
+			this.shellHistoryProvider = await ShellHistoryProvider.getInstance(this.appId ?? "<unknownApp>");
+		} catch (error) {
+			Log.error("Error while creating ShellHistoryProvider for easy filter", error as string);
+		}
+	}
+
+	async createFavoritePopover(): Promise<Popover> {
+		await this.initShellHistoryProvider();
+		return (
+			<Popover
+				showHeader={false}
+				horizontalScrolling={false}
+				placement={PlacementType.Bottom}
+				showArrow={false}
+				initialFocus={this.$searchInput}
+				class={"sapFEControlsPopover"}
+			>
+				{{
+					content: (
+						<FlexBox direction={FlexDirection.Column} class={"sapUiContentPadding"} renderType={"Bare"}>
+							{{
+								items: [
+									<Title
+										titleStyle={TitleLevel.H6}
+										text={this.resourceBundle.getText("M_EASY_FILTER_POPOVER_SUGGESTIONS_TITLE")}
+										class={"sapFeControlsTitleBorder"}
+										visible={this.state.recommendedQueries.length > 0}
+									/>,
+									<HBox
+										class={"sapUiContentPadding"}
+										items={bindState(this.state.recommendedQueries)}
+										wrap={FlexWrap.Wrap}
+										visible={this.state.recommendedQueries.length > 0}
+									>
+										{{
+											items: (id: string, ctx: Context): StandardListItem => {
+												return (
+													<Button
+														class={"sapUiTinyMarginEnd"}
+														text={ctx.getObject()}
+														press={this.requestFavorite.bind(this)}
+													/>
+												);
+											}
+										}}
+									</HBox>,
+									<Title
+										titleStyle={TitleLevel.H6}
+										text={this.resourceBundle.getText("M_EASY_FILTER_POPOVER_FAVORITE_TITLE")}
+										class={"sapFeControlsTitleBorder"}
+										visible={this.state.isHistoryEnabled}
+									/>,
+									<List
+										items={bindState(this.state.favoriteQueries)}
+										visible={this.state.isHistoryEnabled}
+										mode={ListMode.Delete}
+										delete={(e: ListBase$DeleteEvent): void => {
+											const list = e.getSource();
+											//Retaining the focus on popover doesn't make the popover close on every interaction
+											this.$favoritePopover?.focus();
+											const customListItem = e.getParameter("listItem") as CustomListItem;
+											const listIndex = list.indexOfItem(customListItem);
+											const newFavoriteQueries = this.state.favoriteQueries.concat();
+											newFavoriteQueries.splice(listIndex, 1);
+											this.state.favoriteQueries = newFavoriteQueries;
+										}}
+									>
+										{{
+											noData: (
+												<IllustratedMessage
+													title={this.resourceBundle.getText("M_EASY_FILTER_POPOVER_EMPTY_FAVORITE_TITLE")}
+													illustrationSize={IllustratedMessageSize.Dot}
+													illustrationType={IllustratedMessageType.NoEntries}
+													description={this.resourceBundle.getText(
+														"M_EASY_FILTER_POPOVER_EMPTY_FAVORITE_DESCRIPTION"
+													)}
+												/>
+											),
+											items: (id: string, ctx: Context): StandardListItem => {
+												return (
+													<CustomListItem
+														class={"sapUiSmallMarginBegin"}
+														customData={[<CustomData key={"text"} value={ctx.getObject()} />]}
+														press={(): void => {
+															this.$searchInput.setValue(ctx.getObject());
+															this.onEnterPressed();
+														}}
+													>
+														<FlexBox
+															width={"100%"}
+															direction={FlexDirection.Row}
+															alignItems={FlexAlignItems.Center}
+															justifyContent={FlexJustifyContent.SpaceBetween}
+															renderType={"Bare"}
+															id={id}
+														>
+															<Text text={ctx.getObject()} wrapping={false} class="sapFEControlsPointer">
+																{{
+																	dependents: (
+																		<EventDelegateHook
+																			tap={(): void => {
+																				this.$searchInput?.setValue(ctx.getObject());
+																				this.onEnterPressed();
+																			}}
+																		/>
+																	)
+																}}
+															</Text>
+															<Button
+																icon={"sap-icon://favorite"}
+																type={ButtonType.Transparent}
+																press={(): void => {
+																	//Retaining the focus on popover doesn't make the popover close on every interaction
+																	this.$favoritePopover?.focus();
+																	const queryString = ctx.getObject();
+																	const index = this.state.favoriteQueries.indexOf(queryString);
+																	if (index !== -1) {
+																		this.state.favoriteQueries = this.state.favoriteQueries.filter(
+																			(query) => query !== queryString
+																		);
+																	}
+																	this.addRecentQuery(queryString);
+																}}
+															/>
+														</FlexBox>
+													</CustomListItem>
+												);
+											}
+										}}
+									</List>,
+									<Title
+										titleStyle={TitleLevel.H6}
+										text={this.resourceBundle.getText("M_EASY_FILTER_POPOVER_LAST_USED")}
+										class={"sapFeControlsTitleBorder"}
+										visible={and(
+											this.state.isHistoryEnabled,
+											greaterThan(length(bindState(this.state.recentQueries) as PathInModelExpression<unknown>), 0)
+										)}
+									/>,
+									<List
+										items={bindState(this.state.recentQueries)}
+										visible={and(
+											this.state.isHistoryEnabled,
+											greaterThan(length(bindState(this.state.recentQueries) as PathInModelExpression<unknown>), 0)
+										)}
+										mode={ListMode.Delete}
+										delete={(e: ListBase$DeleteEvent): void => {
+											//Retaining the focus on popover doesn't make the popover close on every interaction
+											this.$favoritePopover?.focus();
+											const queryString = e.getParameter("listItem")?.data("text");
+											this.state.recentQueries = this.state.recentQueries.filter(
+												(query) => query.text !== queryString
+											);
+										}}
+									>
+										{{
+											items: (id: string, ctx: Context): FlexBox => {
+												return (
+													<CustomListItem
+														press={(): void => {
+															this.$searchInput?.setValue(ctx.getObject().text);
+															this.onEnterPressed();
+														}}
+														class={"sapUiSmallMarginBegin"}
+														customData={[<CustomData key={"text"} value={ctx.getObject().text} />]}
+													>
+														<FlexBox
+															width={"100%"}
+															direction={FlexDirection.Row}
+															alignItems={FlexAlignItems.Center}
+															justifyContent={FlexJustifyContent.SpaceBetween}
+															renderType={"Bare"}
+															id={id}
+														>
+															<Text
+																text={this.state.recentQueries.text}
+																tooltip={this.state.recentQueries.text}
+																wrapping={false}
+																class="sapFEControlsPointer"
+															>
+																{{
+																	dependents: (
+																		<EventDelegateHook
+																			tap={(): void => {
+																				this.$searchInput?.setValue(ctx.getObject().text);
+																				this.onEnterPressed();
+																			}}
+																		/>
+																	)
+																}}
+															</Text>
+															<Button
+																icon={ifElse(
+																	bindState<boolean>(this.state.recentQueries.isFavorite),
+																	"sap-icon://favorite",
+																	"sap-icon://add-favorite"
+																)}
+																enabled={lessThan(
+																	length(
+																		bindState(
+																			this.state.favoriteQueries
+																		) as PathInModelExpression<unknown>
+																	),
+																	5
+																)}
+																type={ButtonType.Transparent}
+																press={(): void => {
+																	//Retaining the focus on popover doesn't make the popover close on every interaction
+																	this.$favoritePopover?.focus();
+																	const queryString = ctx.getObject().text;
+																	const index = this.state.favoriteQueries.indexOf(queryString);
+																	const indexOfRecentQueries =
+																		this.state.recentQueries.indexOf(queryString);
+																	const newRecentQueries = this.state.recentQueries.concat();
+																	newRecentQueries.splice(indexOfRecentQueries, 1);
+																	this.state.recentQueries = newRecentQueries;
+																	if (index === -1) {
+																		this.state.favoriteQueries = this.state.favoriteQueries.concat([
+																			queryString
+																		]);
+																	} else {
+																		this.state.favoriteQueries = this.state.favoriteQueries.filter(
+																			(query) => query !== queryString
+																		);
+																	}
+																}}
+															/>
+														</FlexBox>
+													</CustomListItem>
+												);
+											}
+										}}
+									</List>
+								]
+							}}
+						</FlexBox>
+					)
+				}}
+			</Popover>
+		) as Popover;
+	}
+
+	static render(rm: RenderManager, control: EasyFilterInput): void {
+		return jsx.renderUsingRenderManager(rm, control, () => {
+			return (
+				<span ref={control} class={"sapFEEasyFilterInput"}>
+					{control.$searchInput}
+				</span>
+			);
+		});
+	}
+}