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

Implemented delete confirmation modal

Browse source
This commit is contained in:
Gürkan Güran 2022-09-18 19:48:50 +02:00
parent 0cf89e8401
commit 41a235da27
8 changed files with 62 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -19,7 +19,7 @@ import { Flowchart, FlowchartNavigationItem } from "./modules/flowchart/models";
import { Graph } from "@antv/x6";
import { AddActivityArgs as AddActivityArgs1, RenameActivityArgs as RenameActivityArgs1, UpdateActivityArgs as UpdateActivityArgs1 } from "./components/designer/canvas/canvas";
import { ActivityNodeShape } from "./modules/flowchart/shapes";
import { ActionDefinition, ActionInvokedArgs } from "./components/shared/modal-dialog";
import { ActionDefinition, ActionInvokedArgs, ModalType } from "./components/shared/modal-dialog";
import { ExpressionChangedArs } from "./components/designer/input-control-switch/input-control-switch";
import { ActionDefinition as ActionDefinition1, ActionInvokedArgs as ActionInvokedArgs1 } from "./components/shared/modal-dialog/models";
import { MonacoLib, MonacoValueChangedArgs } from "./components/shared/monaco-editor/monaco-editor";
@ -172,6 +172,7 @@ export namespace Components {
"hide": (animate?: boolean) => Promise<void>;
"show": (animate?: boolean) => Promise<void>;
"size": string;
"type": ModalType;
}
interface ElsaModalDialogContainer {
}
@ -833,6 +834,7 @@ declare namespace LocalJSX {
"onHidden"?: (event: CustomEvent<any>) => void;
"onShown"?: (event: CustomEvent<any>) => void;
"size"?: string;
"type"?: ModalType;
}
interface ElsaModalDialogContainer {
}

13
src/designer/elsa-workflows-designer/src/components/shared/modal-dialog/default-contents.tsx Normal file
View file

@ -0,0 +1,13 @@
import {h} from '@stencil/core';
import { WarningIcon } from '../../icons/tooling';
export class DefaultContents {
public static Delete = (message: string): any => {
return(
<div class="p-6 text-center">
<WarningIcon/>
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{message}</h3>
</div>
)
};
}

2
src/designer/elsa-workflows-designer/src/components/shared/modal-dialog/index.ts
View file

@ -1,4 +1,6 @@
export * from './modal-dialog';
export * from './modal-dialog-container';
export * from './models';
export * from './default-contents';
export * from './modal-type';
export * from './services';

2
src/designer/elsa-workflows-designer/src/components/shared/modal-dialog/modal-dialog-container.tsx
View file

@ -21,7 +21,7 @@ export class ModalDialogContainer {
<Host>
{instances.map(instance => {
const actions = instance.actions ?? [];
return (<elsa-modal-dialog content={instance.content} actions={actions} onHidden={() => this.onInstanceHidden(instance)}/>);
return (<elsa-modal-dialog type={instance.modalType} content={instance.content} actions={actions} onHidden={() => this.onInstanceHidden(instance)}/>);
})}
</Host>
);

10
src/designer/elsa-workflows-designer/src/components/shared/modal-dialog/modal-dialog.tsx
View file

@ -1,6 +1,7 @@
import {Component, Host, h, State, Listen, Method, Event, EventEmitter, Prop} from '@stencil/core';
import {enter, leave} from 'el-transition'
import {ActionDefinition, ActionInvokedArgs, ActionType} from "./models";
import {ModalType} from "../../../components/shared/modal-dialog";
@Component({
tag: 'elsa-modal-dialog',
@ -11,7 +12,8 @@ export class ModalDialog {
private modal: HTMLElement
@Prop() actions: Array<ActionDefinition> = [];
@Prop() size: string = 'sm:w-full sm:max-w-6xl';
@Prop() size: string = 'sm:max-w-6xl';
@Prop() type: ModalType = ModalType.Default;
@Prop() content: () => any = () => <div/>;
@Event() shown: EventEmitter;
@Event() hidden: EventEmitter;
@ -63,6 +65,12 @@ export class ModalDialog {
}
}
componentWillRender() {
if(this.type == ModalType.Default){
this.size += " sm:w-full";
}
}
componentDidRender() {
if(this.isVisible) {
enter(this.overlay);

4
src/designer/elsa-workflows-designer/src/components/shared/modal-dialog/modal-type.ts Normal file
View file

@ -0,0 +1,4 @@
export enum ModalType {
Default,
DeleteConfirmation
}

26
src/designer/elsa-workflows-designer/src/components/shared/modal-dialog/models.ts
View file

@ -1,6 +1,9 @@
import {ModalType} from "../../../components/shared/modal-dialog";
export interface ModalDialogInstance {
content: () => any;
actions: Array<ActionDefinition>;
modalType: ModalType;
}
export type ActionClickArgs = (e: Event, action: ActionDefinition) => void;
@ -65,3 +68,26 @@ export class DefaultActions {
onClick: handler
});
}
// export class DefaultContents {
// public static Delete = (message: string): any => {
// return(
// <div class="relative p-4 w-full max-w-md h-full md:h-auto">
// <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
// <button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white" data-modal-toggle="popup-modal">
// <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
// <span class="sr-only">Close modal</span>
// </button>
// <div class="p-6 text-center">
// <svg aria-hidden="true" class="mx-auto mb-4 w-14 h-14 text-gray-400 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
// <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{message}</h3>
// <button data-modal-toggle="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
// Yes, I'm sure
// </button>
// <button data-modal-toggle="popup-modal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">No, cancel</button>
// </div>
// </div>
// </div>
// )
// };
// }

6
src/designer/elsa-workflows-designer/src/components/shared/modal-dialog/services.ts
View file

@ -2,14 +2,16 @@ import 'reflect-metadata';
import {Service} from "typedi";
import state from "./state";
import {ActionDefinition, ModalDialogInstance} from "./models";
import {ModalType} from "../../../components/shared/modal-dialog";
@Service()
export class ModalDialogService {
show(content: () => any, actions?: Array<ActionDefinition>): ModalDialogInstance {
show(content: () => any, actions?: Array<ActionDefinition>, modalType?: ModalType): ModalDialogInstance {
const newInstance: ModalDialogInstance = {
content: content,
actions: actions ?? []
actions: actions ?? [],
modalType: modalType ?? ModalType.Default
};
let instances: Array<ModalDialogInstance> = state.instances;