Skip to content
This repository has been archived by the owner on May 16, 2024. It is now read-only.

Commit

Permalink
feat: add user task properties modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrejpetras
andrejpetras committed Apr 23, 2023
1 parent 5b2c11a commit 1701aaa
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 15 deletions.
61 changes: 61 additions & 0 deletions src/main/webui/src/components/Instance/InfoUserTaskModal.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<script lang="ts">
import {Modal, Button, Textarea, Label, Input, TableHead, TableHeadCell, TableBody, TableBodyRow, TableBodyCell, Table, A, Badge, Indicator} from "flowbite-svelte";
import {Play} from "svelte-heros-v2";
import type { UserTask } from "../../models/UserTask.model";
import { colorJobStatus } from "$lib/app";
let open: boolean;
let userTask: UserTask;
export function init(_userTask: UserTask) {
userTask = _userTask;
open = true;
}
</script>

<Modal title="User task properties" bind:open={open} autoclose class="w-full">
<Table divClass='relative overflow-x-auto border rounded-lg'>
<TableHead>
<TableHeadCell>Parameter</TableHeadCell>
<TableHeadCell>Value</TableHeadCell>
</TableHead>
<TableBody>
<TableBodyRow>
<TableBodyCell>Process instance key</TableBodyCell><TableBodyCell><A href="/instances/{userTask.processInstanceKey}" class="font-medium hover:underline">{userTask.processInstanceKey}</A></TableBodyCell>
</TableBodyRow>
<TableBodyRow>
<TableBodyCell>Element Id</TableBodyCell><TableBodyCell>{userTask.elementId}</TableBodyCell>
</TableBodyRow>
<TableBodyRow>
<TableBodyCell>Status</TableBodyCell>
<TableBodyCell>
<Badge color="{colorJobStatus[userTask.status]}" rounded class="px-2.5 py-0.5">
<Indicator color="{colorJobStatus[userTask.status]}" size="xs" class="mr-1"/>{userTask.status}
</Badge>
</TableBodyCell>
</TableBodyRow>
<TableBodyRow>
<TableBodyCell>Due Date</TableBodyCell><TableBodyCell>{userTask.dueDate}</TableBodyCell>
</TableBodyRow>
<TableBodyRow>
<TableBodyCell>Follow Up Date</TableBodyCell><TableBodyCell>{userTask.followUpDate}</TableBodyCell>
</TableBodyRow>
<TableBodyRow>
<TableBodyCell>Created</TableBodyCell><TableBodyCell>{userTask.timestamp}</TableBodyCell>
</TableBodyRow>
<TableBodyRow>
<TableBodyCell>Assignee</TableBodyCell><TableBodyCell>{userTask.assignee}</TableBodyCell>
</TableBodyRow>
<TableBodyRow>
<TableBodyCell>Candidate Groups</TableBodyCell><TableBodyCell>{userTask.groups}</TableBodyCell>
</TableBodyRow>
<TableBodyRow>
<TableBodyCell>Candidate Users</TableBodyCell><TableBodyCell>{userTask.users}</TableBodyCell>
</TableBodyRow>
<TableBodyRow>
<TableBodyCell>Variables</TableBodyCell><TableBodyCell>{userTask.variables}</TableBodyCell>
</TableBodyRow>
</TableBody>
</Table>
</Modal>
14 changes: 7 additions & 7 deletions src/main/webui/src/components/Instance/InstanceUserTask.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@
} from 'flowbite-svelte';
import {colorJobStatus} from "$lib/app.js";
import {CursorArrowRays, Play} from "svelte-heros-v2";
import {CursorArrowRays, InformationCircle, Play} from "svelte-heros-v2";
import {createSearchTableStore} from "../../lib/stores/search";
import {page} from "$app/stores";
import TableSearchBar from "$components/TableSearchBar.svelte";
import TablePagerBar from "$components/TablePagerBar.svelte";
import CompleteUserTaskModal from './CompleteUserTaskModal.svelte';
import type { UserTask } from '../../models/UserTask.model';
import InfoUserTaskModal from './InfoUserTaskModal.svelte';
Expand All @@ -31,27 +32,24 @@
export let elementMouseOut: any;
let completeModal: CompleteUserTaskModal;
let infoModal: InfoUserTaskModal;
</script>

<TableSearchBar searchStore={searchTableStore} />
<Table hoverable={true} divClass='relative overflow-x-auto border rounded-lg'>
<TableHead>
<TableHeadCell>Element Id</TableHeadCell>
<TableHeadCell>Users</TableHeadCell>
<TableHeadCell>Groups</TableHeadCell>
<TableHeadCell>Assignee</TableHeadCell>
<TableHeadCell>Due Date</TableHeadCell>
<TableHeadCell>Follow Up Date</TableHeadCell>
<TableHeadCell>State</TableHeadCell>
<TableHeadCell>Status</TableHeadCell>
<TableHeadCell>Time</TableHeadCell>
<TableHeadCell>Actions</TableHeadCell>
</TableHead>
<TableBody tableBodyClass="divide-y">
{#each $searchTableStore.paged as item}
<TableBodyRow>
<TableBodyCell><CursorArrowRays on:mouseover={elementMouseOver(item.elementId)} on:mouseout={elementMouseOut(item.elementId)} class="w-5 h-5 mr-2 -ml-1 focus:outline-none inline-flex"/>{item.elementId}</TableBodyCell>
<TableBodyCell>{item.users}</TableBodyCell>
<TableBodyCell>{item.groups}</TableBodyCell>
<TableBodyCell><CursorArrowRays on:mouseover={elementMouseOver(item.elementId)} on:mouseout={elementMouseOut(item.elementId)} class="w-5 h-5 mr-2 -ml-1 focus:outline-none inline-flex"/>{item.elementId}</TableBodyCell>
<TableBodyCell>{item.assignee}</TableBodyCell>
<TableBodyCell>{item.dueDate}</TableBodyCell>
<TableBodyCell>{item.followUpDate}</TableBodyCell>
Expand All @@ -64,6 +62,7 @@
<TableBodyCell>
<ButtonGroup>
<Button on:click={() => completeModal.init(item)} title="Complete job" disabled='{!item.isActivatable || !$page.data.instance.detail.isRunning}'><Play class="w-4 h-4 focus:outline-none inline-flex"/></Button>
<Button on:click={() => infoModal.init(item)} title="Details"><InformationCircle class="w-4 h-4 focus:outline-none inline-flex"/></Button>
</ButtonGroup>
</TableBodyCell>
</TableBodyRow>
Expand All @@ -73,3 +72,4 @@
<TablePagerBar searchStore={searchTableStore} />

<CompleteUserTaskModal bind:this={completeModal} />
<InfoUserTaskModal bind:this={infoModal} />
16 changes: 8 additions & 8 deletions src/main/webui/src/routes/tasks/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@
TableHeadCell,
ButtonGroup
} from 'flowbite-svelte';
import {Play} from "svelte-heros-v2";
import {Play, InformationCircle} from "svelte-heros-v2";
import { createSearchTableStore} from "../../lib/stores/search";
import TableSearchBar from "../../components/TableSearchBar.svelte";
import TablePagerBar from "../../components/TablePagerBar.svelte";
import {page} from "$app/stores";
import {colorJobStatus} from "$lib/app.js";
import CompleteUserTaskModal from '$components/Instance/CompleteUserTaskModal.svelte';
import type { UserTask } from '../../models/UserTask.model';
import InfoUserTaskModal from '$components/Instance/InfoUserTaskModal.svelte';
const searchTableStore = createSearchTableStore<UserTask>(page,
$p => $p.data.items.map((item: UserTask) => ({
Expand All @@ -26,29 +27,26 @@
), 10);
let completeModal: CompleteUserTaskModal;
let infoModal: InfoUserTaskModal;
</script>

<TableSearchBar searchStore={searchTableStore} />
<Table data-testid="userTasksTable" hoverable={true} divClass='relative overflow-x-auto border rounded-lg'>
<TableHead>
<TableHeadCell>Instance Key</TableHeadCell>
<TableHeadCell>Element</TableHeadCell>
<TableHeadCell>Users</TableHeadCell>
<TableHeadCell>Groups</TableHeadCell>
<TableHeadCell>Assignee</TableHeadCell>
<TableHeadCell>Due Date</TableHeadCell>
<TableHeadCell>Follow Up</TableHeadCell>
<TableHeadCell>State</TableHeadCell>
<TableHeadCell>Time</TableHeadCell>
<TableHeadCell>Created</TableHeadCell>
<TableHeadCell>Actions</TableHeadCell>
</TableHead>
<TableBody tableBodyClass="divide-y">
{#each $searchTableStore.paged as item}
<TableBodyRow>
<TableBodyCell><A href="/instances/{item.processInstanceKey}" class="font-medium hover:underline">{item.processInstanceKey}</A></TableBodyCell>
<TableBodyCell>{item.elementId}</TableBodyCell>
<TableBodyCell>{item.users}</TableBodyCell>
<TableBodyCell>{item.groups}</TableBodyCell>
<TableBodyCell>{item.assignee}</TableBodyCell>
<TableBodyCell>{item.dueDate}</TableBodyCell>
<TableBodyCell>{item.followUpDate}</TableBodyCell>
Expand All @@ -60,7 +58,8 @@
<TableBodyCell>{item.timestamp}</TableBodyCell>
<TableBodyCell>
<ButtonGroup>
<Button on:click={completeModal.init(item)} title="Complete job" disabled='{!item.isActivatable}'><Play class="w-4 h-4 focus:outline-none inline-flex"/></Button>
<Button on:click={() => completeModal.init(item)} title="Complete user task" disabled='{!item.isActivatable}'><Play class="w-4 h-4 focus:outline-none inline-flex"/></Button>
<Button on:click={() => infoModal.init(item)} title="Details"><InformationCircle class="w-4 h-4 focus:outline-none inline-flex"/></Button>
</ButtonGroup>
</TableBodyCell>
</TableBodyRow>
Expand All @@ -69,4 +68,5 @@
</Table>
<TablePagerBar searchStore={searchTableStore} />

<CompleteUserTaskModal bind:this={completeModal} />
<CompleteUserTaskModal bind:this={completeModal} />
<InfoUserTaskModal bind:this={infoModal} />

0 comments on commit 1701aaa

Please sign in to comment.