mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:update bahasa,filter limit table

This commit is contained in:
Anang Yusman 2025-04-03 23:43:04 +08:00
parent 64fade6fa7
commit fc2b67cecd
20 changed files with 643 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/[locale]/(protected)/admin/settings/category/component/create.tsx
View File

@ -243,7 +243,10 @@ export default function CreateCategoryModal() {
{t("add-category")} {t("add-category")}
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent size="md"> <DialogContent
size="md"
className="sm:h-[300px] md:h-[300px] lg:h-[500px] overflow-y-auto"
>
<DialogHeader> <DialogHeader>
<DialogTitle> {t("add-category")}</DialogTitle> <DialogTitle> {t("add-category")}</DialogTitle>
</DialogHeader> </DialogHeader>

39
app/[locale]/(protected)/contributor/blog/components/blog-table.tsx
View File

@ -38,6 +38,8 @@ import {
DropdownMenu, DropdownMenu,
DropdownMenuCheckboxItem, DropdownMenuCheckboxItem,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
@ -60,9 +62,10 @@ const BlogTable = () => {
const [columnVisibility, setColumnVisibility] = const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({}); React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [pagination, setPagination] = React.useState<PaginationState>({ const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
pageSize: 10, pageSize: Number(showData),
}); });
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1);
@ -106,12 +109,12 @@ const BlogTable = () => {
React.useEffect(() => { React.useEffect(() => {
fetchData(); fetchData();
getCategories(); getCategories();
}, [categoryFilter, statusFilter, page, limit, search]); }, [categoryFilter, statusFilter, page, showData, search]);
async function fetchData() { async function fetchData() {
try { try {
const res = await paginationBlog( const res = await paginationBlog(
limit, showData,
page - 1, page - 1,
search, search,
categoryFilter, categoryFilter,
@ -120,7 +123,7 @@ const BlogTable = () => {
const data = res?.data?.data; const data = res?.data?.data;
const contentData = data?.content; const contentData = data?.content;
contentData.forEach((item: any, index: number) => { contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * limit + index + 1; item.no = (page - 1) * Number(showData) + index + 1;
}); });
console.log("contentData : ", contentData); console.log("contentData : ", contentData);
@ -210,6 +213,34 @@ const BlogTable = () => {
</div> </div>
<div className="flex flex-row items-center gap-3"> <div className="flex flex-row items-center gap-3">
<div className="flex items-center py-4"> <div className="flex items-center py-4">
<div className="mx-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="md" variant="outline">
1 - {showData} Data
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 text-sm">
<DropdownMenuRadioGroup
value={showData}
onValueChange={setShowData}
>
<DropdownMenuRadioItem value="10">
1 - 10 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="50">
1 - 50 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="100">
1 - 100 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="250">
1 - 250 Data
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" className="ml-auto" size="md"> <Button variant="outline" className="ml-auto" size="md">

47
app/[locale]/(protected)/contributor/content/audio/components/table-audio.tsx
View File

@ -43,6 +43,8 @@ import {
DropdownMenuCheckboxItem, DropdownMenuCheckboxItem,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@ -76,9 +78,10 @@ const TableAudio = () => {
const [columnVisibility, setColumnVisibility] = const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({}); React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [pagination, setPagination] = React.useState<PaginationState>({ const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
pageSize: 10, pageSize: Number(showData),
}); });
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1);
@ -132,7 +135,15 @@ const TableAudio = () => {
React.useEffect(() => { React.useEffect(() => {
fetchData(); fetchData();
getCategories(); getCategories();
}, [categoryFilter, statusFilter, page, limit, search, startDate, endDate]); }, [
categoryFilter,
statusFilter,
page,
showData,
search,
startDate,
endDate,
]);
async function getCategories() { async function getCategories() {
const category = await listEnableCategory("4"); const category = await listEnableCategory("4");
@ -171,7 +182,7 @@ const TableAudio = () => {
try { try {
const isForSelf = Number(roleId) === 4; const isForSelf = Number(roleId) === 4;
const res = await listDataAudio( const res = await listDataAudio(
limit, showData,
page - 1, page - 1,
isForSelf, isForSelf,
!isForSelf, !isForSelf,
@ -189,7 +200,7 @@ const TableAudio = () => {
const data = res?.data?.data; const data = res?.data?.data;
const contentData = data?.content; const contentData = data?.content;
contentData.forEach((item: any, index: number) => { contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * limit + index + 1; item.no = (page - 1) * Number(showData) + index + 1;
}); });
setDataTable(contentData); setDataTable(contentData);
@ -248,6 +259,34 @@ const TableAudio = () => {
</div> </div>
<div className="flex flex-row items-center gap-3"> <div className="flex flex-row items-center gap-3">
<div className="flex items-center py-4"> <div className="flex items-center py-4">
<div className="mx-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="md" variant="outline">
1 - {showData} Data
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 text-sm">
<DropdownMenuRadioGroup
value={showData}
onValueChange={setShowData}
>
<DropdownMenuRadioItem value="10">
1 - 10 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="50">
1 - 50 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="100">
1 - 100 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="250">
1 - 250 Data
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" className="ml-auto" size="md"> <Button variant="outline" className="ml-auto" size="md">

50
app/[locale]/(protected)/contributor/content/image/components/table-image.tsx
View File

@ -43,6 +43,8 @@ import {
DropdownMenuCheckboxItem, DropdownMenuCheckboxItem,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@ -81,13 +83,13 @@ const TableImage = () => {
const [columnVisibility, setColumnVisibility] = const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({}); React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [pagination, setPagination] = React.useState<PaginationState>({ const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
pageSize: 10, pageSize: Number(showData),
}); });
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1);
const [limit, setLimit] = React.useState(10);
const [search, setSearch] = React.useState(""); const [search, setSearch] = React.useState("");
const userId = getCookiesDecrypt("uie"); const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie"); const userLevelId = getCookiesDecrypt("ulie");
@ -96,6 +98,7 @@ const TableImage = () => {
const [selectedCategories, setSelectedCategories] = React.useState<number[]>( const [selectedCategories, setSelectedCategories] = React.useState<number[]>(
[] []
); );
const [categoryFilter, setCategoryFilter] = React.useState<string>(""); const [categoryFilter, setCategoryFilter] = React.useState<string>("");
const [statusFilter, setStatusFilter] = React.useState<any[]>([]); const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
const [startDate, setStartDate] = React.useState(""); const [startDate, setStartDate] = React.useState("");
@ -135,10 +138,17 @@ const TableImage = () => {
}, [searchParams]); }, [searchParams]);
React.useEffect(() => { React.useEffect(() => {
// Panggil fetchData saat filter kategori berubah
fetchData(); fetchData();
getCategories(); getCategories();
}, [categoryFilter, statusFilter, page, limit, search, startDate, endDate]); }, [
categoryFilter,
statusFilter,
page,
showData,
search,
startDate,
endDate,
]);
async function getCategories() { async function getCategories() {
const category = await listEnableCategory("1"); const category = await listEnableCategory("1");
@ -177,7 +187,7 @@ const TableImage = () => {
try { try {
const isForSelf = Number(roleId) === 4; const isForSelf = Number(roleId) === 4;
const res = await listDataImage( const res = await listDataImage(
limit, showData,
page - 1, page - 1,
isForSelf, isForSelf,
!isForSelf, !isForSelf,
@ -195,7 +205,7 @@ const TableImage = () => {
const data = res?.data?.data; const data = res?.data?.data;
const contentData = data?.content; const contentData = data?.content;
contentData.forEach((item: any, index: number) => { contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * limit + index + 1; item.no = (page - 1) * Number(showData) + index + 1;
}); });
setDataTable(contentData); setDataTable(contentData);
@ -254,6 +264,34 @@ const TableImage = () => {
</div> </div>
<div className="flex flex-row items-center gap-3"> <div className="flex flex-row items-center gap-3">
<div className="flex items-center py-4"> <div className="flex items-center py-4">
<div className="mx-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="md" variant="outline">
1 - {showData} Data
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 text-sm">
<DropdownMenuRadioGroup
value={showData}
onValueChange={setShowData}
>
<DropdownMenuRadioItem value="10">
1 - 10 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="50">
1 - 50 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="100">
1 - 100 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="250">
1 - 250 Data
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" className="ml-auto" size="md"> <Button variant="outline" className="ml-auto" size="md">

47
app/[locale]/(protected)/contributor/content/teks/components/table-teks.tsx
View File

@ -43,6 +43,8 @@ import {
DropdownMenuCheckboxItem, DropdownMenuCheckboxItem,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@ -75,9 +77,10 @@ const TableTeks = () => {
const [columnVisibility, setColumnVisibility] = const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({}); React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [pagination, setPagination] = React.useState<PaginationState>({ const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
pageSize: 10, pageSize: Number(showData),
}); });
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1);
@ -131,7 +134,15 @@ const TableTeks = () => {
React.useEffect(() => { React.useEffect(() => {
fetchData(); fetchData();
getCategories(); getCategories();
}, [categoryFilter, statusFilter, page, limit, search, startDate, endDate]); }, [
categoryFilter,
statusFilter,
page,
showData,
search,
startDate,
endDate,
]);
async function getCategories() { async function getCategories() {
const category = await listEnableCategory("3"); const category = await listEnableCategory("3");
@ -170,7 +181,7 @@ const TableTeks = () => {
try { try {
const isForSelf = Number(roleId) === 4; const isForSelf = Number(roleId) === 4;
const res = await listDataTeks( const res = await listDataTeks(
limit, showData,
page - 1, page - 1,
isForSelf, isForSelf,
!isForSelf, !isForSelf,
@ -188,7 +199,7 @@ const TableTeks = () => {
const data = res?.data?.data; const data = res?.data?.data;
const contentData = data?.content; const contentData = data?.content;
contentData.forEach((item: any, index: number) => { contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * limit + index + 1; item.no = (page - 1) * Number(showData) + index + 1;
}); });
setDataTable(contentData); setDataTable(contentData);
@ -247,6 +258,34 @@ const TableTeks = () => {
</div> </div>
<div className="flex flex-row items-center gap-3"> <div className="flex flex-row items-center gap-3">
<div className="flex items-center py-4"> <div className="flex items-center py-4">
<div className="mx-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="md" variant="outline">
1 - {showData} Data
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 text-sm">
<DropdownMenuRadioGroup
value={showData}
onValueChange={setShowData}
>
<DropdownMenuRadioItem value="10">
1 - 10 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="50">
1 - 50 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="100">
1 - 100 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="250">
1 - 250 Data
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" className="ml-auto" size="md"> <Button variant="outline" className="ml-auto" size="md">

48
app/[locale]/(protected)/contributor/content/video/components/table-video.tsx
View File

@ -43,6 +43,8 @@ import {
DropdownMenuCheckboxItem, DropdownMenuCheckboxItem,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@ -75,9 +77,10 @@ const TableVideo = () => {
const [columnVisibility, setColumnVisibility] = const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({}); React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [pagination, setPagination] = React.useState<PaginationState>({ const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
pageSize: 10, pageSize: Number(showData),
}); });
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1);
@ -131,7 +134,16 @@ const TableVideo = () => {
React.useEffect(() => { React.useEffect(() => {
fetchData(); fetchData();
getCategories(); getCategories();
}, [categoryFilter, statusFilter, page, limit, search, startDate, endDate]); }, [
categoryFilter,
statusFilter,
page,
showData,
,
search,
startDate,
endDate,
]);
async function getCategories() { async function getCategories() {
const category = await listEnableCategory("2"); const category = await listEnableCategory("2");
@ -170,7 +182,7 @@ const TableVideo = () => {
try { try {
const isForSelf = Number(roleId) === 4; const isForSelf = Number(roleId) === 4;
const res = await listDataVideo( const res = await listDataVideo(
limit, showData,
page - 1, page - 1,
isForSelf, isForSelf,
!isForSelf, !isForSelf,
@ -188,7 +200,7 @@ const TableVideo = () => {
const data = res?.data?.data; const data = res?.data?.data;
const contentData = data?.content; const contentData = data?.content;
contentData.forEach((item: any, index: number) => { contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * limit + index + 1; item.no = (page - 1) * Number(showData) + index + 1;
}); });
setDataTable(contentData); setDataTable(contentData);
@ -248,6 +260,34 @@ const TableVideo = () => {
<div className="flex flex-row items-center gap-3"> <div className="flex flex-row items-center gap-3">
<div className="flex items-center py-4"> <div className="flex items-center py-4">
<div className="mx-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="md" variant="outline">
1 - {showData} Data
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 text-sm">
<DropdownMenuRadioGroup
value={showData}
onValueChange={setShowData}
>
<DropdownMenuRadioItem value="10">
1 - 10 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="50">
1 - 50 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="100">
1 - 100 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="250">
1 - 250 Data
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="outline" className="ml-auto" size="md"> <Button variant="outline" className="ml-auto" size="md">

46
app/[locale]/(protected)/contributor/schedule/event/components/event-table.tsx
View File

@ -34,6 +34,13 @@ import { CardHeader, CardTitle } from "@/components/ui/card";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import useTableColumns from "./columns"; import useTableColumns from "./columns";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
const EventTable = () => { const EventTable = () => {
const router = useRouter(); const router = useRouter();
@ -48,9 +55,10 @@ const EventTable = () => {
const [columnVisibility, setColumnVisibility] = const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({}); React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [pagination, setPagination] = React.useState<PaginationState>({ const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
pageSize: 10, pageSize: Number(showData),
}); });
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1);
@ -87,15 +95,15 @@ const EventTable = () => {
React.useEffect(() => { React.useEffect(() => {
fetchData(); fetchData();
}, [page, limit, search]); }, [page, showData, search]);
async function fetchData() { async function fetchData() {
try { try {
const res = await paginationSchedule(limit, page - 1, 2, search); const res = await paginationSchedule(showData, page - 1, 2, search);
const data = res?.data?.data; const data = res?.data?.data;
const contentData = data?.content; const contentData = data?.content;
contentData.forEach((item: any, index: number) => { contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * limit + index + 1; item.no = (page - 1) * Number(showData) + index + 1;
}); });
console.log("contentData : ", contentData); console.log("contentData : ", contentData);
@ -148,6 +156,35 @@ const EventTable = () => {
/> />
</InputGroup> </InputGroup>
</div> </div>
<div className="flex flex-row">
<div className="mx-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="md" variant="outline">
1 - {showData} Data
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 text-sm">
<DropdownMenuRadioGroup
value={showData}
onValueChange={setShowData}
>
<DropdownMenuRadioItem value="10">
1 - 10 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="50">
1 - 50 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="100">
1 - 100 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="250">
1 - 250 Data
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="w-[150px] md:w-[250px] lg:w-[250px]"> <div className="w-[150px] md:w-[250px] lg:w-[250px]">
<Input <Input
placeholder="Filter Status..." placeholder="Filter Status..."
@ -161,6 +198,7 @@ const EventTable = () => {
/> />
</div> </div>
</div> </div>
</div>
<Table className="overflow-hidden mt-3"> <Table className="overflow-hidden mt-3">
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (

46
app/[locale]/(protected)/contributor/schedule/press-conference/components/presscon-table.tsx
View File

@ -47,6 +47,13 @@ import { CardHeader, CardTitle } from "@/components/ui/card";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import useTableColumns from "./columns"; import useTableColumns from "./columns";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
const PressConferenceTable = () => { const PressConferenceTable = () => {
const router = useRouter(); const router = useRouter();
@ -61,9 +68,10 @@ const PressConferenceTable = () => {
const [columnVisibility, setColumnVisibility] = const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({}); React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [pagination, setPagination] = React.useState<PaginationState>({ const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
pageSize: 10, pageSize: Number(showData),
}); });
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1);
@ -100,15 +108,15 @@ const PressConferenceTable = () => {
React.useEffect(() => { React.useEffect(() => {
fetchData(); fetchData();
}, [page, limit, search]); }, [page, showData, search]);
async function fetchData() { async function fetchData() {
try { try {
const res = await paginationSchedule(limit, page - 1, 1, search); const res = await paginationSchedule(showData, page - 1, 1, search);
const data = res?.data?.data; const data = res?.data?.data;
const contentData = data?.content; const contentData = data?.content;
contentData.forEach((item: any, index: number) => { contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * limit + index + 1; item.no = (page - 1) * Number(showData) + index + 1;
}); });
console.log("contentData : ", contentData); console.log("contentData : ", contentData);
@ -161,6 +169,35 @@ const PressConferenceTable = () => {
/> />
</InputGroup> </InputGroup>
</div> </div>
<div className="flex flex-row gap-3">
<div className="mx-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="md" variant="outline">
1 - {showData} Data
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 text-sm">
<DropdownMenuRadioGroup
value={showData}
onValueChange={setShowData}
>
<DropdownMenuRadioItem value="10">
1 - 10 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="50">
1 - 50 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="100">
1 - 100 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="250">
1 - 250 Data
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="w-[150px] md:w-[250px] lg:w-[250px]"> <div className="w-[150px] md:w-[250px] lg:w-[250px]">
<Input <Input
placeholder="Filter Status..." placeholder="Filter Status..."
@ -174,6 +211,7 @@ const PressConferenceTable = () => {
/> />
</div> </div>
</div> </div>
</div>
<Table className="overflow-hidden mt-3"> <Table className="overflow-hidden mt-3">
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (

46
app/[locale]/(protected)/contributor/schedule/press-release/components/pressrilis-table.tsx
View File

@ -48,6 +48,13 @@ import { useTranslations } from "next-intl";
import { CardHeader, CardTitle } from "@/components/ui/card"; import { CardHeader, CardTitle } from "@/components/ui/card";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import useTableColumns from "./columns"; import useTableColumns from "./columns";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
const PressReleaseTable = () => { const PressReleaseTable = () => {
const router = useRouter(); const router = useRouter();
@ -62,9 +69,10 @@ const PressReleaseTable = () => {
const [columnVisibility, setColumnVisibility] = const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({}); React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [pagination, setPagination] = React.useState<PaginationState>({ const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
pageSize: 10, pageSize: Number(showData),
}); });
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1);
@ -101,15 +109,15 @@ const PressReleaseTable = () => {
React.useEffect(() => { React.useEffect(() => {
fetchData(); fetchData();
}, [page, limit, search]); }, [page, showData, search]);
async function fetchData() { async function fetchData() {
try { try {
const res = await paginationSchedule(limit, page - 1, 3, search); const res = await paginationSchedule(showData, page - 1, 3, search);
const data = res?.data?.data; const data = res?.data?.data;
const contentData = data?.content; const contentData = data?.content;
contentData.forEach((item: any, index: number) => { contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * limit + index + 1; item.no = (page - 1) * Number(showData) + index + 1;
}); });
console.log("contentData : ", contentData); console.log("contentData : ", contentData);
@ -162,6 +170,35 @@ const PressReleaseTable = () => {
/> />
</InputGroup> </InputGroup>
</div> </div>
<div className="flex flex-row">
<div className="mx-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="md" variant="outline">
1 - {showData} Data
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 text-sm">
<DropdownMenuRadioGroup
value={showData}
onValueChange={setShowData}
>
<DropdownMenuRadioItem value="10">
1 - 10 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="50">
1 - 50 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="100">
1 - 100 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="250">
1 - 250 Data
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="w-[150px] md:w-[250px] lg:w-[250px]"> <div className="w-[150px] md:w-[250px] lg:w-[250px]">
<Input <Input
placeholder="Filter Status..." placeholder="Filter Status..."
@ -175,6 +212,7 @@ const PressReleaseTable = () => {
/> />
</div> </div>
</div> </div>
</div>
<Table className="overflow-hidden mt-3"> <Table className="overflow-hidden mt-3">
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (

44
app/[locale]/(protected)/contributor/task/components/task-table.tsx
View File

@ -42,6 +42,8 @@ import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
@ -71,9 +73,10 @@ const TaskTable = () => {
const [columnVisibility, setColumnVisibility] = const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({}); React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [pagination, setPagination] = React.useState<PaginationState>({ const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
pageSize: 10, pageSize: Number(showData),
}); });
const [statusFilter, setStatusFilter] = React.useState<number[]>([]); const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
const [dateFilter, setDateFilter] = React.useState(""); const [dateFilter, setDateFilter] = React.useState("");
@ -117,7 +120,7 @@ const TaskTable = () => {
fetchData(); fetchData();
}, [ }, [
page, page,
limit, showData,
isSpecificAttention, isSpecificAttention,
search, search,
dateFilter, dateFilter,
@ -133,7 +136,7 @@ const TaskTable = () => {
const res = await listTask( const res = await listTask(
page - 1, page - 1,
search, search,
limit, showData,
filterByCode, filterByCode,
formattedStartDate, formattedStartDate,
isSpecificAttention ? "atensi-khusus" : "tugas-harian", isSpecificAttention ? "atensi-khusus" : "tugas-harian",
@ -153,7 +156,7 @@ const TaskTable = () => {
// }); // });
contentData.forEach((item: any, index: number) => { contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * limit + index + 1; item.no = (page - 1) * Number(showData) + index + 1;
}); });
console.log("contentData : ", contentData); console.log("contentData : ", contentData);
@ -241,9 +244,37 @@ const TaskTable = () => {
/> />
</InputGroup> </InputGroup>
</div> </div>
<div className="w-full sm:w-[100px] items-center gap-2">
<div className=" gap-3"> <div className=" flex flex-row items-center gap-3">
<div className="flex items-center py-4"> <div className="flex items-center py-4">
<div className="mx-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="md" variant="outline">
1 - {showData} Data
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 text-sm">
<DropdownMenuRadioGroup
value={showData}
onValueChange={setShowData}
>
<DropdownMenuRadioItem value="10">
1 - 10 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="50">
1 - 50 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="100">
1 - 100 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="250">
1 - 250 Data
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button <Button
@ -321,7 +352,6 @@ const TaskTable = () => {
/> />
</div> */} </div> */}
</div> </div>
</div>
<Table className="overflow-hidden mt-3"> <Table className="overflow-hidden mt-3">
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (

46
app/[locale]/(protected)/shared/contest/components/contest-table.tsx
View File

@ -43,6 +43,13 @@ import TablePagination from "@/components/table/table-pagination";
import columns from "./columns"; import columns from "./columns";
import { listContest } from "@/service/contest/contest"; import { listContest } from "@/service/contest/contest";
import useTableColumns from "./columns"; import useTableColumns from "./columns";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
const TaskTable = () => { const TaskTable = () => {
const router = useRouter(); const router = useRouter();
@ -56,9 +63,10 @@ const TaskTable = () => {
const [columnVisibility, setColumnVisibility] = const [columnVisibility, setColumnVisibility] =
React.useState<VisibilityState>({}); React.useState<VisibilityState>({});
const [rowSelection, setRowSelection] = React.useState({}); const [rowSelection, setRowSelection] = React.useState({});
const [showData, setShowData] = React.useState("50");
const [pagination, setPagination] = React.useState<PaginationState>({ const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0, pageIndex: 0,
pageSize: 10, pageSize: Number(showData),
}); });
const [page, setPage] = React.useState(1); const [page, setPage] = React.useState(1);
const [totalPage, setTotalPage] = React.useState(1); const [totalPage, setTotalPage] = React.useState(1);
@ -95,15 +103,15 @@ const TaskTable = () => {
React.useEffect(() => { React.useEffect(() => {
fetchData(); fetchData();
}, [page, limit, search]); }, [page, showData, search]);
async function fetchData() { async function fetchData() {
try { try {
const res = await listContest(search, limit, page - 1); const res = await listContest(search, showData, page - 1);
const data = res?.data?.data; const data = res?.data?.data;
const contentData = data?.content; const contentData = data?.content;
contentData.forEach((item: any, index: number) => { contentData.forEach((item: any, index: number) => {
item.no = (page - 1) * limit + index + 1; item.no = (page - 1) * Number(showData) + index + 1;
}); });
console.log("contentData : ", contentData); console.log("contentData : ", contentData);
@ -138,6 +146,35 @@ const TaskTable = () => {
/> />
</InputGroup> </InputGroup>
</div> </div>
<div className="flex flex-row">
<div className="mx-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="md" variant="outline">
1 - {showData} Data
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 text-sm">
<DropdownMenuRadioGroup
value={showData}
onValueChange={setShowData}
>
<DropdownMenuRadioItem value="10">
1 - 10 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="50">
1 - 50 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="100">
1 - 100 Data
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="250">
1 - 250 Data
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="w-[150px] md:w-[250px] lg:w-[250px]"> <div className="w-[150px] md:w-[250px] lg:w-[250px]">
<Input <Input
placeholder="Filter Status..." placeholder="Filter Status..."
@ -151,6 +188,7 @@ const TaskTable = () => {
/> />
</div> </div>
</div> </div>
</div>
<Table className="overflow-hidden mt-3"> <Table className="overflow-hidden mt-3">
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (

2
components/form/planning/medsos-publish.tsx
View File

@ -369,7 +369,7 @@ export default function PublishMedsos() {
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant="soft" size="sm" color="primary"> <Button variant="soft" size="sm" color="primary">
[Kustom] [{t("custom")}]
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]"> <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">

62
components/form/task/task-detail-form.tsx
View File

@ -66,6 +66,7 @@ import { Icon } from "@iconify/react/dist/iconify.js";
import WavesurferPlayer from "@wavesurfer/react"; import WavesurferPlayer from "@wavesurfer/react";
import WaveSurfer from "wavesurfer.js"; import WaveSurfer from "wavesurfer.js";
import { InputGroup, InputGroupText } from "@/components/ui/input-group"; import { InputGroup, InputGroupText } from "@/components/ui/input-group";
import { useTranslations } from "next-intl";
const taskSchema = z.object({ const taskSchema = z.object({
uniqueCode: z.string().min(1, { message: "Judul diperlukan" }), uniqueCode: z.string().min(1, { message: "Judul diperlukan" }),
@ -206,6 +207,7 @@ export default function FormTaskDetail() {
text: false, text: false,
}); });
const t = useTranslations("Form");
const [uploadResults, setUploadResults] = useState<UploadResult[]>([]); const [uploadResults, setUploadResults] = useState<UploadResult[]>([]);
const [isTableResult, setIsTableResult] = useState(false); const [isTableResult, setIsTableResult] = useState(false);
const [isSentResult] = useState(false); const [isSentResult] = useState(false);
@ -812,7 +814,7 @@ export default function FormTaskDetail() {
{detail !== undefined ? ( {detail !== undefined ? (
<div className="px-6 py-6"> <div className="px-6 py-6">
<div className="flex flex-col sm:flex-row lg:flex-row justify-between"> <div className="flex flex-col sm:flex-row lg:flex-row justify-between">
<p className="text-lg font-semibold mb-3">Detail Penugasan</p> <p className="text-lg font-semibold mb-3">{t("detail-task")}</p>
<div <div
className="flex gap-3" className="flex gap-3"
style={ style={
@ -830,7 +832,7 @@ export default function FormTaskDetail() {
color="primary" color="primary"
onClick={() => setModalType("terkirim")} onClick={() => setModalType("terkirim")}
> >
{sentAcceptance?.length} Terkirim {sentAcceptance?.length} {t("sent")}
</Button> </Button>
</DialogTrigger> </DialogTrigger>
@ -840,13 +842,15 @@ export default function FormTaskDetail() {
onClick={() => setModalType("diterima")} onClick={() => setModalType("diterima")}
className="ml-3" className="ml-3"
> >
{acceptAcceptance?.length} Diterima {acceptAcceptance?.length} {t("accepted")}
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px] overflow-y-auto max-h-[500px]"> <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px] overflow-y-auto max-h-[500px]">
<DialogHeader> <DialogHeader>
<DialogTitle>Detail Status Penugasan</DialogTitle> <DialogTitle>
{t("assignment-status-details")}
</DialogTitle>
</DialogHeader> </DialogHeader>
{modalType === "terkirim" && getModalContent("terkirim")} {modalType === "terkirim" && getModalContent("terkirim")}
@ -860,7 +864,7 @@ export default function FormTaskDetail() {
<form> <form>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
<div className="space-y-2"> <div className="space-y-2">
<Label>Kode Unik</Label> <Label>{t("unique-code")}</Label>
<Controller <Controller
control={control} control={control}
name="uniqueCode" name="uniqueCode"
@ -877,7 +881,7 @@ export default function FormTaskDetail() {
/> />
</div> </div>
<div className="space-y-2 mt-6"> <div className="space-y-2 mt-6">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -896,8 +900,8 @@ export default function FormTaskDetail() {
)} )}
</div> </div>
<div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center"> <div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center">
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Tujuan Pemilihan Tugas</Label> <Label>{t("assignment-selection")}</Label>
<Select <Select
onValueChange={setSelectedTarget} onValueChange={setSelectedTarget}
value={detail.assignedToRole} value={detail.assignedToRole}
@ -935,7 +939,7 @@ export default function FormTaskDetail() {
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant="soft" size="sm" color="primary"> <Button variant="soft" size="sm" color="primary">
[Kustom] [{t("custom")}]
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]"> <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
@ -1018,8 +1022,8 @@ export default function FormTaskDetail() {
</Dialog> </Dialog>
</div> </div>
</div> </div>
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Tipe Penugasan</Label> <Label>{t("type-task")}</Label>
<RadioGroup <RadioGroup
value={detail.assignmentMainType.id.toString()} value={detail.assignmentMainType.id.toString()}
onValueChange={(value) => setMainType(value)} onValueChange={(value) => setMainType(value)}
@ -1033,8 +1037,8 @@ export default function FormTaskDetail() {
<Label htmlFor="medsos-mediahub">Medsos Mediahub</Label> <Label htmlFor="medsos-mediahub">Medsos Mediahub</Label>
</RadioGroup> </RadioGroup>
</div> </div>
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Jenis Tugas </Label> <Label>{t("assigment-type")} </Label>
<RadioGroup <RadioGroup
value={detail.taskType.toString()} value={detail.taskType.toString()}
onValueChange={(value) => setTaskType(String(value))} onValueChange={(value) => setTaskType(String(value))}
@ -1047,8 +1051,8 @@ export default function FormTaskDetail() {
</RadioGroup> </RadioGroup>
</div> </div>
{/* RadioGroup Assignment Category */} {/* RadioGroup Assignment Category */}
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Jenis Penugasan</Label> <Label>{t("type-of-task")}</Label>
<RadioGroup <RadioGroup
value={detail.assignmentType.id.toString()} value={detail.assignmentType.id.toString()}
onValueChange={(value) => setType(value)} onValueChange={(value) => setType(value)}
@ -1068,8 +1072,8 @@ export default function FormTaskDetail() {
</div> </div>
</RadioGroup> </RadioGroup>
</div> </div>
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Output Tugas</Label> <Label>{t("output-task")}</Label>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
{Object.keys(taskOutput).map((key) => ( {Object.keys(taskOutput).map((key) => (
<div className="flex items-center gap-2" key={key}> <div className="flex items-center gap-2" key={key}>
@ -1089,8 +1093,8 @@ export default function FormTaskDetail() {
</div> </div>
</div> </div>
<div className="mt-6"> <div className="mt-6 space-y-2">
<Label>Narasi Penugasan</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="naration" name="naration"
@ -1104,11 +1108,13 @@ export default function FormTaskDetail() {
</p> </p>
)} */} )} */}
</div> </div>
<div className="space-y-1.5 mt-5"> <div className="space-y-1.5 mt-5 space-y-2">
<Label htmlFor="attachment">Lampiran</Label> <Label htmlFor="attachment">{t("attachment")}</Label>
<div className="space-y-3"> <div className="space-y-3">
<div> <div>
{videoUploadedFiles?.length > 0 && <Label>Video</Label>} {videoUploadedFiles?.length > 0 && (
<Label>{t("audio-visual")}</Label>
)}
<div> <div>
{selectedVideo && ( {selectedVideo && (
<Card className="mt-2"> <Card className="mt-2">
@ -1154,7 +1160,9 @@ export default function FormTaskDetail() {
</div> </div>
</div> </div>
<div> <div>
{imageUploadedFiles?.length > 0 && <Label>Foto</Label>} {imageUploadedFiles?.length > 0 && (
<Label>{t("image")}</Label>
)}
<div> <div>
{selectedImage && ( {selectedImage && (
<Card className="mt-2"> <Card className="mt-2">
@ -1200,7 +1208,9 @@ export default function FormTaskDetail() {
</div> </div>
</div> </div>
<div> <div>
{textUploadedFiles?.length > 0 && <Label>Teks</Label>} {textUploadedFiles?.length > 0 && (
<Label>{t("text")}</Label>
)}
<div> <div>
{selectedText && ( {selectedText && (
<Card className="mt-2"> <Card className="mt-2">
@ -1247,7 +1257,9 @@ export default function FormTaskDetail() {
</div> </div>
</div> </div>
<div> <div>
{audioUploadedFiles?.length > 0 && <Label>Audio</Label>} {audioUploadedFiles?.length > 0 && (
<Label>{t("audio")}</Label>
)}
<div> <div>
{selectedAudio && ( {selectedAudio && (
<Card className="mt-2"> <Card className="mt-2">

71
components/form/task/task-form.tsx
View File

@ -39,6 +39,7 @@ import { Upload } from "tus-js-client";
import { error } from "@/config/swal"; import { error } from "@/config/swal";
import { getCsrfToken } from "@/service/auth"; import { getCsrfToken } from "@/service/auth";
import { loading } from "@/lib/swal"; import { loading } from "@/lib/swal";
import { useTranslations } from "next-intl";
const taskSchema = z.object({ const taskSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -107,6 +108,7 @@ export default function FormTask() {
const [isRecording, setIsRecording] = useState(false); const [isRecording, setIsRecording] = useState(false);
const [timer, setTimer] = useState<number>(120); const [timer, setTimer] = useState<number>(120);
const t = useTranslations("Form");
const [imageFiles, setImageFiles] = useState<FileWithPreview[]>([]); const [imageFiles, setImageFiles] = useState<FileWithPreview[]>([]);
const [videoFiles, setVideoFiles] = useState<FileWithPreview[]>([]); const [videoFiles, setVideoFiles] = useState<FileWithPreview[]>([]);
const [textFiles, setTextFiles] = useState<FileWithPreview[]>([]); const [textFiles, setTextFiles] = useState<FileWithPreview[]>([]);
@ -478,13 +480,13 @@ export default function FormTask() {
return ( return (
<Card> <Card>
<div className="px-6 py-6"> <div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">Form Penugasan</p> <p className="text-lg font-semibold mb-3">{t("form-task")}</p>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="gap-5 mb-5"> <div className="gap-5 mb-5">
{/* Input Title */} {/* Input Title */}
<div className="space-y-2"> <div className="space-y-2">
<Label>Judul</Label> <Label>{t("title")}</Label>
<Controller <Controller
control={control} control={control}
name="title" name="title"
@ -503,11 +505,11 @@ export default function FormTask() {
)} )}
</div> </div>
<div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center"> <div className="flex flex-col sm:flex-row lg:flex-row sm:items-center lg:items-center">
<div className="mt-5"> <div className="mt-5 space-y-2">
<Label>Tujuan Pemilihan Tugas</Label> <Label>{t("assignment-selection")}</Label>
<Select onValueChange={setSelectedTarget}> <Select onValueChange={setSelectedTarget}>
<SelectTrigger size="md"> <SelectTrigger size="md">
<SelectValue placeholder="Pilih" /> <SelectValue placeholder="Choose" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="3,4">Semua Pengguna</SelectItem> <SelectItem value="3,4">Semua Pengguna</SelectItem>
@ -536,7 +538,7 @@ export default function FormTask() {
<Dialog> <Dialog>
<DialogTrigger asChild> <DialogTrigger asChild>
<Button variant="soft" size="sm" color="primary"> <Button variant="soft" size="sm" color="primary">
[Kustom] [{t("custom")}]
</Button> </Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]"> <DialogContent className="sm:max-w-[425px] md:max-w-[500px] lg:max-w-[1500px]">
@ -614,10 +616,10 @@ export default function FormTask() {
</Dialog> </Dialog>
</div> </div>
</div> </div>
<div className="mt-5"> <div className="mt-5 space-y-2">
<Label>Tipe Penugasan</Label> <Label>{t("type-task")}</Label>
<RadioGroup <RadioGroup
value={mainType} // State yang dipetakan ke value RadioGroup value={mainType}
onValueChange={(value) => setMainType(value)} onValueChange={(value) => setMainType(value)}
// value={String(mainType)} // value={String(mainType)}
// onValueChange={(value) => setMainType(Number(value))} // onValueChange={(value) => setMainType(Number(value))}
@ -629,8 +631,8 @@ export default function FormTask() {
<Label htmlFor="medsos-mediahub">Medsos Mediahub</Label> <Label htmlFor="medsos-mediahub">Medsos Mediahub</Label>
</RadioGroup> </RadioGroup>
</div> </div>
<div className="mt-5"> <div className="mt-5 space-y-2">
<Label>Jenis Tugas </Label> <Label>{t("assigment-type")} </Label>
<RadioGroup <RadioGroup
value={taskType} value={taskType}
onValueChange={(value) => setTaskType(String(value))} onValueChange={(value) => setTaskType(String(value))}
@ -643,8 +645,8 @@ export default function FormTask() {
</RadioGroup> </RadioGroup>
</div> </div>
{/* RadioGroup Assignment Category */} {/* RadioGroup Assignment Category */}
<div className="mt-5"> <div className="mt-5 space-y-2">
<Label>Jenis Penugasan</Label> <Label>{t("type-of-task")}</Label>
<RadioGroup <RadioGroup
value={type} // State yang dipetakan ke value RadioGroup value={type} // State yang dipetakan ke value RadioGroup
onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah onValueChange={(value) => setType(value)} // Mengubah nilai state ketika pilihan berubah
@ -664,8 +666,8 @@ export default function FormTask() {
</div> </div>
</RadioGroup> </RadioGroup>
</div> </div>
<div className="mt-5"> <div className="mt-5 space-y-2">
<Label>Output Tugas</Label> <Label>{t("output-task")}</Label>
<div className="flex flex-wrap gap-3"> <div className="flex flex-wrap gap-3">
{Object.keys(taskOutput).map((key) => ( {Object.keys(taskOutput).map((key) => (
<div className="flex items-center gap-2" key={key}> <div className="flex items-center gap-2" key={key}>
@ -704,8 +706,8 @@ export default function FormTask() {
</div> </div>
</RadioGroup> </RadioGroup>
</div> */} </div> */}
<div className="mt-5"> <div className="mt-5 space-y-2">
<Label>Narasi Penugasan</Label> <Label>{t("description")}</Label>
<Controller <Controller
control={control} control={control}
name="naration" name="naration"
@ -724,11 +726,11 @@ export default function FormTask() {
</p> </p>
)} )}
</div> </div>
<div className="space-y-1.5 mt-5"> <div className="space-y-2.5 mt-5">
<Label htmlFor="attachments">Lampiran</Label> <Label htmlFor="attachments">{t("attachment")}</Label>
<div className="space-y-3"> <div className="space-y-3">
<div> <div>
<Label>Video</Label> <Label>{t("audio-visual")}</Label>
<FileUploader <FileUploader
accept={{ accept={{
"mp4/*": [], "mp4/*": [],
@ -739,8 +741,8 @@ export default function FormTask() {
onDrop={(files) => setVideoFiles(files)} onDrop={(files) => setVideoFiles(files)}
/> />
</div> </div>
<div> <div className="space-y-2">
<Label>Foto</Label> <Label>{t("image")}</Label>
<FileUploader <FileUploader
accept={{ accept={{
"image/*": [], "image/*": [],
@ -750,8 +752,8 @@ export default function FormTask() {
onDrop={(files) => setImageFiles(files)} onDrop={(files) => setImageFiles(files)}
/> />
</div> </div>
<div> <div className="space-y-2">
<Label>Teks</Label> <Label>{t("text")}</Label>
<FileUploader <FileUploader
accept={{ accept={{
"pdf/*": [], "pdf/*": [],
@ -761,8 +763,8 @@ export default function FormTask() {
onDrop={(files) => setTextFiles(files)} onDrop={(files) => setTextFiles(files)}
/> />
</div> </div>
<div> <div className="space-y-2">
<Label>Audio</Label> <Label>{t("audio")}</Label>
<AudioRecorder <AudioRecorder
onRecordingComplete={addAudioElement} onRecordingComplete={addAudioElement}
audioTrackConstraints={{ audioTrackConstraints={{
@ -790,7 +792,7 @@ export default function FormTask() {
key={idx} key={idx}
className="flex flex-row justify-between items-center" className="flex flex-row justify-between items-center"
> >
<p>Voice Note</p> <p>{t("voice-note")}</p>
<Button <Button
type="button" type="button"
onClick={() => handleDeleteAudio(idx)} onClick={() => handleDeleteAudio(idx)}
@ -803,8 +805,8 @@ export default function FormTask() {
))} ))}
{isRecording && <p>Recording... {timer} seconds remaining</p>}{" "} {isRecording && <p>Recording... {timer} seconds remaining</p>}{" "}
{/* Display remaining time */} {/* Display remaining time */}
<div className="mt-4"> <div className="mt-4 space-y-2">
<h2 className="text-lg font-bold">Link Berita</h2> <Label className="">{t("news-links")}</Label>
{links.map((link, index) => ( {links.map((link, index) => (
<div key={index} className="flex items-center gap-2 mt-2"> <div key={index} className="flex items-center gap-2 mt-2">
<input <input
@ -822,18 +824,19 @@ export default function FormTask() {
className="bg-red-500 text-white px-3 py-1 rounded" className="bg-red-500 text-white px-3 py-1 rounded"
onClick={() => handleRemoveRow(index)} onClick={() => handleRemoveRow(index)}
> >
Hapus {t("remove")}
</button> </button>
)} )}
</div> </div>
))} ))}
<button <Button
type="button" type="button"
className="mt-2 bg-blue-500 text-white px-4 py-2 rounded" className="mt-2 bg-blue-500 text-white px-4 py-2 rounded"
onClick={handleAddRow} onClick={handleAddRow}
size="sm"
> >
Tambah Link {t("add-links")}
</button> </Button>
</div> </div>
</div> </div>
</div> </div>
@ -842,7 +845,7 @@ export default function FormTask() {
{/* Submit Button */} {/* Submit Button */}
<div className="mt-4"> <div className="mt-4">
<Button type="submit" color="primary"> <Button type="submit" color="primary">
Submit {t("submit")}
</Button> </Button>
</div> </div>
</form> </form>

22
messages/en.json
View File

@ -716,6 +716,26 @@
"output-tugas": "Output Task", "output-tugas": "Output Task",
"executive-task": "Executive Task", "executive-task": "Executive Task",
"assignment-type": "Assignment Type", "assignment-type": "Assignment Type",
"description-task": "Description Task" "description-task": "Description Task",
"form-task": "Form Task",
"assignment-selection": "Assignment Selection",
"custom": "Costum",
"assigment-type": "Assigment Type",
"type-of-task": "Type of Task",
"output-task": "Task Output",
"attachment": "Attachment",
"image": "Image",
"audio-visual": "Audio Visual",
"text": "Text",
"audio": "Audio",
"voice-note": "Voice Note",
"news-links": "News Links",
"add-links": "Add Links",
"remove": "Remove",
"detail-task": "Detail Task",
"sent": "Sent",
"accepted": "Accepted",
"assignment-status-details": "Assignment Status Details",
"unique-code": "Unique Code"
} }
} }

24
messages/in.json
View File

@ -626,7 +626,7 @@
"category": "Kategori", "category": "Kategori",
"tag": "Tag", "tag": "Tag",
"type-content": "Tipe Konten", "type-content": "Tipe Konten",
"type-task": "Tipen Penugasan", "type-task": "Tipe Penugasan",
"category-task": "Kategori Penugasan", "category-task": "Kategori Penugasan",
"code": "Kode", "code": "Kode",
"start-date": "Tanggal Mulai", "start-date": "Tanggal Mulai",
@ -716,6 +716,26 @@
"output-tugas": "Output Tugas", "output-tugas": "Output Tugas",
"executive-task": "Pelaksana Tugas", "executive-task": "Pelaksana Tugas",
"assignment-type": "Jenis Penugasan", "assignment-type": "Jenis Penugasan",
"description-task": "Narasi Penugasan" "description-task": "Narasi Penugasan",
"form-task": "Form Penugasan",
"assignment-selection": "Pemilihan Tugas",
"custom": "Kostum",
"assigment-type": "Jenis Tugas",
"type-of-task": "Jenis Penugasan",
"output-task": "Output Penugasan",
"attachment": "Lampiran",
"image": "Foto",
"audio-visual": "Video",
"text": "Teks",
"audio": "Audio",
"voice-note": "Catatan Suara",
"news-links": "Link Berita",
"add-links": "Tambah Link",
"remove": "Hapus",
"detail-task": "Detail Task",
"sent": "Terkirim",
"accepted": "Diterima",
"assignment-status-details": "Detail Status Penugasan",
"unique-code": "Kode Unik"
} }
} }

2
service/blog/blog.ts
View File

@ -5,7 +5,7 @@ import {
} from "../http-config/http-interceptor-service"; } from "../http-config/http-interceptor-service";
export async function paginationBlog( export async function paginationBlog(
size: number, size: any,
page: number, page: number,
title: string = "", title: string = "",
categoryFilter: any, categoryFilter: any,

16
service/content/content.ts
View File

@ -46,7 +46,7 @@ export async function listDataAll(
} }
export async function listDataImage( export async function listDataImage(
limit: any, size: any,
page: any, page: any,
isForSelf: any, isForSelf: any,
isApproval: any, isApproval: any,
@ -61,12 +61,12 @@ export async function listDataImage(
creatorGroup: string = "" creatorGroup: string = ""
) { ) {
return await httpGetInterceptor( return await httpGetInterceptor(
`media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=1&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}` `media/list?enablePage=1&size=${size}&sortBy=createdAt&sort=desc&page=${page}&typeId=1&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}`
); );
} }
export async function listDataVideo( export async function listDataVideo(
limit: any, size: any,
page: any, page: any,
isForSelf: any, isForSelf: any,
isApproval: any, isApproval: any,
@ -81,12 +81,12 @@ export async function listDataVideo(
creatorGroup: string = "" creatorGroup: string = ""
) { ) {
return await httpGetInterceptor( return await httpGetInterceptor(
`media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=2&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}` `media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${size}&page=${page}&typeId=2&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}`
); );
} }
export async function listDataTeks( export async function listDataTeks(
limit: any, size: any,
page: any, page: any,
isForSelf: any, isForSelf: any,
isApproval: any, isApproval: any,
@ -101,12 +101,12 @@ export async function listDataTeks(
creatorGroup: string = "" creatorGroup: string = ""
) { ) {
return await httpGetInterceptor( return await httpGetInterceptor(
`media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=3&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}` `media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${size}&page=${page}&typeId=3&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}`
); );
} }
export async function listDataAudio( export async function listDataAudio(
limit: any, size: any,
page: any, page: any,
isForSelf: any, isForSelf: any,
isApproval: any, isApproval: any,
@ -121,7 +121,7 @@ export async function listDataAudio(
creatorGroup: string = "" creatorGroup: string = ""
) { ) {
return await httpGetInterceptor( return await httpGetInterceptor(
`media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${limit}&page=${page}&typeId=4&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}` `media/list?enablePage=1&sortBy=createdAt&sort=desc&size=${size}&page=${page}&typeId=4&isForSelf=${isForSelf}&isApproval=${isApproval}&categoryId=${categoryFilter}&statusId=${statusFilter}&needApprovalFromLevel=${needApprovalFromLevel}&creatorUserLevelName=${source}&creatorName=${creator}&startDate=${startDate}&endDate=${endDate}&title=${title}&creatorGroupLevelName=${creatorGroup}`
); );
} }

6
service/contest/contest.ts
View File

@ -3,11 +3,7 @@ import {
httpPostInterceptor, httpPostInterceptor,
} from "../http-config/http-interceptor-service"; } from "../http-config/http-interceptor-service";
export async function listContest( export async function listContest(title: string = "", size: any, page: number) {
title: string = "",
size: number,
page: number
) {
return await httpGetInterceptor( return await httpGetInterceptor(
`contest/pagination?enablePage=1&size=${size}&page=${page}&title=${title}` `contest/pagination?enablePage=1&size=${size}&page=${page}&title=${title}`
); );

2
service/schedule/schedule.ts
View File

@ -6,7 +6,7 @@ import { httpGet } from "../http-config/http-base-service";
import { any } from "zod"; import { any } from "zod";
export async function paginationSchedule( export async function paginationSchedule(
size: number, size: any,
page: number, page: number,
type: any, type: any,
title: string = "" title: string = ""