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

banner order update

Browse Source
This commit is contained in:
Samandar Turgunboyev
2026-02-10 18:14:52 +05:00
parent bd1cf26c46
commit 287fe8a842
7 changed files with 202 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/features/districts/ui/CategoriesList.tsx
View File

@@ -4,12 +4,14 @@ import FilterCategory from "@/features/districts/ui/Filter";
import TableDistrict from "@/features/districts/ui/TableCategories";
import type { CategoryItem } from "@/features/plans/lib/data";
import Pagination from "@/shared/ui/pagination";
import { useQuery } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
const CategoriesList = () => {
const [currentPage, setCurrentPage] = useState(1);
const queryClient = useQueryClient();
const { data, isLoading, isError } = useQuery({
queryKey: ["categories", currentPage],
@@ -33,6 +35,31 @@ const CategoriesList = () => {
setOpenDelete(true);
};
const { mutate } = useMutation({
mutationFn: ({ body, id }: { id: number; body: FormData }) =>
categories_api.image_upload({ body, id }),
onSuccess() {
toast.success("Banner tartibi o'zgartilidi", {
richColors: true,
position: "top-center",
});
queryClient.refetchQueries({ queryKey: ["categories"] });
},
onError() {
toast.error("Xatolik yuz berdi", {
richColors: true,
position: "top-center",
});
},
});
const handleOrderChange = ({ body, id }: { id: number; body: FormData }) => {
mutate({
body,
id: id,
});
};
return (
<div className="flex flex-col h-full p-10 w-full">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
@@ -42,6 +69,7 @@ const CategoriesList = () => {
</div>
<TableDistrict
handleOrderChange={handleOrderChange}
data={data ? data.results : []}
isError={isError}
dialogOpen={dialogOpen}

70
src/features/districts/ui/TableCategories.tsx
View File

@@ -16,8 +16,8 @@ import {
TableHeader,
TableRow,
} from "@/shared/ui/table";
import { Image, Loader2 } from "lucide-react";
import { useState, type Dispatch, type SetStateAction } from "react";
import { Check, Image, Loader2 } from "lucide-react";
import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
interface Props {
data: CategoryItem[] | [];
@@ -27,6 +27,7 @@ interface Props {
setDialogOpen: Dispatch<SetStateAction<boolean>>;
dialogOpen: boolean;
currentPage: number;
handleOrderChange: ({ body, id }: { id: number; body: FormData }) => void;
}
const TableDistrict = ({
@@ -35,8 +36,35 @@ const TableDistrict = ({
isLoading,
dialogOpen,
setDialogOpen,
handleOrderChange,
}: Props) => {
const [initialValues, setEditing] = useState<CategoryItem>();
const [localOrders, setLocalOrders] = useState<{ [key: number]: number }>({});
useEffect(() => {
const orders = data.reduce(
(acc, item) => {
acc[item.id] = item.order;
return acc;
},
{} as { [key: number]: number },
);
setLocalOrders(orders);
}, [data]);
const onOrderChange = (id: number, value: string) => {
if (value === "") {
// bo'sh inputni ham qabul qilamiz
setLocalOrders((prev) => ({ ...prev, [id]: 0 })); // yoki null ham bo'lishi mumkin
return;
}
const num = parseInt(value, 10);
if (!isNaN(num)) {
setLocalOrders((prev) => ({ ...prev, [id]: num }));
}
};
return (
<div className="flex-1 overflow-auto">
{isLoading && (
@@ -61,7 +89,8 @@ const TableDistrict = ({
<TableRow>
<TableHead>ID</TableHead>
<TableHead>Rasmi</TableHead>
<TableHead>Nomi (uz)</TableHead>
<TableHead>Nomi (uz)</TableHead>{" "}
<TableHead>Tartib raqami</TableHead>
<TableHead>Kategoriya idsi</TableHead>
<TableHead>Turi</TableHead>
<TableHead className="text-right">Harakatlar</TableHead>
@@ -79,10 +108,41 @@ const TableDistrict = ({
className="w-10 h-10 object-cover rounded-md"
/>
</TableCell>
<TableCell>{d.name}</TableCell>
<TableCell>{d.name}</TableCell>{" "}
<TableCell className="font-medium flex items-center gap-2">
<input
type="number"
value={localOrders[d.id] ?? ""}
onChange={(e) => onOrderChange(d.id, e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") {
const formData = new FormData();
formData.append("order", localOrders[d.id].toString());
handleOrderChange({
id: d.id,
body: formData,
});
}
}}
className="w-24 h-10 border rounded px-2"
/>
<Button
size="icon"
variant="outline"
onClick={() => {
const formData = new FormData();
formData.append("order", localOrders[d.id].toString());
handleOrderChange({
id: d.id,
body: formData,
});
}}
>
<Check size={18} />
</Button>
</TableCell>
<TableCell>{d.category_id ? d.category_id : "----"}</TableCell>
<TableCell>{d.type ? d.type : "----"}</TableCell>
<TableCell className="flex gap-2 justify-end">
<Button
variant="outline"

8
src/features/objects/lib/api.ts
View File

@@ -17,10 +17,10 @@ export const banner_api = {
return res;
},
// async update({ body, id }: { id: number; body: ObjectUpdate }) {
// const res = await httpClient.patch(`${API_URLS.OBJECT}${id}/update/`, body);
// return res;
// },
async update({ body, id }: { id: number; body: FormData }) {
const res = await httpClient.patch(`${API_URLS.BannerUpdate(id)}`, body);
return res;
},
async delete(id: string) {
const res = await httpClient.delete(`${API_URLS.BannerDelete(id)}`);

3
src/features/objects/lib/data.ts
View File

@@ -9,6 +9,7 @@ export interface BannersListData {
}
export interface BannerListItem {
id: string;
id: number;
banner: string;
order: number;
}

30
src/features/objects/ui/BannersList.tsx
View File

@@ -4,14 +4,16 @@ import ObjectFilter from "@/features/objects/ui/BannersFilter";
import ObjectTable from "@/features/objects/ui/BannersTable";
import DeleteObject from "@/features/objects/ui/DeleteBanners";
import Pagination from "@/shared/ui/pagination";
import { useQuery } from "@tanstack/react-query";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { toast } from "sonner";
export default function BannersList() {
const [editingPlan, setEditingPlan] = useState<BannerListItem | null>(null);
const [dialogOpen, setDialogOpen] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const limit = 20;
const queryClient = useQueryClient();
const [disricDelete, setDiscritDelete] = useState<BannerListItem | null>(
null,
@@ -39,6 +41,31 @@ export default function BannersList() {
},
});
const { mutate } = useMutation({
mutationFn: ({ body, id }: { id: number; body: FormData }) =>
banner_api.update({ body, id }),
onSuccess() {
toast.success("Banner tartibi o'zgartilidi", {
richColors: true,
position: "top-center",
});
queryClient.refetchQueries({ queryKey: ["banner_list"] });
},
onError() {
toast.error("Xatolik yuz berdi", {
richColors: true,
position: "top-center",
});
},
});
const handleOrderChange = ({ body, id }: { id: number; body: FormData }) => {
mutate({
body,
id: id,
});
};
return (
<div className="flex flex-col h-full p-10 w-full">
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
@@ -52,6 +79,7 @@ export default function BannersList() {
</div>
<ObjectTable
handleOrderChange={handleOrderChange}
filteredData={object ? object.results : []}
handleDelete={handleDelete}
isError={isError}

76
src/features/objects/ui/BannersTable.tsx
View File

@@ -9,8 +9,8 @@ import {
TableHeader,
TableRow,
} from "@/shared/ui/table";
import { Loader2, Trash2 } from "lucide-react";
import type { Dispatch, SetStateAction } from "react";
import { Check, Loader2, Trash2 } from "lucide-react";
import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
interface Props {
filteredData: BannerListItem[] | [];
@@ -19,6 +19,7 @@ interface Props {
handleDelete: (object: BannerListItem) => void;
isLoading: boolean;
isError: boolean;
handleOrderChange: ({ body, id }: { id: number; body: FormData }) => void; // tartib raqamini update qilish uchun
}
const ObjectTable = ({
@@ -26,7 +27,35 @@ const ObjectTable = ({
handleDelete,
isError,
isLoading,
handleOrderChange,
}: Props) => {
// Mahsulotlar tartibini local state orqali boshqaramiz
const [localOrders, setLocalOrders] = useState<{ [key: number]: number }>({});
useEffect(() => {
const orders = filteredData.reduce(
(acc, item) => {
acc[item.id] = item.order;
return acc;
},
{} as { [key: number]: number },
);
setLocalOrders(orders);
}, [filteredData]);
const onOrderChange = (id: number, value: string) => {
if (value === "") {
// bo'sh inputni ham qabul qilamiz
setLocalOrders((prev) => ({ ...prev, [id]: 0 })); // yoki null ham bo'lishi mumkin
return;
}
const num = parseInt(value, 10);
if (!isNaN(num)) {
setLocalOrders((prev) => ({ ...prev, [id]: num }));
}
};
return (
<div className="flex-1 overflow-auto">
{isLoading && (
@@ -44,12 +73,14 @@ const ObjectTable = ({
</span>
</div>
)}
{!isError && !isLoading && (
<Table>
<TableHeader>
<TableRow>
<TableHead>#</TableHead>
<TableHead>Banner</TableHead>
<TableHead>Tartib raqami</TableHead>
<TableHead className="text-right">Amallar</TableHead>
</TableRow>
</TableHeader>
@@ -61,11 +92,48 @@ const ObjectTable = ({
<TableCell className="font-medium">
<img
src={API_URLS.BASE_URL + item.banner}
alt={item.id}
alt={item.id.toString()}
className="w-16 h-16"
/>
</TableCell>
<TableCell className="font-medium flex items-center gap-2">
<input
type="number"
value={localOrders[item.id] ?? ""}
onChange={(e) => onOrderChange(item.id, e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") {
const formData = new FormData();
formData.append(
"order",
localOrders[item.id].toString(),
);
handleOrderChange({
id: item.id,
body: formData,
});
}
}}
className="w-24 h-10 border rounded px-2"
/>
<Button
size="icon"
variant="outline"
onClick={() => {
const formData = new FormData();
formData.append(
"order",
localOrders[item.id].toString(),
);
handleOrderChange({
id: item.id,
body: formData,
});
}}
>
<Check size={18} />
</Button>
</TableCell>
<TableCell className="text-right space-x-2 gap-2">
<Button
variant="destructive"

1
src/shared/config/api/URLs.ts
View File

@@ -15,6 +15,7 @@ export const API_URLS = {
UnitsDelete: (id: string) => `${API_V}admin/unity/${id}/delete/`,
BannersList: `${API_V}admin/banner/list/`,
BannerCreate: `${API_V}admin/banner/create/`,
BannerUpdate: (id: number) => `${API_V}admin/banner/${id}/update/`,
BannerDelete: (id: string) => `${API_V}admin/banner/${id}/delete/`,
OrdersList: `${API_V}admin/order/list/`,
OrdersDelete: (id: string | number) => `${API_V}admin/order/${id}/delete/`,