diff --git a/src/collections/Makers.ts b/src/collections/Makers.ts index 910202b..0feebe2 100644 --- a/src/collections/Makers.ts +++ b/src/collections/Makers.ts @@ -1,4 +1,5 @@ import { CollectionConfig } from 'payload/types'; +import { geoPickerField } from "../customFields/geoPicker/field"; const Makers: CollectionConfig = { slug: 'makers', @@ -14,11 +15,7 @@ const Makers: CollectionConfig = { type: 'text', // required required: true, }, - { - name: 'location', - type: 'point', - label: 'Location', - }, + geoPickerField, { name: 'products', // required type: 'relationship', // required diff --git a/src/customFields/GeoPicker/field.ts b/src/customFields/GeoPicker/field.ts deleted file mode 100644 index eb913bf..0000000 --- a/src/customFields/GeoPicker/field.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Field } from 'payload/types'; -import { GeoPicker} from './GeoPicker'; - -export const GeoPickerField: Field = { - name: 'GeoPicker', - type: 'point', - admin: { - components: { - Field: GeoPicker, - }, - } -} \ No newline at end of file diff --git a/src/customFields/GeoPicker/GeoPicker.tsx b/src/customFields/geoPicker/GeoPicker.tsx similarity index 59% rename from src/customFields/GeoPicker/GeoPicker.tsx rename to src/customFields/geoPicker/GeoPicker.tsx index 41baa0e..64cf359 100644 --- a/src/customFields/GeoPicker/GeoPicker.tsx +++ b/src/customFields/geoPicker/GeoPicker.tsx @@ -1,21 +1,26 @@ import * as React from 'react'; -import { useField } from 'payload/components/forms'; +import { useField, Label, TextInput } from 'payload/components/forms'; export const GeoPicker: React.FC<{ path: string }> = ({ path }) => { const { value, setValue } = useField({ path }); - const [latitude, setLatitude] = React.useState(null); - const [longitude, setLongitude] = React.useState(null); + const [latitude, setLatitude] = React.useState(""); + const [longitude, setLongitude] = React.useState(""); - const handleKeyPress = async (e) => { + const handleCityEnter = async (e) => { + console.log("Handle key") if (e.key === 'Enter') { + console.log("Enter: " + e.target.value) try { const response = await fetch( - `https://nominatim.openstreetmap.org/search?format=json&q=${value}` + `https://nominatim.openstreetmap.org/search?format=json&q=${e.target.value}` ); const data = await response.json(); if (data && data.length > 0) { - setLatitude(parseFloat(data[0].lat)); - setLongitude(parseFloat(data[0].lon)); + const { lat, lon } = data[0]; + setLatitude(lat); + setLongitude(lon); + setValue([lon, lat]); + console.log(data) } } catch (error) { console.error('Error fetching geolocation:', error); @@ -23,6 +28,14 @@ export const GeoPicker: React.FC<{ path: string }> = ({ path }) => { } }; + const handleLatitudeChange = (e) => { + setLatitude(e.target.value); + }; + + const handleLongitudeChange = (e) => { + setLongitude(e.target.value); + }; + return (
@@ -32,9 +45,7 @@ export const GeoPicker: React.FC<{ path: string }> = ({ path }) => { setValue(e.target.value)} - onKeyDown={handleKeyPress} + onKeyDown={handleCityEnter} placeholder="Enter city to get coordinates" />
@@ -42,11 +53,11 @@ export const GeoPicker: React.FC<{ path: string }> = ({ path }) => {
diff --git a/src/customFields/geoPicker/field.ts b/src/customFields/geoPicker/field.ts new file mode 100644 index 0000000..827eaf6 --- /dev/null +++ b/src/customFields/geoPicker/field.ts @@ -0,0 +1,12 @@ +import { PointField } from 'payload/types'; +import { GeoPicker } from './GeoPicker'; + +export const geoPickerField: PointField = { + name: 'Location', + type: 'point', + admin: { + components: { + Field: GeoPicker, + }, + }, +} \ No newline at end of file