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

add notification awhile component to view

Browse source
This commit is contained in:
Vadim Lev 2022-12-20 23:16:28 +02:00
parent 9db96598d0
commit 53ed26e24e
5 changed files with 105 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/designer/elsa-workflows-designer/src/components.d.ts vendored
View file

@ -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<Button>;
}
@ -475,6 +479,12 @@ declare global {
prototype: HTMLElsaActivityPublishButtonElement;
new (): HTMLElsaActivityPublishButtonElement;
};
interface HTMLElsaAwhileNotificationsElement extends Components.ElsaAwhileNotifications, HTMLStencilElement {
}
var HTMLElsaAwhileNotificationsElement: {
prototype: HTMLElsaAwhileNotificationsElement;
new (): HTMLElsaAwhileNotificationsElement;
};
interface HTMLElsaButtonGroupElement extends Components.ElsaButtonGroup, HTMLStencilElement {
}
var HTMLElsaButtonGroupElement: {
@ -794,6 +804,7 @@ declare global {
"elsa-activity-properties": HTMLElsaActivityPropertiesElement;
"elsa-activity-properties-editor": HTMLElsaActivityPropertiesEditorElement;
"elsa-activity-publish-button": HTMLElsaActivityPublishButtonElement;
"elsa-awhile-notifications": HTMLElsaAwhileNotificationsElement;
"elsa-button-group": HTMLElsaButtonGroupElement;
"elsa-canvas": HTMLElsaCanvasElement;
"elsa-check-list-input": HTMLElsaCheckListInputElement;
@ -879,6 +890,9 @@ declare namespace LocalJSX {
"onUnPublishClicked"?: (event: ElsaActivityPublishButtonCustomEvent<any>) => void;
"publishing"?: boolean;
}
interface ElsaAwhileNotifications {
"notification"?: NotificationType;
}
interface ElsaButtonGroup {
"buttons"?: Array<Button>;
}
@ -1138,6 +1152,7 @@ declare namespace LocalJSX {
"elsa-activity-properties": ElsaActivityProperties;
"elsa-activity-properties-editor": ElsaActivityPropertiesEditor;
"elsa-activity-publish-button": ElsaActivityPublishButton;
"elsa-awhile-notifications": ElsaAwhileNotifications;
"elsa-button-group": ElsaButtonGroup;
"elsa-canvas": ElsaCanvas;
"elsa-check-list-input": ElsaCheckListInput;
@ -1202,6 +1217,7 @@ declare module "@stencil/core" {
"elsa-activity-properties": LocalJSX.ElsaActivityProperties & JSXBase.HTMLAttributes<HTMLElsaActivityPropertiesElement>;
"elsa-activity-properties-editor": LocalJSX.ElsaActivityPropertiesEditor & JSXBase.HTMLAttributes<HTMLElsaActivityPropertiesEditorElement>;
"elsa-activity-publish-button": LocalJSX.ElsaActivityPublishButton & JSXBase.HTMLAttributes<HTMLElsaActivityPublishButtonElement>;
"elsa-awhile-notifications": LocalJSX.ElsaAwhileNotifications & JSXBase.HTMLAttributes<HTMLElsaAwhileNotificationsElement>;
"elsa-button-group": LocalJSX.ElsaButtonGroup & JSXBase.HTMLAttributes<HTMLElsaButtonGroupElement>;
"elsa-canvas": LocalJSX.ElsaCanvas & JSXBase.HTMLAttributes<HTMLElsaCanvasElement>;
"elsa-check-list-input": LocalJSX.ElsaCheckListInput & JSXBase.HTMLAttributes<HTMLElsaCheckListInputElement>;

7
src/designer/elsa-workflows-designer/src/modules/notifications/models.ts
View file

@ -1,4 +1,5 @@
export interface Notification {
message: string;
id: string;
export interface NotificationType {
id?: number | any;
title: string;
text: string;
}

61
src/designer/elsa-workflows-designer/src/modules/notifications/notification-awhile.tsx Normal file
View file

@ -0,0 +1,61 @@
import {Component, h, State, Prop } from "@stencil/core";
import {NotificationType} from "./models";
@Component({
tag: 'elsa-awhile-notifications',
shadow: false,
styleUrl: '',
})
export class NotificationAwhile {
@State() private isOpened = true;
@Prop() notification: NotificationType;
constructor() {
}
componentDidRender() {
setTimeout(() => {
this.isOpened = false
}, 4000)
}
render() {
const {title, text } = this.notification;
return (
this.isOpened ? (
<div class='flex w-full flex-col items-center space-y-4 sm:items-end z-30'>
<div
class="pointer-events-auto w-full max-w-sm rounded-lg z-30 bg-white shadow-lg ring-1 ring-black ring-opacity-5">
<div class="p-4 z-30">
<div class="flex items-start z-30">
<div class="flex-shrink-0 z-30">
<svg class="h-6 w-6 text-green-400 z-30" 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 z-30">
<p class="text-sm font-medium text-gray-900">{title}</p>
<p class="mt-1 text-sm text-gray-500">{text}</p>
</div>
<div class="ml-4 flex flex-shrink-0 z-30">
<button
type="button"
// onclick={() => console.log(id)}
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> )
: null
)
}
}

71
src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.ts → src/designer/elsa-workflows-designer/src/modules/notifications/notification-manager.tsx
View file

@ -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 (
<div>
{notifications && <div class='flex w-full flex-col items-center space-y-4 sm:items-end z-30'>
{notifications.map(item => (
<div
class="pointer-events-auto w-full max-w-sm rounded-lg z-30 bg-white shadow-lg ring-1 ring-black ring-opacity-5">
<div class="p-4 z-30">
<div class="flex items-start z-30">
<div class="flex-shrink-0 z-30">
<svg class="h-6 w-6 text-green-400 z-30" 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 z-30">
<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 z-30">
<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>
{notifications && notifications.map(item => (
<elsa-awhile-notifications notification={item}></elsa-awhile-notifications>
))}
</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"

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

@ -1,23 +1,16 @@
import notificationStore from "./notification-store";
interface Notification {
id?: number | any;
title: string;
text: string;
}
import {NotificationType} from "./models"
export class NotificationService {
constructor() {
}
static createNotification = (notification: Notification ): Notification => {
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]
}
}
}