fix: Listbox-Filter "Alle Quellen" zeigt nun korrekt alle Meldungen an

- Initialwert von sourceFilter auf "Alle Quellen" gesetzt - Filterbedingung angepasst, um mit Listbox-Einträgen übereinzustimmen - Dropdown-UX verbessert durch Icon und Scrollfunktion
2025-07-07 12:05:55 +02:00
parent bf4e38509a
commit 28441eebf1
6 changed files with 207 additions and 19 deletions
--- a/.env.development
+++ b/.env.development
@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.543
+NEXT_PUBLIC_APP_VERSION=1.6.544
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

--- a/.env.production
+++ b/.env.production
@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.543
+NEXT_PUBLIC_APP_VERSION=1.6.544
 NEXT_PUBLIC_CPL_MODE=production
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## [1.6.544] – 2025-07-07
+
+- fix: Zeitstempel in Meldungstabelle inkl. Uhrzeit im deutschen Format (TT.MM.JJJJ, HH:MM:SS)
+
+- msg.t wird jetzt per toLocaleString('de-DE') mit Zeitformatierung angezeigt
+- Beispiel: 26.06.2025, 19:26:07
+
+---
 ## [1.6.543] – 2025-07-07

 - fix: DatePicker über Tabellenkopf anzeigen durch z-index und Portal-Lösung
--- a/components/main/reports/MeldungenView.tsx
+++ b/components/main/reports/MeldungenView.tsx
@@ -6,6 +6,7 @@ import type { AppDispatch } from "@/redux/store";
 import type { RootState } from "@/redux/store";
 import DateRangePickerMeldungen from "./DateRangePickerMeldungen";
 import MeldungenTabelle from "./MeldungenTabelle";
+import { Listbox } from "@headlessui/react";

 type Meldung = {
  t: string;
@@ -20,7 +21,7 @@ export default function MeldungenView() {
  const dispatch = useDispatch<AppDispatch>();
  const messages = useSelector((state: RootState) => state.messages.data);

-  const [sourceFilter, setSourceFilter] = useState("Alle");
+  const [sourceFilter, setSourceFilter] = useState("Alle Quellen");

  const today = new Date();
  const prior30 = new Date();
@@ -36,13 +37,14 @@ export default function MeldungenView() {
  }, [dispatch, fromDate, toDate]);

  const filteredMessages =
-    sourceFilter === "Alle"
+    sourceFilter === "Alle Quellen"
      ? messages
      : messages.filter((m: Meldung) => m.i === sourceFilter);

  const allSources = Array.from(
    new Set(messages.map((m: Meldung) => m.i))
  ).sort();
+  const sources = ["Alle Quellen", ...allSources];

  return (
    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)]">
@@ -61,18 +63,46 @@ export default function MeldungenView() {
        >
          Anzeigen
        </button>
-        <select
-          value={sourceFilter}
-          onChange={(e) => setSourceFilter(e.target.value)}
-          className="border px-4 py-3 rounded h-fit ml-6"
-        >
-          <option value="Alle">Alle Quellen</option>
-          {allSources.map((src) => (
-            <option key={String(src)} value={String(src)}>
-              {String(src)}
-            </option>
-          ))}
-        </select>
+
+        <Listbox value={sourceFilter} onChange={setSourceFilter}>
+          <div className="relative ml-6 w-64">
+            <Listbox.Button className="w-full border px-4 py-3 rounded text-left bg-white flex justify-between items-center">
+              <span>{sourceFilter}</span>
+              <svg
+                className="w-5 h-5 text-gray-400"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </Listbox.Button>
+            <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto">
+              {sources.map((src) => (
+                <Listbox.Option
+                  key={src}
+                  value={src}
+                  className={({ selected, active }) =>
+                    `px-4 py-2 cursor-pointer ${
+                      selected
+                        ? "bg-littwin-blue text-white"
+                        : active
+                        ? "bg-blue-100"
+                        : ""
+                    }`
+                  }
+                >
+                  {src}
+                </Listbox.Option>
+              ))}
+            </Listbox.Options>
+          </div>
+        </Listbox>
      </div>

      <MeldungenTabelle messages={filteredMessages} />
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,15 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.543",
+  "version": "1.6.544",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "cpl-v4",
-      "version": "1.6.543",
+      "version": "1.6.544",
      "dependencies": {
        "@fontsource/roboto": "^5.1.0",
+        "@headlessui/react": "^2.2.4",
        "@iconify-icons/ri": "^1.2.10",
        "@iconify/icons-ion": "^1.2.10",
        "@iconify/icons-mdi": "^1.2.48",
@@ -851,6 +852,39 @@
        "url": "https://github.com/sponsors/ayuhito"
      }
    },
+    "node_modules/@headlessui/react": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.4.tgz",
+      "integrity": "sha512-lz+OGcAH1dK93rgSMzXmm1qKOJkBUqZf1L4M8TWLNplftQD3IkoEDdUFNfAn4ylsN6WOTVtWaLmvmaHOUk1dTA==",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.16",
+        "@react-aria/focus": "^3.20.2",
+        "@react-aria/interactions": "^3.25.0",
+        "@tanstack/react-virtual": "^3.13.9",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@headlessui/react/node_modules/@floating-ui/react": {
+      "version": "0.26.28",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
    "node_modules/@humanwhocodes/config-array": {
      "version": "0.13.0",
      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1680,6 +1714,96 @@
        "node": ">=14"
      }
    },
+    "node_modules/@react-aria/focus": {
+      "version": "3.20.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.20.5.tgz",
+      "integrity": "sha512-JpFtXmWQ0Oca7FcvkqgjSyo6xEP7v3oQOLUId6o0xTvm4AD5W0mU2r3lYrbhsJ+XxdUUX4AVR5473sZZ85kU4A==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.25.3",
+        "@react-aria/utils": "^3.29.1",
+        "@react-types/shared": "^3.30.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.25.3",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.25.3.tgz",
+      "integrity": "sha512-J1bhlrNtjPS/fe5uJQ+0c7/jiXniwa4RQlP+Emjfc/iuqpW2RhbF9ou5vROcLzWIyaW8tVMZ468J68rAs/aZ5A==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.9",
+        "@react-aria/utils": "^3.29.1",
+        "@react-stately/flags": "^3.1.2",
+        "@react-types/shared": "^3.30.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.9",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.9.tgz",
+      "integrity": "sha512-2P5thfjfPy/np18e5wD4WPt8ydNXhij1jwA8oehxZTFqlgVMGXzcWKxTb4RtJrLFsqPO7RUQTiY8QJk0M4Vy2g==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.29.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.29.1.tgz",
+      "integrity": "sha512-yXMFVJ73rbQ/yYE/49n5Uidjw7kh192WNN9PNQGV0Xoc7EJUlSOxqhnpHmYTyO0EotJ8fdM1fMH8durHjUSI8g==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.9",
+        "@react-stately/flags": "^3.1.2",
+        "@react-stately/utils": "^3.10.7",
+        "@react-types/shared": "^3.30.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-stately/flags": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.2.tgz",
+      "integrity": "sha512-2HjFcZx1MyQXoPqcBGALwWWmgFVUk2TuKVIQxCbRq7fPyWXIl6VHcakCLurdtYC2Iks7zizvz0Idv48MQ38DWg==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.10.7",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.7.tgz",
+      "integrity": "sha512-cWvjGAocvy4abO9zbr6PW6taHgF24Mwy/LbQ4TC4Aq3tKdKDntxyD+sh7AkSRfJRT2ccMVaHVv2+FfHThd3PKQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.30.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.30.0.tgz",
+      "integrity": "sha512-COIazDAx1ncDg046cTJ8SFYsX8aS3lB/08LDnbkH/SkdYrFPWDlXMrO/sUam8j1WWM+PJ+4d1mj7tODIKNiFog==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
    "node_modules/@reduxjs/toolkit": {
      "version": "2.8.2",
      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz",
@@ -1765,6 +1889,31 @@
        "tslib": "^2.4.0"
      }
    },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz",
+      "integrity": "sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
+      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
    "node_modules/@testing-library/dom": {
      "version": "10.4.0",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.543",
+  "version": "1.6.544",
  "private": true,
  "scripts": {
    "dev": "next dev",
@@ -17,6 +17,7 @@
  },
  "dependencies": {
    "@fontsource/roboto": "^5.1.0",
+    "@headlessui/react": "^2.2.4",
    "@iconify-icons/ri": "^1.2.10",
    "@iconify/icons-ion": "^1.2.10",
    "@iconify/icons-mdi": "^1.2.48",