From f0517563b2b4836a739c36e8a92b6e9c19d71786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=BCbra=20Aksu?= <kubra_4199@hotmail.com>
Date: Fri, 22 Dec 2023 21:18:54 +0300
Subject: [PATCH] resource selection implementation revised.

---
 .../components/Resource/ResourceDetail1.js    | 170 +++++-------------
 1 file changed, 43 insertions(+), 127 deletions(-)

diff --git a/resq/frontend/src/components/Resource/ResourceDetail1.js b/resq/frontend/src/components/Resource/ResourceDetail1.js
index ea220516..a50ef334 100644
--- a/resq/frontend/src/components/Resource/ResourceDetail1.js
+++ b/resq/frontend/src/components/Resource/ResourceDetail1.js
@@ -5,86 +5,34 @@ import {
     FormControlLabel,
     Checkbox,
     FormControl,
-    InputLabel,
-    Select,
-    MenuItem,
-    OutlinedInput
+    Autocomplete,
+    TextField
 } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
 import { useQuery } from "@tanstack/react-query";
 import { getCategoryTree } from "../../AppService";
 
-const materialResources = [
-    'Food',
-    'Diapers',
-    'Hygene Products',
-    'Water',
-    'Shelter',
-    'Tent',
-    'Clothing',
-];
-const humanResources = [
-    'Doctor',
-    'Nurse',
-    'Translator',
-    'Rescue Team',
-    'Lorry Driver',
-    'Food Service',
-    'District Responsible',
-];
-
 export default function ResourceDetails1({ resourceData, setResourceData }) {
+    const [isMaterialResourceChecked, setIsMaterialResourceChecked] = useState(false);
+    const [isHumanResourceChecked, setIsHumanResourceChecked] = useState(false);
+    const [selectedResource, setSelectedResource] = useState(null);
 
-    const ITEM_HEIGHT = 48;
-    const ITEM_PADDING_TOP = 8;
-    const MenuProps = {
-        PaperProps: {
-            style: {
-                maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-                width: 250,
-            },
-        },
-    };
-
-    const { data: categoryTreeData, isLoading: isLoadingCategoryTree } = useQuery({
+    const { data: categoryTreeData, isLoading } = useQuery({
         queryKey: ['categoryTree'],
         queryFn: getCategoryTree
     });
-    const [isMaterialResourceChecked, setIsMaterialResourceChecked] = useState(false);
-    const [isHumanResourceChecked, setIsHumanResourceChecked] = useState(false);
-
-    const [selectedMaterialValue, setSelectedMaterial] = useState(null);
-    const [selectedHumanValues, setSelectedHumanValues] = useState([]);
-
-    const getStyles = (item, selectedItems, theme) => {
-        return {
-            fontWeight:
-                selectedItems.indexOf(item) === -1
-                    ? theme.typography.fontWeightRegular
-                    : theme.typography.fontWeightMedium,
-        };
-    };
-
-    const handleHumanChange = (event) => {
-        setSelectedHumanValues(event.target.value);
-    };
-
-    const theme = useTheme();
 
     useEffect(() => {
-        if (!isMaterialResourceChecked && !isHumanResourceChecked) {
-            setSelectedResource('');
-        }
-
-        const updatedResourceData = { ...resourceData };
-        if (isMaterialResourceChecked || isHumanResourceChecked) {
-            updatedResourceData.resourceType = selectedResource;
-        }
-        setResourceData(updatedResourceData);
+        const description = {
+            resourceType: isMaterialResourceChecked ? 'material' : 'human',
+            resourceId: selectedResource?.id || ''
+        };
+        setResourceData({ ...resourceData, ...description });
     }, [isMaterialResourceChecked, isHumanResourceChecked, selectedResource, setResourceData, resourceData]);
 
-    const handleResourceChange = (event) => {
-        setSelectedResource(event.target.value);
+    const filterCategoryItems = (type) => {
+        return categoryTreeData?.filter(cat => cat.type === type)
+            .map(cat => ({ label: cat.data, id: cat.id }))
+            .sort((a, b) => a.label.localeCompare(b.label)) || [];
     };
 
     return (
@@ -95,76 +43,44 @@ export default function ResourceDetails1({ resourceData, setResourceData }) {
             <Grid container spacing={3}>
                 <Grid item xs={12}>
                     <FormControlLabel
-                        control={<Checkbox color="primary" name="materialresource" checked={isMaterialResourceChecked}
+                        control={<Checkbox color="primary" checked={isMaterialResourceChecked}
                             onChange={(e) => {
                                 setIsMaterialResourceChecked(e.target.checked);
                                 setIsHumanResourceChecked(!e.target.checked);
-                            }}
-                        />
-                        }
+                                setSelectedResource(null);
+                            }} />}
                         label="Material Resource"
                     />
-                    {isMaterialResourceChecked && (
-                        <FormControl fullWidth sx={{ m: 1, mt: 3 }}>
-                            <InputLabel id="material-resource-select-label">Material Resource</InputLabel>
-                            <Select
-                                labelId="material-resource-select-label"
-                                value={selectedResource}
-                                onChange={handleResourceChange}
-                                input={<OutlinedInput label="Material Resource" />}
-                                MenuProps={MenuProps}
-                            >
-                                {!isLoadingCategoryTree && categoryTreeData?.map((resource) => (
-                                    <MenuItem key={resource.id} value={resource.id}>
-                                        {resource.name}
-                                    </MenuItem>
-                                ))}
-                            </Select>
-                        </FormControl>
-                    )}
-                </Grid>
-                <Grid item xs={12}>
                     <FormControlLabel
-                        control={<Checkbox color="primary" name="humanresource" checked={isHumanResourceChecked}
-                            onChange={(e) => setIsHumanResourceChecked(e.target.checked)} />}
+                        control={<Checkbox color="primary" checked={isHumanResourceChecked}
+                            onChange={(e) => {
+                                setIsHumanResourceChecked(e.target.checked);
+                                setIsMaterialResourceChecked(!e.target.checked);
+                                setSelectedResource(null);
+                            }} />}
                         label="Human Resource"
                     />
-                    {isHumanResourceChecked && (
-                        <>
-                            <FormControl sx={{ m: 1, width: 300, mt: 3 }}>
-                                <Select
-                                    multiple
-                                    displayEmpty
-                                    value={selectedHumanValues}
-                                    onChange={handleHumanChange}
-                                    input={<OutlinedInput />}
-                                    renderValue={(selected) => {
-                                        if (selected.length === 0) {
-                                            return <em>Choose human resource type</em>;
-                                        }
-                                        return selected.join(', ');
-                                    }}
-                                    MenuProps={MenuProps}
-                                    inputProps={{ 'aria-label': 'Without label' }}
-                                >
-                                    <MenuItem disabled value="">
-                                        <em>Choose human resource type</em>
-                                    </MenuItem>
-                                    {humanResources.map((humanResource) => (
-                                        <MenuItem
-                                            key={humanResource}
-                                            value={humanResource}
-                                            style={getStyles(humanResource, selectedHumanValues, theme)}
-                                        >
-                                            {humanResource}
-                                        </MenuItem>
-                                    ))}
-                                </Select>
-                            </FormControl>
-                        </>
+                </Grid>
+                <Grid item xs={12}>
+                    {(isMaterialResourceChecked || isHumanResourceChecked) && (
+                        <FormControl sx={{ m: 1, width: 300, mt: 3 }}>
+                            <Autocomplete
+                                disablePortal
+                                id="resource-category-combo-box"
+                                options={filterCategoryItems(isMaterialResourceChecked ? 'material' : 'human')}
+                                value={selectedResource}
+                                onChange={(event, newValue) => {
+                                    setSelectedResource(newValue);
+                                }}
+                                sx={{ width: 300 }}
+                                renderInput={(params) => (
+                                    <TextField {...params} label={isMaterialResourceChecked ? "Material Resource" : "Human Resource"} />
+                                )}
+                            />
+                        </FormControl>
                     )}
                 </Grid>
             </Grid>
-        </React.Fragment >
+        </React.Fragment>
     );
 }