Hello Semua , skarang sudah ada fitur assigne dan claim ya nah fitur ini di gunakan untuk melakukan setting assigne task ke user tertentu dan claim task yang sudah di assigne ke user lain
Fitur itu ada di tasklist nya camunda ya
Dan juga ada di tampilan detail process instance di Cocpitnya
Fitur tersebut dapat di ambil dari appi usertask ya sebagai berikut
Claim Task
digunakan untuk melakukan set task ke user yang sedang login
[POST] /api/rtgs-approvals/tm-maintenance-review/claim/{{user_task_id}}/{{busniess_key}}
Assign Task
sementara assign digunakan untuk assign task ke user yang di pilih
[POST] /api/rtgs-approvals/tm-maintenance-review/assign/{{user_task_id}}/{{busniess_key}}
dengan payload
{"user_id":19999}
Tampilan pada alurkerja table
selain api teman teman juga bisa menambahkan tampilan assign delegate dan claim ini pada table alurkerja nya dengan cara
membuat assigne component dengan
import { AuthContext, Button, Input, Modal, Select } from "alurkerja-ui"
import { useContext, useEffect, useState } from "react"
import Swal from "sweetalert2"
const toKebabCase = (str: string) => {
if (str != null) {
return str.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g)
?.map(x => x.toLowerCase())
.join('-')
}
return ""
}
export default ({ task , id }: { task: any, id:string }) => {
const axiosInstance = useContext(AuthContext)
const claimTask = () => {
Swal.fire({
icon: 'warning',
title: "Claim Task",
text: "Apakah Anda Yakin Untuk Claim Task",
showCancelButton: true,
confirmButtonColor: '#0095E8',
cancelButtonColor: '#d33',
cancelButtonText: "Batalkan",
confirmButtonText: "Konfirmasi",
}).then(async (result) => {
if (result.isConfirmed) {
console.log(task)
const taskName = toKebabCase(task.taskDefinitionKey)
axiosInstance.post(`/api/rtgs-approvals/${taskName}/assign/${id}/${task.id}`, {user_id:19999}).then(
// axiosInstance.post(`/api/rtgs-approvals/${taskName}/claim/${id}/${task.id}`).then(
(response) => {
// Todo add handler
Swal.fire("Claim Task", "Behasil Melakukan Claim Task", "success")
}
).catch(() => {
Swal.fire("Oops", "Terjadi kesalahan ketika claim task", "error")
})
}
})
}
return <>
<div className="flex flex-row justify-between">
<div className="flex flex-col">
<div >
<b>{task.name}</b>
</div>
<div>
{task.assignee || "Not Assigned"}
</div>
</div>
<div>
{task.assignee &&
<div>
<DelegateModal task={task} id={id}></DelegateModal>
</div>
}
{task.assignee == null &&
<div>
<Button size="sm" onClick={() => {
claimTask()
}}>Claim</Button>
</div>
}
</div>
</div>
</>
}
const DelegateModal = ({ task , id }: {id : string , task: any}) => {
const action ="Delegate"
const taskName = toKebabCase(task.taskDefinitionKey)
const axiosInstance = useContext(AuthContext)
const [userList, setUserList] = useState<any[]>();
const getAssigne = () => {
axiosInstance.post(`/api/rtgs-approvals/${taskName}/assignee-candidate`, task).then((response) => {
setUserList(response.data.data)
})
}
const assign = () => {
Swal.fire({
icon: 'warning',
title: action + " Task",
text: "Apakah Anda Yakin Untuk " + action + " Task",
showCancelButton: true,
confirmButtonColor: '#0095E8',
cancelButtonColor: '#d33',
cancelButtonText: "Batalkan",
confirmButtonText: "Konfirmasi",
}).then(async (result) => {taskName
if (result.isConfirmed) {
console.log(task)
const taskName = toKebabCase(task.taskDefinitionKey)
axiosInstance.post(`/api/rtgs-approvals/${taskName}/assign/${id}/${task.id}`, {user_id:selectedAssigne}).then(
(response) => {
// Todo add handler
Swal.fire("Claim Task", "Behasil Melakukan Delegate Task", "success")
}
).catch(() => {
Swal.fire("Oops", "Terjadi kesalahan ketika delegate task", "error")
})
}
})
}
const [selectedAssigne, setSelectedAssigne] = useState();
const [message, setMessage] = useState("");
useEffect(() => {
getAssigne()
}, []);
return <Modal
title={action}
triggerButton={<Button size="sm">{action}</Button>}
>
<div>
<div className='px-4 pt-4'>
<label>Select Assigne</label>
<Select
onChange={(e: any) => { setSelectedAssigne(e.value) } }
options={userList}
/>
</div>
<div className='px-4 pt-4'>
<label>Message</label>
<Input type="text"
textArea={true}
onChange={(e: any) => { setMessage(e.target.value) }}
/>
</div>
<div className='px-4 pt-4'>
<Button onClick={() => { assign() }}>{action}</Button>
</div>
</div>
</Modal>
}
Tampilan yang akan di hasilkan dari component tersebut adalah sebuah cell yang bisa di masukan ke dalam table alurkerja dengan cara
<TableLowcode
...
customCell={({ name, fields, value, rowValue, defaultCell, }) => {
....
if (name == "status") {
return <>
{rowValue.available_task.map((item: any) => {
return <AssigneComponent task={item} id={rowValue.id}></AssigneComponent>
})}
</>
}
....
}}
/>
Dan akan menghasilkan tampilan seperti ini
tombol claim akan muncul ketika assinge masih kosong dan tombol delegate akan muncul ketika assigne sudah di isi
masing masing button akan memunculkan tampilan modal seperti ini
Delegate Candidate
ada juga api untuk menentukan assigne candidate yaitu
[POST]
/api/rtgs-approvals/${taskName}/assignee-candidate
api tersebut bisa di override dari service usertask yang di inginkan sesuai dengan parameter tertentu yang di post ke api tersebut
contoh pada react di atas
const getAssigne = () => {
axiosInstance.post(`/api/rtgs-approvals/${taskName}/assignee-candidate`, task).then((response) => {
setUserList(response.data.data)
})
}
ketika mengambil ke api tersebut kita mengirimkan kembali task yang sedang di kerjakan agar bisa dicheck sesuai dengan kriteria tasknya juga untuk itu silahkan override pada Usertaskservice bagian
public function assigneeCandidate($request)
{
// lakukan manipulasi pengambilan data user di sini
return User::all()->map(function ($data) {
return [
"value" => $data->id,
"label" => $data->name,
];
});
}
Berikut penjelasan dari masing masing component yang di gunakan
Silahkan jika ada yang kurang jelas bisa di tanyakan di grup telegram
Terimakasih