Update filter atts (#105)

Amsterdam · May 6, 2024 · 430480a · 430480a
1 parent f5df196
commit 430480a
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 83 deletions.
diff --git a/apps/admin/src/app/dataProvider.ts b/apps/admin/src/app/dataProvider.ts
diff --git a/apps/admin/src/components/admin/Admin/Admin.tsx b/apps/admin/src/components/admin/Admin/Admin.tsx
@@ -1,67 +1,68 @@
-import fakeDataProvider from 'ra-data-fakerest'
+// import fakeDataProvider from 'ra-data-fakerest'
 import { Admin as ReactAdmin, Resource } from 'react-admin'
 
-// import { dataProvider } from '../../dataProvider'
 import { CategoryCreate } from '../../category/CategoryCreate/CategoryCreate'
 import { CategoryEdit } from '../../category/CategoryEdit'
 import { CategoryList } from '../../category/CategoryList'
 import { FormCreate } from '../../form/FormCreate'
 import { FormEdit } from '../../form/FormEdit'
 import { FormList } from '../../form/FormList'
+
+import { dataProvider } from './dataProvider'
 // import { MainForm } from '../MainForm'
 
-const dataProvider = fakeDataProvider({
-  categories: [
-    {
-      name: 'afval',
-      id: 1,
-    },
-    {
-      name: 'afval-container',
-      id: 2,
-    },
-    {
-      name: 'boom-illegale-kap',
-      id: 3,
-    },
-    {
-      name: 'bouw-sloop-overlast',
-      id: 4,
-    },
-  ],
-  form: [
-    {
-      title: 'Afval',
-      id: 1,
-      components: [
-        {
-          label: 'Text Area',
-          description: 'Description text from api',
-          autoExpand: false,
-          showCharCount: false,
-          key: 'textArea',
-          type: 'textarea',
-          input: true,
-        },
-      ],
-    },
-    {
-      title: 'Afval bij container',
-      id: 2,
-    },
-    {
-      title: 'Illegale boomkap',
-      id: 3,
-    },
-    {
-      title: 'Bouw- en sloopoverlast',
-      id: 4,
-    },
-  ],
-})
+// const dataProvider = fakeDataProvider({
+//   classification: [
+//     {
+//       name: 'afval',
+//       id: 1,
+//     },
+//     {
+//       name: 'afval-container',
+//       id: 2,
+//     },
+//     {
+//       name: 'boom-illegale-kap',
+//       id: 3,
+//     },
+//     {
+//       name: 'bouw-sloop-overlast',
+//       id: 4,
+//     },
+//   ],
+//   form: [
+//     {
+//       title: 'Afval',
+//       id: 1,
+//       components: [
+//         {
+//           label: 'Text Area',
+//           description: 'Description text from api',
+//           autoExpand: false,
+//           showCharCount: false,
+//           key: 'textArea',
+//           type: 'textarea',
+//           input: true,
+//         },
+//       ],
+//     },
+//     {
+//       title: 'Afval bij container',
+//       id: 2,
+//     },
+//     {
+//       title: 'Illegale boomkap',
+//       id: 3,
+//     },
+//     {
+//       title: 'Bouw- en sloopoverlast',
+//       id: 4,
+//     },
+//   ],
+// })
 
 export const Admin = () => (
-  <ReactAdmin dataProvider={dataProvider}>
+  <ReactAdmin dataProvider={dataProvider()}>
     {/* <Resource name="landingspagina" list={<MainForm />} /> */}
     <Resource
       name="form"
@@ -71,7 +72,7 @@ export const Admin = () => (
       options={{ label: 'Vragenlijsten' }}
     />
     <Resource
-      name="categories"
+      name="classification"
       list={<CategoryList />}
       edit={<CategoryEdit />}
       create={<CategoryCreate />}

diff --git a/apps/admin/src/components/admin/Admin/dataProvider.spec.ts b/apps/admin/src/components/admin/Admin/dataProvider.spec.ts
@@ -0,0 +1,37 @@
+import { dataProvider } from './dataProvider'
+
+describe('dataProvider', () => {
+  it('uses a PUT request for the `form` resource', async () => {
+    const httpClient = jest.fn().mockResolvedValue({ json: { id: 1 } })
+
+    const client = dataProvider('http://localhost:3000', httpClient)
+
+    await client.update('form', {
+      id: 1,
+      previousData: { id: 1 },
+      data: {},
+    })
+
+    expect(httpClient).toHaveBeenCalledWith('http://localhost:3000/form/1', {
+      method: 'PUT',
+      body: '{}',
+    })
+  })
+
+  it('uses a PATCH request for all other resources', async () => {
+    const httpClient = jest.fn().mockResolvedValue({ json: { id: 1 } })
+
+    const client = dataProvider('http://localhost:3000', httpClient)
+
+    await client.update('other', {
+      id: 1,
+      previousData: { id: 1 },
+      data: {},
+    })
+
+    expect(httpClient).toHaveBeenCalledWith('http://localhost:3000/other/1', {
+      method: 'PATCH',
+      body: '{}',
+    })
+  })
+})
diff --git a/apps/admin/src/components/admin/Admin/dataProvider.ts b/apps/admin/src/components/admin/Admin/dataProvider.ts
@@ -0,0 +1,38 @@
+import { getSession } from 'next-auth/react'
+import simpleRestProvider from 'ra-data-simple-rest'
+import type { DataProvider } from 'react-admin'
+import { fetchUtils } from 'react-admin'
+
+const fetchJson = async (url: string, options: fetchUtils.Options = {}) => {
+  const session = await getSession()
+
+  const customHeaders = (options.headers ||
+    new Headers({
+      Accept: 'application/json',
+    })) as Headers
+  customHeaders.set('Authorization', `Bearer ${session?.accessToken}`)
+
+  const newOptions = {
+    ...options,
+    headers: customHeaders,
+  }
+
+  return fetchUtils.fetchJson(url, newOptions)
+}
+
+export const dataProvider = (apiUrl = 'http://localhost:8000', httpClient = fetchJson): DataProvider => ({
+  ...simpleRestProvider(apiUrl, httpClient),
+  update: (resource, params) => {
+    // 'form' updates use PUT requests, all other updates use PATCH requests
+    if (resource === 'form') {
+      return httpClient(`${apiUrl}/${resource}/${params.id}`, {
+        method: 'PUT',
+        body: JSON.stringify(params.data),
+      }).then(({ json }) => ({ data: json }))
+    }
+    return httpClient(`${apiUrl}/${resource}/${params.id}`, {
+      method: 'PATCH',
+      body: JSON.stringify(params.data),
+    }).then(({ json }) => ({ data: json }))
+  },
+})
diff --git a/apps/admin/src/components/form/Builder/Builder.tsx b/apps/admin/src/components/form/Builder/Builder.tsx
@@ -16,7 +16,7 @@ type BuilderProps = {
 export const Builder = ({ data, onChange }: BuilderProps) => (
   <FormBuilder
     onChange={onChange}
-    form={data ? { display: 'form', components: data } : { display: 'form' }}
+    form={data ? { display: 'wizard', components: data } : { display: 'wizard' }}
     options={{
       noDefaultSubmitButton: true,
       builder: {

diff --git a/apps/admin/src/components/form/CreateEditForm/CreateEditForm.tsx b/apps/admin/src/components/form/CreateEditForm/CreateEditForm.tsx
@@ -1,4 +1,4 @@
-import type { ComponentSchema } from '@formio/js'
+import type { ComponentSchema, ExtendedComponentSchema } from '@formio/js'
 import { useState } from 'react'
 import {
   useRefresh,
@@ -8,6 +8,7 @@ import {
   TextInput,
   ToolbarClasses,
   DeleteWithConfirmButton,
+  required,
 } from 'react-admin'
 
 import type { FormioSchema } from '../../../types/formio'
@@ -28,7 +29,7 @@ export const CreateEditForm = ({ isEditForm = false }: CreateEditFormProps) => {
   const onChange = (schema: FormioSchema) => {
     // TODO: we currently filter all attributes that aren't supported by the backend from the schema.
     // When the backend supports all these, we can remove this filter.
-    const filteredSchema: ComponentSchema[] = schema?.components.map((item) => filterAttributes(item))
+    const filteredSchema: ExtendedComponentSchema[] = schema?.components.map((item) => filterAttributes(item))
 
     setBuilderJson(filteredSchema)
     refresh()
@@ -45,8 +46,8 @@ export const CreateEditForm = ({ isEditForm = false }: CreateEditFormProps) => {
         </Toolbar>
       }
     >
-      <TextInput source="title" />
-      <TextInput source="display" defaultValue="form" hidden />
+      <TextInput source="title" validate={required()} />
+      <TextInput source="display" defaultValue="wizard" hidden />
       <HiddenComponentsInput value={builderJson} setInitialValue={setInitialValue} />
       <Builder data={initialValue} onChange={onChange} />
     </SimpleForm>

diff --git a/apps/admin/src/utils/filterAttributes.ts b/apps/admin/src/utils/filterAttributes.ts
@@ -1,8 +1,9 @@
-import type { ExtendedComponentSchema } from '@formio/js'
+import type { ComponentSchema, ExtendedComponentSchema } from '@formio/js'
 
-const allowed = ['label', 'description', 'key', 'type', 'input', 'autoExpand', 'showCharCount']
+const textareaAllowed = ['label', 'description', 'key', 'type', 'input', 'autoExpand', 'showCharCount']
+const panelAllowed = ['label', 'key', 'type', 'input', 'components']
 
-export const filterAttributes = (raw: ExtendedComponentSchema) =>
+const filterFunction = (raw: ExtendedComponentSchema, allowed: string[]) =>
   Object.keys(raw)
     .filter((key) => allowed.includes(key))
     .reduce(
@@ -12,3 +13,13 @@ export const filterAttributes = (raw: ExtendedComponentSchema) =>
       }),
       {},
     )
+
+export const filterAttributes = (raw: ExtendedComponentSchema) => {
+  const filteredComponents = raw.components.map((item: ComponentSchema) => filterFunction(item, textareaAllowed))
+  const filteredPanel = filterFunction(raw, panelAllowed)
+
+  return {
+    ...filteredPanel,
+    components: filteredComponents,
+  }
+}