[VW-0] frontend fixes before hackathon

src/components/features/devices/Devices.tsx

@@ -37,6 +37,16 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { getImages } from "../images/hooks";
 import { columns } from "./columns";
 import { getDevices, useCreateDevice } from "./hooks";
 import {
@@ -61,12 +71,21 @@ export const DeviceCreateUpdateModal = ({
   setOpen: (open: boolean) => void;
   isUpdate?: boolean;
 }) => {
+  const {
+    data: images,
+    // isPending,
+    // isError,
+    // error,
+  } = useQuery({
+    queryKey: ["images"],
+    queryFn: getImages,
+  });
+
   const onSubmit = (values: DeviceFormValues) => {
-    console.log("onSubmit");
     handleCreate(values);
   };
 
-  const isPending = form.formState.isSubmitting;
+  const isFormPending = form.formState.isSubmitting;
   const verbLabel = isUpdate ? "Update" : "Create";
   const description = isUpdate
     ? "Modify Device fields then press 'Update Device' below when you are finished"
@@ -128,6 +147,40 @@ export const DeviceCreateUpdateModal = ({
                 )}
               />
 
+              <FormField
+                control={form.control}
+                name="image_id"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Image ID</FormLabel>
+                    <FormDescription>
+                      TODO: If no ID is provided a default image may be used
+                    </FormDescription>
+                    <FormControl>
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Select Image" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectGroup>
+                            <SelectLabel>Select Image</SelectLabel>
+                            {images?.map(({ id, name }, index) => (
+                              <SelectItem value={id} key={index}>
+                                {name}
+                              </SelectItem>
+                            ))}
+                          </SelectGroup>
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
               <FormField
                 control={form.control}
                 name="type"
@@ -366,27 +419,6 @@ export const DeviceCreateUpdateModal = ({
                 )}
               />
 
-              <FormField
-                control={form.control}
-                name="image_id"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Image ID</FormLabel>
-                    <FormDescription>
-                      TODO: If no ID is provided a default image may be used
-                    </FormDescription>
-                    <FormControl>
-                      <Input
-                        type="text"
-                        placeholder="e.g. 192.168.0.254"
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
               <FormField
                 control={form.control}
                 name="dhcp"
@@ -521,7 +553,7 @@ export const DeviceCreateUpdateModal = ({
           <DialogClose asChild>
             <Button variant="outline">Cancel</Button>
           </DialogClose>
-          <Button type="submit" form="device-form" disabled={isPending}>
+          <Button type="submit" form="device-form" disabled={isFormPending}>
             {verbLabel} Device
           </Button>
         </DialogFooter>

src/components/features/devices/columns.tsx

@@ -124,9 +124,9 @@ export const columns: ColumnDef<Device>[] = [
           display: data.display,
           image_id: data.image_id,
           dhcp: data.dhcp,
-          mac_address: data.mac_address,
-          ipv4_manual: data.ipv4_manual,
-          gateway: data.gateway,
+          mac_address: data.mac_address ?? undefined,
+          ipv4_manual: data.ipv4_manual ?? undefined,
+          gateway: data.gateway ?? undefined,
           dns_servers: data.dns_servers,
         },
       });