Changed notification implementation (#3863)
* Changed notification implementation. Removed unused library notyf and cleanup. * Fixed issue after merge conflict fix.
This commit is contained in:
simona-taran
GitHub
parent
7d1833f285
commit
25a058b59d
|
|
@ -23,7 +23,6 @@
|
|||
"jwt-decode": "^3.1.2",
|
||||
"lodash": "^4.17.21",
|
||||
"moment": "^2.29.4",
|
||||
"notyf": "^3.10.0",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"typedi": "^0.10.0",
|
||||
"uuid": "^9.0.0"
|
||||
|
|
@ -1222,11 +1221,6 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/notyf": {
|
||||
"version": "3.10.0",
|
||||
"resolved": "https://registry.npmjs.org/notyf/-/notyf-3.10.0.tgz",
|
||||
"integrity": "sha512-Mtnp+0qiZxgrH+TzVlzhWyZceHdAZ/UWK0/ju9U0HQeDpap1mZ8cC7H5wSI5mwgni6yeAjaxsTw0sbMK+aSuHw=="
|
||||
},
|
||||
"node_modules/object-hash": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
|
||||
|
|
@ -2616,11 +2610,6 @@
|
|||
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
|
||||
"dev": true
|
||||
},
|
||||
"notyf": {
|
||||
"version": "3.10.0",
|
||||
"resolved": "https://registry.npmjs.org/notyf/-/notyf-3.10.0.tgz",
|
||||
"integrity": "sha512-Mtnp+0qiZxgrH+TzVlzhWyZceHdAZ/UWK0/ju9U0HQeDpap1mZ8cC7H5wSI5mwgni6yeAjaxsTw0sbMK+aSuHw=="
|
||||
},
|
||||
"object-hash": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@
|
|||
"jwt-decode": "^3.1.2",
|
||||
"lodash": "^4.17.21",
|
||||
"moment": "^2.29.4",
|
||||
"notyf": "^3.10.0",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"typedi": "^0.10.0",
|
||||
"uuid": "^9.0.0"
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ export namespace Components {
|
|||
}
|
||||
interface ElsaAwhileNotifications {
|
||||
"notification": NotificationType;
|
||||
"showDuration": number;
|
||||
}
|
||||
interface ElsaButtonGroup {
|
||||
"buttons": Array<Button>;
|
||||
|
|
@ -193,6 +194,9 @@ export namespace Components {
|
|||
interface ElsaMultiTextInput {
|
||||
"inputContext": ActivityInputContext;
|
||||
}
|
||||
interface ElsaNotificationTemplate {
|
||||
"notification": NotificationType;
|
||||
}
|
||||
interface ElsaNotificationsManager {
|
||||
"modalState": boolean;
|
||||
}
|
||||
|
|
@ -235,6 +239,8 @@ export namespace Components {
|
|||
interface ElsaSwitchEditor {
|
||||
"inputContext": ActivityInputContext;
|
||||
}
|
||||
interface ElsaToastManager {
|
||||
}
|
||||
interface ElsaTooltip {
|
||||
"tooltipContent": any;
|
||||
"tooltipPosition"?: string;
|
||||
|
|
@ -631,6 +637,12 @@ declare global {
|
|||
prototype: HTMLElsaMultiTextInputElement;
|
||||
new (): HTMLElsaMultiTextInputElement;
|
||||
};
|
||||
interface HTMLElsaNotificationTemplateElement extends Components.ElsaNotificationTemplate, HTMLStencilElement {
|
||||
}
|
||||
var HTMLElsaNotificationTemplateElement: {
|
||||
prototype: HTMLElsaNotificationTemplateElement;
|
||||
new (): HTMLElsaNotificationTemplateElement;
|
||||
};
|
||||
interface HTMLElsaNotificationsManagerElement extends Components.ElsaNotificationsManager, HTMLStencilElement {
|
||||
}
|
||||
var HTMLElsaNotificationsManagerElement: {
|
||||
|
|
@ -697,6 +709,12 @@ declare global {
|
|||
prototype: HTMLElsaSwitchEditorElement;
|
||||
new (): HTMLElsaSwitchEditorElement;
|
||||
};
|
||||
interface HTMLElsaToastManagerElement extends Components.ElsaToastManager, HTMLStencilElement {
|
||||
}
|
||||
var HTMLElsaToastManagerElement: {
|
||||
prototype: HTMLElsaToastManagerElement;
|
||||
new (): HTMLElsaToastManagerElement;
|
||||
};
|
||||
interface HTMLElsaTooltipElement extends Components.ElsaTooltip, HTMLStencilElement {
|
||||
}
|
||||
var HTMLElsaTooltipElement: {
|
||||
|
|
@ -877,6 +895,7 @@ declare global {
|
|||
"elsa-monaco-editor": HTMLElsaMonacoEditorElement;
|
||||
"elsa-multi-line-input": HTMLElsaMultiLineInputElement;
|
||||
"elsa-multi-text-input": HTMLElsaMultiTextInputElement;
|
||||
"elsa-notification-template": HTMLElsaNotificationTemplateElement;
|
||||
"elsa-notifications-manager": HTMLElsaNotificationsManagerElement;
|
||||
"elsa-outcome-picker-input": HTMLElsaOutcomePickerInputElement;
|
||||
"elsa-output-picker-input": HTMLElsaOutputPickerInputElement;
|
||||
|
|
@ -888,6 +907,7 @@ declare global {
|
|||
"elsa-slide-over-panel": HTMLElsaSlideOverPanelElement;
|
||||
"elsa-studio": HTMLElsaStudioElement;
|
||||
"elsa-switch-editor": HTMLElsaSwitchEditorElement;
|
||||
"elsa-toast-manager": HTMLElsaToastManagerElement;
|
||||
"elsa-tooltip": HTMLElsaTooltipElement;
|
||||
"elsa-type-picker-input": HTMLElsaTypePickerInputElement;
|
||||
"elsa-variable-editor-dialog-content": HTMLElsaVariableEditorDialogContentElement;
|
||||
|
|
@ -939,6 +959,7 @@ declare namespace LocalJSX {
|
|||
}
|
||||
interface ElsaAwhileNotifications {
|
||||
"notification"?: NotificationType;
|
||||
"showDuration"?: number;
|
||||
}
|
||||
interface ElsaButtonGroup {
|
||||
"buttons"?: Array<Button>;
|
||||
|
|
@ -1079,6 +1100,9 @@ declare namespace LocalJSX {
|
|||
interface ElsaMultiTextInput {
|
||||
"inputContext"?: ActivityInputContext;
|
||||
}
|
||||
interface ElsaNotificationTemplate {
|
||||
"notification"?: NotificationType;
|
||||
}
|
||||
interface ElsaNotificationsManager {
|
||||
"modalState"?: boolean;
|
||||
}
|
||||
|
|
@ -1122,6 +1146,8 @@ declare namespace LocalJSX {
|
|||
interface ElsaSwitchEditor {
|
||||
"inputContext"?: ActivityInputContext;
|
||||
}
|
||||
interface ElsaToastManager {
|
||||
}
|
||||
interface ElsaTooltip {
|
||||
"tooltipContent"?: any;
|
||||
"tooltipPosition"?: string;
|
||||
|
|
@ -1262,6 +1288,7 @@ declare namespace LocalJSX {
|
|||
"elsa-monaco-editor": ElsaMonacoEditor;
|
||||
"elsa-multi-line-input": ElsaMultiLineInput;
|
||||
"elsa-multi-text-input": ElsaMultiTextInput;
|
||||
"elsa-notification-template": ElsaNotificationTemplate;
|
||||
"elsa-notifications-manager": ElsaNotificationsManager;
|
||||
"elsa-outcome-picker-input": ElsaOutcomePickerInput;
|
||||
"elsa-output-picker-input": ElsaOutputPickerInput;
|
||||
|
|
@ -1273,6 +1300,7 @@ declare namespace LocalJSX {
|
|||
"elsa-slide-over-panel": ElsaSlideOverPanel;
|
||||
"elsa-studio": ElsaStudio;
|
||||
"elsa-switch-editor": ElsaSwitchEditor;
|
||||
"elsa-toast-manager": ElsaToastManager;
|
||||
"elsa-tooltip": ElsaTooltip;
|
||||
"elsa-type-picker-input": ElsaTypePickerInput;
|
||||
"elsa-variable-editor-dialog-content": ElsaVariableEditorDialogContent;
|
||||
|
|
@ -1333,6 +1361,7 @@ declare module "@stencil/core" {
|
|||
"elsa-monaco-editor": LocalJSX.ElsaMonacoEditor & JSXBase.HTMLAttributes<HTMLElsaMonacoEditorElement>;
|
||||
"elsa-multi-line-input": LocalJSX.ElsaMultiLineInput & JSXBase.HTMLAttributes<HTMLElsaMultiLineInputElement>;
|
||||
"elsa-multi-text-input": LocalJSX.ElsaMultiTextInput & JSXBase.HTMLAttributes<HTMLElsaMultiTextInputElement>;
|
||||
"elsa-notification-template": LocalJSX.ElsaNotificationTemplate & JSXBase.HTMLAttributes<HTMLElsaNotificationTemplateElement>;
|
||||
"elsa-notifications-manager": LocalJSX.ElsaNotificationsManager & JSXBase.HTMLAttributes<HTMLElsaNotificationsManagerElement>;
|
||||
"elsa-outcome-picker-input": LocalJSX.ElsaOutcomePickerInput & JSXBase.HTMLAttributes<HTMLElsaOutcomePickerInputElement>;
|
||||
"elsa-output-picker-input": LocalJSX.ElsaOutputPickerInput & JSXBase.HTMLAttributes<HTMLElsaOutputPickerInputElement>;
|
||||
|
|
@ -1344,6 +1373,7 @@ declare module "@stencil/core" {
|
|||
"elsa-slide-over-panel": LocalJSX.ElsaSlideOverPanel & JSXBase.HTMLAttributes<HTMLElsaSlideOverPanelElement>;
|
||||
"elsa-studio": LocalJSX.ElsaStudio & JSXBase.HTMLAttributes<HTMLElsaStudioElement>;
|
||||
"elsa-switch-editor": LocalJSX.ElsaSwitchEditor & JSXBase.HTMLAttributes<HTMLElsaSwitchEditorElement>;
|
||||
"elsa-toast-manager": LocalJSX.ElsaToastManager & JSXBase.HTMLAttributes<HTMLElsaToastManagerElement>;
|
||||
"elsa-tooltip": LocalJSX.ElsaTooltip & JSXBase.HTMLAttributes<HTMLElsaTooltipElement>;
|
||||
"elsa-type-picker-input": LocalJSX.ElsaTypePickerInput & JSXBase.HTMLAttributes<HTMLElsaTypePickerInputElement>;
|
||||
"elsa-variable-editor-dialog-content": LocalJSX.ElsaVariableEditorDialogContent & JSXBase.HTMLAttributes<HTMLElsaVariableEditorDialogContentElement>;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import {NotificationEventTypes} from '../../../modules/notifications/event-types
|
|||
import {EventBus} from '../../../services';
|
||||
import toolbarComponentStore from "../../../data/toolbar-component-store";
|
||||
import notificationService from '../../../modules/notifications/notification-service';
|
||||
import notificationStore from "../../../modules/notifications/notification-store";
|
||||
|
||||
@Component({
|
||||
tag: 'elsa-workflow-toolbar',
|
||||
|
|
@ -23,12 +22,11 @@ export class WorkflowToolbar {
|
|||
onNotificationClick = async e => {
|
||||
e.stopPropagation();
|
||||
await this.eventBus.emit(NotificationEventTypes.Toggle, this);
|
||||
WorkflowToolbar.NotificationService.toogleNotification();
|
||||
WorkflowToolbar.NotificationService.toggleNotification();
|
||||
this.modalState = !this.modalState;
|
||||
};
|
||||
|
||||
render() {
|
||||
const {notifications, infoPanelBoolean} = notificationStore;
|
||||
const logoPath = getAssetPath('./assets/logo.png');
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -84,9 +82,7 @@ export class WorkflowToolbar {
|
|||
|
||||
</nav>
|
||||
<elsa-notifications-manager modalState={this.modalState}></elsa-notifications-manager>
|
||||
{notifications && notifications.map(item => {
|
||||
<elsa-awhile-notifications notification={item}></elsa-awhile-notifications>
|
||||
})}
|
||||
<elsa-toast-manager></elsa-toast-manager>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,17 @@
|
|||
import {Moment} from "moment";
|
||||
|
||||
export interface NotificationType {
|
||||
id?: number | any;
|
||||
title: string;
|
||||
text: string;
|
||||
type?: NotificationDisplayType;
|
||||
timestamp?: Moment;
|
||||
showToast?: boolean;
|
||||
}
|
||||
|
||||
export enum NotificationDisplayType {
|
||||
Success,
|
||||
Warning,
|
||||
Error,
|
||||
InProgress,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,67 +1,65 @@
|
|||
import {Component, h, State, Prop, Watch} from "@stencil/core";
|
||||
import {NotificationType} from "./models";
|
||||
import notificationStore from "./notification-store";
|
||||
import NotificationService from "./notification-service";
|
||||
|
||||
@Component({
|
||||
tag: 'elsa-awhile-notifications',
|
||||
shadow: false,
|
||||
styleUrl: '',
|
||||
tag: 'elsa-awhile-notifications',
|
||||
shadow: false,
|
||||
styleUrl: '',
|
||||
})
|
||||
export class NotificationAwhile {
|
||||
@State() private isOpened = true;
|
||||
@Prop() public notification: NotificationType;
|
||||
@Prop() public notification: NotificationType;
|
||||
@Prop() public showDuration = 6000;
|
||||
private timer;
|
||||
|
||||
@Watch('notification')
|
||||
onNotificationChange(){
|
||||
console.log('sss')
|
||||
}
|
||||
componentDidRender() {
|
||||
this.timer = setTimeout(() => {
|
||||
this.hideToast();
|
||||
}, this.showDuration);
|
||||
}
|
||||
|
||||
componentDidRender() {
|
||||
setTimeout(() => {
|
||||
this.isOpened = false;
|
||||
}, 6000)
|
||||
}
|
||||
handleClick = () => {
|
||||
this.hideToast();
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.notification);
|
||||
disconnectedCallback() {
|
||||
window.clearTimeout(this.timer);
|
||||
this.hideToast();
|
||||
}
|
||||
|
||||
const {title, text} = this.notification;
|
||||
hideToast = () => {
|
||||
NotificationService.hideToast(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-50 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
|
||||
)
|
||||
}
|
||||
render() {
|
||||
const {infoPanelBoolean} = notificationStore;
|
||||
|
||||
return (
|
||||
(this.notification.showToast !== false && !infoPanelBoolean) ? (
|
||||
<div class="mt-2 pr-2 flex w-full flex-col items-center space-y-4 sm:items-end">
|
||||
<div
|
||||
class="pointer-events-auto w-full max-w-sm rounded-lg z-50 bg-white shadow-lg ring-1 ring-black ring-opacity-5">
|
||||
<div class="p-4 z-30">
|
||||
<elsa-notification-template notification={this.notification}>
|
||||
<siv slot="close-button">
|
||||
<button
|
||||
type="button"
|
||||
onClick={this.handleClick}
|
||||
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>
|
||||
</siv>
|
||||
</elsa-notification-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,13 @@
|
|||
import {Component, h, Prop, State, Watch} from '@stencil/core';
|
||||
import {Container} from 'typedi';
|
||||
import {enter, leave, toggle} from 'el-transition'
|
||||
import {Component, h, Prop, Watch} from '@stencil/core';
|
||||
import {leave, toggle} from 'el-transition'
|
||||
import notificationStore from './notification-store';
|
||||
import {EventBus} from '../../services';
|
||||
import {Notyf, NotyfNotification} from 'notyf';
|
||||
import {NotificationType} from './models';
|
||||
import {NotificationEventTypes} from './event-types';
|
||||
import NotificationService from './notification-service';
|
||||
import {Input} from "postcss";
|
||||
|
||||
@Component({
|
||||
tag: 'elsa-notifications-manager',
|
||||
shadow: false,
|
||||
styleUrl: 'notification.scss',
|
||||
styleUrl: '',
|
||||
})
|
||||
export class NotificationManager {
|
||||
@Prop() public modalState: boolean;
|
||||
|
|
@ -33,12 +28,11 @@ export class NotificationManager {
|
|||
}
|
||||
|
||||
deleteNotif = (id) => {
|
||||
console.log(id);
|
||||
notificationStore.notifications = notificationStore.notifications.filter(item => item.id !== id)
|
||||
}
|
||||
|
||||
handleToggle = () => {
|
||||
NotificationManager.NotificationServiceLocal.toogleNotification();
|
||||
NotificationManager.NotificationServiceLocal.toggleNotification();
|
||||
toggle(this.modal);
|
||||
};
|
||||
|
||||
|
|
@ -63,7 +57,7 @@ export class NotificationManager {
|
|||
data-transition-leave="transform transition ease-in-out duration-100 sm:duration-100"
|
||||
data-transition-leave-start="translate-x-0"
|
||||
data-transition-leave-end="translate-x-full"
|
||||
class='hidden z-50 pt-65 fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16'>
|
||||
class='hidden z-50 top-16 fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16'>
|
||||
|
||||
<div class="w-screen max-w-md">
|
||||
<div class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
|
||||
|
|
@ -83,53 +77,27 @@ export class NotificationManager {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{notifications.length === 0 && <div class="p-6 pointer-events-auto w-full overflow-hidden border-b ring-1 ring-black ring-opacity-5">There is no notifications yet</div>}
|
||||
<ul role="list" class=" pointer-events-auto overflow-y-auto flex-1 divide-y divide-gray-200 overflow-y-auto">
|
||||
{notifications.map(notif => (
|
||||
/* <li>
|
||||
<div class="group relative flex items-center py-6 px-">
|
||||
<div class="divide-y divide-gray-200 ml-4 truncate">
|
||||
<p class="right-0 truncate text-sm text-gray-500">{notif.title}</p>
|
||||
</div>
|
||||
<div class="relative ml-2 inline-block flex-shrink-0 text-left">
|
||||
<button onClick={() => this.deleteNotif(notif.id)}>
|
||||
<svg class="h-6 w-6" 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="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>*/
|
||||
{notifications.length === 0 && <div
|
||||
class="p-6 pointer-events-auto w-full overflow-hidden border-b ring-1 ring-black ring-opacity-5">There
|
||||
is no notifications yet</div>}
|
||||
<ul role="list"
|
||||
class=" pointer-events-auto overflow-y-auto flex-1 divide-y divide-gray-200 overflow-y-auto">
|
||||
{notifications.map(notification => (
|
||||
<li>
|
||||
<div class="border-b group relative flex items-center py-6 px-5">
|
||||
<a href="#" class="-m-1 block flex-1 p-1">
|
||||
<div class="relative flex min-w-0 flex-1 items-center">
|
||||
|
||||
<span class="relative inline-block flex-shrink-0">
|
||||
<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>
|
||||
</span>
|
||||
<div class="ml-4 truncate">
|
||||
<p class="truncate text-sm font-medium text-gray-900">{notif.title}</p>
|
||||
<p class="truncate text-sm text-gray-500">{notif.text}</p>
|
||||
<elsa-notification-template notification={notification}>
|
||||
<div slot="close-button" class="relative ml-2 inline-block flex-shrink-0 text-left">
|
||||
<button onClick={() => this.deleteNotif(notification.id)}>
|
||||
<svg class="h-6 w-6" 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="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</elsa-notification-template>
|
||||
</a>
|
||||
<div class="relative ml-2 inline-block flex-shrink-0 text-left">
|
||||
<button onClick={() => this.deleteNotif(notif.id)}>
|
||||
<svg class="h-6 w-6" 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="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,40 @@
|
|||
import moment from 'moment';
|
||||
import notificationStore from "./notification-store";
|
||||
import {NotificationType} from "./models"
|
||||
import {NotificationDisplayType, NotificationType} from "./models"
|
||||
|
||||
export default class NotificationService {
|
||||
constructor() {
|
||||
}
|
||||
|
||||
static toogleNotification = () => {
|
||||
notificationStore.infoPanelBoolean = !notificationStore.infoPanelBoolean
|
||||
}
|
||||
|
||||
static createNotification = (notification: NotificationType ): NotificationType => {
|
||||
notificationStore.notifications = [...notificationStore.notifications, notification]
|
||||
return notification;
|
||||
}
|
||||
|
||||
static updateNotification = (notification: NotificationType, newNotifFields: NotificationType) => {
|
||||
const notifIndex = notificationStore.notifications.findIndex(item => item.id === notification.id)
|
||||
|
||||
const notif = notificationStore.notifications.find(item => item.id === notification.id)
|
||||
notif.title = newNotifFields.title;
|
||||
notif.text = newNotifFields.text;
|
||||
|
||||
const filtered = notificationStore.notifications.filter(item => item.id !== notification.id)
|
||||
notificationStore.notifications = [...filtered, notificationStore.notifications[notifIndex] = notif]
|
||||
constructor() {
|
||||
}
|
||||
|
||||
static toggleNotification = () => {
|
||||
notificationStore.infoPanelBoolean = !notificationStore.infoPanelBoolean
|
||||
}
|
||||
|
||||
static createNotification = (notification: NotificationType): NotificationType => {
|
||||
notification.timestamp = moment().clone();
|
||||
notificationStore.notifications = [notification, ...notificationStore.notifications]
|
||||
return notification;
|
||||
}
|
||||
|
||||
static updateNotification = (notification: NotificationType, newNotifFields: NotificationType) => {
|
||||
const notifIndex = notificationStore.notifications.findIndex(item => item.id === notification.id)
|
||||
|
||||
const updatedNotification = {...notificationStore.notifications[notifIndex]};
|
||||
updatedNotification.title = newNotifFields.title;
|
||||
updatedNotification.text = newNotifFields.text;
|
||||
updatedNotification.type = newNotifFields.type || NotificationDisplayType.Success;
|
||||
updatedNotification.timestamp = moment().clone();
|
||||
|
||||
const filtered = notificationStore.notifications.filter(item => item.id !== notification.id)
|
||||
notificationStore.notifications = [updatedNotification, ...filtered]
|
||||
}
|
||||
|
||||
static hideToast = (notification: NotificationType) => {
|
||||
const index = notificationStore.notifications.findIndex(item => item.id === notification.id);
|
||||
if (notificationStore.notifications[index].showToast !== false) {
|
||||
const notifications = [...notificationStore.notifications]
|
||||
notifications[index] = {...notifications[index], showToast: false};
|
||||
notificationStore.notifications = notifications;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { createStore } from '@stencil/store';
|
||||
import {NotificationType} from "./models";
|
||||
|
||||
const { state, onChange } = createStore({
|
||||
notifications: [],
|
||||
notifications: [] as NotificationType[],
|
||||
infoPanelBoolean: false,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,78 @@
|
|||
import {Component, Host, h, Prop, State} from '@stencil/core';
|
||||
import {NotificationDisplayType, NotificationType} from "./models";
|
||||
|
||||
@Component({
|
||||
tag: 'elsa-notification-template',
|
||||
shadow: false,
|
||||
})
|
||||
export class NotificationTemplate {
|
||||
|
||||
@Prop() public notification: NotificationType;
|
||||
@State() time: string;
|
||||
private timer: number;
|
||||
|
||||
|
||||
connectedCallback() {
|
||||
this.time = this.notification.timestamp.fromNow();
|
||||
this.timer = window.setInterval(() => {
|
||||
this.time = this.notification.timestamp.fromNow();
|
||||
}, 60 * 1000);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
window.clearInterval(this.timer);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {notification} = this;
|
||||
const {type = NotificationDisplayType.Success} = notification;
|
||||
|
||||
return (
|
||||
<div class="flex items-start z-30">
|
||||
<div class="flex-shrink-0 z-30">
|
||||
{type === NotificationDisplayType.Success ?
|
||||
<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> : null
|
||||
}
|
||||
{type === NotificationDisplayType.InProgress ?
|
||||
<svg class="animate-spin h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
||||
<path class="opacity-75" fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
|
||||
</svg> : null
|
||||
}
|
||||
{type === NotificationDisplayType.Warning ?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6 text-orange-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
|
||||
</svg>
|
||||
: null
|
||||
}
|
||||
{type === NotificationDisplayType.Error ?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6 text-red-400">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"/>
|
||||
</svg>
|
||||
: null
|
||||
}
|
||||
</div>
|
||||
<div class="ml-3 w-0 flex-1 pt-0.5 z-30">
|
||||
<p class="text-sm font-medium text-gray-900">{notification.title}</p>
|
||||
<p class="mt-1 text-sm text-gray-500">{notification.text}</p>
|
||||
<p class="mt-1 text-sm text-gray-500">{this.time}</p>
|
||||
</div>
|
||||
<div class="ml-4 flex flex-shrink-0 z-30">
|
||||
<slot name="close-button"/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
@import url('../../../../../node_modules/notyf/notyf.min.css');
|
||||
|
||||
.notyf {
|
||||
top: 40px;
|
||||
right: 0;
|
||||
width: 400px;
|
||||
min-width: 300px;
|
||||
min-height: 300px;
|
||||
flex-direction: column;
|
||||
color: black;
|
||||
left: unset;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notyf-announcer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.notyf__wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.notyf__toast {
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.notif {
|
||||
.notyf__message {
|
||||
@apply text-black
|
||||
}
|
||||
}
|
||||
|
||||
.notifications-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
min-height: 300px;
|
||||
min-width: 300px;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.notific_ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pt-65 {
|
||||
padding-top: 65px;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { Component, Host, h } from '@stencil/core';
|
||||
import notificationStore from "./notification-store";
|
||||
|
||||
@Component({
|
||||
tag: 'elsa-toast-manager',
|
||||
shadow: false,
|
||||
})
|
||||
|
||||
export class ToastManager {
|
||||
|
||||
render() {
|
||||
const {notifications} = notificationStore;
|
||||
const notification = notifications.find(notification => notification.showToast !== false);
|
||||
|
||||
if (notification) {
|
||||
return (
|
||||
<elsa-awhile-notifications notification={notification}></elsa-awhile-notifications>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -21,6 +21,7 @@ import {htmlToElement} from "../../../utils";
|
|||
import NotificationService from "../../notifications/notification-service";
|
||||
import {uuid} from "@antv/x6/es/util/string/uuid";
|
||||
import {DropdownButtonItem} from "../../../components/shared/dropdown-button/models";
|
||||
import {NotificationDisplayType} from "../../notifications/models";
|
||||
|
||||
const FlowchartTypeName = 'Elsa.Flowchart';
|
||||
|
||||
|
|
@ -198,7 +199,13 @@ export class WorkflowDefinitionsPlugin implements Plugin {
|
|||
}
|
||||
|
||||
e.detail.begin();
|
||||
const notification = NotificationService.createNotification({title: 'Publishing', id: uuid(), text: 'Workflow is being published. Please wait.'})
|
||||
|
||||
const notification = NotificationService.createNotification({
|
||||
title: 'Publishing',
|
||||
id: uuid(),
|
||||
text: 'Workflow is being published. Please wait.',
|
||||
type: NotificationDisplayType.InProgress
|
||||
});
|
||||
|
||||
await this.saveWorkflowDefinition(definition, true);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue