Show number of matches

ingef · May 28, 2024 · 7a78500 · 7a78500
1 parent ef1dae0
commit 7a78500
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 19 deletions.
diff --git 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 (
       <div className="overflow-hidden w-full flex flex-col">
-        <TimelineSearch />
+        <TimelineSearch matches={matches} />
         <Root className={className} isEmpty={isEmpty}>
-          {!isEmpty && (
-            <SxEntityCard
+          {!isEmpty && !searchTerm && (
+            <EntityCard
+              className="col-span-2"
               blurred={blurred}
               infos={currentEntityInfos}
               timeStratifiedInfos={currentEntityTimeStratifiedInfos}
@@ -374,8 +376,6 @@ const groupByQuarter = (
         : year.quarterwiseData.some(({ events }) => 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
@@ -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,14 +13,19 @@ export const TimelineSearch = () => {
   if (!searchVisible) return null;
 
   return (
-    <div className="w-full flex items-center pl-3 pr-5 py-3">
+    <div className="w-full flex flex-col pl-3 pr-5 py-3 gap-1">
       <BaseInput
         inputType="text"
         placeholder={t("history.search")}
         value={term}
         onChange={(value) => setTerm(value as string)}
         className="w-full"
       />
+      {searchTerm && (
+        <span className="text-xs text-gray-500">
+          {matches} {t("history.matches", { count: matches })}
+        </span>
+      )}
     </div>
   );
 };
diff --git 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
@@ -473,6 +473,8 @@
   },
   "history": {
     "search": "Search",
+    "matches_one": "Match",
+    "matches_other": "Matches",
     "noData": "No data available",
     "blurred": "Data visibility",
     "emptyTimeline": {