fix: Visualizzazione menu utente

Il componente UserInfoActionDialog è stato creato per mostrare le informazioni dell'utente con opzioni per il profilo utente e il logout. Allo stesso tempo, il codice relativo alle azioni dell'utente è stato rimosso da UserInfoAction.tsx e sostituito con il nuovo componente. Ho inoltre apportato una modifica a app.blade.php per correggere il caricamento dell'utente.
This commit is contained in:
Maicol Battistini 2023-12-08 17:31:27 +01:00
parent b94e09f027
commit b448da234e
No known key found for this signature in database
4 changed files with 51 additions and 39 deletions

View File

@ -0,0 +1,47 @@
import '@material/web/button/text-button.js';
import {router} from '@maicol07/inertia-mithril';
import {mdiAccountOutline, mdiLogoutVariant} from '@mdi/js';
import Dialog, {DialogAttributes} from '@osm/Components/Dialogs/Dialog';
import MdIcon from '@osm/Components/MdIcon';
import {VnodeCollection} from '@osm/typings/jsx';
import collect from 'collect.js';
import Mithril from 'mithril';
import {Request} from 'mithril-utilities';
export default class UserInfoActionDialog extends Dialog {
icon(): Mithril.Children {
return app.user?.picture ? (
<img className="user-image mdc-elevation--z2" src={app.user.picture} alt={app.user.username}/>
) : <MdIcon icon={mdiAccountOutline}/>;
}
headline(): Mithril.Children {
return <span>{app.user?.username}</span>;
}
contents(vnode: Mithril.Vnode<DialogAttributes, this>): Mithril.Children {
return (
<span>{app.user?.email}</span>
);
}
actions(vnode: Mithril.Vnode<DialogAttributes, this>): VnodeCollection {
return collect({
profile: (
<md-text-button>{__('Il tuo profilo')}</md-text-button>
),
logout: (
<md-text-button id="logout-button" onclick={this.logout.bind(this)}>
{__('Esci')}
<MdIcon icon={mdiLogoutVariant} slot="icon"/>
</md-text-button>
)
});
}
async logout() {
await Request.post(route('logout'));
router.visit(route('login'));
}
}

View File

@ -1,17 +1,7 @@
import '@material/web/button/outlined-button.js'; import {mdiAccountOutline} from '@mdi/js';
import '@material/web/button/text-button.js'; import UserInfoActionDialog from '@osm/Components/Dialogs/UserInfoActionDialog';
import {router} from '@maicol07/inertia-mithril';
import {
mdiAccountCircleOutline,
mdiAccountOutline,
mdiLogoutVariant
} from '@mdi/js';
import Dialog from '@osm/Components/Dialogs/Dialog';
import MdIcon from '@osm/Components/MdIcon';
import {Vnode} from 'mithril'; import {Vnode} from 'mithril';
import Stream from 'mithril/stream'; import Stream from 'mithril/stream';
import {Request} from 'mithril-utilities';
import TopAppBarAction from './TopAppBarAction'; import TopAppBarAction from './TopAppBarAction';
@ -22,27 +12,10 @@ export default class UserInfoAction extends TopAppBarAction {
dialogState = Stream(false); dialogState = Stream(false);
view(vnode: Vnode) { view(vnode: Vnode) {
// TODO: Redo with flex columns and gap
return [ return [
super.view(vnode), super.view(vnode),
// eslint-disable-next-line mithril/jsx-key // eslint-disable-next-line mithril/jsx-key
<Dialog open={this.dialogState}> <UserInfoActionDialog open={this.dialogState}/>
<div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
{app.user?.picture ? (
<img className="user-image mdc-elevation--z2" src={app.user.picture} alt={app.user.username}/>
) : <MdIcon className="user-image" icon={this.icon}/>}
<b style="margin-top: 16px;">{app.user?.username}</b>
<span>{app.user?.email}</span>
</div>
<md-outlined-button slot="footer">
{this.ariaLabel}
<MdIcon icon={mdiAccountCircleOutline} slot="icon"/>
</md-outlined-button>
<md-text-button id="logout-button" slot="footer" onclick={this.logout.bind(this)}>
{__('Esci')}
<MdIcon icon={mdiLogoutVariant} slot="icon"/>
</md-text-button>
</Dialog>
]; ];
} }
@ -50,11 +23,6 @@ export default class UserInfoAction extends TopAppBarAction {
this.dialogState(true); this.dialogState(true);
} }
async logout() {
await Request.post(route('logout'));
router.visit(route('login'));
}
getIconElement(): JSX.Element { getIconElement(): JSX.Element {
return app.user && app.user.picture ? <img src={app.user.picture} alt={app.user.username} style={{borderRadius: '50%'}}/> : super.getIconElement(); return app.user && app.user.picture ? <img src={app.user.picture} alt={app.user.username} style={{borderRadius: '50%'}}/> : super.getIconElement();
} }

View File

@ -183,9 +183,6 @@ export default class NavDrawer extends LitElement {
--_pane-margin-inline-start: var(--nav-drawer-pane-spacing-start, 28px); --_pane-margin-inline-start: var(--nav-drawer-pane-spacing-start, 28px);
} }
} }
.body:not(.open) .scroll-wrapper {
overflow-x: hidden;
}
.pane { .pane {
box-sizing: border-box; box-sizing: border-box;

View File

@ -32,7 +32,7 @@
app = @js([ app = @js([
'locale' => app()->getLocale(), 'locale' => app()->getLocale(),
'modules' => $modules, 'modules' => $modules,
'user' => Route::currentRouteName() !== 'setup.index' && auth()->user(), 'user' => Route::currentRouteName() !== 'setup.index' ? auth()->user() : null,
'VERSION' => trim(file_get_contents(base_path('VERSION'))), 'VERSION' => trim(file_get_contents(base_path('VERSION'))),
'REVISION' => trim(file_get_contents(base_path('REVISION'))), 'REVISION' => trim(file_get_contents(base_path('REVISION'))),
'settings' => !str_starts_with(Route::getCurrentRoute()?->getName() ?? '', 'setup.') ? [ 'settings' => !str_starts_with(Route::getCurrentRoute()?->getName() ?? '', 'setup.') ? [