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

fix: fixing filter and add thumbnail in admin update

This commit is contained in:
Sabda Yagra 2025-07-21 22:23:30 +07:00
parent 481cf1a2b4
commit e0bb77e7af
15 changed files with 435 additions and 304 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/(public)/(polda)/polda/[polda_name]/video/detail/[slug]/page.tsx
View File

@ -134,7 +134,7 @@ const DetailVideo = () => {
const handleDownload = () => {
if (downloadProgress === 0) {
if (!userId) {
router.push("/auth/login");
router.push("/auth");
} else {
sendActivityLog(2);
sendActivityLog(3);

501
app/[locale]/(public)/all/filter/page.tsx
View File

@ -34,6 +34,7 @@ import FilterImageComponent from "@/components/landing-page/filter-all/image-fil
import FilterVideoComponent from "@/components/landing-page/filter-all/video-filter-card";
import FilterDocumentComponent from "@/components/landing-page/filter-all/document-filter-card";
import FilterAudioComponent from "@/components/landing-page/filter-all/audio-filter-card";
import { useTranslations } from "next-intl";
export default function FilterPage() {
const router = useRouter();
@ -86,6 +87,8 @@ export default function FilterPage() {
const [categories, setCategories] = useState([]);
const [userLevels, setUserLevels] = useState([]);
const [contentAll, setContentAll] = useState([]);
const t = useTranslations("FilterPage");
const [isFilterOpen, setIsFilterOpen] = useState(true);
// const [startDate, endDate] = dateRange;
@ -387,244 +390,314 @@ export default function FilterPage() {
};
return (
<div className="flex flex-col">
{/* Header */}
<div className="flex flex-col md:flex-row items-start gap-5 p-10 bg-[#f7f7f7] dark:bg-black">
<div className="flex flex-col w-full max-w-screen overflow-x-hidden">
<div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p> {t("content", { defaultValue: "Content" })}</p>
{">"}
<p>
{" "}
Konten {">"} <span className="font-bold">Semua Konten</span>
<span className="font-bold">
{t("allContent", { defaultValue: "All Content" })}
</span>
</p>
<p className="font-bold">|</p>
<p>{`Hasil Pencarian ${title} `}</p>
{`Terdapat ${contentAll?.length} konten yang dapat diunduh`}
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
"downloadableContent",
{ defaultValue: "Downloadable ContentS" }
)}`}</p>
</div>
{/* Left */}
<div className="flex flex-col lg:flex-row gap-6 p-4">
<div className="lg:w-[25%] w-full bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter
</h2>
<div className="border-t border-black my-4 dark:border-white"></div>
<div className="space-y-6">
<div>
<label
htmlFor="search"
className="block text-sm font-medium text-gray-700 dark:text-white"
>
Pencarian
</label>
<Input
value={searchTitle}
onChange={(e) => setSearchTitle(e.target.value)}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
type="text"
id="search"
placeholder="Cari judul..."
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
/>
</div>
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
<div className="lg:hidden flex justify-end mb-2">
<button
onClick={() => setIsFilterOpen(!isFilterOpen)}
className="text-sm text-white bg-[#bb3523] px-4 py-1 rounded-md shadow"
>
{isFilterOpen ? "Hide Filter" : "Show Filter"}
</button>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
Tahun & Bulan
</label>
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText="Pilih Tahun dan Bulan"
showMonthYearPicker
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
Tanggal
</label>
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
{isFilterOpen && (
<div className="h-fit min-w-full lg:min-w-[280px] max-w-full lg:max-w-[300px] bg-[#f7f7f7] dark:bg-black p-4 rounded-lg shadow-md">
<h2 className="text-lg font-semibold mb-4 flex items-center gap-1">
<Icon icon="stash:filter-light" fontSize={30} />
Filter
</h2>
<div className="border-t border-black my-4 dark:border-white"></div>
<div className="space-y-6">
<div>
<label
htmlFor="search"
className="block text-sm font-medium text-gray-700 dark:text-white"
>
{t("search", { defaultValue: "Search" })}
</label>
<Input
value={searchTitle}
onChange={(e) => setSearchTitle(e.target.value)}
onKeyUp={handleKeyUp}
onKeyDown={handleKeyDown}
type="text"
id="search"
placeholder={t("searchTitle", {
defaultValue: "Search Title",
})}
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]}
endDate={dateRange[1]}
onChange={(update) => {
setDateRange(update);
}}
placeholderText="Pilih Tanggal"
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">
{handleClose ? (
<Icon
icon="carbon:close-filled"
onClick={handleDeleteDate}
width="20"
inline
color="#216ba5"
/>
) : (
""
)}
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("monthYear", { defaultValue: "Month Year" })}
</label>
<ReactDatePicker
selected={monthYearFilter}
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-white">
{t("date", { defaultValue: "Date" })}
</label>
<div className="flex flex-row justify justify-between gap-2">
<ReactDatePicker
selectsRange
className="mt-1 w-full border text-sm rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
startDate={dateRange[0]}
endDate={dateRange[1]}
onChange={(update) => {
setDateRange(update);
}}
placeholderText={t("selectDate", {
defaultValue: "Select Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">
{handleClose ? (
<Icon
icon="carbon:close-filled"
onClick={handleDeleteDate}
width="20"
inline
color="#216ba5"
/>
) : (
""
)}
</div>
</div>
</div>
</div>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
Kategori
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
{t("categories", { defaultValue: "Categories" })}
</h3>
<ul className="mt-2 space-y-2">
{categories.map((category: any) => (
<li key={category?.id}>
<label
className="inline-flex items-center"
htmlFor={`${category.id}`}
>
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
</span>
</label>
</li>
))}
{/* <div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
}
disabled={categoryPage === 1}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="m13.15 16.15l-3.625-3.625q-.125-.125-.175-.25T9.3 12t.05-.275t.175-.25L13.15 7.85q.075-.075.163-.112T13.5 7.7q.2 0 .35.138T14 8.2v7.6q0 .225-.15.363t-.35.137q-.05 0-.35-.15"
/>
</svg>
</button>
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={i}
onClick={() => setCategoryPage(i + 1)}
className={`px-3 py-1 border rounded ${
categoryPage === i + 1
? "bg-[#bb3523] text-white"
: ""
}`}
>
{i + 1}
</button>
))}
<button
onClick={() =>
setCategoryPage((prev) =>
Math.min(prev + 1, categoryTotalPages)
)
}
disabled={categoryPage === categoryTotalPages}
className="px-3 py-1 border rounded disabled:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
fill="currentColor"
d="M10.5 16.3q-.2 0-.35-.137T10 15.8V8.2q0-.225.15-.362t.35-.138q.05 0 .35.15l3.625 3.625q.125.125.175.25t.05.275t-.05.275t-.175.25L10.85 16.15q-.075.075-.162.113t-.188.037"
/>
</svg>
</button>
</div> */}
</ul>
</div>
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
Format
</h3>
<ul className="mt-2 space-y-2">
<li>
<label className="inline-flex items-center">
<Checkbox
id={`${category.id}`}
value={category.id}
checked={categoryFilter.includes(String(category.id))}
id="png"
value="png"
checked={formatFilter.includes("png")}
onCheckedChange={(e) =>
handleCategoryFilter(Boolean(e), category.id)
handleFormatFilter(Boolean(e), "png")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
{category?.name}
PNG
</span>
</label>
</li>
))}
</ul>
</div>
{/* Garis */}
<div className="border-t border-black my-4 dark:border-white"></div>
{/* Garis */}
<div>
<h3 className="text-sm font-medium text-gray-700 dark:text-white">
Format Konten
</h3>
<ul className="mt-2 space-y-2">
<li>
<label className="inline-flex items-center">
<Checkbox
id="png"
value="png"
checked={formatFilter.includes("image")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "image")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
Foto
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="jpeg"
value="jpeg"
checked={formatFilter.includes("video")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "video")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
Audio Visual
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="jpg"
value="jpg"
checked={formatFilter.includes("document")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "document")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
Teks
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="jpg"
value="jpg"
checked={formatFilter.includes("audio")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "audio")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
Audio
</span>
</label>
</li>
</ul>
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a
onClick={cleanCheckbox}
className="text-[#bb3523] cursor-pointer"
>
<b>Reset Filter</b>
</a>
<li>
<label className="inline-flex items-center">
<Checkbox
id="jpeg"
value="jpeg"
checked={formatFilter.includes("jpeg")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "jpeg")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
JPEG
</span>
</label>
</li>
<li>
<label className="inline-flex items-center">
<Checkbox
id="jpg"
value="jpg"
checked={formatFilter.includes("jpg")}
onCheckedChange={(e) =>
handleFormatFilter(Boolean(e), "jpg")
}
/>
<span className="ml-2 text-gray-700 dark:text-white">
JPG
</span>
</label>
</li>
</ul>
</div>
<div className="border-t border-black dark:border-white my-4"></div>
<div className="text-center">
<a
onClick={cleanCheckbox}
className="text-[#bb3523] cursor-pointer"
>
<b>Reset Filter</b>
</a>
</div>
</div>
</div>
</div>
)}
{/* Konten Kanan */}
<div className="flex-1 w-[75%]">
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
<select
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
onChange={(e) => handleSorting(e)}
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
>
<option value="terbaru">Terbaru</option>
<option value="terpopuler">Terpopuler</option>
</select>
</div>
<div className="flex flex-col gap-2 w-full">
<FilterImageComponent
categoryFilter={categoryFilter}
sortByOpt={sortByOpt}
startDateString={startDateString}
endDateString={endDateString}
monthYearFilter={monthYearFilter}
/>
<FilterVideoComponent
categoryFilter={categoryFilter}
sortByOpt={sortByOpt}
startDateString={startDateString}
endDateString={endDateString}
monthYearFilter={monthYearFilter}
/>
<FilterDocumentComponent
categoryFilter={categoryFilter}
sortByOpt={sortByOpt}
startDateString={startDateString}
endDateString={endDateString}
monthYearFilter={monthYearFilter}
/>
<FilterAudioComponent
categoryFilter={categoryFilter}
sortByOpt={sortByOpt}
startDateString={startDateString}
endDateString={endDateString}
monthYearFilter={monthYearFilter}
/>
<div className="w-full pl-4 pr-4 lg:pr-16 pb-4 overflow-x-hidden">
<div className="w-full">
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">
{t("sortBy", { defaultValue: "Sort By" })}
</h2>
<select
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
onChange={(e) => handleSorting(e)}
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
>
<option value="latest">
{t("latest", { defaultValue: "Latest" })}
</option>
<option value="popular">
{t("mostPopular", { defaultValue: "Most Popular" })}
</option>
</select>
</div>
<div className="flex flex-col gap-4 w-full">
<FilterImageComponent
categoryFilter={categoryFilter}
sortByOpt={sortByOpt}
startDateString={startDateString}
endDateString={endDateString}
monthYearFilter={monthYearFilter}
/>
<FilterVideoComponent
categoryFilter={categoryFilter}
sortByOpt={sortByOpt}
startDateString={startDateString}
endDateString={endDateString}
monthYearFilter={monthYearFilter}
/>
<FilterDocumentComponent
categoryFilter={categoryFilter}
sortByOpt={sortByOpt}
startDateString={startDateString}
endDateString={endDateString}
monthYearFilter={monthYearFilter}
/>
<FilterAudioComponent
categoryFilter={categoryFilter}
sortByOpt={sortByOpt}
startDateString={startDateString}
endDateString={endDateString}
monthYearFilter={monthYearFilter}
/>
</div>
</div>
</div>
</div>

37
app/[locale]/(public)/audio/filter/page.tsx
View File

@ -488,10 +488,16 @@ const FilterPage = () => {
<div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
<p>
{" "}
Audio {">"} <span className="font-bold">{t("allAudio", { defaultValue: "All Audio" })}</span>
Audio {">"}{" "}
<span className="font-bold">
{t("allAudio", { defaultValue: "All Audio" })}
</span>
</p>
<p className="font-bold">|</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableAudio", { defaultValue: "Downloadable Audio" })}`}</p>
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
"downloadableAudio",
{ defaultValue: "Downloadable Audio" }
)}`}</p>
</div>
{/* Left */}
@ -531,7 +537,9 @@ const FilterPage = () => {
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
onChange={(date) => setMonthYearFilter(date)}
dateFormat="MM | yyyy"
placeholderText={t("selectYear", { defaultValue: "Select Year" })}
placeholderText={t("selectYear", {
defaultValue: "Select Year",
})}
showMonthYearPicker
/>
</div>
@ -549,7 +557,9 @@ const FilterPage = () => {
onChange={(update) => {
setDateRange(update);
}}
placeholderText={t("searchDate", { defaultValue: "Search Date" })}
placeholderText={t("searchDate", {
defaultValue: "Search Date",
})}
onCalendarClose={() => setCalenderState(!calenderState)}
/>
<div className="flex items-center">
@ -593,8 +603,7 @@ const FilterPage = () => {
</label>
</li>
))}
<div className="mt-4 flex gap-2 justify-center items-center">
{/* Tombol Prev */}
{/* <div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
@ -615,7 +624,6 @@ const FilterPage = () => {
</svg>
</button>
{/* Nomor Halaman */}
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={i}
@ -628,7 +636,6 @@ const FilterPage = () => {
</button>
))}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
@ -650,7 +657,7 @@ const FilterPage = () => {
/>
</svg>
</button>
</div>
</div> */}
</ul>
</div>
{/* Garis */}
@ -709,14 +716,20 @@ const FilterPage = () => {
<div className="w-full pr-4 lg:pr-16 pb-4">
<Reveal>
<div className="flex flex-col items-end mb-4">
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })} </h2>
<h2 className="text-lg font-semibold">
{t("sortBy", { defaultValue: "Sort By" })}{" "}
</h2>
<select
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
onChange={(e) => handleSorting(e)}
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
>
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
<option value="latest">
{t("latest", { defaultValue: "Latest" })}
</option>
<option value="popular">
{t("mostPopular", { defaultValue: "Most Popular" })}
</option>
</select>
</div>

7
app/[locale]/(public)/document/filter/page.tsx
View File

@ -609,8 +609,7 @@ const FilterPage = () => {
</label>
</li>
))}
<div className="mt-4 flex gap-2 justify-center items-center">
{/* Tombol Prev */}
{/* <div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
@ -631,7 +630,6 @@ const FilterPage = () => {
</svg>
</button>
{/* Nomor Halaman */}
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={i}
@ -644,7 +642,6 @@ const FilterPage = () => {
</button>
))}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
@ -666,7 +663,7 @@ const FilterPage = () => {
/>
</svg>
</button>
</div>
</div> */}
</ul>
</div>
{/* Garis */}

44
app/[locale]/(public)/image/filter/page.tsx
View File

@ -485,24 +485,24 @@ const FilterPage = () => {
clearTimeout(typingTimer);
};
const shimmer = (w: number, h: number) => `
<svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="g">
<stop stop-color="#bcbcbd" offset="20%" />
<stop stop-color="#f9fafb" offset="50%" />
<stop stop-color="#bcbcbd" offset="70%" />
</linearGradient>
</defs>
<rect width="${w}" height="${h}" fill="#bcbcbd" />
<rect id="r" width="${w}" height="${h}" fill="url(#g)" />
<animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
</svg>`;
// const shimmer = (w: number, h: number) => `
// <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
// <defs>
// <linearGradient id="g">
// <stop stop-color="#bcbcbd" offset="20%" />
// <stop stop-color="#f9fafb" offset="50%" />
// <stop stop-color="#bcbcbd" offset="70%" />
// </linearGradient>
// </defs>
// <rect width="${w}" height="${h}" fill="#bcbcbd" />
// <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
// <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite" />
// </svg>`;
const toBase64 = (str: string) =>
typeof window === "undefined"
? Buffer.from(str).toString("base64")
: window.btoa(str);
// const toBase64 = (str: string) =>
// typeof window === "undefined"
// ? Buffer.from(str).toString("base64")
// : window.btoa(str);
return (
<div className="flex flex-col">
@ -517,8 +517,9 @@ const FilterPage = () => {
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableImage", { defaultValue: "Downloadable Image" })}`}</p>
</div>
{/* Left */}
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
{/* Left */}
<div className="lg:hidden flex justify-end mb-2">
<button
onClick={() => setIsFilterOpen(!isFilterOpen)}
@ -626,8 +627,7 @@ const FilterPage = () => {
</label>
</li>
))}
<div className="mt-4 flex gap-2 justify-center items-center">
{/* Tombol Prev */}
{/* <div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
@ -648,7 +648,6 @@ const FilterPage = () => {
</svg>
</button>
{/* Nomor Halaman */}
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={i}
@ -663,7 +662,6 @@ const FilterPage = () => {
</button>
))}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
@ -685,7 +683,7 @@ const FilterPage = () => {
/>
</svg>
</button>
</div>
</div> */}
</ul>
</div>
{/* Garis */}

7
app/[locale]/(public)/video/filter/page.tsx
View File

@ -610,8 +610,7 @@ const FilterPage = () => {
</label>
</li>
))}
<div className="mt-4 flex gap-2 justify-center items-center">
{/* Tombol Prev */}
{/* <div className="mt-4 flex gap-2 justify-center items-center">
<button
onClick={() =>
setCategoryPage((prev) => Math.max(prev - 1, 1))
@ -632,7 +631,6 @@ const FilterPage = () => {
</svg>
</button>
{/* Nomor Halaman */}
{Array.from({ length: categoryTotalPages }, (_, i) => (
<button
key={i}
@ -645,7 +643,6 @@ const FilterPage = () => {
</button>
))}
{/* Tombol Next */}
<button
onClick={() =>
setCategoryPage((prev) =>
@ -667,7 +664,7 @@ const FilterPage = () => {
/>
</svg>
</button>
</div>
</div> */}
</ul>
</div>
{/* Garis */}

99
components/form/content/video-update-form.tsx
View File

@ -106,25 +106,21 @@ const CustomEditor = dynamic(
export default function FormVideoUpdate() {
const MySwal = withReactContent(Swal);
const router = useRouter();
const { id } = useParams() as { id: string };
console.log(id);
const editor = useRef(null);
type VideoSchema = z.infer<typeof videoSchema>;
let progressInfo: any = [];
let counterUpdateProgress = 0;
const [progressList, setProgressList] = useState<any>([]);
let uploadPersen = 0;
const [isStartUpload, setIsStartUpload] = useState(false);
const [counterProgress, setCounterProgress] = useState(0);
const t = useTranslations("Form");
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const taskId = Cookies.get("taskId");
const scheduleId = Cookies.get("scheduleId");
const scheduleType = Cookies.get("scheduleType");
const [categories, setCategories] = useState<Category[]>([]);
const [selectedCategory, setSelectedCategory] = useState<any>();
const [tags, setTags] = useState<any[]>([]);
@ -133,7 +129,6 @@ export default function FormVideoUpdate() {
const [selectedPublishers, setSelectedPublishers] = useState<number[]>([]);
const [detailVideo, setDetailVideo] = useState<any>([]);
const [thumbsSwiper, setThumbsSwiper] = useState<any>(null);
const [files, setFiles] = useState<FileWithPreview[]>([]);
const [selectedTarget, setSelectedTarget] = useState("");
const [unitSelection, setUnitSelection] = useState({
@ -263,7 +258,7 @@ export default function FormVideoUpdate() {
setDetail(details);
setSelectedTarget(String(details.category.id));
// Set form values immediately and then again after a delay to ensure editor is ready
setValue("title", details.title);
setValue("description", details.htmlDescription);
@ -609,7 +604,7 @@ export default function FormVideoUpdate() {
const fileList = files.map((file: any) => (
<div
key={file.id} // Gunakan ID file sebagai key
key={file.id}
className="flex justify-between border px-3.5 py-3 my-6 rounded-md"
>
<div className="flex gap-3 items-center">
@ -728,7 +723,9 @@ export default function FormVideoUpdate() {
<div className="flex flex-col lg:flex-row gap-10">
<Card className="w-full lg:w-8/12">
<div className="px-6 py-6">
<p className="text-lg font-semibold mb-3">{t("form-video", { defaultValue: "Form Video" })}</p>
<p className="text-lg font-semibold mb-3">
{t("form-video", { defaultValue: "Form Video" })}
</p>
<div className="gap-5 mb-5">
{/* Input Title */}
<div className="space-y-2 py-3">
@ -767,14 +764,18 @@ export default function FormVideoUpdate() {
</SelectTrigger>
<SelectContent>
{/* Show the category from details if it doesn't exist in categories list */}
{detail && !categories.find(cat => String(cat.id) === String(detail.category.id)) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{detail &&
!categories.find(
(cat) =>
String(cat.id) === String(detail.category.id)
) && (
<SelectItem
key={String(detail.category.id)}
value={String(detail.category.id)}
>
{detail.category.name}
</SelectItem>
)}
{categories.map((category) => (
<SelectItem
key={String(category.id)}
@ -789,7 +790,9 @@ export default function FormVideoUpdate() {
</div>
<div className="py-3 space-y-2">
<Label>{t("description", { defaultValue: "Description" })}</Label>
<Label>
{t("description", { defaultValue: "Description" })}
</Label>
<Controller
control={control}
name="description"
@ -804,7 +807,9 @@ export default function FormVideoUpdate() {
)}
</div>
<div className="py-3 space-y-2">
<Label>{t("select-file", { defaultValue: "Select File" })}</Label>
<Label>
{t("select-file", { defaultValue: "Select File" })}
</Label>
{/* <Input
id="fileInput"
type="file"
@ -820,7 +825,9 @@ export default function FormVideoUpdate() {
{t("drag-file", { defaultValue: "Drag File" })}
</h4>
<div className=" text-xs text-muted-foreground">
{t("upload-file-video-max", { defaultValue: "Upload File Video Max" })}
{t("upload-file-video-max", {
defaultValue: "Upload File Video Max",
})}
</div>
</div>
</div>
@ -829,7 +836,9 @@ export default function FormVideoUpdate() {
<div>{fileList}</div>
<div className=" flex justify-between gap-2">
<div className="flex flex-row items-center gap-3 py-3">
<Label>{t("watermark", { defaultValue: "Watermark" })}</Label>
<Label>
{t("watermark", { defaultValue: "Watermark" })}
</Label>
<div className="flex items-center gap-3">
<Switch defaultChecked color="primary" id="c2" />
</div>
@ -869,7 +878,9 @@ export default function FormVideoUpdate() {
rel="noopener noreferrer"
className="text-blue-500 text-sm"
>
{t("view-file", { defaultValue: "View File" })}
{t("view-file", {
defaultValue: "View File",
})}
</a>
</div>
<div>
@ -887,7 +898,9 @@ export default function FormVideoUpdate() {
}
className="form-checkbox"
/>
<span>{t("all", { defaultValue: "All" })}</span>
<span>
{t("all", { defaultValue: "All" })}
</span>
</Label>
</div>
<div>
@ -980,7 +993,7 @@ export default function FormVideoUpdate() {
)}
</div>
</div>
<div className="mt-3 px-3 space-y-2">
{/* <div className="mt-3 px-3 space-y-2">
<Label>{t("preview", { defaultValue: "Preview" })}</Label>
<Card className="mt-2">
<img
@ -989,7 +1002,39 @@ export default function FormVideoUpdate() {
className="w-full h-auto rounded"
/>
</Card>
</div> */}
<div className="mt-3 px-3 space-y-2">
<Label>{t("preview", { defaultValue: "Preview" })}</Label>
<Input
type="file"
accept="image/*"
onChange={(e) => {
const file = e.target.files?.[0];
if (file) {
setSelectedFiles([file]);
}
}}
className="dark:border dark:border-gray-500 dark:rounded-lg"
/>
{selectedFiles.length > 0 ? (
<Card className="mt-2">
<img
src={URL.createObjectURL(selectedFiles[0])}
alt="Thumbnail Baru"
className="w-full h-auto rounded"
/>
</Card>
) : (
<Card className="mt-2">
<img
src={detail?.thumbnailLink}
alt="Thumbnail Lama"
className="w-full h-auto rounded"
/>
</Card>
)}
</div>
<div className="px-3 py-3">
<div className="space-y-2">
<Label>{t("tags", { defaultValue: "Tags" })}</Label>
@ -1027,7 +1072,9 @@ export default function FormVideoUpdate() {
</div>
<div className="px-3 py-3">
<div className="flex flex-col gap-6 space-y-2">
<Label>{t("publish-target", { defaultValue: "Publish Target" })}</Label>
<Label>
{t("publish-target", { defaultValue: "Publish Target" })}
</Label>
{options.map((option: Option) => (
<div key={option.id} className="flex gap-2 items-center">
<Checkbox
@ -1047,7 +1094,9 @@ export default function FormVideoUpdate() {
</div>
<div className="px-3 py-3 flex flex-row items-center text-blue-500 gap-2 text-sm">
<MailIcon />
<p className="">{t("suggestion-box", { defaultValue: "Suggestion Box" })} (0)</p>
<p className="">
{t("suggestion-box", { defaultValue: "Suggestion Box" })} (0)
</p>
</div>
<div className="px-3 py-3">
<p>{t("information", { defaultValue: "Information" })}:</p>

12
components/landing-page/filter-all/audio-filter-card.tsx
View File

@ -145,7 +145,7 @@ export default function FilterAudioComponent(props: {
<div className="flex flex-row gap-6">
<Link
href={`/audio/detail/${audio?.slug}`}
className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow-md rounded-lg p-4 gap-4 w-full"
className="flex flex-col sm:flex-row items-center bg-white dark:bg-gray-800 cursor-pointer shadow- rounded-lg p-2 gap-4 w-full"
>
<div className="flex items-center justify-center bg-red-500 text-white rounded-lg w-16 h-8 lg:h-16">
<svg
@ -165,9 +165,9 @@ export default function FilterAudioComponent(props: {
<div className="flex flex-col flex-1">
<div className="text-gray-500 dark:text-gray-400 flex flex-row text-sm">
{formatDateToIndonesian(new Date(audio?.createdAt))}{" "}
{audio?.timezone ? audio?.timezone : "WIB"} |{" "}
<Icon icon="formkit:eye" width="15" height="15" />{" "}
{audio?.clickCount}{" "}
{audio?.timezone ? audio?.timezone : "WIB"} | &nbsp;
<Icon icon="formkit:eye" width="15" height="15" />
&nbsp;{audio?.clickCount}{" "}
</div>
<div className="font-semibold text-gray-900 dark:text-white mt-1 text-sm h-5 hover:h-auto truncate hover:whitespace-normal hover:overflow-visible">
{audio?.title}
@ -178,8 +178,8 @@ export default function FilterAudioComponent(props: {
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
<CarouselPrevious className="-ml-0" />
<CarouselNext className="-mr-0" />
</Carousel>
</div>
) : (

4
components/landing-page/filter-all/document-filter-card.tsx
View File

@ -192,8 +192,8 @@ export default function FilterDocumentComponent(props: {
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
<CarouselPrevious className="-ml-0" />
<CarouselNext className="-mr-0" />
</Carousel>
</div>
) : (

4
components/landing-page/filter-all/image-filter-card.tsx
View File

@ -164,8 +164,8 @@ export default function FilterImageComponent(props: {
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
<CarouselPrevious className="-ml-0" />
<CarouselNext className="-mr-0" />
</Carousel>
</div>
) : (

4
components/landing-page/filter-all/video-filter-card.tsx
View File

@ -165,8 +165,8 @@ export default function FilterVideoComponent(props: {
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
<CarouselPrevious className="-ml-0" />
<CarouselNext className="-mr-0" />
</Carousel>
</div>
) : (

2
components/landing-page/search-section-new.tsx
View File

@ -1,6 +1,5 @@
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import router from "next/router";
import React, { useEffect, useState } from "react";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
@ -13,7 +12,6 @@ import {
} from "../ui/select";
import Image from "next/image";
import { getHeroData } from "@/service/landing/landing";
import { title } from "process";
import { htmlToString } from "@/utils/globals";
import { Link, useRouter } from "@/i18n/routing";
import { Button } from "../ui/button";

2
components/main/audio-detail.tsx
View File

@ -298,7 +298,7 @@ const DetailAudio = () => {
async function shareToEmail() {
if (Number(userRoleId) < 1 || userRoleId == undefined) {
router.push("/auth/login");
router.push("/auth");
} else {
const data = {
mediaUploadId: id?.split("-")?.[0],

11
messages/en.json
View File

@ -641,6 +641,9 @@
"timeTable1": "TIMETABLE /"
},
"FilterPage": {
"downloadableContent": "Downloadable Content",
"content": "Content",
"allContent":"All Content",
"image": "Image",
"video": "Video",
"text": "Text",
@ -653,10 +656,10 @@
"searchTitle": "Find Title...",
"monthYear": "Month and Year",
"thereIs": "There is",
"downloadableImage": "downloadable image",
"downloadableVideo": "downloadable video",
"downloadableText": "downloadable text",
"downloadableAudio": "downloadable audio",
"downloadableImage": "Downloadable image",
"downloadableVideo": "Downloadable video",
"downloadableText": "Downloadable text",
"downloadableAudio": "Downloadable audio",
"date": "Date",
"selectYear": "Select Month and Year",
"selectDate": "Select Date",

3
messages/in.json
View File

@ -642,6 +642,9 @@
"timeTable1": "JADWAL /"
},
"FilterPage": {
"content": "Konten",
"downloadableContent": "artikel berisi konten yang dapat di unduh",
"allContent": "Semua Konten",
"image": "Foto",
"video": "Audio Visual",
"text": "Teks",