portalicious: button menu component

AB#31040
global-121 · Nov 5, 2024 · 2c009d9 · 2c009d9
1 parent 9ef776a
commit 2c009d9
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 28 deletions.
diff --git a/interfaces/Portalicious/src/app/components/button-menu/button-menu.component.html b/interfaces/Portalicious/src/app/components/button-menu/button-menu.component.html
@@ -0,0 +1,32 @@
+<p-button
+  (click)="menu.toggle($event)"
+  [label]="label()"
+  [icon]="menuOpen() ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
+  iconPos="right"
+  rounded
+  [outlined]="outlined()"
+  [plain]="plain()"
+  [text]="text()"
+  [size]="size()"
+>
+  <ng-template pTemplate>
+    <span class="inline-flex items-center gap-2">
+      @if (icon()) {
+        <span [class]="'p-button-icon ' + icon()"></span>
+      }
+      <span class="p-button-label">{{ label() }}</span>
+    </span>
+  </ng-template>
+</p-button>
+<p-menu
+  #menu
+  [model]="menuItems()"
+  [popup]="true"
+  styleClass="w-auto [&_.p-menuitem-text]:whitespace-nowrap"
+  (onShow)="menuOpen.set(true)"
+  (onHide)="menuOpen.set(false)"
+>
+  <ng-template pTemplate="start">
+    <ng-content select="[menu-start]"></ng-content>
+  </ng-template>
+</p-menu>
diff --git a/interfaces/Portalicious/src/app/components/button-menu/button-menu.component.ts b/interfaces/Portalicious/src/app/components/button-menu/button-menu.component.ts
@@ -0,0 +1,30 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  input,
+  model,
+} from '@angular/core';
+
+import { MenuItem } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+import { MenuModule } from 'primeng/menu';
+
+@Component({
+  selector: 'app-button-menu',
+  standalone: true,
+  imports: [ButtonModule, MenuModule],
+  templateUrl: './button-menu.component.html',
+  styles: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ButtonMenuComponent {
+  label = input.required<string>();
+  menuItems = input.required<MenuItem[]>();
+  icon = input<string>();
+  outlined = input<boolean>(false);
+  plain = input<boolean>(false);
+  text = input<boolean>(false);
+  size = input<'large' | 'small'>();
+
+  menuOpen = model(false);
+}
diff --git a/...faces/Portalicious/src/app/components/page-layout/components/header/header.component.html b/...faces/Portalicious/src/app/components/page-layout/components/header/header.component.html
@@ -17,37 +17,24 @@
   </ng-template>
   <ng-template pTemplate="end">
     <div class="flex items-center lg:px-20">
-      <p-button
+      <app-button-menu
         label="Account"
         i18n-label="Top-right user-menu@@header-user-menu"
-        (click)="userMenu.toggle($event)"
-        icon="pi pi-chevron-down"
-        iconPos="right"
-        plain
-        rounded
-        text
+        [icon]="'pi pi-user'"
+        [menuItems]="userMenuOptions"
+        class="[&_.p-button-label]:duration-0 [&_button:not(:hover)]:text-white"
+        [plain]="true"
+        [text]="true"
         [size]="'small'"
-        class="[&_button:not(:hover)]:text-white"
       >
-        <ng-template pTemplate>
-          <span class="inline-flex gap-2">
-            <span class="pi pi-user"></span>
-            <span i18n="Top-right user-menu@@header-user-menu">Account</span>
-          </span>
-        </ng-template>
-      </p-button>
-      <p-menu
-        [model]="userMenuOptions"
-        #userMenu
-        [popup]="true"
-      >
-        <ng-template pTemplate="start">
-          <p class="mb-2 border-b border-b-grey-300 px-3 py-2">
-            <ng-container i18n>Logged in as:</ng-container><br />
-            <strong>{{ userName() }}</strong>
-          </p>
-        </ng-template>
-      </p-menu>
+        <p
+          menu-start
+          class="mb-2 border-b border-b-grey-300 px-3 py-2"
+        >
+          <ng-container i18n>Logged in as:</ng-container><br />
+          <strong>{{ userName() }}</strong>
+        </p>
+      </app-button-menu>
     </div>
   </ng-template>
 </p-toolbar>

diff --git a/interfaces/Portalicious/src/app/components/page-layout/components/header/header.component.ts b/interfaces/Portalicious/src/app/components/page-layout/components/header/header.component.ts
@@ -15,6 +15,7 @@ import { SidebarModule } from 'primeng/sidebar';
 import { ToolbarModule } from 'primeng/toolbar';
 
 import { AppRoutes } from '~/app.routes';
+import { ButtonMenuComponent } from '~/components/button-menu/button-menu.component';
 import { LanguageSwitcherComponent } from '~/components/language-switcher/language-switcher.component';
 import { LogoComponent } from '~/components/logo/logo.component';
 import { HealthWidgetComponent } from '~/components/page-layout/components/health-widget/health-widget.component';
@@ -34,6 +35,7 @@ import { AuthService } from '~/services/auth.service';
     LogoComponent,
     HealthWidgetComponent,
     LanguageSwitcherComponent,
+    ButtonMenuComponent,
   ],
   providers: [],
   templateUrl: './header.component.html',

diff --git a/services/121-service/package.json b/services/121-service/package.json
@@ -36,7 +36,7 @@
     "knip:fix": "knip --fix-type files,exports,types",
     "typecheck": "tsc --noEmit",
     "typecheck:dev": "tsc --noEmit --watch",
-    "install:dependencies-for-portal": "npm install --omit=dev --no-fund --no-audit"
+    "install:dependencies-for-portal": "npm install --no-fund --no-audit"
   },
   "private": true,
   "dependencies": {