git commit -m "Implement react-select as a Combobox Dropdown Menu with consistent width for device selection"

2024-09-16 10:51:04 +02:00
parent 8c85b2dbf3
commit 1d6b3d6385
3 changed files with 111 additions and 56 deletions
--- a/components/pois/AddPoiModalWindow.js
+++ b/components/pois/AddPoiModalWindow.js
@@ -1,22 +1,20 @@
 // components/pois/AddPoiModalWindow.js
-import React, { useState, useEffect, use } from "react";
-import ReactDOM from "react-dom";
-import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
+import React, { useState, useEffect } from "react";
+import Select from "react-select"; // Import react-select
+import { useSetRecoilState } from "recoil";
 import { readPoiMarkersStore } from "../../store/selectors/readPoiMarkersStore";
 import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";

 const AddPoiModalWindow = ({ onClose, map, latlng }) => {
-  const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden
+  const [poiTypData, setpoiTypData] = useState([]);
  const [name, setName] = useState("");
-  const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
-  const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string
+  const [poiTypeId, setPoiTypeId] = useState("");
  const [latitude] = useState(latlng.lat.toFixed(5));
  const [longitude] = useState(latlng.lng.toFixed(5));
-  const setLoadData = useSetRecoilState(readPoiMarkersStore);
  const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
  const [locationDeviceData, setLocationDeviceData] = useState([]);
-  const [deviceName, setDeviceName] = useState("");
-  //------------------------------------------------------------------------------------------
+  const [deviceName, setDeviceName] = useState(null); // Initialize as null
+
  useEffect(() => {
    const fetchInitialData = async () => {
      try {
@@ -25,13 +23,6 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
        const poiTypData = await poiTypResponse.json();
        setpoiTypData(poiTypData);

-        if (poiTypData.length > 0) {
-          setPoiTypeId(poiTypData[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
-          if (poiTypData[1]) {
-            setPoiTypeName(poiTypData[1].name);
-          }
-        }
-
        const locationDeviceData = await locationDeviceResponse.json();
        setLocationDeviceData(locationDeviceData);

@@ -46,8 +37,6 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
    fetchInitialData();
  }, []);

-  //------------------------------------------------------------------------------------------
-  //-----------------handleSubmit-------------------
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = {
@@ -55,7 +44,7 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
      poiTypeId,
      latitude,
      longitude,
-      idLD: locationDeviceData.find((device) => device.name === deviceName).idLD,
+      idLD: locationDeviceData.find((device) => device.name === deviceName?.value).idLD,
    };

    const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
@@ -65,16 +54,8 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
    });

    if (response.ok) {
-      setTrigger((trigger) => {
-        //console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
-        const newTrigger = trigger + 1;
-        //console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
-        onClose();
-        return newTrigger;
-      });
-
-      // Browser aktualisieren
-      window.location.reload();
+      setTrigger((trigger) => trigger + 1);
+      onClose();
    } else {
      console.error("Fehler beim Hinzufügen des POI");
    }
@@ -84,10 +65,29 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
    }
  };

-  //-----------------handleSubmit-------------------
+  // Erstelle Optionen für react-select
+  const deviceOptions = locationDeviceData.map((device) => ({
+    value: device.name,
+    label: device.name,
+  }));
+
+  // Custom styles for react-select
+  const customStyles = {
+    control: (provided) => ({
+      ...provided,
+      width: "100%",
+      minWidth: "300px", // Minimum width for the dropdown
+      maxWidth: "100%", // Maximum width (you can adjust this if needed)
+    }),
+    menu: (provided) => ({
+      ...provided,
+      width: "100%",
+      minWidth: "300px", // Ensure the dropdown menu stays at the minimum width
+    }),
+  };

  return (
-    <form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
+    <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
      <div className="flex items-center mb-4">
        <label htmlFor="name" className="block mr-2 flex-none">
          Name :
@@ -95,31 +95,31 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
        <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
      </div>

-      {/* {locationDeviceData.----------------------------------------------*/}
+      {/* React Select for Devices */}
      <div className="flex items-center mb-4">
        <label htmlFor="deviceName" className="block mr-2 flex-none">
          Gerät :
        </label>
-        <select id="deviceName" name="deviceName" value={deviceName} onChange={(e) => setDeviceName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
-          {locationDeviceData.map((device, index) => (
-            <option key={index} value={device.name}>
-              {device.name}
-            </option>
-          ))}
-        </select>
+        <Select
+          id="deviceName"
+          value={deviceName}
+          onChange={setDeviceName}
+          options={deviceOptions} // Options for filtering
+          placeholder="Gerät auswählen..."
+          styles={customStyles} // Apply custom styles
+        />
      </div>
-      {/* {locationDeviceData.----------------------------------------------*/}
+
      <div className="flex items-center mb-4">
        <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
          Typ:
        </label>
        <select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
-          {poiTypData &&
-            poiTypData.map((poiTyp, index) => (
-              <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
-                {poiTyp.name}
-              </option>
-            ))}
+          {poiTypData.map((poiTyp, index) => (
+            <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
+              {poiTyp.name}
+            </option>
+          ))}
        </select>
      </div>
      <div className="flex flex-row items-center justify-center">
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "09.09.2024 NodeMap",
+  "name": "16.09.2024 NodeMap",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
@@ -25,6 +25,7 @@
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "react-redux": "^9.1.2",
+        "react-select": "^5.8.0",
        "react-toastify": "^10.0.5",
        "recoil": "^0.7.7",
        "redux": "^5.0.1",
@@ -2087,6 +2088,28 @@
      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg=="
    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
    "node_modules/@heroicons/react": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz",
@@ -3810,14 +3833,12 @@
    "node_modules/@types/prop-types": {
      "version": "15.7.12",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
-      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "peer": true
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
    },
    "node_modules/@types/react": {
      "version": "18.3.5",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz",
      "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==",
-      "peer": true,
      "dependencies": {
        "@types/prop-types": "*",
        "csstype": "^3.0.2"
@@ -3827,7 +3848,6 @@
      "version": "4.4.11",
      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
-      "peer": true,
      "dependencies": {
        "@types/react": "*"
      }
@@ -5732,7 +5752,6 @@
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.8.7",
        "csstype": "^3.0.2"
@@ -9573,6 +9592,11 @@
        "tmpl": "1.0.5"
      }
    },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
    "node_modules/merge-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -10462,7 +10486,6 @@
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "peer": true,
      "dependencies": {
        "loose-envify": "^1.4.0",
        "object-assign": "^4.1.1",
@@ -10472,8 +10495,7 @@
    "node_modules/prop-types/node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "peer": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
    "node_modules/proxy-from-env": {
      "version": "1.0.0",
@@ -10644,6 +10666,26 @@
        }
      }
    },
+    "node_modules/react-select": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.0.tgz",
+      "integrity": "sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-toastify": {
      "version": "10.0.5",
      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
@@ -10660,7 +10702,6 @@
      "version": "4.4.5",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
-      "peer": true,
      "dependencies": {
        "@babel/runtime": "^7.5.5",
        "dom-helpers": "^5.0.1",
@@ -11900,6 +11941,19 @@
        "requires-port": "^1.0.0"
      }
    },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/use-sync-external-store": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-redux": "^9.1.2",
+    "react-select": "^5.8.0",
    "react-toastify": "^10.0.5",
    "recoil": "^0.7.7",
    "redux": "^5.0.1",