chore: angular 17 new syntax

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

Hide file tree

Showing 240 changed files with 6,479 additions and 5,833 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/projects/admin/src/app/app.component.html b/projects/admin/src/app/app.component.html
diff --git a/projects/admin/src/app/record/brief-view/circ-policies-brief-view.component.ts b/projects/admin/src/app/record/brief-view/circ-policies-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-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
@@ -15,26 +15,37 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { ResultItem } from '@rero/ng-core';
 
 @Component({
   selector: 'admin-circ-policies-brief-view',
   template: `
-  <h5 class="mb-0 card-title"><a [routerLink]="[detailUrl.link]">{{ record.metadata.name }}</a></h5>
+  <h5 class="mb-0 card-title">
+    <a [routerLink]="[detailUrl.link]">{{ record.metadata.name }}</a>
+    <span class="badge badge-light ml-2 align-top">
+      <small>
+      @if (record.metadata.policy_library_level) {
+        {{ 'Library' | translate }}
+      } @else {
+        {{ 'Organisation' | translate }}
+      }
+    </small>
+    </span>
+  </h5>
   <div class="card-text">
-    <span *ngIf="record.metadata.description">
+    @if (record.metadata.description) {
       {{ record.metadata.description }}
-    </span>
+    }
   </div>
   `,
   styles: []
 })
 export class CircPoliciesBriefViewComponent implements ResultItem {
 
-  record: any;
+  @Input() record: any;
 
-  type: string;
+  @Input() type: string;
 
-  detailUrl: { link: string, external: boolean };
+  @Input() detailUrl: { link: string, external: boolean };
 }
diff --git a/projects/admin/src/app/record/brief-view/collection-brief-view.component.ts b/projects/admin/src/app/record/brief-view/collection-brief-view.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-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
@@ -27,30 +27,29 @@ import { ResultItem } from '@rero/ng-core';
     ({{ record.metadata.collection_id }})
   </h5>
   <div class="card-text">
-    <div *ngIf="record.metadata.teachers" id="collection-teacher">
-      <ng-container *ngFor="let teacher of record.metadata.teachers; let last = last">
-      {{ teacher.name }}
-      {{ last ? '' : ', ' }}
-      </ng-container>
-    </div>
-    <div
-      *ngIf="record.metadata.description"
-      id="collection-start-end-date"
-      [innerHtml]="record.metadata.description | nl2br"
-    >
-    </div>
+    @if (record.metadata.teachers) {
+      <div id="collection-teacher">
+        @for (teacher of record.metadata.teachers; track teacher; let last = $last) {
+          {{ teacher.name }} {{ last ? '' : ', ' }}
+        }
+      </div>
+    }
+    @if (record.metadata.description) {
+      <div
+        id="collection-start-end-date"
+        [innerHtml]="record.metadata.description | nl2br"
+      ></div>
+    }
     {{ record.metadata.start_date | dateTranslate: 'mediumDate' }}
     - {{ record.metadata.end_date | dateTranslate: 'mediumDate' }}
   </div>
   `
 })
 export class CollectionBriefViewComponent implements ResultItem {
 
-  @Input()
-  record: any;
+  @Input() record: any;
 
-  @Input()
-  type: string;
+  @Input() type: string;
 
   @Input()
   detailUrl: { link: string, external: boolean };

diff --git a/.../admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html b/.../admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2024 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -15,43 +15,51 @@
   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/>.
 -->
-<article *ngIf="record" class="card flex-row border-0">
-  <shared-thumbnail
-    class="col-sm-2"
-    [record]="record"
-    isSmall=true>
-  </shared-thumbnail>
-  <div class="card-body w-100 py-0">
-    <h5 class="mb-0 card-title">
-      <a [routerLink]="['/records', type.startsWith('import_') ? type: 'documents', 'detail', record.metadata.pid]">
-        {{ record.metadata.title | mainTitle }}
-      </a>
-    </h5>
-    <ng-container class="card-text">
+@if (record) {
+  <article class="card flex-row border-0">
+    <shared-thumbnail
+      class="col-sm-2"
+      [record]="record"
+      isSmall=true>
+    </shared-thumbnail>
+    <div class="card-body w-100 py-0">
+      <h5 class="mb-0 card-title">
+        <a [routerLink]="['/records', type.startsWith('import_') ? type: 'documents', 'detail', record.metadata.pid]">
+          {{ record.metadata.title | mainTitle }}
+        </a>
+      </h5>
       <!-- contribution -->
       <shared-contribution
         [contributions]="record.metadata?.contribution"
         [limitRecord]="3"
         [activateLink]="!type.startsWith('import_')"
       ></shared-contribution>
       <!-- provision activity publications -->
-      <ul class="list-unstyled" *ngIf="provisionActivityPublications.length > 0">
-        <li *ngFor="let publication of provisionActivityPublications">{{ publication.value }}</li>
-      </ul>
+      @if (provisionActivityPublications.length > 0) {
+        <ul class="list-unstyled">
+          @for (publication of provisionActivityPublications; track publication) {
+            <li>{{ publication.value }}</li>
+          }
+        </ul>
+      }
       <!-- shared part -->
       <shared-part-of [record]="record"></shared-part-of>
       <!-- edition statement -->
-      <ul class="list-unstyled mb-0" *ngIf="record.metadata.editionStatement">
-        <li *ngFor="let edition of record.metadata.editionStatement">{{ edition._text[0].value }}</li>
-      </ul>
+      @if (record.metadata.editionStatement) {
+        <ul class="list-unstyled mb-0">
+          @for (edition of record.metadata.editionStatement; track edition) {
+            <li>{{ edition._text[0].value }}</li>
+          }
+        </ul>
+      }
       <!-- availability -->
-      <ng-container *ngIf="!type.startsWith('import_') && record.metadata.type !== 'ebook'">
+      @if (!type.startsWith('import_') && record.metadata.type !== 'ebook') {
         <shared-availability
           recordType="document"
           [record]="record"
           [apiService]="documentApiService"
         ></shared-availability>
-      </ng-container>
-    </ng-container>
-  </div>
-</article>
+      }
+    </div>
+  </article>
+}
diff --git a/.../src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.html b/.../src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.html
@@ -1,7 +1,7 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020 RERO
-  Copyright (C) 2020 UCLouvain
+  Copyright (C) 2020-2024 RERO
+  Copyright (C) 2020-2023 UCLouvain
 
   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
@@ -15,23 +15,29 @@
   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="record && requester">
+@if (record && requester) {
   <span class="badge badge-{{ badgeColor }} float-right px-2 py-1" translate>{{ record.metadata.status }}</span>
   <h5 class="mb-0">
     <a [routerLink]="[detailUrl.link]">
       {{ record.metadata.document.title }}
     </a>
   </h5>
-  <div class="small" *ngIf="record.metadata.document.authors as authors">{{ authors }}</div>
+  @if (record.metadata.document.authors) {
+    <div class="small">{{ record.metadata.document.authors }}</div>
+  }
   <dl class="mt-2 row">
     <dt class="col-sm-6 col-md-3 label-title" translate>Requested by</dt>
     <dd class="col-sm-6 col-md-9 mb-0">
-      <a *ngIf="requester && requester.patron && requester.patron.barcode[0]" [routerLink]="['/circulation', 'patron', requester.patron.barcode[0]]">
-        <span id="patron-last-name">{{ requester.last_name }}</span>
-        <span id="patron-first-name" *ngIf="requester.first_name as firstName">, {{ firstName }}</span>
-      </a>
+      @if (requester && requester.patron && requester.patron.barcode[0]) {
+        <a [routerLink]="['/circulation', 'patron', requester.patron.barcode[0]]">
+          <span id="patron-last-name">{{ requester.last_name }}</span>
+          @if (requester.first_name) {
+            <span id="patron-first-name">, {{ requester.first_name }}</span>
+          }
+        </a>
+      }
     </dd>
     <dt class="col-sm-6 col-md-3 label-title" translate>Request date</dt>
     <dd class="col-sm-6 col-md-9 mb-0">{{ record.created | dateTranslate:'medium' }}</dd>
   </dl>
-</ng-container>
+}
diff --git a/...in/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.ts b/...in/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
- * Copyright (C) 2020 UCLouvain
+ * Copyright (C) 2020-2024 RERO
+ * Copyright (C) 2020-2023 UCLouvain
  *
  * 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
@@ -38,7 +38,7 @@ export class IllRequestsBriefViewComponent  implements ResultItem, OnInit {
 
 
   // GETTER FUNCTIONS ==========================================================
-  /** get the bootsrap color to apply on the request status badge */
+  /** get the bootstrap color to apply on the request status badge */
   get badgeColor(): string {
     if (this.record) {
       switch (this.record.metadata.status) {
@@ -54,14 +54,14 @@ export class IllRequestsBriefViewComponent  implements ResultItem, OnInit {
   // CONSTRUCTOR & HOOKS =======================================================
   /**
    * Constructor
-   * @param _recordService - RecordService
+   * @param recordService - RecordService
    */
-  constructor(private _recordService: RecordService) {}
+  constructor(private recordService: RecordService) {}
 
   /** Init hook */
   ngOnInit() {
     if (this.record) {
-      this._recordService.getRecord('patrons', this.record.metadata.patron.pid).subscribe(
+      this.recordService.getRecord('patrons', this.record.metadata.patron.pid).subscribe(
         (patron) => this.requester = patron.metadata
       );
     }