feat: add new fields and update render field and edit component, also…

… improve move and delete item action
guillotinaweb · Mar 2, 2024 · 1006a3a · 1006a3a
1 parent 08a9ce8
commit 1006a3a
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 16 deletions.
diff --git a/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py b/guillotina_example/guillotina_react_app/guillotina_react_app/gmi/interface.py
@@ -10,8 +10,23 @@
         "type": "object", 
         "properties": {
             "items": {
-                "type": "array"
-            }
+                "type": "array",
+                "title": "Array in json"
+            },
+            "text": {
+                "type": "string", 
+                "title": "Text in json"
+            },
+            "second_level": {
+                "type": "object",
+                "title": "Two levels",
+                "properties": {
+                    "first_item_second_level": {
+                        "type": "string",
+                        "title": "Item second level text",
+                    },
+                },
+            },
         }
     }
 )
@@ -25,6 +40,9 @@ class IGMI(interfaces.IFolder):
     index_field("text_field", type="searchabletext")
     text_field = schema.Text(title="Text field", required=False)
 
+    index_field("textarea_field", type="searchabletext")
+    textarea_field = schema.Text(title="Text area field", required=True, widget="textarea")
+
 
     text_line_field = schema.TextLine(title="Text line field")
     index_field("number_field", type="int")
@@ -44,6 +62,7 @@ class IGMI(interfaces.IFolder):
     choice_field_vocabulary = schema.Choice(
         title="Choice field vocabulary",
         vocabulary="gmi_vocabulary",
+        required=True,
     )
 
     index_field("choice_field", type="keyword")
@@ -83,6 +102,7 @@ class IGMI(interfaces.IFolder):
         widget="search_list",
         labelProperty="title",
         typeNameQuery="GMI",
+        required=True
     )
 
     brother_gmi = schema.Text(

diff --git a/src/guillo-gmi/actions/move_item.tsx b/src/guillo-gmi/actions/move_item.tsx
@@ -34,7 +34,6 @@ export function MoveItem(props: Props) {
       Ctx.flash(`Failed to move item!: ${errorMessage}`, 'danger')
     }
 
-    Ctx.refresh()
     Ctx.cancelAction()
   }
 

diff --git a/src/guillo-gmi/actions/remove_item.tsx b/src/guillo-gmi/actions/remove_item.tsx
@@ -28,7 +28,6 @@ export function RemoveItem(props: Props) {
       Ctx.flash(`Failed to delete item!: ${errorMessage}`, 'danger')
     }
 
-    Ctx.refresh()
     Ctx.cancelAction()
   }
 

diff --git a/src/guillo-gmi/components/fields/editComponent.tsx b/src/guillo-gmi/components/fields/editComponent.tsx
@@ -11,6 +11,7 @@ import { SearchInput } from '../input/search_input'
 import { useTraversal } from '../../contexts'
 import { Ref, forwardRef } from 'react'
 import { GuillotinaItemsProperty } from '../../types/guillotina'
+import { IndexSignature } from '../../types/global'
 
 interface Props {
   schema: GuillotinaItemsProperty
@@ -19,10 +20,24 @@ interface Props {
   dataTest?: string
   className?: string
   placeholder?: string
+  id?: string
+  required?: boolean
 }
 
 export const EditComponent = forwardRef(
-  ({ schema, val, setValue, dataTest, className, placeholder }: Props, ref) => {
+  (
+    {
+      schema,
+      val,
+      setValue,
+      dataTest,
+      className,
+      placeholder,
+      id,
+      required,
+    }: Props,
+    ref
+  ) => {
     const traversal = useTraversal()
 
     if (schema?.widget === 'search_list') {
@@ -71,6 +86,8 @@ export const EditComponent = forwardRef(
           onChange={(ev) => setValue(ev)}
           ref={ref as Ref<HTMLTextAreaElement>}
           dataTest={dataTest}
+          placeholder={placeholder}
+          id={id}
         />
       )
     } else if (schema?.type === 'boolean') {
@@ -94,6 +111,8 @@ export const EditComponent = forwardRef(
               dataTest={dataTest}
               onChange={setValue}
               multiple
+              placeholder={placeholder}
+              id={id}
             />
           )
         } else if (schema?.items?.vocabulary) {
@@ -111,6 +130,8 @@ export const EditComponent = forwardRef(
               })}
               multiple
               onChange={setValue}
+              placeholder={placeholder}
+              id={id}
             />
           )
         }
@@ -146,6 +167,8 @@ export const EditComponent = forwardRef(
             dataTest={dataTest}
             onChange={setValue}
             vocabularyName={get(schema, 'vocabularyName', null)}
+            placeholder={placeholder}
+            id={id}
           />
         )
       }
@@ -164,8 +187,35 @@ export const EditComponent = forwardRef(
             }
           })}
           onChange={setValue}
+          placeholder={placeholder}
+          id={id}
         />
       )
+    } else if (schema?.type === 'object' && schema.widget !== 'file') {
+      const value = val as IndexSignature
+      return (
+        <>
+          {schema.title && <h4 className="subtitle mt-2">{schema.title}</h4>}
+          {Object.keys(get(schema, 'properties', {})).map((key) => {
+            const subSchema = get(schema, 'properties', {})[key]
+            const requiredFields: string[] = get(schema, 'required', [])
+            return (
+              <EditComponent
+                key={`${id}[${key}]`}
+                id={`${id}[${key}]`}
+                schema={subSchema}
+                val={value && key in value ? value[key] : ''}
+                placeholder={subSchema?.title ?? ''}
+                required={requiredFields.includes(key)}
+                setValue={(ev) => {
+                  setValue({ ...value, [key]: ev })
+                }}
+                dataTest={`${key}TestInput`}
+              />
+            )
+          })}
+        </>
+      )
     }
     const getInputType = () => {
       switch (schema?.type) {
@@ -175,6 +225,8 @@ export const EditComponent = forwardRef(
           return 'date'
         case 'datetime':
           return 'datetime-local'
+        case 'time':
+          return 'time'
         default:
           return 'text'
       }
@@ -187,6 +239,9 @@ export const EditComponent = forwardRef(
         onChange={(ev) => setValue(ev)}
         ref={ref as Ref<HTMLInputElement>}
         type={getInputType()}
+        required={required}
+        placeholder={placeholder}
+        id={id}
       />
     )
   }

diff --git a/src/guillo-gmi/components/fields/renderField.tsx b/src/guillo-gmi/components/fields/renderField.tsx
@@ -39,7 +39,12 @@ export function RenderField({ value, Widget, schema }: RenderFieldProps) {
       ))
     }
     return Object.keys(value).map((key) => (
-      <FieldValue field={key} value={value[key]} key={key} />
+      <FieldValue
+        field={get(schema, `properties.${key}.title`, key)}
+        schema={get(schema, `properties.${key}`, {})}
+        value={value[key]}
+        key={key}
+      />
     ))
   }
   return <p>No render for {JSON.stringify(value)}</p>
@@ -48,12 +53,13 @@ export function RenderField({ value, Widget, schema }: RenderFieldProps) {
 interface FieldValueProps {
   field: string
   value: unknown
+  schema: GuillotinaSchemaProperty
 }
-const FieldValue = ({ field, value }: FieldValueProps) => (
+const FieldValue = ({ field, value, schema }: FieldValueProps) => (
   <div className="field">
     <div className="label">{field}</div>
     <div className="value">
-      <RenderField value={value} />
+      <RenderFieldComponent val={value} schema={schema} field={field} />
     </div>
   </div>
 )
@@ -197,7 +203,7 @@ interface RenderFieldComponentProps {
   schema: GuillotinaSchemaProperty
   field: string
   val: any
-  modifyContent: boolean
+  modifyContent?: boolean
 }
 export function RenderFieldComponent({
   schema,
@@ -215,6 +221,7 @@ export function RenderFieldComponent({
         (modifyContent
           ? DEFAULT_VALUE_EDITABLE_FIELD
           : DEFAULT_VALUE_NO_EDITABLE_FIELD),
+      schema: schema,
     }
     if (val && schema?.widget === 'file') {
       renderProps['value'] = {
@@ -228,14 +235,12 @@ export function RenderFieldComponent({
       renderProps['value'] = new Date(val).toLocaleString()
     } else if (schema?.items?.vocabularyName || schema?.vocabularyName) {
       renderProps['Widget'] = VocabularyRenderField
-      renderProps['schema'] = schema
     } else if (
       schema?.widget === 'search' ||
       schema?.widget === 'search_list'
     ) {
       renderProps['Widget'] = SearchRenderField
       renderProps['value'] = val
-      renderProps['schema'] = schema
     }
     return renderProps
   }

diff --git a/src/guillo-gmi/components/input/select.tsx b/src/guillo-gmi/components/input/select.tsx
@@ -3,6 +3,7 @@ import { classnames, generateUID } from '../../lib/helpers'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
 import { forwardRef, useState } from 'react'
+import { IndexSignature } from '../../types/global'
 // @ TODO implement hasErrors
 
 interface Props {
@@ -19,7 +20,7 @@ interface Props {
   onChange?: (value: string | string[]) => void
   options: { text: string; value: string }[]
   appendDefault?: boolean
-  style?: any
+  style?: IndexSignature
   dataTest?: string
   value?: string | string[]
 }

diff --git a/src/guillo-gmi/components/layout.tsx b/src/guillo-gmi/components/layout.tsx
@@ -22,7 +22,6 @@ export function Layout({ children, onLogout, auth }: Props) {
             </a>
             <a
               id="burger"
-              href="/"
               role="button"
               className="navbar-burger burger"
               aria-label="menu"

diff --git a/src/guillo-gmi/hooks/useRegistry.tsx b/src/guillo-gmi/hooks/useRegistry.tsx
@@ -31,6 +31,7 @@ import { NotFound } from '../components/notfound'
 import { Path } from '../components/path'
 import { EditComponent } from '../components/fields/editComponent'
 import { RenderFieldComponent } from '../components/fields/renderField'
+import { GuillotinaSchema } from '../types/guillotina'
 
 export interface IRegistry {
   paths: {
@@ -48,8 +49,17 @@ export interface IRegistry {
   behaviors: {
     [key: string]: React.FC
   }
-  itemsColumn: any
-  schemas: any
+  itemsColumn: {
+    [key: string]: () => {
+      label: string
+      key: string
+      isSortable?: boolean
+      child: React.ReactNode
+    }[]
+  }
+  schemas: {
+    [key: string]: GuillotinaSchema
+  }
   properties: {
     [key: string]: React.FC
   }

diff --git a/src/guillo-gmi/lib/auth.ts b/src/guillo-gmi/lib/auth.ts
@@ -141,6 +141,7 @@ export class Auth {
     if (!authToken) return {}
 
     if (this.willExpire(expires) && this.retryRefresh < this.maxRetry) {
+      // eslint-disable-next-line no-extra-semi
       ;(async () => await this.refreshToken())()
     }
 

diff --git a/src/guillo-gmi/lib/client.tsx b/src/guillo-gmi/lib/client.tsx
@@ -87,7 +87,7 @@ export class GuillotinaClient {
     result = [
       ...parser(start.toString(), '_from'),
       ...parser(pageSize.toString(), 'size'),
-      ...parser('*', '_metadata=*'),
+      ...parser('*', '_metadata'),
     ]
 
     if (withDepth) {

diff --git a/src/guillo-gmi/types/guillotina.ts b/src/guillo-gmi/types/guillotina.ts
@@ -39,6 +39,7 @@ export interface GuillotinaItemsProperty {
   labelProperty?: string
   typeNameQuery?: string
   items: GuillotinaItemsProperty
+  title: string
 }
 export interface GuillotinaSchemaProperty {
   type: string