wip: more components

guillotinaweb · Jan 27, 2024 · 072b764 · 072b764
1 parent 11d0436
commit 072b764
Show file tree

Hide file tree

Showing 27 changed files with 199 additions and 89 deletions.
diff --git a/src/guillo-gmi/components/index.js → src/guillo-gmi/components/index.ts b/src/guillo-gmi/components/index.js → src/guillo-gmi/components/index.ts
diff --git a/src/guillo-gmi/components/input/search_input.tsx b/src/guillo-gmi/components/input/search_input.tsx
@@ -12,6 +12,7 @@ import { genericMessages } from '../../locales/generic_messages'
 import useClickAway from '../../hooks/useClickAway'
 import { get } from '../../lib/utils'
 import { SearchItem } from '../../types/guillotina'
+import { Traversal } from '../../contexts'
 
 function debounce(func, wait) {
   let timeout
@@ -27,22 +28,28 @@ function debounce(func, wait) {
   }
 }
 
-const initialState = {
+interface State {
+  page: number
+  items: SearchItem[]
+  loading: boolean
+  items_total: number
+}
+const initialState: State = {
   page: 0,
   items: undefined,
   loading: false,
   items_total: 0,
 }
 
 interface Props {
-  onChange?: (value: SearchItem) => void
+  onChange?: (value: string) => void
   error?: string
   errorZoneClassName?: string
-  traversal?: any
+  traversal?: Traversal
   path?: string
   qs?: string[][]
   queryCondition?: string
-  value: SearchItem
+  value?: string
   btnClass?: string
   dataTestWrapper?: string
   dataTestSearchInput?: string
@@ -70,13 +77,13 @@ export const SearchInput = ({
   labelProperty = 'id',
 }: Props) => {
   const intl = useIntl()
-  const [options, setOptions] = useSetState(initialState)
+  const [options, setOptions] = useSetState<State>(initialState)
   const [isOpen, setIsOpen] = useState(false)
   const [searchTerm, setSearchTerm] = useState('')
   const inputRef = useRef(null)
   const wrapperRef = useRef(null)
   const { PageSize, SearchEngine } = useConfig()
-  const [valueLabel, setValueLabel] = useState(undefined)
+  const [valueLabel, setValueLabel] = useState<Partial<SearchItem>>(undefined)
   const [uid] = useState(generateUID('search_input'))
 
   useClickAway(wrapperRef, () => {
@@ -103,7 +110,7 @@ export const SearchInput = ({
 
   const inicializeLabels = async () => {
     if (labelProperty !== 'id' && value) {
-      let searchTermQs = []
+      let searchTermQs = ''
       const searchTermParsed = [`id`, value]
       const { get: getSearch } = traversal.registry
       const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine)
@@ -146,7 +153,7 @@ export const SearchInput = ({
 
   const handleSearch = async (page = 0, concat = false, value = '') => {
     setOptions({ loading: true })
-    let searchTermQs = []
+    let searchTermQs = ''
     let searchTermParsed = []
     if (value !== '') {
       searchTermParsed = parser(`${queryCondition}=${value}`)

diff --git a/src/guillo-gmi/components/input/search_input_list.tsx b/src/guillo-gmi/components/input/search_input_list.tsx
@@ -29,22 +29,28 @@ function debounce(func, wait) {
   }
 }
 
-const initialState = {
+interface State {
+  page: number
+  items: SearchItem[]
+  loading: boolean
+  items_total: number
+}
+const initialState: State = {
   page: 0,
   items: undefined,
   loading: false,
   items_total: 0,
 }
 
 interface Props {
-  onChange: (value: SearchItem[]) => void
+  onChange: (value: string[]) => void
   error?: string
   errorZoneClassName?: string
   traversal?: any
   path?: string
   qs?: string[]
   queryCondition?: string
-  value: SearchItem[]
+  value: string[]
   btnClass?: string
   dataTestWrapper?: string
   dataTestSearchInput?: string
@@ -72,7 +78,7 @@ export const SearchInputList = ({
   labelProperty = 'id',
 }: Props) => {
   const intl = useIntl()
-  const [options, setOptions] = useSetState(initialState)
+  const [options, setOptions] = useSetState<State>(initialState)
   const [valuesLabel, setValuesLabels] = useState(undefined)
   const [isOpen, setIsOpen] = useState(false)
   const [searchTerm, setSearchTerm] = useState('')
@@ -107,7 +113,7 @@ export const SearchInputList = ({
 
   const handleSearch = async (page = 0, concat = false, value = '') => {
     setOptions({ loading: true })
-    let searchTermQs = []
+    let searchTermQs = ''
     let searchTermParsed = []
     if (value !== '') {
       searchTermParsed = parser(`${queryCondition}=${value}`)
@@ -161,7 +167,7 @@ export const SearchInputList = ({
   const inicializeLabels = async () => {
     if (labelProperty !== 'id' && value.length > 0) {
       setIsLoadingData(true)
-      let searchTermQs = []
+      let searchTermQs = ''
       const searchTermParsed = ['__or', `id=${value.join('%26id=')}`]
       const { get: getSearch } = traversal.registry
       const fnName = getSearch('searchEngineQueryParamsFunction', SearchEngine)

diff --git a/src/guillo-gmi/components/panel/properties.tsx b/src/guillo-gmi/components/panel/properties.tsx
@@ -11,6 +11,10 @@ import { useTraversal } from '../../contexts'
 import { get } from '../../lib/utils'
 import { useIntl } from 'react-intl'
 import { genericMessages } from '../../locales/generic_messages'
+import {
+  GuillotinaSchema,
+  GuillotinaSchemaProperty,
+} from '../../types/guillotina'
 
 const _showProperties = ['@id', '@name', '@uid']
 const _ignoreFields = [
@@ -29,13 +33,19 @@ const _ignoreFields = [
   'title',
 ]
 
+interface State {
+  data: GuillotinaSchema
+  loading: boolean
+  error: string
+}
+
 export function PanelProperties() {
   const intl = useIntl()
   const Ctx = useTraversal()
   const modifyContent = Ctx.hasPerm('guillotina.ModifyContent')
   const cfg = useConfig()
 
-  const [schema, setSchema] = useSetState({
+  const [schema, setSchema] = useSetState<State>({
     data: undefined,
     loading: false,
     error: undefined,
@@ -55,7 +65,10 @@ export function PanelProperties() {
 
   const properties = Object.keys(schema?.data?.properties || [])
     .filter((key) => !ignoreFields.includes(key))
-    .map((key) => ({ key, value: schema.data.properties[key] }))
+    .map((key) => ({
+      key,
+      value: schema.data.properties[key] as GuillotinaSchemaProperty,
+    }))
 
   useEffect(() => {
     ;(async () => {
@@ -139,7 +152,7 @@ export function PanelProperties() {
                             value={Ctx.context[key]}
                             schema={value}
                             modifyContent={modifyContent}
-                            required={get(schema.data, 'required', []).includes(
+                            required={(schema.data?.required ?? []).includes(
                               key
                             )}
                           />

diff --git a/src/guillo-gmi/components/widgets/tags.tsx b/src/guillo-gmi/components/widgets/tags.tsx
@@ -14,18 +14,26 @@ const prepareAvailable = (items, already, title) => {
   return [def].concat(items).filter((item) => !already.includes(item.value))
 }
 
+interface Props {
+  items: string[]
+  available?: string[]
+  title: string
+  noData: string
+  onChange: (items: string[]) => void
+  loading?: boolean
+}
 export function TagsWidget({
   items,
   available,
   title,
   noData,
   onChange,
   loading,
-}) {
+}: Props) {
   const selectRef = useRef<HTMLSelectElement>()
 
   const [result, setResult] = useState(items)
-  available = prepareAvailable(available || [], result, title)
+  const availableData = prepareAvailable(available || [], result, title)
 
   const remove = (value) => {
     const items = result.filter((item) => item !== value)
@@ -61,7 +69,7 @@ export function TagsWidget({
         {available.length > 1 && (
           <li className="widget-list-add select is-small">
             <Select
-              options={available}
+              options={availableData}
               ref={selectRef}
               onChange={(value) => {
                 addItem(value)

diff --git a/src/guillo-gmi/contexts/index.tsx b/src/guillo-gmi/contexts/index.tsx
@@ -10,7 +10,6 @@ export const AuthContext = createContext({})
 export const ClientContext = createContext<GuillotinaClient>(null)
 
 interface PropsTraversal {
-  url: string
   client: GuillotinaClient
   auth: Auth
   state: GuillotinaGlobalState
@@ -19,21 +18,19 @@ interface PropsTraversal {
   flash: (action: string, result: string) => void
 }
 
-class Traversal {
+export class Traversal {
   private dispatch
-  private state
+  public state
   public client
   public registry
   public auth
-  private url
 
   constructor({ flash, ...props }: PropsTraversal) {
     this.dispatch = props.dispatch
     this.state = props.state
     this.client = props.client
     this.registry = props.registry
     this.auth = props.auth
-    this.url = props.url
     if (typeof flash === 'function') this.flash = flash
   }
 
@@ -71,7 +68,7 @@ class Traversal {
     this.dispatch({ type: 'CLEAR_FLASH' })
   }
 
-  doAction(action, params) {
+  doAction(action, params = {}) {
     this.dispatch({ type: 'SET_ACTION', payload: { action, params } })
   }
 

diff --git a/src/guillo-gmi/forms/users.tsx b/src/guillo-gmi/forms/users.tsx
@@ -9,7 +9,7 @@ interface Props {
   formData?: IndexSignature
   exclude?: string[]
   remotes?: IndexSignature
-  submitButon?: boolean
+  submitButton?: boolean
 }
 export const UserForm = ({
   children,
@@ -18,7 +18,7 @@ export const UserForm = ({
   formData,
   exclude,
   remotes,
-  submitButon,
+  submitButton,
 }: Props) => {
   const intl = useIntl()
 
@@ -71,7 +71,7 @@ export const UserForm = ({
       formData={formData}
       exclude={exclude}
       remotes={remotes}
-      submitButton={submitButon}
+      submitButton={submitButton}
     >
       {children}
     </FormBuilder>

diff --git a/src/guillo-gmi/hooks/useConfig.tsx b/src/guillo-gmi/hooks/useConfig.tsx
@@ -25,6 +25,9 @@ interface IConfig {
   Permissions: string[]
   SearchEngine: string
   SizeImages?: string[]
+  icons?: string[]
+  properties_default?: string[]
+  properties_ignore_fields?: string[]
   fieldHaveDeleteButton: (schema: GuillotinaSchemaProperty) => boolean
 }
 export const Config: IConfig = {

diff --git a/src/guillo-gmi/hooks/useCrudContext.tsx b/src/guillo-gmi/hooks/useCrudContext.tsx
@@ -2,11 +2,11 @@ import { useTraversal } from '../contexts'
 import useSetState from './useSetState'
 
 interface State {
-  loading: boolean
-  isError: boolean
-  errorMessage: string
-  result: unknown
-  response: unknown
+  loading?: boolean
+  isError?: boolean
+  errorMessage?: string
+  result?: unknown
+  response?: unknown
 }
 const initial: State = {
   loading: undefined,
@@ -42,9 +42,13 @@ const processResponse = async (res, ready_body = true) => {
     }
 }
 
-const patch = (setState, Ctx) => async (data, endpoint, body = false) => {
+const patch = (setState, Ctx) => async (
+  data,
+  endpoint = undefined,
+  body = false
+): Promise<State> => {
   setState({ loading: true })
-  let newState = {}
+  let newState: State = {}
   try {
     const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
     const res = await Ctx.client.patch(path, data)
@@ -57,7 +61,11 @@ const patch = (setState, Ctx) => async (data, endpoint, body = false) => {
   return newState
 }
 
-const del = (setState, Ctx) => async (data, endpoint, body = false) => {
+const del = (setState, Ctx) => async (
+  data,
+  endpoint = undefined,
+  body = false
+) => {
   setState({ loading: true })
   let newState = {}
   try {
@@ -72,7 +80,11 @@ const del = (setState, Ctx) => async (data, endpoint, body = false) => {
   return newState
 }
 
-const post = (setState, Ctx) => async (data, endpoint, body = true) => {
+const post = (setState, Ctx) => async (
+  data,
+  endpoint = undefined,
+  body = true
+) => {
   setState({ loading: true })
   let newState = {}
   try {
@@ -87,7 +99,7 @@ const post = (setState, Ctx) => async (data, endpoint, body = true) => {
   return newState
 }
 
-const get = (setState, Ctx) => async (endpoint) => {
+const get = (setState, Ctx) => async (endpoint = undefined) => {
   setState({ loading: true })
   const path = endpoint ? `${Ctx.path}${endpoint}` : Ctx.path
   const req = await Ctx.client.get(path)

diff --git a/src/guillo-gmi/hooks/useRemoteField.tsx b/src/guillo-gmi/hooks/useRemoteField.tsx
@@ -18,10 +18,12 @@
 import { useState } from 'react'
 import { IndexSignature } from '../types/global'
 
-export const useRemoteField = (initial: IndexSignature) => {
+export const useRemoteField = (
+  initial: IndexSignature<string[]>
+): [IndexSignature<string[]>, (name: string) => (value: string[]) => void] => {
   const [remotes, setRemote] = useState(initial)
 
-  const updateRemote = (name) => (value) => {
+  const updateRemote = (name: string) => (value: string[]) => {
     setRemote({
       ...remotes,
       [name]: value,