- fixed typo;

- new version of menu topbar;
- registration page - added automatic birth date population;

src/assets/scss/components/topBar.scss

@@ -47,3 +47,19 @@
         border-color: var(--menu-borderColor);
     }
 }
+
+.topBar__menuCompanyItem {
+    margin: 0;
+    padding: 0.55rem 1rem 0.75rem 1rem;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    display: block;
+
+    &[data-active="true"] {
+        color: var(--primary-text);
+    }
+    
+    i {
+        margin-right: 7px;
+    }
+}

src/components/FormField/components/Table/index.js

@@ -121,7 +121,7 @@ const Table = ({
             </label>
             <RenderTable columns={columns} data={rows} setRowsFn={updateRows}/>
             {!isEmpty(columns) && !shouldDisableNewRows
-                ? <div className="addNewTableRow" onClick={addNewRow}>{__('Aggiungi una righa', 'gepafin')}</div>
+                ? <div className="addNewTableRow" onClick={addNewRow}>{__('Aggiungi una riga', 'gepafin')}</div>
                 : null}
         </>)
 }

src/components/TopBarProfileMenu/index.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { __ } from '@wordpress/i18n';
 import { useNavigate } from 'react-router-dom';
 
@@ -7,7 +7,6 @@ import { storeSet, useStore, useTrackedStore } from '../../store';
 
 // components
 import { Menu } from 'primereact/menu';
-import { Avatar } from 'primereact/avatar';
 import { intersection } from 'ramda';
 
 const TopBarProfileMenu = ({ menuLeftRef }) => {
@@ -15,7 +14,19 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
     const userData = useTrackedStore().main.userData();
     const fulleName = `${userData.firstName} ${userData.lastName}`;
     const permissions = useStore().main.getPermissions();
-
+    const companies = useStore().main.companies();
+    const chosenCompanyId = useStore().main.chosenCompanyId()
+    const [companyItems, setCompanyItems] = useState([]);
+    const renderCompanyItem = (item) => (
+        <span className="topBar__menuCompanyItem"
+              onClick={chosenCompanyId === item.companyId ? () => {
+              } : switchCompany(item.companyId)}
+              data-id={item.companyId}
+              data-active={chosenCompanyId === item.companyId}>
+            <i className="pi pi-building-columns"></i>
+            {item.label}
+        </span>
+    );
     let items = [
         {
             template: (item, options) => {
@@ -45,6 +56,11 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
             },
             enable: !intersection(permissions, ['MANAGE_TENDERS']).length
         },
+        {
+            label: __('Seleziona azienda', 'gepafin'),
+            items: companyItems,
+            enable: true
+        },
         {
             separator: true,
             enable: true
@@ -59,6 +75,19 @@ const TopBarProfileMenu = ({ menuLeftRef }) => {
         }
     ].filter(o => o.enable);
 
+    const switchCompany = (id) => {
+        console.log('switchCompany');
+    }
+
+    useEffect(() => {
+        const items = companies.map(o => ({
+            label: o.companyName,
+            companyId: o.id,
+            template: renderCompanyItem
+        }));
+        setCompanyItems(items)
+    }, [companies])
+
     return <>
         <Menu model={items} popup ref={menuLeftRef} id="topBar_profileMenu" className="topBar__menuProfile"/>
     </>

src/layouts/DefaultLayout/components/AppTopbar/index.js

@@ -0,0 +1,48 @@
+import React, { useRef } from 'react';
+import { __ } from '@wordpress/i18n';
+
+// components
+import { Toolbar } from 'primereact/toolbar';
+import { Link } from 'react-router-dom';
+import LogoIcon from '../../../../icons/LogoIcon';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { InputText } from 'primereact/inputtext';
+import { Badge } from 'primereact/badge';
+import { Button } from 'primereact/button';
+import TopBarProfileMenu from '../../../../components/TopBarProfileMenu';
+
+const AppTopbar = () => {
+    const menuLeft = useRef(null);
+
+    const startContent = <Link to="/">
+        <LogoIcon/>
+    </Link>;
+
+    const endContent = <div className="topBar__endContent">
+        <IconField iconPosition="right">
+            <InputIcon className="pi pi-search"> </InputIcon>
+            <InputText v-model="value1" placeholder={__('Cerca', 'gepafin')} disabled={true}/>
+        </IconField>
+        <i className="pi pi-bell p-overlay-badge topBar__icon">
+            <Badge value="0"></Badge>
+        </i>
+        <i className="pi pi-envelope p-overlay-badge topBar__icon">
+            <Badge severity="danger"></Badge>
+        </i>
+        <Button
+            className="topBar__profileBtn"
+            outlined
+            onClick={(event) => menuLeft.current.toggle(event)} aria-controls="topBar_profileMenu" aria-haspopup>
+            <i className="pi pi-user"></i>
+            <i className="pi pi-chevron-down"></i>
+        </Button>
+        <TopBarProfileMenu menuLeftRef={menuLeft}/>
+    </div>
+
+    return(
+        <Toolbar start={startContent} end={endContent} className="topBar"/>
+    )
+}
+
+export default AppTopbar;

src/layouts/DefaultLayout/index.js

@@ -1,5 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
-import { Link } from 'react-router-dom';
 import { __ } from '@wordpress/i18n';
 import { useLocation } from 'react-router-dom';
 
@@ -7,18 +6,10 @@ import { useLocation } from 'react-router-dom';
 import { useStore, storeSet } from '../../store';
 
 // components
-import { Toolbar } from 'primereact/toolbar';
-import { Button } from 'primereact/button';
-import { IconField } from 'primereact/iconfield';
-import { InputIcon } from 'primereact/inputicon';
-import { InputText } from 'primereact/inputtext';
-import { Badge } from 'primereact/badge';
-import LogoIcon from '../../icons/LogoIcon';
-import TopBarProfileMenu from '../../components/TopBarProfileMenu';
 import AppSidebar from './components/AppSidebar';
+import AppTopbar from './components/AppTopbar';
 
 const DefaultLayout = ({ children }) => {
-    const menuLeft = useRef(null);
     const isError404 = useStore().main.isError404();
     const location = useLocation();
 
@@ -26,34 +17,9 @@ const DefaultLayout = ({ children }) => {
         storeSet.main.isError404(false);
     }, [location]);
 
-    const startContent = <Link to="/">
-        <LogoIcon/>
-    </Link>;
-
-    const endContent = <div className="topBar__endContent">
-        <IconField iconPosition="right">
-            <InputIcon className="pi pi-search"> </InputIcon>
-            <InputText v-model="value1" placeholder={__('Cerca', 'gepafin')} disabled={true}/>
-        </IconField>
-        <i className="pi pi-bell p-overlay-badge topBar__icon">
-            <Badge value="2"></Badge>
-        </i>
-        <i className="pi pi-envelope p-overlay-badge topBar__icon">
-            <Badge severity="danger"></Badge>
-        </i>
-        <Button
-            className="topBar__profileBtn"
-            outlined
-            onClick={(event) => menuLeft.current.toggle(event)} aria-controls="topBar_profileMenu" aria-haspopup>
-            <i className="pi pi-user"></i>
-            <i className="pi pi-chevron-down"></i>
-        </Button>
-        <TopBarProfileMenu menuLeftRef={menuLeft}/>
-    </div>
-
     return (
         <div className="wrapper">
-            <Toolbar start={startContent} end={endContent} className="topBar"/>
+            <AppTopbar/>
             <div className="inner">
                 <AppSidebar/>
                 <main>

src/pages/Registration/index.js

@@ -76,10 +76,12 @@ const Registration = () => {
 
     const validateCallback = (data) => {
         if (data.status === 'SUCCESS') {
-            const { codiceFiscale, firstName, lastName } = data.data;
+            const { codiceFiscale, firstName, lastName, dateOfBirth } = data.data;
+            const dateOfBirthObj = new Date(dateOfBirth);
             setValue('codiceFiscale', codiceFiscale);
             setValue('firstName', firstName);
             setValue('lastName', lastName);
+            setValue('birthDate', dateOfBirthObj);
         } else {
             errorMsgs.current.show([
                 {
@@ -183,6 +185,7 @@ const Registration = () => {
 
                         <FormField
                             type="datepicker"
+                            disabled={true}
                             fieldName="birthDate"
                             label={__('Data di nascita', 'gepafin')}
                             control={control}