mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +00:00
chore: adjust ApprovalSteps component
This commit is contained in:
@@ -18,6 +18,7 @@ import { useCallback, useMemo } from 'react';
|
|||||||
export type ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
|
export type ApprovalStepStatus = 'APPROVED' | 'REJECTED' | 'WAITING' | 'IDLE';
|
||||||
|
|
||||||
export type ApprovalStepLog = {
|
export type ApprovalStepLog = {
|
||||||
|
action: string;
|
||||||
action_by?: string;
|
action_by?: string;
|
||||||
date?: string;
|
date?: string;
|
||||||
notes?: string | null;
|
notes?: string | null;
|
||||||
@@ -65,28 +66,55 @@ const ApprovalSteps = ({ approvals }: ApprovalStepsProps) => {
|
|||||||
position='right'
|
position='right'
|
||||||
className={{
|
className={{
|
||||||
wrapper: 'md:tooltip-bottom',
|
wrapper: 'md:tooltip-bottom',
|
||||||
|
content: 'p-0 rounded overflow-hidden',
|
||||||
}}
|
}}
|
||||||
content={
|
content={
|
||||||
<>
|
<>
|
||||||
{approval.logs && approval.logs.length > 0 && (
|
{approval.logs && approval.logs.length > 0 && (
|
||||||
<div className='flex flex-col gap-2'>
|
<div className='flex flex-col gap-0'>
|
||||||
{approval.logs?.map((approvalLog, logIdx) => (
|
{approval.logs?.map((approvalLog, logIdx) => {
|
||||||
<div
|
const action =
|
||||||
key={logIdx}
|
approvalLog.action === 'CREATED'
|
||||||
className='flex flex-col text-base text-start'
|
? 'Dibuat'
|
||||||
>
|
: approvalLog.action === 'UPDATED'
|
||||||
{approvalLog.date && (
|
? 'Diperbarui'
|
||||||
<span>
|
: approvalLog.action === 'APPROVED'
|
||||||
{formatDate(
|
? 'Disetujui'
|
||||||
approvalLog.date,
|
: approvalLog.action === 'REJECTED'
|
||||||
'YYYY-MM-DD, HH:mm:ss'
|
? 'Ditolak'
|
||||||
)}
|
: '-';
|
||||||
</span>
|
|
||||||
)}
|
return (
|
||||||
<span>Oleh: {approvalLog.action_by ?? '-'}</span>
|
<div
|
||||||
<span>Catatan: {approvalLog.notes ?? '-'}</span>
|
key={logIdx}
|
||||||
</div>
|
className={cn(
|
||||||
))}
|
'p-2 flex flex-col text-base text-start',
|
||||||
|
{
|
||||||
|
'bg-success text-success-content':
|
||||||
|
approvalLog.action === 'APPROVED',
|
||||||
|
'bg-error text-error-content':
|
||||||
|
approvalLog.action === 'REJECTED',
|
||||||
|
'bg-info text-info-content':
|
||||||
|
approvalLog.action === 'CREATED',
|
||||||
|
'bg-warning text-warning-content':
|
||||||
|
approvalLog.action === 'UPDATED',
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{approvalLog.date && (
|
||||||
|
<span>
|
||||||
|
{formatDate(
|
||||||
|
approvalLog.date,
|
||||||
|
'YYYY-MM-DD, HH:mm:ss'
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span>Aksi: {action}</span>
|
||||||
|
<span>Oleh: {approvalLog.action_by ?? '-'}</span>
|
||||||
|
<span>Catatan: {approvalLog.notes ?? '-'}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
@@ -130,6 +158,8 @@ export const formatGroupedApprovalsToApprovalSteps = (
|
|||||||
const lastStepNumber =
|
const lastStepNumber =
|
||||||
groupedApprovals[groupedApprovals.length - 1]?.step_number;
|
groupedApprovals[groupedApprovals.length - 1]?.step_number;
|
||||||
|
|
||||||
|
const isLatestApprovalRejected = latestApproval.action === 'REJECTED';
|
||||||
|
|
||||||
if (!approvalGroup && currentStepNumber <= lastStepNumber) {
|
if (!approvalGroup && currentStepNumber <= lastStepNumber) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
`Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
|
`Approval dengan ${approvalLineItem.step_name} tidak ditemukan!`
|
||||||
@@ -158,6 +188,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
|
|||||||
if (approvalGroup.approvals) {
|
if (approvalGroup.approvals) {
|
||||||
switch (approvalGroup?.approvals[0]?.action) {
|
switch (approvalGroup?.approvals[0]?.action) {
|
||||||
case 'CREATED':
|
case 'CREATED':
|
||||||
|
case 'UPDATED':
|
||||||
case 'APPROVED':
|
case 'APPROVED':
|
||||||
approvalStatus = 'APPROVED';
|
approvalStatus = 'APPROVED';
|
||||||
break;
|
break;
|
||||||
@@ -171,7 +202,10 @@ export const formatGroupedApprovalsToApprovalSteps = (
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else if (approvalGroup.step_number === latestApproval.step_number + 1) {
|
} else if (
|
||||||
|
approvalGroup.step_number === latestApproval.step_number + 1 &&
|
||||||
|
!isLatestApprovalRejected
|
||||||
|
) {
|
||||||
approvalStatus = 'WAITING';
|
approvalStatus = 'WAITING';
|
||||||
} else {
|
} else {
|
||||||
approvalStatus = 'IDLE';
|
approvalStatus = 'IDLE';
|
||||||
@@ -182,6 +216,7 @@ export const formatGroupedApprovalsToApprovalSteps = (
|
|||||||
action_by: approval.action_by.name,
|
action_by: approval.action_by.name,
|
||||||
date: approval.action_at,
|
date: approval.action_at,
|
||||||
notes: approval.notes,
|
notes: approval.notes,
|
||||||
|
action: approval.action,
|
||||||
}))
|
}))
|
||||||
: [];
|
: [];
|
||||||
|
|
||||||
@@ -192,6 +227,13 @@ export const formatGroupedApprovalsToApprovalSteps = (
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
console.log({
|
||||||
|
approvalLine,
|
||||||
|
groupedApprovals,
|
||||||
|
latestApproval,
|
||||||
|
formattedApprovalSteps,
|
||||||
|
});
|
||||||
|
|
||||||
return formattedApprovalSteps;
|
return formattedApprovalSteps;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user