Merge pull request #33 from codegasms/feat/add-select-box-generic-editor

Add support for select box in generic-editor
codegasms · Dec 4, 2024 · c03fbd5 · c03fbd5
2 parents 64aca82 + b92f292
commit c03fbd5
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 13 deletions.
diff --git a/app/[orgId]/books/page.tsx b/app/[orgId]/books/page.tsx
@@ -10,6 +10,7 @@ import { useEffect, useState } from "react";
 const columns: ColumnDef<{ id: string | number } & Book>[] = [
   { header: "Name", accessorKey: "name" as const },
   { header: "Author", accessorKey: "author" as const },
+  { header: "Book Type", accessorKey: "bookType" as const },
   { header: "Pages", accessorKey: "pages" as const },
   { header: "Publication Date", accessorKey: "publicationDate" as const },
   { header: "Copies Available", accessorKey: "copiesAvailable" as const },
@@ -18,6 +19,15 @@ const columns: ColumnDef<{ id: string | number } & Book>[] = [
 const fields: Field[] = [
   { name: "name", label: "Name", type: "text" },
   { name: "author", label: "Author", type: "text" },
+  {
+    name: "bookType",
+    label: "Book Type",
+    type: "select",
+    options: [
+      { value: "Fiction", label: "Fiction" },
+      { value: "Non-Fiction", label: "Non-Fiction" },
+    ],
+  },
   { name: "pages", label: "Pages", type: "number" },
   { name: "publicationDate", label: "Publication Date", type: "date" },
   { name: "copiesAvailable", label: "Copies Available", type: "number" },

diff --git a/mint/books/mockData.ts b/mint/books/mockData.ts
@@ -2,6 +2,7 @@ export interface Book {
   id?: number;
   name: string;
   author: string;
+  bookType: "Fiction" | "Non-Fiction";
   pages: number;
   publicationDate: string;
   copiesAvailable: number;
@@ -12,6 +13,7 @@ export const mockBooks: Book[] = [
     id: 1,
     name: "To Kill a Mockingbird",
     author: "Harper Lee",
+    bookType: "Fiction",
     pages: 281,
     publicationDate: "1960-07-11",
     copiesAvailable: 5,
@@ -20,6 +22,7 @@ export const mockBooks: Book[] = [
     id: 2,
     name: "1984",
     author: "George Orwell",
+    bookType: "Fiction",
     pages: 328,
     publicationDate: "1949-06-08",
     copiesAvailable: 3,
@@ -28,6 +31,7 @@ export const mockBooks: Book[] = [
     id: 3,
     name: "Pride and Prejudice",
     author: "Jane Austen",
+    bookType: "Fiction",
     pages: 432,
     publicationDate: "1813-01-28",
     copiesAvailable: 7,
@@ -36,6 +40,7 @@ export const mockBooks: Book[] = [
     id: 4,
     name: "The Great Gatsby",
     author: "F. Scott Fitzgerald",
+    bookType: "Fiction",
     pages: 180,
     publicationDate: "1925-04-10",
     copiesAvailable: 4,
@@ -44,6 +49,7 @@ export const mockBooks: Book[] = [
     id: 5,
     name: "Moby-Dick",
     author: "Herman Melville",
+    bookType: "Fiction",
     pages: 635,
     publicationDate: "1851-10-18",
     copiesAvailable: 2,

diff --git a/mint/books/schema.ts b/mint/books/schema.ts
@@ -4,6 +4,9 @@ export const bookSchema = z.object({
   id: z.number().optional(),
   name: z.string().min(1, "Book name is required"),
   author: z.string().min(1, "Author name is required"),
+  bookType: z.enum(["Fiction", "Non-Fiction"], {
+    required_error: "Book type is required",
+  }),
   pages: z.number().int().positive("Pages must be a positive number"),
   publicationDate: z
     .string()

diff --git a/mint/generic-editor.tsx b/mint/generic-editor.tsx
@@ -9,14 +9,22 @@ import {
   DialogTitle,
   DialogFooter,
 } from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 export interface Field {
   name: string;
   label: string;
-  type: "text" | "number" | "date";
+  type: "text" | "number" | "date" | "select";
+  options?: { value: string; label: string }[];
 }
 
 interface GenericEditorProps<T> {
@@ -81,18 +89,49 @@ export function GenericEditor<T>({
             {fields.map((field) => (
               <div key={field.name} className="space-y-2">
                 <Label htmlFor={field.name}>{field.label}</Label>
-                <Input
-                  id={field.name}
-                  type={field.type}
-                  {...register(field.name as any, {
-                    valueAsNumber: field.type === "number",
-                  })}
-                  className={
-                    errors[field.name as keyof typeof errors]
-                      ? "border-red-500"
-                      : ""
-                  }
-                />
+                {field.type === "select" && field.options ? (
+                  <Select
+                    onValueChange={(value) => {
+                      const event = {
+                        target: { name: field.name, value },
+                      };
+                      register(field.name as any).onChange(event);
+                    }}
+                    defaultValue={
+                      data?.[field.name as keyof typeof data] as string
+                    }
+                  >
+                    <SelectTrigger
+                      className={
+                        errors[field.name as keyof typeof errors]
+                          ? "border-red-500"
+                          : ""
+                      }
+                    >
+                      <SelectValue placeholder="Select an option" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {field.options.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <Input
+                    id={field.name}
+                    type={field.type}
+                    {...register(field.name as any, {
+                      valueAsNumber: field.type === "number",
+                    })}
+                    className={
+                      errors[field.name as keyof typeof errors]
+                        ? "border-red-500"
+                        : ""
+                    }
+                  />
+                )}
                 {errors[field.name as keyof typeof errors] && (
                   <p className="text-red-500 text-sm">
                     {