gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small change while selecting state and city

Browse Source
This commit is contained in:
Sibunnayak 2024-11-08 15:52:13 +05:30
parent 7a0bd7a228
commit ba24094d58
3 changed files with 142 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/views/PrincipalDistributors/addPrincipalDistributor.js
View File

@ -46,31 +46,29 @@ const AddPrincipalDistributor = () => {
const [selectedState, setSelectedState] = useState(null);
const [selectedCity, setSelectedCity] = useState(null);
useEffect(() => {
const fetchStates = async () => {
const states = State.getStatesOfCountry("IN").map((state) => ({
label: state.name,
value: state.isoCode,
}));
setStateOptions(states);
};
fetchStates();
}, []);
// Fetch all available states on mount
useEffect(() => {
const states = State.getStatesOfCountry("IN").map((state) => ({
label: state.name,
value: state.isoCode,
}));
setStateOptions(states);
}, []);
useEffect(() => {
const fetchCities = async () => {
if (selectedState) {
const cities = City.getCitiesOfState("IN", selectedState.value).map(
(city) => ({
label: city.name,
value: city.name,
})
);
setCityOptions(cities);
}
};
fetchCities();
}, [selectedState]);
// Fetch city options whenever selected state changes
useEffect(() => {
if (selectedState) {
const cities = City.getCitiesOfState("IN", selectedState.value).map(
(city) => ({
label: city.name,
value: city.name,
})
);
setCityOptions(cities);
} else {
setCityOptions([]); // Reset cities if no state selected
}
}, [selectedState]);
const handleInputChange = (e) => {
setUser({ ...user, [e.target.name]: e.target.value });
@ -82,10 +80,21 @@ const AddPrincipalDistributor = () => {
const handleStateChange = (event, newValue) => {
setSelectedState(newValue);
setData((prev) => ({
...prev,
state: newValue ? newValue.label : "",
city: "",
}));
setSelectedCity(null); // Clear city when state changes
setCityOptions([]); // Reset city options
};
const handleCityChange = (event, newValue) => {
setSelectedCity(newValue);
setData((prev) => ({
...prev,
city: newValue ? newValue.label : "",
}));
};
const handleFormSubmit = async (e) => {
@ -97,8 +106,12 @@ const AddPrincipalDistributor = () => {
!user.name ||
!user.email ||
!user.phone ||
!selectedState ||
!selectedCity ||
!data.panNumber ||
!data.tradeName ||
!data.gstNumber ||
!data.country ||
!data.state ||
!data.city ||
!data.street ||
!data.postalCode
) {
@ -124,8 +137,10 @@ const AddPrincipalDistributor = () => {
Name: user.name,
phoneNumber: user.phone,
isDefault: true,
state: selectedState.label, // Send selected state label
city: selectedCity.label, // Send selected city label
state: data.state,
city: data.city,
// state: selectedState.label, // Send selected state label
// city: selectedCity.label, // Send selected city label
},
{
headers: {
@ -421,7 +436,7 @@ const AddPrincipalDistributor = () => {
State*
</Typography>
</Grid>
<Grid item xs={10}>
<Grid item xs={5}>
<Autocomplete
id="state"
options={stateOptions}
@ -434,12 +449,24 @@ const AddPrincipalDistributor = () => {
fullWidth
variant="outlined"
label="Select State"
error={!selectedState}
helperText={!selectedState ? "Select a state" : null}
// error={!selectedState}
// helperText={!selectedState ? "Select a state" : null}
/>
)}
/>
</Grid>
<Grid item xs={5}>
<TextField
id="state"
required
type="text"
fullWidth
name="state"
value={data.state}
variant="outlined"
onChange={handleDataChange}
/>
</Grid>
</Grid>
{/* City */}
@ -453,7 +480,7 @@ const AddPrincipalDistributor = () => {
City*
</Typography>
</Grid>
<Grid item xs={10}>
<Grid item xs={5}>
<Autocomplete
id="city"
options={cityOptions}
@ -466,12 +493,24 @@ const AddPrincipalDistributor = () => {
fullWidth
variant="outlined"
label="Select City"
error={!selectedCity}
helperText={!selectedCity ? "Select a city" : null}
// error={!selectedCity}
// helperText={!selectedCity ? "Select a city" : null}
/>
)}
/>
</Grid>
<Grid item xs={5}>
<TextField
id="city"
required
type="text"
fullWidth
name="city"
value={data.city}
variant="outlined"
onChange={handleDataChange}
/>
</Grid>
</Grid>
{/* Street */}

10
src/views/RetailDistributors/EditRetailDistributor.js
View File

@ -76,6 +76,8 @@ const EditRetailDistributor = () => {
}, [selectedState]);
const handleInputChange = (e) => {
// console.log(e.target.name, e.target.value);
// console.log(user);
setUser({ ...user, [e.target.name]: e.target.value });
};
@ -571,11 +573,11 @@ const EditRetailDistributor = () => {
</Grid>
<Grid item xs={5}>
<TextField
id="State"
id="state"
required
type="text"
fullWidth
name="State"
name="state"
value={user.state}
variant="outlined"
onChange={handleInputChange}
@ -609,11 +611,11 @@ const EditRetailDistributor = () => {
</Grid>
<Grid item xs={5}>
<TextField
id="City"
id="city"
required
type="text"
fullWidth
name="City"
name="city"
value={user.city}
variant="outlined"
onChange={handleInputChange}

93
src/views/RetailDistributors/addRetailDistributor.js
View File

@ -50,31 +50,29 @@ const AddRetailDistributor = () => {
const [selectedCity, setSelectedCity] = useState(null);
const [errors, setErrors] = useState({});
useEffect(() => {
const fetchStates = async () => {
const states = State.getStatesOfCountry("IN").map((state) => ({
label: state.name,
value: state.isoCode,
}));
setStateOptions(states);
};
fetchStates();
}, []);
// Fetch all available states on mount
useEffect(() => {
const states = State.getStatesOfCountry("IN").map((state) => ({
label: state.name,
value: state.isoCode,
}));
setStateOptions(states);
}, []);
useEffect(() => {
const fetchCities = async () => {
if (selectedState) {
const cities = City.getCitiesOfState("IN", selectedState.value).map(
(city) => ({
label: city.name,
value: city.name,
})
);
setCityOptions(cities);
}
};
fetchCities();
}, [selectedState]);
// Fetch city options whenever selected state changes
useEffect(() => {
if (selectedState) {
const cities = City.getCitiesOfState("IN", selectedState.value).map(
(city) => ({
label: city.name,
value: city.name,
})
);
setCityOptions(cities);
} else {
setCityOptions([]); // Reset cities if no state selected
}
}, [selectedState]);
const handleInputChange = (e) => {
setUser({ ...user, [e.target.name]: e.target.value });
@ -82,10 +80,21 @@ const AddRetailDistributor = () => {
const handleStateChange = (event, newValue) => {
setSelectedState(newValue);
setUser((prev) => ({
...prev,
state: newValue ? newValue.label : "",
city: "",
}));
setSelectedCity(null); // Clear city when state changes
setCityOptions([]); // Reset city options
};
const handleCityChange = (event, newValue) => {
setSelectedCity(newValue);
setUser((prev) => ({
...prev,
city: newValue ? newValue.label : "",
}));
};
const handleFileChange = (e) => {
@ -154,8 +163,8 @@ const AddRetailDistributor = () => {
formData.append("email", user.email);
formData.append("trade_name", user.trade_name);
formData.append("address", user.address);
formData.append("state", selectedState.label);
formData.append("city", selectedCity.value);
formData.append("state", user.state);
formData.append("city", user.city);
formData.append("district", user.district);
formData.append("pincode", user.pincode);
formData.append("mobile_number", user.mobile_number);
@ -424,7 +433,7 @@ const AddRetailDistributor = () => {
State*
</Typography>
</Grid>
<Grid item xs={10}>
<Grid item xs={5}>
<Autocomplete
options={stateOptions}
value={selectedState}
@ -433,12 +442,24 @@ const AddRetailDistributor = () => {
<TextField
{...params}
id="state"
required
// required
variant="outlined"
/>
)}
/>
</Grid>
<Grid item xs={5}>
<TextField
id="state"
required
type="text"
fullWidth
name="state"
value={user.state}
variant="outlined"
onChange={handleInputChange}
/>
</Grid>
</Grid>
{/* City */}
@ -452,7 +473,7 @@ const AddRetailDistributor = () => {
City*
</Typography>
</Grid>
<Grid item xs={10}>
<Grid item xs={5}>
<Autocomplete
options={cityOptions}
value={selectedCity}
@ -461,12 +482,24 @@ const AddRetailDistributor = () => {
<TextField
{...params}
id="city"
required
// required
variant="outlined"
/>
)}
/>
</Grid>
<Grid item xs={5}>
<TextField
id="city"
required
type="text"
fullWidth
name="city"
value={user.city}
variant="outlined"
onChange={handleInputChange}
/>
</Grid>
</Grid>
{/* District */}