Resolve Issues #503 #504 #505 #507 #708 #509 (#512)

* feat(general): add new modal for mobile view * fix(home): align search with catalog page and fix scroll Refs #505 * fix(search): change filters into checkbox dropdown and add placeholders Refs #503 * fix(search): add status hover on title cards and chips Refs #504 * fix(general): fix margin into detail page and home Refs #509 * fix(filter-modal): change function remove all into modal Refs #507 * feat(filter): add chips for filter into mobile view Refs #508 * fix(test): fix tests for release
teamdigitale · Apr 24, 2024 · 438e3d1 · 438e3d1
1 parent 83c3cac
commit 438e3d1
Show file tree

Hide file tree

Showing 32 changed files with 803 additions and 557 deletions.
diff --git a/src/App.css b/src/App.css
@@ -28,6 +28,12 @@
   color: #61dafb;
 }
 
+@media (max-width: 991px) {
+  div.modal-backdrop {
+    display: block !important;
+  }
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);

diff --git a/src/components/common/ModalChangeOrientation/ModalChangeOrientation.jsx b/src/components/common/ModalChangeOrientation/ModalChangeOrientation.jsx
@@ -0,0 +1,64 @@
+import { func } from "prop-types";
+import sprite from "../../../assets/images/sprite.svg";
+
+export const ModalChangeOrientation = ({ onRedirect }) => {
+  return (
+    <>
+      <div
+        className="modal fade d-lg-none"
+        tabIndex="-1"
+        role="dialog"
+        id="modalChangeOrientation"
+        aria-labelledby="modalChangeOrientationTitle"
+      >
+        <div className="modal-dialog modal-dialog-centered" role="document">
+          <div className="modal-content">
+            <div className="modal-header">
+              <h2
+                className="modal-title h5 fw-bold"
+                id="modalChangeOrientationTitle"
+              >
+                Migliora l’esperienza
+              </h2>
+              <button
+                className="btn-close"
+                type="button"
+                data-bs-dismiss="modal"
+                aria-label="Chiudi finestra modale"
+              >
+                <svg className="icon">
+                  <use href={`${sprite}#it-close`}></use>
+                </svg>
+              </button>
+            </div>
+            <div className="modal-body">
+              <p>
+                Il contenuto della pagina è ottimizzato per risoluzioni
+                maggiori.
+              </p>
+              <p className="fw-bold py-3">
+                Ruota lo schermo in orizzontale o naviga da desktop.
+              </p>
+            </div>
+            <div className="modal-footer justify-content-center">
+              <button
+                className="btn btn-primary w-100 btn-sm"
+                data-bs-dismiss="modal"
+                type="button"
+                onClick={onRedirect}
+              >
+                Ho capito
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+ModalChangeOrientation.propTypes = {
+  onRedirect: func
+};
+
+ModalChangeOrientation.defaultProps = {};
diff --git a/src/components/common/ResponsiveViews/utils.js b/src/components/common/ResponsiveViews/utils.js
@@ -1 +1,8 @@
-export const isMobile = window.matchMedia("(max-width: 991px)").matches;
+const recalculateIsMobile = () => () =>
+  window.matchMedia("(max-width: 991px)").matches;
+
+window.addEventListener("resize", () => {
+  recalculateIsMobile();
+});
+
+export const isMobile = recalculateIsMobile();
diff --git a/src/components/explore/ExploreByCategory/ExploreByCategory.js b/src/components/explore/ExploreByCategory/ExploreByCategory.js
@@ -28,24 +28,24 @@ const ExploreByCategory = () => {
 
   return (
     <ExploreSection title="Esplora gli strumenti semantici per categoria">
-      <div className="mt-4 container-fluid px-5 pb-5">
+      <div className="mt-4 container-fluid pb-5">
         <div className="row mx-0">
           <div className="col-xl-12 d-flex justify-content-start">
             {chunk(categoryCells, categoryCells.length).map((row, rowIndex) => {
               return (
-                <div className="row mx-0 px-3" key={"row" + rowIndex}>
+                <div className="row mx-0 px-lg-3" key={"row" + rowIndex}>
                   {row.map((item) => {
                     return (
                       <a
                         href="#"
-                        className={`col-xl-4 col-lg-6 px-2 my-4 ${styles.item} searchForCategoryLink`}
+                        className={`col-xl-4 col-lg-6 px-0 px-lg-2 my-3 my-lg-4 ${styles.item} searchForCategoryLink`}
                         key={item.key}
                         onClick={item.onClick}
                         data-testid={item.key}
                         tabIndex="0"
                       >
                         <div
-                          className={`card card-teaser rounded shadow ${styles.customCard}`}
+                          className={`card card-teaser rounded p-3 p-lg-4 shadow ${styles.customCard}`}
                         >
                           <div className="card-body">
                             <div className="row mx-0 px-1">

diff --git a/src/components/explore/ExploreByText/ExploreByText.js b/src/components/explore/ExploreByText/ExploreByText.js
@@ -1,61 +1,23 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import ExploreSection from "../ExploreSection/ExploreSection";
 import { useNavigate } from "react-router-dom";
 import { routes } from "../../../services/routes";
-import sprite from "../../../assets/images/sprite.svg";
 import "./ExploreByText.css";
+import PatternFilter from "../../search/PatternFilter/PatternFilter";
 
 const ExploreByText = () => {
-  const [pattern, setPattern] = useState("");
   const navigate = useNavigate();
 
-  const doSubmit = useCallback(
-    (e) => {
-      navigate(routes.search({ pattern: pattern }));
-      e.preventDefault();
-    },
-    [pattern]
-  );
+  const doSubmit = useCallback((value) => {
+    navigate(routes.search({ pattern: value }));
+  }, []);
 
-  const onPatternChange = useCallback((e) => setPattern(e.target.value), []);
+  const onPatternChange = useCallback((value) => doSubmit(value), []);
 
   return (
     <ExploreSection title="Cerca nel catalogo per parola chiave">
-      <div className="pt-3 container-fluid schemaPadding" role="form">
-        <form role="search" onSubmit={doSubmit}>
-          <div className="row ms-1 pe-2">
-            <div className="form-group col-md-7 p-2">
-              <div className="search-group input-group">
-                {/* <span className="input-group-append">
-                  <div className="input-group-text bg-transparent">
-                    <Icon icon="it-search" size="sm" alt="" />
-                  </div>
-                </span> */}
-                <input
-                  aria-label="catalogo"
-                  type="search"
-                  className="form-control"
-                  placeholder="es. persona, economia, attività"
-                  value={pattern}
-                  onChange={onPatternChange}
-                />
-                <span className="autocomplete-icon" aria-hidden="true">
-                  <div className="input-group-prepend"></div>
-                  <div className="col-12 col-md-6 col-lg-4">
-                    <svg className="icon">
-                      <use href={sprite + "#it-search"}></use>
-                    </svg>{" "}
-                  </div>
-                </span>
-              </div>
-            </div>
-            <div className="form-group col-md-3 p-2 d-flex justify-content-center">
-              <button type="submit" className="btn btn-primary w-75 mx-auto">
-                Cerca
-              </button>
-            </div>
-          </div>
-        </form>
+      <div className="container-fluid schemaPadding">
+        <PatternFilter onPatternUpdate={onPatternChange} isHomeSection />
       </div>
     </ExploreSection>
   );

diff --git a/src/components/explore/ExploreSection/ExploreSection.js b/src/components/explore/ExploreSection/ExploreSection.js
@@ -7,7 +7,7 @@ const ExploreSection = ({ title, children }) => (
     <div data-testid="ExploreSection">
       <div className="pt-3 ms-1">
         <div className="container-fluid schemaPadding">
-          <h2 className="p-2 second-sub-heading">{title}</h2>
+          <h2 className="p-2 second-sub-heading px-0">{title}</h2>
         </div>
       </div>
       {children}

diff --git a/src/components/layout/ScrollToTop/ScrollToTop.js b/src/components/layout/ScrollToTop/ScrollToTop.js
@@ -2,10 +2,23 @@ import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 
 const ScrollToTop = () => {
-  const { pathname } = useLocation();
+  const { pathname, search } = useLocation();
+
+  const scrollToTopOfElement = () => {
+    const anchorElement = document.getElementById("searchAnchor");
+    if (anchorElement) {
+      anchorElement.scrollIntoView({ behavior: "smooth" });
+    }
+  };
 
   useEffect(() => {
-    window.scrollTo(0, 0);
+    if (
+      search.includes("pattern") ||
+      search.includes("type") ||
+      search.includes("theme")
+    )
+      scrollToTopOfElement();
+    else window.scrollTo(0, 0);
   }, [pathname]);
 
   return null;

diff --git a/src/components/search/AssetTypeFilter/AssetTypeFilter.js b/src/components/search/AssetTypeFilter/AssetTypeFilter.js
@@ -1,12 +1,12 @@
 import React, { useMemo } from "react";
-import PropTypes, { func } from "prop-types";
+import PropTypes, { func, string } from "prop-types";
 import {
   AT_TO_LABEL,
   SUPPORTED_ASSET_TYPES
 } from "../../../services/dataConstants";
 import { MultiSelectChips } from "../MultiSelectChips/MultiSelectChips";
 
-const AssetTypeFilter = ({ types, onTypesUpdate }) => {
+const AssetTypeFilter = ({ types, onTypesUpdate, selection }) => {
   const keysAndLabels = useMemo(
     () =>
       AT_TO_LABEL.map((ttl) => ({
@@ -22,15 +22,17 @@ const AssetTypeFilter = ({ types, onTypesUpdate }) => {
       onSelectionUpdate={onTypesUpdate}
       keysAndLabels={keysAndLabels}
       labbledById="Filtra_per_Strumento_sematico"
-      selection={types}
+      selection={selection}
+      filter={types}
       type="types"
     />
   );
 };
 
 AssetTypeFilter.propTypes = {
   types: PropTypes.arrayOf(PropTypes.oneOf(SUPPORTED_ASSET_TYPES)).isRequired,
-  onTypesUpdate: func.isRequired
+  onTypesUpdate: func.isRequired,
+  selection: PropTypes.arrayOf(string)
 };
 
 AssetTypeFilter.defaultProps = {};

diff --git a/src/components/search/AssetTypeFilter/AssetTypeFilter.test.js b/src/components/search/AssetTypeFilter/AssetTypeFilter.test.js
@@ -21,7 +21,9 @@ describe("<AssetTypeFilter />", () => {
 
     userEvent.click(screen.getByTestId("MultiSelectFilter"));
 
-    expect(screen.getByTestId("dropdownMenu")).toBeInTheDocument();
+    expect(
+      screen.getByTestId("dropdownMenu-Filtra_per_Strumento_sematico")
+    ).toBeInTheDocument();
   });
 
   test("it should display options", () => {

diff --git a/src/components/search/FilterPanel/FilterModalMobile.jsx b/src/components/search/FilterPanel/FilterModalMobile.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import sprite from "../../../assets/images/sprite.svg";
 import MultiCheckBoxFilter from "../MultiCheckBoxFilter/MultiCheckBoxFilter";
 import { themesArray, typesArray } from "../../../services/filterFormatter";
@@ -8,10 +8,12 @@ import { SUPPORTED_ASSET_TYPES } from "../../../services/dataConstants";
 import { getCategories } from "../../../assets/data/categories";
 import { useFilter } from "../../common/FilterContext/context";
 import RightsHoldersFilter from "../RightsHoldersFilter/RightsHoldersFilter";
+import { isMobile } from "../../common/ResponsiveViews";
 
 const SUPPORTED_THEMES = getCategories().map((c) => c.key);
 
 export const FilterModalMobile = ({ filter, rightsHoldersList }) => {
+  const [deselectedAll, setDeselectedAll] = useState(false);
   const defaultFilterValues = {
     pattern: "",
     types: [],
@@ -44,11 +46,26 @@ export const FilterModalMobile = ({ filter, rightsHoldersList }) => {
   );
 
   const handleDispatchFilters = () => {
+    //if all filters has been deselected
+    if (Object.keys(filterState).length == 0) {
+      onFilterDispatch({ sortBy, direction, pattern });
+      return;
+    }
+
+    if (deselectedAll && Object.keys(filterState).length != 0) {
+      onFilterDispatch({ ...filterState, sortBy, direction, pattern });
+      return;
+    }
+
     onFilterDispatch({ ...filter, ...filterState });
+    setDeselectedAll(false);
   };
 
   useEffect(() => {
-    if (types.length > 0 || themes.length > 0 || rightsHolders.length > 0)
+    if (
+      isMobile() &&
+      (types.length > 0 || themes.length > 0 || rightsHolders.length > 0)
+    )
       updateFilter({ types, themes, rightsHolders });
   }, []);
 
@@ -74,10 +91,9 @@ export const FilterModalMobile = ({ filter, rightsHoldersList }) => {
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
-                onFilterDispatch({ sortBy, direction, pattern });
+                setDeselectedAll(true);
                 clearFilter({});
               }}
-              data-bs-dismiss="modal"
               className="link-primary ms-2"
             >
               Rimuovi tutti i filtri
@@ -86,7 +102,10 @@ export const FilterModalMobile = ({ filter, rightsHoldersList }) => {
               className="btn d-flex flex-row align-items-center text-primary p-0"
               type="button"
               data-bs-dismiss="modal"
-              onClick={() => updateFilter({ types, themes, rightsHolders })}
+              onClick={() => {
+                updateFilter({ types, themes, rightsHolders });
+                setDeselectedAll(false);
+              }}
               aria-label="Chiudi finestra modale"
             >
               Chiudi
@@ -102,6 +121,7 @@ export const FilterModalMobile = ({ filter, rightsHoldersList }) => {
                   title="Tipologie"
                   labbledById="Filtra_per_Tipologie"
                   keysAndLabels={typesArray}
+                  filter={types}
                   selection={filterState?.types}
                   onSelectionUpdate={onTypesUpdate}
                 />
@@ -121,6 +141,7 @@ export const FilterModalMobile = ({ filter, rightsHoldersList }) => {
                   title="Categorie"
                   labbledById="Filtra_per_Categorie"
                   selection={filterState?.themes}
+                  filter={themes}
                   onSelectionUpdate={onThemesUpdate}
                 />
               </FilterPanelSection>

diff --git a/src/components/search/FilterPanel/FilterPanel.css b/src/components/search/FilterPanel/FilterPanel.css