Feat/enhance archive search

packages/frontend/src/graphql/index.tsx

@@ -756,7 +756,7 @@ export type AlexaLinkingUrlQuery = { __typename?: 'Query', alexaLinkingUrl?: str
 export type ArchivePageDataQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type ArchivePageDataQuery = { __typename?: 'Query', currentUser?: { __typename?: 'Admin', id: string, theme?: string | undefined, firstName: string, lastName: string, language?: string | undefined } | { __typename?: 'Trainee', id: string, theme?: string | undefined, firstName: string, lastName: string, language?: string | undefined } | { __typename?: 'Trainer', id: string, theme?: string | undefined, firstName: string, lastName: string, language?: string | undefined } | undefined, reports: Array<{ __typename: 'Report', id: string, week: number, year: number, status: ReportStatus, department?: string | undefined, days: Array<{ __typename?: 'Day', status?: DayStatusEnum | undefined, entries: Array<{ __typename?: 'Entry', id: string, time: number }> }> } | undefined> };
+export type ArchivePageDataQuery = { __typename?: 'Query', currentUser?: { __typename?: 'Admin', id: string, theme?: string | undefined, firstName: string, lastName: string, language?: string | undefined } | { __typename?: 'Trainee', id: string, theme?: string | undefined, firstName: string, lastName: string, language?: string | undefined } | { __typename?: 'Trainer', id: string, theme?: string | undefined, firstName: string, lastName: string, language?: string | undefined } | undefined, reports: Array<{ __typename: 'Report', id: string, week: number, year: number, status: ReportStatus, department?: string | undefined, summary?: string | undefined, days: Array<{ __typename?: 'Day', status?: DayStatusEnum | undefined, entries: Array<{ __typename?: 'Entry', id: string, time: number, text: string }> }> } | undefined> };
 
 export type CommentBoxDataQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -1475,11 +1475,13 @@ export const ArchivePageDataDocument = gql`
     year
     status
     department
+    summary
     days {
       status
       entries {
         id
         time
+        text
       }
     }
     __typename

packages/frontend/src/graphql/queries/archive-page-data.gql

@@ -12,11 +12,13 @@ query ArchivePageData {
     year
     status
     department
+    summary
     days {
       status
       entries {
         id
         time
+        text
       }
     }
     __typename

packages/frontend/src/locales/de.ts

@@ -54,7 +54,7 @@ const germanTranslation: Translation = {
       noResult: {
         title: 'Leider habe ich nichts gefunden',
         caption:
-          'Bitte überprüfe deine Sucheingabe und versuche es erneut. {0} Mit {1} kannst du eine bestimmte Kalenderwoche suchen oder mit {2} nach einem Zeitraum.',
+          'Bitte überprüfe deine Sucheingabe und versuche es erneut. {0} Mit {1} kannst du eine bestimmte Kalenderwoche suchen oder mit {2} nach einem Zeitraum, oder mit dep: nach einem Department.',
       },
       initial: {
         title: 'Hier gibt es noch nichts',

packages/frontend/src/locales/en.ts

@@ -52,7 +52,7 @@ const englishTranslation: Translation = {
       noResult: {
         title: "Sadly, I didn't find anything.",
         caption:
-          'Please check your search entry and try again. {0} With {1} you can search for a specific calendar week or with {2} for a time period.',
+          'Please check your search entry and try again. {0} With {1} you can search for a specific calendar week or with {2} for a time period, or with dep: for a Department.',
       },
       initial: {
         title: "There's nothing here yet.",

packages/frontend/src/pages/archive-page.tsx

@@ -23,7 +23,7 @@ import { PrimaryButton } from '../components/button'
 import { CheckBox } from '../components/checkbox'
 import Illustrations from '../components/illustration'
 import Loader from '../components/loader'
-import { Report, ReportStatus, useArchivePageDataQuery } from '../graphql'
+import { DayStatusEnum, Report, ReportStatus, useArchivePageDataQuery } from '../graphql'
 import DateHelper from '../helper/date-helper'
 import { useFetchPdf } from '../hooks/use-fetch-pdf'
 import { useIsDarkMode } from '../hooks/use-is-dark-mode'
@@ -36,6 +36,7 @@ interface ArchiveFilter {
   week?: number
   yearEnd?: number
   weekEnd?: number
+  searchText?: string
 }
 
 interface SelectedReports {
@@ -48,8 +49,30 @@ interface ArchivePageState extends ArchiveFilter {
 }
 
 const searchFilter =
-  ({ department, year, week, yearEnd, weekEnd }: ArchiveFilter) =>
-  (report?: Pick<Report, 'year' | 'week' | 'department'>): boolean => {
+  ({ department, year, week, yearEnd, weekEnd, searchText }: ArchiveFilter) =>
+  (
+    report?:
+      | {
+          __typename: 'Report'
+          id: string
+          week: number
+          year: number
+          status: ReportStatus
+          department?: string | undefined
+          summary?: string | undefined
+          days: {
+            __typename?: 'Day' | undefined
+            status?: DayStatusEnum | undefined
+            entries: {
+              __typename?: 'Entry' | undefined
+              id: string
+              time: number
+              text: string
+            }[]
+          }[]
+        }
+      | undefined
+  ): boolean => {
     if (!report) {
       return false
     }
@@ -62,14 +85,22 @@ const searchFilter =
     const departmentMatch =
       !department || (report.department && report.department.trim().toLowerCase().match(department))
 
-    return Boolean(yearMatch && weekMatch && departmentMatch && yearSpanMatch && weekSpanMatch)
+    let textMatch = true
+    if (searchText) {
+      textMatch = report.days.some((day) =>
+        day.entries.some((entry) => entry.text.toLowerCase().includes(searchText.toLowerCase()))
+      )
+      if (!textMatch && report.summary) {
+        textMatch = report.summary.toLowerCase().includes(searchText.toLowerCase())
+      }
+    }
+
+    return Boolean(yearMatch && weekMatch && departmentMatch && yearSpanMatch && weekSpanMatch && textMatch)
   }
 
 const ArchivePage: React.FunctionComponent = () => {
   const [fetchPdf, pdfLoading] = useFetchPdf()
-
   const { loading, data } = useArchivePageDataQuery()
-
   const isDarkMode = useIsDarkMode(data?.currentUser)
 
   const [state, setState] = React.useState<ArchivePageState>({
@@ -92,11 +123,9 @@ const ArchivePage: React.FunctionComponent = () => {
 
   const getCheckState = (id: string): boolean => {
     const { checkedReports } = state
-
     if (checkedReports === null) {
       return false
     }
-
     return checkedReports[id]
   }
 
@@ -122,11 +151,9 @@ const ArchivePage: React.FunctionComponent = () => {
 
   const getCheckedReports = React.useCallback((): Pick<Report, 'id'>[] => {
     const { checkedReports } = state
-
     if (checkedReports === null) {
       return []
     }
-
     return filteredReports.filter((report) => report && checkedReports[report.id]) as Pick<Report, 'id'>[]
   }, [filteredReports, state])
 
@@ -149,14 +176,15 @@ const ArchivePage: React.FunctionComponent = () => {
 
   const onInput = (event: React.FormEvent<HTMLInputElement>) => {
     const value = (event.target as HTMLInputElement).value.toLowerCase()
-    const yearMonthRegex = /([0-9]{4}):([0-9]{1,2})/
-    const departmentRegex = /([a-z A-Z]+)/
-    const timespanRegex = /(([0-9]{4}):([0-9]{1,2})) ?- ?(([0-9]{4}):([0-9]{1,2}))/
+    const yearMonthRegex = /([0-9]{4}):([0-9]{2})/
+    const departmentRegex = /(department:|dep:)([a-z A-Z]+)/
+    const timespanRegex = /(([0-9]{4}):([0-9]{2})) ?- ?(([0-9]{4}):([0-9]{2}))/
     let year: number | undefined = undefined
     let week: number | undefined = undefined
     let department: string | undefined = undefined
     let yearEnd: number | undefined = undefined
     let weekEnd: number | undefined = undefined
+    let searchText: string | undefined = undefined
 
     const yearMatch = yearMonthRegex.exec(value)
     if (yearMonthRegex.test(value) && yearMatch) {
@@ -173,8 +201,12 @@ const ArchivePage: React.FunctionComponent = () => {
     }
 
     const departmentMatch = departmentRegex.exec(value)
-    if (departmentRegex.test(value) && departmentMatch) {
-      department = departmentMatch[0].replace(/\s/g, '').trim()
+    if (departmentMatch) {
+      department = departmentMatch[2].replace(/\s/g, '').trim()
+    }
+
+    if (!departmentMatch && !timeSpanMatch && !yearMatch) {
+      searchText = value
     }
 
     setState({
@@ -184,6 +216,7 @@ const ArchivePage: React.FunctionComponent = () => {
       week,
       yearEnd,
       weekEnd,
+      searchText,
     })
   }
 
@@ -236,7 +269,6 @@ const ArchivePage: React.FunctionComponent = () => {
                   </tr>
                 )}
               </thead>
-
               <tbody>
                 {filteredReports.map((report) => {
                   if (!report) {