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..39a47d5 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: "case",
+ minWidth: 170,
+ render: (caseId) =>
+ }
+]
+
+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
+ })
+}