api ulandi
This commit is contained in:
Samandar Turgunboyev
@@ -34,7 +34,14 @@ import {
|
||||
} from "@/shared/ui/table";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Loader, Pencil, PlusCircle, Trash2 } from "lucide-react";
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Loader,
|
||||
Pencil,
|
||||
PlusCircle,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@@ -42,21 +49,22 @@ import { toast } from "sonner";
|
||||
import z from "zod";
|
||||
|
||||
const categoryFormSchema = z.object({
|
||||
name: z.string().min(1, { message: "Kategoriya nomi majburiy" }),
|
||||
name_ru: z.string().min(1, { message: "Kategoriya nomi majburiy" }),
|
||||
name: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
name_ru: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
});
|
||||
|
||||
const FaqCategory = () => {
|
||||
const [deleteId, setDeleteId] = useState<number | null>(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [categories, setCategories] = useState<number | null>(null);
|
||||
const queryClient = useQueryClient();
|
||||
const { data: category } = useQuery({
|
||||
queryKey: ["all_faqcategory"],
|
||||
queryKey: ["all_faqcategory", currentPage],
|
||||
queryFn: () => {
|
||||
return getAllFaqCategory({ page: 1, page_size: 99 });
|
||||
return getAllFaqCategory({ page: currentPage, page_size: 10 });
|
||||
},
|
||||
select(data) {
|
||||
return data.data.data.results;
|
||||
return data.data.data;
|
||||
},
|
||||
});
|
||||
const { data: oneCategory } = useQuery({
|
||||
@@ -135,7 +143,7 @@ const FaqCategory = () => {
|
||||
|
||||
useEffect(() => {
|
||||
if (oneCategory && categories) {
|
||||
form.setValue("name", oneCategory.name);
|
||||
form.setValue("name", oneCategory.name_uz);
|
||||
form.setValue("name_ru", oneCategory.name_ru);
|
||||
}
|
||||
}, [oneCategory, categories]);
|
||||
@@ -186,7 +194,7 @@ const FaqCategory = () => {
|
||||
setOpenModal(true);
|
||||
}}
|
||||
>
|
||||
<PlusCircle className="w-4 h-4" /> {t("Yangi kategoriya")}
|
||||
<PlusCircle className="w-4 h-4" /> {t("Qo'shish")}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -196,15 +204,17 @@ const FaqCategory = () => {
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[50px] text-center">#</TableHead>
|
||||
<TableHead>Kategoriya nomi</TableHead>
|
||||
<TableHead>{t("Kategoriya nomi")}</TableHead>
|
||||
{/* <TableHead className="text-center">Savollar soni</TableHead> */}
|
||||
<TableHead className="w-[120px] text-center">Amallar</TableHead>
|
||||
<TableHead className="w-[120px] text-center">
|
||||
{t("Amallar")}
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{category && category.length > 0 ? (
|
||||
category.map((cat, index) => (
|
||||
{category && category.results.length > 0 ? (
|
||||
category.results.map((cat, index) => (
|
||||
<TableRow key={cat.id}>
|
||||
<TableCell className="text-center font-medium">
|
||||
{index + 1}
|
||||
@@ -245,12 +255,48 @@ const FaqCategory = () => {
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
|
||||
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{[...Array(category?.total_pages)].map((_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
className={`px-4 py-2 rounded-lg border transition-all font-medium ${
|
||||
currentPage === i + 1
|
||||
? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
|
||||
: "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
|
||||
}`}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
disabled={currentPage === category?.total_pages}
|
||||
onClick={() =>
|
||||
setCurrentPage((p) =>
|
||||
Math.min(p + 1, category ? category.total_pages : 0),
|
||||
)
|
||||
}
|
||||
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal */}
|
||||
<Dialog open={openModal} onOpenChange={setOpenModal}>
|
||||
<DialogContent className="sm:max-w-[400px] bg-gray-900">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{categories ? "Kategoriyani tahrirlash" : "Yangi kategoriya"}
|
||||
{categories ? t("Tahrirlash") : t("Qo'shish")}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
@@ -261,10 +307,10 @@ const FaqCategory = () => {
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label className="text-md">Kategoriya nomi</Label>
|
||||
<Label className="text-md">{t("Kategoriya nomi")}</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Masalan: umumiy"
|
||||
placeholder={t("Kategoriya nomi")}
|
||||
{...field}
|
||||
className="h-12 bg-gray-800 border-gray-700 text-white"
|
||||
/>
|
||||
@@ -279,10 +325,12 @@ const FaqCategory = () => {
|
||||
name="name_ru"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label className="text-md">Kategoriya nomi (ru)</Label>
|
||||
<Label className="text-md">
|
||||
{t("Kategoriya nomi")} (ru)
|
||||
</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Masalan: umumiy"
|
||||
placeholder={t("Kategoriya nomi") + " (ru)"}
|
||||
{...field}
|
||||
className="h-12 bg-gray-800 border-gray-700 text-white"
|
||||
/>
|
||||
@@ -298,7 +346,7 @@ const FaqCategory = () => {
|
||||
onClick={() => setOpenModal(false)}
|
||||
className="bg-gray-600 hover:bg-gray-700 text-white"
|
||||
>
|
||||
Bekor qilish
|
||||
{t("Bekor qilish")}
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
@@ -307,9 +355,9 @@ const FaqCategory = () => {
|
||||
{createPending || updatePending ? (
|
||||
<Loader className="animate-spin" />
|
||||
) : categories ? (
|
||||
"Saqlash"
|
||||
t("Saqlash")
|
||||
) : (
|
||||
"Qo‘shish"
|
||||
t("Qo‘shish")
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
@@ -322,17 +370,17 @@ const FaqCategory = () => {
|
||||
<Dialog open={!!deleteId} onOpenChange={() => setDeleteId(null)}>
|
||||
<DialogContent className="sm:max-w-[400px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Haqiqatan ham o‘chirmoqchimisiz?</DialogTitle>
|
||||
<DialogTitle>{t("Haqiqatan ham o‘chirmoqchimisiz?")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDeleteId(null)}>
|
||||
Bekor qilish
|
||||
{t("Bekor qilish")}
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={handleDelete}>
|
||||
{deletePending ? (
|
||||
<Loader className="animate-spin" />
|
||||
) : (
|
||||
t("O‘chirish")
|
||||
t("O'chirish")
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
|
||||
Reference in New Issue
Block a user