Merge branch 'develop' into release/2.7.2

itk-dev · Jan 11, 2024 · 93b19ea · 93b19ea
2 parents 71f4590 + 3593514
commit 93b19ea
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,8 @@ Nedenfor ses dato for release og beskrivelse af opgaver som er implementeret.
 ## In develop
 
 * Opdaterede OS2Forms Organisation.
+* Booking resources filter adjustments to better fit map view state
+  (<https://github.com/itk-dev/os2forms_selvbetjening/pull/264>)
 
 ## [2.7.1] 2024-01-09
 

diff --git a/web/modules/custom/itkdev_booking/assets/dist/main.js b/web/modules/custom/itkdev_booking/assets/dist/main.js
diff --git a/web/modules/custom/itkdev_booking/assets/src/components/create-booking-filters.js b/web/modules/custom/itkdev_booking/assets/src/components/create-booking-filters.js
@@ -22,6 +22,9 @@ import "./create-booking-filters.scss";
  * @param {Function} props.setResourceFilter Set resource filters.
  * @param {string} props.resourceCategoryFilter Resource category filters.
  * @param {Function} props.setResourceCategoryFilter Set resource category filters.
+ * @param {Array} props.facilityFilter Facility filters.
+ * @param {Function} props.setFacilityFilter Set facility filters.
+ * @param {Function} props.setAppParams Set app params.
  * @returns {JSX.Element} Component.
  */
 function CreateBookingFilters({
@@ -36,9 +39,11 @@ function CreateBookingFilters({
   setResourceFilter,
   resourceCategoryFilter,
   setResourceCategoryFilter,
+  facilityFilter,
+  setFacilityFilter,
+  setAppParams,
 }) {
   const [capacityFilter, setCapacityFilter] = useState([]);
-  const [facilityFilter, setFacilityFilter] = useState([]);
   const [hasWhitelist, setHasWhitelist] = useState(false);
   const [locationOptions, setLocationOptions] = useState([]);
   const [resourcesOptions, setResourcesOptions] = useState([]);
@@ -125,17 +130,39 @@ function CreateBookingFilters({
   useEffect(() => {
     const locationValues = locationFilter.map(({ value }) => value);
 
-    setFilterParams({ ...filterParams, ...{ "location[]": locationValues } });
+    if (locationValues.length > 0) {
+      setFilterParams({ ...filterParams, ...{ "location[]": locationValues } });
+    } else {
+      // Define, clear and reassign copy
+      const filterParamsCopy = { ...filterParams };
+
+      delete filterParamsCopy["location[]"];
+
+      setFilterParams({
+        ...filterParamsCopy,
+      });
+    }
   }, [locationFilter]);
 
   // Set resource filter.
   useEffect(() => {
     const resourceValues = resourceFilter.map(({ value }) => value);
 
-    setFilterParams({
-      ...filterParams,
-      ...{ "resourceMail[]": resourceValues },
-    });
+    if (resourceValues.length > 0) {
+      setFilterParams({
+        ...filterParams,
+        ...{ "resourceMail[]": resourceValues },
+      });
+    } else {
+      // Define, clear and reassign copy
+      const filterParamsCopy = { ...filterParams };
+
+      delete filterParamsCopy["resourceMail[]"];
+
+      setFilterParams({
+        ...filterParamsCopy,
+      });
+    }
   }, [resourceFilter]);
 
   // Set only whitelisted filter.
@@ -207,7 +234,7 @@ function CreateBookingFilters({
 
   // Set resource category filter.
   useEffect(() => {
-    setFilterParams({ ...filterParams, resourceCategory: resourceCategoryFilter });
+    setAppParams({ resourceCategory: resourceCategoryFilter });
   }, [resourceCategoryFilter]);
 
   return (
@@ -291,6 +318,7 @@ function CreateBookingFilters({
               onChange={(selectedFacilities) => {
                 setFacilityFilter(selectedFacilities);
               }}
+              value={facilityFilter}
               isMulti
             />
           </label>
@@ -340,8 +368,8 @@ CreateBookingFilters.defaultProps = {
 
 CreateBookingFilters.propTypes = {
   filterParams: PropTypes.shape({
-    "location[]": PropTypes.arrayOf(PropTypes.string),
-    "resourceMail[]": PropTypes.arrayOf(PropTypes.string),
+    "location[]": PropTypes.arrayOf(PropTypes.string).isRequired,
+    "resourceMail[]": PropTypes.arrayOf(PropTypes.string).isRequired,
   }).isRequired,
   setFilterParams: PropTypes.func.isRequired,
   allResources: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
@@ -353,6 +381,9 @@ CreateBookingFilters.propTypes = {
   setResourceFilter: PropTypes.func.isRequired,
   resourceCategoryFilter: PropTypes.string.isRequired,
   setResourceCategoryFilter: PropTypes.func.isRequired,
+  facilityFilter: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  setFacilityFilter: PropTypes.func.isRequired,
+  setAppParams: PropTypes.func.isRequired,
 };
 
 export default CreateBookingFilters;
diff --git a/web/modules/custom/itkdev_booking/assets/src/components/map-wrapper.js b/web/modules/custom/itkdev_booking/assets/src/components/map-wrapper.js
@@ -31,6 +31,8 @@ import "./map-wrapper.scss";
  * @param {object} props.setResourceFilter Setter for resource filter
  * @param {string} props.setBookingView Setter for booking view
  * @param {boolean} props.useLocations Whether to render locations or resources
+ * @param {Function} props.setFacilityFilter Set facility filter.
+ * @param {object} props.filterParams Filter params.
  * @returns {JSX.Element} MapWrapper component
  */
 function MapWrapper({
@@ -41,6 +43,8 @@ function MapWrapper({
   setResourceFilter,
   setBookingView,
   useLocations,
+  setFacilityFilter,
+  filterParams,
 }) {
   const [map, setMap] = useState();
   const [vectorLayer, setVectorLayer] = useState(null);
@@ -50,12 +54,16 @@ function MapWrapper({
   let tooltip = useRef();
 
   useEffect(() => {
-    if (resources?.length > 0 && !useLocations) {
-      const features = getFeatures(resources, useLocations);
+    if (!useLocations) {
+      if (Object.keys(filterParams).length === 0) {
+        setMapData(getFeatures(allResources, useLocations));
+      } else {
+        const features = getFeatures(resources, useLocations);
 
-      setMapData(features);
+        setMapData(features);
 
-      tooltip.innerHTML = "";
+        tooltip.innerHTML = "";
+      }
     } else {
       setMapData(getFeatures(allResources, useLocations));
     }
@@ -396,7 +404,12 @@ function MapWrapper({
                 label: dataResourceNameArray[index],
               }));
 
-              setResourceFilter(mergedArray);
+              setFacilityFilter([]);
+
+              // Settimeout to prevent filters being set at the same time.
+              setTimeout(() => {
+                setResourceFilter(mergedArray);
+              }, 50);
             }
           } else {
             setResourceFilter([
@@ -436,6 +449,8 @@ MapWrapper.propTypes = {
   setResourceFilter: PropTypes.func.isRequired,
   setBookingView: PropTypes.func.isRequired,
   useLocations: PropTypes.bool.isRequired,
+  setFacilityFilter: PropTypes.func.isRequired,
+  filterParams: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 };
 
 MapWrapper.defaultProps = {

diff --git a/web/modules/custom/itkdev_booking/assets/src/create-booking.js b/web/modules/custom/itkdev_booking/assets/src/create-booking.js
@@ -18,6 +18,7 @@ import LoadingSpinner from "./components/loading-spinner";
 import { resourceLimit } from "./util/filter-utils";
 import ResourceDetails from "./components/resource-details";
 import SystemFailureScreen from "./system-failure-screen";
+import DataTest from "./data.json";
 
 /**
  * CreateBooking component.
@@ -33,6 +34,7 @@ function CreateBooking({ config }) {
   const [authorFields, setAuthorFields] = useState({ subject: "", email: "" });
   // Filter parameters, selected in CreateBookingFilters. An object containing
   // structured information about current filtering.
+  const [appParams, setAppParams] = useState({});
   const [filterParams, setFilterParams] = useState({});
   const [locationFilter, setLocationFilter] = useState([]);
   const [resourceFilter, setResourceFilter] = useState([]);
@@ -54,6 +56,7 @@ function CreateBooking({ config }) {
   const [loadingResources, setLoadingResources] = useState(true);
   const [loadingUserInformation, setLoadingUserInformation] = useState(true);
   const [loadingFiltering, setLoadingFiltering] = useState(false);
+  const [facilityFilter, setFacilityFilter] = useState([]);
 
   // Load all resources and current user information.
   useEffect(() => {
@@ -88,6 +91,9 @@ function CreateBooking({ config }) {
     }
   }, []);
 
+  // @TODO: use app params when implementing new booking tab (lokale, transport etc.)
+  useEffect(() => {}, [appParams]);
+
   // When all resources have been loaded, check if parameters contain
   // selections.
   useEffect(() => {
@@ -233,6 +239,9 @@ function CreateBooking({ config }) {
                       setResourceFilter={setResourceFilter}
                       resourceCategoryFilter={resourceCategoryFilter}
                       setResourceCategoryFilter={setResourceCategoryFilter}
+                      facilityFilter={facilityFilter}
+                      setFacilityFilter={setFacilityFilter}
+                      setAppParams={setAppParams}
                     />
 
                     {displayInfoBox && <InfoBox config={config} />}
@@ -255,6 +264,8 @@ function CreateBooking({ config }) {
                             setResourceFilter={setResourceFilter}
                             setBookingView={onTabChange}
                             useLocations={false}
+                            setFacilityFilter={setFacilityFilter}
+                            filterParams={filterParams}
                           />
                         </div>
                       )}