Add page to add a single field

.changeset/neat-lands-stay.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-app": minor
+---
+
+Add page to add a field to a farm

.changeset/slick-buses-bow.md

@@ -0,0 +1,5 @@
+---
+"@svenvw/fdm-core": patch
+---
+
+Fix that soil data without sampling date is not excluded

fdm-app/app/components/custom/atlas/atlas-sources.tsx

@@ -37,7 +37,6 @@ export function FieldsSourceSelected({
 
     useEffect(() => {
         function clickOnMap(evt) {
-            console.log("jh")
             if (!map) return
 
             const features = map.queryRenderedFeatures(evt.point, {
@@ -128,10 +127,10 @@ export function FieldsSourceAvailable({
                     if (bounds) {
                         const [[minX, minY], [maxX, maxY]] = bounds.toArray()
                         const bbox = {
-                            minX: 0.9999 * minX,
-                            maxX: 1.0001 * maxX,
-                            minY: 0.9999 * minY,
-                            maxY: 1.0001 * maxY,
+                            minX: 0.9995 * minX,
+                            maxX: 1.0005 * maxX,
+                            minY: 0.9995 * minY,
+                            maxY: 1.0005 * maxY,
                         }
                         try {
                             const iter = deserialize(url, bbox)

fdm-app/app/components/custom/atlas/atlas-styles.tsx

@@ -1,27 +1,47 @@
-import type { LayerProps } from "react-map-gl"
+import type {
+    FillLayerSpecification,
+    LayerProps,
+    SymbolLayerSpecification,
+} from "react-map-gl"
 
-export function getFieldsStyle(layerId: string): LayerProps & {
-    id: string
-    type: string
-    paint: {
-        "fill-color": string
-        "fill-opacity": number
-        "fill-outline-color": string
-    }
-} {
-    const fieldsStyle = {
-        id: layerId,
+export function getFieldsStyle(
+    layerId: string,
+): LayerProps &
+    (
+        | ({
+              id: string
+              type: "fill"
+              paint: FillLayerSpecification["paint"]
+          })
+        | {
+              id: string
+              type: "symbol"
+              layout: SymbolLayerSpecification["layout"]
+              paint: SymbolLayerSpecification["paint"]
+          }
+    ) {
+    const baseFieldsStyle: Omit<FillLayerSpecification, "id" | "source"> = {
         type: "fill",
         paint: {
-            "fill-color": "#93c5fd",
+            "fill-color": "#60a5fa",
             "fill-opacity": 0.5,
             "fill-outline-color": "#1e3a8a",
         },
-    }
+    } as FillLayerSpecification // Cast to FillLayerSpecification to allow modification of paint
+
+    const fieldsStyle = {
+        ...baseFieldsStyle,
+        id: layerId,
+    } as LayerProps & FillLayerSpecification // Cast to FillLayerSpecification to allow modification of paint
 
     if (layerId === "fieldsSelected") {
-        fieldsStyle.paint["fill-color"] = "#fca5a5"
+        fieldsStyle.paint["fill-color"] = "#f43f5e"
         fieldsStyle.paint["fill-opacity"] = 0.8
     }
+    if (layerId === "fieldsSaved") {
+        fieldsStyle.paint["fill-color"] = "#10b981"
+        fieldsStyle.paint["fill-opacity"] = 0.8
+    }
+
     return fieldsStyle
 }

fdm-app/app/components/custom/combobox.tsx

@@ -12,7 +12,6 @@ import {
 import {
     FormControl,
     FormDescription,
-    FormField,
     FormItem,
     FormLabel,
     FormMessage,
@@ -31,22 +30,25 @@ type optionType = {
 
 interface ComboboxProps {
     options: { value: string; label: string }[]
-    form: any
     name: string
     label: ReactNode
     defaultValue?: optionType["value"]
     disabled?: boolean
+    onChange: (value: string) => void
 }
 
 export function Combobox({
     options,
-    form,
     name,
     label,
     defaultValue,
     disabled,
+    onChange
 }: ComboboxProps) {
     const [open, setOpen] = useState(false)
+    const [currentValue, setCurrentValue] = useState<string | undefined>(
+        defaultValue,
+    )
 
     /** Map of option values to their labels for efficient lookup */
     const optionsMap = useMemo(
@@ -67,85 +69,85 @@ export function Combobox({
     )
 
     return (
-        <FormField
-            control={form.control}
-            name={name}
-            disabled={disabled}
-            render={({ field }) => (
-                <FormItem>
-                    <FormLabel>{label}</FormLabel>
-                    <Popover open={open} onOpenChange={setOpen}>
-                        <PopoverTrigger asChild>
-                            <FormControl>
-                                <Button
-                                    variant="outline"
-                                    role="combobox"
-                                    aria-expanded={open}
-                                    name={name}
-                                    disabled={disabled}
-                                    className="w-full justify-between truncate focus-visible:ring-2"
-                                    aria-label={`Selecteer ${options.find((option) => option.value === field.value)?.label || defaultLabel || "Klik om te begin met typen..."}`}
-                                    aria-controls="combobox-options"
-                                    aria-haspopup="listbox"
-                                >
-                                    {options.find(
-                                        (option) =>
-                                            option.value === field.value,
-                                    )?.label ||
-                                        defaultLabel ||
-                                        "Begin met typen..."}
-                                    <ChevronsUpDown className="opacity-50" />
-                                </Button>
-                            </FormControl>
-                        </PopoverTrigger>
-                        <PopoverContent
-                            id="combobox-options"
-                            className="w-full p-0"
+        <FormItem>
+            <FormLabel>{label}</FormLabel>
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>
+                    <FormControl>
+                        <Button
+                            variant="outline"
+                            role="combobox"
+                            aria-expanded={open}
+                            name={name}
+                            disabled={disabled}
+                            className="w-full justify-between truncate focus-visible:ring-2"
+                            aria-label={`Selecteer ${
+                                options.find(
+                                    (option) => option.value === currentValue,
+                                )?.label ||
+                                defaultLabel ||
+                                "Klik om te begin met typen..."
+                            }`}
+                            aria-controls="combobox-options"
+                            aria-haspopup="listbox"
                         >
-                            <Command>
-                                <CommandInput
-                                    placeholder="Begin met typen..."
-                                    className="h-9"
-                                />
-                                <CommandList>
-                                    <CommandEmpty>Niks gevonden</CommandEmpty>
-                                    <CommandGroup>
-                                        {options.map((option: optionType) => (
-                                            <CommandItem
-                                                value={option.label}
-                                                key={option.value}
-                                                disabled={disabled}
-                                                onSelect={() => {
-                                                    form.setValue(
-                                                        name,
-                                                        option.value,
-                                                    )
-                                                    setOpen(false)
-                                                }}
-                                            >
-                                                <p className="text-pretty w-[350px]">
-                                                    {option.label}
-                                                </p>
-                                                <Check
-                                                    className={cn(
-                                                        "ml-auto",
-                                                        option.value ===
-                                                            field.value
-                                                            ? "opacity-100"
-                                                            : "opacity-0",
-                                                    )}
-                                                />
-                                            </CommandItem>
-                                        ))}
-                                    </CommandGroup>
-                                </CommandList>
-                            </Command>
-                        </PopoverContent>
-                    </Popover>
-                    <FormDescription />
-                    <FormMessage />
-                </FormItem>
-            )}
-        />
+                            {options.find(
+                                (option) => option.value === currentValue,
+                            )?.label ||
+                                defaultLabel ||
+                                "Begin met typen..."}
+                            <ChevronsUpDown className="opacity-50" />
+                        </Button>
+                    </FormControl>
+                </PopoverTrigger>
+                <PopoverContent
+                    id="combobox-options"
+                    className="w-full p-0"
+                >
+                    <Command>
+                        <CommandInput
+                            placeholder="Begin met typen..."
+                            className="h-9"
+                        />
+                        <CommandList>
+                            <CommandEmpty>Niks gevonden</CommandEmpty>
+                            <CommandGroup>
+                                {options.map((option: optionType) => (
+                                    <CommandItem
+                                        value={option.label}
+                                        key={option.value}
+                                        disabled={disabled}
+                                        onSelect={() => {
+                                            setCurrentValue(option.value)
+                                            onChange(option.value)
+                                            setOpen(false)
+                                        }}
+                                    >
+                                        <p className="text-pretty w-[350px]">
+                                            {option.label}
+                                        </p>
+                                        <Check
+                                            className={cn(
+                                                "ml-auto",
+                                                option.value === currentValue
+                                                    ? "opacity-100"
+                                                    : "opacity-0",
+                                            )}
+                                        />
+                                    </CommandItem>
+                                ))}
+                            </CommandGroup>
+                        </CommandList>
+                    </Command>
+                </PopoverContent>
+            </Popover>
+            <input
+                type="hidden"
+                name={name}
+                value={currentValue}
+            />
+            <FormDescription />
+            <FormMessage />
+        </FormItem>
     )
-}
+}