javascript - Send client side data to Prisma - Stack Overflow

admin管理员组

文章数量:1122855

import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";

import * as z from "zod";
import { FormDataSchema } from "~/lib/schema";
import { zodResolver } from "@hookform/resolvers/zod";
import { Label } from "./ui/label";
import { Input } from "./ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./ui/select";
import { Button } from "./ui/button";
import prisma from "~/utils/db";
import { useForm } from "react-hook-form";
import { FormControl, FormField, FormItem } from "./ui/form";
import { createTask } from "~/utils/tasks";
import { ActionFunction, ActionFunctionArgs } from "@remix-run/node";
import { Form } from "@remix-run/react";

interface MultipartFormProps {
  citiesOption: string[];
  citiesWithUsers: Record<
    string,
    { id: string; firstName: string; lastName: string }[]
  >;
}

export default function MultipartForm({
  citiesOption,
  citiesWithUsers,
}: MultipartFormProps) {
  const form = useForm<z.infer<typeof FormDataSchema>>({
    resolver: zodResolver(FormDataSchema),
    defaultValues: {
      vehicleNumber: "",
      ownerName: "",
      ownerPhone: "",
      selectCities: "",
      selectEmployee: "",
    },
  });

  const cities = citiesOption;

  // Convert citiesWithUsers object into an array of users
  const selectedCity = form.watch("selectCities");
  const availableEmployees = selectedCity
    ? citiesWithUsers[selectedCity] || []
    : [];

  const onSubmit = (data)=>{
    console.log(data);
    
  }

  return (
    <div>
      <Card className="w-[400px] mx-auto">
        <CardHeader>
          <CardTitle>Vehicle Registration Form</CardTitle>
        </CardHeader>
        <CardContent>
          <Form {...form}>
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
              <FormField
                name="vehicleNumber"
                control={form.control}
                render={({ field }) => (
                  <FormControl>
                    <FormItem>
                      <div className="space-y-2">
                        <Label htmlFor="vehicleNumber">Vehicle Number</Label>
                        <Input {...field} id="vehicleNumber" />
                      </div>
                    </FormItem>
                  </FormControl>
                )}
              />
              <FormField
                name="ownerName"
                control={form.control}
                render={({ field }) => (
                  <FormControl>
                    <FormItem>
                      <div className="space-y-2">
                        <Label htmlFor="ownerName">Owner Name</Label>
                        <Input {...field} id="ownerName" />
                      </div>
                    </FormItem>
                  </FormControl>
                )}
              />
              <FormField
                name="ownerPhone"
                control={form.control}
                render={({ field }) => (
                  <FormControl>
                    <FormItem>
                      <div className="space-y-2">
                        <Label htmlFor="ownerPhone">Owner Phone</Label>
                        <Input {...field} id="ownerPhone" type="tel" />
                      </div>
                    </FormItem>
                  </FormControl>
                )}
              />
              <FormField
                name="selectCities"
                control={form.control}
                render={({ field }) => (
                  <FormControl>
                    <FormItem>
                      <div className="space-y-2">
                        <Label htmlFor="selectCities">Working City</Label>
                        <Select
                          value={field.value}
                          onValueChange={field.onChange}
                        >
                          <SelectTrigger>
                            <SelectValue
                              placeholder="Select a city"
                              defaultValue={field.value}
                            />
                          </SelectTrigger>
                          <SelectContent>
                            {cities.map((city) => (
                              <SelectItem key={city} value={city}>
                                {city}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </FormItem>
                  </FormControl>
                )}
              />
              <FormField
                name="selectEmployee"
                control={form.control}
                render={({ field }) => (
                  <FormControl>
                    <FormItem>
                      <div className="space-y-2">
                        <Label htmlFor="selectEmployee">Employee</Label>
                        <Select
                          value={field.value}
                          onValueChange={(value) => field.onChange(value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select employee" />
                          </SelectTrigger>
                          <SelectContent>
                            {availableEmployees.map((employee) => (
                              <SelectItem key={employee.id} value={employee.id}>
                                {employee.firstName} {employee.lastName}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </FormItem>
                  </FormControl>
                )}
              />
              <Button type="submit">
                Submit
              </Button>
            </form>
          </Form>
        </CardContent>
      </Card>
    </div>
  );
}


export async function action({request}: ActionFunctionArgs){
  
}

Here the onSubmit function is used to pass the data. The problem is I can not use Prisma in the client component.

There is a form.watch which is used from react-hook-form so I can watch the value user selected from the dropdown and based on that display the employees under that city.

Please help me send this to data from onSubmit function to the action in remix, so I can use prisma to create a new task in my database.

本文标签： javascriptSend client side data to PrismaStack Overflow