Skip to content

Commit

Permalink
Merge pull request #590 from bounswe/frontend/resource_imp_solve
Browse files Browse the repository at this point in the history 
Resource selection implementation with category tree revised
  • Loading branch information
@ilgazer
ilgazer authored Dec 22, 2023
2 parents c6de288 + f051756 commit 9c28574
Showing 1 changed file with 43 additions and 127 deletions.
170 changes: 43 additions & 127 deletions resq/frontend/src/components/Resource/ResourceDetail1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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>
);
}

0 comments on commit 9c28574

Please sign in to comment.