primeng: admin entities

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

Hide file tree

Showing 17 changed files with 162 additions and 140 deletions.
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
@@ -17,30 +17,32 @@
 <div class="main-content">
   @if (record) {
     <ng-core-detail-button
-    [record]="record"
-    [type]="type"
-    [adminMode]="adminMode"
-    [useStatus]="useStatus"
-    [updateStatus]="updateStatus"
-    [deleteStatus]="deleteStatus"
-    (recordEvent)="recordEvent($event)"
-    (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>
-        }
-      }
-    </ng-container>
-  </ng-core-detail-button>
+      [record]="record"
+      [type]="type"
+      [adminMode]="adminMode"
+      [useStatus]="useStatus"
+      [updateStatus]="updateStatus"
+      [deleteStatus]="deleteStatus"
+      (recordEvent)="recordEvent($event)"
+      (deleteMessageEvent)="showDeleteMessage($event)"
+    >
+      <ng-container beforeButton>
+        <p-button
+          (onClick)="search(record)"
+          outlined
+          icon="fa fa-search"
+          [label]="'Search documents' | translate"
+        />
+        @if (record) { @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" />
   }
-  @if (error) {
-    <ng-core-error [error]="error"></ng-core-error>
-  }
-  <ng-template ngCoreRecordDetail></ng-template>
+  <ng-template ngCoreRecordDetail />
 </div>
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>
diff --git a/...ail-view/entities-detail-view/remote/remote-page-detail/remote-page-detail.component.html b/...ail-view/entities-detail-view/remote/remote-page-detail/remote-page-detail.component.html
@@ -17,25 +17,26 @@
 <div class="main-content">
   @if (record) {
     <ng-core-detail-button
-    [record]="record"
-    [type]="type"
-    [adminMode]="adminMode"
-    [useStatus]="useStatus"
-    [updateStatus]="updateStatus"
-    [deleteStatus]="deleteStatus"
-    (recordEvent)="recordEvent($event)"
-    (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>
-    </ng-container>
-  </ng-core-detail-button>
+      [record]="record"
+      [type]="type"
+      [adminMode]="adminMode"
+      [useStatus]="useStatus"
+      [updateStatus]="updateStatus"
+      [deleteStatus]="deleteStatus"
+      (recordEvent)="recordEvent($event)"
+      (deleteMessageEvent)="showDeleteMessage($event)"
+    >
+      <ng-container beforeButton>
+        <p-button
+          (onClick)="search(record)"
+          outlined
+          icon="fa fa-search"
+          [label]="'Search documents' | translate"
+        />
+      </ng-container>
+    </ng-core-detail-button>
+  } @if (error) {
+  <ng-core-error [error]="error" />
   }
-  @if (error) {
-    <ng-core-error [error]="error"></ng-core-error>
-  }
-  <ng-template ngCoreRecordDetail></ng-template>
+  <ng-template ngCoreRecordDetail />
 </div>