feat: added live search in CartellaModulisticaView (#260)

* feat: added live search in CartellaModulisticaView * fix: fix filter cartella modulistica * fix: fix search modulistica * chore: update files CartellaModulisticaView + SearchBar * fix: fix search Cartella Modulistica performance * chore: removed unnecessary code --------- Co-authored-by: Wagner Trezub <[email protected]>
RedTurtle · Jul 26, 2023 · 9469698 · 9469698
1 parent 7ef704a
commit 9469698
Show file tree

Hide file tree

Showing 12 changed files with 179 additions and 23 deletions.
diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po
@@ -1177,6 +1177,11 @@ msgstr ""
 msgid "cartellamodulistica_formati_scaricabili"
 msgstr ""
 
+#: components/ItaliaTheme/View/CartellaModulisticaView/SearchBar
+# defaultMessage: Type in a keyword to find modules
+msgid "cartellamodulistica_search"
+msgstr ""
+
 #: components/ItaliaTheme/View/ServizioView/ServizioCasiParticolari
 # defaultMessage: Casi particolari
 msgid "casi_particolari"

diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po
@@ -1162,6 +1162,11 @@ msgstr ""
 msgid "cartellamodulistica_formati_scaricabili"
 msgstr "Downloadable formats"
 
+#: components/ItaliaTheme/View/CartellaModulisticaView/SearchBar
+# defaultMessage: Type in a keyword to find modules
+msgid "cartellamodulistica_search"
+msgstr ""
+
 #: components/ItaliaTheme/View/ServizioView/ServizioCasiParticolari
 # defaultMessage: Casi particolari
 msgid "casi_particolari"

diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po
@@ -1171,6 +1171,11 @@ msgstr "Tarjeta con imagen"
 msgid "cartellamodulistica_formati_scaricabili"
 msgstr "Formatos descargables"
 
+#: components/ItaliaTheme/View/CartellaModulisticaView/SearchBar
+# defaultMessage: Type in a keyword to find modules
+msgid "cartellamodulistica_search"
+msgstr ""
+
 #: components/ItaliaTheme/View/ServizioView/ServizioCasiParticolari
 # defaultMessage: Casi particolari
 msgid "casi_particolari"

diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po
@@ -1179,6 +1179,11 @@ msgstr ""
 msgid "cartellamodulistica_formati_scaricabili"
 msgstr "Formats téléchargeables"
 
+#: components/ItaliaTheme/View/CartellaModulisticaView/SearchBar
+# defaultMessage: Type in a keyword to find modules
+msgid "cartellamodulistica_search"
+msgstr ""
+
 #: components/ItaliaTheme/View/ServizioView/ServizioCasiParticolari
 # defaultMessage: Casi particolari
 msgid "casi_particolari"

diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po
@@ -1162,6 +1162,11 @@ msgstr ""
 msgid "cartellamodulistica_formati_scaricabili"
 msgstr "Formati scaricabili"
 
+#: components/ItaliaTheme/View/CartellaModulisticaView/SearchBar
+# defaultMessage: Type in a keyword to find modules
+msgid "cartellamodulistica_search"
+msgstr "Digita una parola chiave per trovare i moduli"
+
 #: components/ItaliaTheme/View/ServizioView/ServizioCasiParticolari
 # defaultMessage: Casi particolari
 msgid "casi_particolari"

diff --git a/locales/volto.pot b/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2023-07-20T13:42:57.004Z\n"
+"POT-Creation-Date: 2023-07-25T10:15:46.866Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "MIME-Version: 1.0\n"
@@ -1164,6 +1164,11 @@ msgstr ""
 msgid "cartellamodulistica_formati_scaricabili"
 msgstr ""
 
+#: components/ItaliaTheme/View/CartellaModulisticaView/SearchBar
+# defaultMessage: Type in a keyword to find modules
+msgid "cartellamodulistica_search"
+msgstr ""
+
 #: components/ItaliaTheme/View/ServizioView/ServizioCasiParticolari
 # defaultMessage: Casi particolari
 msgid "casi_particolari"

diff --git a/src/components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView.jsx b/src/components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView.jsx
@@ -3,7 +3,7 @@
  * @module components/theme/View/CartellaModulisticaView
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { defineMessages, useIntl } from 'react-intl';
 import { flattenToAppURL } from '@plone/volto/helpers';
@@ -16,6 +16,7 @@ import {
   RelatedItems,
   CartellaModulisticaAfterContent,
   CartellaModulisticaAfterRelatedItems,
+  CartellaModulisticaSearchBar,
   PagePlaceholderAfterContent,
   TextOrBlocks,
   RelatedItemInEvidence,
@@ -47,6 +48,9 @@ const CartellaModulisticaView = ({ content }) => {
   const modulistica_items_url =
     content['@components']['modulistica-items']['@id'];
 
+  const [searchableText, setSearchableText] = useState('');
+  const modulistica = modulisticaItems?.data?.items ?? [];
+
   useEffect(() => {
     if (hasItems && !modulisticaItems.loading && !modulisticaItems.loaded) {
       dispatch(getModulisticaItems(flattenToAppURL(modulistica_items_url)));
@@ -57,7 +61,27 @@ const CartellaModulisticaView = ({ content }) => {
     return () => dispatch(resetModulisticaItems());
   }, [dispatch]);
 
-  const modulistica = modulisticaItems?.data?.items ?? [];
+  const filterDocumento = (doc) => {
+    return (
+      doc.title.toLowerCase().indexOf((searchableText ?? '').toLowerCase()) >=
+        0 || doc.items.filter(filterItemsFN).length > 0
+    );
+  };
+
+  const filterModulistica = (section) => {
+    if (section['@type'] === 'Document') {
+      if (searchableText?.length > 0) {
+        return (section.items ?? []).filter(filterDocumento).length > 0;
+      }
+      return true;
+    } else {
+      return section.items.filter(filterItemsFN)?.length > 0;
+    }
+  };
+
+  const filterItemsFN = (item) =>
+    item?.title.toLowerCase().indexOf((searchableText ?? '').toLowerCase()) >=
+    0;
 
   return (
     <>
@@ -67,11 +91,14 @@ const CartellaModulisticaView = ({ content }) => {
           imageinheader={!!content.image}
           imageinheader_field="image"
         />
-
         <TextOrBlocks content={content} />
+
+        {/* -------SEARCH------- */}
+        <CartellaModulisticaSearchBar setSearchableText={setSearchableText} />
+
         {modulistica.length > 0 && (
           <section className="modulistica">
-            {modulistica.map((section) => {
+            {modulistica.filter(filterModulistica).map((section) => {
               return section['@type'] === 'Document' ? (
                 <div className="documents-section" key={section['@id']}>
                   {/* <h3>{section.title}</h3> */}
@@ -88,21 +115,33 @@ const CartellaModulisticaView = ({ content }) => {
                           {intl.formatMessage(messages.formati_scaricabili)}
                         </div>
                       </div>
-                      {section.items.map((doc) => (
-                        <DocRow doc={doc} key={doc['@id']} />
-                      ))}
+                      {section.items.filter(filterDocumento).map((doc) => {
+                        const items = doc.items.filter(filterItemsFN);
+                        return (
+                          <DocRow
+                            doc={doc}
+                            key={doc['@id']}
+                            items={
+                              items.length === 0 ? doc.items : items
+                            } /*se items.length ===0 significa che è stato fatto il match sul titolo del documento, quindi devo mostrare tutti i suoi figli*/
+                          />
+                        );
+                      })}
                     </div>
                   )}
                 </div>
               ) : (
                 <div className="document-row-section" key={section['@id']}>
-                  <DocRow doc={section} />
+                  <DocRow
+                    doc={section}
+                    key={section['@id']}
+                    items={section.items.filter(filterItemsFN)}
+                  />
                 </div>
               );
             })}
           </section>
         )}
-
         <PageMetadata content={content} />
       </div>
 

diff --git a/src/components/ItaliaTheme/View/CartellaModulisticaView/DocRow.jsx b/src/components/ItaliaTheme/View/CartellaModulisticaView/DocRow.jsx
@@ -49,13 +49,13 @@ const Downloads = ({ item, titleDoc }) => {
   );
 };
 
-const DocRow = ({ doc }) => {
+const DocRow = ({ doc, items }) => {
   const [itemOpen, setItemOpen] = useState(false);
 
   const titleWrapper = (
     <div
       className={cx('title-wrap', {
-        'single-row': doc.items?.length === 1,
+        'single-row': items?.length === 1,
       })}
     >
       <div id={`title-${doc.id}`} className="title">
@@ -72,25 +72,25 @@ const DocRow = ({ doc }) => {
   return (
     <div
       className={cx('doc-row', {
-        'has-children': doc.items?.length > 1,
+        'has-children': items?.length > 1,
       })}
       key={doc['@id']}
     >
       {/*Only title and/or description, no files */}
-      {!doc.items && <div className="doc">{titleWrapper}</div>}
+      {!items && <div className="doc">{titleWrapper}</div>}
 
       {/*Single file*/}
-      {doc.items?.length === 1 && (
+      {items?.length === 1 && (
         <div className="doc">
           {titleWrapper}
-          {doc.items?.length === 1 && (
-            <Downloads item={doc.items[0]} titleDoc={doc.title} />
+          {items?.length === 1 && (
+            <Downloads item={items[0]} titleDoc={doc.title} />
           )}
         </div>
       )}
 
       {/*Accordion*/}
-      {doc.items?.length > 1 && (
+      {items?.length > 1 && (
         <>
           <div className="accordion-wrapper">
             <div id="headingAccordion" className="accordion-header doc">
@@ -118,7 +118,7 @@ const DocRow = ({ doc }) => {
             aria-labelledby="headingAccordion"
           >
             <div className="accordion-inner">
-              {doc.items.map((modulo) => (
+              {items.map((modulo) => (
                 <div className="doc modulo" key={modulo['@id']}>
                   <Downloads item={modulo} titleDoc={null} />
                 </div>

diff --git a/src/components/ItaliaTheme/View/CartellaModulisticaView/SearchBar.jsx b/src/components/ItaliaTheme/View/CartellaModulisticaView/SearchBar.jsx
@@ -0,0 +1,73 @@
+/**
+ * SearchBar view component.
+ * @module components/theme/View/SearchBar
+ */
+
+import React, { useState } from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+import { Container } from 'design-react-kit/dist/design-react-kit';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+
+const messages = defineMessages({
+  search_faq: {
+    id: 'cartellamodulistica_search',
+    defaultMessage: 'Type in a keyword to find modules',
+  },
+});
+
+/**
+ * SearchBar view component class.
+ * @function SearchBar
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+
+const SearchBar = ({ setSearchableText }) => {
+  const intl = useIntl();
+  const [focusSearch, setFocusSearch] = useState(false);
+
+  return (
+    <div className="section section-muted search-section full-width mb-3">
+      <Container className="px-4">
+        <div className="form-group mb-0">
+          <div className="input-group shadow">
+            <div className="input-group-prepend">
+              <div className="input-group-text rounded-left">
+                <Icon
+                  icon="it-search"
+                  padding={false}
+                  size="sm"
+                  aria-hidden="true"
+                />
+              </div>
+            </div>
+            <label
+              className={focusSearch ? 'active' : ''}
+              htmlFor="search-field"
+            >
+              {intl.formatMessage(messages.search_faq)}...
+            </label>
+            <input
+              className="form-control rounded-right"
+              id="search-field"
+              name="search-field"
+              onBlur={(a, b) => {
+                setFocusSearch(false);
+              }}
+              onFocus={() => {
+                setFocusSearch(true);
+              }}
+              onChange={(e) => {
+                setSearchableText(e?.target?.value || '');
+              }}
+              placeholder={intl.formatMessage(messages.search_faq)}
+              type="text"
+            />
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default SearchBar;
diff --git a/src/components/ItaliaTheme/View/FAQ/FaqFolder/SearchBar.jsx b/src/components/ItaliaTheme/View/FAQ/FaqFolder/SearchBar.jsx
@@ -37,9 +37,7 @@ const SearchBar = ({ setSearchableText }) => {
                   icon="it-search"
                   padding={false}
                   size="sm"
-                  style={{
-                    ariaHidden: true,
-                  }}
+                  aria-hidden="true"
                 />
               </div>
             </div>
@@ -54,7 +52,7 @@ const SearchBar = ({ setSearchableText }) => {
               id="search-field"
               name="search-field"
               onBlur={(a, b) => {
-                setFocusSearch(true);
+                setFocusSearch(false);
               }}
               onFocus={() => {
                 setFocusSearch(true);

diff --git a/src/components/ItaliaTheme/View/index.js b/src/components/ItaliaTheme/View/index.js
@@ -78,6 +78,7 @@ export BandoUlterioriInformazioni from 'design-comuni-plone-theme/components/Ita
 
 export CartellaModulisticaAfterContent from 'design-comuni-plone-theme/components/ItaliaTheme/View/CartellaModulisticaView/Placeholder/AfterContent';
 export CartellaModulisticaAfterRelatedItems from 'design-comuni-plone-theme/components/ItaliaTheme/View/CartellaModulisticaView/Placeholder/AfterRelatedItems';
+export CartellaModulisticaSearchBar from 'design-comuni-plone-theme/components/ItaliaTheme/View/CartellaModulisticaView/SearchBar';
 export DocumentoPlaceholderAfterContent from 'design-comuni-plone-theme/components/ItaliaTheme/View/DocumentoView/Placeholder/AfterContent';
 export DocumentoPlaceholderAfterRelatedItems from 'design-comuni-plone-theme/components/ItaliaTheme/View/DocumentoView/Placeholder/AfterRelatedItems';
 export DocumentoDescrizione from 'design-comuni-plone-theme/components/ItaliaTheme/View/DocumentoView/DocumentoDescrizione';

diff --git a/theme/ItaliaTheme/Views/_cartellaModulistica.scss b/theme/ItaliaTheme/Views/_cartellaModulistica.scss
@@ -1,6 +1,21 @@
 $docs-section-margin: 3em;
 
 .contenttype-cartellamodulistica {
+  .search-section.full-width {
+    height: auto;
+
+    .icon {
+      fill: $neutral-2-b4;
+    }
+
+    .input-group {
+      .input-group-text,
+      input[type='text'] {
+        border-bottom: none;
+      }
+    }
+  }
+
   section.modulistica {
     .documents-section,
     .document-row-section {