diff --git a/client/src/components/updates/UpdatesPage.jsx b/client/src/components/updates/UpdatesPage.jsx index 16497cfe..c36bf4e9 100644 --- a/client/src/components/updates/UpdatesPage.jsx +++ b/client/src/components/updates/UpdatesPage.jsx @@ -17,7 +17,10 @@ import { EmptyStateBadge } from '@/components/badges/EmptyStateBadge'; import { useTranslation } from 'react-i18next'; import { AccountUpdatesTable } from './AccountUpdatesTable'; -import { programSectionColumns } from './config/updatesColumnConfig'; +import { + mediaSectionColumns, + programSectionColumns, +} from './config/updatesColumnConfig'; import { UpdatesFilterPopover, UpdatesSearchInput, @@ -53,6 +56,15 @@ export const UpdatesPage = () => { const [searchQuery, setSearchQuery] = useState(''); const [tabIndex, setTabIndex] = useState(0); + const [activeFilters, setActiveFilters] = useState([]); + + const handleTabChange = (index) => { + setTabIndex(index); + setActiveFilters([]); + }; + + const filterColumns = + tabIndex === 1 ? mediaSectionColumns : programSectionColumns; const handleDownload = () => { if (tabIndex === 0) downloadProgramUpdatesAsCsv(programUpdatesData, t); @@ -93,8 +105,8 @@ export const UpdatesPage = () => { onChange={setSearchQuery} /> {}} + columns={filterColumns} + onFilterChange={setActiveFilters} /> ); @@ -134,7 +146,7 @@ export const UpdatesPage = () => { { isLoading={isLoading} onSave={refetchProgramUpdates} searchQuery={searchQuery} + activeFilters={activeFilters} showStatus showFlagAndType embedded @@ -216,6 +229,7 @@ export const UpdatesPage = () => { originalData={originalMediaUpdatesData} isLoading={isLoading} searchQuery={searchQuery} + activeFilters={activeFilters} embedded /> diff --git a/client/src/components/updates/config/useUpdatesPageData.js b/client/src/components/updates/config/useUpdatesPageData.js index 48cd8b07..47adbad1 100644 --- a/client/src/components/updates/config/useUpdatesPageData.js +++ b/client/src/components/updates/config/useUpdatesPageData.js @@ -11,7 +11,8 @@ const mapUpdatesWithFullName = (items) => { .filter(Boolean) .join(' ') .trim(); - return { ...item, fullName }; + const status = item.status ?? (item.resolved ? 'Resolved' : 'Unresolved'); + return { ...item, fullName, status }; }); }; diff --git a/client/src/contexts/hooks/TableFilter.js b/client/src/contexts/hooks/TableFilter.js index 1e6eaa5d..171e0a14 100644 --- a/client/src/contexts/hooks/TableFilter.js +++ b/client/src/contexts/hooks/TableFilter.js @@ -2,6 +2,11 @@ import { useEffect, useRef, useState } from 'react'; const str = (v) => (v ?? '').toString(); +const toDateStr = (v) => { + const d = new Date(v); + return isNaN(d.getTime()) ? null : d.toISOString().slice(0, 10); +}; + const OPERATION_FUNCTIONS = { contains: (dataVal, filterVal) => str(dataVal).toLowerCase().includes(str(filterVal).toLowerCase()), @@ -14,9 +19,15 @@ const OPERATION_FUNCTIONS = { gte: (dataVal, filterVal) => Number(dataVal) >= Number(filterVal), lte: (dataVal, filterVal) => Number(dataVal) <= Number(filterVal), is: (dataVal, filterVal) => - new Date(dataVal).getTime() === new Date(filterVal).getTime(), - before: (dataVal, filterVal) => new Date(dataVal) < new Date(filterVal), - after: (dataVal, filterVal) => new Date(dataVal) > new Date(filterVal), + toDateStr(dataVal) !== null && toDateStr(dataVal) === toDateStr(filterVal), + before: (dataVal, filterVal) => + toDateStr(dataVal) !== null && + toDateStr(filterVal) !== null && + toDateStr(dataVal) < toDateStr(filterVal), + after: (dataVal, filterVal) => + toDateStr(dataVal) !== null && + toDateStr(filterVal) !== null && + toDateStr(dataVal) > toDateStr(filterVal), contains_item: (dataVal, filterVal) => dataVal.some((item) => str(item).toLowerCase().includes(str(filterVal).toLowerCase())