SurveyResponse: add text search in filter form

src/pages/[projectSlug]/surveys/[surveyId]/responses/index.tsx

@@ -63,14 +63,18 @@ export const SurveyResponse = () => {
       <PageHeader title={survey.title} className="mt-12" description={<SurveyTabs />} />
 
       <div className="space-y-4 mt-12">
-        <H2>Beiträge aus Bürgerbeteiligung ({filteredResponses.length})</H2>
+        <H2>Beiträge aus Bürgerbeteiligung </H2>
 
         <ExternalSurveyResponseFormModal refetch={refetchResponses} />
 
         <EditableSurveyResponseFilterForm operators={operators} topics={topics} />
 
         <ZeroCase visible={filteredResponses.length} name={"Beiträge"} />
-
+        {filteredResponses.length === 1 ? (
+          <p>1 Beitrag</p>
+        ) : (
+          <p>{filteredResponses.length} Beiträge</p>
+        )}
         <section>
           {filteredResponses.map((response) => (
             <div

src/survey-responses/components/feedback/EditableSurveyResponseFilterForm.tsx

@@ -3,9 +3,13 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { Operator } from "@prisma/client"
 import clsx from "clsx"
 import { useRouter } from "next/router"
-import { PropsWithoutRef, useEffect } from "react"
+import { PropsWithoutRef, use, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
-import { LabeledCheckboxGroup, LabeledRadiobuttonGroup } from "src/core/components/forms"
+import {
+  LabeledCheckboxGroup,
+  LabeledRadiobuttonGroup,
+  LabeledTextField,
+} from "src/core/components/forms"
 import { linkStyles } from "src/core/components/links"
 import { Prettify } from "src/core/types"
 import getOperatorsWithCount from "src/operators/queries/getOperatorsWithCount"
@@ -45,6 +49,7 @@ export function EditableSurveyResponseFilterForm<S extends z.ZodType<any, any>>(
     hasnotes: queryHasnotes,
     haslocation: queryHaslocation,
     categories: queryCategories,
+    searchterm: querySearchTerm,
   } = router.query
 
   const surveyId = useParam("surveyId", "string")
@@ -68,7 +73,8 @@ export function EditableSurveyResponseFilterForm<S extends z.ZodType<any, any>>(
     queryTopics &&
     queryHasnotes &&
     queryHaslocation &&
-    queryCategories
+    queryCategories &&
+    querySearchTerm !== undefined
 
   if (!searchActive) {
     void router.push(
@@ -82,6 +88,7 @@ export function EditableSurveyResponseFilterForm<S extends z.ZodType<any, any>>(
           haslocation: "ALL", // default: radio "ALL"
           //@ts-expect-error
           categories: [...feedbackQuestion?.props?.responses.map((r: TResponse) => String(r.id))], // default: all checked
+          searchterm: "",
         },
       },
       undefined,
@@ -97,6 +104,7 @@ export function EditableSurveyResponseFilterForm<S extends z.ZodType<any, any>>(
       statuses: searchActive ? queryStatuses : [...Object.keys(surveyResponseStatus)], // default: all checked
       topics: searchActive ? queryTopics : [...topics.map((t) => String(t.id)), "0"], // default: all checked
       hasnotes: searchActive ? queryHasnotes : "ALL", // default: radio "ALL"
+      searchterm: searchActive ? querySearchTerm : "", // default: radio "ALL"
       haslocation: searchActive ? queryHaslocation : "ALL", // default: radio "ALL"
       categories: searchActive
         ? queryCategories
@@ -119,9 +127,17 @@ export function EditableSurveyResponseFilterForm<S extends z.ZodType<any, any>>(
     methods.setValue("haslocation", router.query.haslocation)
     // @ts-expect-error
     methods.setValue("categories", router.query.categories)
+    // @ts-expect-error
+    methods.setValue("searchterm", router.query.searchterm)
   }, [methods, router])
 
+  useEffect(() => {
+    // @ts-expect-error
+    methods.setFocus("searchterm")
+  }, [methods, router.query.searchterm])
+
   const handleSubmit = async (values: any) => {
+    methods.reset(undefined, { keepValues: true })
     await router.push({ query: { ...router.query, ...values } }, undefined, { scroll: false })
   }
 
@@ -227,6 +243,13 @@ export function EditableSurveyResponseFilterForm<S extends z.ZodType<any, any>>(
                 />
               )}
             </div>
+            <div className="w-[300px]">
+              <LabeledTextField
+                name="searchterm"
+                label="Freitextsuche"
+                placeholder="Beiträge nach Suchwort filtern"
+              />
+            </div>
             <button
               type="button"
               className={clsx(linkStyles, "flex mt-4")}

src/survey-responses/components/feedback/ExternalSurveyResponseFormModal.tsx

@@ -95,7 +95,7 @@ export const ExternalSurveyResponseFormModal: React.FC<Props> = ({ refetch }) =>
         className={clsx("flex flex-row gap-1", blueButtonStyles)}
       >
         <PlusIcon className="h-3.5 w-3.5" />
-        Neuen Beitrag erfassen
+        Beitrag manuell hinzufügen
       </button>
       <Modal
         className="sm:!max-w-[600px]"

src/survey-responses/components/feedback/useFilteredResponses.ts

@@ -7,18 +7,20 @@ export const useFilteredResponses = (
   surveySlug: string,
 ) => {
   const router = useRouter()
-  const { operator, statuses, topics, hasnotes, haslocation, categories } = router.query
+  const { operator, statuses, topics, hasnotes, haslocation, categories, searchterm } = router.query
 
   const { evaluationRefs } = getResponseConfigBySurveySlug(surveySlug)
 
-  if (!operator || !statuses || !topics || !hasnotes || !haslocation) return responses
+  if (!operator || !statuses || !topics || !hasnotes || !haslocation || searchterm === undefined)
+    return responses
 
   // console.log({ operator })
   // console.log({ statuses })
   // console.log({ topics })
   // console.log({ hasnotes })
   // console.log({ haslocation })
   // console.log({ categories })
+  // console.log({ searchterm })
 
   const filtered = responses
     // Handle `operator` which is the `operatorId: number` as 'string'
@@ -70,6 +72,30 @@ export const useFilteredResponses = (
       // @ts-expect-error `data` is of type unkown
       return categories.includes(String(response.data[evaluationRefs["feedback-category"]]))
     })
+    // Handle `searchterm`
+    .filter((response) => {
+      if (!searchterm) return response
+      return (
+        // @ts-expect-error - searchterm is a string
+        response.note?.toLowerCase().includes(searchterm.trim().toLowerCase()) ||
+        (response?.data &&
+          // @ts-expect-error `data` is of type unkown
+          response?.data[evaluationRefs["feedback-usertext-1"]] &&
+          // @ts-expect-error `data` is of type unkown
+          response?.data[evaluationRefs["feedback-usertext-1"]]
+            .toLowerCase()
+            // @ts-expect-error - searchterm is a string
+            .includes(searchterm.trim().toLowerCase())) ||
+        (response?.data &&
+          // @ts-expect-error `data` is of type unkown
+          response?.data[evaluationRefs["feedback-usertext-2"]] &&
+          // @ts-expect-error `data` is of type unkown
+          response?.data[evaluationRefs["feedback-usertext-2"]]
+            .toLowerCase()
+            // @ts-expect-error - searchterm is a string
+            .includes(searchterm.trim().toLowerCase()))
+      )
+    })
 
   return filtered
 }