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

Merge branch 'dev-rama' of https://gitlab.com/hanifsalafi/mediahub_redesign

This commit is contained in:
hanif salafi 2025-06-09 22:37:47 +07:00
parent 7487711086 f8829985f6
commit cbbf440ec8
8 changed files with 443 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/[locale]/(protected)/admin/media-tracking/results/component/column.tsx
View File

@ -49,11 +49,11 @@ const columns: ColumnDef<any>[] = [
header: "Jumlah Amplifikasi", header: "Jumlah Amplifikasi",
cell: ({ row }) => <span>{row.getValue("link")}</span>, cell: ({ row }) => <span>{row.getValue("link")}</span>,
}, },
{ // {
accessorKey: "status", // accessorKey: "status",
header: "Status", // header: "Status",
cell: ({ row }) => <span>{row.getValue("status")}</span>, // cell: ({ row }) => <span>{row.getValue("status")}</span>,
}, // },
{ {
accessorKey: "date", accessorKey: "date",
header: "Tanggal Penarikan", header: "Tanggal Penarikan",
@ -77,10 +77,17 @@ const columns: ColumnDef<any>[] = [
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent className="p-0" align="end"> <DropdownMenuContent className="p-0" align="end">
<Link href={`/contributor/content/audio/detail/${row.original.id}`}> <Link
href={`/contributor/content/${
row.original.mediaUpload.fileType.secondaryName &&
row.original.mediaUpload.fileType.secondaryName.toLowerCase()
}/detail/${row.original.mediaUpload.id}`}
>
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none"> <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" /> <Eye className="w-4 h-4 me-1.5" />
View View{" "}
{row.original.mediaUpload.fileType.secondaryName &&
row.original.mediaUpload.fileType.secondaryName.toLowerCase()}
</DropdownMenuItem> </DropdownMenuItem>
</Link> </Link>
</DropdownMenuContent> </DropdownMenuContent>

107
app/[locale]/(protected)/admin/media-tracking/tracking-berita/component/table.tsx
View File

@ -9,7 +9,7 @@ import {
listDataTracking, listDataTracking,
mediaTrackingSave, mediaTrackingSave,
} from "@/service/media-tracking/media-tracking"; } from "@/service/media-tracking/media-tracking";
import { error, loading } from "@/lib/swal"; import { error } from "@/lib/swal";
import { toast } from "sonner"; import { toast } from "sonner";
import { import {
DropdownMenu, DropdownMenu,
@ -20,31 +20,32 @@ import {
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { PaginationState } from "@tanstack/react-table"; import { PaginationState } from "@tanstack/react-table";
import page from "../page"; import page from "../page";
import CustomPagination from "@/components/table/custom-pagination";
import { close, loading } from "@/config/swal";
export default function TrackingBeritaCard() { export default function TrackingBeritaCard() {
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [content, setContent] = useState<any[]>([]); const [content, setContent] = useState<any[]>([]);
const [selectedItems, setSelectedItems] = useState<number[]>([]); const [selectedItems, setSelectedItems] = useState<number[]>([]);
const [currentPage, setCurrentPage] = useState(1); const [page, setPage] = useState(1);
const [page, setPage] = React.useState(1); const [totalPage, setTotalPage] = useState(1);
const [showData, setShowData] = React.useState("10"); const [showData, setShowData] = useState("6");
const [pagination, setPagination] = React.useState<PaginationState>({
pageIndex: 0,
pageSize: Number(showData),
});
useEffect(() => { useEffect(() => {
initFecth(); initFecth();
}, [showData]); }, [showData, page]);
const initFecth = async () => { const initFecth = async () => {
loading();
const response = await listDataTracking(showData, page - 1); const response = await listDataTracking(showData, page - 1);
const data = response?.data?.data; const data = response?.data?.data;
const newData = data?.content; const newData = data?.content;
setTotalPage(data?.totalPages || 1);
newData.forEach((item: any, index: number) => { newData.forEach((item: any, index: number) => {
item.no = (page - 1) * Number(showData) + index + 1; item.no = (page - 1) * Number(showData) + index + 1;
}); });
setContent(response?.data?.data?.content || []); setContent(response?.data?.data?.content || []);
close();
}; };
const fecthAll = async (keyword: string) => { const fecthAll = async (keyword: string) => {
@ -117,17 +118,17 @@ export default function TrackingBeritaCard() {
value={showData} value={showData}
onValueChange={setShowData} onValueChange={setShowData}
> >
<DropdownMenuRadioItem value="10"> <DropdownMenuRadioItem value="12">
1 - 10 Data 1 - 6 Data
</DropdownMenuRadioItem> </DropdownMenuRadioItem>
<DropdownMenuRadioItem value="50"> <DropdownMenuRadioItem value="12">
1 - 50 Data 1 - 12 Data
</DropdownMenuRadioItem> </DropdownMenuRadioItem>
<DropdownMenuRadioItem value="100"> <DropdownMenuRadioItem value="60">
1 - 100 Data 1 - 60 Data
</DropdownMenuRadioItem> </DropdownMenuRadioItem>
<DropdownMenuRadioItem value="250"> <DropdownMenuRadioItem value="120">
1 - 250 Data 1 - 120 Data
</DropdownMenuRadioItem> </DropdownMenuRadioItem>
</DropdownMenuRadioGroup> </DropdownMenuRadioGroup>
</DropdownMenuContent> </DropdownMenuContent>
@ -150,48 +151,40 @@ export default function TrackingBeritaCard() {
)} )}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
{content.map((item: any) => ( {content?.length > 1 &&
<Card content.map((item: any) => (
key={item.id} <Card
className="relative overflow-hidden shadow-sm border rounded-lg cursor-pointer" key={item.id}
onClick={() => handleSelect(item.id)} className="relative overflow-hidden shadow-sm border rounded-lg cursor-pointer"
> onClick={() => handleSelect(item.id)}
<img >
src={item.thumbnailLink} <img
alt={item.title} src={item.thumbnailLink}
className="w-full h-[300px] object-cover" alt={item.title}
/> className="w-full h-[300px] object-cover"
<div className="absolute top-2 left-2"> />
<div className="w-5 h-5 border-2 border-white bg-white rounded-sm flex items-center justify-center"> <div className="absolute top-2 left-2">
{selectedItems.includes(item.id) && ( <div className="w-5 h-5 border-2 border-white bg-white rounded-sm flex items-center justify-center">
<div className="w-3 h-3 bg-blue-600 rounded-sm" /> {selectedItems.includes(item.id) && (
)} <div className="w-3 h-3 bg-blue-600 rounded-sm" />
)}
</div>
</div> </div>
</div> <p className="p-2 text-sm font-medium text-gray-800 truncate">
<p className="p-2 text-sm font-medium text-gray-800 truncate"> {item.title}
{item.title} </p>
</p> </Card>
</Card> ))}
))}
</div> </div>
<div className="mt-3">
<div className="flex justify-center items-center gap-2 mt-4"> {content && content?.length > 0 ? (
<Button <CustomPagination
size="icon" totalPage={totalPage}
variant="ghost" onPageChange={(data) => setPage(data)}
disabled={currentPage === 1} />
onClick={() => setCurrentPage((p) => p - 1)} ) : (
> <p>No Data</p>
<ChevronLeft className="w-4 h-4" /> )}
</Button>
<div className="px-3 py-1 rounded-full border">{currentPage}</div>
<Button
size="icon"
variant="ghost"
onClick={() => setCurrentPage((p) => p + 1)}
>
<ChevronRight className="w-4 h-4" />
</Button>
</div> </div>
</div> </div>
</Card> </Card>

22
app/[locale]/(protected)/admin/settings/banner/component/table.tsx
View File

@ -69,6 +69,7 @@ import { data } from "jquery";
import { useToast } from "@/components/ui/use-toast"; import { useToast } from "@/components/ui/use-toast";
import { setBanner } from "@/service/settings/settings"; import { setBanner } from "@/service/settings/settings";
import { id } from "date-fns/locale"; import { id } from "date-fns/locale";
import CustomPagination from "@/components/table/custom-pagination";
const ContentListBanner = () => { const ContentListBanner = () => {
const router = useRouter(); const router = useRouter();
@ -120,10 +121,10 @@ const ContentListBanner = () => {
React.useEffect(() => { React.useEffect(() => {
fetchData(); fetchData();
setPagination({ // setPagination({
pageIndex: 0, // pageIndex: 0,
pageSize: Number(showData), // pageSize: Number(showData),
}); // });
}, [page, showData]); }, [page, showData]);
async function fetchData() { async function fetchData() {
@ -398,10 +399,15 @@ const ContentListBanner = () => {
</div> </div>
))} ))}
</div> </div>
<div className="flex justify-center mt-6"> <div className="mt-3">
<div className="border rounded px-3 py-1 text-sm text-gray-600"> {data && data?.length > 0 ? (
1 <CustomPagination
</div> totalPage={totalPage}
onPageChange={(data) => setPage(data)}
/>
) : (
<p>No Data</p>
)}
</div> </div>
</div> </div>
</> </>

317
components/form/content/image-detail-form.tsx
View File

@ -66,6 +66,7 @@ import { UnitMapping } from "@/app/[locale]/(protected)/contributor/agenda-setti
import SuggestionModal from "@/components/modal/suggestions-modal"; import SuggestionModal from "@/components/modal/suggestions-modal";
import { formatDateToIndonesian } from "@/utils/globals"; import { formatDateToIndonesian } from "@/utils/globals";
import ApprovalHistoryModal from "@/components/modal/approval-history-modal"; import ApprovalHistoryModal from "@/components/modal/approval-history-modal";
import Image from "next/image";
const imageSchema = z.object({ const imageSchema = z.object({
title: z.string().min(1, { message: "Judul diperlukan" }), title: z.string().min(1, { message: "Judul diperlukan" }),
@ -437,6 +438,22 @@ export default function FormImageDetail() {
successCallback(); successCallback();
}; };
const [portraitMap, setPortraitMap] = useState<any>({});
const handleImageLoad = (e: any, index: number) => {
const { naturalWidth, naturalHeight } = e.target;
const isPortrait = naturalHeight > naturalWidth;
setPortraitMap((prev: any) => ({
...prev,
[index]: isPortrait,
}));
};
useEffect(() => {
console.log("portrai", portraitMap);
}, [portraitMap]);
return ( return (
<form> <form>
{detail !== undefined ? ( {detail !== undefined ? (
@ -513,19 +530,19 @@ export default function FormImageDetail() {
thumbs={{ swiper: thumbsSwiper }} thumbs={{ swiper: thumbsSwiper }}
modules={[FreeMode, Navigation, Thumbs]} modules={[FreeMode, Navigation, Thumbs]}
navigation={false} navigation={false}
className="w-full" className="h-[480px] object-cover w-full"
> >
{detailThumb?.map((data: any) => ( {detailThumb?.map((data: any) => (
<SwiperSlide key={data.id}> <SwiperSlide key={data.id}>
<img <img
className="object-fill h-full w-full rounded-md" className="h-[480px] max-w-[600px] rounded-md object-cover mx-auto border-2"
src={data} src={data}
alt={` ${data.id}`} alt={` ${data.id}`}
/> />
</SwiperSlide> </SwiperSlide>
))} ))}
</Swiper> </Swiper>
<div className=" mt-2 "> <div className="mt-2 mx-auto min-w-fit max-w-[600px]">
<Swiper <Swiper
onSwiper={setThumbsSwiper} onSwiper={setThumbsSwiper}
slidesPerView={6} slidesPerView={6}
@ -539,7 +556,7 @@ export default function FormImageDetail() {
{detailThumb?.map((data: any) => ( {detailThumb?.map((data: any) => (
<SwiperSlide key={data.id}> <SwiperSlide key={data.id}>
<img <img
className="object-cover h-[60px] w-[80px]" className="object-cover h-[60px] w-[80px] border-2 border-slate-100"
src={data} src={data}
alt={` ${data.id}`} alt={` ${data.id}`}
/> />
@ -579,11 +596,11 @@ export default function FormImageDetail() {
</div> </div>
<div className="mt-3 px-3 space-y-2"> <div className="mt-3 px-3 space-y-2">
<Label>{t("preview")}</Label> <Label>{t("preview")}</Label>
<Card className="mt-2"> <Card className="mt-2 w-fit">
<img <img
src={detail.thumbnailLink} src={detail.thumbnailLink}
alt="Thumbnail Gambar Utama" alt="Thumbnail Gambar Utama"
className="w-full h-auto rounded" className="h-[200px] rounded"
/> />
</Card> </Card>
</div> </div>
@ -699,119 +716,139 @@ export default function FormImageDetail() {
)} */} )} */}
<Dialog open={modalOpen} onOpenChange={setModalOpen}> <Dialog open={modalOpen} onOpenChange={setModalOpen}>
<DialogContent className="min-w-max h-[600px] overflow-y-auto"> <DialogContent size="md" className="max-h-[600px]">
<DialogHeader> <DialogHeader>
<DialogTitle>{t("leave-comment")}</DialogTitle> <DialogTitle>{t("leave-comment")}</DialogTitle>
</DialogHeader> </DialogHeader>
{status == "2" <div className="flex flex-col gap-2 max-h-[208px] md:max-h-[312px] overflow-y-auto">
? files?.map((file, index) => ( {status == "2"
<div ? files?.map((file, index) => (
key={file.id} <div
className="flex flex-row gap-2 items-center" key={file.id}
> className="flex flex-row gap-5 items-center w-full"
<img src={file.url} className="w-[200px]" /> >
<div className="flex flex-col gap-2 w-full"> <div className="w-[200px] h-[100px] flex justify-center items-center">
<div className="flex justify-between text-sm"> <img
{file.fileName} key={index}
<a alt={`files-${index + 1}`}
onClick={() => src={file.url}
handleDeleteFileApproval(file.id) onLoad={(e) => handleImageLoad(e, index)}
} className={`h-[100px] object-cover ${
> portraitMap[index] ? "w-auto" : "!w-[200px]"
<Icon icon="humbleicons:times" color="red" /> }`}
</a> />
</div> </div>
{isUserMabesApprover && ( <div className="flex flex-col gap-2 w-full">
<div className="flex flex-row gap-2"> <div className="flex justify-between text-sm">
<div className="flex items-center space-x-2"> {file.fileName}
<Checkbox <a
id="terms" onClick={() =>
value="all" handleDeleteFileApproval(file.id)
checked={filePlacements[index]?.includes( }
"all" >
)} <Icon icon="humbleicons:times" color="red" />
onCheckedChange={(e) => </a>
setupPlacement(index, "all", Boolean(e)) </div>
} {isUserMabesApprover && (
/> <div className="flex flex-row gap-2">
<label <div className="flex items-center space-x-2">
htmlFor="terms" <Checkbox
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" id="terms"
> value="all"
{t("all")} checked={filePlacements[index]?.includes(
</label> "all"
</div> )}
<div className="flex items-center space-x-2"> onCheckedChange={(e) =>
<Checkbox setupPlacement(index, "all", Boolean(e))
id="terms"
checked={filePlacements[index]?.includes(
"mabes"
)}
onCheckedChange={(e) =>
setupPlacement(index, "mabes", Boolean(e))
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Nasional
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes(
"polda"
)}
onCheckedChange={(e) =>
setupPlacement(index, "polda", Boolean(e))
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Wilayah
</label>
{wilayahPublish.polda && (
<UnitMapping
unit="Polda"
isDetail={false}
sendDataToParent={(data: any) =>
setSelectedPolda(data)
} }
/> />
)} <label
</div> htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
<div className="flex items-center space-x-2"> >
<Checkbox {t("all")}
id="terms" </label>
checked={filePlacements[index]?.includes( </div>
"international" <div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes(
"mabes"
)}
onCheckedChange={(e) =>
setupPlacement(
index,
"mabes",
Boolean(e)
)
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Nasional
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="terms"
checked={filePlacements[index]?.includes(
"polda"
)}
onCheckedChange={(e) =>
setupPlacement(
index,
"polda",
Boolean(e)
)
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Wilayah
</label>
{wilayahPublish.polda && (
<UnitMapping
unit="Polda"
isDetail={false}
sendDataToParent={(data: any) =>
setSelectedPolda(data)
}
/>
)} )}
onCheckedChange={(e) => </div>
setupPlacement(
index, <div className="flex items-center space-x-2">
"international", <Checkbox
Boolean(e) id="terms"
) checked={filePlacements[index]?.includes(
} "international"
/> )}
<label onCheckedChange={(e) =>
htmlFor="terms" setupPlacement(
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" index,
> "international",
Internasional Boolean(e)
</label> )
}
/>
<label
htmlFor="terms"
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Internasional
</label>
</div>
</div> </div>
</div> )}
)} </div>
</div> </div>
</div> ))
)) : ""}
: ""} </div>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<Textarea <Textarea
placeholder="Type your message here." placeholder="Type your message here."
@ -821,7 +858,8 @@ export default function FormImageDetail() {
</div> </div>
{status == "3" || status == "4" ? ( {status == "3" || status == "4" ? (
<div className="flex flex-row gap-2"> <div className="flex flex-row gap-2">
<Badge <Button
size="sm"
color={ color={
description === "Kualitas media kurang baik" description === "Kualitas media kurang baik"
? "primary" ? "primary"
@ -833,9 +871,10 @@ export default function FormImageDetail() {
} }
> >
Kualitas media kurang baik Kualitas media kurang baik
</Badge> </Button>
<Badge <Button
size="sm"
color={ color={
description === "Deskripsi kurang lengkap" description === "Deskripsi kurang lengkap"
? "primary" ? "primary"
@ -847,8 +886,9 @@ export default function FormImageDetail() {
} }
> >
Deskripsi kurang lengkap Deskripsi kurang lengkap
</Badge> </Button>
<Badge <Button
size="sm"
color={ color={
description === "Judul kurang tepat" description === "Judul kurang tepat"
? "primary" ? "primary"
@ -858,11 +898,12 @@ export default function FormImageDetail() {
onClick={() => setDescription("Judul kurang tepat")} onClick={() => setDescription("Judul kurang tepat")}
> >
Judul kurang tepat Judul kurang tepat
</Badge> </Button>
</div> </div>
) : ( ) : (
<div className="flex flex-row gap-2"> <div className="flex flex-row gap-2">
<Badge <Button
size="sm"
color={ color={
description === "Konten sangat bagus" description === "Konten sangat bagus"
? "primary" ? "primary"
@ -872,8 +913,9 @@ export default function FormImageDetail() {
onClick={() => setDescription("Konten sangat bagus")} onClick={() => setDescription("Konten sangat bagus")}
> >
Konten sangat bagus Konten sangat bagus
</Badge> </Button>
<Badge <Button
size="sm"
color={ color={
description === "Konten menarik" description === "Konten menarik"
? "primary" ? "primary"
@ -883,26 +925,29 @@ export default function FormImageDetail() {
onClick={() => setDescription("Konten menarik")} onClick={() => setDescription("Konten menarik")}
> >
Konten menarik Konten menarik
</Badge> </Button>
</div> </div>
)} )}
<DialogFooter> <DialogFooter>
<Button <div className="flex flex-row gap-2 justify-end">
type="button" {" "}
color="primary" <Button
onClick={() => submit()} type="button"
> color="primary"
{t("submit")} onClick={() => submit()}
</Button> >
<Button {t("submit")}
type="button" </Button>
color="destructive" <Button
onClick={() => { type="button"
setModalOpen(false); color="destructive"
}} onClick={() => {
> setModalOpen(false);
{t("cancel")} }}
</Button> >
{t("cancel")}
</Button>
</div>
</DialogFooter> </DialogFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

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

@ -1361,20 +1361,22 @@ export default function FormTaskDetail() {
<div className="mt-4"> <div className="mt-4">
<Label>Link Url</Label> <Label>Link Url</Label>
{urlInputs.map((url: any, index: any) => ( {urlInputs.map((url: any, index: any) => (
<div <Link
key={url.id} key={url.id}
href={url}
target="_blank"
className="flex items-center gap-2 mt-2" className="flex items-center gap-2 mt-2"
> >
<input <input
type="url" type="url"
className="border rounded p-2 w-full" className="border rounded p-2 w-full cursor-pointer"
value={url} value={url}
// onChange={(e) => // onChange={(e) =>
// handleLinkChange(index, e.target.value) // handleLinkChange(index, e.target.value)
// } // }
placeholder={`Masukkan link berita ${index + 1}`} placeholder={`Masukkan link berita ${index + 1}`}
/> />
</div> </Link>
))} ))}
</div> </div>
</div> </div>

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

@ -36,7 +36,7 @@ import { ChevronDown, ChevronUp, Trash2 } from "lucide-react";
import { AudioRecorder } from "react-audio-voice-recorder"; import { AudioRecorder } from "react-audio-voice-recorder";
import FileUploader from "@/components/form/shared/file-uploader"; import FileUploader from "@/components/form/shared/file-uploader";
import { Upload } from "tus-js-client"; import { Upload } from "tus-js-client";
import { error } from "@/config/swal"; import { close, 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"; import { useTranslations } from "next-intl";
@ -320,37 +320,42 @@ export default function FormTask() {
loading(); loading();
if (imageFiles?.length == 0) { if (imageFiles?.length == 0) {
setIsImageUploadFinish(true); setIsImageUploadFinish(true);
} else {
imageFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "1", "0");
});
} }
imageFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "1", "0");
});
if (videoFiles?.length == 0) { if (videoFiles?.length == 0) {
setIsVideoUploadFinish(true); setIsVideoUploadFinish(true);
} else {
videoFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "2", "0");
});
} }
videoFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "2", "0");
});
if (textFiles?.length == 0) { if (textFiles?.length == 0) {
setIsTextUploadFinish(true); setIsTextUploadFinish(true);
} else {
textFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "3", "0");
});
} }
textFiles?.map(async (item: any, index: number) => {
await uploadResumableFile(index, String(id), item, "3", "0");
});
if (audioFiles?.length == 0) { if (audioFiles?.length == 0) {
setIsAudioUploadFinish(true); setIsAudioUploadFinish(true);
} else {
audioFiles.map(async (item: FileWithPreview, index: number) => {
await uploadResumableFile(
index,
String(id),
item, // Use .file to access the actual File object
"4",
"0" // Optional: Replace with actual duration if available
);
});
} }
audioFiles.map(async (item: FileWithPreview, index: number) => { close();
await uploadResumableFile(
index,
String(id),
item, // Use .file to access the actual File object
"4",
"0" // Optional: Replace with actual duration if available
);
});
}; };
const onSubmit = (data: TaskSchema) => { const onSubmit = (data: TaskSchema) => {
@ -479,7 +484,8 @@ export default function FormTask() {
successTodo(); successTodo();
if (fileTypeId == "1") { if (fileTypeId == "1") {
setIsImageUploadFinish(true); setIsImageUploadFinish(true);
} else if (fileTypeId == "2") { }
if (fileTypeId == "2") {
setIsVideoUploadFinish(true); setIsVideoUploadFinish(true);
} }
if (fileTypeId == "3") { if (fileTypeId == "3") {

19
components/partials/auth/login-form.tsx
View File

@ -281,16 +281,17 @@ const LoginForm = () => {
return false; return false;
} }
const msg = response?.data?.message; const msg = response?.data?.message;
onSubmit(data);
if (msg == "Continue to setup email") { // if (msg == "Continue to setup email") {
setStep(2); // setStep(2);
} else if (msg == "Email is valid and OTP has been sent") { // } else if (msg == "Email is valid and OTP has been sent") {
setStep(3); // setStep(3);
} else if (msg == "Username & password valid") { // } else if (msg == "Username & password valid") {
onSubmit(data); // onSubmit(data);
} else { // } else {
error("Username / password incorrect"); // error("Username / password incorrect");
} // }
// else { // else {
// setStep(1); // setStep(1);
// } // }

143
components/table/custom-pagination.tsx Normal file
View File

@ -0,0 +1,143 @@
"use client";
import {
Pagination,
PaginationContent,
PaginationEllipsis,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
import { useEffect, useState } from "react";
export default function CustomPagination(props: {
totalPage: number;
onPageChange: (data: number) => void;
}) {
const { totalPage, onPageChange } = props;
const [page, setPage] = useState(1);
useEffect(() => {
onPageChange(page);
}, [page]);
const renderPageNumbers = () => {
const pageNumbers = [];
const halfWindow = Math.floor(5 / 2);
let startPage = Math.max(2, page - halfWindow);
let endPage = Math.min(totalPage - 1, page + halfWindow);
if (endPage - startPage + 1 < 5) {
if (page <= halfWindow) {
endPage = Math.min(
totalPage,
endPage + (5 - (endPage - startPage + 1))
);
} else if (page + halfWindow >= totalPage) {
startPage = Math.max(1, startPage - (5 - (endPage - startPage + 1)));
}
}
if (startPage === endPage) {
return "";
}
for (let i = startPage; i <= endPage; i++) {
pageNumbers.push(
<PaginationItem key={i} onClick={() => setPage(i)}>
<PaginationLink isActive={page === i}>{i}</PaginationLink>
</PaginationItem>
);
}
return pageNumbers;
};
return (
<Pagination>
<PaginationContent>
{page - 10 >= 1 && (
<PaginationItem>
<PaginationLink
onClick={() => (page > 10 ? setPage(page - 10) : setPage(1))}
>
{/* <DoubleArrowLeftIcon /> */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M18.41 7.41L17 6l-6 6l6 6l1.41-1.41L13.83 12zm-6 0L11 6l-6 6l6 6l1.41-1.41L7.83 12z"
/>
</svg>
</PaginationLink>
</PaginationItem>
)}
<PaginationItem className="hidden md:block">
<PaginationPrevious
onClick={() => (page > 1 ? setPage(page - 1) : "")}
/>
</PaginationItem>
<PaginationItem>
<PaginationLink onClick={() => setPage(1)} isActive={page === 1}>
{1}
</PaginationLink>
</PaginationItem>
{page > 4 && (
<PaginationItem>
<PaginationEllipsis onClick={() => setPage(page - 1)} />
</PaginationItem>
)}
{renderPageNumbers()}
{page < totalPage - 3 && (
<PaginationItem>
<PaginationEllipsis onClick={() => setPage(page + 1)} />
</PaginationItem>
)}
{totalPage > 1 && (
<PaginationItem>
<PaginationLink
onClick={() => setPage(totalPage)}
isActive={page === totalPage}
>
{totalPage}
</PaginationLink>
</PaginationItem>
)}
<PaginationItem className="hidden md:block">
<PaginationNext
onClick={() => (page < totalPage ? setPage(page + 1) : "")}
/>
</PaginationItem>
{page + 10 <= totalPage && totalPage > 9 && (
<PaginationItem>
<PaginationLink
onClick={() =>
page < totalPage - 10 ? setPage(page + 10) : setPage(totalPage)
}
>
{/* <DoubleArrowRightIcon /> */}
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M5.59 7.41L7 6l6 6l-6 6l-1.41-1.41L10.17 12zm6 0L13 6l6 6l-6 6l-1.41-1.41L16.17 12z"
/>
</svg>
</PaginationLink>
</PaginationItem>
)}
</PaginationContent>
</Pagination>
);
}