SurveyResponse: add headline for list, add information in item button

FixMyBerlin · Jan 9, 2025 · 0f9ef9b · 0f9ef9b
1 parent cbc4158
commit 0f9ef9b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 27 deletions.
diff --git a/src/pages/[projectSlug]/surveys/[surveyId]/responses/map/index.tsx b/src/pages/[projectSlug]/surveys/[surveyId]/responses/map/index.tsx
@@ -1,5 +1,6 @@
 import { Spinner } from "@/src/core/components/Spinner"
 import { PageHeader } from "@/src/core/components/pages/PageHeader"
+import { H2 } from "@/src/core/components/text"
 import { LayoutRs, MetaTags } from "@/src/core/layouts"
 import { useProjectSlug } from "@/src/core/routes/usePagesDirectoryProjectSlug"
 import getOperatorsWithCount from "@/src/server/operators/queries/getOperatorsWithCount"
@@ -86,6 +87,14 @@ export const SurveyResponseWithLocation = () => {
       </div>
 
       <div className="mt-12 space-y-4 px-4">
+        {mapSelectedResponses.length > 0 && (
+          <div className="flex justify-end">
+            <H2 className="lg:w-[580px]">
+              Ausgewählte{mapSelectedResponses.length === 1 ? "r" : ""} Hinweis
+              {mapSelectedResponses.length !== 1 ? "e" : ""}:
+            </H2>
+          </div>
+        )}
         <div
           className={clsx(
             // todo survey clean up after survey BB (status are too long, blt are not used)

diff --git a/src/survey-responses/components/feedback/EditableSurveyResponseListItem.tsx b/src/survey-responses/components/feedback/EditableSurveyResponseListItem.tsx
@@ -104,40 +104,45 @@ const EditableSurveyResponseListItem = ({
     <article data-open={open} className="bg-white">
       <button
         className={clsx(
-          "group flex w-full items-center justify-between py-4 pr-4 text-left text-sm text-gray-900 hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75 sm:pr-6",
+          "group w-full py-4 pr-4 text-left text-sm text-gray-900 hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75 sm:pr-6",
           open ? "bg-gray-50" : "border-b border-gray-300",
-          showMap || "cursor-default",
         )}
         onClick={isAccordion ? () => (open ? handleClose() : handleOpen()) : undefined}
       >
-        <div className="flex items-center gap-4 px-6 pb-2 pt-3">
-          <h3 className="text-gray-700">{response.id} </h3>
-          <EditableSurveyResponseStatusLabel
-            surveySlug={survey.slug}
-            short={!showMap}
-            status={response.status}
-          />
-          <div
-            className={clsx(
-              "flex-shrink-0 rounded-full bg-gray-300 px-4 py-2 text-sm",
-              operatorSlugWitFallback !== "k.A." && "uppercase",
-            )}
-          >
-            <div>{operatorSlugWitFallback}</div>
+        <small className="pl-4 text-[#7c3aed]">
+          {/* @ts-expect-error data is unknown */}
+          {response.data[evaluationRefs["location"]] ? "mit" : "ohne"} Verortung
+        </small>
+        <div className="flex w-full items-center justify-between">
+          <div className="flex items-center gap-4 px-6 pb-2 pt-1">
+            <h3 className="text-gray-700">{response.id} </h3>
+            <EditableSurveyResponseStatusLabel
+              surveySlug={survey.slug}
+              short={!showMap}
+              status={response.status}
+            />
+            <div
+              className={clsx(
+                "flex-shrink-0 rounded-full bg-gray-300 px-4 py-2 text-sm",
+                operatorSlugWitFallback !== "k.A." && "uppercase",
+              )}
+            >
+              <div>{operatorSlugWitFallback}</div>
+            </div>
+
+            <Markdown
+              className="ml-4 line-clamp-2 flex-shrink break-all"
+              markdown={userTextPreview}
+            />
           </div>
 
-          <Markdown
-            className="ml-4 line-clamp-2 flex-shrink break-all"
-            markdown={userTextPreview}
-          />
+          {isAccordion &&
+            (open ? (
+              <ChevronUpIcon className="h-5 w-5 flex-shrink-0 text-gray-700 group-hover:text-black" />
+            ) : (
+              <ChevronDownIcon className="h-5 w-5 flex-shrink-0 text-gray-700 group-hover:text-black" />
+            ))}
         </div>
-
-        {isAccordion &&
-          (open ? (
-            <ChevronUpIcon className="h-5 w-5 flex-shrink-0 text-gray-700 group-hover:text-black" />
-          ) : (
-            <ChevronDownIcon className="h-5 w-5 flex-shrink-0 text-gray-700 group-hover:text-black" />
-          ))}
       </button>
 
       {open && (