121129

package.json

@@ -31,6 +31,7 @@
     "oidc-client-ts": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.52.1",
     "react-oidc-context": "^3.1.0",
     "react-router-dom": "^6.25.1",
     "styled-components": "^6.1.12",

src/app/components/PageHeading/PageHeading.tsx

@@ -0,0 +1,28 @@
+import { Heading, Icon, IconProps } from "@amsterdam/design-system-react"
+import styled from "styled-components"
+
+type Props = {
+  label: string
+  icon?: IconProps["svg"]
+}
+
+const LEVEL = 4
+
+const Wrapper = styled.span`
+  display: flex;  
+`
+
+const StyledIcon = styled(Icon)`
+  margin-right: 0.5rem;
+`
+
+export const PageHeading: React.FC<Props> = ({ label, icon }) =>  (
+  <Wrapper>
+    { icon && <StyledIcon svg={icon} /> }
+    <Heading level={ LEVEL } >
+      { label }
+    </Heading>
+  </Wrapper>
+)
+
+export default PageHeading

src/app/components/index.ts

@@ -1,5 +1,6 @@
 export * from "./DefaultLayout/DefaultLayout"
 export * from "./NavMenu/NavMenu"
+export * from "./PageHeading/PageHeading"
 export * from "./RouterLink/RouterLink"
 export * from "./SmallSkeleton/SmallSkeleton"
 export * from "./Spinner/Spinner"

src/app/pages/CaseCreatePage/CaseCreatePage copy.tsx

@@ -0,0 +1,68 @@
+import { Button, Field, Grid, Label, Paragraph, TextArea } from "@amsterdam/design-system-react"
+import { EditDocumentIcon } from "@amsterdam/design-system-react-icons"
+import { SubmitHandler, useForm } from "react-hook-form"
+import { PageHeading } from "app/components"
+import { useCases } from "app/state/rest"
+import styled from "styled-components"
+
+
+type IFormInput = {
+  description?: Components.Schemas.CaseCreate["description"]
+}
+
+const StyledGrid = styled(Grid)`
+  padding-left: 0; // Overwrite the default padding of the Grid.
+`
+
+export const CaseCreatePage: React.FC = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors }
+  } = useForm()
+  const [ ,{ execPost } ] = useCases()
+
+  const onSubmit: SubmitHandler<IFormInput> = (data) => {
+    console.log("DATA", data)
+    const values: Components.Schemas.CaseCreate = {
+      description: data?.description as string
+    }
+    execPost(values as Components.Schemas.Case)
+      .then((resp) => {
+        console.log("SUCCES", resp)
+      }).catch((err) => {
+        console.log("Error", err)
+      })
+  }
+
+  console.log("errors", errors)
+  console.log("!errors.description", !errors.description)
+  console.log("!!errors.description", !!errors.description)
+  return (
+    <>
+      <PageHeading label="Nieuwe zaak aanmaken" icon={ EditDocumentIcon } />
+      <StyledGrid paddingTop="small" paddingBottom="medium">
+        <Grid.Cell span={{ narrow: 4, medium: 6, wide: 8 }} start={ 1 }>
+          <form className="ams-gap--md" id="main" onSubmit={ void handleSubmit(onSubmit)}>
+            <Field>
+              <Label htmlFor="body">Toelichting</Label>
+              <Paragraph id="bodyDescription" size="small">
+                Geef een toelichting voor deze VVE (niet verplicht). 
+              </Paragraph>
+              <TextArea
+                aria-describedby="bodyDescription"
+                id="body"
+                rows={4}
+                // invalid={ !!errors.description }
+                {...register("description", { required: true, maxLength: 1000 })}
+              />
+            </Field>
+            <div>
+              <Button type="submit">Zaak aanmaken</Button>
+            </div>
+          </form>
+        </Grid.Cell>
+      </StyledGrid>
+    </>
+  )
+}

src/app/pages/CaseCreatePage/CaseCreatePage.tsx

@@ -0,0 +1,70 @@
+import { Button, ErrorMessage, Field, Grid, Label, Paragraph, TextArea } from "@amsterdam/design-system-react"
+import { EditDocumentIcon } from "@amsterdam/design-system-react-icons"
+import { useForm } from "react-hook-form"
+import { PageHeading } from "app/components"
+import { useCases } from "app/state/rest"
+import styled from "styled-components"
+import withExceptionCapturing from "app/utils/withExceptionCapturing"
+
+type FormData  = {
+  description?: Components.Schemas.CaseCreate["description"]
+}
+
+const StyledGrid = styled(Grid)`
+  padding-left: 0; // Overwrite the default padding of the Grid.
+`
+
+export const CaseCreatePage: React.FC = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid }
+  } = useForm<FormData>()
+  const [ ,{ execPost } ] = useCases()
+
+  const onSubmit = handleSubmit((data) => {
+    const values: Components.Schemas.CaseCreate = {
+      description: data?.description as string
+    }
+    execPost(values as Components.Schemas.Case)
+      .then((resp) => {
+        console.log("SUCCES", resp)
+      }).catch((err) => {
+        console.log("Error", err)
+      })
+  })
+
+
+  return (
+    <>
+      <PageHeading label="Nieuwe zaak aanmaken" icon={ EditDocumentIcon } />
+      <StyledGrid paddingTop="small" paddingBottom="medium">
+        <Grid.Cell span={{ narrow: 4, medium: 6, wide: 8 }} start={ 1 }>
+          <form className="ams-gap--md" id="main" onSubmit={withExceptionCapturing(onSubmit)}>
+            <Field>
+              <Label htmlFor="body">Toelichting</Label>
+              <Paragraph id="bodyDescription" size="small">
+                Geef een toelichting voor deze VVE (niet verplicht). 
+              </Paragraph>
+              <TextArea
+                aria-describedby="bodyDescription"
+                id="body"
+                rows={4}
+                invalid={ !!errors.description }
+                {...register("description", { required: true, maxLength: 1000 })}
+              />
+              { errors.description && (
+                <ErrorMessage>
+                  Dit is een verplicht veld!
+                </ErrorMessage>
+              )}
+            </Field>
+            <div>
+              <Button type="submit" disabled={ !isValid  }>Zaak aanmaken</Button>
+            </div>
+          </form>
+        </Grid.Cell>
+      </StyledGrid>
+    </>
+  )
+}

src/app/pages/CasesPage/CasesPage.tsx

@@ -1,6 +1,5 @@
-import { Heading } from "@amsterdam/design-system-react"
 import { useCases } from "app/state/rest"
-import { ColumnType, Table } from "app/components"
+import { ColumnType, Table, PageHeading } from "app/components"
 
 const columns: ColumnType<Components.Schemas.Case>[] = [
   {
@@ -10,7 +9,9 @@ const columns: ColumnType<Components.Schemas.Case>[] = [
   }, {
     header: "Description",
     dataIndex: "description",
-    sorter: (a: Components.Schemas.Case, b: Components.Schemas.Case) => a.description.localeCompare(b.description),    
+    sorter: (a: Components.Schemas.Case, b: Components.Schemas.Case) => (
+      a?.description && b?.description ? a.description.localeCompare(b.description) : -1
+    ),    
     defaultSortOrder: "DESCEND"
   }
 ]
@@ -20,12 +21,10 @@ export const CasesPage: React.FC = () => {
 
   return (
     <>
-      <Heading level={ 3 } >
-        Zakenoverzicht
-      </Heading>
+      <PageHeading label="Zakenoverzicht" />
       <Table 
         columns={ columns } 
-        data={ data } 
+        data={ data as Components.Schemas.Case[] } 
         loading={ isBusy }
       />
     </>

src/app/pages/SearchPage/SearchResultsTable.tsx

@@ -18,8 +18,8 @@ const columns: ColumnType<Vve>[] = [
   }, {
     header: "",
     dataIndex: "id",
-    minWidth: 125,
-    render: () => <RouterLink label="Start traject" path="" />
+    minWidth: 170,
+    render: () => <RouterLink label="Zaak aanmaken" path="" />
   }
 ]
 

src/app/pages/TasksPage/TaskPage.tsx

@@ -1,10 +1,8 @@
-import { Heading } from "@amsterdam/design-system-react"
+import { PageHeading } from "app/components"
 
 export const TasksPage: React.FC = () => (
   <>
-    <Heading level={ 3 } >
-      Takenoverzicht
-    </Heading>
+    <PageHeading label="Takenoverzicht" />
   </>
 )
 

src/app/pages/index.ts

@@ -1,4 +1,5 @@
 export * from "./AuthPage/AuthPage"
+export * from "./CaseCreatePage/CaseCreatePage"
 export * from "./CasesPage/CasesPage"
 export * from "./NotFoundPage/NotFoundPage"
 export * from "./SearchPage/SearchPage"

src/app/routing/router.tsx

@@ -1,6 +1,6 @@
 import { DefaultLayout } from "app/components"
 import { 
-  CasesPage, NotFoundPage, SearchPage, TasksPage, AuthPage 
+  CasesPage, NotFoundPage, SearchPage, TasksPage, AuthPage, CaseCreatePage 
 } from "app/pages"
 import { createBrowserRouter } from "react-router-dom"
 
@@ -28,7 +28,7 @@ const router = createBrowserRouter([
       },
       {
         path: "vve/:vveId/zaken/nieuw",
-        element: <TasksPage />
+        element: <CaseCreatePage />
       }
     ]
   },

src/app/state/rest/cases.ts

@@ -2,10 +2,11 @@ import type { Options } from "./"
 import { makeApiUrl, useErrorHandler } from "./hooks/utils"
 import useApiRequest from "./hooks/useApiRequest"
 
+type CaseApiResponse = Components.Schemas.Case[] | Components.Schemas.Case;
 
 export const useCases = (options?: Options) => {
   const handleError = useErrorHandler()
-  return useApiRequest<Components.Schemas.Case[]>({
+  return useApiRequest<CaseApiResponse>({
     ...options,
     url: `${ makeApiUrl("cases") }`,
     groupName: "cases",

src/app/utils/withExceptionCapturing.ts

@@ -0,0 +1,11 @@
+import { SyntheticEvent } from "react"
+
+export const withExceptionCapturing = <T>(handler: (event: SyntheticEvent) => Promise<T>) => (event: SyntheticEvent) => {
+  if (handler) {
+    handler(event).catch((error) => {
+      console.log("Unexpected error:", error)
+    })
+  }
+}
+
+export default withExceptionCapturing