primeng: admin patrons

Co-Authored-by: Johnny Mariéthoz <[email protected]>
Co-Authored-by: Bertrand Zuchuat <[email protected]>

projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.html

@@ -16,38 +16,37 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (record) {
-  <div
-    [attr.id]="record.metadata.pid | idAttribute : {'prefix': 'patron', 'suffix': 'brief-view'}"
-    class="patron-brief brief-view"
-  >
-    <h5 class="card-title">
-      <a [routerLink]="[detailUrl.link]">
-        {{ record.metadata.last_name }}
-        @if (record.metadata.first_name) {
-          {{ record.metadata.first_name }}
-        }
-      </a>
+  <div class="flex flex-column gap-2">
+    <div class="flex">
+      <h5 class="flex-grow-1">
+        <a [routerLink]="[detailUrl.link]">
+          {{ record.metadata.last_name }}
+          @if (record.metadata.first_name) {
+            {{ record.metadata.first_name }}
+          }
+        </a>
+      </h5>
       @if (circulationAccess && record.metadata.patron) {
-        <div class="action-buttons">
-          <a
-            [routerLink]="['/circulation', 'patron', record.metadata.patron.barcode[0]]"
-            class="btn-link btn btn-sm btn-outline-primary"
-          >
-            <i class="fa fa-exchange mr-2"></i>
-            {{ 'Circulation' | translate }}
-          </a>
-        </div>
+        <a
+          [routerLink]="['/circulation', 'patron', record.metadata.patron.barcode[0]]"
+          class="p-button  p-button-outlined"
+        >
+          <i class="fa fa-exchange"></i>&nbsp;
+          {{ 'Circulation' | translate }}
+        </a>
       }
-    </h5>
-    <div class="card-text">
-    <p>
+    </div>
+
+    <div class="flex gap-1 flex-wrap">
       @for (role of record.metadata.roles; track role) {
-        <small class="badge badge-pill mr-1" [class]="getRoleBadgeColor(role)">
+        <p-tag [severity]="getRoleTagSeverity(role)">
           {{ role | translate }}
-        </small>
+        </p-tag>
       }
-    </p>
-    <p>{{ record.metadata.birth_date | dateTranslate:'mediumDate' }} &mdash; {{ record.metadata.city }}</p>
     </div>
+
+    <span>
+      {{ record.metadata.birth_date | dateTranslate:'mediumDate' }} &mdash; {{ record.metadata.city }}
+    </span>
   </div>
 }

projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.ts

@@ -15,15 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, inject, Input } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { ResultItem } from '@rero/ng-core';
 import { PERMISSIONS, PermissionsService } from '@rero/shared';
-import { roleBadgeColor } from '../../../utils/roles';
+import { roleTagSeverity } from '../../../utils/roles';
 
 @Component({
   selector: 'admin-patrons-brief-view',
-  templateUrl: './patrons-brief-view.component.html',
-  styleUrls: ['./patrons-brief-view.component.scss']
+  templateUrl: './patrons-brief-view.component.html'
 })
 export class PatronsBriefViewComponent implements ResultItem {
 
@@ -49,7 +48,7 @@ export class PatronsBriefViewComponent implements ResultItem {
    * @param role: the role to check.
    * @return the bootstrap badge class to use for this role.
    */
-  getRoleBadgeColor(role: string): string {
-    return roleBadgeColor(role);
+  getRoleTagSeverity(role: string): string {
+    return roleTagSeverity(role);
   }
 }