Merge pull request #27 from Amsterdam/feature/122887-task-overview

122887 add task overview
Amsterdam · Aug 9, 2024 · 2926ef3 · 2926ef3
2 parents 5ab8847 + 94863ea
commit 2926ef3
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 22 deletions.
diff --git a/index.html b/index.html
@@ -5,19 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/amsterdam.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Zaken Woningkwaliteit en Duurzaamheid</title>
-    <script>
-      // Check if the hostname contains "localhost" or is an IP address commonly used for localhost
-
-      if (window.location.host === 'localhost:5173') {
-          // Do not load the script
-          console.log('Skipping env.js on localhost.');
-      } else {
-          // Load the script
-          var script = document.createElement('script');
-          script.src = '/config/env.js';
-          document.head.appendChild(script);
-      }
-    </script>
+    <script src='/config/env.js'></script>
   </head>
   <body>
     <div id="root"></div>

diff --git 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<Props> = ({ header, index, sorting, onChangeSorting }) =>
   return (
     <StyledLabel $isSelected={ isSelected } $sortOrder={ sorting?.order ?? ASCEND } onClick={ onSorterClick }>
       { header ?? <>&nbsp;</> }
-      <StyledIcon $isSelected={ isSelected } svg={ iconSvg } size="level-5" />
+      <StyledIcon $isSelected={ isSelected } svg={ iconSvg } size="level-3" />
     </StyledLabel>
   )
 }

diff --git 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 = () => (
-  <>
-    <PageHeading label="Takenoverzicht" />
-  </>
-)
+
+const columns: ColumnType<Components.Schemas.CaseUserTask>[] = [
+  {
+    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) => <LinkButton label="Zaakdetails" path={ `/zaken/${ caseId }`} />
+  }
+]
+
+export const TasksPage: React.FC = () => {
+  const [data, { isBusy }] = useTasks()
+
+  return (
+    <>
+      <PageHeading label="Takenoverzicht" />
+      <Table 
+        columns={ columns } 
+        data={ data as Components.Schemas.CaseUserTask[] } 
+        loading={ isBusy }
+      />
+    </>
+  )
+}
 
 export default TasksPage
 
diff --git 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
@@ -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<Components.Schemas.CaseUserTask[]>({
+    ...options,
+    url: `${ makeApiUrl("tasks") }`,
+    groupName: "tasks",
+    handleError,
+    isProtected: true
+  })
+}
+
+export const useTask = (id: Components.Schemas.CaseUserTask["id"] ,options?: Options) => {
+  const handleError = useErrorHandler()
+  return useApiRequest<Components.Schemas.CaseUserTask>({
+    ...options,
+    url: `${ makeApiUrl("tasks", id) }`,
+    groupName: "tasks",
+    handleError,
+    isProtected: true
+  })
+}