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 => {
/>
) : (