From bcd1ab0cf4757071a7b92bb58fe9211418a76a62 Mon Sep 17 00:00:00 2001 From: Remy van der Wereld Date: Thu, 8 Aug 2024 17:02:44 +0200 Subject: [PATCH 1/2] 122887 add task overview --- index.html | 14 +---- .../Table/components/TableHeader/Sorter.tsx | 4 +- src/app/pages/TasksPage/TaskPage.tsx | 51 ++++++++++++++++--- src/app/state/rest/index.ts | 2 +- src/app/state/rest/tasks.ts | 26 ++++++++++ 5 files changed, 75 insertions(+), 22 deletions(-) create mode 100644 src/app/state/rest/tasks.ts diff --git a/index.html b/index.html index 0cd40ea..ea2b0f0 100644 --- a/index.html +++ b/index.html @@ -5,19 +5,7 @@ Zaken Woningkwaliteit en Duurzaamheid - +
diff --git a/src/app/components/Table/components/TableHeader/Sorter.tsx b/src/app/components/Table/components/TableHeader/Sorter.tsx index 5837b4d..2c717d5 100644 --- a/src/app/components/Table/components/TableHeader/Sorter.tsx +++ b/src/app/components/Table/components/TableHeader/Sorter.tsx @@ -48,7 +48,7 @@ const StyledLabel = styled.div<{ $isSelected: boolean, $sortOrder: SortOrder }>` ` const StyledIcon = styled(Icon)<{ $isSelected: boolean }>` - margin: -5px 8px 0 8px; + margin: -2px 8px 0 8px; visibility: ${ ({ $isSelected }) => $isSelected ? "visible" : "hidden" }; ` @@ -66,7 +66,7 @@ const Sorter: React.FC = ({ header, index, sorting, onChangeSorting }) => return ( { header ?? <>  } - + ) } diff --git a/src/app/pages/TasksPage/TaskPage.tsx b/src/app/pages/TasksPage/TaskPage.tsx index d72da75..828da40 100644 --- a/src/app/pages/TasksPage/TaskPage.tsx +++ b/src/app/pages/TasksPage/TaskPage.tsx @@ -1,10 +1,49 @@ -import { PageHeading } from "app/components" +import dayjs from "dayjs" +import { ColumnType, LinkButton, PageHeading, Table } from "app/components" +import { useTasks } from "app/state/rest" -export const TasksPage: React.FC = () => ( - <> - - -) + +const columns: ColumnType[] = [ + { + header: "Taak ID", + dataIndex: "id", + sorter: (a: Components.Schemas.CaseUserTask, b: Components.Schemas.CaseUserTask) => a?.id - b?.id, + defaultSortOrder: "DESCEND" + }, { + header: "Open taak", + dataIndex: "name", + sorter: (a: Components.Schemas.CaseUserTask, b: Components.Schemas.CaseUserTask) => ( + a.name.localeCompare(b.name) + ) + }, { + header: "Gemaakt op", + dataIndex: "created", + sorter: (a: Components.Schemas.CaseUserTask, b: Components.Schemas.CaseUserTask) => ( + a.created.localeCompare(b.created) + ), + render: (text) => dayjs(text).format("DD-MM-YYYY HH:mm") + }, { + header: "", + dataIndex: "id", + minWidth: 170, + render: (id) => + } +] + +export const TasksPage: React.FC = () => { + const [data, { isBusy }] = useTasks() + + return ( + <> + + + + ) +} export default TasksPage \ No newline at end of file diff --git a/src/app/state/rest/index.ts b/src/app/state/rest/index.ts index 9ff04b3..c047124 100644 --- a/src/app/state/rest/index.ts +++ b/src/app/state/rest/index.ts @@ -9,4 +9,4 @@ export type Options = { } export * from "./cases" -// export * from "./tasks" +export * from "./tasks" diff --git a/src/app/state/rest/tasks.ts b/src/app/state/rest/tasks.ts new file mode 100644 index 0000000..4fcca68 --- /dev/null +++ b/src/app/state/rest/tasks.ts @@ -0,0 +1,26 @@ +import type { Options } from "." +import { makeApiUrl, useErrorHandler } from "./hooks/utils" +import useApiRequest from "./hooks/useApiRequest" + + +export const useTasks = (options?: Options) => { + const handleError = useErrorHandler() + return useApiRequest({ + ...options, + url: `${ makeApiUrl("tasks") }`, + groupName: "tasks", + handleError, + isProtected: true + }) +} + +export const useTask = (id: Components.Schemas.CaseUserTask["id"] ,options?: Options) => { + const handleError = useErrorHandler() + return useApiRequest({ + ...options, + url: `${ makeApiUrl("tasks", id) }`, + groupName: "tasks", + handleError, + isProtected: true + }) +} From 94863eae992acf16606b6a3f4f0e8e8cecb76c0c Mon Sep 17 00:00:00 2001 From: Remy van der Wereld Date: Fri, 9 Aug 2024 10:02:11 +0200 Subject: [PATCH 2/2] Added link to case --- src/app/pages/TasksPage/TaskPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/pages/TasksPage/TaskPage.tsx b/src/app/pages/TasksPage/TaskPage.tsx index 828da40..39a47d5 100644 --- a/src/app/pages/TasksPage/TaskPage.tsx +++ b/src/app/pages/TasksPage/TaskPage.tsx @@ -24,9 +24,9 @@ const columns: ColumnType[] = [ render: (text) => dayjs(text).format("DD-MM-YYYY HH:mm") }, { header: "", - dataIndex: "id", + dataIndex: "case", minWidth: 170, - render: (id) => + render: (caseId) => } ]