Merge branch 'dev-rama' of https://gitlab.com/hanifsalafi/mediahub_redesign
This commit is contained in:
commit
cbbf440ec8
|
|
@ -49,11 +49,11 @@ const columns: ColumnDef<any>[] = [
|
|||
header: "Jumlah Amplifikasi",
|
||||
cell: ({ row }) => <span>{row.getValue("link")}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "Status",
|
||||
cell: ({ row }) => <span>{row.getValue("status")}</span>,
|
||||
},
|
||||
// {
|
||||
// accessorKey: "status",
|
||||
// header: "Status",
|
||||
// cell: ({ row }) => <span>{row.getValue("status")}</span>,
|
||||
// },
|
||||
{
|
||||
accessorKey: "date",
|
||||
header: "Tanggal Penarikan",
|
||||
|
|
@ -77,10 +77,17 @@ const columns: ColumnDef<any>[] = [
|
|||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<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">
|
||||
<Eye className="w-4 h-4 me-1.5" />
|
||||
View
|
||||
View{" "}
|
||||
{row.original.mediaUpload.fileType.secondaryName &&
|
||||
row.original.mediaUpload.fileType.secondaryName.toLowerCase()}
|
||||
</DropdownMenuItem>
|
||||
</Link>
|
||||
</DropdownMenuContent>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {
|
|||
listDataTracking,
|
||||
mediaTrackingSave,
|
||||
} from "@/service/media-tracking/media-tracking";
|
||||
import { error, loading } from "@/lib/swal";
|
||||
import { error } from "@/lib/swal";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
DropdownMenu,
|
||||
|
|
@ -20,31 +20,32 @@ import {
|
|||
} from "@/components/ui/dropdown-menu";
|
||||
import { PaginationState } from "@tanstack/react-table";
|
||||
import page from "../page";
|
||||
import CustomPagination from "@/components/table/custom-pagination";
|
||||
import { close, loading } from "@/config/swal";
|
||||
|
||||
export default function TrackingBeritaCard() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [content, setContent] = useState<any[]>([]);
|
||||
const [selectedItems, setSelectedItems] = useState<number[]>([]);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [page, setPage] = React.useState(1);
|
||||
const [showData, setShowData] = React.useState("10");
|
||||
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||
pageIndex: 0,
|
||||
pageSize: Number(showData),
|
||||
});
|
||||
const [page, setPage] = useState(1);
|
||||
const [totalPage, setTotalPage] = useState(1);
|
||||
const [showData, setShowData] = useState("6");
|
||||
|
||||
useEffect(() => {
|
||||
initFecth();
|
||||
}, [showData]);
|
||||
}, [showData, page]);
|
||||
|
||||
const initFecth = async () => {
|
||||
loading();
|
||||
const response = await listDataTracking(showData, page - 1);
|
||||
const data = response?.data?.data;
|
||||
const newData = data?.content;
|
||||
setTotalPage(data?.totalPages || 1);
|
||||
newData.forEach((item: any, index: number) => {
|
||||
item.no = (page - 1) * Number(showData) + index + 1;
|
||||
});
|
||||
setContent(response?.data?.data?.content || []);
|
||||
close();
|
||||
};
|
||||
|
||||
const fecthAll = async (keyword: string) => {
|
||||
|
|
@ -117,17 +118,17 @@ export default function TrackingBeritaCard() {
|
|||
value={showData}
|
||||
onValueChange={setShowData}
|
||||
>
|
||||
<DropdownMenuRadioItem value="10">
|
||||
1 - 10 Data
|
||||
<DropdownMenuRadioItem value="12">
|
||||
1 - 6 Data
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="50">
|
||||
1 - 50 Data
|
||||
<DropdownMenuRadioItem value="12">
|
||||
1 - 12 Data
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="100">
|
||||
1 - 100 Data
|
||||
<DropdownMenuRadioItem value="60">
|
||||
1 - 60 Data
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="250">
|
||||
1 - 250 Data
|
||||
<DropdownMenuRadioItem value="120">
|
||||
1 - 120 Data
|
||||
</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
</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">
|
||||
{content.map((item: any) => (
|
||||
<Card
|
||||
key={item.id}
|
||||
className="relative overflow-hidden shadow-sm border rounded-lg cursor-pointer"
|
||||
onClick={() => handleSelect(item.id)}
|
||||
>
|
||||
<img
|
||||
src={item.thumbnailLink}
|
||||
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">
|
||||
{selectedItems.includes(item.id) && (
|
||||
<div className="w-3 h-3 bg-blue-600 rounded-sm" />
|
||||
)}
|
||||
{content?.length > 1 &&
|
||||
content.map((item: any) => (
|
||||
<Card
|
||||
key={item.id}
|
||||
className="relative overflow-hidden shadow-sm border rounded-lg cursor-pointer"
|
||||
onClick={() => handleSelect(item.id)}
|
||||
>
|
||||
<img
|
||||
src={item.thumbnailLink}
|
||||
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">
|
||||
{selectedItems.includes(item.id) && (
|
||||
<div className="w-3 h-3 bg-blue-600 rounded-sm" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="p-2 text-sm font-medium text-gray-800 truncate">
|
||||
{item.title}
|
||||
</p>
|
||||
</Card>
|
||||
))}
|
||||
<p className="p-2 text-sm font-medium text-gray-800 truncate">
|
||||
{item.title}
|
||||
</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center items-center gap-2 mt-4">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => setCurrentPage((p) => p - 1)}
|
||||
>
|
||||
<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 className="mt-3">
|
||||
{content && content?.length > 0 ? (
|
||||
<CustomPagination
|
||||
totalPage={totalPage}
|
||||
onPageChange={(data) => setPage(data)}
|
||||
/>
|
||||
) : (
|
||||
<p>No Data</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ import { data } from "jquery";
|
|||
import { useToast } from "@/components/ui/use-toast";
|
||||
import { setBanner } from "@/service/settings/settings";
|
||||
import { id } from "date-fns/locale";
|
||||
import CustomPagination from "@/components/table/custom-pagination";
|
||||
|
||||
const ContentListBanner = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -120,10 +121,10 @@ const ContentListBanner = () => {
|
|||
|
||||
React.useEffect(() => {
|
||||
fetchData();
|
||||
setPagination({
|
||||
pageIndex: 0,
|
||||
pageSize: Number(showData),
|
||||
});
|
||||
// setPagination({
|
||||
// pageIndex: 0,
|
||||
// pageSize: Number(showData),
|
||||
// });
|
||||
}, [page, showData]);
|
||||
|
||||
async function fetchData() {
|
||||
|
|
@ -398,10 +399,15 @@ const ContentListBanner = () => {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-center mt-6">
|
||||
<div className="border rounded px-3 py-1 text-sm text-gray-600">
|
||||
1
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
{data && data?.length > 0 ? (
|
||||
<CustomPagination
|
||||
totalPage={totalPage}
|
||||
onPageChange={(data) => setPage(data)}
|
||||
/>
|
||||
) : (
|
||||
<p>No Data</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@ import { UnitMapping } from "@/app/[locale]/(protected)/contributor/agenda-setti
|
|||
import SuggestionModal from "@/components/modal/suggestions-modal";
|
||||
import { formatDateToIndonesian } from "@/utils/globals";
|
||||
import ApprovalHistoryModal from "@/components/modal/approval-history-modal";
|
||||
import Image from "next/image";
|
||||
|
||||
const imageSchema = z.object({
|
||||
title: z.string().min(1, { message: "Judul diperlukan" }),
|
||||
|
|
@ -437,6 +438,22 @@ export default function FormImageDetail() {
|
|||
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 (
|
||||
<form>
|
||||
{detail !== undefined ? (
|
||||
|
|
@ -513,19 +530,19 @@ export default function FormImageDetail() {
|
|||
thumbs={{ swiper: thumbsSwiper }}
|
||||
modules={[FreeMode, Navigation, Thumbs]}
|
||||
navigation={false}
|
||||
className="w-full"
|
||||
className="h-[480px] object-cover w-full"
|
||||
>
|
||||
{detailThumb?.map((data: any) => (
|
||||
<SwiperSlide key={data.id}>
|
||||
<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}
|
||||
alt={` ${data.id}`}
|
||||
/>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
<div className=" mt-2 ">
|
||||
<div className="mt-2 mx-auto min-w-fit max-w-[600px]">
|
||||
<Swiper
|
||||
onSwiper={setThumbsSwiper}
|
||||
slidesPerView={6}
|
||||
|
|
@ -539,7 +556,7 @@ export default function FormImageDetail() {
|
|||
{detailThumb?.map((data: any) => (
|
||||
<SwiperSlide key={data.id}>
|
||||
<img
|
||||
className="object-cover h-[60px] w-[80px]"
|
||||
className="object-cover h-[60px] w-[80px] border-2 border-slate-100"
|
||||
src={data}
|
||||
alt={` ${data.id}`}
|
||||
/>
|
||||
|
|
@ -579,11 +596,11 @@ export default function FormImageDetail() {
|
|||
</div>
|
||||
<div className="mt-3 px-3 space-y-2">
|
||||
<Label>{t("preview")}</Label>
|
||||
<Card className="mt-2">
|
||||
<Card className="mt-2 w-fit">
|
||||
<img
|
||||
src={detail.thumbnailLink}
|
||||
alt="Thumbnail Gambar Utama"
|
||||
className="w-full h-auto rounded"
|
||||
className="h-[200px] rounded"
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
@ -699,119 +716,139 @@ export default function FormImageDetail() {
|
|||
)} */}
|
||||
|
||||
<Dialog open={modalOpen} onOpenChange={setModalOpen}>
|
||||
<DialogContent className="min-w-max h-[600px] overflow-y-auto">
|
||||
<DialogContent size="md" className="max-h-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("leave-comment")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
{status == "2"
|
||||
? files?.map((file, index) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className="flex flex-row gap-2 items-center"
|
||||
>
|
||||
<img src={file.url} className="w-[200px]" />
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<div className="flex justify-between text-sm">
|
||||
{file.fileName}
|
||||
<a
|
||||
onClick={() =>
|
||||
handleDeleteFileApproval(file.id)
|
||||
}
|
||||
>
|
||||
<Icon icon="humbleicons:times" color="red" />
|
||||
</a>
|
||||
<div className="flex flex-col gap-2 max-h-[208px] md:max-h-[312px] overflow-y-auto">
|
||||
{status == "2"
|
||||
? files?.map((file, index) => (
|
||||
<div
|
||||
key={file.id}
|
||||
className="flex flex-row gap-5 items-center w-full"
|
||||
>
|
||||
<div className="w-[200px] h-[100px] flex justify-center items-center">
|
||||
<img
|
||||
key={index}
|
||||
alt={`files-${index + 1}`}
|
||||
src={file.url}
|
||||
onLoad={(e) => handleImageLoad(e, index)}
|
||||
className={`h-[100px] object-cover ${
|
||||
portraitMap[index] ? "w-auto" : "!w-[200px]"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{isUserMabesApprover && (
|
||||
<div className="flex flex-row gap-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="terms"
|
||||
value="all"
|
||||
checked={filePlacements[index]?.includes(
|
||||
"all"
|
||||
)}
|
||||
onCheckedChange={(e) =>
|
||||
setupPlacement(index, "all", Boolean(e))
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor="terms"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
{t("all")}
|
||||
</label>
|
||||
</div>
|
||||
<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)
|
||||
<div className="flex flex-col gap-2 w-full">
|
||||
<div className="flex justify-between text-sm">
|
||||
{file.fileName}
|
||||
<a
|
||||
onClick={() =>
|
||||
handleDeleteFileApproval(file.id)
|
||||
}
|
||||
>
|
||||
<Icon icon="humbleicons:times" color="red" />
|
||||
</a>
|
||||
</div>
|
||||
{isUserMabesApprover && (
|
||||
<div className="flex flex-row gap-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="terms"
|
||||
value="all"
|
||||
checked={filePlacements[index]?.includes(
|
||||
"all"
|
||||
)}
|
||||
onCheckedChange={(e) =>
|
||||
setupPlacement(index, "all", Boolean(e))
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="terms"
|
||||
checked={filePlacements[index]?.includes(
|
||||
"international"
|
||||
<label
|
||||
htmlFor="terms"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
{t("all")}
|
||||
</label>
|
||||
</div>
|
||||
<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) =>
|
||||
setupPlacement(
|
||||
index,
|
||||
"international",
|
||||
Boolean(e)
|
||||
)
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor="terms"
|
||||
className="text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||
>
|
||||
Internasional
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="terms"
|
||||
checked={filePlacements[index]?.includes(
|
||||
"international"
|
||||
)}
|
||||
onCheckedChange={(e) =>
|
||||
setupPlacement(
|
||||
index,
|
||||
"international",
|
||||
Boolean(e)
|
||||
)
|
||||
}
|
||||
/>
|
||||
<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 className="flex flex-col gap-4">
|
||||
<Textarea
|
||||
placeholder="Type your message here."
|
||||
|
|
@ -821,7 +858,8 @@ export default function FormImageDetail() {
|
|||
</div>
|
||||
{status == "3" || status == "4" ? (
|
||||
<div className="flex flex-row gap-2">
|
||||
<Badge
|
||||
<Button
|
||||
size="sm"
|
||||
color={
|
||||
description === "Kualitas media kurang baik"
|
||||
? "primary"
|
||||
|
|
@ -833,9 +871,10 @@ export default function FormImageDetail() {
|
|||
}
|
||||
>
|
||||
Kualitas media kurang baik
|
||||
</Badge>
|
||||
</Button>
|
||||
|
||||
<Badge
|
||||
<Button
|
||||
size="sm"
|
||||
color={
|
||||
description === "Deskripsi kurang lengkap"
|
||||
? "primary"
|
||||
|
|
@ -847,8 +886,9 @@ export default function FormImageDetail() {
|
|||
}
|
||||
>
|
||||
Deskripsi kurang lengkap
|
||||
</Badge>
|
||||
<Badge
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
color={
|
||||
description === "Judul kurang tepat"
|
||||
? "primary"
|
||||
|
|
@ -858,11 +898,12 @@ export default function FormImageDetail() {
|
|||
onClick={() => setDescription("Judul kurang tepat")}
|
||||
>
|
||||
Judul kurang tepat
|
||||
</Badge>
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-row gap-2">
|
||||
<Badge
|
||||
<Button
|
||||
size="sm"
|
||||
color={
|
||||
description === "Konten sangat bagus"
|
||||
? "primary"
|
||||
|
|
@ -872,8 +913,9 @@ export default function FormImageDetail() {
|
|||
onClick={() => setDescription("Konten sangat bagus")}
|
||||
>
|
||||
Konten sangat bagus
|
||||
</Badge>
|
||||
<Badge
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
color={
|
||||
description === "Konten menarik"
|
||||
? "primary"
|
||||
|
|
@ -883,26 +925,29 @@ export default function FormImageDetail() {
|
|||
onClick={() => setDescription("Konten menarik")}
|
||||
>
|
||||
Konten menarik
|
||||
</Badge>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
color="primary"
|
||||
onClick={() => submit()}
|
||||
>
|
||||
{t("submit")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
color="destructive"
|
||||
onClick={() => {
|
||||
setModalOpen(false);
|
||||
}}
|
||||
>
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
<div className="flex flex-row gap-2 justify-end">
|
||||
{" "}
|
||||
<Button
|
||||
type="button"
|
||||
color="primary"
|
||||
onClick={() => submit()}
|
||||
>
|
||||
{t("submit")}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
color="destructive"
|
||||
onClick={() => {
|
||||
setModalOpen(false);
|
||||
}}
|
||||
>
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
|
|
|||
|
|
@ -1361,20 +1361,22 @@ export default function FormTaskDetail() {
|
|||
<div className="mt-4">
|
||||
<Label>Link Url</Label>
|
||||
{urlInputs.map((url: any, index: any) => (
|
||||
<div
|
||||
<Link
|
||||
key={url.id}
|
||||
href={url}
|
||||
target="_blank"
|
||||
className="flex items-center gap-2 mt-2"
|
||||
>
|
||||
<input
|
||||
type="url"
|
||||
className="border rounded p-2 w-full"
|
||||
className="border rounded p-2 w-full cursor-pointer"
|
||||
value={url}
|
||||
// onChange={(e) =>
|
||||
// handleLinkChange(index, e.target.value)
|
||||
// }
|
||||
placeholder={`Masukkan link berita ${index + 1}`}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ import { ChevronDown, ChevronUp, Trash2 } from "lucide-react";
|
|||
import { AudioRecorder } from "react-audio-voice-recorder";
|
||||
import FileUploader from "@/components/form/shared/file-uploader";
|
||||
import { Upload } from "tus-js-client";
|
||||
import { error } from "@/config/swal";
|
||||
import { close, error } from "@/config/swal";
|
||||
import { getCsrfToken } from "@/service/auth";
|
||||
import { loading } from "@/lib/swal";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
|
@ -320,37 +320,42 @@ export default function FormTask() {
|
|||
loading();
|
||||
if (imageFiles?.length == 0) {
|
||||
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) {
|
||||
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) {
|
||||
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) {
|
||||
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) => {
|
||||
await uploadResumableFile(
|
||||
index,
|
||||
String(id),
|
||||
item, // Use .file to access the actual File object
|
||||
"4",
|
||||
"0" // Optional: Replace with actual duration if available
|
||||
);
|
||||
});
|
||||
close();
|
||||
};
|
||||
|
||||
const onSubmit = (data: TaskSchema) => {
|
||||
|
|
@ -479,7 +484,8 @@ export default function FormTask() {
|
|||
successTodo();
|
||||
if (fileTypeId == "1") {
|
||||
setIsImageUploadFinish(true);
|
||||
} else if (fileTypeId == "2") {
|
||||
}
|
||||
if (fileTypeId == "2") {
|
||||
setIsVideoUploadFinish(true);
|
||||
}
|
||||
if (fileTypeId == "3") {
|
||||
|
|
|
|||
|
|
@ -281,16 +281,17 @@ const LoginForm = () => {
|
|||
return false;
|
||||
}
|
||||
const msg = response?.data?.message;
|
||||
onSubmit(data);
|
||||
|
||||
if (msg == "Continue to setup email") {
|
||||
setStep(2);
|
||||
} else if (msg == "Email is valid and OTP has been sent") {
|
||||
setStep(3);
|
||||
} else if (msg == "Username & password valid") {
|
||||
onSubmit(data);
|
||||
} else {
|
||||
error("Username / password incorrect");
|
||||
}
|
||||
// if (msg == "Continue to setup email") {
|
||||
// setStep(2);
|
||||
// } else if (msg == "Email is valid and OTP has been sent") {
|
||||
// setStep(3);
|
||||
// } else if (msg == "Username & password valid") {
|
||||
// onSubmit(data);
|
||||
// } else {
|
||||
// error("Username / password incorrect");
|
||||
// }
|
||||
// else {
|
||||
// setStep(1);
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue