refactor: work in progress

Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · Oct 21, 2024 · 898c7df · 898c7df
1 parent 64742c4
commit 898c7df
Show file tree

Hide file tree

Showing 37 changed files with 597 additions and 452 deletions.
diff --git a/projects/admin/src/app/acquisition/acquisition.module.ts b/projects/admin/src/app/acquisition/acquisition.module.ts
@@ -62,6 +62,7 @@ import { PermissionsService, SharedModule } from '@rero/shared';
 import { OrderEmailFormComponent } from './components/order/order-email-form/order-email-form.component';
 import { PreviewEmailModule } from '../shared/preview-email/preview-email.module';
 import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
+import { PrimengImportModule } from '../shared/primeng-import/primeng-import.module';
 
 @NgModule({
   declarations: [
@@ -117,7 +118,8 @@ import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
     TabsModule,
     CoreModule,
     SharedModule,
-    PreviewEmailModule
+    PreviewEmailModule,
+    PrimengImportModule
   ],
   providers: [
     { provide: FORMLY_CONFIG, multi: true, useFactory: registerFormlyExtension, deps: [TranslateService] },

diff --git a/...c/app/acquisition/components/account/account-brief-view/account-brief-view.component.html b/...c/app/acquisition/components/account/account-brief-view/account-brief-view.component.html
@@ -60,22 +60,26 @@
     <!-- ACTION BUTTONS -->
     <div class="col-1 pr-0 text-right">
       @if (permissions.update.can) {
-        <button type="button" class="btn btn-outline-primary btn-sm"
-                [routerLink]="['/records', 'acq_accounts', 'edit', account.pid]">
-          <i class="fa fa-pencil"></i>
-        </button>
+        <p-button
+          icon="fa fa-pencil"
+          [outlined]="true"
+          [routerLink]="['/records', 'acq_accounts', 'edit', account.pid]"
+        />
       }
       @if (permissions.delete.can) {
-        <button type="button" class="btn btn-outline-danger btn-sm ml-1" (click)="delete()">
-          <i class="fa fa-trash"></i>
-        </button>
+        <p-button icon="fa fa-trash" severity="danger" [outlined]="true" (onClick)="delete()" />
       } @else {
-        <button type="button" class="btn btn-sm btn-outline-danger disabled ml-1"
-                title="{{ 'Delete' | translate}}"
-                [popover]="tolTemplate" triggers="mouseenter:mouseleave">
-          <i class="fa fa-trash"></i>
-        </button>
-        <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
+        <p-button
+          icon="fa fa-trash"
+          severity="danger"
+          [outlined]="true"
+          [title]="'Delete' | translate"
+          [pTooltip]="tooltipContent"
+          styleClass="text-red-100"
+        />
+        <ng-template #tooltipContent>
+          <span [innerHTML]="deleteInfoMessage | nl2br"></span>
+        </ng-template>
       }
     </div>
   </div>

diff --git a/...app/acquisition/components/account/account-detail-view/account-detail-view.component.html b/...app/acquisition/components/account/account-detail-view/account-detail-view.component.html
@@ -22,32 +22,27 @@
   }
   <h1 class="mb-3">{{ account.name }}</h1>
   <!-- Account general information's -->
-  <div class="card my-2">
-    <h6 class="card-header" translate>Details</h6>
-    <div class="card-body">
-      <dl class="row">
-        <dt class="col-3 label-title" translate>Account number</dt>
-        <dd class="col-9">{{ account.number }}</dd>
-        <dt class="col-3 label-title" translate>Budget</dt>
-        <dd class="col-9">{{ account.budget.pid | getRecord: 'budgets': 'field': 'name' | async }}</dd>
-        <dt class="col-3 label-title" translate>Library</dt>
-        <dd class="col-9">{{ account.library.pid | getRecord: 'libraries': 'field': 'name' | async }}</dd>
-        @if (account.parent) {
-          <dt class="col-3 label-title" translate>Parent account</dt>
-          <dd class="col-9">
-            <a [routerLink]="['/', 'records', 'acq_accounts', 'detail', account.parent.pid]">
-              {{ account.parent.pid | getRecord: 'acq_accounts': 'field': 'name' | async }}
-            </a>
-          </dd>
-        }
-      </dl>
-    </div>
-  </div>
+  <p-card [header]="'Details'|translate" styleClass="mb-3">
+    <dl class="row">
+      <dt class="col-3 label-title" translate>Account number</dt>
+      <dd class="col-9">{{ account.number }}</dd>
+      <dt class="col-3 label-title" translate>Budget</dt>
+      <dd class="col-9">{{ account.budget.pid | getRecord: 'budgets': 'field': 'name' | async }}</dd>
+      <dt class="col-3 label-title" translate>Library</dt>
+      <dd class="col-9">{{ account.library.pid | getRecord: 'libraries': 'field': 'name' | async }}</dd>
+      @if (account.parent) {
+        <dt class="col-3 label-title" translate>Parent account</dt>
+        <dd class="col-9">
+          <a [routerLink]="['/', 'records', 'acq_accounts', 'detail', account.parent.pid]">
+            {{ account.parent.pid | getRecord: 'acq_accounts': 'field': 'name' | async }}
+          </a>
+        </dd>
+      }
+    </dl>
+  </p-card>
 
   <!-- Account accounting information's -->
-  <div class="card my-2 accounting-infos">
-    <h6 class="card-header" translate>Accounting informations</h6>
-    <div class="card-body">
+  <p-card class="accounting-infos" [header]="'Accounting informations'|translate">
       <table class="table table-sm">
         <tbody>
         <tr>
@@ -115,6 +110,5 @@ <h6 class="card-header" translate>Accounting informations</h6>
         </tr>
         </tbody>
       </table>
-    </div>
-  </div>
+  </p-card>
 }
diff --git a/...cts/admin/src/app/acquisition/components/account/account-list/account-list.component.html b/...cts/admin/src/app/acquisition/components/account/account-list/account-list.component.html
@@ -20,32 +20,33 @@
     <h1 translate>Acquisition accounts</h1>
     <div class="ml-auto">
       <!-- ADD BUTTON -->
-      <a [routerLink]="['/', 'records', 'acq_accounts', 'new']"
-          [queryParams]="{ budget: organisation.current_budget_pid }"
-          [permissions]="permissions.ACAC_CREATE"
-          class="btn btn-sm btn-primary"
-      >
-        <i class="fa fa-plus"></i> {{ 'Add' | translate }}
-      </a>
+      <p-button
+        icon="fa fa-plus"
+        [label]="'Add'|translate"
+        [routerLink]="['/', 'records', 'acq_accounts', 'new']"
+        [queryParams]="{ budget: organisation.current_budget_pid }"
+        [permissions]="permissions.ACAC_CREATE"
+      />
       <!-- END ADD BUTTON -->
       <!-- EXPORT BUTTON -->
       <ng-core-export-button
         [exportOptions]="exportOptions"
       />
       <!-- END EXPORT BUTTON -->
       <!-- TRANSFER BUTTON -->
-      <a [routerLink]="['/', 'acquisition', 'accounts', 'transfer']"
-          [permissions]="permissions.ACAC_TRANSFER"
-          class="btn btn-sm btn-outline-primary"
-      >
-        <i class="fa fa-exchange"></i> {{ 'Transfer funds' | translate }} &hellip;
-      </a>
+      <p-button
+        icon="fa fa-exchange"
+        [outlined]="true"
+        [label]="'Transfer funds'|translate"
+        [routerLink]="['/', 'acquisition', 'accounts', 'transfer']"
+        [permissions]="permissions.ACAC_TRANSFER"
+      />
       <!-- END TRANSFER BUTTON -->
     </div>
   </header>
 
   <section class="mt-3">
-    <div class="row p-1 mb-2 bg-dark rounded text-light">
+    <div class="grid p-1 mb-2 bg-blue-900 text-light">
       <div class="col-6"></div>
       <div class="col-1 text-right" translate>Amount</div>
       <div class="col-1 text-right" translate>Available</div>

diff --git a/...n/src/app/acquisition/components/account/account-transfer/account-transfer.component.html b/...n/src/app/acquisition/components/account/account-transfer/account-transfer.component.html
@@ -16,9 +16,9 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (accountsToDisplay && organisation) {
-  <div class="container">
-    <h1 translate>Fund transfer</h1>
-    <form [formGroup]="form" (ngSubmit)="submit()">
+  <h1 translate>Fund transfer</h1>
+  <div class="grid">
+    <form class="w-full" [formGroup]="form" (ngSubmit)="submit()">
       @if (budgets.length > 1) {
         <select class="form-control" (change)="selectBudget($event)">
           @for (budgetPid of budgets; track budgetPid) {
@@ -28,6 +28,85 @@ <h1 translate>Fund transfer</h1>
           }
         </select>
       }
+        <div class="card-header row p-1 mb-2 bg-dark text-light">
+          <div class="col-1 text-center" translate>Source</div>
+          <div class="col-6"></div>
+          <div class="col-2 text-right" translate>Amount</div>
+          <div class="col-2 text-right" translate>Available</div>
+          <div class="col-1 text-center" translate>Target</div>
+        </div>
+        <div class="card-text mb-3">
+          @if (accountsToDisplay.length > 0) {
+            @for (account of accountsToDisplay; track account) {
+              <div class="row account my-2">
+                <div class="col-1 text-center">
+                  <input type="radio"
+                          name="source"
+                          value="{{ account.pid }}"
+                          (click)="selectAccount('source', account)"
+                          [disabled]="form.get('target').value && form.get('target').value.pid === account.pid"
+                  />
+                </div>
+                <div class="col-6 account-name depth-padding-{{ account.depth }}">
+                  <a [routerLink]="getDetailUrl(account)">{{ account.name }}</a>
+                </div>
+                <div class="col-2 amount">
+                  {{ account.allocated_amount | currency: organisation.default_currency }}
+                </div>
+                <div class="col-2 amount" [class]="{
+                  'text-success': account.remaining_balance.self > 0,
+                  'text-muted': account.remaining_balance.self === 0,
+                  'text-warning': account.remaining_balance.self < 0
+                }">
+                  {{ account.remaining_balance.self | currency: organisation.default_currency }}
+                </div>
+                <div class="col-1 text-center">
+                  <input type="radio" name="target"
+                          value="{{ account.pid }}"
+                          (click)="selectAccount('target', account)"
+                          [disabled]="form.get('source').value && form.get('source').value.pid === account.pid"
+                  />
+                </div>
+              </div>
+            }
+          } @else {
+            {{ 'No account available' | translate }}
+          }
+        </div>
+        <div class="card-footer row form-group mb-0">
+          <label for="amount" class="col-1 col-form-label">Amount</label>
+          <div class="input-group col-6">
+            <div class="input-group-prepend">
+              <div class="input-group-text">{{ currencySymbol }}</div>
+            </div>
+            <input type="number" class="form-control" id="amount" formControlName="amount"
+                   [class]="{'is-invalid': checkInput('amount')}"/>
+            @if (checkInput('amount')) {
+              <div class="ml-2 block pt-2">
+                @if (form.get('amount').hasError('required')) {
+                  <small class="text-danger" translate>
+                    This field is required.
+                  </small>
+                }
+                @if (form.get('amount').hasError('min')) {
+                  <small class="text-danger">
+                    {{ 'Minimum amount is' | translate }} {{ form.get('amount').errors.min.min }}.
+                  </small>
+                }
+                @if (form.get('amount').hasError('max')) {
+                  <small class="text-danger">
+                    {{ 'Maximum amount is' | translate }} {{ form.get('amount').errors.max.max }}.
+                  </small>
+                }
+              </div>
+            }
+          </div>
+          <div class="col text-right">
+            <p-button class="mr-2" type="reset" [label]="'Cancel'|translate" severity="danger" [outlined]="true" />
+            <p-button type="submit" [label]="'Transfer'|translate" [disabled]="form.invalid" />
+          </div>
+        </div>
+      <!--
       <div class="card container mt-3">
         <div class="card-header row p-1 mb-2 bg-dark text-light">
           <div class="col-1 text-center" translate>Source</div>
@@ -108,6 +187,7 @@ <h1 translate>Fund transfer</h1>
           </div>
         </div>
       </div>
+    -->
     </form>
   </div>
 }
diff --git a/...n/src/app/acquisition/components/budget/budget-brief-view/budgets-brief-view.component.ts b/...n/src/app/acquisition/components/budget/budget-brief-view/budgets-brief-view.component.ts
@@ -23,7 +23,7 @@ import { ResultItem } from '@rero/ng-core';
 @Component({
   selector: 'admin-budgets-brief-view',
   template: `
-  <h5 class="card-title mb-0 rero-ils-person">
+  <h5 class="mb-0">
     <i
       class="fa fa-circle mr-2"
       [title]="title"

diff --git a/...rc/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.html b/...rc/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.html
@@ -18,13 +18,18 @@
 @if (record$ | async; as record) {
   <!-- ROLLOVER INFO -->
   @if (!record.metadata.is_active) {
-    <div class="fiscal-year-closed" translate>Fiscal year closed</div>
+    <p-messages
+      [value]="[{ severity: 'warn', detail:'Fiscal year closed'|translate }]"
+      [closable]="false"
+      [enableService]="false"
+      showTransitionOptions="0ms"
+    />
   }
-  <header>
+  <header class="mb-3">
     <h1>{{ record.metadata.name }}</h1>
   </header>
   <section>
-    <dl class="row">
+    <dl class="grid">
       <dt class="col-3 label-title">Total</dt>
       <dd class="col-9">{{ totalAmount | currency:currencyCode:'symbol' }}</dd>
     </dl>

diff --git a/...min/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.html b/...min/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.html
@@ -16,7 +16,7 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (order) {
-  <article class="row order-brief-view">
+  <article class="grid order-brief-view">
     <div class="col-9 pl-0">
       <h5 class="m-0"><a [routerLink]="[detailUrl.link]">{{ order.reference }}</a></h5>
       <ng-container *ngVar="order.notes | notesFilter: [noteType.STAFF_NOTE] as notes">

diff --git a/...n/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.html b/...n/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.html
@@ -34,7 +34,12 @@
   <div class="container-fluid mt-2" [class.rollovered]="!order.is_current_budget">
     <!-- ROLLOVER INFO -->
     @if (!order.is_current_budget) {
-      <div class="fiscal-year-closed" translate>Fiscal year closed</div>
+      <p-messages
+        [value]="[{ severity: 'warn', detail:'Fiscal year closed'|translate }]"
+        [closable]="false"
+        [enableService]="false"
+        showTransitionOptions="0ms"
+      />
     }
 
     <h1 class="mb-3">{{ order.reference }}</h1>
@@ -52,9 +57,8 @@ <h1 class="mb-3">{{ order.reference }}</h1>
       }
     </admin-order-summary>
 
-    <tabset #orderTabs>
-      <!-- ORDER DETAIL VIEW -->
-      <tab heading="{{ 'Order' | translate }}">
+    <p-tabView>
+      <p-tabPanel [header]="'Order'|translate">
         <!-- ORDER LINES -->
         @if (isPermissionsLoaded) {
           <admin-order-lines class="row" [order]="order" [recordPermissions]="recordPermissions"></admin-order-lines>
@@ -90,16 +94,14 @@ <h5 class="m-0">
             </div>
           </div>
         }
-      </tab>
-      <!-- RECEIPTS DETAIL VIEW -->
-      <tab heading="{{ 'Reception' | translate }}" [disabled]="!canViewReceipts">
+      </p-tabPanel>
+      <p-tabPanel [header]="'Reception'|translate" [disabled]="!canViewReceipts">
         @if (isPermissionsLoaded) {
           <admin-receipt-list class="row" [order]="order" [recordPermissions]="recordPermissions"></admin-receipt-list>
         }
-      </tab>
-      <!-- HISTORY -->
+      </p-tabPanel>
       @if (historyVersions && historyVersions.length > 1) {
-        <tab heading="{{ 'History' | translate }}">
+        <p-tabPanel [header]="'History'|translate">
           <p-timeline [value]="historyVersions">
             <ng-template pTemplate="marker" let-event>
               <div [class.p-timeline-event-marker-current]="event.active" class="p-timeline-event-marker"></div>
@@ -109,8 +111,8 @@ <h5 class="m-0">
               <small>{{ event.description }}</small>
             </ng-template>
           </p-timeline>
-        </tab>
+        </p-tabPanel>
       }
-    </tabset>
+    </p-tabView>
   </div>
 }
diff --git a/...min/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.ts b/...min/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.ts
@@ -28,6 +28,7 @@ import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AcqOrderHistoryVersion, AcqOrderHistoryVersionResponseInterface, AcqOrderStatus, IAcqOrder } from '../../../classes/order';
 import { OrderEmailFormComponent } from '../order-email-form/order-email-form.component';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'admin-acquisition-order-detail-view',
@@ -41,6 +42,7 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
   private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
   private acqOrderService: AcqOrderApiService = inject(AcqOrderApiService);
   private permissionValidator: CurrentLibraryPermissionValidator = inject(CurrentLibraryPermissionValidator);
+  private translateService: TranslateService = inject(TranslateService);
 
   // COMPONENT ATTRIBUTES =====================================================
   /** Observable resolving record data */
@@ -124,6 +126,8 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
    */
   placeOrderDialog(): void {
     this.modalRef = this.dialogService.open(OrderEmailFormComponent, {
+      header: this.translateService.instant('Place order'),
+      width: '60vw',
       dismissableMask: true,
       data: {
         order: this.order