From 0f856f3902c0782ebb6c5989defccb2333818f08 Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Mon, 7 Oct 2024 14:58:15 +0700 Subject: bugfix required state on update alamat --- src/lib/address/api/cityApi.js | 4 +- src/lib/address/api/stateApi.js | 8 ++++ src/lib/address/components/CreateAddress.jsx | 51 +++++++++++++++++++---- src/lib/address/components/EditAddress.jsx | 61 +++++++++++++++++++++++----- src/lib/checkout/components/Checkout.jsx | 3 +- src/pages/my/address/[id]/edit.jsx | 5 ++- 6 files changed, 110 insertions(+), 22 deletions(-) create mode 100644 src/lib/address/api/stateApi.js (limited to 'src') diff --git a/src/lib/address/api/cityApi.js b/src/lib/address/api/cityApi.js index 7873435b..0b0201e6 100644 --- a/src/lib/address/api/cityApi.js +++ b/src/lib/address/api/cityApi.js @@ -1,7 +1,7 @@ import odooApi from '@/core/api/odooApi' -const cityApi = async () => { - const dataCities = await odooApi('GET', '/api/v1/city') +const cityApi = async ({stateId}) => { + const dataCities = await odooApi('GET', '/api/v1/city?state_id='+stateId) return dataCities } diff --git a/src/lib/address/api/stateApi.js b/src/lib/address/api/stateApi.js new file mode 100644 index 00000000..cea49e7e --- /dev/null +++ b/src/lib/address/api/stateApi.js @@ -0,0 +1,8 @@ +import odooApi from '@/core/api/odooApi' + +const stateApi = async () => { + const dataState = await odooApi('GET', '/api/v1/state') + return dataState +} + +export default stateApi \ No newline at end of file diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx index e315affe..9d70e8fc 100644 --- a/src/lib/address/components/CreateAddress.jsx +++ b/src/lib/address/components/CreateAddress.jsx @@ -12,6 +12,7 @@ import { toast } from 'react-hot-toast'; import { yupResolver } from '@hookform/resolvers/yup'; import Menu from '@/lib/auth/components/Menu'; import useAddresses from '../hooks/useAddresses'; +import stateApi from '../api/stateApi'; const CreateAddress = () => { const auth = useAuth(); @@ -28,23 +29,40 @@ const CreateAddress = () => { defaultValues, }); const { addresses = [] } = useAddresses(); // Ensure addresses is an array + const [states, setState] = useState([]); const [cities, setCities] = useState([]); const [districts, setDistricts] = useState([]); const [subDistricts, setSubDistricts] = useState([]); const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types useEffect(() => { - const loadCities = async () => { - let dataCities = await cityApi(); - dataCities = dataCities.map((city) => ({ - value: city.id, - label: city.name, + const loadState = async () => { + let dataState = await stateApi(); + dataState = dataState.map((state) => ({ + value: state.id, + label: state.name, })); - setCities(dataCities); + setState(dataState); }; - loadCities(); + loadState(); }, []); + const watchState = watch('state'); + useEffect(() => { + setValue('city', ''); + if (watchState) { + const loadCities = async () => { + let dataCities = await cityApi({stateId: watchState}); + dataCities = dataCities.map((city) => ({ + value: city.id, + label: city.name, + })); + setCities(dataCities); + }; + loadCities(); + } + }, [watchState, setValue]); + useEffect(() => { if (addresses) { let hasContactAddress = false; @@ -100,6 +118,7 @@ const CreateAddress = () => { const onSubmitHandler = async (values) => { const data = { ...values, + state_id: values.state, city_id: values.city, district_id: values.district, sub_district_id: values.subDistrict, @@ -204,13 +223,27 @@ const CreateAddress = () => { +
+ + ( + + )} + /> +
+ {errors.state?.message} +
+
+
( - + )} />
@@ -270,6 +303,7 @@ const validationSchema = Yup.object().shape({ mobile: Yup.string().required('Harus di-isi'), street: Yup.string().required('Harus di-isi'), zip: Yup.string().required('Harus di-isi'), + state: Yup.string().required('Harus di-pilih'), city: Yup.string().required('Harus di-pilih'), district: Yup.string().required('Harus di-pilih'), }); @@ -280,6 +314,7 @@ const defaultValues = { email: '', mobile: '', street: '', + state: '', city: '', district: '', subDistrict: '', diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx index 182c8a31..23cf72a9 100644 --- a/src/lib/address/components/EditAddress.jsx +++ b/src/lib/address/components/EditAddress.jsx @@ -13,6 +13,7 @@ import { toast } from 'react-hot-toast'; import Menu from '@/lib/auth/components/Menu'; import useAuth from '@/core/hooks/useAuth'; import odooApi from '@/core/api/odooApi'; +import stateApi from '../api/stateApi'; const EditAddress = ({ id, defaultValues }) => { const auth = useAuth(); @@ -29,9 +30,11 @@ const EditAddress = ({ id, defaultValues }) => { resolver: yupResolver(validationSchema), defaultValues, }); + + const [states, setStates] = useState([]); const [cities, setCities] = useState([]); const [districts, setDistricts] = useState([]); - const [subDistricts, setSubDistricts] = useState([]); + const [subDistricts, setSubDistricts] = useState([]); useEffect(() => { const loadProfile = async () => { @@ -48,16 +51,38 @@ const EditAddress = ({ id, defaultValues }) => { }, [auth?.parentId]); useEffect(() => { - const loadCities = async () => { - let dataCities = await cityApi(); - dataCities = dataCities.map((city) => ({ - value: city.id, - label: city.name, + const loadStates = async () => { + let dataStates = await stateApi(); + dataStates = dataStates.map((state) => ({ + value: state.id, + label: state.name, })); - setCities(dataCities); + setStates(dataStates); }; - loadCities(); - }, []); + loadStates(); + },[]) + + const watchState = watch('state'); + useEffect(() => { + setValue('city', ''); + if(watchState) { + const loadCities = async () => { + let dataCities = await cityApi({ stateId: watchState }); + dataCities = dataCities.map((city) => ({ + value: city.id, + label: city.name, + })); + setCities(dataCities); + let oldCity = getValues('oldCity'); + if (oldCity) { + setValue('city', oldCity); + setValue('oldCity', ''); + } + }; + loadCities(); + } + + }, [watchState, setValue, getValues]); const watchCity = watch('city'); useEffect(() => { @@ -107,6 +132,7 @@ const EditAddress = ({ id, defaultValues }) => { const data = { ...values, phone: values.mobile, + state_id: values.state, city_id: values.city, district_id: values.district, sub_district_id: values.subDistrict, @@ -241,13 +267,27 @@ const EditAddress = ({ id, defaultValues }) => {
+
+ + ( + + )} + /> +
+ {errors.state?.message} +
+
+
( - + )} />
@@ -308,6 +348,7 @@ const validationSchema = Yup.object().shape({ mobile: Yup.string().required('Harus di-isi'), street: Yup.string().required('Harus di-isi'), zip: Yup.string().required('Harus di-isi'), + state : Yup.string().required('Harus di-pilih'), city: Yup.string().required('Harus di-pilih'), district: Yup.string().required('Harus di-pilih'), }); diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx index 4c7e852f..a1b0116a 100644 --- a/src/lib/checkout/components/Checkout.jsx +++ b/src/lib/checkout/components/Checkout.jsx @@ -67,6 +67,7 @@ const Checkout = () => { const getAddresses = async () => { const dataAddresses = await addressesApi(); + console.log('ini adalah adress',dataAddresses); setAddresses(dataAddresses); }; @@ -1664,7 +1665,7 @@ const SectionAddress = ({ address, label, url }) => ( ); const SectionValidation = ({ address }) => - address?.rajaongkirCityId == 0 && ( + address?.stateId == null && (
Mohon untuk memperbarui alamat Anda dengan mengklik tombol di bawah ini.{' '} diff --git a/src/pages/my/address/[id]/edit.jsx b/src/pages/my/address/[id]/edit.jsx index c552659b..c126b290 100644 --- a/src/pages/my/address/[id]/edit.jsx +++ b/src/pages/my/address/[id]/edit.jsx @@ -37,12 +37,15 @@ export async function getServerSideProps(context) { mobile: address.mobile, street: address.street, zip: address.zip, - city: address.city?.id || '', + state: address.stateId?.id || '', + oldCity: address.city?.id || '', + city: '', oldDistrict: address.district?.id || '', district: '', oldSubDistrict: address.subDistrict?.id || '', subDistrict: '', business_name: '', }; + console.log('ini default',defaultValues); return { props: { id, defaultValues } }; } -- cgit v1.2.3