first commit

src/features/plans/ui/AddedPlan.tsx

@@ -0,0 +1,165 @@
+import type { Plan } from "@/features/plans/lib/data";
+import { createPlanFormData } from "@/features/plans/lib/form";
+import { FakeUserList } from "@/features/users/lib/data";
+import { Button } from "@/shared/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/shared/ui/form";
+import { Input } from "@/shared/ui/input";
+import { Label } from "@/shared/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/ui/select";
+import { Textarea } from "@/shared/ui/textarea";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import z from "zod";
+
+interface Props {
+  initialValues?: Plan | null;
+  setDialogOpen: (open: boolean) => void;
+  setPlans: React.Dispatch<React.SetStateAction<Plan[]>>;
+}
+
+const AddedPlan = ({ initialValues, setDialogOpen, setPlans }: Props) => {
+  const [load, setLoad] = useState(false);
+  const form = useForm<z.infer<typeof createPlanFormData>>({
+    resolver: zodResolver(createPlanFormData),
+    defaultValues: {
+      name: initialValues?.name || "",
+      description: initialValues?.description || "",
+      user: initialValues ? String(initialValues.user.id) : "",
+    },
+  });
+
+  function onSubmit(data: z.infer<typeof createPlanFormData>) {
+    setLoad(true);
+    if (initialValues) {
+      setTimeout(() => {
+        setPlans((prev) =>
+          prev.map((plan) =>
+            plan.id === initialValues.id
+              ? {
+                  ...plan,
+                  ...data,
+                  user: FakeUserList.find((u) => u.id === Number(data.user))!, // user obyekt
+                }
+              : plan,
+          ),
+        );
+        setLoad(false);
+        setDialogOpen(false);
+      }, 2000);
+    } else {
+      setTimeout(() => {
+        setPlans((prev) => [
+          ...prev,
+          {
+            id: prev.length ? prev[prev.length - 1].id + 1 : 1,
+            name: data.name,
+            description: data.description,
+            user: FakeUserList.find((u) => u.id === Number(data.user))!, // user obyekt
+            status: "Bajarilmagan",
+            createdAt: new Date(),
+          },
+        ]);
+        setLoad(false);
+        setDialogOpen(false);
+      }, 2000);
+    }
+  }
+
+  return (
+    <div className="mt-2">
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <FormField
+            name="user"
+            control={form.control}
+            render={({ field }) => (
+              <FormItem>
+                <Label className="text-md">Kimga tegishli</Label>
+                <FormControl>
+                  <Select value={field.value} onValueChange={field.onChange}>
+                    <SelectTrigger className="w-full !h-12">
+                      <SelectValue placeholder="foydalanuvchi" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {FakeUserList.map((e) => (
+                        <SelectItem value={String(e.id)}>
+                          {e.firstName} {e.lastName}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <Label className="text-md">Reja nomi</Label>
+                <FormControl>
+                  <Input
+                    placeholder="Reja nomi"
+                    className="h-12 !text-md"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="description"
+            render={({ field }) => (
+              <FormItem>
+                <Label className="text-md">Reja tavsifi</Label>
+                <FormControl>
+                  <Textarea
+                    placeholder="Reja tavsifi"
+                    className="min-h-32 max-h-52 !text-md"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Button
+            className="w-full h-12 text-lg rounded-lg bg-blue-600 hover:bg-blue-600 cursor-pointer"
+            disabled={load}
+          >
+            {load ? (
+              <Loader2 className="animate-spin" />
+            ) : initialValues ? (
+              "Tahrirlash"
+            ) : (
+              "Saqlash"
+            )}
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+};
+
+export default AddedPlan;