Skip to content

Commit

Permalink
documents: rewrite public holdings/items view in Angular
Browse files Browse the repository at this point in the history
* Implements the holdings section of the document detailed
view of the public interface to improve the user experience when
loading holdings with lots of items. With the JINJA templates, the
performance is very bad. Angular allows to lazy load data and will
make easier to add dynamic interaction between the user and the interface.
* Adds pagination on holdings of the professional interface.

* Closes rero/rero-ils#1401
* Closes rero/rero-ils#1563
* Closes rero/rero-ils#1577

Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
  • Loading branch information
Garfield-fr committed Jan 29, 2021
1 parent 6fef162 commit 44359be
Show file tree
Hide file tree
Showing 64 changed files with 3,292 additions and 21 deletions.
90 changes: 90 additions & 0 deletions angular.json
Expand Up @@ -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": {},
Expand Down
3 changes: 2 additions & 1 deletion package.json
Expand Up @@ -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",
Expand Down
Expand Up @@ -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})`;
Expand Down
Expand Up @@ -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
Expand Down
Expand Up @@ -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>
Expand Up @@ -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',
Expand All @@ -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;
Expand All @@ -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;
}));
}
}
2 changes: 2 additions & 0 deletions projects/admin/src/manual_translations.ts
Expand Up @@ -150,3 +150,5 @@ _('{{ counter }} hidden issue');
_('{{ counter }} hidden issues');
_('{{ counter }} hidden item');
_('{{ counter }} hidden items');
_('{{ counter }} hidden holding');
_('{{ counter }} hidden holdings');
12 changes: 12 additions & 0 deletions 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'.
32 changes: 32 additions & 0 deletions 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 } }));
}
};
23 changes: 23 additions & 0 deletions 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));
});
});
11 changes: 11 additions & 0 deletions 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>;
}
}

0 comments on commit 44359be

Please sign in to comment.