Skip to content

Commit

Permalink
documents: rewrite public holdings 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.

Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
  • Loading branch information
Garfield-fr committed Jan 19, 2021
1 parent 41f78ca commit 099ed62
Show file tree
Hide file tree
Showing 58 changed files with 3,158 additions and 2 deletions.
90 changes: 90 additions & 0 deletions angular.json
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change
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
12 changes: 12 additions & 0 deletions projects/public-holdings-items/.browserslistrc
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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>;
}
}
13 changes: 13 additions & 0 deletions projects/public-holdings-items/e2e/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"outDir": "../../../out-tsc/e2e",
"module": "commonjs",
"target": "es2018",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
37 changes: 37 additions & 0 deletions projects/public-holdings-items/karma.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../../coverage/public-holdings-items'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
customLaunchers: {
ChromeHeadlessCI: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
singleRun: false,
restartOnFileChange: true
});
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { TestBed } from '@angular/core/testing';

import { AppConfigServiceService } from './app-config-service.service';

describe('AppConfigServiceService', () => {
let service: AppConfigServiceService;

beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(AppConfigServiceService);
});

it('should be created', () => {
expect(service).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/*
* RERO ILS UI
* Copyright (C) 2019 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
* the Free Software Foundation, version 3 of the License.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* 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/>.
*/
import { Injectable } from '@angular/core';
import { CoreConfigService } from '@rero/ng-core';

import { environment } from '../environments/environment';

@Injectable({
providedIn: 'root'
})
export class AppConfigService extends CoreConfigService {

/** Global View Name */
globalViewName: string;

/** Translation urls */
translationsURLs: string[];

/**
* Constructor
*/
constructor() {
super();
this.production = environment.production;
this.apiBaseUrl = environment.apiBaseUrl;
this.$refPrefix = environment.$refPrefix;
this.languages = environment.languages;
this.globalViewName = environment.globalViewName;
this.translationsURLs = environment.translationsURLs;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/*
* RERO ILS UI
* Copyright (C) 2020 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
* the Free Software Foundation, version 3 of the License.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* 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/>.
*/

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { SharedConfigService, SharedModule } from '@rero/shared';
import { AppInitializerService } from './app-initializer.service';


describe('AppInitializerService', () => {

let appInitializerService: AppInitializerService;

beforeEach(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule,
TranslateModule.forRoot(),
SharedModule
],
providers: [
TranslateService,
SharedConfigService
]
});
appInitializerService = TestBed.inject(AppInitializerService);
});

it('should be created', () => {
expect(appInitializerService).toBeTruthy();
});
});
Loading

0 comments on commit 099ed62

Please sign in to comment.