summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/address/components/CreateAddress.jsx18
-rw-r--r--src/lib/address/components/EditAddress.jsx21
-rw-r--r--src/lib/maps/components/PinPointMap.jsx24
-rw-r--r--src/lib/maps/stores/useMaps.js33
4 files changed, 69 insertions, 27 deletions
diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index fbb01fcc..35c966c7 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -212,7 +212,7 @@ const CreateAddress = () => {
<>
<BottomPopup
className=' !h-[75%]'
- title='Pin Maps Address'
+ title='Pin Koordinat Address'
active={pinedMaps}
close={() => setPinedMaps(false)}
>
@@ -227,16 +227,20 @@ const CreateAddress = () => {
<div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
<form onSubmit={handleSubmit(onSubmitHandler)}>
<div className='mb-4 items-start'>
- <label className='form-label mb-2'>PinPoint</label>
+ <label className='form-label mb-2'>Koordinat Alamat</label>
{addressMaps ? (
- <div className='flex gap-x-2 items-center'>
- <MapPinIcon class='h-6 w-6 text-gray-500 mr-3 cursor-pointer' onClick={() => setPinedMaps(true)} />{' '}
+ <div className='flex items-center'>
+ <button type='button' className="flex items-center justify-center me-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition">
+ <MapPinIcon class='h-6 w-6' onClick={() => setPinedMaps(true)} />{' '}
+ </button>
<span> {addressMaps} </span>
</div>
) : (
- <Button variant='plain' onClick={() => setPinedMaps(true)}>
- <MapPinIcon class='h-6 w-6 text-gray-500 mr-3' />
- Pin Alamat
+ <Button variant='plain' style={{ padding: 0 }} onClick={() => setPinedMaps(true)}>
+ <button type='button' className="flex items-center justify-center me-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition">
+ <MapPinIcon className="h-6 w-6" />
+ </button>
+ Pin Koordinat Alamat
</Button>
)}
</div>
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index cfb35fbd..743bb4c8 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -311,7 +311,12 @@ const EditAddress = ({ id, defaultValues }) => {
close={() => setPinedMaps(false)}
>
<div className='flex mt-4'>
- <PinPointMap />
+ <PinPointMap
+ initialLatitude={selectedPosition?.lat}
+ initialLongitude={selectedPosition?.lng}
+ initialAddress={tempAddress}
+ />
+
</div>
</BottomPopup>
<div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
@@ -327,16 +332,20 @@ const EditAddress = ({ id, defaultValues }) => {
</div>
<form onSubmit={handleSubmit(onSubmitHandler)}>
<div className='mb-4 items-start'>
- <label className='form-label mb-2'>PinPoint</label>
+ <label className='form-label mb-2'>Koordinat Alamat</label>
{tempAddress ? (
<div className='flex gap-x-2 items-center'>
- <MapPinIcon class='h-6 w-6 text-gray-500 mr-3 cursor-pointer' onClick={() => setPinedMaps(true)} />{' '}
+ <button type='button' className="flex items-center justify-center me-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition">
+ <MapPinIcon class='h-6 w-6' onClick={() => setPinedMaps(true)} />{' '}
+ </button>
<span> {tempAddress} </span>
</div>
) : (
- <Button variant='plain' onClick={() => setPinedMaps(true)}>
- <MapPinIcon class='h-6 w-6 text-gray-500 mr-3' />
- Pin Alamat
+ <Button variant='plain' style={{ padding: 0 }} onClick={() => setPinedMaps(true)}>
+ <button type='button' className="flex items-center justify-center me-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition">
+ <MapPinIcon className="h-6 w-6" />
+ </button>
+ Pin Koordinat Alamat
</Button>
)}
</div>
diff --git a/src/lib/maps/components/PinPointMap.jsx b/src/lib/maps/components/PinPointMap.jsx
index fde1f36c..c46d838a 100644
--- a/src/lib/maps/components/PinPointMap.jsx
+++ b/src/lib/maps/components/PinPointMap.jsx
@@ -19,7 +19,7 @@ const defaultCenter = {
lng: 106.816666,
};
-const PinpointLocation = () => {
+const PinpointLocation = ({ initialLatitude, initialLongitude, initialAddress }) => {
const { isLoaded } = useJsApiLoader({
googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_API_KEY,
libraries: ['places'],
@@ -34,8 +34,15 @@ const PinpointLocation = () => {
setPinedMaps,
} = useMaps();
- const [tempAddress, setTempAddress] = useState('');
- const [tempPosition, setTempPosition] = useState(defaultCenter);
+ const [tempAddress, setTempAddress] = useState(initialAddress || '');
+ const [tempPosition, setTempPosition] = useState(
+ initialLatitude && initialLongitude
+ ? { lat: parseFloat(initialLatitude), lng: parseFloat(initialLongitude) }
+ : selectedPosition.lat && selectedPosition.lng
+ ? selectedPosition
+ : defaultCenter
+ );
+
const [markerIcon, setMarkerIcon] = useState(null);
const autocompleteRef = useRef(null);
@@ -47,7 +54,12 @@ const PinpointLocation = () => {
scaledSize: new window.google.maps.Size(25, 40),
});
}
- }, [isLoaded]);
+
+ // If we have initial coordinates but no address, fetch the address
+ if (initialLatitude && initialLongitude && !initialAddress) {
+ getAddress(parseFloat(initialLatitude), parseFloat(initialLongitude));
+ }
+ }, [isLoaded, initialLatitude, initialLongitude, initialAddress]);
const getAddressComponent = (components, type) => {
const component = components.find((comp) => comp.types.includes(type));
@@ -147,6 +159,8 @@ const PinpointLocation = () => {
<input
type='text'
placeholder='Cari Alamat...'
+ value={tempAddress}
+ onChange={(e) => setTempAddress(e.target.value)}
style={{ width: '100%', padding: '8px' }}
/>
</Autocomplete>
@@ -209,4 +223,4 @@ const PinpointLocation = () => {
);
};
-export default PinpointLocation;
+export default PinpointLocation; \ No newline at end of file
diff --git a/src/lib/maps/stores/useMaps.js b/src/lib/maps/stores/useMaps.js
index 4daf7f62..c57a05ad 100644
--- a/src/lib/maps/stores/useMaps.js
+++ b/src/lib/maps/stores/useMaps.js
@@ -6,12 +6,27 @@ const center = {
};
export const useMaps = create((set) => ({
- selectedPosition: center,
- addressMaps: '',
- detailAddress: {},
- pinedMaps : false,
- setSelectedPosition: (position) => set({ selectedPosition: position }),
- setAddressMaps: (addressMaps) => set({ addressMaps }),
- setDetailAddress: (detailAddress) => set({ detailAddress }),
- setPinedMaps: (pinedMaps) => set({pinedMaps})
- })); \ No newline at end of file
+ // State existing
+ selectedPosition: center,
+ addressMaps: '',
+ detailAddress: {},
+ pinedMaps: false,
+
+ // State tambahan untuk penyimpanan posisi sementara
+ tempPositionCreate: null,
+ tempPositionEdit: null,
+
+ // Setter existing
+ setSelectedPosition: (position) => set({ selectedPosition: position }),
+ setAddressMaps: (addressMaps) => set({ addressMaps }),
+ setDetailAddress: (detailAddress) => set({ detailAddress }),
+ setPinedMaps: (pinedMaps) => set({ pinedMaps }),
+
+ // Setter tambahan untuk posisi sementara
+ setTempPositionCreate: (position) => set({ tempPositionCreate: position }),
+ setTempPositionEdit: (position) => set({ tempPositionEdit: position }),
+
+ // Opsional: Reset jika ingin clear saat keluar halaman
+ resetTempPositionCreate: () => set({ tempPositionCreate: null }),
+ resetTempPositionEdit: () => set({ tempPositionEdit: null }),
+}));
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 04:22:17 +0000