Skip to content

Commit

Permalink
Merge pull request #569 from bounswe/frontend/resource_type_handle
Browse files Browse the repository at this point in the history 
Implement the Deficiency at Resource Type and Resource Selection Logic in ResourceDetails1 Component
  • Loading branch information
@ilgazer
ilgazer authored Dec 19, 2023
2 parents 1d98569 + 8cb3d20 commit 870d948
Showing 1 changed file with 76 additions and 102 deletions.
178 changes: 76 additions & 102 deletions resq/frontend/src/components/Resource/ResourceDetail1.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useState, useEffect} from 'react';
import React, { useState, useEffect } from 'react';
import {
Typography,
Grid,
Expand All @@ -8,29 +8,14 @@ import {
InputLabel,
Select,
MenuItem,
OutlinedInput,
Autocomplete, TextField
OutlinedInput
} from '@mui/material';
import {createTheme} from '@mui/material/styles';
import {Theme, useTheme} from '@mui/material/styles';
import {useResource} from './ResourceContext';
import {useContext} from 'react';
import {ResourceContext} from './ResourceContext';
import {useQuery} from "@tanstack/react-query";
import {getCategoryTree} from "../../AppService";

const humanResources = [
'Doctor',
'Nurse',
'Translator',
'Rescue Team',
'Lorry Driver',
'Food Service',
'District Responsible',
];

export default function ResourceDetails1({resourceData, setResourceData}) {
import { useTheme } from '@mui/material/styles';
import { useQuery } from "@tanstack/react-query";
import { getCategoryTree } from "../../AppService";

export default function ResourceDetails1({ resourceData, setResourceData }) {
const theme = useTheme();
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
Expand All @@ -42,43 +27,31 @@ export default function ResourceDetails1({resourceData, setResourceData}) {
},
};

const categoryTree = useQuery({queryKey: ['categoryTree'], queryFn: getCategoryTree})
const { data: categoryTreeData, isLoading: isLoadingCategoryTree } = 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();
const [selectedResource, setSelectedResource] = useState('');

useEffect(() => {
const description = {
categoryTreeId: (isMaterialResourceChecked && selectedMaterialValue?.id) || '',
//human: isHumanResourceChecked ? selectedHumanValues.join(', ') : '',
};
setResourceData({...resourceData, ...description});
}, [isMaterialResourceChecked, selectedMaterialValue, setResourceData, resourceData]);
if (!isMaterialResourceChecked && !isHumanResourceChecked) {
setSelectedResource('');
}

const comboBoxItems = (categoryTree.data?.getLeafCategories() || [])
.map(cat => ({label: cat.data, id: cat.id}))
.sort((a, b) => {
if (a.label === b.label) return 0;
return a.label > b.label ? 1 : -1;
});
const updatedResourceData = { ...resourceData };
if (isMaterialResourceChecked || isHumanResourceChecked) {
updatedResourceData.resourceType = selectedResource;
}
setResourceData(updatedResourceData);
}, [isMaterialResourceChecked, isHumanResourceChecked, selectedResource, setResourceData, resourceData]);

const handleResourceChange = (event) => {
setSelectedResource(event.target.value);
};

return (
<React.Fragment>
Expand All @@ -88,67 +61,68 @@ export default function ResourceDetails1({resourceData, setResourceData}) {
<Grid container spacing={3}>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox color="primary" name="materialresource" checked={isMaterialResourceChecked}
onChange={(e) => setIsMaterialResourceChecked(e.target.checked)}/>}
control={
<Checkbox
color="primary"
checked={isMaterialResourceChecked}
onChange={(e) => {
setIsMaterialResourceChecked(e.target.checked);
setIsHumanResourceChecked(!e.target.checked);
}}
/>
}
label="Material Resource"
/>
{isMaterialResourceChecked && (
<>
<FormControl sx={{m: 1, width: 300, mt: 3}}>
<Autocomplete
disablePortal
id="combo-box-demo"
options={comboBoxItems}
value={selectedMaterialValue}
onChange={(event, newValue) => {
setSelectedMaterial(newValue);
}}
sx={{width: 300}}
renderInput={(params) => <TextField {...params} label="Movie"/>}
/>
</FormControl>
</>
<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);
}}
/>
}
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>
<FormControl fullWidth sx={{ m: 1, mt: 3 }}>
<InputLabel id="human-resource-select-label">Human Resource</InputLabel>
<Select
labelId="human-resource-select-label"
value={selectedResource}
onChange={handleResourceChange}
input={<OutlinedInput label="Human Resource" />}
MenuProps={MenuProps}
>
{!isLoadingCategoryTree && categoryTreeData?.map((resource) => (
<MenuItem key={resource.id} value={resource.id}>
{resource.name}
</MenuItem>
{humanResources.map((humanResource) => (
<MenuItem
key={humanResource}
value={humanResource}
style={getStyles(humanResource, selectedHumanValues, theme)}
>
{humanResource}
</MenuItem>
))}
</Select>
</FormControl>
</>
))}
</Select>
</FormControl>
)}
</Grid>
</Grid>
Expand Down

0 comments on commit 870d948

Please sign in to comment.