From bd0859ebf0e30513f0b19bef02a74583ad08b006 Mon Sep 17 00:00:00 2001 From: Vadim Lev Date: Tue, 20 Dec 2022 06:59:24 +0200 Subject: [PATCH] add notification service --- .../notifications/notification-manager.tsx | 56 +++++++++++++++---- .../notifications/notification-service.ts | 31 ++++++++++ .../modules/workflow-definitions/plugin.tsx | 16 ++++-- 3 files changed, 87 insertions(+), 16 deletions(-) create mode 100644 src/designer/elsa-workflows-designer/src/modules/notifications/notification-service.ts diff --git a/src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx b/src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx index ae2594a56..dd2bb5677 100644 --- a/src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx +++ b/src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx @@ -19,7 +19,7 @@ export class NotificationManager { private notyfs: Map = new Map(); constructor() { - this.notyf = new Notyf({ types: [{ type: 'regular', duration: 3000, className: '' }] }); + this.notyf = new Notyf({ types: [{ type: 'regular', duration: 3000 }] }); this.eventBus = Container.get(EventBus); this.eventBus.on(NotificationEventTypes.Add, this.handleAddNotification); @@ -34,7 +34,7 @@ export class NotificationManager { handleAddNotification = (e: Notification) => { if (!this.isOpened) { - this.notyfs.set(e.id, this.notyf.success({ message: e.message, type: 'regular', duration: 4000, className: 'p-3 rounded bg-white shadow-lg' })); + this.notyfs.set(e.id, this.notyf.success({ message: e.message, type: 'regular', duration: 400 })); } notificationStore.notifications = [e, ...notificationStore.notifications]; }; @@ -42,7 +42,7 @@ export class NotificationManager { handleUpdateNotification = (e: Notification) => { if (!this.isOpened) { this.notyf.dismiss(this.notyfs.get(e.id)); - this.notyfs.set(e.id, this.notyf.success({ message: e.message, type: 'regular', duration: 4000, className: 'p-4 rounded bg-white shadow-lg' })); + this.notyfs.set(e.id, this.notyf.success({ message: e.message, type: 'regular', duration: 4000 })); } notificationStore.notifications = [e, ...notificationStore.notifications]; }; @@ -57,9 +57,44 @@ export class NotificationManager { render() { const { notifications } = notificationStore; - console.log(notifications) + console.log(notifications); return ( +
+ {notifications &&
+ {notifications.map(item => ( +
+
+
+
+ +
+
+

{item.title}

+

{item.text}

+
+
+ +
+
+
+
+ ))} +
}
{notifications.length === 0 &&
There is no notifications yet
} +
    {notifications.map(notif => ( -
      -
    • -
      - - -
      +
    • +
      +

      {notif.message}

      @@ -129,8 +162,8 @@ export class NotificationManager {
      • -
    ))} +
@@ -139,3 +172,4 @@ export class NotificationManager { ); } } + diff --git a/src/designer/elsa-workflows-designer/src/modules/notifications/notification-service.ts b/src/designer/elsa-workflows-designer/src/modules/notifications/notification-service.ts new file mode 100644 index 000000000..7fa563e57 --- /dev/null +++ b/src/designer/elsa-workflows-designer/src/modules/notifications/notification-service.ts @@ -0,0 +1,31 @@ +import notificationStore from "./notification-store"; + + + +interface Notification { + id?: number | any; + title: string; + text: string; +} + +export class NotificationService { + constructor() { + } + + static createNotification = (notification: Notification ): Notification => { + notificationStore.notifications = [...notificationStore.notifications, notification] + return notification; + } + + static updateNotification = (notification: Notification, obj: Notification) => { + console.log(notification); + const notifIndex = notificationStore.notifications.findIndex(item => item.id === notification.id) + + const notif = notificationStore.notifications.find(item => item.id === notification.id) + notif.title = obj.title; + notif.text = obj.text; + + const filtered = notificationStore.notifications.filter(item => item.id !== notification.id) + notificationStore.notifications = [...filtered, notificationStore.notifications[notifIndex] = notif] + } +} \ No newline at end of file diff --git a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx index 7690ce687..346aee034 100644 --- a/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx +++ b/src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx @@ -21,6 +21,8 @@ import {ExportWorkflowRequest, ImportWorkflowRequest, WorkflowDefinitionsApi} fr import {DefaultModalActions, ModalDialogInstance, ModalDialogService} from "../../components/shared/modal-dialog"; import {isEqual} from 'lodash' import {htmlToElement, isNullOrWhitespace} from "../../utils"; +import {NotificationService} from "../notifications/notification-service"; +import {uuid} from "@antv/x6/es/util/string/uuid"; const FlowchartTypeName = 'Elsa.Flowchart'; @@ -192,13 +194,17 @@ export class WorkflowDefinitionsPlugin implements Plugin { private onPublishClicked = async (e: CustomEvent) => { e.detail.begin(); + const notification = NotificationService.createNotification({title: 'Publishing', id: uuid(), text: 'Workflow is being publishing. Please wait'}) const workflowDefinition = await this.workflowDefinitionEditorElement.getWorkflowDefinition(); - await this.eventBus.emit(NotificationEventTypes.Add, this, {id: workflowDefinition.definitionId, message: `Starting publishing ${workflowDefinition.name}`}); + //await this.eventBus.emit(NotificationEventTypes.Add, this, {id: workflowDefinition.definitionId, message: `Starting publishing ${workflowDefinition.name}`}); await this.saveWorkflowDefinition(workflowDefinition, true); - setTimeout(async () => { - await this.eventBus.emit(NotificationEventTypes.Update, this, {id: workflowDefinition.definitionId, message: `${workflowDefinition.name} publish finished`}); - e.detail.complete(); - }, 2000) + + NotificationService.updateNotification(notification, {title: 'Workflow published', text: 'Published !'}) + e.detail.complete(); + // setTimeout(async () => { + // await this.eventBus.emit(NotificationEventTypes.Update, this, {id: workflowDefinition.definitionId, message: `${workflowDefinition.name} publish finished`}); + // e.detail.complete(); + // }, 2000) }