SemianiakaVY/elsa-core
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

add notification service

Browse source
This commit is contained in:
Vadim Lev 2022-12-20 06:59:24 +02:00
parent c78c918e93
commit bd0859ebf0
3 changed files with 87 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx
View file

@ -19,7 +19,7 @@ export class NotificationManager {
private notyfs: Map<string, NotyfNotification> = 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 (
<div>
{notifications && <div class='flex w-full flex-col items-center space-y-4 sm:items-end'>
{notifications.map(item => (
<div
class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
<div class="p-4">
<div class="flex items-start">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-medium text-gray-900">{item.title}</p>
<p class="mt-1 text-sm text-gray-500">{item.text}</p>
</div>
<div class="ml-4 flex flex-shrink-0">
<button
type="button"
class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true">
<path
d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
))}
</div>}
<div data-transition-enter="transform transition ease-in-out duration-500 sm:duration-700"
data-transition-enter-start="translate-x-full"
data-transition-leave="transform transition ease-in-out duration-500 sm:duration-700"
@ -88,13 +123,11 @@ export class NotificationManager {
</div>
</div>
{notifications.length === 0 && <div class="p-6 pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">There is no notifications yet</div>}
<ul role="list" class="overflow-y-auto">
{notifications.map(notif => (
<ul role="list" class=" divide-y divide-gray-200 overflow-y-auto">
<li>
<div class="space-x-2 group relative flex items-center py-4 px-5">
<div class="ml-4 truncate">
<li class="divide-y divide-gray-200" >
<div class=" space-x-2 group relative flex items-center py-4 px-5">
<div class="divide-y divide-gray-200 ml-4 truncate">
<p class="right-0 truncate text-sm text-gray-500">{notif.message}</p>
</div>
<div class="relative ml-2 inline-block flex-shrink-0 text-left">
@ -129,8 +162,8 @@ export class NotificationManager {
</div>
</li>
</ul>
))}
</ul>
</div>
</div>
</div>
@ -139,3 +172,4 @@ export class NotificationManager {
);
}
}

31
src/designer/elsa-workflows-designer/src/modules/notifications/notification-service.ts Normal file
View file

@ -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]
}
}

16
src/designer/elsa-workflows-designer/src/modules/workflow-definitions/plugin.tsx
View file

@ -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<PublishClickedArgs>) => {
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)
}