From 053c801a8c43688c2c4eec6800368898a81bfc39 Mon Sep 17 00:00:00 2001 From: trisusilo48 Date: Thu, 31 Oct 2024 16:55:07 +0700 Subject: integrasi google maps service --- src/lib/address/components/Addresses.jsx | 6 +- src/lib/address/components/CreateAddress.jsx | 88 +++++++++++++++++--- src/lib/address/components/EditAddress.jsx | 116 ++++++++++++++++++++------- src/lib/maps/components/PinPointMap.jsx | 4 +- src/lib/maps/stores/useMaps.js | 2 + 5 files changed, 170 insertions(+), 46 deletions(-) (limited to 'src/lib') diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx index d852f52c..1007b9f8 100644 --- a/src/lib/address/components/Addresses.jsx +++ b/src/lib/address/components/Addresses.jsx @@ -18,7 +18,7 @@ const Addresses = () => { const selectedAddress = getItemAddress(select || ''); const [changeConfirmation, setChangeConfirmation] = useState(false); const [selectedForChange, setSelectedForChange] = useState(null); // State baru untuk simpan alamat yang akan diubah - + const changeSelectedAddress = (id) => { if (!select) return; updateItemAddress(select, id); @@ -187,8 +187,8 @@ const AddressCard = ({ ) : ( <> - -

Belum PinPoint

+ +

Belum PinPoint

)} diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx index a53be0fa..404143f9 100644 --- a/src/lib/address/components/CreateAddress.jsx +++ b/src/lib/address/components/CreateAddress.jsx @@ -1,23 +1,23 @@ import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'; import useAuth from '@/core/hooks/useAuth'; +import Menu from '@/lib/auth/components/Menu'; +import { yupResolver } from '@hookform/resolvers/yup'; import { useRouter } from 'next/router'; -import { Controller, set, useForm } from 'react-hook-form'; +import { useEffect, useState } from 'react'; +import { Controller, useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; import * as Yup from 'yup'; import cityApi from '../api/cityApi'; +import createAddressApi from '../api/createAddressApi'; import districtApi from '../api/districtApi'; +import stateApi from '../api/stateApi'; import subDistrictApi from '../api/subDistrictApi'; -import { useEffect, useState } from 'react'; -import createAddressApi from '../api/createAddressApi'; -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'; import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; -import PinPointMap from '../../maps/components/PinPointMap'; import { Button } from '@chakra-ui/react'; import { MapPinIcon } from 'lucide-react'; +import PinPointMap from '../../maps/components/PinPointMap'; import { useMaps } from '../../maps/stores/useMaps'; const CreateAddress = () => { @@ -41,7 +41,24 @@ const CreateAddress = () => { const [subDistricts, setSubDistricts] = useState([]); const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types const [pinedMaps, setPinedMaps] = useState(false); - const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition } = useMaps(); + const { + addressMaps, + selectedPosition, + detailAddress, + } = useMaps(); + + useEffect(() => { + if (detailAddress) { + setValue('zip', detailAddress.postalCode); + const selectedState = states.find( + (state) => + detailAddress?.province.includes(state.label) || + state.label.includes(detailAddress?.province) + ); + setValue('state', selectedState?.value); + + } + }, [detailAddress, setValue]); useEffect(() => { const loadState = async () => { @@ -56,6 +73,7 @@ const CreateAddress = () => { }, []); const watchState = watch('state'); + console.log(watchState); useEffect(() => { setValue('city', ''); if (watchState) { @@ -71,6 +89,21 @@ const CreateAddress = () => { } }, [watchState, setValue]); + useEffect(() => { + if (detailAddress) { + const selectedCities = cities.find( + (city) => + detailAddress.district + .toLowerCase() + .includes(city.label.toLowerCase()) || + city.label + .toLowerCase() + .includes(detailAddress.district.toLowerCase()) + ); + setValue('city', selectedCities?.value); + } + }, [cities, detailAddress, setValue]); + useEffect(() => { if (addresses) { let hasContactAddress = false; @@ -105,6 +138,21 @@ const CreateAddress = () => { } }, [watchCity, setValue]); + useEffect(() => { + if (detailAddress) { + const selectedDistrict = districts.find( + (district) => + detailAddress.subDistrict + .toLowerCase() + .includes(district.label.toLowerCase()) || + district.label + .toLowerCase() + .includes(detailAddress.subDistrict.toLowerCase()) + ); + setValue('district', selectedDistrict?.value); + } + }, [districts, detailAddress, setValue]); + const watchDistrict = watch('district'); useEffect(() => { setValue('subDistrict', ''); @@ -123,6 +171,22 @@ const CreateAddress = () => { } }, [watchDistrict, setValue]); + useEffect(() => { + if (detailAddress) { + const selectedSubDistrict = subDistricts.find( + (district) => + detailAddress.village + .toLowerCase() + .includes(district.label.toLowerCase()) || + district.label + .toLowerCase() + .includes(detailAddress.village.toLowerCase()) + ); + + setValue('subDistrict', selectedSubDistrict?.value); + } + }, [subDistricts, detailAddress, setValue]); + const onSubmitHandler = async (values) => { const data = { ...values, @@ -133,10 +197,9 @@ const CreateAddress = () => { parent_id: auth.partnerId, latitude: selectedPosition?.lat, longtitude: selectedPosition?.lng, - address_maps: JSON.stringify(addressMaps), + address_map: addressMaps, }; -console.log('ini data',data); - // const address = await createAddressApi({ data }); + const address = await createAddressApi({ data }); if (address?.id) { toast.success('Berhasil menambahkan alamat'); router.back(); @@ -174,7 +237,6 @@ console.log('ini data',data); Pin Alamat )} -
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx index 23cf72a9..0b3b0aa3 100644 --- a/src/lib/address/components/EditAddress.jsx +++ b/src/lib/address/components/EditAddress.jsx @@ -14,6 +14,12 @@ import Menu from '@/lib/auth/components/Menu'; import useAuth from '@/core/hooks/useAuth'; import odooApi from '@/core/api/odooApi'; import stateApi from '../api/stateApi'; +import { MapPinIcon } from 'lucide-react'; +import { Button } from '@chakra-ui/react'; +import { useMaps } from '../../maps/stores/useMaps'; + +import PinPointMap from '../../maps/components/PinPointMap'; +import BottomPopup from '@/core/components/elements/Popup/BottomPopup'; const EditAddress = ({ id, defaultValues }) => { const auth = useAuth(); @@ -34,7 +40,19 @@ const EditAddress = ({ id, defaultValues }) => { const [states, setStates] = useState([]); const [cities, setCities] = useState([]); const [districts, setDistricts] = useState([]); - const [subDistricts, setSubDistricts] = useState([]); + const [subDistricts, setSubDistricts] = useState([]); + const [pinedMaps, setPinedMaps] = useState(false); + const [tempAddress, setTempAddress] = useState(getValues('address_maps')); + const { addressMaps, selectedPosition, detailAddress } = useMaps(); + + useEffect(() => { + if (addressMaps) { + setTempAddress(addressMaps); + setValue('address_map', addressMaps); + setValue('longtitude', selectedPosition.lng); + setValue('latitude', selectedPosition.lat); + } + }, [addressMaps, selectedPosition, setValue]); useEffect(() => { const loadProfile = async () => { @@ -60,12 +78,12 @@ const EditAddress = ({ id, defaultValues }) => { setStates(dataStates); }; loadStates(); - },[]) + }, []); const watchState = watch('state'); useEffect(() => { setValue('city', ''); - if(watchState) { + if (watchState) { const loadCities = async () => { let dataCities = await cityApi({ stateId: watchState }); dataCities = dataCities.map((city) => ({ @@ -81,7 +99,6 @@ const EditAddress = ({ id, defaultValues }) => { }; loadCities(); } - }, [watchState, setValue, getValues]); const watchCity = watch('city'); @@ -136,40 +153,65 @@ const EditAddress = ({ id, defaultValues }) => { city_id: values.city, district_id: values.district, sub_district_id: values.subDistrict, + longtitude: selectedPosition?.lng, + latitude: selectedPosition?.lat, + address_map: addressMaps, }; if (!auth.company) { data.alamat_lengkap_text = values.street; } - const address = await editAddressApi({ id, data }); - let dataAlamat; - let isUpdated = true; - if (auth.company) { - if (auth?.partnerId == id) { - dataAlamat = { - id_user: auth.partnerId, - alamat_lengkap_text: values.alamat_wajib_pajak, - street: values.street, - }; - isUpdated = await odooApi( - 'PUT', - `/api/v1/partner/${auth.parentId}`, - dataAlamat - ); + try { + const address = await editAddressApi({ id, data }); + let dataAlamat; + let isUpdated = true; + if (auth.company) { + if (auth?.partnerId == id) { + dataAlamat = { + id_user: auth.partnerId, + alamat_lengkap_text: values.alamat_wajib_pajak, + street: values.street, + }; + isUpdated = await odooApi( + 'PUT', + `/api/v1/partner/${auth.parentId}`, + dataAlamat + ); + } } - } - - // if (isUpdated?.id) { - if (address?.id && auth.company ? isUpdated?.id : true) { - toast.success('Berhasil mengubah alamat'); - router.back(); - } else { + if (address?.id) { + toast.success('Berhasil mengubah alamat'); + router.back(); + } else { + toast.error('Terjadi kesalahan internal'); + router.back(); + } + } catch (error) { toast.error('Terjadi kesalahan internal'); router.back(); } + + // if (isUpdated?.id) { + // if (address?.id && auth.company ? isUpdated?.id : true) { + // toast.success('Berhasil mengubah alamat'); + // router.back(); + // } else { + // toast.error('Terjadi kesalahan internal'); + // router.back(); + // } }; return ( <> + setPinedMaps(false)} + > +
+ +
+
@@ -182,6 +224,20 @@ const EditAddress = ({ id, defaultValues }) => { {auth?.partnerId == id &&
Utama
}
+
+ + {tempAddress ? ( +
+ {' '} + {tempAddress} +
+ ) : ( + + )} +
@@ -287,7 +343,11 @@ const EditAddress = ({ id, defaultValues }) => { name='city' control={control} render={(props) => ( - + )} />
@@ -348,7 +408,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'), + 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/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx index 1fa40036..201fdeb4 100644 --- a/src/lib/maps/components/PinPointMap.jsx +++ b/src/lib/maps/components/PinPointMap.jsx @@ -26,7 +26,7 @@ const PinpointLocation = () => { libraries: ['places'], }); - const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition } = + const { addressMaps, setAddressMaps, selectedPosition, setSelectedPosition, setDetailAddress } = useMaps(); const [tempAddress, setTempAddress] = useState(''); @@ -84,7 +84,7 @@ const PinpointLocation = () => { ), postalCode: getAddressComponent(addressComponents, 'postal_code'), }; - setValue('state', details?.province); + setDetailAddress(details); console.log(details); setTempAddress(data.results[0].formatted_address); } diff --git a/src/lib/maps/stores/useMaps.js b/src/lib/maps/stores/useMaps.js index 1720e663..83f476bc 100644 --- a/src/lib/maps/stores/useMaps.js +++ b/src/lib/maps/stores/useMaps.js @@ -8,6 +8,8 @@ const center = { export const useMaps = create((set) => ({ selectedPosition: center, addressMaps: '', + detailAddress: {}, setSelectedPosition: (position) => set({ selectedPosition: position }), setAddressMaps: (addressMaps) => set({ addressMaps }), + setDetailAddress: (detailAddress) => set({ detailAddress }), })); \ No newline at end of file -- cgit v1.2.3