diff --git a/src/components/ProjectAuditTable.tsx b/src/components/ProjectAuditTable.tsx index d8ba6ec..c2fb531 100644 --- a/src/components/ProjectAuditTable.tsx +++ b/src/components/ProjectAuditTable.tsx @@ -10,7 +10,7 @@ import { import makeStyles from "@mui/styles/makeStyles"; import { AuditAction } from "@gliff-ai/annotate"; -import { AnnotationSession, ImageData } from "@/index"; +import { ProjectAuditAction, ImageData } from "@/index"; const useStyles = makeStyles(() => ({ tableText: { @@ -20,13 +20,25 @@ const useStyles = makeStyles(() => ({ })); interface Props { - sessions: AnnotationSession[]; + actions: ProjectAuditAction[]; searchField: string; searchValue: string; setAudit: (audit: AuditAction[]) => void; setProductsNavbarImageData: (imageData: ImageData) => void; } +function camelNameToLabel (name: string) { + // https://www.codeproject.com/Tips/5320583/Converting-Camel-Case-Names-to-Human-Case-Labels + let reFindHumps = /([A-Z]){1}([a-z0-9]){1}/g + let re1stLower = /^[a-z]{1}/ + let label = name.replace(reFindHumps, ' $1$2') + + if (re1stLower.test(label)) { + label = label.slice(0,1).toUpperCase() + label.substring(1) + } + return label +} + export const ProjectAuditTable = (props: Props): ReactElement => { const classes = useStyles(); @@ -38,37 +50,37 @@ export const ProjectAuditTable = (props: Props): ReactElement => { Date & Time User Action - Image + Details - {props.sessions + {props.actions .filter( - (session: AnnotationSession) => + (action: ProjectAuditAction) => !["User", "Image"].includes(props.searchField) || (props.searchField === "User" && - session.username.includes(props.searchValue)) || + action.username.includes(props.searchValue)) || (props.searchField.toLowerCase() === "Image" && - session.imagename.toLowerCase().includes(props.searchValue)) + action.action.imagename.toLowerCase().includes(props.searchValue)) ) - .map((session: AnnotationSession) => ( + .map((action: ProjectAuditAction) => ( { - props.setAudit(session.audit); + key={`${action.timestamp}`} + onClick={action.action.type === "annotate" ? () => { + props.setAudit(action.action.audit); props.setProductsNavbarImageData({ - imageName: session?.imagename, - imageUid: session?.imageUid, + imageName: action?.action.imagename, + imageUid: action?.action.imageUid, }); - }} + } : null} style={{ cursor: "pointer" }} > - {new Date(session.timestamp).toLocaleString()} + {new Date(action.timestamp).toLocaleString()} - {session.username} - Annotate - {session.imagename} + {action.username} + {camelNameToLabel(action.action.type)} + {action.action.imagename} ))} diff --git a/src/index.tsx b/src/index.tsx index 514d80d..870b252 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -71,9 +71,15 @@ export interface AnnotationSession { imageUid: string; } +export interface ProjectAuditAction { + action: {type: string, audit?: AuditAction[]} & Record; + username: string; + timestamp: string; +} + interface Props { showAppBar: boolean; - sessions: AnnotationSession[]; + actions: ProjectAuditAction[]; setProductsNavbarImageData: (imageName: ImageData) => void; } @@ -102,6 +108,7 @@ const UserInterface = (props: Props): ReactElement => { ); + return ( @@ -163,7 +170,7 @@ const UserInterface = (props: Props): ReactElement => { /> ) : (