From 1701aaa1a3c90473e28c0fdb6d74f3552e29cc93 Mon Sep 17 00:00:00 2001
From: Andrej Petras <andrej@lorislab.org>
Date: Sun, 23 Apr 2023 20:46:35 +0200
Subject: [PATCH] feat: add user task properties modal

---
 .../Instance/InfoUserTaskModal.svelte         | 61 +++++++++++++++++++
 .../Instance/InstanceUserTask.svelte          | 14 ++---
 src/main/webui/src/routes/tasks/+page.svelte  | 16 ++---
 3 files changed, 76 insertions(+), 15 deletions(-)
 create mode 100644 src/main/webui/src/components/Instance/InfoUserTaskModal.svelte

diff --git a/src/main/webui/src/components/Instance/InfoUserTaskModal.svelte b/src/main/webui/src/components/Instance/InfoUserTaskModal.svelte
new file mode 100644
index 0000000..0464fd5
--- /dev/null
+++ b/src/main/webui/src/components/Instance/InfoUserTaskModal.svelte
@@ -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>
\ No newline at end of file
diff --git a/src/main/webui/src/components/Instance/InstanceUserTask.svelte b/src/main/webui/src/components/Instance/InstanceUserTask.svelte
index 4e3626a..bcfb941 100644
--- a/src/main/webui/src/components/Instance/InstanceUserTask.svelte
+++ b/src/main/webui/src/components/Instance/InstanceUserTask.svelte
@@ -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';
 
 
 
@@ -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>
@@ -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>
@@ -73,3 +72,4 @@
 <TablePagerBar searchStore={searchTableStore} />
 
 <CompleteUserTaskModal bind:this={completeModal} />
+<InfoUserTaskModal bind:this={infoModal} />
\ No newline at end of file
diff --git a/src/main/webui/src/routes/tasks/+page.svelte b/src/main/webui/src/routes/tasks/+page.svelte
index 0a176b1..3b5dc8f 100644
--- a/src/main/webui/src/routes/tasks/+page.svelte
+++ b/src/main/webui/src/routes/tasks/+page.svelte
@@ -9,7 +9,7 @@
         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";
@@ -17,6 +17,7 @@
     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) => ({
@@ -26,6 +27,7 @@
         ), 10);
 
     let completeModal: CompleteUserTaskModal;
+    let infoModal: InfoUserTaskModal;
 </script>
 
 <TableSearchBar searchStore={searchTableStore} />
@@ -33,13 +35,11 @@
     <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">
@@ -47,8 +47,6 @@
         <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>
@@ -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>
@@ -69,4 +68,5 @@
 </Table>
 <TablePagerBar searchStore={searchTableStore} />
 
-<CompleteUserTaskModal bind:this={completeModal} />
\ No newline at end of file
+<CompleteUserTaskModal bind:this={completeModal} />
+<InfoUserTaskModal bind:this={infoModal} />
\ No newline at end of file