admin: improve app menu

Co-Authored-by: Bertrand Zuchuat <[email protected]>
Garfield-fr · Dec 4, 2024 · 490fc66 · 490fc66
1 parent 1d88383
commit 490fc66
Show file tree

Hide file tree

Showing 7 changed files with 455 additions and 415 deletions.
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 align-items-center 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/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-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
@@ -17,7 +17,13 @@
 <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-menuitem-link" [id]="item.id" [routerLink]="item.routerLink" [queryParams]="item.queryParams">
+      <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"></span>
         }
@@ -26,12 +32,18 @@
           <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-xs p-1">{{ item.shortcut }}</span>
+          <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-menuitem-link text-color" [id]="item.id" [href]="item.url" [target]="item.target">
+      <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"></span>
         }
@@ -40,7 +52,7 @@
           <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-xs p-1">{{ item.shortcut }}</span>
+          <span class="ml-auto border-1 surface-border border-round surface-100 text-sm px-2 py-1">{{ item.shortcut }}</span>
         }
       </a>
     }