Update add warehouse form

pjborowiecki · Dec 23, 2023 · 48e79bd · 48e79bd
1 parent 8040743
commit 48e79bd
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 40 deletions.
diff --git a/src/components/forms/inventory/items/add-item-form.tsx b/src/components/forms/inventory/items/add-item-form.tsx
@@ -14,7 +14,6 @@ import { Checkbox } from "@/components/ui/checkbox"
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,

diff --git a/src/components/forms/warehouses/add-warehouse-form.tsx b/src/components/forms/warehouses/add-warehouse-form.tsx
@@ -21,6 +21,14 @@ import {
   FormMessage,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
 import { Icons } from "@/components/icons"
 
@@ -35,9 +43,9 @@ export function AddWarehouseForm(): JSX.Element {
     resolver: zodResolver(addWarehouseSchema),
     defaultValues: {
       name: "",
-      type: "",
-      description: "",
+      type: "branch",
       location: "",
+      description: "",
     },
   })
 
@@ -67,28 +75,70 @@ export function AddWarehouseForm(): JSX.Element {
         className="grid w-full gap-5"
         onSubmit={(...args) => void form.handleSubmit(onSubmit)(...args)}
       >
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem className="w-1/2">
-              <FormLabel>Name</FormLabel>
-              <FormControl>
-                <Input type="text" placeholder="Warehouse name" {...field} />
-              </FormControl>
-              <FormMessage className="pt-2 sm:text-sm" />
-            </FormItem>
-          )}
-        />
+        <div className="grid grid-cols-2 gap-5">
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder="Warehouse name" {...field} />
+                </FormControl>
+                <FormMessage className="pt-2 sm:text-sm" />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="type"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Type</FormLabel>
+                <Select
+                  value={field.value}
+                  onValueChange={(value: typeof field.value) =>
+                    field.onChange(value)
+                  }
+                >
+                  <FormControl>
+                    <SelectTrigger className="capitalize">
+                      <SelectValue placeholder={field.value} />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectGroup>
+                      {Object.values(["branch", "main"]).map((option) => (
+                        <SelectItem
+                          key={option}
+                          value={option}
+                          className="capitalize"
+                        >
+                          {option}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
 
         <FormField
           control={form.control}
-          name="type"
+          name="location"
           render={({ field }) => (
-            <FormItem className="w-1/2">
-              <FormLabel>Type</FormLabel>
+            <FormItem>
+              <FormLabel>Location</FormLabel>
               <FormControl>
-                <Input type="text" placeholder="Warehouse type" {...field} />
+                <Input
+                  type="text"
+                  placeholder="Warehouse location"
+                  {...field}
+                />
               </FormControl>
               <FormMessage className="pt-2 sm:text-sm" />
             </FormItem>
@@ -99,8 +149,8 @@ export function AddWarehouseForm(): JSX.Element {
           control={form.control}
           name="description"
           render={({ field }) => (
-            <FormItem className="w-1/2">
-              <FormLabel>Type</FormLabel>
+            <FormItem>
+              <FormLabel>Name</FormLabel>
               <FormControl>
                 <Textarea
                   placeholder="Warehouse description"
@@ -113,24 +163,6 @@ export function AddWarehouseForm(): JSX.Element {
           )}
         />
 
-        <FormField
-          control={form.control}
-          name="location"
-          render={({ field }) => (
-            <FormItem className="w-1/2">
-              <FormLabel>Type</FormLabel>
-              <FormControl>
-                <Input
-                  type="text"
-                  placeholder="Warehouse location"
-                  {...field}
-                />
-              </FormControl>
-              <FormMessage className="pt-2 sm:text-sm" />
-            </FormItem>
-          )}
-        />
-
         <div className=" flex items-center gap-2 pt-2">
           <Button
             disabled={isPending}