feat(ui5-li-notification, ui5-li-notification-group): add busy property (#1674)

Add "busy" property to NotificationList(Group)ItemBase to enable users show busy state on notification item and group level.

FIXES: #1672

Author: ilhan007

packages/fiori/src/NotificationListGroupItem.hbs

@@ -74,4 +74,8 @@
 	<ui5-list class="ui5-nli-group-items">
 		<slot></slot>
 	</ui5-list>
+
+	{{#if busy}} 
+		<ui5-busyindicator active size="Medium" class="ui5-nli-busy"></ui5-busyindicator>
+	{{/if}}
 </li>

packages/fiori/src/NotificationListGroupItem.js

@@ -2,6 +2,7 @@ import { fetchI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Priority from "@ui5/webcomponents/dist/types/Priority.js";
 import List from "@ui5/webcomponents/dist/List.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import NotificationListItemBase from "./NotificationListItemBase.js";
@@ -125,11 +126,28 @@ class NotificationListGroupItem extends NotificationListItemBase {
 		return NotificationListGroupItemTemplate;
 	}
 
+	onBeforeRendering() {
+		if (this.busy) {
+			this.clearChildBusyIndicator();
+		}
+	}
+
+	/**
+	 * Clears child items busy state to show a single busy over the entire group,
+	 * instead of multiple BusyIndicator instances
+	 */
+	clearChildBusyIndicator() {
+		this.items.forEach(item => {
+			item.busy = false;
+		});
+	}
+
 	static async onDefine() {
 		await Promise.all([
 			List.define(),
 			Button.define(),
 			Icon.define(),
+			BusyIndicator.define(),
 			Popover.define(),
 			fetchI18nBundle("@ui5/webcomponents-fiori"),
 		]);

packages/fiori/src/NotificationListItem.hbs

@@ -91,4 +91,8 @@
 	<div class="ui5-nli-avatar">
 		<slot name="avatar"></slot>
 	</div>
+
+	{{#if busy}} 
+		<ui5-busyindicator active size="Medium" class="ui5-nli-busy"></ui5-busyindicator>
+	{{/if}}
 </li>

packages/fiori/src/NotificationListItem.js

@@ -5,6 +5,7 @@ import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 
 import Priority from "@ui5/webcomponents/dist/types/Priority.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import Link from "@ui5/webcomponents/dist/Link.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
@@ -199,6 +200,7 @@ class NotificationListItem extends NotificationListItemBase {
 		await Promise.all([
 			Button.define(),
 			Icon.define(),
+			BusyIndicator.define(),
 			Link.define(),
 			Popover.define(),
 			fetchI18nBundle("@ui5/webcomponents-fiori"),

packages/fiori/src/NotificationListItemBase.js

@@ -55,6 +55,17 @@ const metadata = {
 		showClose: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines if a busy indicator would be displayed over the item.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.0.0-rc.8
+		 */
+		busy: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.fiori.NotificationListItemBase.prototype */ {
 

packages/fiori/src/themes/NotificationListItemBase.css

@@ -27,6 +27,18 @@
 	pointer-events: none;
 }
 
+:host([busy])  {
+	opacity: 0.6;
+	pointer-events: none;
+}
+
+:host([busy]) .ui5-nli-busy {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
 .ui5-nli-action {
 	flex-shrink: 0;
 	margin-right: 0.5rem;

packages/fiori/test/pages/NotificationListGroupItem.html

@@ -108,6 +108,7 @@ <h3>Events on ui5-list level</h3>
 			priority="High"
 		>
 			<ui5-li-notification
+				busy
 				show-close
 				heading="New order (#2900) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
 				priority="High"
@@ -151,12 +152,14 @@ <h3>Events on ui5-list level</h3>
 		</ui5-li-notification-group>
 
 		<ui5-li-notification-group
+			id="busyGroup"
 			show-close
 			show-counter
 			priority="High"
 			heading="Meetings With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
 		>
 			<ui5-li-notification
+				busy
 				show-close
 				heading="New order (#35001) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
 				priority="High"
@@ -195,7 +198,7 @@ <h3>Events on ui5-list level</h3>
 				<span slot="footnotes">3 Days</span>
 			</ui5-li-notification>
 
-			<ui5-notification-overflow-action icon="accept" text="Accept All" slot="actions"></ui5-notification-overflow-action>
+			<ui5-notification-overflow-action id="btnMakeGroupBusy"icon="accept" text="Accept All" slot="actions"></ui5-notification-overflow-action>
 		</ui5-li-notification-group>
 	</ui5-list>
 
@@ -313,6 +316,16 @@ <h3>Events on ui5-list level</h3>
 			notificationsPopover.openBy(openNotifications);
 		});
 
+		btnMakeGroupBusy.addEventListener("click", function(event) {
+			busyGroup.busy = true;
+
+			setTimeout(function() {
+				busyGroup.busy = false;
+			}, 2000);
+		});
+
+		
+
 		shellbar.addEventListener("ui5-notificationsClick", function(event) {
 			event.preventDefault();
 			notificationsPopover.openBy(event.detail.targetRef);

packages/fiori/test/pages/NotificationListItem.html

@@ -52,6 +52,7 @@ <h3>Events on ui5-list level</h3>
 	<ui5-list id="notificationList" header-text="Notifications heading and content 'truncates'">
 
 		<ui5-li-notification
+			busy
 			show-close
 			heading="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
 		>
@@ -247,8 +248,15 @@ <h3>Events on ui5-list level</h3>
 		});
 
 		notificationList2.addEventListener("itemClick", function(event) {
-			event.detail.item.read = true;
-			wcToastBS.textContent = event.detail.item.heading;
+			var item = event.detail.item;
+
+			setTimeout(function() {
+				item.busy = false;
+				item.read = true;
+			}, 1000);
+
+			item.busy = true;
+			wcToastBS.textContent = item.heading;
 			wcToastBS.show();
 		});
 

packages/fiori/test/pages/NotificationList_test_page.html

@@ -124,6 +124,7 @@
 
 				<ui5-li-notification
 					id="nli4"
+					busy
 					wrap
 					show-close
 					heading="New payment #2901"

packages/fiori/test/specs/NotificationList.spec.js

@@ -105,6 +105,13 @@ describe("Notification List Item Tests", () => {
 			"The custom actions are hidden when the group is collapsed");
 	});
 
+	it("tests busy indicator is displayed", () => {
+		const busyItem = $("#nli4");
+		const busyIndicator = busyItem.shadow$(".ui5-nli-busy");
+
+		assert.ok(busyIndicator.isExisting(), "The busy indicator is displayed");
+	});
+
 	it("tests List Group Item ACC invisible text", () => {
 		const EXPECTED_RESULT = "Notification group High Priority Counter 2";
 		const firstGroupItem = $("#nlgi1");