feat: CartellaModulistica view improvements (#687)

* feat: cartella modulistica - mostra ricerca in testata con flag nel content-type * feat: higlight search in CartellaModulistica * feat: expand item if searchableText is setted * fix: removed debug * feat: handle non_collassare_gli_elementi * fix: docrow link * feat: display Pagemetadata in CartellaModulistica if show_modified field is setted
RedTurtle · Jun 17, 2024 · bcca3ea · bcca3ea
1 parent 80312b4
commit bcca3ea
Show file tree

Hide file tree

Showing 3 changed files with 134 additions and 51 deletions.
diff --git a/src/components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView.jsx b/src/components/ItaliaTheme/View/CartellaModulisticaView/CartellaModulisticaView.jsx
@@ -108,7 +108,9 @@ const CartellaModulisticaView = ({ content }) => {
         <TextOrBlocks content={content} />
 
         {/* -------SEARCH------- */}
-        <CartellaModulisticaSearchBar setSearchableText={setSearchableText} />
+        {content?.ricerca_in_testata && (
+          <CartellaModulisticaSearchBar setSearchableText={setSearchableText} />
+        )}
 
         {modulistica.length > 0 && (
           <section className="modulistica">
@@ -136,13 +138,23 @@ const CartellaModulisticaView = ({ content }) => {
                             <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*/
+                              searchableText={searchableText}
+                              collapsable={!content.non_collassare_gli_elementi}
+                              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*/
                             />
                           );
                         } else {
-                          return <DocRow doc={doc} key={doc['@id']} />;
+                          return (
+                            <DocRow
+                              doc={doc}
+                              key={doc['@id']}
+                              searchableText={searchableText}
+                              collapsable={!content.non_collassare_gli_elementi}
+                            />
+                          );
                         }
                       })}
                     </div>
@@ -155,18 +167,24 @@ const CartellaModulisticaView = ({ content }) => {
                     items={
                       section.items ? section.items.filter(filterItemsFN) : []
                     }
+                    searchableText={searchableText}
+                    collapsable={!content.non_collassare_gli_elementi}
                   />
                 </div>
               ) : (
                 <div className="document-row-section" key={section['@id']}>
                   {/*file,immagine,link*/}
-                  <DocRow doc={section} />
+                  <DocRow
+                    doc={section}
+                    searchableText={searchableText}
+                    collapsable={!content.non_collassare_gli_elementi}
+                  />
                 </div>
               );
             })}
           </section>
         )}
-        <PageMetadata content={content} />
+        {content.show_modified && <PageMetadata content={content} />}
       </div>
 
       <CartellaModulisticaAfterContent content={content} />

diff --git a/src/components/ItaliaTheme/View/CartellaModulisticaView/DocRow.jsx b/src/components/ItaliaTheme/View/CartellaModulisticaView/DocRow.jsx
@@ -3,13 +3,16 @@
  * @module components/theme/View/DocRow
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import cx from 'classnames';
+import { v4 as uuid } from 'uuid';
+import Highlighter from 'react-highlight-words';
+
 import { UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { DownloadFileFormat } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 import { FontAwesomeIcon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import cx from 'classnames';
 
 /**
  * DocRow view component class.
@@ -18,13 +21,18 @@ import cx from 'classnames';
  * @returns {string} Markup of the component.
  */
 
-const Downloads = ({ item, titleDoc }) => {
+const Downloads = ({ item, titleDoc, filteredWords }) => {
   return item['@type'] === 'Modulo' ? (
     <React.Fragment>
-      {!titleDoc ? (
-        <div className="title">{item.title}</div>
-      ) : (
-        titleDoc !== item.title && <div className="title">{item.title}</div>
+      {(!titleDoc || titleDoc !== item.title) && (
+        <div className="title">
+          <Highlighter
+            highlightClassName="highlighted-text"
+            searchWords={filteredWords}
+            autoEscape={true}
+            textToHighlight={item.title}
+          />
+        </div>
       )}
       <div className="downloads">
         <DownloadFileFormat file={item?.file_principale} />
@@ -33,24 +41,54 @@ const Downloads = ({ item, titleDoc }) => {
       </div>
     </React.Fragment>
   ) : (
-    <UniversalLink
-      href={item.remoteUrl || flattenToAppURL(item['@id'])}
-      title={item.title}
-      className="modulistica-link"
-    >
-      <div className="title">{item.title}</div>
-      <FontAwesomeIcon
-        icon={['fas', 'link']}
-        alt={item.title}
-        role="presentation"
-        aria-hidden={true}
-      />
-    </UniversalLink>
+    <>
+      <div className="title">
+        <UniversalLink
+          href={item.remoteUrl || flattenToAppURL(item['@id'])}
+          title={item.title}
+        >
+          <Highlighter
+            highlightClassName="highlighted-text"
+            searchWords={filteredWords}
+            autoEscape={true}
+            textToHighlight={item.title}
+          />
+        </UniversalLink>
+      </div>
+      <div className="downloads">
+        <UniversalLink
+          href={item.remoteUrl || flattenToAppURL(item['@id'])}
+          title={item.title}
+          className="modulistica-link"
+        >
+          <FontAwesomeIcon
+            icon={['fas', 'link']}
+            alt={item.title}
+            role="presentation"
+            aria-hidden={true}
+          />
+        </UniversalLink>
+      </div>
+    </>
   );
 };
 
-const DocRow = ({ doc, items }) => {
-  const [itemOpen, setItemOpen] = useState(false);
+const DocRow = ({ doc, items, searchableText, collapsable }) => {
+  const filteredWords = searchableText.split(' ');
+  const id = uuid();
+
+  const [itemOpen, setItemOpen] = useState(!collapsable);
+
+  useEffect(() => {
+    //se ho fatto una ricerca, espando l'elemento
+    if (collapsable) {
+      if (searchableText?.length > 0) {
+        setItemOpen(true);
+      } else {
+        setItemOpen(false);
+      }
+    }
+  }, [searchableText, collapsable]);
 
   const titleWrapper = (
     <div
@@ -60,7 +98,12 @@ const DocRow = ({ doc, items }) => {
     >
       <div id={`title-${doc.id}`} className="title">
         <UniversalLink href={doc.remoteUrl || flattenToAppURL(doc['@id'])}>
-          {doc.title}
+          <Highlighter
+            highlightClassName="highlighted-text"
+            searchWords={filteredWords}
+            autoEscape={true}
+            textToHighlight={doc.title}
+          />
         </UniversalLink>
         {doc?.description && (
           <p className="description text-muted">{doc.description}</p>
@@ -85,7 +128,11 @@ const DocRow = ({ doc, items }) => {
       {items?.length === 1 && (
         <div className="doc">
           {titleWrapper}
-          <Downloads item={items[0]} titleDoc={doc.title} />
+          <Downloads
+            item={items[0]}
+            titleDoc={doc.title}
+            filteredWords={filteredWords}
+          />
         </div>
       )}
 
@@ -96,31 +143,38 @@ const DocRow = ({ doc, items }) => {
             <div id="headingAccordion" className="accordion-header doc">
               {titleWrapper}
             </div>
-            <button
-              onClick={() => {
-                setItemOpen(itemOpen ? false : true);
-              }}
-              aria-expanded={itemOpen}
-              aria-controls="collapsedContent"
-              aria-labelledby={`title-${doc.id}`}
-            >
-              <Icon
-                color="primary"
-                icon={itemOpen ? 'it-minus' : 'it-plus'}
-                padding={false}
-              />
-            </button>
+            {collapsable && (
+              <button
+                onClick={() => {
+                  setItemOpen(itemOpen ? false : true);
+                }}
+                aria-expanded={itemOpen}
+                aria-controls={`accordion-content-${id}`}
+                aria-labelledby={`title-${doc.id}`}
+              >
+                <Icon
+                  color="primary"
+                  icon={itemOpen ? 'it-minus' : 'it-plus'}
+                  padding={false}
+                  key={itemOpen + id}
+                />
+              </button>
+            )}
           </div>
           <div
-            id="collapsedContent"
+            id={`accordion-content-${id}`}
             className={cx('accordion-content', { open: itemOpen })}
             role="region"
             aria-labelledby="headingAccordion"
           >
             <div className="accordion-inner">
               {items.map((modulo) => (
                 <div className="doc modulo" key={modulo['@id']}>
-                  <Downloads item={modulo} titleDoc={null} />
+                  <Downloads
+                    item={modulo}
+                    titleDoc={null}
+                    filteredWords={filteredWords}
+                  />
                 </div>
               ))}
             </div>

diff --git a/theme/ItaliaTheme/Views/_cartellaModulistica.scss b/theme/ItaliaTheme/Views/_cartellaModulistica.scss
@@ -16,6 +16,11 @@ $docs-section-margin: 3em;
     }
   }
 
+  mark.highlighted-text {
+    padding: 0.2rem 0;
+    background-color: $highlight-search;
+  }
+
   section.modulistica {
     .documents-section,
     .document-row-section {
@@ -52,6 +57,7 @@ $docs-section-margin: 3em;
         &.has-children {
           padding-bottom: 1em;
         }
+
         .description {
           font-size: 0.9rem;
         }
@@ -68,10 +74,12 @@ $docs-section-margin: 3em;
             &.single-row {
               max-width: 70%;
             }
+
             .title {
               font-size: 1.2em;
               font-weight: 500;
             }
+
             p.description {
               margin: 0;
             }
@@ -102,10 +110,9 @@ $docs-section-margin: 3em;
           }
 
           a.modulistica-link {
-            display: flex;
-            width: 100%;
-            align-items: center;
-            justify-content: space-between;
+            .external-link {
+              display: none;
+            }
 
             svg {
               width: 2em;
@@ -124,6 +131,7 @@ $docs-section-margin: 3em;
             color: $secondary;
             font-size: 1rem;
           }
+
           button {
             padding: 0 0.4em;
             border: none;
@@ -135,6 +143,7 @@ $docs-section-margin: 3em;
             }
           }
         }
+
         .accordion-content {
           overflow: hidden;
           height: auto;
@@ -186,11 +195,13 @@ $docs-section-margin: 3em;
             flex-wrap: wrap;
             align-items: unset;
             justify-content: unset;
+
             .title-wrap {
               &.single-row {
                 max-width: none;
               }
             }
+
             .title,
             .downloads {
               flex: 1 1 100%;