chore: refactoring components/service for primeng

Co-Authored-by: Bertrand Zuchuat <[email protected]>
Garfield-fr · Oct 29, 2024 · e0b6b5d · e0b6b5d
1 parent 09b142a
commit e0b6b5d
Show file tree

Hide file tree

Showing 145 changed files with 2,436 additions and 2,156 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -96,7 +96,7 @@
     "issn": "^1.0.6",
     "js-generate-password": "^0.1.9",
     "lodash-es": "^4.17.21",
-    "luxon": "^3.4.0",
+    "luxon": "^3.5.0",
     "marked": "^10.0.0",
     "moment": "^2.30.1",
     "ngx-bootstrap": "^12.0.0",

diff --git a/projects/admin/src/app/acquisition/acquisition.module.ts b/projects/admin/src/app/acquisition/acquisition.module.ts
@@ -19,12 +19,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { FormlyModule, FORMLY_CONFIG } from '@ngx-formly/core';
+import { FORMLY_CONFIG, FormlyModule } from '@ngx-formly/core';
+import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
 import { TranslateService } from '@ngx-translate/core';
 import { ApiService, CoreModule, RecordModule } from '@rero/ng-core';
+import { SharedModule } from '@rero/shared';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { PopoverModule } from 'ngx-bootstrap/popover';
-import { TabsModule } from 'ngx-bootstrap/tabs';
+import { PreviewEmailModule } from '../shared/preview-email/preview-email.module';
+import { PrimengImportModule } from '../shared/primeng-import/primeng-import.module';
 import { AcquisitionRoutingModule } from './acquisition-routing.module';
 import { AcqAccountApiService } from './api/acq-account-api.service';
 import { AcqOrderApiService } from './api/acq-order-api.service';
@@ -39,29 +41,26 @@ import { OrderBriefViewComponent } from './components/order/order-brief-view/ord
 import { OrderDetailViewComponent } from './components/order/order-detail-view/order-detail-view.component';
 import { OrderLineComponent } from './components/order/order-detail-view/order-line/order-line.component';
 import { OrderLinesComponent } from './components/order/order-detail-view/order-lines/order-lines.component';
+import { OrderEmailFormComponent } from './components/order/order-email-form/order-email-form.component';
+import { OrderSummaryComponent } from './components/order/order-summary/order-summary.component';
+import { ReceiptDetailViewComponent } from './components/receipt/receipt-detail-view/receipt-detail-view.component';
 import { OrderReceipt } from './components/receipt/receipt-form/order-receipt';
 import { OrderReceiptForm } from './components/receipt/receipt-form/order-receipt-form';
 import { OrderReceiptViewComponent } from './components/receipt/receipt-form/order-receipt-view.component';
-import { OrderSummaryComponent } from './components/order/order-summary/order-summary.component';
 import { ReceiptListComponent } from './components/receipt/receipt-list/receipt-list.component';
+import { ReceiptSummaryComponent } from './components/receipt/receipt-summary/receipt-summary.component';
 import { registerFormlyExtension } from './formly/extension';
 import { FieldDocumentBriefViewTypeComponent } from './formly/type/field-document-brief-view.type';
 import { FieldRefTypeComponent } from './formly/type/field-ref.type';
 import { RepeatTypeComponent } from './formly/type/repeat-section.type';
 import { SelectAccountComponent } from './formly/type/select-account/select-account.component';
 import { InputNoLabelWrapperComponent } from './formly/wrapper/input-no-label.wrapper';
+import { AccountAvailableAmountPipe } from './pipes/account-available-amount.pipe';
 import { NegativeAmountPipe } from './pipes/negative-amount.pipe';
-import { ReceiptSummaryComponent } from './components/receipt/receipt-summary/receipt-summary.component';
-import { ReceiptDetailViewComponent } from './components/receipt/receipt-detail-view/receipt-detail-view.component';
 import { NoteBadgeColorPipe } from './pipes/note-badge-color.pipe';
-import { AccountAvailableAmountPipe } from './pipes/account-available-amount.pipe';
-import { ReceptionDatesPipe } from './pipes/reception-dates.pipe';
 import { PreviewContentPipe } from './pipes/preview-content.pipe';
 import { ReceiptLineTotalAmountPipe } from './pipes/receipt-line-total-amount.pipe';
-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 { ReceptionDatesPipe } from './pipes/reception-dates.pipe';
 
 @NgModule({
   declarations: [
@@ -96,7 +95,6 @@ import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
   ],
   imports: [
     BsDropdownModule.forRoot(),
-    PopoverModule.forRoot(),
     CommonModule,
     AcquisitionRoutingModule,
     FormlyModule,
@@ -114,10 +112,10 @@ import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
       ]
     }),
     RecordModule,
-    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,27 @@
     <!-- 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()" styleClass="ml-1" />
       } @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"
+          tooltipPosition="top"
+          styleClass="text-red-200 ml-1"
+        />
+        <ng-template #tooltipContent>
+          <span [innerHTML]="deleteInfoMessage"></span>
+        </ng-template>
       }
     </div>
   </div>

diff --git a/...src/app/acquisition/components/account/account-brief-view/account-brief-view.component.ts b/...src/app/acquisition/components/account/account-brief-view/account-brief-view.component.ts
@@ -21,6 +21,7 @@ import { RecordPermissions } from '@app/admin/classes/permissions';
 import { OrganisationService } from '@app/admin/service/organisation.service';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { TranslateService } from '@ngx-translate/core';
+import { CONFIG } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
 import { MessageService } from 'primeng/api';
 import { AcqAccountApiService } from '../../../api/acq-account-api.service';
@@ -99,7 +100,8 @@ export class AccountBriefViewComponent implements OnInit {
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('Account'),
-          detail: this.translateService.instant('Account deleted')
+          detail: this.translateService.instant('Account deleted'),
+          life: CONFIG.MESSAGE_LIFE
         });
         this.deleteAccount.emit(this.account);
       });

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>
 }