Samandar/simple-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added tour

Browse Source
This commit is contained in:
Samandar Turgunboyev
2025-10-27 12:54:47 +05:00
parent eca7370833
commit a9e99f9755
10 changed files with 405 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

259
src/pages/faq/ui/FaqCategory.tsx
View File

@@ -1,5 +1,12 @@
"use client";
import {
createFaqCategory,
deleteFaqCategory,
getAllFaqCategory,
getDetailFaqCategory,
updateFaqCategory,
} from "@/pages/faq/lib/api";
import { Button } from "@/shared/ui/button";
import {
Dialog,
@@ -26,81 +33,145 @@ import {
TableRow,
} from "@/shared/ui/table";
import { zodResolver } from "@hookform/resolvers/zod";
import { Pencil, PlusCircle, Trash2 } from "lucide-react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Loader, Pencil, PlusCircle, Trash2 } 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";
type FaqCategoryType = {
id: number;
name: string;
faqCount: number;
};
// fakeData: kategoriya + savol soni
const initialCategories: FaqCategoryType[] = [
{ id: 1, name: "umumiy", faqCount: 8 },
{ id: 2, name: "to‘lov", faqCount: 5 },
{ id: 3, name: "hujjatlar", faqCount: 6 },
{ id: 4, name: "sug‘urta", faqCount: 3 },
];
const categoryFormSchema = z.object({
name: z.string().min(1, { message: "Kategoriya nomi majburiy" }),
name_ru: z.string().min(1, { message: "Kategoriya nomi majburiy" }),
});
const FaqCategory = () => {
const { t } = useTranslation();
const [categories, setCategories] =
useState<FaqCategoryType[]>(initialCategories);
const [openModal, setOpenModal] = useState(false);
const [editCategory, setEditCategory] = useState<FaqCategoryType | null>(
null,
);
const [deleteId, setDeleteId] = useState<number | null>(null);
const [categories, setCategories] = useState<number | null>(null);
const queryClient = useQueryClient();
const { data: category } = useQuery({
queryKey: ["all_faqcategory"],
queryFn: () => {
return getAllFaqCategory({ page: 1, page_size: 99 });
},
select(data) {
return data.data.data.results;
},
});
const { data: oneCategory } = useQuery({
queryKey: ["detail_faqcategory", categories],
queryFn: () => {
return getDetailFaqCategory(categories!);
},
select(data) {
return data.data.data;
},
enabled: !!categories,
});
const { mutate: create, isPending: createPending } = useMutation({
mutationFn: (body: { name: string; name_ru: string }) => {
return createFaqCategory(body);
},
onSuccess: () => {
queryClient.refetchQueries({ queryKey: ["all_faqcategory"] });
queryClient.refetchQueries({ queryKey: ["detail_faqcategory"] });
setOpenModal(false);
},
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 };
}) => {
return updateFaqCategory({ body, id });
},
onSuccess: () => {
queryClient.refetchQueries({ queryKey: ["all_faqcategory"] });
queryClient.refetchQueries({ queryKey: ["detail_faqcategory"] });
setOpenModal(false);
setCategories(null);
},
onError: () => {
toast.error(t("Xatolik yuz berdi"), {
position: "top-center",
richColors: true,
});
},
});
const { mutate: deleteCategory, isPending: deletePending } = useMutation({
mutationFn: (id: number) => {
return deleteFaqCategory(id);
},
onSuccess: () => {
queryClient.refetchQueries({ queryKey: ["all_faqcategory"] });
queryClient.refetchQueries({ queryKey: ["detail_faqcategory"] });
setDeleteId(null);
},
onError: () => {
toast.error(t("Xatolik yuz berdi"), {
position: "top-center",
richColors: true,
});
},
});
const { t } = useTranslation();
const [openModal, setOpenModal] = useState(false);
const form = useForm<z.infer<typeof categoryFormSchema>>({
resolver: zodResolver(categoryFormSchema),
defaultValues: { name: "" },
defaultValues: { name: "", name_ru: "" },
});
const onSubmit = (values: z.infer<typeof categoryFormSchema>) => {
if (editCategory) {
setCategories((prev) =>
prev.map((cat) =>
cat.id === editCategory.id ? { ...cat, name: values.name } : cat,
),
);
} else {
const newCategory = {
id: Date.now(),
name: values.name,
faqCount: 0, // yangi kategoriya bo‘lsa 0 ta savol
};
setCategories((prev) => [...prev, newCategory]);
useEffect(() => {
if (oneCategory && categories) {
form.setValue("name", oneCategory.name);
form.setValue("name_ru", oneCategory.name_ru);
}
}, [oneCategory, categories]);
setOpenModal(false);
const onSubmit = (values: z.infer<typeof categoryFormSchema>) => {
if (categories !== null) {
update({
id: categories,
body: {
name: values.name,
name_ru: values.name_ru,
},
});
} else {
create({
name: values.name,
name_ru: values.name_ru,
});
}
};
const handleEdit = (cat: FaqCategoryType) => {
setEditCategory(cat);
form.setValue("name", cat.name);
const handleEdit = (cat: number) => {
setCategories(cat);
setOpenModal(true);
};
const handleDelete = () => {
if (deleteId) {
setCategories((prev) => prev.filter((cat) => cat.id !== deleteId));
setDeleteId(null);
deleteCategory(deleteId);
}
};
useEffect(() => {
if (!openModal) {
form.reset();
setEditCategory(null);
setCategories(null);
}
}, [openModal, form]);
@@ -111,7 +182,7 @@ const FaqCategory = () => {
<Button
className="gap-2"
onClick={() => {
setEditCategory(null);
setCategories(null);
setOpenModal(true);
}}
>
@@ -126,38 +197,50 @@ const FaqCategory = () => {
<TableRow>
<TableHead className="w-[50px] text-center">#</TableHead>
<TableHead>Kategoriya nomi</TableHead>
<TableHead className="text-center">Savollar soni</TableHead>
{/* <TableHead className="text-center">Savollar soni</TableHead> */}
<TableHead className="w-[120px] text-center">Amallar</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{categories.map((cat, index) => (
<TableRow key={cat.id}>
<TableCell className="text-center font-medium">
{index + 1}
</TableCell>
<TableCell className="capitalize font-medium">
{cat.name}
</TableCell>
<TableCell className="text-center">{cat.faqCount}</TableCell>
<TableCell className="flex justify-center gap-2">
<Button
variant="outline"
size="icon"
onClick={() => handleEdit(cat)}
>
<Pencil className="w-4 h-4" />
</Button>
<Button
variant="destructive"
size="icon"
onClick={() => setDeleteId(cat.id)}
>
<Trash2 className="w-4 h-4" />
</Button>
{category && category.length > 0 ? (
category.map((cat, index) => (
<TableRow key={cat.id}>
<TableCell className="text-center font-medium">
{index + 1}
</TableCell>
<TableCell className="capitalize font-medium">
{cat.name}
</TableCell>
{/* <TableCell className="text-center">{cat.questionCount}</TableCell> */}
<TableCell className="flex justify-center gap-2">
<Button
variant="outline"
size="icon"
onClick={() => handleEdit(cat.id)}
>
<Pencil className="w-4 h-4" />
</Button>
<Button
variant="destructive"
size="icon"
onClick={() => setDeleteId(cat.id)}
>
<Trash2 className="w-4 h-4" />
</Button>
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={3}
className="text-center h-32 text-muted-foreground"
>
{t("Hech qanday kategoriya topilmadi")}
</TableCell>
</TableRow>
))}
)}
</TableBody>
</Table>
</div>
@@ -167,7 +250,7 @@ const FaqCategory = () => {
<DialogContent className="sm:max-w-[400px] bg-gray-900">
<DialogHeader>
<DialogTitle>
{editCategory ? "Kategoriyani tahrirlash" : "Yangi kategoriya"}
{categories ? "Kategoriyani tahrirlash" : "Yangi kategoriya"}
</DialogTitle>
</DialogHeader>
@@ -191,6 +274,24 @@ const FaqCategory = () => {
)}
/>
<FormField
control={form.control}
name="name_ru"
render={({ field }) => (
<FormItem>
<Label className="text-md">Kategoriya nomi (ru)</Label>
<FormControl>
<Input
placeholder="Masalan: umumiy"
{...field}
className="h-12 bg-gray-800 border-gray-700 text-white"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<DialogFooter className="flex justify-end gap-3">
<Button
type="button"
@@ -203,7 +304,13 @@ const FaqCategory = () => {
type="submit"
className="bg-blue-600 hover:bg-blue-700 text-white"
>
{editCategory ? "Saqlash" : "Qo‘shish"}
{createPending || updatePending ? (
<Loader className="animate-spin" />
) : categories ? (
"Saqlash"
) : (
"Qo‘shish"
)}
</Button>
</DialogFooter>
</form>
@@ -222,7 +329,11 @@ const FaqCategory = () => {
Bekor qilish
</Button>
<Button variant="destructive" onClick={handleDelete}>
O‘chirish
{deletePending ? (
<Loader className="animate-spin" />
) : (
t("O‘chirish")
)}
</Button>
</DialogFooter>
</DialogContent>