diff --git a/packages/fiori/README.md b/packages/fiori/README.md index 1a810a9a8a10f..3447e98350a1b 100644 --- a/packages/fiori/README.md +++ b/packages/fiori/README.md @@ -44,6 +44,9 @@ such as a common header (ShellBar). | User Settings Appearance View Item | `ui5-user-settings-appearance-view-item`| `import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js";`| | User Settings Appearance View Group | `ui5-user-settings-appearance-view-group`| `import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js";`| | User Settings View | `ui5-user-settings-view` | `import "@ui5/webcomponents-fiori/dist/UserSettingsView.js";` | +| User Settings Notifications View | `ui5-user-settings-notifications-view` | `import "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsView.js";` | +| User Settings Notifications View Group | `ui5-user-settings-notifications-view-group` | `import "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewGroup.js";` | +| User Settings Notifications View Item | `ui5-user-settings-notifications-view-item` | `import "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewItem.js";` | | View Settings Dialog | `ui5-view-settings-dialog` | `import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";` | | View Settings Dialog - Sort Item | `ui5-sort-item` | `import "@ui5/webcomponents-fiori/dist/SortItem.js";` | | View Settings Dialog - Filter Item | `ui5-filter-item` | `import "@ui5/webcomponents-fiori/dist/FilterItem.js";` | diff --git a/packages/fiori/cypress/specs/UserSettingsNotificationsView.cy.tsx b/packages/fiori/cypress/specs/UserSettingsNotificationsView.cy.tsx new file mode 100644 index 0000000000000..391e9222fa47c --- /dev/null +++ b/packages/fiori/cypress/specs/UserSettingsNotificationsView.cy.tsx @@ -0,0 +1,890 @@ +import UserSettingsDialog from "../../src/UserSettingsDialog.js"; +import UserSettingsItem from "../../src/UserSettingsItem.js"; +import UserSettingsView from "../../src/UserSettingsView.js"; +import UserSettingsNotificationsView from "../../src/UserSettingsNotificationsView.js"; +import UserSettingsNotificationsViewGroup, { isInstanceOfUserSettingsNotificationsViewGroup } from "../../src/UserSettingsNotificationsViewGroup.js"; +import UserSettingsNotificationsViewItem, { isInstanceOfUserSettingsNotificationsViewItem } from "../../src/UserSettingsNotificationsViewItem.js"; +import MessageStrip from "@ui5/webcomponents/dist/MessageStrip.js"; +import Select from "@ui5/webcomponents/dist/Select.js"; +import Option from "@ui5/webcomponents/dist/Option.js"; + +describe("Notifications view", () => { + it("renders the view with no items", () => { + cy.mount( + + + + + ); + + cy.get("[ui5-user-settings-notifications-view]").should("exist"); + cy.get("[ui5-user-settings-notifications-view]").shadow().find("[ui5-list]").should("exist"); + }); + + it("renders items with title, byline and switch", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").as("item"); + cy.get("@item").should("have.attr", "text", "SuccessFactors"); + cy.get("@item").should("have.attr", "byline-text", "Compensation | Learning | HR"); + cy.get("@item").should("have.attr", "checked"); + cy.get("@item").should("have.attr", "navigable"); + + cy.get("@item").shadow().find(".ui5-user-settings-notifications-item-title").contains("SuccessFactors"); + cy.get("@item").shadow().find(".ui5-user-settings-notifications-item-byline").contains("Compensation | Learning | HR"); + cy.get("@item").shadow().find("[ui5-switch]").should("exist"); + cy.get("@item").shadow().find("[ui5-switch]").should("have.attr", "checked"); + cy.get("@item").shadow().find(".ui5-user-settings-notifications-item-arrow").should("exist"); + }); + + it("renders items without arrow when not navigable", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").as("item"); + cy.get("@item").shadow().find(".ui5-user-settings-notifications-item-arrow").should("not.exist"); + }); + + it("fires switch-change event when the switch is toggled", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").as("item"); + cy.get("@item").then($item => { + $item.get(0).addEventListener("switch-change", cy.stub().as("switchChanged")); + }); + + cy.get("@item").shadow().find("[ui5-switch]").click(); + cy.get("@switchChanged").should("have.been.calledOnce"); + }); + + it("fires item-click on the view only for navigable items", () => { + cy.mount( + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view]").as("view"); + cy.get("@view").then($view => { + $view.get(0).addEventListener("item-click", cy.stub().as("itemClick")); + }); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(0).click(); + cy.get("@itemClick").should("have.been.calledOnce"); + cy.get("@itemClick").then((stub: any) => { + const call = stub.getCall(0); + expect(call.args[0].detail.item.text).to.equal("Navigable"); + }); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(1).click(); + cy.get("@itemClick").should("have.been.calledOnce"); + }); + + it("renders groups with items", () => { + cy.mount( + + + + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-group]").should("have.length", 2); + cy.get("[ui5-user-settings-notifications-view-item]").should("have.length", 3); + }); + + it("renders additionalContent slot above the list", () => { + cy.mount( + + + + Some settings are managed by your organization. + + + + + ); + + cy.get("[ui5-user-settings-notifications-view]").as("view"); + cy.get("@view").find("#ns-info").should("exist"); + }); + + it("renders endContent slot instead of the switch and does not fire switch-change", () => { + cy.mount( + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").as("item"); + cy.get("@item").shadow().find("[ui5-switch]").should("not.exist"); + cy.get("@item").find("#freq-select").should("exist"); + + cy.get("[ui5-user-settings-notifications-view]").as("view"); + cy.get("@item").then($item => { + $item.get(0).addEventListener("switch-change", cy.stub().as("itemSwitchChange")); + }); + cy.get("@view").then($view => { + $view.get(0).addEventListener("switch-change", cy.stub().as("viewSwitchChange")); + }); + + cy.get("#freq-select").click(); + cy.get("#freq-select").find("[ui5-option]").eq(1).click(); + + cy.get("@itemSwitchChange").should("not.have.been.called"); + cy.get("@viewSwitchChange").should("not.have.been.called"); + }); + + it("does not navigate to the secondary view when item-click is prevented", () => { + cy.mount( + + + + + + secondary content + + + ); + + cy.get("[ui5-user-settings-notifications-view]").as("view"); + cy.get("@view").then($view => { + $view.get(0).addEventListener("item-click", (e: Event) => { + e.preventDefault(); + }); + $view.get(0).addEventListener("item-click", cy.stub().as("itemClick")); + }); + + cy.get("[ui5-user-settings-notifications-view-item]").click(); + + cy.get("@itemClick").should("have.been.calledOnce"); + cy.get("#details-page").should("not.have.attr", "selected"); + }); + + it("getItemByKey returns the matching item", () => { + cy.mount( + + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view]").then($view => { + const view = $view.get(0) as UserSettingsNotificationsView; + const item = view.getItemByKey("sales-approvals"); + expect(item).to.exist; + expect(item!.text).to.equal("Sales Order Approvals"); + + const rootItem = view.getItemByKey("allow"); + expect(rootItem).to.exist; + expect(rootItem!.text).to.equal("Allow Notifications"); + + expect(view.getItemByKey("missing")).to.be.undefined; + }); + }); + + it("getAllItems returns a flat list including grouped items", () => { + cy.mount( + + + + + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view]").then($view => { + const view = $view.get(0) as UserSettingsNotificationsView; + const all = view.getAllItems(); + expect(all).to.have.length(4); + expect(all.map(i => i.text)).to.deep.equal([ + "Allow Notifications", + "Sales Order Updates", + "Sales Order Approvals", + "Purchase Order Approval", + ]); + }); + }); + + it("routes to the secondary view whose id matches the clicked item's itemKey", () => { + cy.mount( + + + + + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(0).click(); + cy.get("#one").should("have.attr", "selected"); + cy.get("#one").should("have.attr", "text", "One detail page"); + cy.get("#two").should("not.have.attr", "selected"); + }); + + it("falls back to the first secondary view when no id matches", () => { + cy.mount( + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(0).click(); + cy.get("#fallback").should("have.attr", "selected"); + cy.get("#fallback").should("have.attr", "text", "Any"); + }); + + it("does not move focus on mouse drill-in (no lingering ring for mouse users)", () => { + cy.mount( + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(0).click(); + cy.get("#detail").should("have.attr", "selected"); + // Mouse-triggered drill-in should NOT auto-focus the back button. + cy.get("[ui5-user-settings-item]").shadow() + .find(".ui5-user-settings-item-collapse-btn") + .should("not.be.focused"); + }); +}); + +describe("Notifications view item", () => { + it("reflects the itemKey attribute", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").should("have.attr", "item-key", "allow"); + }); + + it("does not render the title span when text is empty", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").shadow() + .find(".ui5-user-settings-notifications-item-title").should("not.exist"); + }); + + it("does not set the has-byline class when bylineText is empty", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").shadow() + .find(".ui5-user-settings-notifications-item") + .should("not.have.class", "has-byline"); + }); + + it("sets the has-byline class when bylineText is present", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").shadow() + .find(".ui5-user-settings-notifications-item.has-byline").should("exist"); + }); + + it("reflects the initial checked state on the internal switch", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").shadow() + .find("[ui5-switch]").should("have.attr", "checked"); + + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").shadow() + .find("[ui5-switch]").should("not.have.attr", "checked"); + }); + + it("sets the accessible name of the switch to the text when no byline", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").shadow() + .find("[ui5-switch]").should("have.attr", "accessible-name", "Foo"); + }); + + it("sets the accessible name of the switch to text and byline when byline is present", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").shadow() + .find("[ui5-switch]").should("have.attr", "accessible-name", "Foo Bar"); + }); + + it("fires switch-change with the item and checked flag in detail", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").as("item"); + cy.get("@item").then($item => { + $item.get(0).addEventListener("switch-change", cy.stub().as("switchChanged")); + }); + + cy.get("@item").shadow().find("[ui5-switch]").click(); + cy.get("@switchChanged").should("have.been.calledOnce"); + cy.get("@item").then($item => { + cy.get("@switchChanged").then((stub: any) => { + const call = stub.getCall(0); + expect(call.args[0].detail.item).to.equal($item.get(0)); + expect(call.args[0].detail.checked).to.be.a("boolean"); + }); + }); + }); + + it("bubbles switch-change to a wrapping parent element", () => { + cy.mount( + + +
+ +
+ + + ); + + cy.get("#wrapper").then($wrapper => { + $wrapper.get(0).addEventListener("switch-change", cy.stub().as("outerSwitchChanged")); + }); + + cy.get("[ui5-user-settings-notifications-view-item]").shadow().find("[ui5-switch]").click(); + cy.get("@outerSwitchChanged").should("have.been.calledOnce"); + }); + + it("isInstanceOfUserSettingsNotificationsViewItem identifies items correctly", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").then($item => { + expect(isInstanceOfUserSettingsNotificationsViewItem($item.get(0))).to.be.true; + const div = document.createElement("div"); + expect(isInstanceOfUserSettingsNotificationsViewItem(div)).to.be.false; + }); + }); + + it("renders switch when endContent is empty and hides it when endContent is provided", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").shadow() + .find("[ui5-switch]").should("exist"); + + cy.mount( + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").shadow() + .find("[ui5-switch]").should("not.exist"); + cy.get("[ui5-user-settings-notifications-view-item]").find("#freq-select").should("exist"); + }); + + it("renders a slim-arrow-right icon when navigable", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").shadow() + .find("[ui5-icon][name=\"slim-arrow-right\"]").should("exist"); + }); + + it("updates the title when text is changed programmatically", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").then($item => { + const item = $item.get(0) as UserSettingsNotificationsViewItem; + item.text = "Updated"; + }); + + cy.get("[ui5-user-settings-notifications-view-item]").shadow() + .find(".ui5-user-settings-notifications-item-title").should("contain.text", "Updated"); + }); +}); + +describe("Notifications view — event forwarding", () => { + it("re-fires switch-change at the view level with {item, checked}", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view]").as("view"); + cy.get("[ui5-user-settings-notifications-view-item]").as("item"); + + cy.get("@view").then($view => { + $view.get(0).addEventListener("switch-change", cy.stub().as("viewSwitchChange")); + }); + + cy.get("@item").shadow().find("[ui5-switch]").click(); + + cy.get("@viewSwitchChange").should("have.been.calledOnce"); + cy.get("@viewSwitchChange").then((stub: any) => { + const call = stub.getCall(0); + cy.get("@item").then($item => { + expect(call.args[0].detail.item).to.equal($item.get(0)); + }); + expect(call.args[0].detail.checked).to.equal(true); + }); + }); + + it("does not fire item-click on the view for non-navigable items", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view]").as("view"); + cy.get("@view").then($view => { + $view.get(0).addEventListener("item-click", cy.stub().as("itemClick")); + }); + + cy.get("[ui5-user-settings-notifications-view-item]").click(); + + cy.get("@itemClick").should("not.have.been.called"); + }); + + it("fires item-click only for the navigable clicked item", () => { + cy.mount( + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view]").as("view"); + cy.get("@view").then($view => { + $view.get(0).addEventListener("item-click", cy.stub().as("itemClick")); + }); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(0).click(); + cy.get("[ui5-user-settings-notifications-view-item]").eq(1).click(); + + cy.get("@itemClick").should("have.been.calledOnce"); + cy.get("@itemClick").then((stub: any) => { + const call = stub.getCall(0); + expect(call.args[0].detail.item.text).to.equal("Navigable"); + }); + }); + + it("item-click event is cancelable", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view]").as("view"); + cy.get("@view").then($view => { + $view.get(0).addEventListener("item-click", cy.stub().as("itemClick")); + }); + + cy.get("[ui5-user-settings-notifications-view-item]").click(); + + cy.get("@itemClick").should("have.been.calledOnce"); + cy.get("@itemClick").then((stub: any) => { + const call = stub.getCall(0); + expect(call.args[0].cancelable).to.be.true; + }); + }); +}); + +describe("Notifications view group", () => { + it("renders items inside a group", () => { + cy.mount( + + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-group]").as("group"); + cy.get("@group").should("have.attr", "header-text", "Sales"); + cy.get("@group").find("[ui5-user-settings-notifications-view-item]").should("have.length", 3); + }); + + it("isInstanceOfUserSettingsNotificationsViewGroup returns true for the group and false for a plain div", () => { + cy.mount( + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-group]").then($group => { + expect(isInstanceOfUserSettingsNotificationsViewGroup($group.get(0))).to.equal(true); + const div = document.createElement("div"); + expect(isInstanceOfUserSettingsNotificationsViewGroup(div)).to.equal(false); + }); + }); + + it("getAllItems on the view includes items from all groups plus non-grouped items", () => { + cy.mount( + + + + + + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view]").then($view => { + const view = $view.get(0) as UserSettingsNotificationsView; + expect(view.getAllItems().length).to.equal(5); + }); + }); + + it("reflects the headerText attribute", () => { + cy.mount( + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-group]").should("have.attr", "header-text", "Sales"); + }); +}); + +describe("Notifications view — drill-in edge cases", () => { + it("keeps the target view's own text when the target was matched by itemKey", () => { + cy.mount( + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(0).click(); + cy.get("#specific").should("have.attr", "selected"); + cy.get("#specific").should("have.attr", "text", "Preserved title"); + }); + + it("uses the clicked item's text when the target was the fallback view — and updates on subsequent clicks", () => { + cy.mount( + + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(0).click(); + cy.get("#fallback").should("have.attr", "text", "First"); + + // Simulate back navigation before triggering the second drill-in. + cy.get("#fallback").invoke("removeAttr", "selected"); + cy.get("#primary").invoke("attr", "selected", ""); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(1).click(); + cy.get("#fallback").should("have.attr", "text", "Second"); + }); + + it("does not drill in when the switch of a navigable item is clicked", () => { + cy.mount( + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(0).shadow() + .find("[ui5-switch]").click(); + cy.get("#drill").should("not.have.attr", "selected"); + }); + + it("deselects the primary view when drilling into a secondary view", () => { + cy.mount( + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(0).click(); + cy.get("#target").should("have.attr", "selected"); + cy.get("#primary").should("not.have.attr", "selected"); + }); + + it("does not drill in when clicking inside the endContent slot on a navigable item", () => { + cy.mount( + + + + + + + + + + + ); + + cy.get("#end-select").click(); + cy.get("#drill").should("not.have.attr", "selected"); + }); + + it("clicking the navigation arrow drills into the secondary view", () => { + cy.mount( + + + + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(0).shadow() + .find(".ui5-user-settings-notifications-item-arrow").click(); + cy.get("#drill").should("have.attr", "selected"); + }); + + it("does not drill in when there are no secondary sibling views", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view]").then($view => { + $view.get(0).addEventListener("item-click", cy.stub().as("itemClick")); + }); + + cy.get("[ui5-user-settings-notifications-view-item]").eq(0).click(); + cy.get("[ui5-user-settings-notifications-view]").should("not.have.attr", "selected"); + }); +}); + +describe("Notifications view item — checked state", () => { + it("updates checked on the item after the switch is toggled", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").as("item"); + cy.get("@item").shadow().find("[ui5-switch]").click(); + cy.get("@item").should("have.attr", "checked"); + + cy.get("@item").shadow().find("[ui5-switch]").click(); + cy.get("@item").should("not.have.attr", "checked"); + }); + + it("switch-change detail.checked matches the new item.checked state", () => { + cy.mount( + + + + + + ); + + cy.get("[ui5-user-settings-notifications-view-item]").as("item"); + cy.get("@item").then($item => { + $item.get(0).addEventListener("switch-change", cy.stub().as("changed")); + }); + + cy.get("@item").shadow().find("[ui5-switch]").click(); + cy.get("@changed").then((stub: any) => { + const call = stub.getCall(0); + expect(call.args[0].detail.checked).to.be.true; + cy.get("@item").then($item => { + expect(($item.get(0) as UserSettingsNotificationsViewItem).checked).to.be.true; + }); + }); + }); +}); + diff --git a/packages/fiori/src/UserSettingsItem.ts b/packages/fiori/src/UserSettingsItem.ts index 1161ef1429058..c163f6d96cd7f 100644 --- a/packages/fiori/src/UserSettingsItem.ts +++ b/packages/fiori/src/UserSettingsItem.ts @@ -254,6 +254,15 @@ class UserSettingsItem extends UI5Element { return !!(this._inMobileView || (this._hasSelectedPageView && this._selectedPageView.secondary)); } + /** + * @private + * @since 2.26.0 + */ + _focusBackButton() { + const backButton = this.shadowRoot?.querySelector(".ui5-user-settings-item-collapse-btn"); + backButton?.focus(); + } + captureRef(this: UserSettingsView, ref: HTMLElement & { associatedSettingView?: UserSettingsView} | null) { if (ref) { ref.associatedSettingView = this; diff --git a/packages/fiori/src/UserSettingsNotificationsView.ts b/packages/fiori/src/UserSettingsNotificationsView.ts new file mode 100644 index 0000000000000..dde6f26b4146f --- /dev/null +++ b/packages/fiori/src/UserSettingsNotificationsView.ts @@ -0,0 +1,185 @@ +import UserSettingsView from "./UserSettingsView.js"; +import UserSettingsNotificationsViewTemplate from "./UserSettingsNotificationsViewTemplate.js"; +import UserSettingViewCss from "./generated/themes/UserSettingsView.css.js"; +import UserSettingsNotificationsViewCss from "./generated/themes/UserSettingsNotificationsView.css.js"; +import type UserSettingsNotificationsViewItem from "./UserSettingsNotificationsViewItem.js"; +import { isInstanceOfUserSettingsNotificationsViewItem } from "./UserSettingsNotificationsViewItem.js"; +import type UserSettingsNotificationsViewGroup from "./UserSettingsNotificationsViewGroup.js"; +import { isInstanceOfUserSettingsNotificationsViewGroup } from "./UserSettingsNotificationsViewGroup.js"; +import type UserSettingsItem from "./UserSettingsItem.js"; +import type { ListItemClickEventDetail } from "@ui5/webcomponents/dist/List.js"; +import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js"; + +import { + customElement, slotStrict as slot, eventStrict as event, +} from "@ui5/webcomponents-base/dist/decorators.js"; +import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; +import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; + +type UserSettingsNotificationsViewItemClickEventDetail = { + item: UserSettingsNotificationsViewItem; +} + +/** + * @class + * ### Overview + * + * The `ui5-user-settings-notifications-view` represents a view displayed in the + * `ui5-user-settings-item` that lists notification preferences. Individual settings + * are represented by `ui5-user-settings-notifications-view-item` elements, optionally + * grouped by `ui5-user-settings-notifications-view-group`. + * + * When a navigable item is clicked, the view drills into a sibling secondary view of + * its parent `ui5-user-settings-item`. When an item's `item-key` matches a target + * view's `id`, that view is opened and keeps its own `text`. Otherwise the first + * sibling marked as `secondary` is opened and its `text` is set to the clicked + * item's `text` so the drill-in header reflects the origin. + * + * Apps can override this behavior by preventing the `item-click` event. + * + * Applications should listen to the item's `switch-change` event (which bubbles) to + * be notified when a switch is toggled. + * + * Additional content (e.g. an information message strip) can be placed via the + * `additionalContent` slot, which is rendered above the list. + * + * ### ES6 Module Import + * `import "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsView.js";` + * + * @constructor + * @extends UserSettingsView + * @public + * @since 2.26.0 + */ +@customElement({ + tag: "ui5-user-settings-notifications-view", + renderer: jsxRenderer, + template: UserSettingsNotificationsViewTemplate, + styles: [UserSettingViewCss, UserSettingsNotificationsViewCss], +}) + +/** + * Fired when a navigable item in the list is clicked. + * + * The event is cancelable: preventing it skips the built-in drill-in to the + * parent's secondary view, allowing the application to take over. + * + * @param {UserSettingsNotificationsViewItem} item The clicked notifications view item. + * @public + */ +@event("item-click", { + cancelable: true, +}) + +class UserSettingsNotificationsView extends UserSettingsView { + eventDetails!: { + "item-click": UserSettingsNotificationsViewItemClickEventDetail; + } + + /** + * Defines the items of the component. Can be a mix of + * `ui5-user-settings-notifications-view-item` and + * `ui5-user-settings-notifications-view-group` elements. + * + * @public + */ + @slot({ + type: HTMLElement, + "default": true, + invalidateOnChildChange: true, + }) + items!: DefaultSlot; + + /** + * Defines additional content displayed above the items list. + * + * @public + */ + @slot({ + type: HTMLElement, + }) + additionalContent!: Slot; + + /** + * Returns a flat list of all notification items, including items nested inside groups. + * + * @public + */ + getAllItems(): Array { + const allItems: Array = []; + + this.items.forEach(item => { + if (isInstanceOfUserSettingsNotificationsViewGroup(item)) { + item.items.forEach(child => { + if (isInstanceOfUserSettingsNotificationsViewItem(child)) { + allItems.push(child); + } + }); + } else if (isInstanceOfUserSettingsNotificationsViewItem(item)) { + allItems.push(item); + } + }); + + return allItems; + } + + /** + * Returns the first item with the given `itemKey`, or `undefined` if none matches. + * + * @public + */ + getItemByKey(itemKey: string): UserSettingsNotificationsViewItem | undefined { + return this.getAllItems().find(item => item.itemKey === itemKey); + } + + _navigateToSecondaryView(item: UserSettingsNotificationsViewItem) { + const parentItem = this.closest("[ui5-user-settings-item]"); + const secondaryViews = parentItem?.pages?.filter(view => view !== this && view.secondary) ?? []; + + const matched = item.itemKey ? secondaryViews.find(view => view.id === item.itemKey) : undefined; + const target = matched ?? secondaryViews[0]; + + if (!target) { + return; + } + + if (!matched || !target.text) { + target.text = item.text; + } + + this.selected = false; + target.selected = true; + + if (item.matches(":focus-visible")) { + renderFinished().then(() => { + if (!this.isConnected) { + return; + } + parentItem?._focusBackButton?.(); + }); + } + } + + _handleItemClick = (e: CustomEvent) => { + const listItem = e.detail.item; + if (!isInstanceOfUserSettingsNotificationsViewItem(listItem) || !listItem.navigable) { + return; + } + + const eventPrevented = !this.fireDecoratorEvent("item-click", { + item: listItem, + }); + + if (eventPrevented) { + return; + } + + this._navigateToSecondaryView(listItem); + }; +} + +UserSettingsNotificationsView.define(); +export default UserSettingsNotificationsView; +export type { + UserSettingsNotificationsViewItemClickEventDetail, +}; diff --git a/packages/fiori/src/UserSettingsNotificationsViewGroup.ts b/packages/fiori/src/UserSettingsNotificationsViewGroup.ts new file mode 100644 index 0000000000000..6baa2fe51c3b0 --- /dev/null +++ b/packages/fiori/src/UserSettingsNotificationsViewGroup.ts @@ -0,0 +1,49 @@ +import ListItemGroup from "@ui5/webcomponents/dist/ListItemGroup.js"; +import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js"; +import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js"; +import UserSettingsNotificationsViewGroupCss from "./generated/themes/UserSettingsNotificationsViewGroup.css.js"; +import type UserSettingsNotificationsViewItem from "./UserSettingsNotificationsViewItem.js"; +import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js"; + +/** + * @class + * ### Overview + * + * The `ui5-user-settings-notifications-view-group` groups `ui5-user-settings-notifications-view-item` + * elements inside a `ui5-user-settings-notifications-view`. Its header renders as a plain bold + * section title with a separator line below, per the notifications design spec. + * + * ### ES6 Module Import + * `import "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewGroup.js";` + * + * @constructor + * @extends ListItemGroup + * @public + * @since 2.26.0 + */ +@customElement({ + tag: "ui5-user-settings-notifications-view-group", + styles: [ListItemGroup.styles, UserSettingsNotificationsViewGroupCss], +}) +class UserSettingsNotificationsViewGroup extends ListItemGroup { + /** + * Defines the items of the `ui5-user-settings-notifications-view-group`. + * @public + */ + @slot({ + "default": true, + invalidateOnChildChange: true, + type: HTMLElement, + }) + declare items: DefaultSlot; + + get isUserSettingsNotificationsViewGroup(): boolean { + return true; + } +} + +UserSettingsNotificationsViewGroup.define(); + +export const isInstanceOfUserSettingsNotificationsViewGroup = createInstanceChecker("isUserSettingsNotificationsViewGroup"); +export default UserSettingsNotificationsViewGroup; diff --git a/packages/fiori/src/UserSettingsNotificationsViewItem.ts b/packages/fiori/src/UserSettingsNotificationsViewItem.ts new file mode 100644 index 0000000000000..2ee08735dedfa --- /dev/null +++ b/packages/fiori/src/UserSettingsNotificationsViewItem.ts @@ -0,0 +1,157 @@ +import UserSettingsNotificationsViewItemTemplate from "./UserSettingsNotificationsViewItemTemplate.js"; +import UserSettingsNotificationsViewItemCss from "./generated/themes/UserSettingsNotificationsViewItem.css.js"; +import UserSettingViewCss from "./generated/themes/UserSettingsView.css.js"; +import { + customElement, property, slotStrict as slot, eventStrict as event, +} from "@ui5/webcomponents-base/dist/decorators.js"; +import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; +import ListItemCustom from "@ui5/webcomponents/dist/ListItemCustom.js"; +import createInstanceChecker from "@ui5/webcomponents-base/dist/util/createInstanceChecker.js"; +import type Switch from "@ui5/webcomponents/dist/Switch.js"; +import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js"; + +type UserSettingsNotificationsViewItemSwitchChangeEventDetail = { + item: UserSettingsNotificationsViewItem; + checked: boolean; +} + +/** + * @class + * ### Overview + * + * The `ui5-user-settings-notifications-view-item` represents a single notification setting + * within the `ui5-user-settings-notifications-view`. + * + * It displays a title and an optional byline. By default a trailing switch reflects + * the `checked` state. Applications can override the trailing control by providing content + * in the `endContent` slot (e.g. a `ui5-select` for a value picker); the built-in switch and + * its `switch-change` event are then suppressed. Items can additionally be flagged as + * `navigable` to display a navigation arrow and behave as clickable list rows. + * + * **Note:** The default switch and the `endContent` slot are mutually exclusive. + * When any content is provided in `endContent`, the trailing switch is not rendered + * and no `switch-change` event is fired. + * + * ### ES6 Module Import + * `import "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewItem.js";` + * + * @constructor + * @extends ListItemCustom + * @public + * @since 2.26.0 + */ +@customElement({ + tag: "ui5-user-settings-notifications-view-item", + renderer: jsxRenderer, + template: UserSettingsNotificationsViewItemTemplate, + styles: [ListItemCustom.styles, UserSettingViewCss, UserSettingsNotificationsViewItemCss], +}) + +/** + * Fired when the switch state changes. + * + * Not fired when the `endContent` slot is used to override the trailing control. + * + * @param {UserSettingsNotificationsViewItem} item The item whose switch was toggled. + * @param {boolean} checked The new checked state of the switch. + * @public + */ +@event("switch-change", { + bubbles: true, +}) + +class UserSettingsNotificationsViewItem extends ListItemCustom { + eventDetails!: ListItemCustom["eventDetails"] & { + "switch-change": UserSettingsNotificationsViewItemSwitchChangeEventDetail; + } + + /** + * Defines the unique identifier of the item. + * + * When the item is navigable, `itemKey` is also used to route to a matching sibling + * `secondary` view by id. + * + * @default "" + * @public + */ + @property() + itemKey = ""; + + /** + * Defines the title text of the item. + * @default "" + * @public + */ + @property() + text = ""; + + /** + * Defines the byline text of the item, rendered below the title. + * @default "" + * @public + */ + @property() + bylineText = ""; + + /** + * Defines whether the trailing switch is on. + * + * Ignored when the `endContent` slot is used. + * + * @default false + * @public + */ + @property({ type: Boolean }) + checked = false; + + /** + * Defines whether the item is navigable. When true, a navigation arrow is rendered + * and the whole row becomes clickable (fires the parent view's `item-click` event). + * @default false + * @public + */ + @property({ type: Boolean }) + navigable = false; + + /** + * Defines custom content rendered at the trailing end of the item, replacing the + * default switch. Use this to place a `ui5-select`, `ui5-input`, or any other + * control instead of a boolean toggle. + * + * @public + */ + @slot({ + type: HTMLElement, + }) + endContent!: Slot; + + get isUserSettingsNotificationsViewItem(): boolean { + return true; + } + + get _hasEndContent(): boolean { + return this.endContent.length > 0; + } + + get _accessibleSwitchName(): string { + return this.bylineText ? `${this.text} ${this.bylineText}` : this.text; + } + + _handleSwitchChange = (e: Event) => { + const target = e.target as Switch; + this.checked = target.checked; + this.fireDecoratorEvent("switch-change", { item: this, checked: this.checked }); + }; + + _handleEndClick = (e: MouseEvent) => { + e.stopPropagation(); + }; +} + +UserSettingsNotificationsViewItem.define(); + +export const isInstanceOfUserSettingsNotificationsViewItem = createInstanceChecker("isUserSettingsNotificationsViewItem"); +export default UserSettingsNotificationsViewItem; +export type { + UserSettingsNotificationsViewItemSwitchChangeEventDetail, +}; diff --git a/packages/fiori/src/UserSettingsNotificationsViewItemTemplate.tsx b/packages/fiori/src/UserSettingsNotificationsViewItemTemplate.tsx new file mode 100644 index 0000000000000..f5cb7761135f7 --- /dev/null +++ b/packages/fiori/src/UserSettingsNotificationsViewItemTemplate.tsx @@ -0,0 +1,51 @@ +import type UserSettingsNotificationsViewItem from "./UserSettingsNotificationsViewItem.js"; +import ListItemCustomTemplate from "@ui5/webcomponents/dist/ListItemCustomTemplate.js"; +import Switch from "@ui5/webcomponents/dist/Switch.js"; +import Icon from "@ui5/webcomponents/dist/Icon.js"; +import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js"; + +export default function UserSettingsNotificationsViewItemTemplate(this: UserSettingsNotificationsViewItem) { + return ListItemCustomTemplate.call(this, { + listItemContent: listItemContent.bind(this), + }); +} + +function listItemContent(this: UserSettingsNotificationsViewItem) { + const rootClasses = ["ui5-user-settings-notifications-item"]; + if (this.bylineText && this.text) { + rootClasses.push("has-byline"); + } + + return ( +
+ + +
+ ); +} diff --git a/packages/fiori/src/UserSettingsNotificationsViewTemplate.tsx b/packages/fiori/src/UserSettingsNotificationsViewTemplate.tsx new file mode 100644 index 0000000000000..5e511d2202b5f --- /dev/null +++ b/packages/fiori/src/UserSettingsNotificationsViewTemplate.tsx @@ -0,0 +1,20 @@ +import type UserSettingsNotificationsView from "./UserSettingsNotificationsView.js"; +import List from "@ui5/webcomponents/dist/List.js"; + +export default function UserSettingsNotificationsViewTemplate(this: UserSettingsNotificationsView) { + return ( + + ); +} diff --git a/packages/fiori/src/bundle.esm.ts b/packages/fiori/src/bundle.esm.ts index 12c4b81ad0184..8bcd67655e6c6 100644 --- a/packages/fiori/src/bundle.esm.ts +++ b/packages/fiori/src/bundle.esm.ts @@ -55,6 +55,9 @@ import UserSettingsAccountView from "./UserSettingsAccountView.js"; import UserSettingsAppearanceView from "./UserSettingsAppearanceView.js"; import UserSettingsAppearanceViewItem from "./UserSettingsAppearanceViewItem.js"; import UserSettingsAppearanceViewGroup from "./UserSettingsAppearanceViewGroup.js"; +import UserSettingsNotificationsView from "./UserSettingsNotificationsView.js"; +import UserSettingsNotificationsViewItem from "./UserSettingsNotificationsViewItem.js"; +import UserSettingsNotificationsViewGroup from "./UserSettingsNotificationsViewGroup.js"; import Timeline from "./Timeline.js"; import TimelineGroupItem from "./TimelineGroupItem.js"; import NavigationLayout from "./NavigationLayout.js"; diff --git a/packages/fiori/src/themes/UserSettingsNotificationsView.css b/packages/fiori/src/themes/UserSettingsNotificationsView.css new file mode 100644 index 0000000000000..5da9c9777e889 --- /dev/null +++ b/packages/fiori/src/themes/UserSettingsNotificationsView.css @@ -0,0 +1,15 @@ +.ui5-user-settings-notifications-view-content { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.ui5-user-settings-notifications-view-list { + padding: 0; + margin: 0; + --ui5-group-header-listitem-background-color: var(--sapList_Background); +} + +slot[name="additionalContent"]::slotted(*) { + display: block; +} diff --git a/packages/fiori/src/themes/UserSettingsNotificationsViewGroup.css b/packages/fiori/src/themes/UserSettingsNotificationsViewGroup.css new file mode 100644 index 0000000000000..cc0b829f65277 --- /dev/null +++ b/packages/fiori/src/themes/UserSettingsNotificationsViewGroup.css @@ -0,0 +1,8 @@ +:host { + background: var(--sapList_Background); +} + +::part(header) { + background: var(--sapList_Background); + border-bottom: none; +} diff --git a/packages/fiori/src/themes/UserSettingsNotificationsViewItem.css b/packages/fiori/src/themes/UserSettingsNotificationsViewItem.css new file mode 100644 index 0000000000000..43d3b1bd7d282 --- /dev/null +++ b/packages/fiori/src/themes/UserSettingsNotificationsViewItem.css @@ -0,0 +1,97 @@ +:host { + --_ui5_user_settings_notifications_item_end_margin: 0.75rem; + min-height: var(--sapElement_LineHeight); +} + +@container style(--ui5_content_density: compact) { + :host { + --_ui5_user_settings_notifications_item_end_margin: 1rem; + min-height: var(--sapElement_Compact_LineHeight); + } +} + +.ui5-user-settings-notifications-item { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + height: 100%; + box-sizing: border-box; +} + +.ui5-user-settings-notifications-item-start { + display: flex; + align-items: center; + flex: 1; + min-width: 0; + gap: 0.75rem; +} + +.ui5-user-settings-notifications-item-texts { + display: flex; + flex-direction: column; + min-width: 0; + overflow: hidden; +} + +.ui5-user-settings-notifications-item-title { + font-family: var(--sapFontFamily); + font-size: var(--sapFontLargeSize); + font-weight: normal; + color: var(--sapList_TextColor); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@container style(--ui5_content_density: compact) { + .ui5-user-settings-notifications-item-title { + font-size: var(--sapFontSize); + } +} + +.ui5-user-settings-notifications-item-byline { + font-family: var(--sapFontFamily); + font-size: var(--sapFontSize); + font-weight: normal; + color: var(--sapContent_LabelColor); + padding-top: 0.5rem; + padding-bottom: 0.125rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.ui5-user-settings-notifications-item-end { + display: flex; + align-items: center; + flex-shrink: 0; + margin-inline-start: var(--_ui5_user_settings_notifications_item_end_margin); + padding-inline-end: 0.25rem; +} + +.ui5-user-settings-notifications-item-arrow { + color: var(--sapContent_IconColor); + width: 0.75rem; + height: 0.75rem; + margin-inline-start: 0.5rem; +} + +.ui5-user-settings-notifications-item.has-byline { + align-items: stretch; + min-height: 5rem; +} + +@container style(--ui5_content_density: compact) { + .ui5-user-settings-notifications-item.has-byline { + min-height: 4rem; + } +} + +.has-byline .ui5-user-settings-notifications-item-start { + align-items: center; +} + +.has-byline .ui5-user-settings-notifications-item-title { + padding-top: 0.125rem; +} diff --git a/packages/fiori/test/pages/UserSettingsDialog.html b/packages/fiori/test/pages/UserSettingsDialog.html index 8a8f0a7ee375c..85892a86f25cc 100644 --- a/packages/fiori/test/pages/UserSettingsDialog.html +++ b/packages/fiori/test/pages/UserSettingsDialog.html @@ -51,6 +51,12 @@ display: block; width: 100%; } + .ui5-user-settings-notifications-detail-description { + display: block; + color: var(--sapContent_LabelColor); + font-size: var(--sapFontSize); + font-family: var(--sapFontFamily); + } @@ -249,251 +255,200 @@ - - - - -
-
- -
- SuccessFactors - Compensation | Learning | HR -
-
-
- - -
-
- - -
-
- -
- S/4HANA | EMEA - Finance EMEA -
-
-
- - -
-
- - -
-
- -
- S/4HANA | AJP - Finance AJP -
-
-
- - -
-
- - - - - - -
-
-
- Allow Notifications -
-
-
- -
-
- - - - Sales - - -
-
-
- Sales Order Updates -
-
-
- - -
-
- - -
-
-
- Sales Order Approvals -
-
-
- - -
-
- - -
-
-
- Sales Order Release -
-
-
- - -
-
- - - - Purchasing - - -
-
-
- Purchase Order Approval -
-
-
- - -
-
- - -
-
-
- Purchase Order Rejection -
-
-
- - -
-
- - -
-
-
- Purchase Order Overdue -
-
-
- - -
-
- - - + + + + Some settings are managed by your organization. Learn More + - - Sales Order Updates - - - - -
-
-
- Allow Sales Order Updates -
-
-
- -
-
- - - - Choose how you get notified - - -
-
-
- In-App Notification - Delivered inside the app -
-
-
- -
-
- - -
-
-
- Allow Fly-Inn - Notifications fly in as banner from the figth se of the application while working -
-
-
- -
-
- - -
-
-
- Push Notifications - Pushed to your device immediately -
-
-
- -
-
- - -
-
-
- E-Mail - Send on your primary e-mail -
-
-
- -
-
- - -
-
-
- Frequency - Pushed to your device immedietly -
-
-
- - - - - -
-
- - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 5 seconds + 10 seconds + Until dismissed + + + + + + + + + + + + + + + + + + + Immediate + Every 15 minutes + Hourly + Daily digest + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Immediate + Every 15 minutes + Daily digest + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -642,14 +597,7 @@ const toastReset = document.getElementById("toastReset"); const toastResetAll = document.getElementById("toastResetAll"); const notificationsItem = document.getElementById("notifications"); - const notificationNavIcon = document.querySelectorAll(".nav-icon"); - const notificationSwitch = document.querySelectorAll(".switch"); - const notificationSecondPage = document.getElementById("notification-second-page"); - const salesOrderList = document.querySelectorAll(".ui5-list-sales-order"); - - const salesOrderSecondPage = document.getElementById("sales-order-second-page"); - - const notificationList = document.querySelectorAll(".custom-list-main"); + const notificationsMainView = document.getElementById("notifications-main-view"); menuShellBar.addEventListener("item-click", function (event) { const item = event.detail.item.getAttribute("data-id"); @@ -755,62 +703,15 @@ //Notification Tab - notificationNavIcon.forEach(icon => { - icon.addEventListener("click", (e) => { - const title = e.target.closest(".list-item").querySelector(".item-title").textContent; - console.log("Navigate to: " + title +" icon clicked"); - notificationSecondPage.selected = true; - notificationSecondPage.text = title; - }); - }); - - notificationList.forEach(item => { - item.addEventListener("item-click", (e) => { - const title = e.detail?.item?.querySelector(".item-title")?.textContent; - console.log("Navigate to: " + title); - notificationSecondPage.selected = true; - notificationSecondPage.text = title; - }); + notificationsMainView.addEventListener("item-click", (e) => { + console.log("Navigate to: " + e.detail.item.text); }); - salesOrderList.forEach(item => { - item.addEventListener("item-click", (e) => { - const title = e.detail?.item?.querySelector(".sales-title")?.textContent; - console.log("Navigate to: " + title); - notificationSecondPage.selected = false; - salesOrderSecondPage.selected = true; - salesOrderSecondPage.text = title; - }); - }); - - notificationsItem.addEventListener("selection-change", (e) => { - if(e?.detail?.view?.id ==='sales-order-second-page'){ - e.preventDefault(); - console.log("Navigate back: " + notificationSecondPage.title); - salesOrderSecondPage.selected = false; - notificationSecondPage.selected = true; - } - }); - - notificationSwitch.forEach(sw => { - sw.addEventListener("change", (e) => { - var title = e.target.closest(".list-item").querySelector(".item-title")?.textContent; - if(!title){ - title = e.target?.closest(".list-item").querySelector(".item-text-title")?.textContent; - } - - const state = e.target.checked ? "ON" : "OFF"; - console.log(title + " switch changed to " + state); - }); - }); - - notificationList.forEach(item => { - item.addEventListener("item-click", (e) => { - const title = e.detail?.item?.querySelector(".item-title")?.textContent; - console.log("Navigate to: " + title); - notificationSecondPage.selected = true; - notificationSecondPage.text = title; - }); + notificationsItem.addEventListener("switch-change", (e) => { + const item = e.detail.item; + const view = item.closest("[ui5-user-settings-notifications-view]"); + const context = view?.text ? `${view.text} > ` : ""; + console.log(`${context}${item.text} switch changed to ${e.detail.checked ? "ON" : "OFF"}`); }); // Theme switching functionality diff --git a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js index 309c4a26d2e76..0543725290ff1 100644 --- a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js +++ b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/main.js @@ -2,6 +2,9 @@ import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js"; +import "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsView.js"; +import "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewGroup.js"; +import "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewItem.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsItem.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js"; diff --git a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html index 39fe370c120b3..81d810a370c81 100644 --- a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html +++ b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.html @@ -205,9 +205,64 @@ - - - + + + + + + + + + + + + + + + + + + Configure how you want to receive SuccessFactors notifications across Compensation, Learning, and HR modules. + + + + + + + + + + + + + + Configure how you want to receive S/4HANA Finance EMEA notifications. + + + + + + + + + + + + + + Control how in-app notifications are displayed inside the application. + + + + + + + + + + diff --git a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx index 3a7b6686ff041..7f674ceb6ed9c 100644 --- a/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx +++ b/packages/website/docs/_samples/fiori/UserSettingsDialog/Basic/sample.tsx @@ -11,6 +11,9 @@ import UserSettingsAccountViewClass from "@ui5/webcomponents-fiori/dist/UserSett import UserSettingsAppearanceViewClass from "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js"; import UserSettingsAppearanceViewGroupClass from "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js"; import UserSettingsAppearanceViewItemClass from "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js"; +import UserSettingsNotificationsViewClass from "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsView.js"; +import UserSettingsNotificationsViewGroupClass from "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewGroup.js"; +import UserSettingsNotificationsViewItemClass from "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewItem.js"; import UserSettingsDialogClass from "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js"; import UserSettingsItemClass from "@ui5/webcomponents-fiori/dist/UserSettingsItem.js"; import UserSettingsViewClass from "@ui5/webcomponents-fiori/dist/UserSettingsView.js"; @@ -50,6 +53,15 @@ const UserSettingsAppearanceViewGroup = createReactComponent( const UserSettingsAppearanceViewItem = createReactComponent( UserSettingsAppearanceViewItemClass, ); +const UserSettingsNotificationsView = createReactComponent( + UserSettingsNotificationsViewClass, +); +const UserSettingsNotificationsViewGroup = createReactComponent( + UserSettingsNotificationsViewGroupClass, +); +const UserSettingsNotificationsViewItem = createReactComponent( + UserSettingsNotificationsViewItemClass, +); const UserSettingsDialog = createReactComponent(UserSettingsDialogClass); const UserSettingsItem = createReactComponent(UserSettingsItemClass); const UserSettingsView = createReactComponent(UserSettingsViewClass); @@ -541,12 +553,65 @@ function App() { headerText="Notifications" onSelectionChange={handleSettingsDialogItemSelectionChange} > - - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js index bd700649dca4f..7e9acf15fd865 100644 --- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js +++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js @@ -55,6 +55,9 @@ import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js"; +import "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsView.js"; +import "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewGroup.js"; +import "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewItem.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsView.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsItem.js"; import "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js"; diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html index b49ba763ee5a6..48744b997f366 100644 --- a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html +++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html @@ -452,9 +452,22 @@ - - - + + + + + + + + + + + + + + diff --git a/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.tsx b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.tsx new file mode 100644 index 0000000000000..9e8f4da7b6083 --- /dev/null +++ b/packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.tsx @@ -0,0 +1,1210 @@ +import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js"; +import { type UI5CustomEvent } from "@ui5/webcomponents-base"; +import { useRef, useCallback, useState } from "react"; +import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js"; + +import ShellBarClass from "@ui5/webcomponents-fiori/dist/ShellBar.js"; +import ShellBarBrandingClass from "@ui5/webcomponents-fiori/dist/ShellBarBranding.js"; +import ShellBarItemClass from "@ui5/webcomponents-fiori/dist/ShellBarItem.js"; +import ShellBarSearchClass from "@ui5/webcomponents-fiori/dist/ShellBarSearch.js"; +import ShellBarSpacerClass from "@ui5/webcomponents-fiori/dist/ShellBarSpacer.js"; +import SearchScopeClass from "@ui5/webcomponents-fiori/dist/SearchScope.js"; +import SearchItemClass from "@ui5/webcomponents-fiori/dist/SearchItem.js"; +import NavigationLayoutClass from "@ui5/webcomponents-fiori/dist/NavigationLayout.js"; +import SideNavigationClass from "@ui5/webcomponents-fiori/dist/SideNavigation.js"; +import SideNavigationItemClass from "@ui5/webcomponents-fiori/dist/SideNavigationItem.js"; +import SideNavigationSubItemClass from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js"; +import NavigationLayoutMode from "@ui5/webcomponents-fiori/dist/types/NavigationLayoutMode.js"; +import NotificationListClass from "@ui5/webcomponents-fiori/dist/NotificationList.js"; +import NotificationListGroupItemClass from "@ui5/webcomponents-fiori/dist/NotificationListGroupItem.js"; +import NotificationListItemClass from "@ui5/webcomponents-fiori/dist/NotificationListItem.js"; +import UserMenuClass from "@ui5/webcomponents-fiori/dist/UserMenu.js"; +import UserMenuAccountClass from "@ui5/webcomponents-fiori/dist/UserMenuAccount.js"; +import UserMenuItemClass from "@ui5/webcomponents-fiori/dist/UserMenuItem.js"; +import UserMenuItemGroupClass from "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js"; +import UserSettingsAccountViewClass from "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js"; +import UserSettingsAppearanceViewClass from "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js"; +import UserSettingsAppearanceViewGroupClass from "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewGroup.js"; +import UserSettingsAppearanceViewItemClass from "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceViewItem.js"; +import UserSettingsNotificationsViewClass from "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsView.js"; +import UserSettingsNotificationsViewGroupClass from "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewGroup.js"; +import UserSettingsNotificationsViewItemClass from "@ui5/webcomponents-fiori/dist/UserSettingsNotificationsViewItem.js"; +import UserSettingsDialogClass from "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js"; +import UserSettingsItemClass from "@ui5/webcomponents-fiori/dist/UserSettingsItem.js"; +import UserSettingsViewClass from "@ui5/webcomponents-fiori/dist/UserSettingsView.js"; + +import AvatarClass from "@ui5/webcomponents/dist/Avatar.js"; +import BarClass from "@ui5/webcomponents/dist/Bar.js"; +import ButtonClass from "@ui5/webcomponents/dist/Button.js"; +import DialogClass from "@ui5/webcomponents/dist/Dialog.js"; +import IconClass from "@ui5/webcomponents/dist/Icon.js"; +import LabelClass from "@ui5/webcomponents/dist/Label.js"; +import MenuClass from "@ui5/webcomponents/dist/Menu.js"; +import MenuItemClass from "@ui5/webcomponents/dist/MenuItem.js"; +import MessageStripClass from "@ui5/webcomponents/dist/MessageStrip.js"; +import OptionClass from "@ui5/webcomponents/dist/Option.js"; +import PanelClass from "@ui5/webcomponents/dist/Panel.js"; +import ResponsivePopoverClass from "@ui5/webcomponents/dist/ResponsivePopover.js"; +import SelectClass from "@ui5/webcomponents/dist/Select.js"; +import SwitchClass from "@ui5/webcomponents/dist/Switch.js"; +import TagClass from "@ui5/webcomponents/dist/Tag.js"; +import TextClass from "@ui5/webcomponents/dist/Text.js"; +import TitleClass from "@ui5/webcomponents/dist/Title.js"; +import ToggleButtonClass from "@ui5/webcomponents/dist/ToggleButton.js"; +import ToastClass from "@ui5/webcomponents/dist/Toast.js"; + +import "@ui5/webcomponents-icons/dist/da.js"; +import "@ui5/webcomponents-icons/dist/da-2.js"; +import "@ui5/webcomponents-icons/dist/menu2.js"; +import "@ui5/webcomponents-icons/dist/settings.js"; +import "@ui5/webcomponents-icons/dist/sys-help.js"; +import "@ui5/webcomponents-icons/dist/home.js"; +import "@ui5/webcomponents-icons/dist/favorite-list.js"; +import "@ui5/webcomponents-icons/dist/account.js"; +import "@ui5/webcomponents-icons/dist/business-by-design.js"; +import "@ui5/webcomponents-icons/dist/crm-sales.js"; +import "@ui5/webcomponents-icons/dist/s4hana.js"; +import "@ui5/webcomponents-icons/dist/add.js"; +import "@ui5/webcomponents-icons/dist/manager-insight.js"; +import "@ui5/webcomponents-icons/dist/action-settings.js"; +import "@ui5/webcomponents-icons/dist/sort.js"; +import "@ui5/webcomponents-icons/dist/message-information.js"; +import "@ui5/webcomponents-icons/dist/expense-report.js"; +import "@ui5/webcomponents-icons/dist/user-settings.js"; +import "@ui5/webcomponents-icons/dist/person-placeholder.js"; +import "@ui5/webcomponents-icons/dist/palette.js"; +import "@ui5/webcomponents-icons/dist/iphone.js"; +import "@ui5/webcomponents-icons/dist/qr-code.js"; +import "@ui5/webcomponents-icons/dist/bell.js"; +import "@ui5/webcomponents-icons/dist/reset.js"; +import "@ui5/webcomponents-icons/dist/globe.js"; +import "@ui5/webcomponents-icons/dist/official-service.js"; +import "@ui5/webcomponents-icons/dist/collaborate.js"; +import "@ui5/webcomponents-icons/dist/private.js"; +import "@ui5/webcomponents-icons/dist/accelerated.js"; + +const ShellBar = createReactComponent(ShellBarClass); +const ShellBarBranding = createReactComponent(ShellBarBrandingClass); +const ShellBarItem = createReactComponent(ShellBarItemClass); +const ShellBarSearch = createReactComponent(ShellBarSearchClass); +const ShellBarSpacer = createReactComponent(ShellBarSpacerClass); +const SearchScope = createReactComponent(SearchScopeClass); +const SearchItem = createReactComponent(SearchItemClass); +const NavigationLayout = createReactComponent(NavigationLayoutClass); +const SideNavigation = createReactComponent(SideNavigationClass); +const SideNavigationItem = createReactComponent(SideNavigationItemClass); +const SideNavigationSubItem = createReactComponent(SideNavigationSubItemClass); +const NotificationList = createReactComponent(NotificationListClass); +const NotificationListGroupItem = createReactComponent(NotificationListGroupItemClass); +const NotificationListItem = createReactComponent(NotificationListItemClass); +const UserMenu = createReactComponent(UserMenuClass); +const UserMenuAccount = createReactComponent(UserMenuAccountClass); +const UserMenuItem = createReactComponent(UserMenuItemClass); +const UserMenuItemGroup = createReactComponent(UserMenuItemGroupClass); +const UserSettingsAccountView = createReactComponent(UserSettingsAccountViewClass); +const UserSettingsAppearanceView = createReactComponent(UserSettingsAppearanceViewClass); +const UserSettingsAppearanceViewGroup = createReactComponent(UserSettingsAppearanceViewGroupClass); +const UserSettingsAppearanceViewItem = createReactComponent(UserSettingsAppearanceViewItemClass); +const UserSettingsNotificationsView = createReactComponent(UserSettingsNotificationsViewClass); +const UserSettingsNotificationsViewGroup = createReactComponent(UserSettingsNotificationsViewGroupClass); +const UserSettingsNotificationsViewItem = createReactComponent(UserSettingsNotificationsViewItemClass); +const UserSettingsDialog = createReactComponent(UserSettingsDialogClass); +const UserSettingsItem = createReactComponent(UserSettingsItemClass); +const UserSettingsView = createReactComponent(UserSettingsViewClass); +const Avatar = createReactComponent(AvatarClass); +const Bar = createReactComponent(BarClass); +const Button = createReactComponent(ButtonClass); +const Dialog = createReactComponent(DialogClass); +const Icon = createReactComponent(IconClass); +const Label = createReactComponent(LabelClass); +const Menu = createReactComponent(MenuClass); +const MenuItem = createReactComponent(MenuItemClass); +const MessageStrip = createReactComponent(MessageStripClass); +const Option = createReactComponent(OptionClass); +const Panel = createReactComponent(PanelClass); +const ResponsivePopover = createReactComponent(ResponsivePopoverClass); +const Select = createReactComponent(SelectClass); +const Switch = createReactComponent(SwitchClass); +const Tag = createReactComponent(TagClass); +const Text = createReactComponent(TextClass); +const Title = createReactComponent(TitleClass); +const ToggleButton = createReactComponent(ToggleButtonClass); +const Toast = createReactComponent(ToastClass); + +const scopeData = [ + { name: "Laptop", scope: "products" }, + { name: "Leave Requests", scope: "apps" }, + { name: "Log work", scope: "apps" }, + { name: "Manage Products", scope: "apps" }, + { name: "Mobile Phones", scope: "products" }, + { name: "Tablet", scope: "products" }, +]; + +function getScopeItems(scope?: string) { + if (!scope) { + return scopeData; + } + return scopeData.filter((item) => item.scope === scope); +} + +function App() { + const navigationLayoutRef = useRef(null); + const notificationsPopoverRef = useRef(null); + const notificationListGroupGrowingRef = useRef(null); + const sortMenuRef = useRef(null); + const btnSortRef = useRef(null); + const clearAllDialogRef = useRef(null); + const quickCreateDialogRef = useRef(null); + const userMenuRef = useRef(null); + const settingsDialogRef = useRef(null); + const mobileSecondPageRef = useRef(null); + const toastResetRef = useRef(null); + const toastResetAllRef = useRef(null); + + const [daIcon, setDaIcon] = useState("sap-icon://da"); + const [contentTitle, setContentTitle] = useState("Home"); + const [searchScopeValue, setSearchScopeValue] = useState("all"); + const [notificationItems, setNotificationItems] = useState>([]); + const [itemsLoaded, setItemsLoaded] = useState(6); + const [notificationListCleared, setNotificationListCleared] = useState(false); + + const handleToggleButtonClick = useCallback( + (e: UI5CustomEvent) => { + const btn = e.target as ToggleButtonClass; + setDaIcon(btn.pressed ? "sap-icon://da-2" : "sap-icon://da"); + }, + [], + ); + + const handleMenuButtonClick = useCallback(() => { + const layout = navigationLayoutRef.current; + if (layout) { + layout.mode = layout.isSideCollapsed() + ? NavigationLayoutMode.Expanded + : NavigationLayoutMode.Collapsed; + } + }, []); + + const handleSideNavigationSelectionChange = useCallback( + (e: UI5CustomEvent) => { + setContentTitle(e.detail.item?.text ?? ""); + }, + [], + ); + + const handleQuickCreateClick = useCallback(() => { + if (quickCreateDialogRef.current) { + quickCreateDialogRef.current.open = true; + } + }, []); + + const handleQuickCreateDialogClose = useCallback(() => { + if (quickCreateDialogRef.current) { + quickCreateDialogRef.current.open = false; + } + }, []); + + const handleNotificationsClick = useCallback( + (e: UI5CustomEvent) => { + e.preventDefault(); + const popover = notificationsPopoverRef.current; + if (popover) { + popover.opener = e.detail.targetRef; + popover.open = true; + } + }, + [], + ); + + const handleNotificationItemClose = useCallback( + (e: UI5CustomEvent) => { + const item = e.detail.item as NotificationListItemClass & { hidden: boolean }; + item.hidden = true; + + let visibleItems = 0; + Array.from(item.parentElement?.childNodes ?? []).forEach((node) => { + const el = node as Element & { hidden?: boolean }; + if (el.nodeName === "UI5-LI-NOTIFICATION" && !el.hidden) { + visibleItems++; + } + }); + + if (visibleItems === 0 && item.parentElement) { + (item.parentElement as HTMLElement & { hidden: boolean }).hidden = true; + } + }, + [], + ); + + const handleLoadMore = useCallback(() => { + const group = notificationListGroupGrowingRef.current; + if (!group) return; + + const itemsToLoad = 10; + group.loading = true; + + setTimeout(() => { + setItemsLoaded((prev) => { + const newItems: Array<{ id: number; title: string; description: string }> = []; + for (let i = prev + 1; i <= prev + itemsToLoad; i++) { + newItems.push({ id: i, title: `Notification Title ${i}`, description: `Description ${i}` }); + } + setNotificationItems((existing) => [...existing, ...newItems]); + if (group) { + group.loading = false; + } + return prev + itemsToLoad; + }); + }, 2000); + }, []); + + const handleClearAllClick = useCallback(() => { + if (clearAllDialogRef.current) { + clearAllDialogRef.current.open = true; + } + }, []); + + const handleClearAllDialogClose = useCallback(() => { + if (clearAllDialogRef.current) { + clearAllDialogRef.current.open = false; + } + }, []); + + const handleClearAllAction = useCallback(() => { + setNotificationListCleared(true); + if (clearAllDialogRef.current) { + clearAllDialogRef.current.open = false; + } + }, []); + + const handleSortClick = useCallback(() => { + const menu = sortMenuRef.current; + const btn = btnSortRef.current; + if (menu && btn) { + menu.opener = btn; + menu.open = true; + } + }, []); + + const handleShellbarProfileClick = useCallback( + (e: UI5CustomEvent) => { + const menu = userMenuRef.current; + if (menu) { + menu.opener = e.detail.targetRef; + menu.open = true; + } + }, + [], + ); + + const handleUserMenuItemClick = useCallback( + (e: UI5CustomEvent) => { + const item = e.detail.item.getAttribute("data-id"); + switch (item) { + case "setting": + if (settingsDialogRef.current) { + settingsDialogRef.current.open = true; + } + console.log("Open Setting Dialog"); + break; + case "privacy-policy": + console.log("Privacy Policy"); + break; + case "terms-of-use": + console.log("Terms of Use"); + break; + default: + console.log("Default"); + } + }, + [], + ); + + const handleUserMenuAvatarClick = useCallback(() => { + console.log("Avatar clicked"); + }, []); + + const handleUserMenuManageAccountClick = useCallback(() => { + console.log("Manage account clicked"); + }, []); + + const handleUserMenuEditAccountsClick = useCallback(() => { + console.log("Edit accounts clicked"); + }, []); + + const handleUserMenuChangeAccount = useCallback( + (e: UI5CustomEvent) => { + console.log("Change account", e.detail); + const selectedAccount = e.detail.selectedAccount as UserMenuAccountClass & { loading: boolean }; + selectedAccount.loading = true; + setTimeout(() => { + selectedAccount.loading = false; + }, 1000); + }, + [], + ); + + const handleUserMenuSignOutClick = useCallback( + (e: UI5CustomEvent) => { + console.log("Sign Out clicked"); + const result = prompt("Sign Out", "Are you sure you want to sign out?"); + if (result) { + if (userMenuRef.current) { + userMenuRef.current.open = false; + } + } + e.preventDefault(); + }, + [], + ); + + const handleAppearanceViewSelectionChange = useCallback( + (e: UI5CustomEvent) => { + const selectedItem = e.detail.item; + if (selectedItem?.itemKey) { + setTheme(selectedItem.itemKey); + } + }, + [], + ); + + const handleMobile1ButtonClick = useCallback(() => { + if (mobileSecondPageRef.current) { + mobileSecondPageRef.current.selected = true; + mobileSecondPageRef.current.text = "iOS"; + } + }, []); + + const handleMobile2ButtonClick = useCallback(() => { + if (mobileSecondPageRef.current) { + mobileSecondPageRef.current.selected = true; + mobileSecondPageRef.current.text = "Android"; + } + }, []); + + const handleResetAllButtonClick = useCallback(() => { + if (toastResetRef.current) { + toastResetRef.current.open = true; + } + }, []); + + const handleResetPersonalizationClick = useCallback(() => { + if (toastResetRef.current) { + toastResetRef.current.open = true; + } + }, []); + + const handleResetAllClick = useCallback(() => { + if (toastResetAllRef.current) { + toastResetAllRef.current.open = true; + } + }, []); + + const handleSettingsSelectionChange = useCallback( + (e: UI5CustomEvent) => { + console.log(`Selection change: ${e.detail.item?.text}`, e.detail); + if (e.detail.item?.text === "Language and Region") { + e.detail.item.loading = true; + e.detail.item.loadingReason = "Language & Region loading data..."; + setTimeout(() => { + e.detail.item.loading = false; + }, 500); + } + }, + [], + ); + + const handleSettingsItemSelectionChange = useCallback( + (e: UI5CustomEvent) => { + console.log(`Selection change: ${e.detail.view?.text}`, e.detail); + }, + [], + ); + + const handleSettingsOpen = useCallback((e: Event) => { + console.log("Settings dialog opened", e); + }, []); + + const handleSettingsClose = useCallback((e: Event) => { + console.log("Settings dialog closed", e); + }, []); + + const handleScopeChange = useCallback( + (e: UI5CustomEvent) => { + const scope = e.detail.scope.value === "all" ? "" : e.detail.scope.value; + setSearchScopeValue(scope); + }, + [], + ); + + const currentScopeItems = getScopeItems(searchScopeValue || undefined); + + return ( + <> + + + + + + VEGA CRM + + + + + + + + +
+ + + Notifications + + +
+ + {notificationListCleared ? ( + + ) : ( + + + + + Sales + 11:13 + + + + Good morning! Don't forget your daily sales target is $2,000, which needs to be fulfilled by the end of the business day. Let's make it a great sales day! + + + + Sales + 11:05 + + + + + You have a client meeting scheduled at 3 PM today with Acme Corp. Location: Zoom - link in calendar. + + + + Sales + 11:00 + + + + + Reminder to follow up with John Doe from XYZ Ltd. Discuss the proposal sent last week. + + + + Accountant + 10:15 + + + + Reminder: The deadline to submit this quarter's budget report is this Friday. + + + + Notification + 09:30 + + + + You have 5 pending expense claims awaiting your approval. Please review them by EOD. + + + + Accountant + 09:30 + + + + Just a heads-up that we will begin the financial reconciliation process for this month next Monday. + + {notificationItems.map((item) => ( + + + Product Name + Now + + + + {item.description} + + ))} + + + + + + Sales + 1 Day + + + + A new lead, Jane Smith from Innovative Tech, has been assigned to you. Contact details in CRM. + + + + Sales + 1 Day + + + + Please submit your end-of-day sales report through the portal before logging off today. + + + + Accountant + 1 Day + + + + Reminder: The tax filing deadline for this quarter is approaching in two weeks. + + + + Notification + 1 Day + + + + All invoices for this month have been successfully processed and payments scheduled. + + + + )} + + + + + + + + + Are you sure you want to clear all the notifications? + + + + + + + + + + + +
+ + + + Reset your personalization settings for the launchpad (such as + theme, language, user activities, and home page content). + + + + + + + +
+
+ Optimize for Touch Input + +
+ +
+ + + + + + + + + + + + + + + + + + + Close to apply your chosen language – the page will reload. + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + + + + + + + Enable access to your site from the SAP Mobile Start application. + + + + Scan the QR Code to install the mobile application + + + + + + + + + + + + + + + + + + + + + Changes Reset. + + + + + + All changes Reset. + + + + + + ); +} + +export default App;