fix: filter date in convert spit

This commit is contained in:
Sabda Yagra 2025-12-10 18:25:48 +07:00
parent 4a6973cb96
commit 720ae06d78
2 changed files with 181 additions and 16 deletions

View File

@ -92,7 +92,7 @@ const TableSPIT = () => {
const userId = getCookiesDecrypt("uie");
const userLevelId = getCookiesDecrypt("ulie");
const t = useTranslations("AnalyticsDashboard");
const [dateFilter, setDateFilter] = React.useState("");
// const [dateFilter, setDateFilter] = React.useState("");
const [totalData, setTotalData] = React.useState<number>(1);
const [sorting, setSorting] = React.useState<SortingState>([]);
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
@ -106,6 +106,9 @@ const TableSPIT = () => {
});
const [categories, setCategories] = React.useState<any[]>([]);
const roleId = getCookiesDecrypt("urie");
const [startDate, setStartDate] = React.useState("");
const [endDate, setEndDate] = React.useState("");
const columns = useTableColumns();
const table = useReactTable({
data: spitTable,
@ -159,6 +162,15 @@ const TableSPIT = () => {
}
}, [searchParams]);
React.useEffect(() => {
setPage(1);
setPagination({
pageIndex: 0,
pageSize: Number(showData),
});
fetchData();
}, [startDate, endDate]);
// React.useEffect(() => {
// fetchData();
// }, [showData, page, search, statusFilter, dateFilter]);
@ -176,10 +188,38 @@ const TableSPIT = () => {
// // endDate,
// ]);
const handleResetFilter = () => {
setSearch("");
setStatusFilter([]);
setStartDate("");
setEndDate("");
setShowData("10");
setPage(1);
// kalau pakai tanstack pagination
setPagination({
pageIndex: 0,
pageSize: 10,
});
table.resetRowSelection();
fetchData();
};
React.useEffect(() => {
fetchData();
getCategories();
}, [statusFilter, page, showData, search, dateFilter]);
}, [
startDate,
endDate,
statusFilter,
showData,
page,
search,
pagination.pageIndex,
pagination.pageSize,
]);
async function getCategories() {
const category = await listEnableCategory("4");
@ -188,11 +228,11 @@ const TableSPIT = () => {
}
// Panggil fetchData otomatis ketika dateFilter berubah
React.useEffect(() => {
if (dateFilter) {
fetchData();
}
}, [dateFilter]);
// React.useEffect(() => {
// if (dateFilter) {
// fetchData();
// }
// }, [dateFilter]);
async function fetchData() {
let isPublish;
@ -203,18 +243,27 @@ const TableSPIT = () => {
} else {
isPublish = statusFilter.includes(1) ? false : true;
}
const formattedStartDate = startDate
? format(new Date(startDate), "yyyy-MM-dd")
: "";
const formattedStartDate = dateFilter
? format(new Date(dateFilter + "T00:00:00"), "yyyy-MM-dd")
const formattedEndDate = endDate
? format(new Date(endDate), "yyyy-MM-dd")
: "";
try {
const res = await listSPIT(
// showData,
// page - 1,
// // limit,
// search,
// formattedStartDate,
// isPublish
showData,
page - 1,
// limit,
search,
formattedStartDate,
formattedEndDate,
isPublish
);
const data = res?.data?.data;
@ -231,6 +280,78 @@ const TableSPIT = () => {
}
}
// async function fetchData() {
// let isPublish;
// if (statusFilter.length === 0) {
// isPublish = "";
// } else if (statusFilter.length > 1) {
// isPublish = "";
// } else {
// isPublish = statusFilter.includes(1) ? false : true;
// }
// // ✳️ format tanggal dari input (YYYY-MM-DD)
// const formattedStartDate = startDate
// ? format(new Date(startDate), "yyyy-MM-dd")
// : "";
// const formattedEndDate = endDate
// ? format(new Date(endDate), "yyyy-MM-dd")
// : "";
// try {
// const res = await listSPIT(
// showData,
// page - 1,
// search,
// formattedStartDate,
// formattedEndDate,
// isPublish
// );
// const data = res?.data?.data;
// let contentData: any[] = data?.content || [];
// // 🔒 FRONTEND RANGE FILTER TAMBAHAN (anti bocor November)
// if (formattedStartDate || formattedEndDate) {
// contentData = contentData.filter((item) => {
// if (!item.contentCreatedDate) return false;
// // jadikan string tanggal lokal 'yyyy-MM-dd'
// const createdDateStr = format(
// new Date(item.contentCreatedDate),
// "yyyy-MM-dd"
// );
// if (formattedStartDate && createdDateStr < formattedStartDate) {
// return false;
// }
// if (formattedEndDate && createdDateStr > formattedEndDate) {
// return false;
// }
// return true;
// });
// }
// // kasih nomor urut
// const newData = contentData.map((item: any, index: number) => ({
// ...item,
// no: (page - 1) * Number(showData) + index + 1,
// }));
// setSpitTable(newData);
// setTotalData(data?.totalElements || 0);
// setTotalPage(data?.totalPages || 1);
// // optional: bersihkan selection
// table.resetRowSelection();
// } catch (error) {
// console.error("Error fetching tasks:", error);
// }
// }
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearch(e.target.value);
table.getColumn("judul")?.setFilterValue(e.target.value);
@ -312,6 +433,17 @@ const TableSPIT = () => {
<div className="flex flex-row justify-between my-1 mx-1">
<p>Filter</p>
</div>
<div className="flex justify-center px-3 pt-2 pb-1">
<Button
variant="outline"
size="sm"
className="text-xs text-gray-700 hover:bg-red-400 dark:text-white"
onClick={handleResetFilter}
>
Reset Semua Filter
</Button>
</div>
{/* <div className="mx-2 my-1">
<Label>{t("date", { defaultValue: "Date" })}</Label>
<Input
@ -321,7 +453,7 @@ const TableSPIT = () => {
className="max-w-sm"
/>
</div> */}
<div className="mx-2 my-1">
{/* <div className="mx-2 my-1">
<Label>{t("date", { defaultValue: "Tanggal" })}</Label>
<Input
type="date"
@ -333,6 +465,23 @@ const TableSPIT = () => {
}}
className="max-w-sm"
/>
</div> */}
<div className="mx-2 my-1">
<Label>Tanggal Awal</Label>
<Input
type="date"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
/>
</div>
<div className="mx-2 my-1">
<Label>Tanggal Akhir</Label>
<Input
type="date"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
/>
</div>
<Label className="ml-2 mt-2">Status</Label>

View File

@ -78,7 +78,6 @@ export async function listDataSatker(
);
}
export async function listDataImage(
size: any = "",
page: any = "",
@ -160,15 +159,28 @@ export async function listDataAudio(
);
}
// export async function listSPIT(
// size: any,
// page: any,
// title = "",
// contentCreatedDate = "",
// isPublish: any
// ) {
// return await httpGetInterceptor(
// `media/spit/pagination?enablePage=1&page=${page}&size=${size}&sort=desc&sortBy=contentTitleId&title=${title}&startDate=${contentCreatedDate}&endDate=${contentCreatedDate}&isPublish=${isPublish}`
// );
// }
export async function listSPIT(
size: any,
page: any,
title = "",
contentCreatedDate = "",
startDate = "",
endDate = "",
isPublish: any
) {
return await httpGetInterceptor(
`media/spit/pagination?enablePage=1&page=${page}&size=${size}&sort=desc&sortBy=contentTitleId&title=${title}&startDate=${contentCreatedDate}&endDate=${contentCreatedDate}&isPublish=${isPublish}`
`media/spit/pagination?enablePage=1&page=${page}&size=${size}&sort=desc&sortBy=contentTitleId&title=${title}&startDate=${startDate}&endDate=${endDate}&isPublish=${isPublish}`
);
}
@ -190,11 +202,15 @@ export async function getTagsBySubCategoryId(subCategory: any) {
}
export async function listEnableCategory(type: any, status?: boolean) {
const url = `media/categories/list?enablePage=0&sort=desc&sortBy=id&type=${type}&isInt=true&isPublish=${status || ""}`;
const url = `media/categories/list?enablePage=0&sort=desc&sortBy=id&type=${type}&isInt=true&isPublish=${
status || ""
}`;
return httpGetInterceptor(url);
}
export async function listEnableCategoryNew(type: any, status?: boolean) {
const url = `media/categories/list/publish?enablePage=0&sort=desc&sortBy=id&type=${type}&isPublish=${status || ""}`;
const url = `media/categories/list/publish?enablePage=0&sort=desc&sortBy=id&type=${type}&isPublish=${
status || ""
}`;
return httpGetInterceptor(url);
}