fix puesto superior search

src/Components/Modal/AgregarManual.js

   });
 
   let setDialogValue = (value) => {
-    // console.log('llamada', value)
-    // setValues({...values, puestosuperior: value?.title })
+  console.log("DIALGO RECE:", value)
+    if(value?.id !== undefined && isNaN(value?.id) === false ){
+      setValues({...values, puestosuperior: value?.id })
+    }
     setDialogValueHook(value)
   }
 
   };
 
   const handleCloseDialog = () => {
-    setDialogValue({
-      title: '',
-      id: '',
-    });
+    // setDialogValue({
+    //   title: '',
+    //   id: '',
+    // });
     toggleOpenDialog(false);
   };
 
     event.preventDefault();
     console.log('to save: ', dialogValue)
     let { id, nombre } = await savePuestoSuperior(dialogValue, auth)
+    console.log('nuevo puesto superior: ', id, nombre)
     if (id) {
-      setDialogValue({
+      let to_set = {
         title: nombre,
         id: id,
-      });
+      }
+      console.log('have id and set', to_set)
+      console.table(to_set)
+      if (to_set.id) {
+        setDialogValue(to_set);
+      }
     }
 
-    setDialogValue({
-      title: dialogValue.title,
-      id: dialogValue.id
-    });
+    // setDialogValue({
+    //   title: dialogValue.title,
+    //   id: dialogValue.id
+    // });
+console.log(values)
     handleCloseDialog();
   };
 
     setValues({ ...values, puestosuperior: newValue?.id })
 
     if (typeof newValue === 'string') {
+      console.log('if')
       setTimeout(() => {
         toggleOpenDialog(true);
         setDialogValue({
         });
       });
     } else if (newValue && newValue.inputValue) {
+      console.log('else if')
       toggleOpenDialog(true);
       setDialogValue({
         title: newValue.inputValue,
         id: '',
       });
     } else {
+      console.log('only else')
       setDialogValue(newValue);
     }
   }
   const changeTab = (_event, newValue) => setTab(newValue);
 
   const { errors, touched, handleSubmit, getFieldProps, values, setValues } = formik;
-  // console.log({ values })
 
   const addPrueba = (check, id) => {
     let { tests } = values

src/Components/Modal/EditPlaza.js

 import { Service } from '../../Utils/HTTP';
 import { useSelector } from 'react-redux'
 import { useQuery, useMutation, useQueryClient } from 'react-query'
+import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
+const filter = createFilterOptions();
+
+async function getPuestoSuperior(puesto, auth) {
+  if (puesto.length < 2) return []
+  let rest = new Service(`/plaza/keypuestosup?keyword=${puesto}`)
+  let result = await rest.get(auth.token)
+  // console.log(result)
+  if (result?.data?.length > 0) {
+    result = result.data.map((item) => ({ 'title': item.nombre, id: item.id }))
+    return result;
+  }
+  return [];
+}
+
 
 const plazeSchema = Yup.object({
   id: Yup.number(),
     resolver: yupResolver(plazeSchema),
     defaultValues: {
       nombrepuesto: 'mingtest',
-      puestosuperior: 0,
+      puestosuperior: null,
       fecha: '01/01/2019',
       notas: 'esto es un ejemplod e una nota',
       aredepto: 1,
   const [open, setOpen] = React.useState(false);
   const [tab, setTab] = React.useState(0);
   const [checklist, setChecklist] = React.useState([]);
+  const [openSugg, setOpenSugg] = React.useState(false);
+  const [options, setOptions] = React.useState([]);
+  const [openDialog, toggleOpenDialog] = React.useState(false);
+  const [dialogValue, setDialogValueHook] = React.useState({
+    title: '',
+    id: '',
+  });
 
-  // const changePuestoSup = (event) => {
-  //   setPuestoSup(event.target.value);
-  // };
+  let setDialogValue = (value) => {
+    // console.log('llamada', value)
+    // setValues({...values, puestosuperior: value?.title })
+    setDialogValueHook(value)
+  }
+
+  const loading = openSugg && options.length === 0;
+
+  const AutoCompleteChange = (event, newValue) => {
+    console.log('newValue', newValue)
+    setValue('puestosuperior', newValue?.id)
+
+    if (typeof newValue === 'string') {
+      setTimeout(() => {
+        toggleOpenDialog(true);
+        setDialogValue({
+          title: newValue,
+          id: '',
+        });
+      });
+    } else if (newValue && newValue.inputValue) {
+      toggleOpenDialog(true);
+      setDialogValue({
+        title: newValue.inputValue,
+        id: '',
+      });
+    } else {
+      setDialogValue(newValue);
+    }
+  }
 
   const addPrueba = (check, id) => {
     let tests = getValues("tests")
   }
 
   const puestoMutation = useMutation(updatePuesto)
-
   const close = () => toggle("EDIT", { id: null });
 
   const { data: categories } = useQuery('categories', getCategories);
   const { data: testsCatalog } = useQuery('tests', getTest);
 
   useEffect(() => {
+
     if (visible == null) return;
     let rest = new Service(`/plaza/getthis/${visible}`)
     rest
       .getQuery(auth.token)
       .then(response => {
-        console.log('puesto edit: ',response.data)
-        let { areadeptoplz_id, fecha, tests } = response.data;
+        let { areadeptoplz_id, fecha, tests, puestosuperior } = response.data;
         let temp_test = tests.map(t => ({ id: t.id }))
         setChecklist(temp_test.map(t => t.id))
+        console.log('puesto sup',puestosuperior)
+        reset({ 
+          ...response.data, 
+          aredepto: areadeptoplz_id, 
+          fecha: new Date(fecha), 
+          tests: temp_test, 
+          puestosuperior: puestosuperior.id
+        })
+        // setDialogValue({ title: puestosuperior.nombre, id: puestosuperior.id })
+      })
+      .catch(e => console.log(e))
+
+
+    let active = true;
+    if (!loading) {
+      return undefined;
+    }
+
+    (async () => {
+      let puestos = await getPuestoSuperior(dialogValue.title, auth)
+      if (active) {
+        setOptions(puestos);
+      }
+    })();
+
+    return () => {
+      active = false;
+    };
 
 
-        reset({ ...response.data, aredepto: areadeptoplz_id, fecha: new Date(fecha), tests: temp_test })
-      })
-      .catch(console.log)
-  }, [visible, auth, reset])
+
+  }, [visible, auth, reset, loading, dialogValue])
 
   const changeTab = (_event, newValue) => setTab(newValue);
 
                   error={Boolean(errors?.nombrepuesto)}
                   {...register("nombrepuesto")} />
 
+
                 <FormControl fullWidth>
-                  <InputLabel id="demo-simple-select-label">Puesto Superior</InputLabel>
                   <Controller
                     helperText={errors.puestosuperior?.message}
-                    error={Boolean(errors?.puestosuperior)}
+                    error={errors?.puestosuperior}
                     name="puestosuperior"
                     control={control}
-                    render={({field}) => 
-                      <Select {...field}>
-                        {
-                          categories ?
-                            categories.data.map(cate => {
-                              return (
-                                <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
-                              )
-                            })
-                            : <MenuItem>Null</MenuItem>
-                        }
-                      </Select>
+                    render={({ field }) =>
+                      <Autocomplete
+                        fullWidth
+                        value={dialogValue}
+                        onChange={AutoCompleteChange}
+                        open={openSugg}
+                        onOpen={() => {
+                          setOpenSugg(true);
+                        }}
+                        onClose={() => {
+                          setOpenSugg(false);
+                        }}
+                        isOptionEqualToValue={(option, value) => option.title === value.title}
+                        filterOptions={(options, params) => {
+                          const filtered = filter(options, params);
+
+                          if (params.inputValue !== '') {
+                            filtered.push({
+                              inputValue: params.inputValue,
+                              title: `Add "${params.inputValue}"`,
+                            });
+                          }
+
+                          return filtered;
+                        }}
+                        id="puesto_superior_autocomplete"
+                        options={options}
+                        loading={loading}
+                        getOptionLabel={(option) => {
+                          if (typeof option === 'string') {
+                            return option;
+                          }
+                          if (option.inputValue) {
+                            return option.inputValue;
+                          }
+                          return option.title;
+                        }}
+                        selectOnFocus
+                        clearOnBlur
+                        handleHomeEndKeys
+                        renderOption={(props, option) => <li {...props}>{option.title}</li>}
+                        freeSolo
+                        renderInput={(params) => (
+                          <TextField
+                            {...params}
+                            {...register('puestosuperior')}
+                            error={Boolean(errors.puestosuperior)}
+                            label="Puesto Superior"
+                            InputProps={{
+                              ...params.InputProps,
+                              onChange: (event) => {
+                                // let title = event.target.value;
+                                // console.log('titulo',title)
+                                setOptions([]);
+                                setDialogValue({
+                                  title: event.target.value,
+                                  id: '',
+                                });
+                              },
+                              endAdornment: (
+                                <React.Fragment>
+                                  {loading ? <CircularProgress color="inherit" size={20} /> : null}
+                                  {params.InputProps.endAdornment}
+                                </React.Fragment>
+                              ),
+                            }}
+                          />
+                        )}
+
+                      />
+
                     }
-                    >
-                    
+                  >
                   </Controller>
                 </FormControl>
+
+
+                {
+                  /* <FormControl fullWidth>
+                  <InputLabel id="demo-simple-select-label">Puesto Superior</InputLabel>
+                  <Controller
+                    helperText={errors.puestosuperior?.message}
+                    error={Boolean(errors?.puestosuperior)}
+                    name="puestosuperior"
+                    control={control}
+                  render={({field}) => 
+                    <Select {...field}>
+                      {
+                        categories ?
+                          categories.data.map(cate => {
+                            return (
+                              <MenuItem key={cate.id} value={cate.id}>{cate.nombre}</MenuItem>
+                            )
+                      })
+                      : <MenuItem>Null</MenuItem>
+                      }
+                        </Select>
+                    }
+                  >
+
+                    </Controller>
+                  </FormControl> */
+                }
+
+
               </Stack>
 
               <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>

src/Pages/Login.jsx

           sm={4}
           md={7}
           sx={{
-            backgroundImage: 'url(https://source.unsplash.com/random)',
+            backgroundImage: 'url(https://images.squarespace-cdn.com/content/v1/5c0ec3e30dbda3392d9c9d2d/1548101170354-A2I9LZIEE5CLJ1V5ZGAG/Psychometrictesting.jpg?format=2500w)',
             backgroundRepeat: 'no-repeat',
             backgroundColor: (t) => t.palette.mode === 'light' ? t.palette.grey[50] : t.palette.grey[900],
             backgroundSize: 'cover',

src/Pages/Puestos.jsx

     cacheTime: 0,
   });
 
-
-console.log(isLoading,result, error)
-
   const changePage = useCallback((_, value) => setPage(value), []);
   const [alignment, setAlignment] = React.useState('grid');
   const handleChange = useCallback((_event, newAlignment) => setAlignment(newAlignment), [])
                       index={page - 1}
                     /> : undefined
                   }
-                  {!result && !isLoading && <center><h1>No tienes nigun puesto</h1></center>}
+                  {!result && !isLoading && <center><h1>No tienes ningún puesto</h1></center>}
                 </Row>
               </div>
               <div className={`main_list_products ${alignment === 'list' ? 'activar_vista' : 'desactivar_vista'}`} id="list_view_products">
                       index={page - 1}
                     /> : undefined
                   }
-                  {!result && !isLoading && <center><h1>No tienes nigun puesto</h1></center>}
+                  {!result && !isLoading && <center><h1>No tienes nigún puesto</h1></center>}
                 </Row>
               </div>