From 3768a69cf466e332684fc5d18eda9c69c37de35a Mon Sep 17 00:00:00 2001 From: Alex Prudencio Date: Fri, 11 Oct 2024 22:45:51 -0400 Subject: [PATCH] adding user avatar and logout menu --- .../views/MainLayout.java | 105 ++++++++++++------ 1 file changed, 69 insertions(+), 36 deletions(-) diff --git a/src/main/java/com/primefactorsolutions/views/MainLayout.java b/src/main/java/com/primefactorsolutions/views/MainLayout.java index 5ebd36e..e64ad07 100644 --- a/src/main/java/com/primefactorsolutions/views/MainLayout.java +++ b/src/main/java/com/primefactorsolutions/views/MainLayout.java @@ -1,13 +1,18 @@ package com.primefactorsolutions.views; import com.primefactorsolutions.model.Employee; +import com.vaadin.flow.component.Text; import com.vaadin.flow.component.applayout.AppLayout; import com.vaadin.flow.component.applayout.DrawerToggle; -import com.vaadin.flow.component.button.Button; -import com.vaadin.flow.component.html.Footer; -import com.vaadin.flow.component.html.H1; -import com.vaadin.flow.component.html.Header; -import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.avatar.Avatar; +import com.vaadin.flow.component.contextmenu.HasMenuItems; +import com.vaadin.flow.component.contextmenu.MenuItem; +import com.vaadin.flow.component.contextmenu.SubMenu; +import com.vaadin.flow.component.html.*; +import com.vaadin.flow.component.icon.Icon; +import com.vaadin.flow.component.icon.VaadinIcon; +import com.vaadin.flow.component.menubar.MenuBar; +import com.vaadin.flow.component.menubar.MenuBarVariant; import com.vaadin.flow.component.orderedlayout.FlexComponent; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.Scroller; @@ -38,55 +43,85 @@ public class MainLayout extends AppLayout { } private void addHeaderContent() { - DrawerToggle toggle = new DrawerToggle(); + final DrawerToggle toggle = new DrawerToggle(); toggle.setAriaLabel("Menu toggle"); viewTitle = new H1(); viewTitle.addClassNames(LumoUtility.FontSize.LARGE, LumoUtility.Margin.NONE); - HorizontalLayout - header = - authContext.getAuthenticatedUser(UserDetails.class) - .map(user -> { - final Button logout = new Button("Logout", click -> this.authContext.logout()); - final Span loggedUser = new Span("Welcome " + user.getUsername()); - String employeeId = "N/A"; + final HorizontalLayout header = authContext.getAuthenticatedUser(UserDetails.class) + .map(user -> { + final Avatar loggedUser = new Avatar(user.getUsername()); + loggedUser.getStyle().set("display", "block"); + loggedUser.getElement().setAttribute("tabindex", "-1"); + final MenuBar menuBar = new MenuBar(); + menuBar.addThemeVariants(MenuBarVariant.LUMO_ICON); + final MenuItem actions = createIconItem(menuBar, VaadinIcon.ELLIPSIS_V, null, "", + false); + final SubMenu actionsSubMenu = actions.getSubMenu(); + final MenuItem signOutMenuItem = createIconItem(actionsSubMenu, VaadinIcon.EXIT, "Sign-out", + null, true); + signOutMenuItem.addClickListener(c -> this.authContext.logout()); - if (user instanceof Employee) { - final UUID uuid = ((Employee) user).getId(); + String employeeId = "N/A"; - if (uuid != null) { - employeeId = uuid.toString(); - } - } + if (user instanceof Employee) { + final UUID uuid = ((Employee) user).getId(); - final Tooltip tooltip = Tooltip.forComponent(loggedUser) - .withText("Employee id: " + employeeId) - .withPosition(Tooltip.TooltipPosition.TOP_START); + if (uuid != null) { + employeeId = uuid.toString(); + } + } - final HorizontalLayout hl = new HorizontalLayout(loggedUser, logout); - hl.setJustifyContentMode(FlexComponent.JustifyContentMode.END); + final Tooltip tooltip = Tooltip.forComponent(loggedUser) + .withText("Employee id: " + employeeId) + .withPosition(Tooltip.TooltipPosition.TOP_START); - return hl; - }).orElseGet(HorizontalLayout::new); + final HorizontalLayout hl = new HorizontalLayout(loggedUser, menuBar); + hl.setJustifyContentMode(FlexComponent.JustifyContentMode.END); + + return hl; + }).orElseGet(HorizontalLayout::new); header.setAlignItems(FlexComponent.Alignment.STRETCH); header.setWidthFull(); addToNavbar(true, toggle, viewTitle, header); } + private MenuItem createIconItem(final HasMenuItems menu, final VaadinIcon iconName, + final String label, final String ariaLabel, final boolean isChild) { + final Icon icon = new Icon(iconName); + + if (isChild) { + icon.getStyle().set("width", "var(--lumo-icon-size-s)"); + icon.getStyle().set("height", "var(--lumo-icon-size-s)"); + icon.getStyle().set("marginRight", "var(--lumo-space-s)"); + } + + final MenuItem item = menu.addItem(icon, e -> { + }); + + if (ariaLabel != null) { + item.setAriaLabel(ariaLabel); + } + + if (label != null) { + item.add(new Text(label)); + } + + return item; + } + private void addDrawerContent() { - Span appName = new Span("pfs-intra"); + final Span appName = new Span("pfs-intra"); appName.addClassNames(LumoUtility.FontWeight.SEMIBOLD, LumoUtility.FontSize.LARGE); - Header header = new Header(appName); - - Scroller scroller = new Scroller(createNavigation()); - + final Header header = new Header(appName); + final Scroller scroller = new Scroller(createNavigation()); addToDrawer(header, scroller, createFooter()); } private SideNav createNavigation() { - SideNav nav = new SideNav(); + final SideNav nav = new SideNav(); authContext.getAuthenticatedUser(UserDetails.class).ifPresent(u -> { SideNavItem recruiting = new SideNavItem("Recruiting", MainView.class, @@ -99,7 +134,7 @@ public class MainLayout extends AppLayout { LineAwesomeIcon.QUESTION_SOLID.create())); SideNavItem admin = new SideNavItem("Admin", MainView.class, - LineAwesomeIcon.SUPERSCRIPT_SOLID.create()); + LineAwesomeIcon.BUILDING.create()); admin.addItem(new SideNavItem("Employees", EmployeesListView.class, LineAwesomeIcon.USER_EDIT_SOLID.create())); admin.addItem(new SideNavItem("Documents", DocumentsListView.class, @@ -129,9 +164,7 @@ public class MainLayout extends AppLayout { } private Footer createFooter() { - Footer layout = new Footer(); - - return layout; + return new Footer(); } @Override