chore(circulation): refactoring primeng

Co-Authored-by: Bertrand Zuchuat <[email protected]>
Garfield-fr · Nov 4, 2024 · 232eb0b · 232eb0b
1 parent b2cfd92
commit 232eb0b
Show file tree

Hide file tree

Showing 36 changed files with 423 additions and 545 deletions.
diff --git a/projects/admin/src/app/circulation/checkin/checkin-action/checkin-action.component.html b/projects/admin/src/app/circulation/checkin/checkin-action/checkin-action.component.html
@@ -20,10 +20,18 @@
   </div>
 </div>
 <div>
-  <button id="action-patron" type="button" class="btn btn-outline-primary" (click)="setAction('patron')">
-    <i class="fa fa-user mr-1"></i> {{ 'Patron account' | translate }}
-  </button>
-  <button id="action-item" type="button" class="btn btn-primary" (click)="setAction('item')">
-    <i class="fa fa-file-o mr-1"></i> {{ 'Checkin the item' | translate }}
-  </button>
+  <p-button
+    id="action-patron"
+    icon="fa fa-user"
+    [label]="'Patron account'|translate"
+    [outlined]="true"
+    (onClick)="setAction('patron')"
+  />
+  <p-button
+    id="action-item"
+    icon="fa fa-file-o"
+    [label]="'Checkin the item'|translate"
+    [outlined]="true"
+    (onClick)="setAction('item')"
+  />
 </div>
diff --git a/projects/admin/src/app/circulation/circulation.module.ts b/projects/admin/src/app/circulation/circulation.module.ts
@@ -22,8 +22,11 @@ import { RecordModule } from '@rero/ng-core';
 import { SharedModule } from '@rero/shared';
 import { ButtonModule } from 'primeng/button';
 import { DynamicDialogModule } from 'primeng/dynamicdialog';
+import { InputSwitchModule } from 'primeng/inputswitch';
 import { MenuModule } from 'primeng/menu';
+import { MessagesModule } from 'primeng/messages';
 import { RippleModule } from 'primeng/ripple';
+import { SplitButtonModule } from 'primeng/splitbutton';
 import { TabMenuModule } from 'primeng/tabmenu';
 import { TagModule } from 'primeng/tag';
 import { JournalVolumePipe } from 'projects/public-search/src/app/pipe/journal-volume.pipe';
@@ -38,7 +41,6 @@ import { RequestedItemsListComponent } from './main-request/requested-items-list
 import { CancelRequestButtonComponent } from './patron/cancel-request-button.component';
 import { CardComponent } from './patron/card/card.component';
 import { ChangePasswordFormComponent } from './patron/change-password-form/change-password-form.component';
-import { HistoryLogLibraryComponent } from './patron/history/history-log-library/history-log-library.component';
 import { HistoryLogComponent } from './patron/history/history-log/history-log.component';
 import { HistoryComponent } from './patron/history/history.component';
 import { IllRequestItemComponent } from './patron/ill-request/ill-request-item/ill-request-item.component';
@@ -97,7 +99,6 @@ import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
         FixedDateFormComponent,
         OverdueTransactionComponent,
         HistoryLogComponent,
-        HistoryLogLibraryComponent,
         GetLoanCipoPipe,
         CheckinActionComponent,
         PatronFeeComponent,
@@ -120,7 +121,10 @@ import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
         TagModule,
         ButtonModule,
         TabMenuModule,
-        RippleModule
+        RippleModule,
+        MessagesModule,
+        InputSwitchModule,
+        SplitButtonModule
     ],
     providers: [
       CurrencyPipe

diff --git a/projects/admin/src/app/circulation/circulation.scss b/projects/admin/src/app/circulation/circulation.scss
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2023 RERO
+ * Copyright (C) 2023-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
@@ -18,12 +18,6 @@
  @import 'bootstrap/scss/functions';
  @import 'bootstrap/scss/variables';
 
- .btn-hover {
-   color: $black;
-   background-color: $warning;
-   // could be better to use ``@extend .btn:hover`` but it doesn't work for hover property
- }
-
  .item {
    margin-bottom: map-get($spacers, 1) !important;
    padding: map-get($spacers, 1) !important;

diff --git a/projects/admin/src/app/circulation/main-request/main-request.component.html b/projects/admin/src/app/circulation/main-request/main-request.component.html
@@ -14,59 +14,52 @@
   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="row mb-4">
-  <div class="col-12 col-md-6">
+<div class="grid mb-4">
+  <div class="col-6">
     <ng-core-search-input
       [placeholder]="placeholder | translate"
       [searchText]="searchText"
       (search)="searchValueUpdated($event)"
       [focus]="searchInputFocus"
       [disabled]="searchInputDisabled"
-    ></ng-core-search-input>
+    />
   </div>
   <!-- Sorting loans -->
-  <div class="col-md-6 d-flex align-items-end justify-content-end">
+  <div class="col-6 flex align-items-end justify-content-end">
     <!-- collapsed ? -->
-    <div class="custom-control custom-switch">
-      <input class="custom-control-input" type="checkbox" id="collapse-detail"
-        (click)="toggleDetailCollapsed($event.target.checked)"
-        [checked]="isDetailCollapsed"
-      >
-      <label class="custom-control-label pr-3" for="collapse-detail" translate>Collapse details</label>
+    <div>
+      <p-inputSwitch id="collapse-detail" [(ngModel)]="isDetailCollapsed" />
+      <label for="collapse-detail" translate>Collapse details</label>
     </div>
     <!-- auto refresh -->
-    <div class="custom-control custom-switch">
-      <input class="custom-control-input" type="checkbox" id="auto-refresh"
-        (click)="enableAutoRefresh($event.target.checked)"
-        [checked]="refreshInterval > 0"
-      >
-      <label class="custom-control-label" for="auto-refresh" translate>Auto refresh</label>
+    <div class="ml-2">
+      <p-inputSwitch id="auto-refresh" [ngModel]="refreshInterval > 0" (onChange)="enableAutoRefresh($event.checked)" />
+      <label for="auto-refresh" translate>Auto refresh</label>
     </div>
     @if (refreshInterval > 0) {
       <ng-core-sort-list
         class="pl-3"
         [options]="refreshOptions"
         [useIcon]="true"
         (selectChange)="selectingIntervalTimer($event)"
-      ></ng-core-sort-list>
+      />
     }
     <!-- Sorting loans -->
     <ng-core-sort-list
       class="pl-3"
       [options]="sortingCriteria"
       [useIcon]="true"
       (selectChange)="selectingSortCriteria($event)"
-    >
-    </ng-core-sort-list>
+    />
   </div>
 </div>
 
-<div class="row">
+<div class="grid">
   <div class="col">
     <admin-circulation-requested-items-list
       [items]="items"
       [isCollapsed]="isDetailCollapsed"
       (requestValidated)="searchValueUpdated($event)"
-    ></admin-circulation-requested-items-list>
+    />
   </div>
 </div>
diff --git a/projects/admin/src/app/circulation/main-request/main-request.component.ts b/projects/admin/src/app/circulation/main-request/main-request.component.ts
@@ -198,14 +198,6 @@ export class MainRequestComponent implements OnInit, OnDestroy {
     }
   }
 
-  /**
-   * Function used when detail collapsed is clicked
-   * @param state: the toggle switch state
-   */
-  toggleDetailCollapsed(state: boolean): void {
-    this.isDetailCollapsed = state;
-  }
-
   /**
    * Function used when auto-refresh is toggled
    * @param state: the toggle switch state

diff --git a/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.html b/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.html
@@ -14,28 +14,22 @@
   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/>.
 -->
-
 @if (document) {
-  <div class="row p-2 mb-1 align-middle item" [ngClass]="getCallout()" id="request-{{item.barcode}}">
-
+  <div class="grid p-2 mb-1 align-middle item" [ngClass]="getCallout()" id="request-{{item.barcode}}">
     <div class="actions">
       @if (item.loan.state === LoanState.PENDING) {
-        <button class="btn btn-sm btn-outline-secondary"
-                [attr.id]="item.barcode | idAttribute:{prefix: 'item', suffix: 'validate-button'}"
-                (click)="validateRequest()"
-        >
-          <i class="fa fa-check pr-1"></i>
-          {{ 'Validate' | translate }}
-        </button>
+        <p-button
+          icon="fa fa-check"
+          [label]="'Validate'|translate"
+          [id]="item.barcode | idAttribute:{prefix: 'item', suffix: 'validate-button'}"
+          [outlined]="true"
+          (onClick)="validateRequest()"
+        />
       }
     </div>
     <!-- FIRST ROW :: item-barcode, document-title, requester-name, request-date -->
     <div class="col-2">
-      <button type="button" class="btn-show-more"
-              [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
-              (click)="isCollapsed = !isCollapsed"
-              [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
-      </button>
+      <shared-open-close-button (status)="isCollapsed = $event" />
       <a [routerLink]="['/records','items','detail', item.pid]">{{ item.barcode }}</a>
     </div>
     <div name="title" class="col-lg-5">

diff --git a/...src/app/circulation/main-request/requested-items-list/requested-items-list.component.html b/...src/app/circulation/main-request/requested-items-list/requested-items-list.component.html
@@ -15,7 +15,7 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<div class="row mb-1 py-2 d-flex align-items-center bg-dark text-white rounded">
+<div class="grid mb-1 py-2 flex align-items-center bg-dark text-white rounded">
   <div class="col-2" translate>Item</div>
   <div class="col-5" translate>Document</div>
   <div class="col-2" translate>Call number</div>

diff --git a/projects/admin/src/app/circulation/patron/cancel-request-button.component.ts b/projects/admin/src/app/circulation/patron/cancel-request-button.component.ts
@@ -25,19 +25,20 @@ import { MessageService } from 'primeng/api';
   selector: 'admin-cancel-request-button',
   template: `
   @if (canCancelRequest()) {
-    <button type="button"
-            class="btn btn-outline-danger btn-sm"
-            (click)="showCancelRequestDialog($event)"
-            name="cancel">
-      <i class="fa fa-trash-o" aria-hidden="true"></i>
-    </button>
+    <p-button
+      icon="fa fa-trash-o"
+      severity="danger"
+      [outlined]="true"
+      (onClick)="showCancelRequestDialog($event)"
+    />
   } @else {
-    <button type="button" class="btn btn-outline-danger btn-sm"
-            title="{{'The request cannot be cancelled' | translate }}"
-            name="cancel"
-            disabled>
-      <i class="fa fa-trash-o" aria-hidden="true"></i>
-    </button>
+    <p-button
+      icon="fa fa-trash-o"
+      severity="danger"
+      [title]="'The request cannot be cancelled'|translate"
+      [outlined]="true"
+      [disabled]="true"
+    />
   }
   `
 })

diff --git a/projects/admin/src/app/circulation/patron/card/card.component.html b/projects/admin/src/app/circulation/patron/card/card.component.html
@@ -16,14 +16,14 @@
 -->
 @if (patron?.patron) {
   <div class="m-0" [ngClass]="{'text-muted': !clearPatronButton}">
-    <div class="row">
-      <div class="col row">
-        <div class="col-md-2 user-icon">
-          <i class="fa fa-user fa-5x" aria-hidden="true"></i>
-        </div>
-        <div class="col-md-10">
-          <div class="row">
-            <div class="col-md-10">
+    <div class="grid">
+      <div class="col-6">
+        <div class="flex w-full">
+          <div class="flex mr-3 align-items-center">
+            <i class="fa fa-user fa-5x" aria-hidden="true"></i>
+          </div>
+          <div class="flex w-full">
+            <div class="w-full">
               <h3>
                 <a [routerLink]="patronLink">
                   <span id="patron-last-name">{{ patron.last_name }}</span>
@@ -32,63 +32,72 @@ <h3>
                   }
                 </a>
               </h3>
-            </div>
-            @if (clearPatronButton) {
-              <div class="col-md-2">
-                <button id="clear-patron-button" type="button" class="btn btn-danger pull-right" (click)="clear()">
-                  <i class="fa fa-close" aria-hidden="true"></i>
-                </button>
-              </div>
-            }
-          </div>
-          <div class="row">
-            <div class="col-md-6">
-              <div id="patron-birth-date">
-                @if (patron.birth_date) {
-                  {{ patron.birth_date | dateTranslate:'mediumDate' }}
-                  ({{ patronAge }} {{ 'years old' | translate }})
-                  @if (isBirthday) {
-                    &nbsp;
-                    <i class="fa fa-birthday-cake text-warning blink"></i>
+              <div class="grid w-full mt-2">
+                <div class="col-6">
+                  <div id="patron-birth-date">
+                    @if (patron.birth_date) {
+                      {{ patron.birth_date | dateTranslate:'mediumDate' }}
+                      ({{ patronAge }} {{ 'years old' | translate }})
+                      @if (isBirthday) {
+                        &nbsp;
+                        <i class="fa fa-birthday-cake text-warning blink"></i>
+                      }
+                    }
+                  </div>
+                  <div id="patron-city">{{ patron.city }}</div>
+                </div>
+                <div class="col-6">
+                  @if (patron.patron.type.pid | getRecord: 'patron_types': 'string':'name' | async; as patronTypeName) {
+                    <div id="patron-type">{{ patronTypeName }}</div>
                   }
-                }
+                  <div id="patron-barcode">{{ barcode }}</div>
+                </div>
               </div>
-              <div id="patron-city">{{ patron.city }}</div>
-            </div>
-            <div class="col-md-6">
-              @if (patron.patron.type.pid | getRecord: 'patron_types': 'string':'name' | async; as patronTypeName) {
-                <div id="patron-type">{{ patronTypeName }}</div>
-              }
-              <div id="patron-barcode">{{ barcode }}</div>
             </div>
           </div>
+          <div class="flex">
+            <p-button icon="fa fa-close" severity="danger" [outlined]="true" (onClick)="clear()"></p-button>
+          </div>
         </div>
         <!-- NOTES-->
         @if (patron.notes) {
-          <div class="col mt-2 alert alert-warning" role="alert">
-            @for (note of patron.notes; track note) {
-              <strong class="alert-heading" translate>{{ note.type.toString() }}</strong>
-              <p class="mb-0 ml-3" [innerHTML]="note.content | nl2br"></p>
-            }
-          </div>
+          <p-messages class="w-full" severity="warn" [enableService]="false" [closable]="false" showTransitionOptions="0ms">
+            <ng-template pTemplate>
+              <ul class="list-unstyled mb-0">
+                @for (note of patron.notes; track note) {
+                  <li>
+                    <span class="font-bold">{{ note.type | translate | ucfirst }}</span>
+                    <p [innerHTML]="note.content | nl2br"></p>
+                  </li>
+                }
+              </ul>
+            </ng-template>
+          </p-messages>
         }
       </div>
-      <!-- Circulation message -->
-      @if (displayCirculationMessages) {
-        <ul class="col-6 list-group">
-          @if (patron.circulation_information) {
-            @for (message of patron.circulation_informations.messages; track message) {
-              <li class="list-group-item list-group-item-{{ getBootstrapColor(message.type) }}"
-                  [innerHTML]="message.content | nl2br"></li>
+      <div class="col-6">
+        <!-- Circulation message -->
+        @if (displayCirculationMessages) {
+            @if (patron.circulation_information) {
+              @for (message of patron.circulation_informations.messages; track message) {
+                <p-messages
+                  [value]="[{ severity: getMessageSeverity(message.type), detail: message.content }]"
+                  [closable]="false"
+                  [enableService]="false"
+                  showTransitionOptions="0ms"
+                />
+              }
+            }
+            @for (message of circulationMessages; track message) {
+              <p-messages
+                [value]="[{ severity: getMessageSeverity(message.type), detail: message.content }]"
+                [closable]="false"
+                [enableService]="false"
+                showTransitionOptions="0ms"
+              />
             }
-          }
-          @for (message of circulationMessages; track message) {
-            <li class="list-group-item list-group-item-{{ getBootstrapColor(message.type) }}"
-                [innerHTML]="message.content | nl2br"
-            ></li>
-          }
-        </ul>
-      }
+        }
+      </div>
     </div>
   </div>
 }