feat: fixed combobox see github issuehttps://github.com/shadcn-ui/ui/…

…issues/2944

app/(dashboard)/transaction/page.tsx

@@ -8,12 +8,13 @@ import { TransactionEditDialog } from '@/components/transaction/transaction-edit
 import { TransactionDataTable } from '@/components/transaction/transaction-table';
 
 import { useGetTransactionByAccountId } from '@/features/transaction/user-transaction';
+import { ComboboxDemo } from '@/components/TestComponent';
 
 const TransactionPage = () => {
   const data = useGetTransactionByAccountId({});
   const transaction = data.data?.data || []
 
-  console.log('[TRANSACTION DATA FETCH] : '+ JSON.stringify(transaction))
+  // console.log('[TRANSACTION DATA FETCH] : '+ JSON.stringify(transaction))
 
   return (
     <div className='-mt-16 flex flex-col items-center p-2 bg-slate-50 shadow-xl rounded-lg mx-4 '>
@@ -33,6 +34,10 @@ const TransactionPage = () => {
           title='Edit Transaction'
         />
       </div>
+      {/* Testing combobox Form Component */}
+      <div>
+        <ComboboxDemo />
+      </div>
 
       <div className='container mx-auto py-10 text-center'>
           <TransactionDataTable

components/TestComponent.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+
+const frameworks = [
+  {
+    value: "next.js",
+    label: "Next.js",
+  },
+  {
+    value: "sveltekit",
+    label: "SvelteKit",
+  },
+  {
+    value: "nuxt.js",
+    label: "Nuxt.js",
+  },
+  {
+    value: "remix",
+    label: "Remix",
+  },
+  {
+    value: "astro",
+    label: "Astro",
+  },
+]
+
+export function ComboboxDemo() {
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState("")
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+
+          className="w-[200px] justify-between"
+        >
+          {value
+            ? frameworks.find((framework) => framework.value === value)?.label
+            : "Select framework..."}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command className="">
+          <CommandInput placeholder="Search framework..." />
+          <CommandList>
+          <CommandEmpty>No framework found.</CommandEmpty>
+          <CommandGroup>
+            {frameworks.map((framework) => (
+              <CommandItem
+                key={framework.value}
+                value={framework.value}
+                onSelect={(currentValue) => {
+                  setValue(currentValue === value ? "" : currentValue)
+                  setOpen(false)
+                }}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    value === framework.value ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {framework.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

components/transaction/transaction-form.tsx

@@ -21,23 +21,29 @@ import { Button } from "../ui/button";
 import { InsertTransactionSchema } from "@/types/transaction";
 import { Calendar } from "../ui/calendar";
 import { cn } from "@/lib/utils";
-import { CalendarIcon } from "lucide-react";
+import { CalendarIcon, Check, ChevronsUpDown } from "lucide-react";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command";
 
 
 const formSchema = InsertTransactionSchema.omit({
-  id: true
+  id: true,
 });
 
 type FormValues = z.input<typeof formSchema>;
 
 type TransactionFormPorps = {
     defaultValues?: FormValues;
     onSubmit: (values: FormValues) => void;
+    accountData : {
+      id: string;
+      name: string;
+    }[];
 }
 
 export const TransactionForm = ({
     defaultValues,
     onSubmit,
+    accountData
 }: TransactionFormPorps) => {
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
@@ -81,7 +87,7 @@ export const TransactionForm = ({
             <FormLabel>Payee Name</FormLabel>
             <FormControl>
               <Input 
-                placeholder="$100"
+                placeholder="e.g Rishi"
                 {...field}
               />
             </FormControl>
@@ -135,7 +141,85 @@ export const TransactionForm = ({
             </FormItem>
           )}
         />
-
+        {/* Account Name */}
+        <FormField
+          control={form.control}
+          name="accountId"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Account</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className={cn(
+                        "w-[200px] justify-between",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value
+                        ? accountData.find(
+                            (data) => data.id === field.value
+                          )?.name
+                        : "Select Account"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-[200px] p-0">
+                  <Command>
+                    <CommandInput placeholder="Search Account..." />
+                    <CommandList>
+                      <CommandEmpty>No Account found.</CommandEmpty>
+                      <CommandGroup>
+                        {accountData.map((data) => (
+                          <CommandItem
+                            value={data.name}
+                            key={data.id}
+                            onSelect={() => {
+                              form.setValue("accountId", data.id)
+                            }}
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                data.id === field.value
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                            {data.name}
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        {/* Notes */}
+        <FormField 
+          control={form.control}
+          name="notes"
+          render={ ({field}) => (
+            <FormItem>
+              <FormLabel>Notes</FormLabel>
+              <FormControl>
+                <Input 
+                  placeholder="Get from Safeway"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>This will publicly display your name</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
       <div className="flex justify-center">
         <Button>
             Save Changes

components/transaction/transaction-input.tsx

@@ -18,12 +18,13 @@ import { TransactionForm } from "@/components/transaction/transaction-form";
 
 import { InsertTransactionSchema } from "@/types/transaction";
 
-import { useCreateTransaction } from "@/features/transaction/user-transaction";
+import { useCreateTransaction, useGetTransactionByAccountId } from "@/features/transaction/user-transaction";
+import { useGetAccountByID, useGetAccounts } from "@/features/accounts/api/user-accounts";
 
 
 
 const formSchema = InsertTransactionSchema.omit({
-  id: true
+  id: true,
 })
 
 type TransactionInputDialogProps = {
@@ -37,15 +38,20 @@ export const TransactionInputDialog = ({
   const [open, setOpen] = useState(false);
 
   const mutation = useCreateTransaction();
+  const accountQuery = useGetAccounts();
+
+  console.log("[GET_ALL_ACCOUNT]" + JSON.stringify(accountQuery.data))
 
   // console.log("[RESPONSE] : " + JSON.stringify(response));
   const defaultValues = {
     amount: 0,
     payee: "",
     date: new Date(),
-    accountId: "clz0jfj9z0006vx1s4gyq9aak",
+    accountId: "",
     notes: "",
-    categoryId: "clz0jfxf30007vx1sp8lc9knk",
+    categoryId: "",
+    account: "",
+    category: ""
   }
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -56,7 +62,7 @@ export const TransactionInputDialog = ({
   function onSubmit(values: z.infer<typeof formSchema>) {
     // console.log("in the submit")
     console.log("[TRANSACTION FORM VALUES]"+ JSON.stringify(values));
-    mutation.mutate( values );
+    // mutation.mutate( values );
     form.reset();
     setOpen(false);
   }
@@ -83,7 +89,8 @@ export const TransactionInputDialog = ({
         </DialogHeader>
           <TransactionForm
             defaultValues={defaultValues}
-            onSubmit={onSubmit} 
+            onSubmit={onSubmit}
+            accountData = {accountQuery.data || []} 
 
           />
         </DialogContent>