api ulandi
This commit is contained in:
Samandar Turgunboyev
349
src/pages/employees/ui/EditEmployees.tsx
Normal file
349
src/pages/employees/ui/EditEmployees.tsx
Normal file
@@ -0,0 +1,349 @@
|
||||
import {
|
||||
createEmployees,
|
||||
editEmployees,
|
||||
getDetailEmployees,
|
||||
} from "@/pages/employees/lib/api";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import onlyNumber from "@/shared/lib/onlyNumber";
|
||||
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 { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Loader, X } from "lucide-react";
|
||||
import { useEffect, type Dispatch, type SetStateAction } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import z from "zod";
|
||||
|
||||
const roles = ["buxgalter", "operator"] as const;
|
||||
|
||||
// ✅ Conditional schema - create uchun password majburiy, edit uchun yo'q
|
||||
const createEmployeeSchema = z.object({
|
||||
firstname: z.string().min(2, "Kamida 2 ta belgidan iborat bo'lishi kerak"),
|
||||
lastname: z.string().min(2, "Kamida 2 ta belgidan iborat bo'lishi kerak"),
|
||||
phone: z.string().min(9, "Telefon raqam noto'g'ri"),
|
||||
role: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
password: z
|
||||
.string()
|
||||
.min(6, "Parol kamida 6 ta belgidan iborat bo'lishi kerak"),
|
||||
});
|
||||
|
||||
const editEmployeeSchema = z.object({
|
||||
firstname: z.string().min(2, "Kamida 2 ta belgidan iborat bo'lishi kerak"),
|
||||
lastname: z.string().min(2, "Kamida 2 ta belgidan iborat bo'lishi kerak"),
|
||||
phone: z.string().min(9, "Telefon raqam noto'g'ri"),
|
||||
role: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
});
|
||||
|
||||
type CreateEmployeeFormValues = z.infer<typeof createEmployeeSchema>;
|
||||
type EditEmployeeFormValues = z.infer<typeof editEmployeeSchema>;
|
||||
type EmployeeFormValues = CreateEmployeeFormValues | EditEmployeeFormValues;
|
||||
|
||||
const EditEmployees = ({
|
||||
modalMode,
|
||||
editId,
|
||||
showModal,
|
||||
setEditId,
|
||||
setShowModal,
|
||||
}: {
|
||||
modalMode: "add" | "edit";
|
||||
showModal: boolean;
|
||||
setEditId: Dispatch<SetStateAction<number | null>>;
|
||||
editId: number | null;
|
||||
setShowModal: Dispatch<SetStateAction<boolean>>;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// ✅ Dinamik schema - modalMode'ga qarab
|
||||
const form = useForm<EmployeeFormValues>({
|
||||
resolver: zodResolver(
|
||||
modalMode === "add" ? createEmployeeSchema : editEmployeeSchema,
|
||||
),
|
||||
defaultValues: {
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
phone: "+998",
|
||||
role: "",
|
||||
...(modalMode === "add" && { password: "" }),
|
||||
},
|
||||
});
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ["detail_employees", editId],
|
||||
queryFn: () => getDetailEmployees({ id: editId! }),
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
enabled: !!editId,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data && editId) {
|
||||
form.reset({
|
||||
firstname: data.first_name,
|
||||
lastname: data.last_name,
|
||||
phone: data.phone,
|
||||
role: data.role,
|
||||
});
|
||||
} else if (!editId && showModal) {
|
||||
form.reset({
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
phone: "+998",
|
||||
role: "",
|
||||
...(modalMode === "add" && { password: "" }),
|
||||
});
|
||||
}
|
||||
}, [data, editId, showModal, modalMode]);
|
||||
|
||||
const { mutate: create, isPending } = useMutation({
|
||||
mutationFn: ({
|
||||
body,
|
||||
}: {
|
||||
body: {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
email: string | null;
|
||||
role: "buxgalter" | "operator";
|
||||
password: string;
|
||||
};
|
||||
}) => createEmployees({ body }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["detail_employees"] });
|
||||
queryClient.refetchQueries({ queryKey: ["employees"] });
|
||||
setShowModal(false);
|
||||
setEditId(null);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Xatolik yuz berdi"), {
|
||||
position: "top-center",
|
||||
richColors: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: edit, isPending: editPengding } = useMutation({
|
||||
mutationFn: ({
|
||||
body,
|
||||
id,
|
||||
}: {
|
||||
id: number;
|
||||
body: {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
email: string | null;
|
||||
role: "buxgalter" | "operator";
|
||||
};
|
||||
}) => editEmployees({ id, body }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["detail_employees"] });
|
||||
queryClient.refetchQueries({ queryKey: ["employees"] });
|
||||
setShowModal(false);
|
||||
setEditId(null);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Xatolik yuz berdi"), {
|
||||
position: "top-center",
|
||||
richColors: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit(values: EmployeeFormValues) {
|
||||
if (modalMode === "add" && editId === null) {
|
||||
create({
|
||||
body: {
|
||||
email: null,
|
||||
first_name: values.firstname,
|
||||
last_name: values.lastname,
|
||||
phone: onlyNumber(values.phone),
|
||||
role: values.role as "buxgalter" | "operator",
|
||||
password: (values as CreateEmployeeFormValues).password,
|
||||
},
|
||||
});
|
||||
} else if (modalMode === "edit" && editId !== null) {
|
||||
edit({
|
||||
id: editId,
|
||||
body: {
|
||||
email: null,
|
||||
first_name: values.firstname,
|
||||
last_name: values.lastname,
|
||||
phone: onlyNumber(values.phone),
|
||||
role: values.role as "buxgalter" | "operator",
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-gray-800 rounded-2xl p-8 max-w-md w-full border border-gray-700 shadow-2xl">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-white">
|
||||
{modalMode === "add"
|
||||
? t("Xodim qo'shish")
|
||||
: t("Xodimni tahrirlash")}
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowModal(false);
|
||||
setEditId(null);
|
||||
form.reset();
|
||||
}}
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="firstname"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>{t("Ismi")}</Label>
|
||||
<FormControl>
|
||||
<Input placeholder="Ismi" {...field} className="h-12" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lastname"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>{t("Familiyasi")}</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Familiyasi"
|
||||
{...field}
|
||||
className="h-12"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>{t("Telefon raqami")}</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="+998 90 123 45 67"
|
||||
{...field}
|
||||
value={formatPhone(field.value)}
|
||||
className="h-12"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* ✅ Password field - faqat "add" modeda ko'rinadi */}
|
||||
{modalMode === "add" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>{t("Parol")}</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="••••••"
|
||||
{...field}
|
||||
className="h-12"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="role"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>{t("Role")}</Label>
|
||||
<Select
|
||||
key={field.value}
|
||||
value={field.value}
|
||||
onValueChange={(val) => field.onChange(val)}
|
||||
>
|
||||
<SelectTrigger className="w-full !h-12 cursor-pointer">
|
||||
<SelectValue placeholder={t("Role tanlang")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{roles.map((r) => (
|
||||
<SelectItem key={r} value={r}>
|
||||
{t(r)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 cursor-pointer bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-semibold transition-all shadow-lg"
|
||||
>
|
||||
{isPending || editPengding ? (
|
||||
<Loader className="animate-spin" />
|
||||
) : modalMode === "add" ? (
|
||||
t("Qo'shish")
|
||||
) : (
|
||||
t("Saqlash")
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setEditId(null);
|
||||
setShowModal(false);
|
||||
form.reset();
|
||||
}}
|
||||
className="flex-1 bg-gray-700 cursor-pointer hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-semibold transition-all"
|
||||
>
|
||||
{t("Bekor qilish")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditEmployees;
|
||||
Reference in New Issue
Block a user