feat: update all tables on kurator, edit layout, etc
This commit is contained in:
parent
23019ba61d
commit
71bebd3a86
|
|
@ -1,333 +0,0 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import * as React from "react";
|
|
||||||
import {
|
|
||||||
ColumnDef,
|
|
||||||
ColumnFiltersState,
|
|
||||||
PaginationState,
|
|
||||||
SortingState,
|
|
||||||
VisibilityState,
|
|
||||||
flexRender,
|
|
||||||
getCoreRowModel,
|
|
||||||
getFilteredRowModel,
|
|
||||||
getPaginationRowModel,
|
|
||||||
getSortedRowModel,
|
|
||||||
useReactTable,
|
|
||||||
} from "@tanstack/react-table";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from "@/components/ui/table";
|
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
||||||
import {
|
|
||||||
Badge,
|
|
||||||
ChevronLeft,
|
|
||||||
ChevronRight,
|
|
||||||
Eye,
|
|
||||||
MoreVertical,
|
|
||||||
Search,
|
|
||||||
SquarePen,
|
|
||||||
Trash2,
|
|
||||||
TrendingDown,
|
|
||||||
TrendingUp,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from "@/components/ui/dropdown-menu";
|
|
||||||
|
|
||||||
export type CompanyData = {
|
|
||||||
no: number;
|
|
||||||
title: string;
|
|
||||||
category: string;
|
|
||||||
createdAt: string;
|
|
||||||
tags: string;
|
|
||||||
statusName: string;
|
|
||||||
};
|
|
||||||
import { data } from "./data";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
|
|
||||||
import { paginationBlog } from "@/service/blog/blog";
|
|
||||||
|
|
||||||
export const columns: ColumnDef<CompanyData>[] = [
|
|
||||||
{
|
|
||||||
accessorKey: "no",
|
|
||||||
header: "No",
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex items-center gap-5">
|
|
||||||
<div className="flex-1 text-start">
|
|
||||||
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
|
|
||||||
{row.getValue("no")}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "title",
|
|
||||||
header: "Judul",
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<div className="flex items-center gap-5">
|
|
||||||
<div className="flex-1 text-start">
|
|
||||||
<h4 className="text-sm font-medium text-default-600 whitespace-nowrap mb-1">
|
|
||||||
{row.getValue("title")}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "categoryName",
|
|
||||||
header: "Kategori ",
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="whitespace-nowrap">{row.getValue("categoryName")}</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "createdAt",
|
|
||||||
header: "Tanggal Unggah ",
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="whitespace-nowrap">{row.getValue("createdAt")}</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "tags",
|
|
||||||
header: "Tag ",
|
|
||||||
cell: ({ row }) => (
|
|
||||||
<span className="whitespace-nowrap">{row.getValue("tags")}</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
accessorKey: "statusName",
|
|
||||||
header: "Status",
|
|
||||||
cell: ({ row }) => {
|
|
||||||
return (
|
|
||||||
<span className="whitespace-nowrap text-blue-600">
|
|
||||||
{row.getValue("statusName")}
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "actions",
|
|
||||||
accessorKey: "action",
|
|
||||||
header: "Actions",
|
|
||||||
enableHiding: false,
|
|
||||||
cell: ({ row }) => {
|
|
||||||
return (
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<Button
|
|
||||||
size="icon"
|
|
||||||
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
|
||||||
>
|
|
||||||
<span className="sr-only">Open menu</span>
|
|
||||||
<MoreVertical className="h-4 w-4 text-default-800" />
|
|
||||||
</Button>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent className="p-0" align="end">
|
|
||||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
|
||||||
<Eye className="w-4 h-4 me-1.5" />
|
|
||||||
View
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
|
||||||
<SquarePen className="w-4 h-4 me-1.5" />
|
|
||||||
Edit
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem className="p-2 border-b text-destructive bg-destructive/30 focus:bg-destructive focus:text-destructive-foreground rounded-none">
|
|
||||||
<Trash2 className="w-4 h-4 me-1.5" />
|
|
||||||
Delete
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const BlogTable = () => {
|
|
||||||
const [blogTable, setBlogTable] = React.useState<CompanyData[]>([]);
|
|
||||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
|
||||||
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
const [columnVisibility, setColumnVisibility] =
|
|
||||||
React.useState<VisibilityState>({});
|
|
||||||
const [rowSelection, setRowSelection] = React.useState({});
|
|
||||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
|
||||||
pageIndex: 0,
|
|
||||||
pageSize: 10,
|
|
||||||
});
|
|
||||||
const [page, setPage] = React.useState(1);
|
|
||||||
const [totalPage, setTotalPage] = React.useState(1);
|
|
||||||
const [limit, setLimit] = React.useState(10);
|
|
||||||
|
|
||||||
const table = useReactTable({
|
|
||||||
data: blogTable,
|
|
||||||
columns,
|
|
||||||
onSortingChange: setSorting,
|
|
||||||
onColumnFiltersChange: setColumnFilters,
|
|
||||||
getCoreRowModel: getCoreRowModel(),
|
|
||||||
getPaginationRowModel: getPaginationRowModel(),
|
|
||||||
getSortedRowModel: getSortedRowModel(),
|
|
||||||
getFilteredRowModel: getFilteredRowModel(),
|
|
||||||
onColumnVisibilityChange: setColumnVisibility,
|
|
||||||
onRowSelectionChange: setRowSelection,
|
|
||||||
onPaginationChange: setPagination,
|
|
||||||
state: {
|
|
||||||
sorting,
|
|
||||||
columnFilters,
|
|
||||||
columnVisibility,
|
|
||||||
rowSelection,
|
|
||||||
pagination,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
React.useEffect(() => {
|
|
||||||
initState();
|
|
||||||
}, [page, limit]);
|
|
||||||
|
|
||||||
async function initState() {
|
|
||||||
try {
|
|
||||||
const res = await paginationBlog(limit, page);
|
|
||||||
const data = res.data.data.content.map((item: any, index: number) => ({
|
|
||||||
no: (page - 1) * limit + index + 1,
|
|
||||||
title: item.title,
|
|
||||||
categoryName: item.categoryName,
|
|
||||||
tags: item.tags,
|
|
||||||
assignmentType: item.assignmentType?.name || "-",
|
|
||||||
createdAt: item.createdAt,
|
|
||||||
statusName: item.statusName,
|
|
||||||
}));
|
|
||||||
|
|
||||||
setBlogTable(data);
|
|
||||||
setTotalPage(res.data.totalPages);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching tasks:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="w-full overflow-x-auto">
|
|
||||||
<div className="flex justify-between items-center py-4 px-5">
|
|
||||||
<div>
|
|
||||||
<InputGroup merged>
|
|
||||||
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
|
|
||||||
<Search className=" h-4 w-4 dark:text-white" />
|
|
||||||
</InputGroupText>
|
|
||||||
<Input
|
|
||||||
type="text"
|
|
||||||
placeholder="Search Judul..."
|
|
||||||
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white"
|
|
||||||
/>
|
|
||||||
</InputGroup>
|
|
||||||
</div>
|
|
||||||
<div className="flex-none">
|
|
||||||
<Input
|
|
||||||
placeholder="Filter Status..."
|
|
||||||
value={
|
|
||||||
(table.getColumn("status")?.getFilterValue() as string) ?? ""
|
|
||||||
}
|
|
||||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
|
||||||
table.getColumn("status")?.setFilterValue(event.target.value)
|
|
||||||
}
|
|
||||||
className="max-w-sm "
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Table className="overflow-hidden">
|
|
||||||
<TableHeader>
|
|
||||||
{table.getHeaderGroups().map((headerGroup) => (
|
|
||||||
<TableRow key={headerGroup.id} className="bg-default-200">
|
|
||||||
{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}
|
|
||||||
data-state={row.getIsSelected() && "selected"}
|
|
||||||
className="h-[75px]"
|
|
||||||
>
|
|
||||||
{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">
|
|
||||||
No results.
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
<div className="flex items-center justify-end py-4 px-10">
|
|
||||||
<div className="flex-1 text-sm text-muted-foreground">
|
|
||||||
{table.getFilteredSelectedRowModel().rows.length} of{" "}
|
|
||||||
{table.getFilteredRowModel().rows.length} row(s) selected.
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-center py-4 gap-2 flex-none">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => table.previousPage()}
|
|
||||||
disabled={!table.getCanPreviousPage()}
|
|
||||||
className="w-8 h-8"
|
|
||||||
>
|
|
||||||
<ChevronLeft className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
{table.getPageOptions().map((page, pageIndex) => (
|
|
||||||
<Button
|
|
||||||
key={`basic-data-table-${pageIndex}`}
|
|
||||||
onClick={() => table.setPageIndex(pageIndex)}
|
|
||||||
size="icon"
|
|
||||||
className="w-8 h-8"
|
|
||||||
variant={
|
|
||||||
table.getState().pagination.pageIndex === pageIndex
|
|
||||||
? "default"
|
|
||||||
: "outline"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{page + 1}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
onClick={() => table.nextPage()}
|
|
||||||
disabled={!table.getCanNextPage()}
|
|
||||||
className="w-8 h-8"
|
|
||||||
>
|
|
||||||
<ChevronRight className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BlogTable;
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
export const data = [
|
|
||||||
{
|
|
||||||
title: "Ops Mantap Praja & Pilkada 2024",
|
|
||||||
category: "Giat Pimpinan",
|
|
||||||
date: "15/10/2024 9:11",
|
|
||||||
tag: "percobaan",
|
|
||||||
status: "Terkirim",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Seputar Prestasi",
|
|
||||||
status: "Terkirim",
|
|
||||||
category: "Giat Pimpinan",
|
|
||||||
date: "15/10/2024 9:11",
|
|
||||||
tag: "percobaan",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Ops Mantap Praja & Pilkada 2024",
|
|
||||||
status: "Terkirim",
|
|
||||||
category: "Giat Pimpinan",
|
|
||||||
date: "15/10/2024 9:11",
|
|
||||||
tag: "percobaan",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Ops Mantap Praja & Pilkada 2024",
|
|
||||||
status: "Terkirim",
|
|
||||||
category: "Giat Pimpinan",
|
|
||||||
date: "15/10/2024 9:11",
|
|
||||||
tag: "percobaan",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Seputar Prestasi",
|
|
||||||
status: "Terkirim",
|
|
||||||
category: "Giat Pimpinan",
|
|
||||||
date: "15/10/2024 9:11",
|
|
||||||
tag: "percobaan",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Seputar Prestasi",
|
|
||||||
status: "Terkirim",
|
|
||||||
category: "Giat Pimpinan",
|
|
||||||
date: "15/10/2024 9:11",
|
|
||||||
tag: "percobaan",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Seputar Prestasi",
|
|
||||||
status: "Terkirim",
|
|
||||||
category: "Giat Pimpinan",
|
|
||||||
date: "15/10/2024 9:11",
|
|
||||||
tag: "percobaan",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Seputar Prestasi",
|
|
||||||
status: "Terkirim",
|
|
||||||
category: "Giat Pimpinan",
|
|
||||||
date: "15/10/2024 9:11",
|
|
||||||
tag: "percobaan",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Seputar Prestasi",
|
|
||||||
status: "Terkirim",
|
|
||||||
category: "Giat Pimpinan",
|
|
||||||
date: "15/10/2024 9:11",
|
|
||||||
tag: "percobaan",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
import {
|
||||||
|
httpGetInterceptor,
|
||||||
|
httpPostInterceptor,
|
||||||
|
} from "../http-config/http-interceptor-service";
|
||||||
|
|
||||||
|
export async function listContest(size: number, page: number) {
|
||||||
|
return await httpGetInterceptor(
|
||||||
|
`contest/pagination?enablePage=1&size=${size}&page=${page}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function createTask(data: any) {
|
||||||
|
const url = "assignment";
|
||||||
|
return httpPostInterceptor(url, data);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue