checkin populate device form

Author: archies-coder

src/components/CustomAutoComplete.tsx

@@ -1,6 +1,6 @@
 import classes from '*.module.css';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import { Autocomplete } from '@material-ui/lab';
+import { Autocomplete, createFilterOptions } from '@material-ui/lab';
 import { RootState } from 'app/rootReducer';
 import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux';
@@ -23,6 +23,8 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
     }
 }))
 
+const filter = createFilterOptions<any>();
+
 export const CustomAutoComplete: React.FC<any> = (props) => {
 
     const classes = useStyles()
@@ -43,6 +45,32 @@ export const CustomAutoComplete: React.FC<any> = (props) => {
                 onInputChange={(event, newInputValue) => {
                     onChange(newInputValue);
                 }}
+                clearOnBlur
+                selectOnFocus
+                handleHomeEndKeys
+                filterOptions={(options: any, params: any) => {
+                    const filtered = filter(options, params);
+                    // Suggest the creation of a new value
+                    if (params.inputValue !== '') {
+                        filtered.push({
+                            inputValue: params.inputValue,
+                            title: `Add "${params.inputValue}"`,
+                        });
+                    }
+                    return filtered;
+                }}
+                getOptionLabel={(option: any) => {
+                    // Value selected with enter, right from the input
+                    if (typeof option === 'string') {
+                        return option;
+                    }
+                    // Add "xxx" option created dynamically
+                    if (option.inputValue) {
+                        return option.inputValue;
+                    }
+                    // Regular option
+                    return option.title;
+                }}
                 options={options}
                 id="custom-input-demo"
                 forcePopupIcon={false}

src/features/Settings/DeviceForm.tsx

@@ -13,6 +13,8 @@ import CustomButton from "components/Button";
 import TextInput from "components/TextInput";
 import { saveDevice, setCurrentDevice } from './deviceSlice';
 import { RootState } from 'app/rootReducer';
+import { CustomAutoComplete } from 'components/CustomAutoComplete';
+import { fetchCheckInPoints } from 'features/SalesAndOrganisation/checkInPointSlice';
 
 const useStyles = makeStyles((theme: Theme) => createStyles({
     paper: {
@@ -80,6 +82,9 @@ const DeviceForm: FunctionComponent<Props> = (props) => {
         devicesById,
         error
     } = useSelector((state: RootState) => state.devices)
+    const {
+        checkInPoints
+    } = useSelector((state: RootState) => state.checkinpoints)
 
     const {
         devicename,
@@ -104,6 +109,11 @@ const DeviceForm: FunctionComponent<Props> = (props) => {
         }
     }, [id])
 
+    useEffect(() => {
+        dispatch(fetchCheckInPoints())
+    }, [dispatch])
+
+
     const handleChange = (e: any) => setInputState({
         ...inputState,
         [e.target.name]: e.target.value
@@ -121,6 +131,13 @@ const DeviceForm: FunctionComponent<Props> = (props) => {
         }), () => setInputState(defaultInputState)))
     }
 
+    const handleCheckInPointChange = (checkinPointname: string) => {
+        setInputState({
+            ...inputState,
+            checkinpoint: checkinPointname
+        });
+    }
+
 
     return (
         <Grid item style={{ height: '80%', width: '90%' }}>
@@ -172,11 +189,22 @@ const DeviceForm: FunctionComponent<Props> = (props) => {
                                 name="udid"
                                 value={udid} />
 
-                            <TextInput
+                            {/* <TextInput
                                 required
                                 label="checkinpoint"
                                 onChange={handleChange}
                                 name="checkinpoint"
+                                value={checkinpoint} /> */}
+                            <CustomAutoComplete
+                                style={{
+                                    // width: 452,
+                                    // marginLeft: i % 2 === 0 ? '64px' : '28px'
+                                }}
+                                required
+                                options={checkInPoints.map(o => o.checkinpoint)}
+                                label="checkinpoint"
+                                name="checkinpoint"
+                                onChange={(value: any) => handleCheckInPointChange(value)}
                                 value={checkinpoint} />
                         </Grid>
                     </Grid>