From 65beead76cd12e4a95c9645fe35df1f771635e8a Mon Sep 17 00:00:00 2001
From: nina992 <89770889+nina992@users.noreply.github.com>
Date: Mon, 11 Sep 2023 09:51:40 +0400
Subject: [PATCH] chore(web): add location field (#660)

Co-authored-by: nina992 <nouralali992@gmail.com>
Co-authored-by: Jashanpreet Singh (json singh) <20891087+jashanbhullar@users.noreply.github.com>
Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
---
 .../fields/LocationField/index.stories.tsx    | 20 +++++++
 .../components/fields/LocationField/index.tsx | 56 +++++++++++++++++++
 .../fields/PropertyFields/index.tsx           | 10 ++++
 3 files changed, 86 insertions(+)
 create mode 100644 web/src/beta/components/fields/LocationField/index.stories.tsx
 create mode 100644 web/src/beta/components/fields/LocationField/index.tsx

diff --git a/web/src/beta/components/fields/LocationField/index.stories.tsx b/web/src/beta/components/fields/LocationField/index.stories.tsx
new file mode 100644
index 0000000000..10a6a67360
--- /dev/null
+++ b/web/src/beta/components/fields/LocationField/index.stories.tsx
@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import LocationField from ".";
+
+const meta: Meta<typeof LocationField> = {
+  component: LocationField,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LocationField>;
+
+export const Sample: Story = {
+  args: {
+    name: "Location Field",
+    description: "Location field description",
+    value: { lat: 87.43, lng: 107.53 },
+    onChange: () => console.log("clicked"),
+  },
+};
diff --git a/web/src/beta/components/fields/LocationField/index.tsx b/web/src/beta/components/fields/LocationField/index.tsx
new file mode 100644
index 0000000000..43973e5aa2
--- /dev/null
+++ b/web/src/beta/components/fields/LocationField/index.tsx
@@ -0,0 +1,56 @@
+import { useCallback, useState } from "react";
+
+import { LatLng } from "@reearth/beta/utils/value";
+import { styled } from "@reearth/services/theme";
+
+import Property from "..";
+import NumberInput from "../common/NumberInput";
+
+type Props = {
+  name?: string;
+  description?: string;
+  value?: LatLng;
+  onChange?: (location: LatLng) => void;
+};
+
+const LocationField: React.FC<Props> = ({ name, description, value, onChange }) => {
+  const [location, setLocation] = useState<LatLng>(value || { lat: 0, lng: 0 });
+
+  const handleChange = useCallback(
+    (coordination: string, newValue: number | undefined) => {
+      if (newValue === undefined) return;
+
+      setLocation(prevLocation => ({
+        ...prevLocation,
+        [coordination === "Latitude" ? "lat" : "lng"]: newValue,
+      }));
+      onChange?.(location);
+    },
+    [location, onChange],
+  );
+
+  return (
+    <Property name={name} description={description}>
+      <Wrapper>
+        <NumberInput
+          value={location.lat}
+          inputDescription="Latitude"
+          onChange={newValue => handleChange("Latitude", newValue)}
+        />
+        <NumberInput
+          value={location.lng}
+          inputDescription="Longtitude"
+          onChange={newValue => handleChange("Longtitude", newValue)}
+        />
+      </Wrapper>
+    </Property>
+  );
+};
+
+export default LocationField;
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+`;
diff --git a/web/src/beta/components/fields/PropertyFields/index.tsx b/web/src/beta/components/fields/PropertyFields/index.tsx
index 2da1bf0abc..025f55f262 100644
--- a/web/src/beta/components/fields/PropertyFields/index.tsx
+++ b/web/src/beta/components/fields/PropertyFields/index.tsx
@@ -1,10 +1,12 @@
 import ColorField from "@reearth/beta/components/fields/ColorField";
+import LocationField from "@reearth/beta/components/fields/LocationField";
 import NumberField from "@reearth/beta/components/fields/NumberField";
 import SelectField from "@reearth/beta/components/fields/SelectField";
 import SliderField from "@reearth/beta/components/fields/SliderField";
 import SpacingInput, { SpacingValues } from "@reearth/beta/components/fields/SpacingInput";
 import TextInput from "@reearth/beta/components/fields/TextInput";
 import ToggleField from "@reearth/beta/components/fields/ToggleField";
+import { type LatLng } from "@reearth/beta/utils/value";
 import { type Item } from "@reearth/services/api/propertyApi/utils";
 
 import useHooks from "./hooks";
@@ -93,6 +95,14 @@ const PropertyFields: React.FC<Props> = ({ propertyId, item }) => {
               onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
             />
           )
+        ) : sf.type === "latlng" ? (
+          <LocationField
+            key={sf.id}
+            name={sf.name}
+            value={value as LatLng}
+            description={sf.description}
+            onChange={handlePropertyValueUpdate(item.schemaGroup, propertyId, sf.id, sf.type)}
+          />
         ) : (
           <p key={sf.id}>{sf.name} field</p>
         );