From eb126faf87f16229ae001f962c84990c94c5c7ae Mon Sep 17 00:00:00 2001
From: Vitalii Kiiko <mr.psiho@gmail.com>
Date: Wed, 26 Mar 2025 17:04:23 +0100
Subject: [PATCH] - QOL in list of companies - added scrollbar; - QOL in list
 of files;

---
 src/assets/scss/components/topBar.scss        | 12 +++++++
 src/components/TopBarProfileMenu/index.js     | 34 +++++++++++--------
 .../components/ListOfFiles/index.js           |  8 +++--
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/assets/scss/components/topBar.scss b/src/assets/scss/components/topBar.scss
index bb9c86d..c10d87c 100644
--- a/src/assets/scss/components/topBar.scss
+++ b/src/assets/scss/components/topBar.scss
@@ -52,6 +52,12 @@
     }
 }
 
+.topBar__menuCompaniesList {
+    max-height: 220px;
+    overflow-y: auto;
+    padding: 10px 0;
+    background: #f3ffeb;
+}
 .topBar__menuCompanyItem {
     margin: 0;
     padding: 0.55rem 1rem 0.75rem 1rem;
@@ -74,6 +80,12 @@
     }
 }
 
+.topBar__menuCompaniesList {
+    .topBar__menuCompanyItem:hover {
+        color: var(--menuitem-active-background);
+    }
+}
+
 @media (max-width: 500px) {
     .topBar__endContent {
         flex-wrap: wrap;
diff --git a/src/components/TopBarProfileMenu/index.js b/src/components/TopBarProfileMenu/index.js
index 3aee326..dfb0c7a 100644
--- a/src/components/TopBarProfileMenu/index.js
+++ b/src/components/TopBarProfileMenu/index.js
@@ -18,23 +18,13 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
     const companies = useStore().main.companies();
     const chosenCompanyId = useStore().main.chosenCompanyId()
     const [companyItems, setCompanyItems] = useState([]);
-    const renderCompanyItem = (item) => (
-        <span className="topBar__menuCompanyItem"
-              onClick={() => switchCompany(item.companyId)}
-              data-id={item.companyId}
-              data-active={chosenCompanyId === item.companyId}>
-            <i className="pi pi-building-columns"></i>
-            {item.label}
-        </span>
-    );
     const toast = useRef(null);
     let items = [
         {
-            template: (item, options) => {
+            template: () => {
                 return (
                     <div className="topBar__menuProfileItem">
-                        {/*<Avatar image="https://primefaces.org/cdn/primereact/images/avatar/amyelsner.png" shape="circle" />*/}
-                        <div className="userInfo">
+                       <div className="userInfo">
                             <span className="userName" title={fulleName}>{fulleName}</span>
                             <span className="userEmail" title={userData.email}>{userData.email}</span>
                         </div>
@@ -59,7 +49,15 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
         },
         {
             label: __('Seleziona azienda', 'gepafin'),
-            items: companyItems,
+            template: () => {
+                return (
+                    <div className="p-menuitem-content" data-pc-section="content">
+                        <ul className="topBar__menuCompaniesList">
+                            {companyItems.map(o => o.component)}
+                        </ul>
+                    </div>
+                );
+            },
             enable: companies.length
         },
         {
@@ -104,7 +102,15 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
         const items = companies.map(o => ({
             label: o.companyName,
             companyId: o.id,
-            template: renderCompanyItem
+            component: <li key={o.id}>
+                <span className="topBar__menuCompanyItem"
+                             onClick={() => switchCompany(o.id)}
+                             data-id={o.id}
+                             data-active={chosenCompanyId === o.id}>
+                    <i className="pi pi-building-columns"></i>
+                    {o.companyName}
+                </span>
+            </li>
         }));
         setCompanyItems(items);
     }, [companies, chosenCompanyId])
diff --git a/src/pages/DomandaEditPreInstructor/components/ListOfFiles/index.js b/src/pages/DomandaEditPreInstructor/components/ListOfFiles/index.js
index 2127fbe..0796704 100644
--- a/src/pages/DomandaEditPreInstructor/components/ListOfFiles/index.js
+++ b/src/pages/DomandaEditPreInstructor/components/ListOfFiles/index.js
@@ -10,7 +10,8 @@ const ListOfFiles = ({ files, updateFn, shouldDisableFieldFn, name, ndg, applica
 
     return (
         <ol className="appPageSection__list">
-            {files.map((o, i) => <li key={`${o.id}_${uniqid('f')}`} className="appPageSection__listItem">
+            {files
+                ? files.map((o, i) => <li key={`${o.id}_${uniqid('f')}`} className="appPageSection__listItem">
                 <div className="appPageSection__listItemRow">
                     <div>{renderHtmlContent(o.label)}</div>
                     <div className="appPageSection__iconActions">
@@ -63,7 +64,8 @@ const ListOfFiles = ({ files, updateFn, shouldDisableFieldFn, name, ndg, applica
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',
-                            justifyContent: 'space-between'
+                            justifyContent: 'space-between',
+                            wordWrap: 'anywhere'
                         }}>
                             <span>{k.name}</span>
                             <div className="appPageSection__iconActions">
@@ -86,7 +88,7 @@ const ListOfFiles = ({ files, updateFn, shouldDisableFieldFn, name, ndg, applica
                         </li>)}
                     </ul>
                     : null}
-            </li>)}
+            </li>) : null}
         </ol>
     )
 }