chore: angular 17 new syntax

* Fixes order pid extract. * Fixes bucket name button. * Fixes request button. * Simplifies eslint configuration files. Co-Authored-by: Bertrand Zuchuat <[email protected]> Co-Authored-by: Bertrand Zuchuat <[email protected]>
Garfield-fr · Feb 19, 2024 · 3aef97b · 3aef97b
1 parent 7e95537
commit 3aef97b
Show file tree

Hide file tree

Showing 395 changed files with 10,078 additions and 9,329 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -8,13 +8,6 @@
       "files": [
         "*.ts"
       ],
-      "parserOptions": {
-        "project": [
-          "tsconfig.json",
-          "e2e/tsconfig.json"
-        ],
-        "createDefaultProgram": true
-      },
       "extends": [
         "plugin:@angular-eslint/recommended",
         "plugin:@angular-eslint/template/process-inline-templates"

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,
@@ -368,8 +371,8 @@
           "builder": "@angular-eslint/builder:lint",
           "options": {
             "lintFilePatterns": [
-              "projects/public-search/src/**/*.ts",
-              "projects/public-search/src/**/*.html"
+              "projects/public-search/**/*.ts",
+              "projects/public-search/**/*.html"
             ]
           }
         }
@@ -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",
@@ -848,5 +847,10 @@
         }
       }
     }
+  },
+  "cli": {
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }
diff --git a/projects/admin/.eslintrc.json b/projects/admin/.eslintrc.json
@@ -8,12 +8,6 @@
       "files": [
         "*.ts"
       ],
-      "parserOptions": {
-        "project": [
-          "projects/admin/tsconfig.eslint.json"
-        ],
-        "createDefaultProgram": false
-      },
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",

diff --git a/projects/admin/e2e/tsconfig.json b/projects/admin/e2e/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es2018",
+    "target": "es2022",
     "types": [
       "jasmine",
       "jasminewd2",

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