From 53ed26e24eebfbe787ea6f2cb155bc58a90e36ec Mon Sep 17 00:00:00 2001 From: Vadim Lev Date: Tue, 20 Dec 2022 23:16:28 +0200 Subject: [PATCH] add notification awhile component to view --- .../src/components.d.ts | 16 +++++ .../src/modules/notifications/models.ts | 7 +- .../notifications/notification-awhile.tsx | 61 ++++++++++++++++ ...on-manager.ts => notification-manager.tsx} | 71 ++++++------------- .../notifications/notification-service.ts | 15 ++-- 5 files changed, 105 insertions(+), 65 deletions(-) create mode 100644 src/designer/elsa-workflows-designer/src/modules/notifications/notification-awhile.tsx rename src/designer/elsa-workflows-designer/src/modules/notifications/{notification-manager.ts => notification-manager.tsx} (66%) diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts index caa863323..ac2c21708 100644 --- a/src/designer/elsa-workflows-designer/src/components.d.ts +++ b/src/designer/elsa-workflows-designer/src/components.d.ts @@ -10,6 +10,7 @@ import { ActivityDriverRegistry, ContainerActivityComponent } from "./services"; import { Activity, ActivityDeletedArgs, ActivitySelectedArgs, ChildActivitySelectedArgs, ContainerSelectedArgs, EditChildActivityArgs, GraphUpdatedArgs, IntellisenseContext, SelectListItem, TabChangedArgs, TabDefinition, Variable, WorkflowInstance, WorkflowInstanceSummary } from "./models"; import { ActivityUpdatedArgs, DeleteActivityRequestedArgs } from "./modules/workflow-definitions/components/activity-properties-editor"; import { PublishClickedArgs } from "./modules/activity-definitions/components/publish-button"; +import { NotificationType } from "./modules/notifications/models"; import { Button } from "./components/shared/button-group/models"; import { AddActivityArgs, RenameActivityArgs, UpdateActivityArgs } from "./components/designer/canvas/canvas"; import { ActivityInputContext } from "./services/node-input-driver"; @@ -63,6 +64,9 @@ export namespace Components { interface ElsaActivityPublishButton { "publishing": boolean; } + interface ElsaAwhileNotifications { + "notification": NotificationType; + } interface ElsaButtonGroup { "buttons": Array + + + + + ) + : null + ) + } +} diff --git a/src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.ts b/src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx similarity index 66% rename from src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.ts rename to src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx index c491d1c20..d58804e67 100644 --- a/src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.ts +++ b/src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx @@ -3,7 +3,7 @@ import { Container } from 'typedi'; import notificationStore from './notification-store'; import { EventBus } from '../../services'; import { Notyf, NotyfNotification } from 'notyf'; -import { Notification } from './models'; +import { NotificationType } from './models'; import { NotificationEventTypes } from './event-types'; @Component({ @@ -21,10 +21,10 @@ export class NotificationManager { constructor() { this.notyf = new Notyf({ types: [{ type: 'regular', duration: 3000 }] }); - this.eventBus = Container.get(EventBus); - this.eventBus.on(NotificationEventTypes.Add, this.handleAddNotification); - this.eventBus.on(NotificationEventTypes.Update, this.handleUpdateNotification); - this.eventBus.on(NotificationEventTypes.Toggle, this.handleToggle); + // this.eventBus = Container.get(EventBus); + // this.eventBus.on(NotificationEventTypes.Add, this.handleAddNotification); + // this.eventBus.on(NotificationEventTypes.Update, this.handleUpdateNotification); + // this.eventBus.on(NotificationEventTypes.Toggle, this.handleToggle); } deleteNotif = (id) => { @@ -32,20 +32,20 @@ export class NotificationManager { notificationStore.notifications = notificationStore.notifications.filter(item => item.id !== id) } - handleAddNotification = (e: Notification) => { - if (!this.isOpened) { - this.notyfs.set(e.id, this.notyf.success({ message: e.message, type: 'regular', duration: 400 })); - } - notificationStore.notifications = [e, ...notificationStore.notifications]; - }; + //handleAddNotification = (e: NotificationType) => { + // if (!this.isOpened) { + // this.notyfs.set(e.id, this.notyf.success({ message: e.message, type: 'regular', duration: 400 })); + // } + //notificationStore.notifications = [e, ...notificationStore.notifications]; + //}; - 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 })); - } - notificationStore.notifications = [e, ...notificationStore.notifications]; - }; + //handleUpdateNotification = (e: NotificationType) => { + //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 })); + //} + //notificationStore.notifications = [e, ...notificationStore.notifications]; + //}; handleToggle = () => { if (!this.isOpened) { @@ -61,40 +61,9 @@ export class NotificationManager { return (
- {notifications &&
- {notifications.map(item => ( -
-
-
-
- -
-
-

{item.title}

-

{item.text}

-
-
- -
-
-
-
+ {notifications && notifications.map(item => ( + ))} -
}
{ + static createNotification = (notification: NotificationType ): NotificationType => { notificationStore.notifications = [...notificationStore.notifications, notification] return notification; } - static updateNotification = (notification: Notification, obj: Notification) => { + static updateNotification = (notification: NotificationType, obj: NotificationType) => { console.log(notification); const notifIndex = notificationStore.notifications.findIndex(item => item.id === notification.id) @@ -28,4 +21,4 @@ export class NotificationService { const filtered = notificationStore.notifications.filter(item => item.id !== notification.id) notificationStore.notifications = [...filtered, notificationStore.notifications[notifIndex] = notif] } -} \ No newline at end of file +}