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

Added confirmation modals for all necessary user actions

Browse source
This commit is contained in:
Gürkan Güran 2022-09-18 21:21:56 +02:00
parent c0aa6f0374
commit a1bb6f2e1f
6 changed files with 90 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import {h} from '@stencil/core';
import { WarningIcon } from '../../icons/tooling';
export class DefaultContents {
public static Delete = (message: string): any => {
public static Warning = (message: string): any => {
return(
<div class="p-6 text-center">
<WarningIcon/>

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

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

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

@ -60,6 +60,22 @@ export class DefaultActions {
onClick: handler
});
public static Publish = (handler?: ActionClickArgs): ActionDefinition => ({
text: 'Publish',
name: 'Publish',
type: ActionType.Button,
isDangerous: true,
onClick: handler
});
public static Unpublish = (handler?: ActionClickArgs): ActionDefinition => ({
text: 'Unpublish',
name: 'Unpublish',
type: ActionType.Button,
isDangerous: true,
onClick: handler
});
public static New = (handler?: ActionClickArgs): ActionDefinition => ({
text: 'New',
name: 'New',
@ -67,27 +83,4 @@ export class DefaultActions {
isPrimary: true,
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>
// )
// };
// }
}

52
src/designer/elsa-workflows-designer/src/modules/activity-definitions/components/browser.tsx
View file

@ -7,7 +7,7 @@ import {PagedList, VersionOptions} from "../../../models";
import {DeleteIcon, EditIcon, PublishIcon, UnPublishIcon} from "../../../components/icons/tooling";
import {PagerData} from "../../../components/shared/pager/pager";
import {updateSelectedActivityDefinitions} from "../services/utils";
import {DefaultActions} from "../../../components/shared/modal-dialog";
import {ModalDialogService, DefaultActions, DefaultContents, ModalType} from "../../../components/shared/modal-dialog";
@Component({
tag: 'elsa-activity-definition-browser',
@ -21,6 +21,11 @@ export class ActivityDefinitionBrowser {
private activityDefinitionsApi: ActivityDefinitionsApi;
private selectAllCheckbox: HTMLInputElement;
private readonly modalDialogService: ModalDialogService;
constructor() {
this.modalDialogService = Container.get(ModalDialogService);
}
@Event() public activityDefinitionSelected: EventEmitter<ActivityDefinitionSummary>;
@Event() public newActivityDefinitionSelected: EventEmitter;
@ -54,28 +59,47 @@ export class ActivityDefinitionBrowser {
}
private async onDeleteClick(e: MouseEvent, ActivityDefinition: ActivityDefinitionSummary) {
// const result = await this.confirmDialog.show(t('DeleteConfirmationModel.Title'), t('DeleteConfirmationModel.Message'));
//
// if (!result)
// return;
await this.activityDefinitionsApi.delete(ActivityDefinition);
await this.loadActivityDefinitions();
this.modalDialogService.show(
() => DefaultContents.Warning("Are you sure you want to delete this activity definition?"),
[DefaultActions.Delete(async () =>
{
await this.activityDefinitionsApi.delete(ActivityDefinition);
await this.loadActivityDefinitions();
}), DefaultActions.Cancel()],
ModalType.Confirmation);
}
private onDeleteManyClick = async () => {
await this.activityDefinitionsApi.deleteMany({definitionIds: this.selectedActivityDefinitionIds});
await this.loadActivityDefinitions();
this.modalDialogService.show(
() => DefaultContents.Warning("Are you sure you want to delete selected activity definitions?"),
[DefaultActions.Delete(async () =>
{
await this.activityDefinitionsApi.deleteMany({definitionIds: this.selectedActivityDefinitionIds});
await this.loadActivityDefinitions();
}), DefaultActions.Cancel()],
ModalType.Confirmation);
};
private onPublishManyClick = async () => {
await this.activityDefinitionsApi.publishMany({definitionIds: this.selectedActivityDefinitionIds});
await this.loadActivityDefinitions();
this.modalDialogService.show(
() => DefaultContents.Warning("Are you sure you want to publish selected activity definitions?"),
[DefaultActions.Publish(async () =>
{
await this.activityDefinitionsApi.publishMany({definitionIds: this.selectedActivityDefinitionIds});
await this.loadActivityDefinitions();
}), DefaultActions.Cancel()],
ModalType.Confirmation);
};
private onUnpublishManyClick = async () => {
await this.activityDefinitionsApi.unpublishMany({definitionIds: this.selectedActivityDefinitionIds});
await this.loadActivityDefinitions();
this.modalDialogService.show(
() => DefaultContents.Warning("Are you sure you want to unpublish selected activity definitions?"),
[DefaultActions.Unpublish(async () =>
{
await this.activityDefinitionsApi.unpublishMany({definitionIds: this.selectedActivityDefinitionIds});
await this.loadActivityDefinitions();
}), DefaultActions.Cancel()],
ModalType.Confirmation);
};
private onActivityDefinitionClick = async (e: MouseEvent, ActivityDefinition: ActivityDefinitionSummary) => {

45
src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/browser.tsx
View file

@ -7,7 +7,7 @@ import {PagerData} from '../../../components/shared/pager/pager';
import {updateSelectedWorkflowDefinitions} from '../services/utils';
import {WorkflowDefinitionSummary} from "../models/entities";
import {WorkflowDefinitionsApi, WorkflowDefinitionsOrderBy} from "../services/api";
import {DefaultActions} from "../../../components/shared/modal-dialog";
import {ModalDialogService, DefaultActions, DefaultContents, ModalType} from "../../../components/shared/modal-dialog";
@Component({
tag: 'elsa-workflow-definition-browser',
@ -21,9 +21,11 @@ export class WorkflowDefinitionBrowser {
private readonly api: WorkflowDefinitionsApi;
private selectAllCheckbox: HTMLInputElement;
private readonly modalDialogService: ModalDialogService;
constructor() {
this.api = Container.get(WorkflowDefinitionsApi);
this.modalDialogService = Container.get(ModalDialogService);
}
@Event() workflowDefinitionSelected: EventEmitter<WorkflowDefinitionSummary>;
@ -56,28 +58,43 @@ export class WorkflowDefinitionBrowser {
}
private async onDeleteClick(e: MouseEvent, workflowDefinition: WorkflowDefinitionSummary) {
// const result = await this.confirmDialog.show(t('DeleteConfirmationModel.Title'), t('DeleteConfirmationModel.Message'));
//
// if (!result)
// return;
await this.api.delete(workflowDefinition);
await this.loadWorkflowDefinitions();
this.modalDialogService.show(
() => DefaultContents.Warning("Are you sure you want to delete this workflow definition?"),
[DefaultActions.Delete(()=>{}), DefaultActions.Cancel()],
ModalType.Confirmation);
}
private onDeleteManyClick = async () => {
await this.api.deleteMany({definitionIds: this.selectedWorkflowDefinitionIds});
await this.loadWorkflowDefinitions();
this.modalDialogService.show(
() => DefaultContents.Warning("Are you sure you want to delete selected workflow definitions?"),
[DefaultActions.Delete(async () =>
{
await this.api.deleteMany({definitionIds: this.selectedWorkflowDefinitionIds});
await this.loadWorkflowDefinitions();
}), DefaultActions.Cancel()],
ModalType.Confirmation);
};
private onPublishManyClick = async () => {
await this.api.publishMany({definitionIds: this.selectedWorkflowDefinitionIds});
await this.loadWorkflowDefinitions();
this.modalDialogService.show(
() => DefaultContents.Warning("Are you sure you want to publish selected workflow definitions?"),
[DefaultActions.Publish(async () =>
{
await this.api.publishMany({definitionIds: this.selectedWorkflowDefinitionIds});
await this.loadWorkflowDefinitions();
}), DefaultActions.Cancel()],
ModalType.Confirmation);
};
private onUnpublishManyClick = async () => {
await this.api.unpublishMany({definitionIds: this.selectedWorkflowDefinitionIds});
await this.loadWorkflowDefinitions();
this.modalDialogService.show(
() => DefaultContents.Warning("Are you sure you want to unpublish selected workflow definitions?"),
[DefaultActions.Unpublish(async () =>
{
await this.api.unpublishMany({definitionIds: this.selectedWorkflowDefinitionIds});
await this.loadWorkflowDefinitions();
}), DefaultActions.Cancel()],
ModalType.Confirmation);
};
private onWorkflowDefinitionClick = async (e: MouseEvent, workflowDefinition: WorkflowDefinitionSummary) => {

13
src/designer/elsa-workflows-designer/src/modules/workflow-definitions/components/version-history.tsx
View file

@ -28,15 +28,6 @@ export class WorkflowDefinitionVersionHistory {
@Event() deleteVersionClicked: EventEmitter<WorkflowDefinition>;
@Event() revertVersionClicked: EventEmitter<WorkflowDefinition>;
@Watch('workflowDefinition')
async onWorkflowDefinitionChanged(value: WorkflowDefinition) {
}
async componentWillLoad() {
}
onViewVersionClick = (e: Event, version: WorkflowDefinition) => {
e.preventDefault();
this.versionSelected.emit(version);
@ -45,9 +36,9 @@ export class WorkflowDefinitionVersionHistory {
onDeleteVersionClick = async (e: Event, version: WorkflowDefinition) => {
e.preventDefault();
this.modalDialogService.show(
() => DefaultContents.Delete("Are you sure you want to delete this version?"),
() => DefaultContents.Warning("Are you sure you want to delete this version?"),
[DefaultActions.Delete(() => this.deleteVersionClicked.emit(version)), DefaultActions.Cancel()],
ModalType.DeleteConfirmation);
ModalType.Confirmation);
};
onRevertVersionClick = (e: Event, version: WorkflowDefinition) => {