-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[TM-857] add basic structure for audit log (#249)
* add basic structure for audit log --------- Co-authored-by: Limber Mamani Vallejos <[email protected]> Co-authored-by: Dotty <[email protected]>
- Loading branch information
3 people
authored
Jun 17, 2024
1 parent
56c12c0
commit b71d6cd
Showing
34 changed files
with
1,370 additions
and
164 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
162 changes: 86 additions & 76 deletions
162
src/admin/components/ResourceTabs/AuditLogTab/AuditLogTab.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
src/admin/components/ResourceTabs/AuditLogTab/components/AuditLogSiteTabSelection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { FC } from "react"; | ||
|
|
||
| import Button from "@/components/elements/Button/Button"; | ||
|
|
||
| interface AuditLogSiteTabSelectionProps { | ||
| buttonToogle: number; | ||
| setButtonToogle: (buttonToogle: number) => void; | ||
| } | ||
|
|
||
| const tabNames = ["Project Status", "Site Status", "Polygon Status"]; | ||
|
|
||
| const AuditLogSiteTabSelection: FC<AuditLogSiteTabSelectionProps> = ({ buttonToogle, setButtonToogle }) => ( | ||
| <div className="flex w-fit gap-1 rounded-lg bg-neutral-200 p-1"> | ||
| {tabNames.map((tabName, index) => ( | ||
| <Button | ||
| key={index} | ||
| variant={`${buttonToogle === index ? "white-toggle" : "transparent-toggle"}`} | ||
| onClick={() => setButtonToogle(index)} | ||
| > | ||
| {tabName} | ||
| </Button> | ||
| ))} | ||
| </div> | ||
| ); | ||
|
|
||
| export default AuditLogSiteTabSelection; |
70 changes: 70 additions & 0 deletions
70
src/admin/components/ResourceTabs/AuditLogTab/components/AuditLogTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { FC, Fragment } from "react"; | ||
|
|
||
| import { convertDateFormat } from "@/admin/apiProvider/utils/entryFormat"; | ||
| import Text from "@/components/elements/Text/Text"; | ||
| import { AuditStatusResponse, V2FileRead } from "@/generated/apiSchemas"; | ||
|
|
||
| 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") { | ||
| return "New Comment"; | ||
| } else if (item.type === "status") { | ||
| return `New Status: ${formattedTextStatus(item.status)}`; | ||
| } else if (item.request_removed) { | ||
| return "Change Request Removed"; | ||
| } else { | ||
| return "Change Requested Added"; | ||
| } | ||
| }; | ||
|
|
||
| const columnTitles = ["Date", "User", "Action", "Comments", "Attachments"]; | ||
|
|
||
| const AuditLogTable: FC<{ auditLogData: { data: AuditStatusResponse[] } }> = ({ auditLogData }) => ( | ||
| <> | ||
| <div className="grid grid-cols-[14%_20%_15%_30%_21%]"> | ||
| {columnTitles.map(title => ( | ||
| <Text key={title} variant="text-12-light" className="border-b border-b-grey-750 text-grey-700"> | ||
| {title} | ||
| </Text> | ||
| ))} | ||
| </div> | ||
| <div className="mr-[-7px] grid max-h-[50vh] min-h-[10vh] grid-cols-[14%_20%_15%_30%_21%] overflow-auto pr-[7px]"> | ||
| {auditLogData?.data?.map((item: AuditStatusResponse, index: number) => ( | ||
| <Fragment key={index}> | ||
| <Text variant="text-12" className="border-b border-b-grey-750 py-2 pr-2"> | ||
| {convertDateFormat(item?.date_created)} | ||
| </Text> | ||
| <Text variant="text-12" className="border-b border-b-grey-750 py-2 pr-2"> | ||
| {`${item.first_name} ${item.last_name}`} | ||
| </Text> | ||
| <Text variant="text-12" className="border-b border-b-grey-750 py-2 pr-2"> | ||
| {getTextForActionTable(item as { type: string; status: string; request_removed: boolean })} | ||
| </Text> | ||
| <Text variant="text-12" className="border-b border-b-grey-750 py-2"> | ||
| {item.comment ?? "-"} | ||
| </Text> | ||
| <div className="grid max-w-full gap-2 gap-y-1 border-b border-b-grey-750 py-2"> | ||
| {item?.attachments?.map((attachmentItem: V2FileRead) => ( | ||
| <Text | ||
| key={attachmentItem.uuid} | ||
| variant="text-12-light" | ||
| className="h-min w-fit max-w-full cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap rounded-xl bg-neutral-40 px-2 py-0.5" | ||
| as={"span"} | ||
| onClick={() => { | ||
| attachmentItem.url && window.open(attachmentItem.url, "_blank"); | ||
| }} | ||
| > | ||
| {attachmentItem.file_name} | ||
| </Text> | ||
| ))} | ||
| </div> | ||
| </Fragment> | ||
| ))} | ||
| </div> | ||
| </> | ||
| ); | ||
|
|
||
| export default AuditLogTable; |
74 changes: 74 additions & 0 deletions
74
src/admin/components/ResourceTabs/AuditLogTab/components/SiteAuditLogEntityStatus.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { FC } from "react"; | ||
| import { Link as RaLink, useBasename } from "react-admin"; | ||
| import { When } from "react-if"; | ||
|
|
||
| import modules from "@/admin/modules"; | ||
| import Text from "@/components/elements/Text/Text"; | ||
| import { AuditStatusResponse } from "@/generated/apiSchemas"; | ||
|
|
||
| import CommentarySection from "../../PolygonReviewTab/components/CommentarySection/CommentarySection"; | ||
| import { AuditLogButtonStates } from "../constants/enum"; | ||
| import { AuditLogEntity } from "../constants/types"; | ||
| import AuditLogTable from "./AuditLogTable"; | ||
|
|
||
| export interface SiteAuditLogEntityStatusProps { | ||
| entityType: AuditLogEntity; | ||
| record: SelectedItem | null; | ||
| auditLogData?: { data: AuditStatusResponse[] }; | ||
| refresh: () => void; | ||
| buttonToogle: number; | ||
| } | ||
|
|
||
| interface SelectedItem { | ||
| title?: string | undefined; | ||
| name?: string | undefined; | ||
| uuid?: string | undefined; | ||
| value?: string | undefined; | ||
| meta?: string | undefined; | ||
| status?: string | undefined; | ||
| } | ||
|
|
||
| const SiteAuditLogEntityStatus: FC<SiteAuditLogEntityStatusProps> = ({ | ||
| entityType, | ||
| record, | ||
| auditLogData, | ||
| refresh, | ||
| buttonToogle | ||
| }) => { | ||
| const isSite = buttonToogle === AuditLogButtonStates.SITE; | ||
| const basename = useBasename(); | ||
|
|
||
| const getTitle = () => record?.title ?? record?.name; | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-6"> | ||
| <div> | ||
| <Text variant="text-24-bold" className="mb-1"> | ||
| {entityType} Status and Comments | ||
| </Text> | ||
| <Text variant="text-14-light" className="mb-4"> | ||
| Update the {entityType?.toLowerCase()} status, view updates, or add comments | ||
| </Text> | ||
| <CommentarySection record={record} entity={entityType} refresh={refresh} viewCommentsList={false} /> | ||
| </div> | ||
| <div> | ||
| {!isSite && <Text variant="text-16-bold">History and Discussion for {getTitle()}</Text>} | ||
| {isSite && ( | ||
| <Text variant="text-16-bold"> | ||
| <RaLink | ||
| className="text-16-bold !text-[#000000DD]" | ||
| to={`${basename}/${modules.site.ResourceName}/${record?.uuid}/show/6`} | ||
| > | ||
| {getTitle()} | ||
| </RaLink> | ||
| </Text> | ||
| )} | ||
| </div> | ||
| <When condition={!!auditLogData}> | ||
| <AuditLogTable auditLogData={auditLogData!} /> | ||
| </When> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SiteAuditLogEntityStatus; |
Oops, something went wrong.