admin: improve app menu

Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · Dec 5, 2024 · 259d0d9 · 259d0d9
1 parent 1d88383
commit 259d0d9
Show file tree

Hide file tree

Showing 11 changed files with 534 additions and 482 deletions.
diff --git a/projects/admin/src/app/app.module.ts b/projects/admin/src/app/app.module.ts
@@ -55,7 +55,6 @@ import { NoCacheHeaderInterceptor } from './interceptor/no-cache-header.intercep
 import { UserCurrentLibraryInterceptor } from './interceptor/user-current-library.interceptor';
 import { MenuAppComponent } from './menu/menu-app/menu-app.component';
 import { MenuDashboardComponent } from './menu/menu-dashboard/menu-dashboard.component';
-import { MenuDisplayComponent } from './menu/menu-display/menu-display.component';
 import { MenuUserComponent } from './menu/menu-user/menu-user.component';
 import { CountryCodeTranslatePipe } from './pipe/country-code-translate.pipe';
 import { ItemInCollectionPipe } from './pipe/item-in-collection.pipe';
@@ -334,7 +333,6 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     UploadFilesComponent,
     MenuAppComponent,
     MenuUserComponent,
-    MenuDisplayComponent,
     EntityAutocompleteComponent,
   ],
   imports: [

diff --git a/projects/admin/src/app/menu/menu-app/menu-app.component.html b/projects/admin/src/app/menu/menu-app/menu-app.component.html
@@ -15,6 +15,29 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <p-menubar [model]="items">
+  <ng-template pTemplate="item" let-item let-root="root">
+    <a
+      pRipple
+      class="flex p-element p-menuitem-link"
+      [attr.id]="item.id"
+      [routerLink]="item.routerLink"
+      [href]="item.url"
+      [queryParams]="item.queryParams"
+    >
+      @if (item.icon) {
+        <span [class]="item.icon" class="p-menuitem-icon"></span>
+      }
+      <span class="ml-1">{{ item.label }}</span>
+      @if (item.shortcut) {
+        <span class="ml-auto border-1 surface-border border-round surface-100 text-sm px-2 py-1">
+          {{ item.shortcut }}
+      </span>
+      }
+      @if (item.items) {
+        <i [ngClass]="['pi', root ? 'pi-angle-down ml-2' : 'pi-angle-right ml-auto']"></i>
+      }
+    </a>
+  </ng-template>
   <ng-template pTemplate="end">
     <admin-menu-user />
   </ng-template>

diff --git a/...nu/menu-display/menu-display.component.ts → ...app/menu/menu-app/menu-app.component.scss b/...nu/menu-display/menu-display.component.ts → ...app/menu/menu-app/menu-app.component.scss
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2024 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,13 +14,14 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, input } from '@angular/core';
-import { MenuItem } from 'primeng/api';
 
-@Component({
-  selector: 'admin-menu-display',
-  templateUrl: './menu-display.component.html',
-})
-export class MenuDisplayComponent {
-  items = input<MenuItem>();
+admin-menu-app {
+  p-menubarsub {
+    ul.p-submenu-list {
+      min-width: 250px;
+    }
+  }
+  .p-menuitem-link {
+    align-items:start !important;
+  }
 }
diff --git a/projects/admin/src/app/menu/menu-dashboard/menu-dashboard.component.html b/projects/admin/src/app/menu/menu-dashboard/menu-dashboard.component.html
@@ -14,22 +14,24 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="grid justify-content-center mt-2">
+<div class="flex flex-wrap justify-content-center mt-2">
   @for (item of items; track item) {
     <div class="col mx-1">
       <p-card>
-        <div class="header mb-2">
-          @if (item.icon) {
-            <i class="mr-1" [class]="item.icon"></i>
-          }
-          <span class="text-xl text-color">{{ item.label }}</span>
-        </div>
+        <ng-template pTemplate="header">
+          <div class="md:flex grid grid-nogutter bg-blue-900 text-white p-3 text-xl font-bold border-round-top">
+            @if (item.icon) {
+              <i class="mr-2" [class]="item.icon"></i>
+            }
+            {{ item.label }}
+          </div>
+        </ng-template>
         @for (menuItem of item.items; track menuItem) {
-          <p-tieredMenu [model]="[menuItem]">
-            <ng-template pTemplate="item" let-item let-hasSubmenu="hasSubmenu">
+          <p-tieredMenu [model]="[menuItem]" styleClass="w-full">
+            <ng-template pTemplate="item" let-item>
               <a
                 pRipple
-                class="flex align-items-center p-menuitem-link text-color"
+                class="flex align-items-center p-element p-menuitem-link"
                 [attr.id]="item.id"
                 [routerLink]="item.routerLink"
                 [href]="item.url"
@@ -40,12 +42,12 @@
                 }
                 <span class="ml-1">{{ item.label }}</span>
                 @if (item.shortcut) {
-                  <span class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">
+                  <span class="ml-auto border-1 surface-border border-round surface-100 text-sm px-2 py-1">
                     {{ item.shortcut }}
                 </span>
                 }
-                @if (hasSubmenu) {
-                  <i *ngIf="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+                @if (item.items) {
+                  <i class="pi pi-angle-right ml-auto text-primary"></i>
                 }
               </a>
             </ng-template>

diff --git a/projects/admin/src/app/menu/menu-dashboard/menu-dashboard.component.scss b/projects/admin/src/app/menu/menu-dashboard/menu-dashboard.component.scss
@@ -0,0 +1,30 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2021-2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+ admin-menu-dashboard {
+  p-card {
+    div.p-card-body {
+      @extend .px-1, .py-3;
+    }
+  }
+
+  p-tieredmenu {
+    div.p-tieredmenu {
+      @extend .border-none;
+    }
+  }
+ }
diff --git a/projects/admin/src/app/menu/menu-definition/menu-app.ts b/projects/admin/src/app/menu/menu-definition/menu-app.ts
@@ -460,9 +460,10 @@ export const MENU_APP: MenuItem[] = [
       },
       {
         name: 'Migrations',
-        router_link: ['/', 'migrations', 'records', 'migrations'],
-        attributes: { id: 'permissions-menu' },
-        extras: { iconClass: 'fa fa-cloud-upload' },
+        translateLabel: 'Migrations',
+        id: MENU_IDS.APP.ADMIN.MIGRATION,
+        icon: 'fa fa-cloud-upload',
+        routerLink: ['/', 'migrations', 'records', 'migrations'],
         access: {
           permissions: [PERMISSIONS.MIG_ACCESS]
         }

diff --git a/projects/admin/src/app/menu/menu-definition/menu-ids.ts b/projects/admin/src/app/menu/menu-definition/menu-ids.ts
@@ -29,6 +29,7 @@ export const MENU_IDS = {
       CIRCULATION_POLICY: 'app-admin-circulation-policy',
       ITEM_TYPE: 'app-admin-item-type',
       LIBRARY: 'app-admin-library',
+      MIGRATION: 'app-admin-migration',
       MY_LIBRARY: 'app-admin-library',
       MY_ORGANISATION: 'app-admin-organisation',
       PATRON_TYPE: 'app-admin-patron-type',

diff --git a/projects/admin/src/app/menu/menu-display/menu-display.component.html b/projects/admin/src/app/menu/menu-display/menu-display.component.html
diff --git a/projects/admin/src/app/menu/menu-user/menu-user.component.html b/projects/admin/src/app/menu/menu-user/menu-user.component.html
@@ -14,4 +14,58 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<admin-menu-display [items]="items" />
+<p-menubar [model]="items" [autoHide]="true">
+  <ng-template pTemplate="item" let-item let-root="root">
+    @if (item.routerLink && !item.url) {
+      <span
+        pRipple
+        class="flex align-items-center p-element p-menuitem-link"
+        [id]="item.id"
+        [routerLink]="item.routerLink"
+        [queryParams]="item.queryParams"
+      >
+        @if (item.icon) {
+          <span [class]="item.icon" class="p-menuitem-icon"></span>
+        }
+        <span class="ml-2">{{ item.label }}</span>
+        @if (item.badge) {
+          <p-badge [ngClass]="{ 'ml-auto': !root, 'ml-2': root }" [value]="item.badge"></p-badge>
+        }
+        @if (item.shortcut) {
+          <span class="ml-auto border-1 surface-border border-round surface-100 text-sm px-2 py-1">{{ item.shortcut }}</span>
+        }
+      </span>
+    }
+    @if (item.url && !item.routerLink) {
+      <a
+        pRipple
+        class="flex align-items-center p-element p-menuitem-link"
+        [id]="item.id"
+        [href]="item.url"
+        [target]="item.target"
+      >
+        @if (item.icon) {
+          <span [class]="item.icon" class="p-menuitem-icon"></span>
+        }
+        <span class="ml-2">{{ item.label }}</span>
+        @if (item.badge) {
+          <p-badge [ngClass]="{ 'ml-auto': !root, 'ml-2': root }" [value]="item.badge"></p-badge>
+        }
+        @if (item.shortcut) {
+          <span class="ml-auto border-1 surface-border border-round surface-100 text-sm px-2 py-1">{{ item.shortcut }}</span>
+        }
+      </a>
+    }
+    @if (!item.url && !item.routerLink) {
+      <div class="p-menuitem-link">
+        @if (item.icon) {
+          <span [class]="item.icon" class="p-menuitem-icon"></span>
+        }
+        <span class="ml-2">{{ item.label }}</span>
+        @if (!item.disabled && item.items) {
+          <i [ngClass]="['pi pi-fw', root ? 'pi-angle-down ml-2' : 'pi-angle-right ml-auto']"></i>
+        }
+      </div>
+    }
+  </ng-template>
+</p-menubar>