@nnkogift/dhis2-form-utils-dhis2-ui 0.1.0-alpha.6 → 0.1.0-alpha.7

package/dist/index.js

@@ -1,5 +1,5 @@
 import { resolveFieldValidation, computeAgeFromDob, parseMultiTextValue, joinMultiTextValue, useOrgUnitPickerContext, useOrganisationUnitsQuery, useFieldControl, useSectionState, useFormFeedback, useFileResourceUpload } from '@nnkogift/dhis2-form-utils-hooks';
-import { InputField, TextAreaField, CalendarInput, Field, Radio, CheckboxField, SingleSelectField, SingleSelectOption, MultiSelectField, MultiSelectOption, Button, OrganisationUnitTree, FileInputField, NoticeBox } from '@dhis2/ui';
+import { colors, InputField, TextAreaField, CalendarInput, Field, Radio, CheckboxField, SingleSelectField, SingleSelectOption, MultiSelectField, MultiSelectOption, Button, OrganisationUnitTree, FileInputField, Modal, ModalTitle, ModalContent, ModalActions, Chip, NoticeBox } from '@dhis2/ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useState, useEffect, useRef } from 'react';
 import { useConfig } from '@dhis2/app-runtime';
@@ -743,123 +743,334 @@ function GeoJsonMapEditor({
     )) }) : null
   ] });
 }
-function D2CoordinateField({ control }) {
-  const { fieldConfig, field, isMandatory, isDisabled } = control;
-  const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
-  const value = field.value;
+function CoordinateLocationModal({
+  isOpen,
+  value,
+  label,
+  disabled,
+  onCancel,
+  onUpdate
+}) {
+  const [draft, setDraft] = useState(value);
   const [lngText, setLngText] = useState(() => parseCoordinateValue(value)?.lng.toString() ?? "");
   const [latText, setLatText] = useState(() => parseCoordinateValue(value)?.lat.toString() ?? "");
   useEffect(() => {
-    const parsed = parseCoordinateValue(value);
+    if (!isOpen) return;
+    setDraft(value);
+  }, [isOpen, value]);
+  useEffect(() => {
+    const parsed = parseCoordinateValue(draft);
     setLngText(parsed ? parsed.lng.toString() : "");
     setLatText(parsed ? parsed.lat.toString() : "");
-  }, [value]);
+  }, [draft]);
   const commit = (lngRaw, latRaw) => {
     const lng = parseFloat(lngRaw);
     const lat = parseFloat(latRaw);
     if (Number.isFinite(lng) && Number.isFinite(lat)) {
-      field.onChange(joinCoordinateValue(lng, lat));
+      setDraft(joinCoordinateValue(lng, lat));
     }
   };
-  return /* @__PURE__ */ jsxs("fieldset", { children: [
-    /* @__PURE__ */ jsxs("legend", { children: [
-      fieldConfig.label,
-      isMandatory ? " *" : ""
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(Modal, { onClose: onCancel, children: [
+    /* @__PURE__ */ jsx(ModalTitle, { children: label }),
+    /* @__PURE__ */ jsxs(ModalContent, { children: [
+      /* @__PURE__ */ jsx(CoordinateMapPicker, { value: draft, onChange: setDraft, disabled }),
+      /* @__PURE__ */ jsx(
+        InputField,
+        {
+          name: "coordinate-modal-lng",
+          type: "number",
+          label: "Longitude",
+          value: lngText,
+          disabled,
+          onChange: ({ value: next }) => {
+            const text = next ?? "";
+            setLngText(text);
+            commit(text, latText);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        InputField,
+        {
+          name: "coordinate-modal-lat",
+          type: "number",
+          label: "Latitude",
+          value: latText,
+          disabled,
+          onChange: ({ value: next }) => {
+            const text = next ?? "";
+            setLatText(text);
+            commit(lngText, text);
+          }
+        }
+      )
     ] }),
-    fieldConfig.description ? /* @__PURE__ */ jsx("p", { children: fieldConfig.description }) : null,
-    /* @__PURE__ */ jsx(CoordinateMapPicker, { value, onChange: field.onChange, disabled: isDisabled }),
-    /* @__PURE__ */ jsx(
-      InputField,
-      {
-        name: `${field.name}-lng`,
-        type: "number",
-        label: "Longitude",
-        value: lngText,
-        disabled: isDisabled,
-        onChange: ({ value: next }) => {
-          const text = next ?? "";
-          setLngText(text);
-          commit(text, latText);
-        },
-        onBlur: field.onBlur
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      InputField,
-      {
-        name: `${field.name}-lat`,
-        type: "number",
-        label: "Latitude",
-        value: latText,
-        disabled: isDisabled,
-        onChange: ({ value: next }) => {
-          const text = next ?? "";
-          setLatText(text);
-          commit(lngText, text);
-        },
-        onBlur: field.onBlur
-      }
-    ),
-    validationText ? /* @__PURE__ */ jsx("p", { "data-error": hasError || void 0, "data-warning": hasWarning || void 0, children: validationText }) : null
+    /* @__PURE__ */ jsxs(ModalActions, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          primary: true,
+          disabled,
+          onClick: () => {
+            onUpdate(draft);
+          },
+          children: "Update location"
+        }
+      )
+    ] })
   ] });
 }
-function D2GeoJsonField({ control }) {
+var labelStyle = {
+  margin: 0,
+  fontSize: 11,
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: 0.4,
+  color: colors.grey700
+};
+var valueStyle = {
+  margin: 0,
+  fontSize: 14,
+  fontWeight: 500,
+  fontVariantNumeric: "tabular-nums"
+};
+function CoordinateSummary({ value }) {
+  const parsed = parseCoordinateValue(value);
+  if (!parsed) {
+    return /* @__PURE__ */ jsx("span", { style: { color: colors.grey700 }, children: "No location set" });
+  }
+  return /* @__PURE__ */ jsxs("dl", { style: { display: "flex", gap: 16, margin: 0 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4, alignItems: "baseline" }, children: [
+      /* @__PURE__ */ jsx("dt", { style: labelStyle, children: "Lat" }),
+      /* @__PURE__ */ jsx("dd", { style: valueStyle, children: parsed.lat.toFixed(5) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4, alignItems: "baseline" }, children: [
+      /* @__PURE__ */ jsx("dt", { style: labelStyle, children: "Lng" }),
+      /* @__PURE__ */ jsx("dd", { style: valueStyle, children: parsed.lng.toFixed(5) })
+    ] })
+  ] });
+}
+function D2CoordinateField({ control }) {
   const { fieldConfig, field, isMandatory, isDisabled } = control;
   const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
   const value = field.value;
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      label: fieldConfig.label,
+      helpText: fieldConfig.description,
+      warning: hasWarning,
+      error: hasError,
+      required: isMandatory,
+      disabled: isDisabled,
+      validationText,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ jsx(CoordinateSummary, { value }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              small: true,
+              disabled: isDisabled,
+              onClick: () => {
+                setIsOpen(true);
+              },
+              children: value ? "Change location" : "Set location"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          CoordinateLocationModal,
+          {
+            isOpen,
+            value,
+            label: fieldConfig.label,
+            disabled: isDisabled,
+            onCancel: () => {
+              setIsOpen(false);
+            },
+            onUpdate: (next) => {
+              field.onChange(next);
+              field.onBlur();
+              setIsOpen(false);
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function GeoJsonGeometryModal({
+  isOpen,
+  value,
+  label,
+  disabled,
+  onCancel,
+  onUpdate
+}) {
+  const [draft, setDraft] = useState(value);
   const [textValue, setTextValue] = useState(value);
   const [textError, setTextError] = useState(void 0);
-  return /* @__PURE__ */ jsxs("fieldset", { children: [
-    /* @__PURE__ */ jsxs("legend", { children: [
-      fieldConfig.label,
-      isMandatory ? " *" : ""
-    ] }),
-    fieldConfig.description ? /* @__PURE__ */ jsx("p", { children: fieldConfig.description }) : null,
-    /* @__PURE__ */ jsx(
-      GeoJsonMapEditor,
-      {
-        value,
-        onChange: (next) => {
-          field.onChange(next);
-          const geometry = parseGeojsonGeometry(next);
-          setTextValue(geometry ? JSON.stringify(geometry, null, 2) : next);
-          setTextError(void 0);
-        },
-        disabled: isDisabled
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      TextAreaField,
-      {
-        name: `${field.name}-geometry`,
-        label: "Geometry (JSON)",
-        value: textValue,
-        disabled: isDisabled,
-        warning: Boolean(textError),
-        validationText: textError,
-        onChange: ({ value: next }) => {
-          setTextValue(next ?? "");
-        },
-        onBlur: () => {
-          if (!textValue) {
-            field.onChange("");
-            setTextError(void 0);
-            return;
-          }
-          const geometry = parseGeojsonGeometry(textValue);
-          if (geometry) {
-            field.onChange(stringifyGeojsonGeometry(geometry));
+  useEffect(() => {
+    if (!isOpen) return;
+    setDraft(value);
+    setTextValue(value);
+    setTextError(void 0);
+  }, [isOpen, value]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs(Modal, { onClose: onCancel, children: [
+    /* @__PURE__ */ jsx(ModalTitle, { children: label }),
+    /* @__PURE__ */ jsxs(ModalContent, { children: [
+      /* @__PURE__ */ jsx(
+        GeoJsonMapEditor,
+        {
+          value: draft,
+          onChange: (next) => {
+            setDraft(next);
+            const geometry = parseGeojsonGeometry(next);
+            setTextValue(geometry ? JSON.stringify(geometry, null, 2) : next);
             setTextError(void 0);
-          } else {
-            setTextError("Not a valid GeoJSON geometry");
+          },
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextAreaField,
+        {
+          name: "geojson-modal-geometry",
+          label: "Geometry (JSON)",
+          value: textValue,
+          disabled,
+          warning: Boolean(textError),
+          validationText: textError,
+          onChange: ({ value: next }) => {
+            setTextValue(next ?? "");
+          },
+          onBlur: () => {
+            if (!textValue) {
+              setDraft("");
+              setTextError(void 0);
+              return;
+            }
+            const geometry = parseGeojsonGeometry(textValue);
+            if (geometry) {
+              setDraft(stringifyGeojsonGeometry(geometry));
+              setTextError(void 0);
+            } else {
+              setTextError("Not a valid GeoJSON geometry");
+            }
           }
-          field.onBlur();
         }
-      }
-    ),
-    validationText ? /* @__PURE__ */ jsx("p", { "data-error": hasError || void 0, "data-warning": hasWarning || void 0, children: validationText }) : null
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(ModalActions, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          primary: true,
+          disabled: disabled || Boolean(textError),
+          onClick: () => {
+            onUpdate(draft);
+          },
+          children: "Update geometry"
+        }
+      )
+    ] })
+  ] });
+}
+function countPositions(geometry) {
+  switch (geometry.type) {
+    case "Point":
+      return 1;
+    case "MultiPoint":
+    case "LineString":
+      return geometry.coordinates.length;
+    case "MultiLineString":
+    case "Polygon":
+      return geometry.coordinates.reduce((sum, ring) => sum + ring.length, 0);
+    case "MultiPolygon":
+      return geometry.coordinates.reduce(
+        (sum, polygon) => sum + polygon.reduce((ringSum, ring) => ringSum + ring.length, 0),
+        0
+      );
+    case "GeometryCollection":
+      return geometry.geometries.reduce((sum, member) => sum + countPositions(member), 0);
+  }
+}
+function GeometrySummary({ value }) {
+  const geometry = parseGeojsonGeometry(value);
+  if (!geometry) {
+    return /* @__PURE__ */ jsx("span", { style: { color: colors.grey700 }, children: "No geometry set" });
+  }
+  if (geometry.type === "Point") {
+    return /* @__PURE__ */ jsx(Chip, { dense: true, children: geometry.type });
+  }
+  const count = geometry.type === "GeometryCollection" ? geometry.geometries.length : countPositions(geometry);
+  const noun = geometry.type === "GeometryCollection" ? count === 1 ? "geometry" : "geometries" : "points";
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(Chip, { dense: true, children: geometry.type }),
+    /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: colors.grey700 }, children: [
+      count,
+      " ",
+      noun
+    ] })
   ] });
 }
+function D2GeoJsonField({ control }) {
+  const { fieldConfig, field, isMandatory, isDisabled } = control;
+  const { validationText, hasError, hasWarning } = resolveFieldValidation(control);
+  const value = field.value;
+  const [isOpen, setIsOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    Field,
+    {
+      label: fieldConfig.label,
+      helpText: fieldConfig.description,
+      warning: hasWarning,
+      error: hasError,
+      required: isMandatory,
+      disabled: isDisabled,
+      validationText,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ jsx(GeometrySummary, { value }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              small: true,
+              disabled: isDisabled,
+              onClick: () => {
+                setIsOpen(true);
+              },
+              children: value ? "Edit geometry" : "Set geometry"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          GeoJsonGeometryModal,
+          {
+            isOpen,
+            value,
+            label: fieldConfig.label,
+            disabled: isDisabled,
+            onCancel: () => {
+              setIsOpen(false);
+            },
+            onUpdate: (next) => {
+              field.onChange(next);
+              field.onBlur();
+              setIsOpen(false);
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 function D2UnsupportedField({ control }) {
   const { fieldConfig, field, widgetKind, isMandatory } = control;
   const { validationText, hasError, hasWarning } = resolveFieldValidation(control);