geolocation field

src/components/fields/Duration/TableCell.tsx

@@ -1,8 +1,8 @@
-import { IHeavyCellProps } from "@src/components/fields/types";
+import { IBasicCellProps } from "@src/components/fields/types";
 
 import { getDurationString } from "./utils";
 
-export default function Duration({ value }: IHeavyCellProps) {
+export default function Duration({ value }: IBasicCellProps) {
   if (
     !value ||
     !value.start ||

src/components/fields/Duration/index.tsx

@@ -1,6 +1,6 @@
 import { lazy } from "react";
 import { IFieldConfig, FieldType } from "@src/components/fields/types";
-import withHeavyCell from "@src/components/fields/_withTableCell/withHeavyCell";
+import withBasicCell from "@src/components/fields/_withTableCell/withBasicCell";
 
 import DurationIcon from "@mui/icons-material/TimerOutlined";
 import BasicCell from "@src/components/fields/_BasicCell/BasicCellNull";
@@ -24,7 +24,7 @@ export const config: IFieldConfig = {
   initialValue: {},
   icon: <DurationIcon />,
   description: "Duration calculated from two timestamps.",
-  TableCell: withHeavyCell(BasicCell, TableCell),
+  TableCell: withBasicCell(TableCell),
   TableEditor: withSideDrawerEditor(TableCell),
   SideDrawerField,
 };

src/components/fields/GeoPoint/SideDrawerField.tsx

@@ -0,0 +1,56 @@
+import { ISideDrawerFieldProps } from "@src/components/fields/types";
+
+import { Box, Stack, TextField } from "@mui/material";
+import DatePicker from "@mui/lab/DatePicker";
+import DateTimeIcon from "@mui/icons-material/AccessTime";
+import { fieldSx, getFieldId } from "@src/components/SideDrawer/utils";
+import { GeoPoint } from "firebase/firestore";
+
+export default function GeoPointField({
+  column,
+  value,
+  onChange,
+  onSubmit,
+  disabled,
+}: ISideDrawerFieldProps) {
+  if (value !== undefined) {
+  }
+  const latitude = value?.latitude ?? null;
+  const longitude = value?.longitude ?? null;
+
+  const handleChange = (type: "latitude" | "longitude") => (e: any) => {
+    const v = e.target.value;
+    const updatedValue =
+      type === "latitude"
+        ? new GeoPoint(v ?? 0, longitude)
+        : new GeoPoint(latitude, v ?? 0);
+    onChange(updatedValue);
+  };
+
+  return (
+    <>
+      <Stack direction="row" spacing={1} sx={{ mt: 0.5 }}>
+        <TextField
+          label="Latitude"
+          type="number"
+          value={latitude}
+          inputProps={{ min: -90, max: 90 }}
+          onChange={handleChange("latitude")}
+          disabled={disabled}
+          onBlur={onSubmit}
+          fullWidth
+        />
+        <TextField
+          label="Longitude"
+          type="number"
+          value={longitude}
+          inputProps={{ min: -90, max: 90 }}
+          onChange={handleChange("longitude")}
+          disabled={disabled}
+          onBlur={onSubmit}
+          fullWidth
+        />
+      </Stack>
+    </>
+  );
+}

src/components/fields/GeoPoint/TableCell.tsx

@@ -0,0 +1,13 @@
+import { IBasicCellProps } from "@src/components/fields/types";
+
+export default function Duration({ value }: IBasicCellProps) {
+  if (value === undefined) return null;
+
+  if (value.latitude === undefined || value.longitude === undefined)
+    throw new Error("Invalid value");
+  return (
+    <>
+      {value.latitude},{value.longitude}
+    </>
+  );
+}

src/components/fields/GeoPoint/index.tsx

@@ -0,0 +1,30 @@
+import { lazy } from "react";
+import { IFieldConfig, FieldType } from "@src/components/fields/types";
+import withBasicCell from "@src/components/fields/_withTableCell/withBasicCell";
+
+import GeoPointIcon from "@mui/icons-material/PinDropOutlined";
+import withSideDrawerEditor from "@src/components/Table/editors/withSideDrawerEditor";
+
+const TableCell = lazy(
+  () => import("./TableCell" /* webpackChunkName: "TableCell-GeoPoint" */)
+);
+const SideDrawerField = lazy(
+  () =>
+    import(
+      "./SideDrawerField" /* webpackChunkName: "SideDrawerField-GeoPoint" */
+    )
+);
+
+export const config: IFieldConfig = {
+  type: FieldType.geoPoint,
+  name: "GeoPoint (Alpha)",
+  group: "Numeric",
+  dataType: "{latitude:number; longitude:number}",
+  initialValue: {},
+  icon: <GeoPointIcon />,
+  description: "Geo point is represented as latitude/longitude pair.",
+  TableCell: withBasicCell(TableCell),
+  TableEditor: withSideDrawerEditor(TableCell),
+  SideDrawerField,
+};
+export default config;

src/components/fields/GeoPoint/utils.ts

@@ -0,0 +1,12 @@
+export const getDurationString = (start: Date, end: Date) => {
+  let distance = Math.abs(end.getTime() - start.getTime());
+  const hours = Math.floor(distance / 3600000);
+  distance -= hours * 3600000;
+  const minutes = Math.floor(distance / 60000);
+  distance -= minutes * 60000;
+  const seconds = Math.floor(distance / 1000);
+
+  return `${hours ? `${hours}h` : ""} ${("0" + minutes).slice(-2)}m ${(
+    "0" + seconds
+  ).slice(-2)}s`;
+};

src/components/fields/index.ts

@@ -18,6 +18,7 @@ import Percentage from "./Percentage";
 import Rating from "./Rating";
 import Slider from "./Slider";
 import Color from "./Color";
+import GeoPoint from "./GeoPoint";
 import Date_ from "./Date";
 import DateTime from "./DateTime";
 import Duration from "./Duration";
@@ -61,6 +62,7 @@ export const FIELDS: IFieldConfig[] = [
   Rating,
   Slider,
   Color,
+  GeoPoint,
   /** DATE & TIME */
   Date_,
   DateTime,

src/constants/fields.ts

@@ -17,6 +17,7 @@ export enum FieldType {
   rating = "RATING",
   slider = "SLIDER",
   color = "COLOR",
+  geoPoint = "GEO_POINT",
   // DATE & TIME
   date = "DATE",
   dateTime = "DATE_TIME",