- QOL in list of companies - added scrollbar;

- QOL in list of files;
This commit is contained in:
Vitalii Kiiko
2025-03-26 17:04:23 +01:00
parent 41b0c93f47
commit eb126faf87
3 changed files with 37 additions and 17 deletions

View File

@@ -52,6 +52,12 @@
} }
} }
.topBar__menuCompaniesList {
max-height: 220px;
overflow-y: auto;
padding: 10px 0;
background: #f3ffeb;
}
.topBar__menuCompanyItem { .topBar__menuCompanyItem {
margin: 0; margin: 0;
padding: 0.55rem 1rem 0.75rem 1rem; 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) { @media (max-width: 500px) {
.topBar__endContent { .topBar__endContent {
flex-wrap: wrap; flex-wrap: wrap;

View File

@@ -18,23 +18,13 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
const companies = useStore().main.companies(); const companies = useStore().main.companies();
const chosenCompanyId = useStore().main.chosenCompanyId() const chosenCompanyId = useStore().main.chosenCompanyId()
const [companyItems, setCompanyItems] = useState([]); 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); const toast = useRef(null);
let items = [ let items = [
{ {
template: (item, options) => { template: () => {
return ( return (
<div className="topBar__menuProfileItem"> <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="userName" title={fulleName}>{fulleName}</span>
<span className="userEmail" title={userData.email}>{userData.email}</span> <span className="userEmail" title={userData.email}>{userData.email}</span>
</div> </div>
@@ -59,7 +49,15 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
}, },
{ {
label: __('Seleziona azienda', 'gepafin'), 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 enable: companies.length
}, },
{ {
@@ -104,7 +102,15 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
const items = companies.map(o => ({ const items = companies.map(o => ({
label: o.companyName, label: o.companyName,
companyId: o.id, 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); setCompanyItems(items);
}, [companies, chosenCompanyId]) }, [companies, chosenCompanyId])

View File

@@ -10,7 +10,8 @@ const ListOfFiles = ({ files, updateFn, shouldDisableFieldFn, name, ndg, applica
return ( return (
<ol className="appPageSection__list"> <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 className="appPageSection__listItemRow">
<div>{renderHtmlContent(o.label)}</div> <div>{renderHtmlContent(o.label)}</div>
<div className="appPageSection__iconActions"> <div className="appPageSection__iconActions">
@@ -63,7 +64,8 @@ const ListOfFiles = ({ files, updateFn, shouldDisableFieldFn, name, ndg, applica
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between' justifyContent: 'space-between',
wordWrap: 'anywhere'
}}> }}>
<span>{k.name}</span> <span>{k.name}</span>
<div className="appPageSection__iconActions"> <div className="appPageSection__iconActions">
@@ -86,7 +88,7 @@ const ListOfFiles = ({ files, updateFn, shouldDisableFieldFn, name, ndg, applica
</li>)} </li>)}
</ul> </ul>
: null} : null}
</li>)} </li>) : null}
</ol> </ol>
) )
} }