Add fertilizer application

fdm-app/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog fdm-app
 
+## 0.4.0
+
+### Minor Changes
+
+- bee0e62: Add `FertilizerApplicationsForm` to list, add and delete fertilizer applications
+- 4112897: Remove selection of fertilizers for acquiring but select all fertilizers
+
+### Patch Changes
+
+- Updated dependencies [7af3fda]
+- Updated dependencies [bc4e75f]
+- Updated dependencies [a948c61]
+- Updated dependencies [efa423d]
+- Updated dependencies [b0c001e]
+- Updated dependencies [6ef3d44]
+- Updated dependencies [61da12f]
+- Updated dependencies [5be0abc]
+- Updated dependencies [4189f5d]
+  - @svenvw/fdm-core@0.7.0
+  - @svenvw/fdm-data@1.0.0
+
 ## 0.3.1
 
 ### Patch Changes

fdm-app/app/components/blocks/farm.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { Form } from "react-router";
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useRemixForm, RemixFormProvider } from "remix-hook-form"
@@ -14,7 +13,6 @@ import {
     CardTitle,
 } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
 import {
     FormControl,
     FormDescription,
@@ -23,22 +21,15 @@ import {
     FormLabel,
     FormMessage,
 } from "@/components/ui/form"
-
-import { MultiSelect } from "@/components/custom/multi-select"
 import { LoadingSpinner } from "../custom/loadingspinner";
 
-
 export interface fertilizersListType {
     value: string
     label: string
 }
 
 export interface farmType {
     b_name_farm: string | null
-    b_fertilizers_organic: string[]
-    b_fertilizers_mineral: string[]
-    organicFertilizersList: fertilizersListType[]
-    mineralFertilizersList: fertilizersListType[]
     action: "/app/addfarm/new"
     FormSchema: z.Schema<any>
 }
@@ -49,11 +40,7 @@ export interface farmType {
  * @returns The JSX element representing the farm form.
  */
 export function Farm(props: farmType) {
-    const organicFertilizersList = props.organicFertilizersList
-    const mineralFertilizersList = props.mineralFertilizersList
     const FormSchema = props.FormSchema
-    const [selectedOrganicFertilizers, setOrganicFertilizers] = useState<string[]>(props.b_fertilizers_organic);
-    const [selectedMineralFertilizers, setMineralFertilizers] = useState<string[]>(props.b_fertilizers_mineral);
 
     const form = useRemixForm<z.infer<typeof FormSchema>>({
         mode: "onTouched",
@@ -90,36 +77,9 @@ export function Farm(props: farmType) {
                                                     <FormDescription />
                                                     <FormMessage />
                                                 </FormItem>
-
                                             )}
                                         />
                                     </div>
-                                    <div className="flex flex-col space-y-1.5">
-                                        <Label htmlFor="b_fertilizers_organic">Welke <i>organische</i> meststoffen gebruikt u?</Label>
-                                        <MultiSelect
-                                            options={organicFertilizersList}
-                                            onValueChange={setOrganicFertilizers}
-                                            defaultValue={selectedOrganicFertilizers}
-                                            placeholder="Selecteer meststoffen"
-                                            variant="inverted"
-                                            animation={0}
-                                            maxCount={10}
-                                            name="b_fertilizers_organic"
-                                        />
-                                    </div>
-                                    <div className="flex flex-col space-y-1.5">
-                                        <Label htmlFor="b_fertilizers_mineral">Welke <i>minerale</i> meststoffen gebruikt u?</Label>
-                                        <MultiSelect
-                                            options={mineralFertilizersList}
-                                            onValueChange={setMineralFertilizers}
-                                            defaultValue={selectedMineralFertilizers}
-                                            placeholder="Selecteer meststoffen"
-                                            variant="inverted"
-                                            animation={0}
-                                            maxCount={10}
-                                            name="b_fertilizers_mineral"
-                                        />
-                                    </div>
                                 </div>
                             </CardContent>
                             <CardFooter className="flex justify-between">

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

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { ReactNode, useState } from "react"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -14,6 +14,14 @@ import {
     PopoverContent,
     PopoverTrigger,
 } from "@/components/ui/popover"
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@/components/ui/form"
 import { ChevronsUpDown, Check } from "lucide-react"
 import { cn } from "@/lib/utils"
 
@@ -24,71 +32,76 @@ type optionType = {
 
 interface ComboboxProps {
     options: { value: string, label: string }[]
-    value?: string
-    defaultValue?: string
-    onChange?: (value: string) => void
-    onOpenChange?: (open: boolean) => void
+    form: any
+    name: string
+    label: ReactNode
 }
 
 export function Combobox({
     options,
-    value: controlledValue,
-    defaultValue,
-    onChange,
-    onOpenChange
+    form,
+    name,
+    label
 }: ComboboxProps) {
     const [open, setOpen] = useState(false)
-    const [internalValue, setInternalValue] = useState(defaultValue ?? "")
-
-    const value = controlledValue ?? internalValue
-    const handleValueChange = (newValue: string) => {
-        setInternalValue(newValue)
-        onChange?.(newValue)
-    }
-    const name = "combobox"
 
     return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={open}
-                    name={name}
-                    className="w-full justify-between opacity-50"
-                >
-                    {value || "Begin met typen..."}
-                    <ChevronsUpDown className="opacity-50" />
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent 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
-                                    key={option.value}
-                                    value={option.label}
-                                    onSelect={(currentValue) => {
-                                        setInternalValue(currentValue === value ? "" : currentValue)
-                                        setOpen(false)
-                                    }}
+        <FormField
+            control={form.control}
+            name={name}
+            render={({ field }) => (
+                <FormItem>
+                    <FormLabel>{label}</FormLabel>
+                    <Popover open={open} onOpenChange={setOpen}>
+                        <PopoverTrigger asChild>
+                            <FormControl>
+                                <Button
+                                    variant="outline"
+                                    role="combobox"
+                                    aria-expanded={open}
+                                    name={name}
+                                    className="w-full justify-between"
                                 >
-                                    <p className="text-pretty w-[350px]">{option.label}</p>                                    
-                                    <Check
-                                        className={cn(
-                                            "ml-auto",
-                                            value === option.label ? "opacity-100" : "opacity-0"
-                                        )}
-                                    />
-                                </CommandItem>
-                            ))}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
+                                    {options.find(option => option.value === field.value)?.label || "Begin met typen..."}
+                                    <ChevronsUpDown className="opacity-50" />
+                                </Button>
+                            </FormControl>
+                        </PopoverTrigger>
+                        <PopoverContent 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.value}
+                                                key={option.value}
+                                                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>
+            )}
+        />
     )
 }