diff --git a/frontend/src/js/entity-history/Timeline.tsx b/frontend/src/js/entity-history/Timeline.tsx index 9c40408379..8dfac043fc 100644 --- a/frontend/src/js/entity-history/Timeline.tsx +++ b/frontend/src/js/entity-history/Timeline.tsx @@ -51,10 +51,6 @@ const Divider = styled("div")` background: ${({ theme }) => theme.col.grayLight}; `; -const SxEntityCard = styled(EntityCard)` - grid-column: span 2; -`; - const SxTimelineEmptyPlaceholder = styled(TimelineEmptyPlaceholder)` grid-column: span 2; height: 100%; @@ -91,6 +87,8 @@ export const Timeline = memo( (state) => state.startup.config.currency, ); + const { searchTerm } = useTimelineSearch(); + const { columns, dateColumn, @@ -99,24 +97,28 @@ export const Timeline = memo( rootConceptIdsByColumn, } = useColumnInformation(); - const { eventsByQuarterWithGroups } = useTimeBucketedSortedData(data, { - columns, - rootConceptIdsByColumn, - sourceColumn, - dateColumn, - sources, - secondaryIds: columnBuckets.secondaryIds, - }); + const { matches, eventsByQuarterWithGroups } = useTimeBucketedSortedData( + data, + { + columns, + rootConceptIdsByColumn, + sourceColumn, + dateColumn, + sources, + secondaryIds: columnBuckets.secondaryIds, + }, + ); const isEmpty = eventsByQuarterWithGroups.length === 0 || !dateColumn || !sourceColumn; return (
- + - {!isEmpty && ( - events.length > 0), ); - console.log(filteredSortedEvents); - return filteredSortedEvents; }; @@ -423,7 +423,16 @@ const useTimeBucketedSortedData = ( sourceColumn, ); + const matches = searchTerm + ? eventsByQuarterWithGroups + .flatMap(({ quarterwiseData }) => + quarterwiseData.flatMap(({ groupedEvents }) => groupedEvents), + ) + .reduce((acc, events) => acc + events.length, 0) + : 0; + return { + matches, eventsByQuarterWithGroups, }; }, [ diff --git a/frontend/src/js/entity-history/TimelineSearch.tsx b/frontend/src/js/entity-history/TimelineSearch.tsx index 36b65c7fe5..0bb93a71f6 100644 --- a/frontend/src/js/entity-history/TimelineSearch.tsx +++ b/frontend/src/js/entity-history/TimelineSearch.tsx @@ -4,7 +4,7 @@ import { useDebounce } from "../common/helpers/useDebounce"; import BaseInput from "../ui-components/BaseInput"; import { useTimelineSearch } from "./timelineSearchState"; -export const TimelineSearch = () => { +export const TimelineSearch = ({ matches }: { matches: number }) => { const { searchVisible, searchTerm, setSearchTerm } = useTimelineSearch(); const [term, setTerm] = useState(searchTerm || ""); const { t } = useTranslation(); @@ -13,7 +13,7 @@ export const TimelineSearch = () => { if (!searchVisible) return null; return ( -
+
{ onChange={(value) => setTerm(value as string)} className="w-full" /> + {searchTerm && ( + + {matches} {t("history.matches", { count: matches })} + + )}
); }; diff --git a/frontend/src/localization/de.json b/frontend/src/localization/de.json index fff4f77745..7501c91d60 100644 --- a/frontend/src/localization/de.json +++ b/frontend/src/localization/de.json @@ -473,6 +473,8 @@ }, "history": { "search": "Suche", + "matches_one": "Eintrag", + "matches_other": "Einträge", "noData": "Keine Daten verfügbar", "blurred": "Daten-Sichtbarkeit", "emptyTimeline": { diff --git a/frontend/src/localization/en.json b/frontend/src/localization/en.json index aaf71bd4eb..c9a3e426f9 100644 --- a/frontend/src/localization/en.json +++ b/frontend/src/localization/en.json @@ -473,6 +473,8 @@ }, "history": { "search": "Search", + "matches_one": "Match", + "matches_other": "Matches", "noData": "No data available", "blurred": "Data visibility", "emptyTimeline": {