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:
parent
b94e09f027
commit
b448da234e
|
@ -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'));
|
||||
}
|
||||
}
|
|
@ -1,17 +1,7 @@
|
|||
import '@material/web/button/outlined-button.js';
|
||||
import '@material/web/button/text-button.js';
|
||||
|
||||
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 {mdiAccountOutline} from '@mdi/js';
|
||||
import UserInfoActionDialog from '@osm/Components/Dialogs/UserInfoActionDialog';
|
||||
import {Vnode} from 'mithril';
|
||||
import Stream from 'mithril/stream';
|
||||
import {Request} from 'mithril-utilities';
|
||||
|
||||
import TopAppBarAction from './TopAppBarAction';
|
||||
|
||||
|
@ -22,27 +12,10 @@ export default class UserInfoAction extends TopAppBarAction {
|
|||
dialogState = Stream(false);
|
||||
|
||||
view(vnode: Vnode) {
|
||||
// TODO: Redo with flex columns and gap
|
||||
return [
|
||||
super.view(vnode),
|
||||
// eslint-disable-next-line mithril/jsx-key
|
||||
<Dialog 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>
|
||||
<UserInfoActionDialog open={this.dialogState}/>
|
||||
];
|
||||
}
|
||||
|
||||
|
@ -50,11 +23,6 @@ export default class UserInfoAction extends TopAppBarAction {
|
|||
this.dialogState(true);
|
||||
}
|
||||
|
||||
async logout() {
|
||||
await Request.post(route('logout'));
|
||||
router.visit(route('login'));
|
||||
}
|
||||
|
||||
getIconElement(): JSX.Element {
|
||||
return app.user && app.user.picture ? <img src={app.user.picture} alt={app.user.username} style={{borderRadius: '50%'}}/> : super.getIconElement();
|
||||
}
|
||||
|
|
|
@ -183,9 +183,6 @@ export default class NavDrawer extends LitElement {
|
|||
--_pane-margin-inline-start: var(--nav-drawer-pane-spacing-start, 28px);
|
||||
}
|
||||
}
|
||||
.body:not(.open) .scroll-wrapper {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.pane {
|
||||
box-sizing: border-box;
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
app = @js([
|
||||
'locale' => app()->getLocale(),
|
||||
'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'))),
|
||||
'REVISION' => trim(file_get_contents(base_path('REVISION'))),
|
||||
'settings' => !str_starts_with(Route::getCurrentRoute()?->getName() ?? '', 'setup.') ? [
|
||||
|
|
Loading…
Reference in New Issue