documents: rewrite public holdings/items view in Angular

angular.json

@@ -116,6 +116,96 @@
         }
       }
     },
+    "public-holdings-items": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/public-holdings-items",
+      "sourceRoot": "projects/public-holdings-items/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "ngx-build-plus:build",
+          "options": {
+            "outputPath": "build/dist/public-holdings-items",
+            "index": "projects/public-holdings-items/src/index.html",
+            "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": false,
+            "assets": [],
+            "styles": [],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/public-holdings-items/src/environments/environment.ts",
+                  "with": "projects/public-holdings-items/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "public-holdings-items:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "public-holdings-items:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "public-holdings-items:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/public-holdings-items/tsconfig.app.json",
+              "projects/public-holdings-items/tsconfig.spec.json",
+              "projects/public-holdings-items/e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "projects/public-holdings-items/e2e/protractor.conf.js",
+            "devServerTarget": "public-holdings-items:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "public-holdings-items:serve:production"
+            }
+          }
+        }
+      }
+    },
     "public-search": {
       "projectType": "application",
       "schematics": {},

package.json

@@ -43,10 +43,11 @@
     "ng": "ng",
     "start": "ng serve",
     "start-admin-proxy": "ng serve admin --proxy-config proxy.conf.json",
+    "start-public-holdings-items-proxy": "ng serve public-holdings-items --proxy-config proxy.conf.json",
     "start-public-search-proxy": "ng serve public-search --proxy-config proxy.conf.json",
     "start-search-bar-proxy": "ng serve search-bar --proxy-config proxy.conf.json",
     "build-shared": "ng build --configuration production shared",
-    "build": "npm run build-shared && ng build admin --configuration production && ng build public-search --configuration production && ng build search-bar --single-bundle --prod",
+    "build": "npm run build-shared && ng build admin --prod && ng build public-search --prod && ng build public-holdings-items --single-bundle --prod && ng build search-bar --single-bundle --prod",
     "pack": "npm run build && ./scripts/dist_pkg.js -o build && cd build && npm pack",
     "test": "ng test",
     "lint": "ng lint",

projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.ts

@@ -82,7 +82,6 @@ export class ChangePasswordFormComponent implements OnInit {
         this.closeModal();
       },
       (resp) => {
-        console.log('Error: Update Patron Password', resp);
         let error = this._translateService.instant('An error has occurred.');
         if (resp.error && resp.error.message) {
           error = `${error}: (${resp.error.message})`;

projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.html

@@ -69,7 +69,7 @@
             <div class="row font-weight-bold">
               <div class="col-sm-3" translate>Barcode</div>
               <div class="col-sm-2" translate>Status</div>
-              <div class="col-sm-3" translate>Label</div>
+              <div class="col-sm-3" translate>Unit</div>
               <div class="col-sm-2" translate>Call number</div>
             </div>
             <admin-serial-holding-item

projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.html

@@ -56,4 +56,11 @@
 <ng-container *ngIf="holdings">
   <admin-document-holding *ngFor="let holding of holdings" [holding]="holding" (deleteHolding)="deleteHolding($event)">
   </admin-document-holding>
+  <ng-container *ngIf="isLinkShowMore">
+    <button type="button" id="show-more-{{ document.metadata.pid }}" class="btn btn-link" (click)="showMore()">
+      <i class="fa fa-arrow-circle-o-down"></i>
+        {{ 'Show more' | translate }}
+    </button>
+    <small *ngIf="isLinkShowMore">({{ hiddenHoldings }})</small>
+  </ng-container>
 </ng-container>

projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.ts

@@ -16,9 +16,13 @@
  */
 
 import { Component, Input, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { RecordService, RecordUiService } from '@rero/ng-core';
 import { Record } from '@rero/ng-core/lib/record/record';
 import { UserService } from '@rero/shared';
+import { forkJoin } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { RecordPermissionService } from '../../../../service/record-permission.service';
 
 @Component({
   selector: 'admin-holdings',
@@ -28,54 +32,98 @@ export class HoldingsComponent implements OnInit {
   /** Document */
   @Input() document: any;
 
+  /** Holdings total */
+  holdingsTotal = 0;
+
+  /** Holdings per page */
+  private holdingsPerPage = 5;
+
+  /** Current page */
+  page = 1;
+
+  /** query */
+  query: string;
+
   /** Holdings */
-  holdings: Array<any>;
+  holdings: any[];
 
   /** Holding type related to the parent document. */
   @Input() holdingType: 'electronic' | 'serial' | 'standard';
 
   /** Can a new holding be added? */
   canAdd = false;
 
+  /**
+   * Is link show more
+   * @return boolean
+   */
+  get isLinkShowMore(): boolean {
+    return this.holdingsTotal > 0
+      && ((this.page * this.holdingsPerPage) < this.holdingsTotal);
+  }
+
+  /**
+   * Hidden holdings count
+   * @return string
+   */
+  get hiddenHoldings(): string {
+    let count = this.holdingsTotal - (this.page * this.holdingsPerPage);
+    if (count < 0) {
+      count = 0;
+    }
+    const linkText = (count > 1)
+      ? '{{ counter }} hidden holdings'
+      : '{{ counter }} hidden holding';
+    const linkTextTranslate = this._translateService.instant(linkText);
+    return linkTextTranslate.replace('{{ counter }}', count);
+  }
+
   /**
    * Constructor
    * @param _userService - UserService
    * @param _recordService - RecordService
    * @param _recordUiService - RecordUiService
+   * @param _recordPermissionService - RecordPermissionService
+   * @param _translateService - TranslateService
    */
   constructor(
     private _userService: UserService,
     private _recordService: RecordService,
-    private _recordUiService: RecordUiService
+    private _recordUiService: RecordUiService,
+    private _recordPermissionService: RecordPermissionService,
+    private _translateService: TranslateService
   ) { }
 
   /** onInit hook */
   ngOnInit() {
     this.canAdd = (!('harvested' in this.document.metadata));
     const orgPid = this._userService.user.currentOrganisation;
-    const query = `document.pid:${this.document.metadata.pid} AND organisation.pid:${orgPid}`;
-    this._recordService.getRecords(
-      'holdings',
-      query,
-      1,
-      RecordService.MAX_REST_RESULTS_SIZE,
-      undefined,
-      undefined,
-      undefined,
-      'library_location'
-    )
-    .subscribe((response: Record) => {
-      if (this._recordService.totalHits(response.hits.total) > 0) {
-        this.holdings = response.hits.hits;
-      }
+    this.query = `document.pid:${this.document.metadata.pid} AND organisation.pid:${orgPid}`;
+    const holdingsRecords = this._holdingsQuery(1, this.query);
+    const holdingsCount = this._holdingsCountQuery(this.query);
+    const permissionsRef = this._recordPermissionService.getPermission('holdings');
+    forkJoin([holdingsRecords, holdingsCount, permissionsRef])
+      .subscribe((result: [any[], number, any]) => {
+        this.holdings = result[0];
+        this.holdingsTotal = result[1];
+        const permissions = result[2];
+        this.canAdd = permissions.create.can;
+      });
+  }
+
+  /** Show more */
+  showMore() {
+    this.page++;
+    this._holdingsQuery(this.page, this.query).subscribe((holdings: any[]) => {
+      this.holdings = this.holdings.concat(holdings);
     });
   }
 
   /**
    * Delete a given holding.
    * @param data: object with 2 keys :
    *          * 'holding' : the holding to delete
-   *          * 'callBakend' : boolean if backend API should be called
+   *          * 'callBackend' : boolean if backend API should be called
    */
   deleteHolding(data: { holding: any, callBackend: boolean }) {
     const holding = data.holding;
@@ -94,4 +142,33 @@ export class HoldingsComponent implements OnInit {
         });
     }
   }
+
+  /**
+   * Holdings count query
+   * @param query - string
+   * @return Observable
+   */
+  private _holdingsCountQuery(query: string) {
+    return this._recordService.getRecords(
+      'holdings', query, 1, 1,
+      undefined, undefined, undefined, 'library_location'
+    ).pipe(
+      map((holdings: Record) => this._recordService.totalHits(holdings.hits.total))
+    );
+  }
+
+  /**
+   * Return a selected Holdings record
+   * @param page - number
+   * @param query - string
+   * @return Observable
+   */
+  private _holdingsQuery(page: number, query: string) {
+    return this._recordService.getRecords(
+      'holdings', query, page, this.holdingsPerPage,
+      undefined, undefined, undefined, 'library_location'
+    ).pipe(map((holdings: Record) => {
+      return holdings.hits.hits;
+    }));
+  }
 }

projects/admin/src/manual_translations.ts

@@ -150,3 +150,5 @@ _('{{ counter }} hidden issue');
 _('{{ counter }} hidden issues');
 _('{{ counter }} hidden item');
 _('{{ counter }} hidden items');
+_('{{ counter }} hidden holding');
+_('{{ counter }} hidden holdings');

projects/public-holdings-items/.browserslistrc

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

projects/public-holdings-items/e2e/protractor.conf.js

@@ -0,0 +1,32 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

projects/public-holdings-items/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('Welcome to search-bar!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});

projects/public-holdings-items/e2e/src/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get(browser.baseUrl) as Promise<any>;
+  }
+
+  getTitleText() {
+    return element(by.css('app-root h1')).getText() as Promise<string>;
+  }
+}