primeng: admin entities

Co-Authored-by: Johnny Mariéthoz <[email protected]> Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · Jan 8, 2025 · 0a60dd3 · 0a60dd3
1 parent 3c4b132
commit 0a60dd3
Show file tree

Hide file tree

Showing 20 changed files with 207 additions and 185 deletions.
diff --git a/projects/admin/src/app/app.component.html b/projects/admin/src/app/app.component.html
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
@@ -27,11 +27,11 @@
       @if (item.icon) {
         <span [class]="item.icon" class="p-menuitem-icon"></span>
       }
-      <span class="ml-1">{{ item.label }}</span>
+      <span>{{ 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>
+        </span>
       }
       @if (item.items) {
         <i [ngClass]="['pi', root ? 'pi-angle-down ml-2' : 'pi-angle-right ml-auto']"></i>

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,20 +14,19 @@
   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="flex flex-wrap justify-content-center mt-2">
+<div class="grid justify-content-center">
   @for (item of items; track item) {
-    <div class="col mx-1">
-      <p-card>
+      <p-card class="col">
         <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">
+          <div class="bg-blue-900 text-white gap-1 flex align-items-center p-3 font-bold border-round-top">
             @if (item.icon) {
-              <i class="mr-2" [class]="item.icon"></i>
+              <i [class]="item.icon"></i>
             }
-            {{ item.label }}
+            <span>{{ item.label }}</span>
           </div>
         </ng-template>
         @for (menuItem of item.items; track menuItem) {
-          <p-tieredMenu [model]="[menuItem]" styleClass="w-full">
+          <p-tieredMenu [model]="[menuItem]" styleClass="w-full p-0">
             <ng-template pTemplate="item" let-item>
               <a
                 pRipple
@@ -40,7 +39,7 @@
                 @if (item.icon) {
                   <span [class]="item.icon" class="p-menuitem-icon"></span>
                 }
-                <span class="ml-1">{{ item.label }}</span>
+                <span>{{ 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 }}
@@ -54,6 +53,5 @@
           </p-tieredMenu>
         }
       </p-card>
-    </div>
   }
 </div>
diff --git a/...p/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.html b/...p/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.html
@@ -16,43 +16,45 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (record$ | async; as record) {
-    <h1 class="mb-0" *ngVar="icon($any(record).metadata.type) as icon">
-      <i class="fa {{ icon.class }}" title="{{ icon.title }}" aria-hidden="true"></i>
+    <h1 *ngVar="icon($any(record).metadata.type) as icon">
+      <i class="fa {{ icon.class }}" [title]="icon.title" aria-hidden="true"></i>
       {{ $any(record).metadata.authorized_access_point }}</h1>
     <small>
       {{ 'Local ID' | translate }}: {{ $any(record).metadata.pid }}
     </small>
-    <span class="badge badge-info" translate>Local</span>
+    <p-tag severity="info" [value]="'Local' | translate" />
 
-    <article class="card my-2">
-      <header class="card-header">
-        <b class="card-title mb-0">{{ 'local' | translate | uppercase }}</b>
-      </header>
-      <article class="card-body collapse show">
+    <p-accordion styleClass="mt-2" [multiple]="true">
+    <p-accordionTab [selected]="true">
+      <ng-template pTemplate="header">
+        <h5>{{ 'local' | translate | uppercase }}</h5>
+      </ng-template>
+      <div class="pt-2">
         @switch ($any(record).metadata.type) {
           @case (entityType.ORGANISATION) {
-            <admin-local-organisation-detail-view [record]="$any(record).metadata"></admin-local-organisation-detail-view>
+            <admin-local-organisation-detail-view [record]="$any(record).metadata" />
           }
           @case (entityType.PERSON) {
-            <admin-local-person-detail-view [record]="$any(record).metadata"></admin-local-person-detail-view>
+            <admin-local-person-detail-view [record]="$any(record).metadata" />
           }
           @case (entityType.PLACE) {
-            <admin-local-place-detail-view [record]="$any(record).metadata"></admin-local-place-detail-view>
+            <admin-local-place-detail-view [record]="$any(record).metadata" />
           }
           @case (entityType.TEMPORAL) {
-            <admin-local-place-detail-view [record]="$any(record).metadata"></admin-local-place-detail-view>
+            <admin-local-place-detail-view [record]="$any(record).metadata" />
           }
           @case (entityType.TOPIC) {
-            <admin-local-topic-detail-view [record]="$any(record).metadata"></admin-local-topic-detail-view>
+            <admin-local-topic-detail-view [record]="$any(record).metadata" />
           }
           @case (entityType.WORK) {
-            <admin-local-work-detail-view [record]="$any(record).metadata"></admin-local-work-detail-view>
+            <admin-local-work-detail-view [record]="$any(record).metadata" />
           }
           @default {
             {{ 'Missing template for this entity type:' | translate }} {{ $any(record).metadata.type }}
           }
         }
-      </article>
-    </article>
+      </div>
+    </p-accordionTab>
+  </p-accordion>
 }
 
diff --git a/.../src/app/record/detail-view/entities-detail-view/local/entities-local-global.component.ts b/.../src/app/record/detail-view/entities-detail-view/local/entities-local-global.component.ts
@@ -20,7 +20,7 @@ import { Component, Input } from '@angular/core';
 @Component({
   selector: 'admin-entities-local-global',
   template: `
-  <dl class="entity-fields">
+  <dl class="metadata">
     <ng-content></ng-content>
     @if (record.source_catalog) {
         <dt translate>Source catalog</dt>

diff --git a/...l-view/local/local-organisation-detail-view/local-organisation-detail-view.component.html b/...l-view/local/local-organisation-detail-view/local-organisation-detail-view.component.html
@@ -26,7 +26,7 @@
   @if (record.subordinate_unit) {
     <dt translate>Subordinate unit</dt>
     <dd>
-      <ul>
+      <ul class="list-none p-0 m-0">
         @for (name of record.subordinate_unit; track name) {
           <li>{{ name }}</li>
         }
@@ -72,7 +72,7 @@
   @if (record.alternative_names && record.alternative_names.length > 0) {
     <dt translate>Alternative names</dt>
     <dd>
-      <ul>
+      <ul class="list-none p-0 m-0">
         @for (name of record.alternative_names; track name) {
           <li>{{ name }}</li>
         }

diff --git a/...detail-view/entities-detail-view/local/local-page-detail/local-page-detail.component.html b/...detail-view/entities-detail-view/local/local-page-detail/local-page-detail.component.html
@@ -14,9 +14,8 @@
   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="main-content">
-  @if (record) {
-    <ng-core-detail-button
+@if (record) {
+  <ng-core-detail-button
     [record]="record"
     [type]="type"
     [adminMode]="adminMode"
@@ -27,20 +26,24 @@
     (deleteMessageEvent)="showDeleteMessage($event)"
   >
     <ng-container beforeButton>
-      <button (click)="search(record)" class="btn btn-sm btn-outline-primary mr-1">
-        <i class="fa fa-search" aria-hidden="true"></i>
-        {{ 'Search documents' | translate }}
-      </button>
-      @if (record) {
-        @if (isEnabledOperationLog && record.metadata.pid) {
-          <admin-operation-logs-dialog resourceType="local_entities" [resourcePid]="record.metadata.pid"></admin-operation-logs-dialog>
-        }
+      <p-button
+        (onClick)="search(record)"
+        outlined
+        icon="fa fa-search"
+        [label]="'Search documents' | translate"
+      />
+      @if (isEnabledOperationLog && record.metadata.pid) {
+        <admin-operation-logs-dialog
+          resourceType="local_entities"
+          [resourcePid]="record.metadata.pid"
+        />
       }
     </ng-container>
   </ng-core-detail-button>
-  }
-  @if (error) {
-    <ng-core-error [error]="error"></ng-core-error>
-  }
-  <ng-template ngCoreRecordDetail></ng-template>
-</div>
+}
+
+@if (error) {
+  <ng-core-error [error]="error" />
+}
+
+<ng-template ngCoreRecordDetail />
diff --git a/...tities-detail-view/local/local-person-detail-view/local-person-detail-view.component.html b/...tities-detail-view/local/local-person-detail-view/local-person-detail-view.component.html
@@ -51,7 +51,7 @@
   @if (record.alternative_names && record.alternative_names.length > 0) {
       <dt translate>Alternative names</dt>
       <dd>
-        <ul>
+        <ul class="list-none p-0 m-0">
           @for (name of record.alternative_names; track name) {
             <li>{{ name }}</li>
           }

diff --git a/...entities-detail-view/local/local-place-detail-view/local-place-detail-view.component.html b/...entities-detail-view/local/local-place-detail-view/local-place-detail-view.component.html
@@ -26,7 +26,7 @@
   @if (record.alternative_names && record.alternative_names.length > 0) {
     <dt translate>Alternative names</dt>
     <dd>
-      <ul>
+      <ul class="list-none p-0 m-0">
         @for (name of record.alternative_names; track name) {
           <li>{{ name }}</li>
         }

diff --git a/...entities-detail-view/local/local-topic-detail-view/local-topic-detail-view.component.html b/...entities-detail-view/local/local-topic-detail-view/local-topic-detail-view.component.html
@@ -27,9 +27,9 @@
   @if (record.genreForm) {
     <dt translate>Genre form</dt>
     <dd>
-      <i class="fa mr-2" [ngClass]="{
+      <i class="fa" [ngClass]="{
         'fa-check text-success': record.conference,
-        'fa-times text-danger': !record.conference
+        'fa-times text-error': !record.conference
       }"></i>
     </dd>
   }
@@ -38,7 +38,7 @@
     <ng-container>
       <dt translate>Alternative names</dt>
       <dd>
-        <ul>
+        <ul class="list-none p-0 m-0">
           @for (name of record.alternative_names; track name) {
             <li>{{ name }}</li>
           }

diff --git a/...record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.html b/...record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.html
@@ -16,61 +16,65 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (record$ | async; as record) {
-  <h1 class="mb-0" *ngVar="icon($any(record).metadata.type) as icon">
-    <i class="fa {{ icon.class }}" title="{{ icon.title }}" aria-hidden="true"></i>
+  <h1 *ngVar="icon($any(record).metadata.type) as icon">
+    <i class="fa {{ icon.class }}" [title]="icon.title" aria-hidden="true"></i>
     {{ $any(record).metadata | extractSourceField : 'authorized_access_point' }}</h1>
   <small>
     {{ 'MEF ID' | translate }}: {{ $any(record).metadata.pid }}
   </small>
-  <span class="badge badge-warning" translate>Remote</span>
+  <p-tag severity="warning" [value]="'Remote' | translate" />
 
   <!-- SOURCES -->
-  @for (source of $any(record).metadata.sources.sort(); track source) {
-    <article class="card my-2">
-      <header class="card-header">
-        <b class="card-title mb-0">{{ source | translate | uppercase }}</b>
-      </header>
-      <article id="contribution-{{ source }}" class="card-body collapse show">
-        <dl class="entity-fields">
-          @switch ($any(record).metadata.type) {
-            @case (entityType.PERSON) {
-              <admin-remote-entities-person-detail-view [record]="$any(record).metadata[source]" [source]="source" />
+   <p-accordion styleClass="mt-2" [multiple]="true">
+    @for (source of $any(record).metadata.sources.sort(); track source) {
+      <p-accordionTab [selected]="true">
+        <ng-template pTemplate="header">
+          <h5>{{ source | translate | uppercase }}</h5>
+        </ng-template>
+        <div class="pt-2">
+            @switch ($any(record).metadata.type) {
+              @case (entityType.PERSON) {
+                <admin-remote-entities-person-detail-view [record]="$any(record).metadata[source]" [source]="source" />
+              }
+              @case (entityType.ORGANISATION) {
+                <admin-remote-entities-organisation-detail-view [record]="$any(record).metadata[source]" [source]="source" />
+              }
+              @case (entityType.TOPIC) {
+                <admin-remote-topic-detail-view [record]="$any(record).metadata[source]" [source]="source" />
+              }
+              @case (entityType.PLACE) {
+                <admin-remote-topic-detail-view [record]="$any(record).metadata[source]" [source]="source" />
+              }
+              @case (entityType.TEMPORAL) {
+                <admin-remote-topic-detail-view [record]="$any(record).metadata[source]" [source]="source" />
+              }
+              @default {
+                {{ 'Missing template for this entity type:' | translate }} {{ $any(record).metadata.type }}
+              }
             }
-            @case (entityType.ORGANISATION) {
-              <admin-remote-entities-organisation-detail-view [record]="$any(record).metadata[source]" [source]="source" />
+            <!-- IDENTIFIED BY -->
+            @if ($any(record).metadata[source].identifiedBy?.length) {
+              @if (identifiedByFilter($any(record).metadata[source].identifiedBy).length > 0) {
+              <dl class="metadata">
+                <dt translate>Identified by</dt>
+                <dd>
+                  <ul class="list-none p-0 m-0">
+                    @for (identifiedBy of identifiedByFilter($any(record).metadata[source].identifiedBy); track identifiedBy) {
+                      <li>
+                        <a class="rero-ils-external-link" href="{{ identifiedBy.value }}" title="{{ identifiedBy.value }}" target="_blank">{{ identifiedBy.source }}</a>
+                      </li>
+                    }
+                  </ul>
+                </dd>
+                </dl>
+              }
             }
-            @case (entityType.TOPIC) {
-              <admin-remote-topic-detail-view [record]="$any(record).metadata[source]" [source]="source" />
-            }
-            @case (entityType.PLACE) {
-              <admin-remote-topic-detail-view [record]="$any(record).metadata[source]" [source]="source" />
-            }
-            @case (entityType.TEMPORAL) {
-              <admin-remote-topic-detail-view [record]="$any(record).metadata[source]" [source]="source" />
-            }
-            @default {
-              {{ 'Missing template for this entity type:' | translate }} {{ $any(record).metadata.type }}
-            }
-          }
-          <!-- IDENTIFIED BY -->
-          @if ($any(record).metadata[source].identifiedBy?.length) {
-            @if (identifiedByFilter($any(record).metadata[source].identifiedBy).length > 0) {
-              <dt translate>Identified by</dt>
-              <dd>
-                <ul>
-                  @for (identifiedBy of identifiedByFilter($any(record).metadata[source].identifiedBy); track identifiedBy) {
-                    <li>
-                      <a class="rero-ils-external-link" href="{{ identifiedBy.value }}" title="{{ identifiedBy.value }}" target="_blank">{{ identifiedBy.source }}</a>
-                    </li>
-                  }
-                </ul>
-              </dd>
-            }
-          }
-          <dt translate>Id</dt>
-          <dd>{{ $any(record).metadata[source].pid }}</dd>
-        </dl>
-      </article>
-    </article>
-  }
+          <dl class="metadata">
+            <dt translate>Id</dt>
+            <dd>{{ $any(record).metadata[source].pid }}</dd>
+          </dl>
+        </div>
+      </p-accordionTab>
+    }
+  </p-accordion>
 }
diff --git a/...record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.scss b/...record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.scss
@@ -0,0 +1,5 @@
+admin-remote-entities-remote-detail-view {
+  dl.metadata {
+    @extend .p-0;
+  }
+}
diff --git a/...e/remote-organisation-detail-view/remote-entities-organisation-detail-view.component.html b/...e/remote-organisation-detail-view/remote-entities-organisation-detail-view.component.html
@@ -15,6 +15,7 @@
   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/>.
 -->
+<dl class="metadata">
 <!-- AUTHORIZED ACCESS POINT -->
 @if (record.authorized_access_point) {
   <dt translate>Authorized access point</dt>
@@ -35,7 +36,7 @@
 @if (record.language) {
   <dt translate>Language</dt>
   <dd>
-    <ul>
+    <ul class="list-none p-0 m-0">
       @for (language of record.language; track language) {
         <li>{{ ('lang_' + language) | translate }}</li>
       }
@@ -52,10 +53,11 @@
 @if (record.variant_access_point) {
   <dt translate>Variant name</dt>
   <dd>
-    <ul>
+    <ul class="list-none p-0 m-0">
       @for (variant_name of record.variant_access_point; track variant_name) {
         <li>{{ variant_name }}</li>
       }
     </ul>
   </dd>
 }
+</dl>