358 lines
9.9 KiB
TypeScript
358 lines
9.9 KiB
TypeScript
import {
|
||
amenitiesCreate,
|
||
amenitiesUpdate,
|
||
deleteAmenities,
|
||
getDetailAmenities,
|
||
} from "@/pages/tours/lib/api";
|
||
import { AmenitiesColumns } from "@/pages/tours/lib/column";
|
||
import type { AllAmenitiesDataRes } from "@/pages/tours/lib/type";
|
||
import { Button } from "@/shared/ui/button";
|
||
import { Dialog, DialogContent } from "@/shared/ui/dialog";
|
||
import {
|
||
Form,
|
||
FormControl,
|
||
FormField,
|
||
FormItem,
|
||
FormLabel,
|
||
FormMessage,
|
||
} from "@/shared/ui/form";
|
||
import { Input } from "@/shared/ui/input";
|
||
import IconSelect from "@/shared/ui/iocnSelect";
|
||
import { Label } from "@/shared/ui/label";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/shared/ui/table";
|
||
import RealPagination from "@/widgets/real-pagination/ui/RealPagination";
|
||
import { zodResolver } from "@hookform/resolvers/zod";
|
||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||
import {
|
||
flexRender,
|
||
getCoreRowModel,
|
||
useReactTable,
|
||
} from "@tanstack/react-table";
|
||
import { Loader, PlusIcon } from "lucide-react";
|
||
import { useEffect, useState } from "react";
|
||
import { useForm } from "react-hook-form";
|
||
import { useTranslation } from "react-i18next";
|
||
import { toast } from "sonner";
|
||
import z from "zod";
|
||
|
||
const formSchema = z.object({
|
||
name: z.string().min(1, { message: "Majburiy maydon" }),
|
||
name_ru: z.string().min(1, { message: "Majburiy maydon" }),
|
||
icon_name: z.string().min(1, { message: "Majburiy maydon" }),
|
||
});
|
||
|
||
const Amenities = ({
|
||
data,
|
||
page,
|
||
pageSize,
|
||
}: {
|
||
page: number;
|
||
pageSize: number;
|
||
data:
|
||
| {
|
||
links: {
|
||
previous: string;
|
||
next: string;
|
||
};
|
||
total_items: number;
|
||
total_pages: number;
|
||
page_size: number;
|
||
current_page: number;
|
||
results: AllAmenitiesDataRes[];
|
||
}
|
||
| undefined;
|
||
}) => {
|
||
const { t } = useTranslation();
|
||
const [open, setOpen] = useState<boolean>(false);
|
||
const [editId, setEditId] = useState<number | null>(null);
|
||
const queryClient = useQueryClient();
|
||
const [types, setTypes] = useState<"edit" | "create">("create");
|
||
|
||
const handleEdit = (id: number) => {
|
||
setTypes("edit");
|
||
setOpen(true);
|
||
setEditId(id);
|
||
};
|
||
|
||
const { data: badgeDetail } = useQuery({
|
||
queryKey: ["detail_amenities", editId],
|
||
queryFn: () => getDetailAmenities({ id: editId! }),
|
||
enabled: !!editId,
|
||
});
|
||
|
||
const { mutate: deleteMutate } = useMutation({
|
||
mutationFn: ({ id }: { id: number }) => deleteAmenities({ id }),
|
||
onSuccess: () => {
|
||
queryClient.refetchQueries({ queryKey: ["detail_amenities"] });
|
||
queryClient.refetchQueries({ queryKey: ["all_amenities"] });
|
||
setOpen(false);
|
||
form.reset();
|
||
},
|
||
onError: () => {
|
||
toast.error(t("Xatolik yuz berdi"), {
|
||
position: "top-center",
|
||
richColors: true,
|
||
});
|
||
},
|
||
});
|
||
|
||
const handleDelete = (id: number) => {
|
||
deleteMutate({ id });
|
||
};
|
||
|
||
const columns = AmenitiesColumns(handleEdit, handleDelete, t);
|
||
|
||
const { mutate: create, isPending } = useMutation({
|
||
mutationFn: ({
|
||
body,
|
||
}: {
|
||
body: { name: string; name_ru: string; icon_name: string };
|
||
}) => amenitiesCreate({ body }),
|
||
onSuccess: () => {
|
||
queryClient.refetchQueries({ queryKey: ["detail_amenities"] });
|
||
queryClient.refetchQueries({ queryKey: ["all_amenities"] });
|
||
setOpen(false);
|
||
form.reset();
|
||
},
|
||
onError: () => {
|
||
toast.error(t("Xatolik yuz berdi"), {
|
||
position: "top-center",
|
||
richColors: true,
|
||
});
|
||
},
|
||
});
|
||
|
||
const { mutate: update, isPending: updatePending } = useMutation({
|
||
mutationFn: ({
|
||
body,
|
||
id,
|
||
}: {
|
||
id: number;
|
||
body: { name: string; name_ru: string; icon_name: string };
|
||
}) => amenitiesUpdate({ body, id }),
|
||
onSuccess: () => {
|
||
queryClient.refetchQueries({ queryKey: ["detail_amenities"] });
|
||
queryClient.refetchQueries({ queryKey: ["all_amenities"] });
|
||
setOpen(false);
|
||
form.reset();
|
||
},
|
||
onError: () => {
|
||
toast.error(t("Xatolik yuz berdi"), {
|
||
position: "top-center",
|
||
richColors: true,
|
||
});
|
||
},
|
||
});
|
||
|
||
const form = useForm<z.infer<typeof formSchema>>({
|
||
resolver: zodResolver(formSchema),
|
||
defaultValues: {
|
||
name: "",
|
||
name_ru: "",
|
||
},
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (badgeDetail) {
|
||
form.setValue("icon_name", badgeDetail.data.data.icon_name);
|
||
form.setValue("name", badgeDetail.data.data.name_uz);
|
||
form.setValue("name_ru", badgeDetail.data.data.name_ru);
|
||
}
|
||
}, [editId, badgeDetail]);
|
||
|
||
function onSubmit(values: z.infer<typeof formSchema>) {
|
||
if (types === "create") {
|
||
create({
|
||
body: {
|
||
icon_name: values.icon_name,
|
||
name: values.name,
|
||
name_ru: values.name_ru,
|
||
},
|
||
});
|
||
} else if (types === "edit" && editId) {
|
||
update({
|
||
id: editId,
|
||
body: {
|
||
icon_name: values.icon_name,
|
||
name: values.name,
|
||
name_ru: values.name_ru,
|
||
},
|
||
});
|
||
}
|
||
}
|
||
|
||
const table = useReactTable({
|
||
data: data?.results ?? [],
|
||
columns,
|
||
getCoreRowModel: getCoreRowModel(),
|
||
manualPagination: true,
|
||
pageCount: data?.total_pages ?? 0,
|
||
state: {
|
||
pagination: {
|
||
pageIndex: page - 1,
|
||
pageSize: pageSize,
|
||
},
|
||
},
|
||
});
|
||
|
||
return (
|
||
<>
|
||
<div className="flex justify-end">
|
||
<Button
|
||
variant="default"
|
||
onClick={() => {
|
||
setOpen(true);
|
||
setTypes("create");
|
||
form.reset();
|
||
}}
|
||
>
|
||
<PlusIcon className="mr-2" />
|
||
{t("Qo‘shish")}
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="border border-gray-700 rounded-md overflow-hidden mt-4">
|
||
<Table key={data?.current_page}>
|
||
<TableHeader>
|
||
{table.getHeaderGroups().map((headerGroup) => (
|
||
<TableRow key={headerGroup.id}>
|
||
{headerGroup.headers.map((header) => (
|
||
<TableHead key={header.id}>
|
||
{header.isPlaceholder
|
||
? null
|
||
: flexRender(
|
||
header.column.columnDef.header,
|
||
header.getContext(),
|
||
)}
|
||
</TableHead>
|
||
))}
|
||
</TableRow>
|
||
))}
|
||
</TableHeader>
|
||
|
||
<TableBody>
|
||
{table.getRowModel().rows?.length ? (
|
||
table.getRowModel().rows.map((row) => (
|
||
<TableRow key={row.id}>
|
||
{row.getVisibleCells().map((cell) => (
|
||
<TableCell key={cell.id}>
|
||
{flexRender(
|
||
cell.column.columnDef.cell,
|
||
cell.getContext(),
|
||
)}
|
||
</TableCell>
|
||
))}
|
||
</TableRow>
|
||
))
|
||
) : (
|
||
<TableRow>
|
||
<TableCell
|
||
colSpan={columns.length}
|
||
className="h-24 text-center text-gray-400"
|
||
>
|
||
{t("Ma'lumot topilmadi")}
|
||
</TableCell>
|
||
</TableRow>
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
|
||
<RealPagination
|
||
table={table}
|
||
totalPages={data?.total_pages}
|
||
namePage="pageAmenities"
|
||
namePageSize="pageSizeAmenities"
|
||
/>
|
||
|
||
<Dialog open={open} onOpenChange={setOpen}>
|
||
<DialogContent>
|
||
<p className="text-xl">
|
||
{types === "create" ? t("Saqlash") : t("Tahrirlash")}
|
||
</p>
|
||
<Form {...form}>
|
||
<form
|
||
onSubmit={form.handleSubmit(onSubmit)}
|
||
className="space-y-6 p-2"
|
||
>
|
||
<FormField
|
||
control={form.control}
|
||
name="icon_name"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<Label className="text-md">{t("Qulayliklar")}</Label>
|
||
|
||
<div className="flex flex-col gap-4 w-full">
|
||
<IconSelect
|
||
selectedIcon={field.value ?? ""}
|
||
setSelectedIcon={(val: string) => field.onChange(val)}
|
||
/>
|
||
</div>
|
||
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="name"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>{t("Nomi")}</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder={t("Nomi")} {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="name_ru"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>{t("Nomi (ru)")}</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder={t("Nomi (ru)")} {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<div className="flex justify-end gap-4">
|
||
<Button
|
||
type="button"
|
||
onClick={() => setOpen(false)}
|
||
className="border-slate-600 text-white hover:bg-gray-600 bg-gray-600"
|
||
>
|
||
{t("Bekor qilish")}
|
||
</Button>
|
||
<Button type="submit">
|
||
{isPending || updatePending ? (
|
||
<Loader className="animate-spin" />
|
||
) : types === "create" ? (
|
||
t("Saqlash")
|
||
) : (
|
||
t("Tahrirlash")
|
||
)}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
</Form>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Amenities;
|