From 9d0f6ba316581b360ffee4ddae0b110cd89c36d7 Mon Sep 17 00:00:00 2001 From: Limber Mamani <154026979+LimberHope@users.noreply.github.com> Date: Mon, 23 Sep 2024 11:56:07 -0400 Subject: [PATCH] [TM-1188] update audit log ux (#499) * [TM-1188] update audit log to close and save * [TM-1188] keep audit log to polygons * [TM-1188] update text for action table * [TM-1188] improve get columntitle and size --- src/admin/apiProvider/utils/entryFormat.ts | 6 ++- .../AuditLogTab/components/AuditLogTable.tsx | 53 +++++++++++++++---- src/components/extensive/WizardForm/index.tsx | 4 +- .../edit/[uuid]/EditEntityForm.tsx | 8 ++- 4 files changed, 55 insertions(+), 16 deletions(-) diff --git a/src/admin/apiProvider/utils/entryFormat.ts b/src/admin/apiProvider/utils/entryFormat.ts index e02829c6e..99d7abcb3 100644 --- a/src/admin/apiProvider/utils/entryFormat.ts +++ b/src/admin/apiProvider/utils/entryFormat.ts @@ -32,8 +32,10 @@ export const convertDateFormat = (value: any) => { const formattedDay = dateObject.getUTCDate().toString().padStart(2, "0"); const formattedMonth = (dateObject.getUTCMonth() + 1).toString().padStart(2, "0"); const formattedYear = dateObject.getUTCFullYear(); - const formattedDate = `${formattedDay}/${formattedMonth}/${formattedYear}`; + const formattedHours = dateObject.getUTCHours().toString().padStart(2, "0"); + const formattedMinutes = dateObject.getUTCMinutes().toString().padStart(2, "0"); + const formattedDate = `${formattedDay}/${formattedMonth}/${formattedYear} ${formattedHours}:${formattedMinutes}`; return formattedDate; } - return format(new Date(value), "dd/MM/yyyy"); + return format(new Date(value), "dd/MM/yyyy HH:mm"); }; diff --git a/src/admin/components/ResourceTabs/AuditLogTab/components/AuditLogTable.tsx b/src/admin/components/ResourceTabs/AuditLogTab/components/AuditLogTable.tsx index b7183733e..025690d8f 100644 --- a/src/admin/components/ResourceTabs/AuditLogTab/components/AuditLogTable.tsx +++ b/src/admin/components/ResourceTabs/AuditLogTab/components/AuditLogTable.tsx @@ -15,19 +15,24 @@ const formattedTextStatus = (text: string) => { return text?.replace(/-/g, " ").replace(/\b\w/g, char => char.toUpperCase()); }; -const getTextForActionTable = (item: { type: string; status: string; request_removed: boolean }): string => { - if (item.type === "comment") { +const getTextForActionTable = ( + item: { type: string; status: string; request_removed: boolean }, + entity?: string +): string => { + if (item.type === "comment" && entity == "site-polygon") { return "New Comment"; - } else if (item.type === "status") { + } else if (item.type === "status" && entity == "site-polygon") { return `New Status: ${formattedTextStatus(item.status)}`; } else if (item.type === "change-request-updated") { return "Change Request Updated"; - } else if (item.request_removed) { + } else if (item.request_removed && entity == "site-polygon") { return "Change Request Removed"; } else if (item.type === "reminder-sent") { return "Reminder Sent"; - } else { + } else if (item.type === "change-request") { return "Change Requested"; + } else { + return "-"; } }; @@ -42,10 +47,30 @@ const AuditLogTable: FC<{ const menuOverflowContainerRef = useRef(null); const route = useRouter(); const isAdmin = route.asPath.includes("admin"); - const columnTitles = isAdmin - ? ["Date", "User", "Action", "Comments", "Attachments", ""] - : ["Date", "User", "Action", "Comments", "Attachments"]; - const gridColumnSize = isAdmin ? "grid-cols-[14%_20%_15%_27%_19%_5%]" : "grid-cols-[14%_20%_15%_30%_21%]"; + + const getColumnTitles = (entity: string, isAdmin: boolean) => { + if (entity === "site-polygon") { + return isAdmin + ? ["Date", "User", "Action", "Comments", "Attachments", ""] + : ["Date", "User", "Action", "Comments", "Attachments"]; + } else { + return isAdmin + ? ["Date", "User", "Status", "Change Request", "Comments", "Attachments", ""] + : ["Date", "User", "Status", "Change Request", "Comments", "Attachments"]; + } + }; + + const getGridColumnSize = (entity: string, isAdmin: boolean) => { + if (entity === "site-polygon") { + return isAdmin ? "grid-cols-[14%_20%_15%_27%_19%_5%]" : "grid-cols-[14%_20%_15%_30%_21%]"; + } else { + return isAdmin ? "grid-cols-[14%_10%_10%_15%_27%_19%_5%]" : "grid-cols-[14%_10%_10%_15%_30%_21%]"; + } + }; + + const columnTitles = getColumnTitles(auditData?.entity as string, isAdmin); + const gridColumnSize = getGridColumnSize(auditData?.entity as string, isAdmin); + const { openNotification } = useNotificationContext(); const t = useT(); const { mutate } = useDeleteV2ENTITYUUIDIDDelete({ @@ -87,8 +112,16 @@ const AuditLogTable: FC<{ {generateUserName(item.first_name, item.last_name)} + + + {formattedTextStatus(item.status as string) ?? "-"} + + - {getTextForActionTable(item as { type: string; status: string; request_removed: boolean })} + {getTextForActionTable( + item as { type: string; status: string; request_removed: boolean }, + auditData?.entity + )} {item.comment ?? "-"} diff --git a/src/components/extensive/WizardForm/index.tsx b/src/components/extensive/WizardForm/index.tsx index 03c6d9c0a..a9fe3af6e 100644 --- a/src/components/extensive/WizardForm/index.tsx +++ b/src/components/extensive/WizardForm/index.tsx @@ -24,7 +24,7 @@ export interface WizardFormProps { steps: FormStepSchema[]; defaultValues?: any; onStepChange?: (values: any, step: FormStepSchema) => void; - onChange?: (values: any) => void; + onChange?: (values: any, isCloseAndSave?: boolean) => void; onSubmit?: (values: any) => void; onBackFirstStep: () => void; onCloseForm?: () => void; @@ -115,7 +115,7 @@ function WizardForm(props: WizardFormProps) { }; const onClickSaveAndClose = () => { - props.onChange?.(formHook.getValues()); + props.onChange?.(formHook.getValues(), true); modal.openModal( ModalId.SAVE_AND_CLOSE_MODAL, router.push("/home")} - onChange={data => + onChange={(data, closeAndSave?: boolean) => updateEntity({ pathParams: { uuid: entityUUID, entity: entityName }, - body: { answers: normalizedFormData(data, formSteps!) } + // @ts-ignore + body: { + answers: normalizedFormData(data, formSteps!), + ...(closeAndSave ? { continue_later_action: true } : {}) + } }) } formStatus={isSuccess ? "saved" : isUpdating ? "saving" : undefined}