chore: angular 17 new syntax

* Shared * Admin Co-Authored-by: Bertrand Zuchuat <[email protected]>
Garfield-fr · Feb 13, 2024 · c36c566 · c36c566
1 parent 120a746
commit c36c566
Show file tree

Hide file tree

Showing 292 changed files with 7,878 additions and 7,071 deletions.
diff --git a/angular.json b/angular.json
@@ -157,7 +157,6 @@
             "main": "projects/public-holdings-items/src/main.ts",
             "polyfills": "projects/public-holdings-items/src/polyfills.ts",
             "tsConfig": "projects/public-holdings-items/tsconfig.app.json",
-            "aot": true,
             "assets": [
               {
                 "glob": "**/*.json",
@@ -171,6 +170,11 @@
               }
             ],
             "styles": [
+              "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
+              "node_modules/primeng/resources/primeng.min.css",
+              "node_modules/primeicons/primeicons.css",
+              "node_modules/primeflex/primeflex.min.css",
+              "node_modules/ngx-spinner/animations/ball-zig-zag.css",
               "projects/public-search/src/app/scss/styles.scss",
               "projects/shared/src/scss/styles.scss"
             ],
@@ -188,7 +192,6 @@
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -391,7 +394,6 @@
             "main": "projects/search-bar/src/main.ts",
             "polyfills": "projects/search-bar/src/polyfills.ts",
             "tsConfig": "projects/search-bar/tsconfig.app.json",
-            "aot": true,
             "assets": [
               {
                 "glob": "**/*.json",
@@ -419,7 +421,6 @@
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -646,7 +647,6 @@
             "main": "projects/public-user-profile-edit/src/main.ts",
             "polyfills": "projects/public-user-profile-edit/src/polyfills.ts",
             "tsConfig": "projects/public-user-profile-edit/tsconfig.app.json",
-            "aot": true,
             "assets": [
               {
                 "glob": "**/*.json",
@@ -755,7 +755,6 @@
             "main": "projects/public-user-password-change/src/main.ts",
             "polyfills": "projects/public-user-password-change/src/polyfills.ts",
             "tsConfig": "projects/public-user-password-change/tsconfig.app.json",
-            "aot": true,
             "assets": [
               {
                 "glob": "**/*.json",

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
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
   Copyright (C) 2021 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,76 +15,78 @@
   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 account" *ngIf="account && permissions else loading">
-  <!-- NAME ================================================================= -->
-  <div class="col-5 account-name depth-padding-{{ account.depth }}">
-    <a [routerLink]="[detailUrl]">{{ account.name }}</a>
-  </div>
-  <div class="col-1 account-number">
-    <ng-container *ngIf="account.number">[{{ account.number }}]</ng-container>
-  </div>
-  <!-- ACCOUNTING INFORMATIONS ============================================== -->
-  <div class="col-1 amount">
-    {{ account.allocated_amount | currency: organisation.default_currency }}
-  </div>
-  <ng-container *ngVar="account | accountAvailableAmount as available_amount">
+@defer (when account && permissions) {
+  <div class="row account">
+    <!-- NAME -->
+    <div class="col-5 account-name depth-padding-{{ account.depth }}">
+      <a [routerLink]="[detailUrl]">{{ account.name }}</a>
+    </div>
+    <div class="col-1 account-number">
+      @if (account.number) {
+        [{{ account.number }}]
+      }
+    </div>
+    <!-- ACCOUNTING INFORMATION'S -->
+    <div class="col-1 amount">
+      {{ account.allocated_amount | currency: organisation.default_currency }}
+    </div>
+    <ng-container *ngVar="account | accountAvailableAmount as available_amount">
+      <div class="col-1 amount" [class]="{
+        'text-success': available_amount > 0,
+        'text-muted': available_amount === 0,
+        'text-warning': available_amount < 0
+      }">
+        {{ available_amount | currency: organisation.default_currency }}
+      </div>
+    </ng-container>
     <div class="col-1 amount" [class]="{
-      'text-success': available_amount > 0,
-      'text-muted': available_amount === 0,
-      'text-warning': available_amount < 0
+      'text-danger': account.encumbrance_amount.self > 0,
+      'text-muted': account.encumbrance_amount.self <= 0
     }">
-      {{ available_amount | currency: organisation.default_currency }}
+      {{ account.encumbrance_amount.self | currency: organisation.default_currency }}
+    </div>
+    <div class="col-1 amount" [class]="{
+      'text-danger': account.expenditure_amount.self > 0,
+      'text-muted': account.expenditure_amount.self <= 0
+    }">
+      {{ account.expenditure_amount.self | currency: organisation.default_currency}}
+    </div>
+    <div class="col-1 amount" [class]="{
+      'text-muted': account.remaining_balance.self === 0,
+      'text-warning': account.remaining_balance.self < 0
+    }">
+      {{ account.remaining_balance.self | currency: organisation.default_currency }}
+    </div>
+    <!-- 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>
+      }
+      @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>
+      } @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>
+      }
     </div>
-  </ng-container>
-  <div class="col-1 amount" [class]="{
-    'text-danger': account.encumbrance_amount.self > 0,
-    'text-muted': account.encumbrance_amount.self <= 0
-  }">
-    {{ account.encumbrance_amount.self | currency: organisation.default_currency }}
-  </div>
-  <div class="col-1 amount" [class]="{
-    'text-danger': account.expenditure_amount.self > 0,
-    'text-muted': account.expenditure_amount.self <= 0
-  }">
-    {{ account.expenditure_amount.self | currency: organisation.default_currency}}
-  </div>
-  <div class="col-1 amount" [class]="{
-    'text-muted': account.remaining_balance.self === 0,
-    'text-warning': account.remaining_balance.self < 0
-  }">
-    {{ account.remaining_balance.self | currency: organisation.default_currency }}
-  </div>
-  <!-- ACTION BUTTONS ======================================================= -->
-  <div class="col-1 pr-0 text-right">
-    <button *ngIf="permissions.update.can"
-            type="button" class="btn btn-outline-primary btn-sm"
-            [routerLink]="['/records', 'acq_accounts', 'edit', account.pid]">
-      <i class="fa fa-pencil"></i>
-    </button>
-    <button *ngIf="permissions.delete.can; else notDelete"
-            type="button" class="btn btn-outline-danger btn-sm ml-1"
-            (click)="delete()">
-      <i class="fa fa-trash"></i>
-    </button>
-    <ng-template #notDelete>
-      <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>
-    </ng-template>
   </div>
-</div>
-<admin-account-brief-view
-  *ngFor="let child_account of children"
-  [account]="child_account"
-  [loadChildren]="loadChildren"
-  (deleteAccount)="accountDeleted($event)"
->
-</admin-account-brief-view>
-
-
-<ng-template #loading>
+} @placeholder {
   <i class="fa fa-spinner"></i>
-</ng-template>
+}
+
+@for (childAccount of children; track childAccount) {
+  <admin-account-brief-view
+    [account]="childAccount"
+    [loadChildren]="loadChildren"
+    (deleteAccount)="accountDeleted($event)"
+  ></admin-account-brief-view>
+}
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
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -50,7 +50,7 @@ export class AccountBriefViewComponent implements OnInit {
   // GETTER & SETTER ============================================================
   /** Get the current budget pid for the organisation */
   get organisation(): any {
-    return this._organisationService.organisation;
+    return this.organisationService.organisation;
   }
 
   /** Get the URL to access detail view for this account */
@@ -63,39 +63,39 @@ export class AccountBriefViewComponent implements OnInit {
    * @return the message to display into the tooltip box
    */
   get deleteInfoMessage(): string {
-    return this._recordPermissionService.generateDeleteMessage(this.permissions.delete.reasons);
+    return this.recordPermissionService.generateDeleteMessage(this.permissions.delete.reasons);
   }
 
   // CONSTRUCTOR & HOOKS ========================================================
   /**
    * Constructor
-   * @param _recordPermissionService - RecordPermissionService
-   * @param _organisationService - OrganisationService
-   * @param _accountApiService - AcqAccountApiService
-   * @param _toastrService - ToastrService
-   * @param _translateService - TranslateService
-   * @param _userService - UserService
+   * @param recordPermissionService - RecordPermissionService
+   * @param organisationService - OrganisationService
+   * @param accountApiService - AcqAccountApiService
+   * @param toastrService - ToastrService
+   * @param translateService - TranslateService
+   * @param userService - UserService
    */
   constructor(
-    private _recordPermissionService: RecordPermissionService,
-    private _organisationService: OrganisationService,
-    private _accountApiService: AcqAccountApiService,
-    private _toastrService: ToastrService,
-    private _translateService: TranslateService,
-    private _userService: UserService
+    private recordPermissionService: RecordPermissionService,
+    private organisationService: OrganisationService,
+    private accountApiService: AcqAccountApiService,
+    private toastrService: ToastrService,
+    private translateService: TranslateService,
+    private userService: UserService
   ) { }
 
   /** OnInit hook */
   ngOnInit(): void {
     if (this.account) {
       // load account permissions
-      this._recordPermissionService
+      this.recordPermissionService
         .getPermission('acq_accounts', this.account.pid)
         .subscribe((data: RecordPermissions) => this.permissions = data);
       // load children accounts
       if (this.loadChildren) {
-        const libraryPid = this._userService.user.currentLibrary;
-        this._accountApiService
+        const libraryPid = this.userService.user.currentLibrary;
+        this.accountApiService
           .getAccounts(libraryPid, this.account.pid)
           .subscribe(accounts => this.children = accounts);
       }
@@ -105,10 +105,10 @@ export class AccountBriefViewComponent implements OnInit {
   // COMPONENT FUNCTIONS ========================================================
   /** Delete the account */
   delete() {
-    this._accountApiService
+    this.accountApiService
       .delete(this.account.pid)
       .subscribe(() => {
-        this._toastrService.success(this._translateService.instant('Account deleted'));
+        this.toastrService.success(this.translateService.instant('Account deleted'));
         this.deleteAccount.emit(this.account);
       });
   }
@@ -117,5 +117,4 @@ export class AccountBriefViewComponent implements OnInit {
   accountDeleted(account: IAcqAccount): void {
     this.children = this.children.filter(item => item.pid !== account.pid);
   }
-
 }
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
@@ -15,11 +15,13 @@
   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/>.
 -->
-<ng-container *ngIf="organisation && esRecord$ | async as account">
+@if (organisation && esRecord$ | async; as account) {
   <!-- ROLLOVER INFO -->
-  <div *ngIf="!account.is_active" class="fiscal-year-closed" translate>Fiscal year closed</div>
+  @if (!account.is_active) {
+    <div class="fiscal-year-closed" translate>Fiscal year closed</div>
+  }
   <h1 class="mb-3">{{ account.name }}</h1>
-  <!-- Account general informations -->
+  <!-- Account general information's -->
   <div class="card my-2">
     <h6 class="card-header" translate>Details</h6>
     <div class="card-body">
@@ -30,19 +32,19 @@ <h6 class="card-header" translate>Details</h6>
         <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>
-        <ng-container *ngIf="account.parent">
+        @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>
-        </ng-container>
+        }
       </dl>
     </div>
   </div>
 
-  <!-- Account accounting informations -->
+  <!-- Account accounting information's -->
   <div class="card my-2 accounting-infos">
     <h6 class="card-header" translate>Accounting informations</h6>
     <div class="card-body">
@@ -115,4 +117,4 @@ <h6 class="card-header" translate>Accounting informations</h6>
       </table>
     </div>
   </div>
-</ng-container>
+}