diff --git a/README.md b/README.md index a9f2b0861b..27e61afe76 100644 --- a/README.md +++ b/README.md @@ -3,13 +3,12 @@ dspace-angular ============== -> The next UI for DSpace, based on Angular Universal. +> The next UI for DSpace 7, based on Angular Universal. -This project is currently in pre-alpha. +This project is currently under active development. For more information on the DSpace 7 release see the [DSpace 7.0 Release Status wiki page](https://wiki.lyrasis.org/display/DSPACE/DSpace+Release+7.0+Status) -You can find additional information on the [wiki](https://wiki.duraspace.org/display/DSPACE/DSpace+7+-+Angular+UI) or [the project board (waffle.io)](https://waffle.io/DSpace/dspace-angular). +You can find additional information on the DSpace 7 Angular UI on the [wiki](https://wiki.lyrasis.org/display/DSPACE/DSpace+7+-+Angular+UI+Development). -If you're looking for the 2016 Angular 2 DSpace UI prototype, you can find it [here](https://github.com/DSpace-Labs/angular2-ui-prototype) Quick start ----------- @@ -32,8 +31,6 @@ yarn start Then go to [http://localhost:3000](http://localhost:3000) in your browser -NOTE: currently there's not much to see at that URL. We really do need your help. If you're interested in jumping in, and you've made it this far, please look at the [the project board (waffle.io)](https://waffle.io/DSpace/dspace-angular), grab a card, and get to work. Thanks! - Not sure where to start? watch the training videos linked in the [Introduction to the technology](#introduction-to-the-technology) section below. Table of Contents @@ -42,24 +39,27 @@ Table of Contents - [Introduction to the technology](#introduction-to-the-technology) - [Requirements](#requirements) - [Installing](#installing) -- [Configuring](#configuring) + - [Configuring](#configuring) - [Running the app](#running-the-app) -- [Running in production mode](#running-in-production-mode) + - [Running in production mode](#running-in-production-mode) + - [Deploy](#deploy) + - [Running the application with Docker](#running-the-application-with-docker) - [Cleaning](#cleaning) - [Testing](#testing) + - [Test a Pull Request](#test-a-pull-request) - [Documentation](#documentation) - [Other commands](#other-commands) - [Recommended Editors/IDEs](#recommended-editorsides) - [Collaborating](#collaborating) - [File Structure](#file-structure) -- [3rd Party Library Installation](#3rd-party-library-installation) +- [Managing Dependencies (via yarn)](#managing-dependencies-via-yarn) - [Frequently asked questions](#frequently-asked-questions) - [License](#license) Introduction to the technology ------------------------------ -You can find more information on the technologies used in this project (Angular 2, Typescript, Angular Universal, RxJS, etc) on the [DuraSpace wiki](https://wiki.duraspace.org/display/DSPACE/DSpace+7+UI+Technology+Stack) +You can find more information on the technologies used in this project (Angular.io, Typescript, Angular Universal, RxJS, etc) on the [LYRASIS wiki](https://wiki.lyrasis.org/display/DSPACE/DSpace+7+UI+Technology+Stack) Requirements ------------ @@ -75,8 +75,7 @@ Installing - `yarn run global` to install the required global dependencies - `yarn install` to install the local dependencies -Configuring ------------ +### Configuring Default configuration file is located in `config/` folder. @@ -98,8 +97,7 @@ Running the app After you have installed all dependencies you can now run the app. Run `yarn run watch` to start a local server which will watch for changes, rebuild the code, and reload the server for you. You can visit it at `http://localhost:3000`. -Running in production mode --------------------------- +### Running in production mode When building for production we're using Ahead of Time (AoT) compilation. With AoT, the browser downloads a pre-compiled version of the application, so it can render the application immediately, without waiting to compile the app first. The compiler is roughly half the size of Angular itself, so omitting it dramatically reduces the application payload. @@ -117,6 +115,19 @@ yarn run build:prod This will build the application and put the result in the `dist` folder +### Deploy +```bash +# deploy production in standalone pm2 container +yarn run deploy + +# remove production from standalone pm2 container +yarn run undeploy +``` + +### Running the application with Docker +See [Docker Runtime Options](docker/README.md) + + Cleaning -------- @@ -131,10 +142,6 @@ yarn run clean:prod yarn run clean:dist ``` -Running the application with Docker ------------------------------------ -See [Docker Runtime Options](docker/README.md) - Testing ------- @@ -189,21 +196,14 @@ To run all the tests (e.g.: to run tests with Continuous Integration software) y Documentation -------------- +See [`./docs`](docs) for further documentation. + +### Building code documentation + To build the code documentation we use [TYPEDOC](http://typedoc.org). TYPEDOC is a documentation generator for TypeScript projects. It extracts informations from properly formatted comments that can be written within the code files. Follow the instructions [here](http://typedoc.org/guides/doccomments/) to know how to make those comments. Run:`yarn run docs` to produce the documentation that will be available in the 'doc' folder. -Deploy ------- - -```bash -# deploy production in standalone pm2 container -yarn run deploy - -# remove production from standalone pm2 container -yarn run undeploy -``` - Other commands -------------- @@ -229,7 +229,7 @@ To get the most out of TypeScript, you'll need a TypeScript-aware editor. We've Collaborating ------------- -See [the guide on the wiki](https://wiki.duraspace.org/display/DSPACE/DSpace+7+-+Angular+2+UI#DSpace7-Angular2UI-Howtocontribute) +See [the guide on the wiki](https://wiki.lyrasis.org/display/DSPACE/DSpace+7+-+Angular+UI+Development#DSpace7-AngularUIDevelopment-Howtocontribute) File Structure -------------- @@ -335,10 +335,20 @@ dspace-angular └── yarn.lock * Yarn lockfile (https://yarnpkg.com/en/docs/yarn-lock) ``` -3rd Party Library Installation ------------------------------- +Managing Dependencies (via yarn) +------------- -Install your library via `yarn add lib-name --save` and import it in your code. `--save` will add it to `package.json`. +This project makes use of [`yarn`](https://yarnpkg.com/en/) to ensure that the exact same dependency versions are used every time you install it. + +* `yarn` creates a [`yarn.lock`](https://yarnpkg.com/en/docs/yarn-lock) to track those versions. That file is updated automatically by whenever dependencies are added/updated/removed via yarn. +* **Adding new dependencies**: To install/add a new dependency (third party library), use [`yarn add`](https://yarnpkg.com/en/docs/cli/add). For example: `yarn add some-lib`. + * If you are adding a new build tool dependency (to `devDependencies`), use `yarn add some-lib --dev` +* **Upgrading existing dependencies**: To upgrade existing dependencies, you can use [`yarn upgrade`](https://yarnpkg.com/en/docs/cli/upgrade). For example: `yarn upgrade some-lib` or `yarn upgrade some-lib@version` +* **Removing dependencies**: If a dependency is no longer needed, or replaced, use [`yarn remove`](https://yarnpkg.com/en/docs/cli/remove) to remove it. + +As you can see above, using `yarn` commandline tools means that you should never need to modify the `package.json` manually. *We recommend always using `yarn` to keep dependencies updated / in sync.* + +### Adding Typings for libraries If the library does not include typings, you can install them using yarn: @@ -370,24 +380,6 @@ If you're importing a module that uses CommonJS you need to import as import * as _ from 'lodash'; ``` -Managing Dependencies (via yarn) -------------- - -This project makes use of [`yarn`](https://yarnpkg.com/en/) to ensure that the exact same dependency versions are used every time you install it. - -* `yarn` creates a [`yarn.lock`](https://yarnpkg.com/en/docs/yarn-lock) to track those versions. That file is updated automatically by whenever dependencies are added/updated/removed via yarn. -* **Adding new dependencies**: To install/add a new dependency (third party library), use [`yarn add`](https://yarnpkg.com/en/docs/cli/add). For example: `yarn add some-lib`. - * If you are adding a new build tool dependency (to `devDependencies`), use `yarn add some-lib --dev` -* **Upgrading existing dependencies**: To upgrade existing dependencies, you can use [`yarn upgrade`](https://yarnpkg.com/en/docs/cli/upgrade). For example: `yarn upgrade some-lib` or `yarn upgrade some-lib@version` -* **Removing dependencies**: If a dependency is no longer needed, or replaced, use [`yarn remove`](https://yarnpkg.com/en/docs/cli/remove) to remove it. - -As you can see above, using `yarn` commandline tools means that you should never need to modify the `package.json` manually. *We recommend always using `yarn` to keep dependencies updated / in sync.* - -Further Documentation ---------------------- - -See [`./docs`](docs) for further documentation. - Frequently asked questions -------------------------- @@ -411,5 +403,4 @@ Frequently asked questions License ------- - -http://www.dspace.org/license +This project's source code is made available under the DSpace BSD License: http://www.dspace.org/license diff --git a/e2e/app.po.ts b/e2e/app.po.ts index 54b5b55af3..c76bef118f 100644 --- a/e2e/app.po.ts +++ b/e2e/app.po.ts @@ -2,7 +2,8 @@ import { browser, element, by } from 'protractor'; export class ProtractorPage { navigateTo() { - return browser.get('/'); + return browser.get('/') + .then(() => browser.waitForAngular()); } getPageTitleText() { diff --git a/package.json b/package.json index 80df678e38..392d8f52f4 100644 --- a/package.json +++ b/package.json @@ -229,7 +229,7 @@ "rollup-plugin-node-globals": "1.2.1", "rollup-plugin-node-resolve": "^3.0.3", "rollup-plugin-terser": "^2.0.2", - "sass-loader": "7.1.0", + "sass-loader": "^7.1.0", "script-ext-html-webpack-plugin": "2.0.1", "source-map": "0.7.3", "source-map-loader": "0.2.4", diff --git a/resources/fonts/README.md b/resources/fonts/README.md new file mode 100644 index 0000000000..e4817b8572 --- /dev/null +++ b/resources/fonts/README.md @@ -0,0 +1,3 @@ +# Supported font formats + +DSpace supports EOT, TTF, OTF, SVG, WOFF and WOFF2 fonts. diff --git a/src/app/+collection-page/collection-page.component.html b/src/app/+collection-page/collection-page.component.html index 436cd351a0..12d5c200fd 100644 --- a/src/app/+collection-page/collection-page.component.html +++ b/src/app/+collection-page/collection-page.component.html @@ -3,6 +3,7 @@ *ngVar="(collectionRD$ | async) as collectionRD">
+
+
diff --git a/src/app/+community-page/community-page.module.ts b/src/app/+community-page/community-page.module.ts index 6d63cadcc8..8b02471fc2 100644 --- a/src/app/+community-page/community-page.module.ts +++ b/src/app/+community-page/community-page.module.ts @@ -6,17 +6,19 @@ import { SharedModule } from '../shared/shared.module'; import { CommunityPageComponent } from './community-page.component'; import { CommunityPageSubCollectionListComponent } from './sub-collection-list/community-page-sub-collection-list.component'; import { CommunityPageRoutingModule } from './community-page-routing.module'; -import {CommunityPageSubCommunityListComponent} from './sub-community-list/community-page-sub-community-list.component'; +import { CommunityPageSubCommunityListComponent } from './sub-community-list/community-page-sub-community-list.component'; import { CreateCommunityPageComponent } from './create-community-page/create-community-page.component'; import { CommunityFormComponent } from './community-form/community-form.component'; import { EditCommunityPageComponent } from './edit-community-page/edit-community-page.component'; import { DeleteCommunityPageComponent } from './delete-community-page/delete-community-page.component'; +import { StatisticsModule } from '../statistics/statistics.module'; @NgModule({ imports: [ CommonModule, SharedModule, - CommunityPageRoutingModule + CommunityPageRoutingModule, + StatisticsModule.forRoot() ], declarations: [ CommunityPageComponent, diff --git a/src/app/+home-page/home-page-routing.module.ts b/src/app/+home-page/home-page-routing.module.ts index d7dcc18f49..78da529906 100644 --- a/src/app/+home-page/home-page-routing.module.ts +++ b/src/app/+home-page/home-page-routing.module.ts @@ -2,12 +2,25 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { HomePageComponent } from './home-page.component'; +import { HomePageResolver } from './home-page.resolver'; @NgModule({ imports: [ RouterModule.forChild([ - { path: '', component: HomePageComponent, pathMatch: 'full', data: { title: 'home.title' } } + { + path: '', + component: HomePageComponent, + pathMatch: 'full', + data: {title: 'home.title'}, + resolve: { + site: HomePageResolver + } + } ]) + ], + providers: [ + HomePageResolver ] }) -export class HomePageRoutingModule { } +export class HomePageRoutingModule { +} diff --git a/src/app/+home-page/home-page.component.html b/src/app/+home-page/home-page.component.html index 39ba479033..5515df595b 100644 --- a/src/app/+home-page/home-page.component.html +++ b/src/app/+home-page/home-page.component.html @@ -1,5 +1,8 @@
+ + +
diff --git a/src/app/+home-page/home-page.component.ts b/src/app/+home-page/home-page.component.ts index 902a0e820d..1b915ae683 100644 --- a/src/app/+home-page/home-page.component.ts +++ b/src/app/+home-page/home-page.component.ts @@ -1,9 +1,26 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { map } from 'rxjs/operators'; +import { ActivatedRoute } from '@angular/router'; +import { Observable } from 'rxjs'; +import { Site } from '../core/shared/site.model'; @Component({ selector: 'ds-home-page', styleUrls: ['./home-page.component.scss'], templateUrl: './home-page.component.html' }) -export class HomePageComponent { +export class HomePageComponent implements OnInit { + + site$:Observable; + + constructor( + private route:ActivatedRoute, + ) { + } + + ngOnInit():void { + this.site$ = this.route.data.pipe( + map((data) => data.site as Site), + ); + } } diff --git a/src/app/+home-page/home-page.module.ts b/src/app/+home-page/home-page.module.ts index c0c082b36c..51e978bbfe 100644 --- a/src/app/+home-page/home-page.module.ts +++ b/src/app/+home-page/home-page.module.ts @@ -6,12 +6,14 @@ import { HomePageRoutingModule } from './home-page-routing.module'; import { HomePageComponent } from './home-page.component'; import { TopLevelCommunityListComponent } from './top-level-community-list/top-level-community-list.component'; +import { StatisticsModule } from '../statistics/statistics.module'; @NgModule({ imports: [ CommonModule, SharedModule, - HomePageRoutingModule + HomePageRoutingModule, + StatisticsModule.forRoot() ], declarations: [ HomePageComponent, diff --git a/src/app/+home-page/home-page.resolver.ts b/src/app/+home-page/home-page.resolver.ts new file mode 100644 index 0000000000..1145d1d013 --- /dev/null +++ b/src/app/+home-page/home-page.resolver.ts @@ -0,0 +1,25 @@ +import { Injectable } from '@angular/core'; +import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router'; +import { SiteDataService } from '../core/data/site-data.service'; +import { Site } from '../core/shared/site.model'; +import { Observable } from 'rxjs'; +import { take } from 'rxjs/operators'; + +/** + * The class that resolve the Site object for a route + */ +@Injectable() +export class HomePageResolver implements Resolve { + constructor(private siteService:SiteDataService) { + } + + /** + * Method for resolving a site object + * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot + * @param {RouterStateSnapshot} state The current RouterStateSnapshot + * @returns Observable Emits the found Site object, or an error if something went wrong + */ + resolve(route:ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable | Promise | Site { + return this.siteService.find().pipe(take(1)); + } +} diff --git a/src/app/+item-page/full/full-item-page.component.html b/src/app/+item-page/full/full-item-page.component.html index 7aec57da0c..c453df6bff 100644 --- a/src/app/+item-page/full/full-item-page.component.html +++ b/src/app/+item-page/full/full-item-page.component.html @@ -1,6 +1,7 @@
+
diff --git a/src/app/+item-page/item-page.module.ts b/src/app/+item-page/item-page.module.ts index 2a5d0b6da7..28460f567a 100644 --- a/src/app/+item-page/item-page.module.ts +++ b/src/app/+item-page/item-page.module.ts @@ -26,6 +26,7 @@ import { MetadataRepresentationListComponent } from './simple/metadata-represent import { RelatedEntitiesSearchComponent } from './simple/related-entities/related-entities-search/related-entities-search.component'; import { MetadataValuesComponent } from './field-components/metadata-values/metadata-values.component'; import { MetadataFieldWrapperComponent } from './field-components/metadata-field-wrapper/metadata-field-wrapper.component'; +import { StatisticsModule } from '../statistics/statistics.module'; @NgModule({ imports: [ @@ -33,7 +34,8 @@ import { MetadataFieldWrapperComponent } from './field-components/metadata-field SharedModule, ItemPageRoutingModule, EditItemPageModule, - SearchPageModule + SearchPageModule, + StatisticsModule.forRoot() ], declarations: [ ItemPageComponent, diff --git a/src/app/+item-page/simple/item-page.component.html b/src/app/+item-page/simple/item-page.component.html index 501e3e161e..b4b32fb05c 100644 --- a/src/app/+item-page/simple/item-page.component.html +++ b/src/app/+item-page/simple/item-page.component.html @@ -1,6 +1,7 @@
+
diff --git a/src/app/+my-dspace-page/my-dspace-page.component.scss b/src/app/+my-dspace-page/my-dspace-page.component.scss index 86c589bf66..98c426c269 100644 --- a/src/app/+my-dspace-page/my-dspace-page.component.scss +++ b/src/app/+my-dspace-page/my-dspace-page.component.scss @@ -1 +1 @@ -@import '../+search-page/search-page.component.scss'; +@import '../+search-page/search.component.scss'; diff --git a/src/app/+my-dspace-page/my-dspace-page.component.spec.ts b/src/app/+my-dspace-page/my-dspace-page.component.spec.ts index 653f4a4844..b9f7fc881a 100644 --- a/src/app/+my-dspace-page/my-dspace-page.component.spec.ts +++ b/src/app/+my-dspace-page/my-dspace-page.component.spec.ts @@ -22,7 +22,7 @@ import { SearchConfigurationServiceStub } from '../shared/testing/search-configu import { SearchService } from '../+search-page/search-service/search.service'; import { SearchConfigurationService } from '../+search-page/search-service/search-configuration.service'; import { PaginatedSearchOptions } from '../+search-page/paginated-search-options.model'; -import { SearchSidebarService } from '../+search-page/search-sidebar/search-sidebar.service'; +import { SidebarService } from '../shared/sidebar/sidebar.service'; import { SearchFilterService } from '../+search-page/search-filters/search-filter/search-filter.service'; import { RoleDirective } from '../shared/roles/role.directive'; import { RoleService } from '../core/roles/role.service'; @@ -109,7 +109,7 @@ describe('MyDSpacePageComponent', () => { }) }, { - provide: SearchSidebarService, + provide: SidebarService, useValue: sidebarService }, { diff --git a/src/app/+my-dspace-page/my-dspace-page.component.ts b/src/app/+my-dspace-page/my-dspace-page.component.ts index ced237f682..057155418c 100644 --- a/src/app/+my-dspace-page/my-dspace-page.component.ts +++ b/src/app/+my-dspace-page/my-dspace-page.component.ts @@ -17,7 +17,7 @@ import { pushInOut } from '../shared/animations/push'; import { HostWindowService } from '../shared/host-window.service'; import { PaginatedSearchOptions } from '../+search-page/paginated-search-options.model'; import { SearchService } from '../+search-page/search-service/search.service'; -import { SearchSidebarService } from '../+search-page/search-sidebar/search-sidebar.service'; +import { SidebarService } from '../shared/sidebar/sidebar.service'; import { hasValue } from '../shared/empty.util'; import { getSucceededRemoteData } from '../core/shared/operators'; import { MyDSpaceResponseParsingService } from '../core/data/mydspace-response-parsing.service'; @@ -102,7 +102,7 @@ export class MyDSpacePageComponent implements OnInit { context$: Observable; constructor(private service: SearchService, - private sidebarService: SearchSidebarService, + private sidebarService: SidebarService, private windowService: HostWindowService, @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: MyDSpaceConfigurationService) { this.isXsOrSm$ = this.windowService.isXsOrSm(); diff --git a/src/app/+search-page/configuration-search-page.component.spec.ts b/src/app/+search-page/configuration-search-page.component.spec.ts index a18dd38f78..1d0ed9c09c 100644 --- a/src/app/+search-page/configuration-search-page.component.spec.ts +++ b/src/app/+search-page/configuration-search-page.component.spec.ts @@ -1,5 +1,5 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { configureSearchComponentTestingModule } from './search-page.component.spec'; +import { configureSearchComponentTestingModule } from './search.component.spec'; import { SearchConfigurationService } from './search-service/search-configuration.service'; import { ConfigurationSearchPageComponent } from './configuration-search-page.component'; diff --git a/src/app/+search-page/configuration-search-page.component.ts b/src/app/+search-page/configuration-search-page.component.ts index b1a94fc086..1296f3a203 100644 --- a/src/app/+search-page/configuration-search-page.component.ts +++ b/src/app/+search-page/configuration-search-page.component.ts @@ -1,7 +1,7 @@ import { HostWindowService } from '../shared/host-window.service'; import { SearchService } from './search-service/search.service'; -import { SearchSidebarService } from './search-sidebar/search-sidebar.service'; -import { SearchPageComponent } from './search-page.component'; +import { SidebarService } from '../shared/sidebar/sidebar.service'; +import { SearchComponent } from './search.component'; import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core'; import { pushInOut } from '../shared/animations/push'; import { SearchConfigurationService } from './search-service/search-configuration.service'; @@ -16,8 +16,8 @@ import { RouteService } from '../core/services/route.service'; */ @Component({ selector: 'ds-configuration-search-page', - styleUrls: ['./search-page.component.scss'], - templateUrl: './search-page.component.html', + styleUrls: ['./search.component.scss'], + templateUrl: './search.component.html', changeDetection: ChangeDetectionStrategy.OnPush, animations: [pushInOut], providers: [ @@ -28,7 +28,7 @@ import { RouteService } from '../core/services/route.service'; ] }) -export class ConfigurationSearchPageComponent extends SearchPageComponent implements OnInit { +export class ConfigurationSearchPageComponent extends SearchComponent implements OnInit { /** * The configuration to use for the search options * If empty, the configuration will be determined by the route parameter called 'configuration' @@ -36,7 +36,7 @@ export class ConfigurationSearchPageComponent extends SearchPageComponent implem @Input() configuration: string; constructor(protected service: SearchService, - protected sidebarService: SearchSidebarService, + protected sidebarService: SidebarService, protected windowService: HostWindowService, @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService, protected routeService: RouteService) { diff --git a/src/app/+search-page/filtered-search-page.component.spec.ts b/src/app/+search-page/filtered-search-page.component.spec.ts index 59ab9d7b0d..cf1668d8bc 100644 --- a/src/app/+search-page/filtered-search-page.component.spec.ts +++ b/src/app/+search-page/filtered-search-page.component.spec.ts @@ -1,6 +1,6 @@ import { FilteredSearchPageComponent } from './filtered-search-page.component'; import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { configureSearchComponentTestingModule } from './search-page.component.spec'; +import { configureSearchComponentTestingModule } from './search.component.spec'; import { SearchConfigurationService } from './search-service/search-configuration.service'; describe('FilteredSearchPageComponent', () => { diff --git a/src/app/+search-page/filtered-search-page.component.ts b/src/app/+search-page/filtered-search-page.component.ts index 0bcc9e14e3..19e5c09f71 100644 --- a/src/app/+search-page/filtered-search-page.component.ts +++ b/src/app/+search-page/filtered-search-page.component.ts @@ -1,7 +1,7 @@ import { HostWindowService } from '../shared/host-window.service'; import { SearchService } from './search-service/search.service'; -import { SearchSidebarService } from './search-sidebar/search-sidebar.service'; -import { SearchPageComponent } from './search-page.component'; +import { SidebarService } from '../shared/sidebar/sidebar.service'; +import { SearchComponent } from './search.component'; import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core'; import { pushInOut } from '../shared/animations/push'; import { SearchConfigurationService } from './search-service/search-configuration.service'; @@ -18,8 +18,8 @@ import { RouteService } from '../core/services/route.service'; */ @Component({ selector: 'ds-filtered-search-page', - styleUrls: ['./search-page.component.scss'], - templateUrl: './search-page.component.html', + styleUrls: ['./search.component.scss'], + templateUrl: './search.component.html', changeDetection: ChangeDetectionStrategy.OnPush, animations: [pushInOut], providers: [ @@ -30,7 +30,7 @@ import { RouteService } from '../core/services/route.service'; ] }) -export class FilteredSearchPageComponent extends SearchPageComponent implements OnInit { +export class FilteredSearchPageComponent extends SearchComponent implements OnInit { /** * The actual query for the fixed filter. * If empty, the query will be determined by the route parameter called 'filter' @@ -38,7 +38,7 @@ export class FilteredSearchPageComponent extends SearchPageComponent implements @Input() fixedFilterQuery: string; constructor(protected service: SearchService, - protected sidebarService: SearchSidebarService, + protected sidebarService: SidebarService, protected windowService: HostWindowService, @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService, protected routeService: RouteService) { diff --git a/src/app/+search-page/search-filters/search-filter/search-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-filter.component.html index a1758d7339..a03a0de451 100644 --- a/src/app/+search-page/search-filters/search-filter/search-filter.component.html +++ b/src/app/+search-page/search-filters/search-filter/search-filter.component.html @@ -1,7 +1,18 @@
-
{{'search.filters.filter.' + filter.name + '.head'| translate}}
-
- -
+
+
+ {{'search.filters.filter.' + filter.name + '.head'| translate}} +
+ + +
+
+ + +
diff --git a/src/app/+search-page/search-filters/search-filter/search-filter.service.spec.ts b/src/app/+search-page/search-filters/search-filter/search-filter.service.spec.ts index aefa5c145f..0ba1f88cc3 100644 --- a/src/app/+search-page/search-filters/search-filter/search-filter.service.spec.ts +++ b/src/app/+search-page/search-filters/search-filter/search-filter.service.spec.ts @@ -138,7 +138,7 @@ describe('SearchFilterService', () => { service.expand(mockFilterConfig.name); }); - it('SearchSidebarExpandAction should be dispatched to the store', () => { + it('SidebarExpandAction should be dispatched to the store', () => { expect(store.dispatch).toHaveBeenCalledWith(new SearchFilterExpandAction(mockFilterConfig.name)); }); }); diff --git a/src/app/+search-page/search-page-routing.module.ts b/src/app/+search-page/search-page-routing.module.ts index d2c3b3be39..083a1b4410 100644 --- a/src/app/+search-page/search-page-routing.module.ts +++ b/src/app/+search-page/search-page-routing.module.ts @@ -1,9 +1,10 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; -import { SearchPageComponent } from './search-page.component'; +import { SearchComponent } from './search.component'; import { ConfigurationSearchPageGuard } from './configuration-search-page.guard'; import { ConfigurationSearchPageComponent } from './configuration-search-page.component'; +import { SearchPageComponent } from './search-page.component'; @NgModule({ imports: [ diff --git a/src/app/+search-page/search-page.component.html b/src/app/+search-page/search-page.component.html index 85ad8286bf..5143d22809 100644 --- a/src/app/+search-page/search-page.component.html +++ b/src/app/+search-page/search-page.component.html @@ -1,43 +1,2 @@ -
-
- -
- - - -
-
- - -
-
- - -
- -
-
-
-
-
-
+ + diff --git a/src/app/+search-page/search-page.component.scss b/src/app/+search-page/search-page.component.scss deleted file mode 100644 index 05abf74f05..0000000000 --- a/src/app/+search-page/search-page.component.scss +++ /dev/null @@ -1,52 +0,0 @@ - -@include media-breakpoint-down(md) { - .container { - width: 100%; - max-width: none; - } -} - -/deep/ .search-controls { - margin-bottom: $spacer; -} - -#search-body { - &.row-offcanvas { - width: 100%; - } - @include media-breakpoint-down(sm) { - position: relative; - - &.row-offcanvas { - position: relative; - } - - &.row-offcanvas-right #search-sidebar-sm { - right: -100%; - } - - &.row-offcanvas-left #search-sidebar-sm { - left: -100%; - } - - #search-sidebar-sm { - position: absolute; - top: 0; - width: 100%; - } - } -} - -@include media-breakpoint-up(md) { - .sidebar-md-sticky { - position: sticky; - position: -webkit-sticky; - top: 0; - z-index: $zindex-sticky; - padding-top: $content-spacing; - margin-top: -$content-spacing; - align-self: flex-start; - display: block; - } -} - diff --git a/src/app/+search-page/search-page.component.ts b/src/app/+search-page/search-page.component.ts index 0558065142..393af37c27 100644 --- a/src/app/+search-page/search-page.component.ts +++ b/src/app/+search-page/search-page.component.ts @@ -1,184 +1,12 @@ -import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core'; -import { BehaviorSubject, Observable, of as observableOf, Subscription } from 'rxjs'; -import { startWith, switchMap, } from 'rxjs/operators'; -import { PaginatedList } from '../core/data/paginated-list'; -import { RemoteData } from '../core/data/remote-data'; -import { DSpaceObject } from '../core/shared/dspace-object.model'; -import { pushInOut } from '../shared/animations/push'; -import { HostWindowService } from '../shared/host-window.service'; -import { PaginatedSearchOptions } from './paginated-search-options.model'; -import { SearchResult } from './search-result.model'; -import { SearchService } from './search-service/search.service'; -import { SearchSidebarService } from './search-sidebar/search-sidebar.service'; -import { hasValue, isNotEmpty } from '../shared/empty.util'; -import { SearchConfigurationService } from './search-service/search-configuration.service'; -import { getSucceededRemoteData } from '../core/shared/operators'; -import { RouteService } from '../core/services/route.service'; -import { SEARCH_CONFIG_SERVICE } from '../+my-dspace-page/my-dspace-page.component'; - -export const SEARCH_ROUTE = '/search'; - -/** - * This component renders a simple item page. - * The route parameter 'id' is used to request the item it represents. - * All fields of the item that should be displayed, are defined in its template. - */ +import { Component } from '@angular/core'; @Component({ selector: 'ds-search-page', - styleUrls: ['./search-page.component.scss'], templateUrl: './search-page.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, - animations: [pushInOut], - providers: [ - { - provide: SEARCH_CONFIG_SERVICE, - useClass: SearchConfigurationService - } - ] }) - /** * This component represents the whole search page * It renders search results depending on the current search options */ -export class SearchPageComponent implements OnInit { - /** - * The current search results - */ - resultsRD$: BehaviorSubject>>> = new BehaviorSubject(null); - - /** - * The current paginated search options - */ - searchOptions$: Observable; - - /** - * The current relevant scopes - */ - scopeListRD$: Observable; - - /** - * Emits true if were on a small screen - */ - isXsOrSm$: Observable; - - /** - * Subscription to unsubscribe from - */ - sub: Subscription; - - /** - * True when the search component should show results on the current page - */ - @Input() inPlaceSearch = true; - - /** - * Whether or not the search bar should be visible - */ - @Input() - searchEnabled = true; - - /** - * The width of the sidebar (bootstrap columns) - */ - @Input() - sideBarWidth = 3; - - /** - * The currently applied configuration (determines title of search) - */ - @Input() - configuration$: Observable; - - /** - * Link to the search page - */ - searchLink: string; - - /** - * Observable for whether or not the sidebar is currently collapsed - */ - isSidebarCollapsed$: Observable; - - constructor(protected service: SearchService, - protected sidebarService: SearchSidebarService, - protected windowService: HostWindowService, - @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService, - protected routeService: RouteService) { - this.isXsOrSm$ = this.windowService.isXsOrSm(); - } - - /** - * Listening to changes in the paginated search options - * If something changes, update the search results - * - * Listen to changes in the scope - * If something changes, update the list of scopes for the dropdown - */ - ngOnInit(): void { - this.isSidebarCollapsed$ = this.isSidebarCollapsed(); - this.searchLink = this.getSearchLink(); - this.searchOptions$ = this.getSearchOptions(); - this.sub = this.searchOptions$.pipe( - switchMap((options) => this.service.search(options).pipe(getSucceededRemoteData(), startWith(undefined)))) - .subscribe((results) => { - this.resultsRD$.next(results); - }); - this.scopeListRD$ = this.searchConfigService.getCurrentScope('').pipe( - switchMap((scopeId) => this.service.getScopes(scopeId)) - ); - if (!isNotEmpty(this.configuration$)) { - this.configuration$ = this.routeService.getRouteParameterValue('configuration'); - } - } - - /** - * Get the current paginated search options - * @returns {Observable} - */ - protected getSearchOptions(): Observable { - return this.searchConfigService.paginatedSearchOptions; - } - - /** - * Set the sidebar to a collapsed state - */ - public closeSidebar(): void { - this.sidebarService.collapse() - } - - /** - * Set the sidebar to an expanded state - */ - public openSidebar(): void { - this.sidebarService.expand(); - } - - /** - * Check if the sidebar is collapsed - * @returns {Observable} emits true if the sidebar is currently collapsed, false if it is expanded - */ - private isSidebarCollapsed(): Observable { - return this.sidebarService.isCollapsed; - } - - /** - * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true - */ - private getSearchLink(): string { - if (this.inPlaceSearch) { - return './'; - } - return this.service.getSearchLink(); - } - - /** - * Unsubscribe from the subscription - */ - ngOnDestroy(): void { - if (hasValue(this.sub)) { - this.sub.unsubscribe(); - } - } +export class SearchPageComponent { } diff --git a/src/app/+search-page/search-page.module.ts b/src/app/+search-page/search-page.module.ts index f4c665d06e..8ee81e549b 100644 --- a/src/app/+search-page/search-page.module.ts +++ b/src/app/+search-page/search-page.module.ts @@ -3,13 +3,13 @@ import { CommonModule } from '@angular/common'; import { CoreModule } from '../core/core.module'; import { SharedModule } from '../shared/shared.module'; import { SearchPageRoutingModule } from './search-page-routing.module'; -import { SearchPageComponent } from './search-page.component'; +import { SearchComponent } from './search.component'; import { SearchResultsComponent } from './search-results/search-results.component'; import { CommunitySearchResultGridElementComponent } from '../shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component' import { CollectionSearchResultGridElementComponent } from '../shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component'; import { SearchSidebarComponent } from './search-sidebar/search-sidebar.component'; -import { SearchSidebarService } from './search-sidebar/search-sidebar.service'; -import { SearchSidebarEffects } from './search-sidebar/search-sidebar.effects'; +import { SidebarService } from '../shared/sidebar/sidebar.service'; +import { SidebarEffects } from '../shared/sidebar/sidebar-effects.service'; import { SearchSettingsComponent } from './search-settings/search-settings.component'; import { EffectsModule } from '@ngrx/effects'; import { SearchFiltersComponent } from './search-filters/search-filters.component'; @@ -33,13 +33,18 @@ import { SearchLabelComponent } from './search-labels/search-label/search-label. import { ConfigurationSearchPageComponent } from './configuration-search-page.component'; import { ConfigurationSearchPageGuard } from './configuration-search-page.guard'; import { FilteredSearchPageComponent } from './filtered-search-page.component'; +import { SearchPageComponent } from './search-page.component'; +import { SidebarFilterService } from '../shared/sidebar/filter/sidebar-filter.service'; +import { StatisticsModule } from '../statistics/statistics.module'; +import { SearchTrackerComponent } from './search-tracker.component'; const effects = [ - SearchSidebarEffects + SidebarEffects ]; const components = [ SearchPageComponent, + SearchComponent, SearchResultsComponent, SearchSidebarComponent, SearchSettingsComponent, @@ -60,7 +65,8 @@ const components = [ SearchSwitchConfigurationComponent, SearchAuthorityFilterComponent, FilteredSearchPageComponent, - ConfigurationSearchPageComponent + ConfigurationSearchPageComponent, + SearchTrackerComponent, ]; @NgModule({ @@ -69,11 +75,13 @@ const components = [ CommonModule, SharedModule, EffectsModule.forFeature(effects), - CoreModule.forRoot() + CoreModule.forRoot(), + StatisticsModule.forRoot(), ], declarations: components, providers: [ - SearchSidebarService, + SidebarService, + SidebarFilterService, SearchFilterService, SearchFixedFilterService, ConfigurationSearchPageGuard, diff --git a/src/app/+search-page/search-service/search-configuration.service.ts b/src/app/+search-page/search-service/search-configuration.service.ts index 5a2343b058..4aed678645 100644 --- a/src/app/+search-page/search-service/search-configuration.service.ts +++ b/src/app/+search-page/search-service/search-configuration.service.ts @@ -226,7 +226,7 @@ export class SearchConfigurationService implements OnDestroy { this.getFiltersPart(), ).subscribe((update) => { const currentValue: SearchOptions = this.searchOptions.getValue(); - const updatedValue: SearchOptions = Object.assign(currentValue, update); + const updatedValue: SearchOptions = Object.assign(new SearchOptions({}), currentValue, update); this.searchOptions.next(updatedValue); }); } @@ -247,7 +247,7 @@ export class SearchConfigurationService implements OnDestroy { this.getFiltersPart(), ).subscribe((update) => { const currentValue: PaginatedSearchOptions = this.paginatedSearchOptions.getValue(); - const updatedValue: PaginatedSearchOptions = Object.assign(currentValue, update); + const updatedValue: PaginatedSearchOptions = Object.assign(new PaginatedSearchOptions({}), currentValue, update); this.paginatedSearchOptions.next(updatedValue); }); } diff --git a/src/app/+search-page/search-service/search.service.ts b/src/app/+search-page/search-service/search.service.ts index d013d9cc64..c11e5b8be9 100644 --- a/src/app/+search-page/search-service/search.service.ts +++ b/src/app/+search-page/search-service/search.service.ts @@ -1,4 +1,4 @@ -import { combineLatest as observableCombineLatest, Observable, of as observableOf, zip as observableZip } from 'rxjs'; +import { combineLatest as observableCombineLatest, Observable, of as observableOf } from 'rxjs'; import { Injectable, OnDestroy } from '@angular/core'; import { NavigationExtras, PRIMARY_OUTLET, Router, UrlSegmentGroup } from '@angular/router'; import { first, map, switchMap, take, tap } from 'rxjs/operators'; @@ -23,7 +23,7 @@ import { getSucceededRemoteData } from '../../core/shared/operators'; import { URLCombiner } from '../../core/url-combiner/url-combiner'; -import { hasValue, hasValueOperator, isEmpty, isNotEmpty, isNotUndefined } from '../../shared/empty.util'; +import { hasValue, isEmpty, isNotEmpty, isNotUndefined } from '../../shared/empty.util'; import { NormalizedSearchResult } from '../normalized-search-result.model'; import { SearchOptions } from '../search-options.model'; import { SearchResult } from '../search-result.model'; @@ -42,6 +42,7 @@ import { CommunityDataService } from '../../core/data/community-data.service'; import { ViewMode } from '../../core/shared/view-mode.model'; import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.service'; import { RouteService } from '../../core/services/route.service'; +import { RequestEntry } from '../../core/data/request.reducer'; /** * Service that performs all general actions that have to do with the search page @@ -97,9 +98,9 @@ export class SearchService implements OnDestroy { } } - getEndpoint(searchOptions?: PaginatedSearchOptions): Observable { + getEndpoint(searchOptions?:PaginatedSearchOptions):Observable { return this.halService.getEndpoint(this.searchLinkPath).pipe( - map((url: string) => { + map((url:string) => { if (hasValue(searchOptions)) { return (searchOptions as PaginatedSearchOptions).toRestUrl(url); } else { @@ -116,32 +117,60 @@ export class SearchService implements OnDestroy { * @returns {Observable>>>} Emits a paginated list with all search results found */ search(searchOptions?: PaginatedSearchOptions, responseMsToLive?: number): Observable>>> { + return this.getPaginatedResults(this.searchEntries(searchOptions)); + } + + /** + * Method to retrieve request entries for search results from the server + * @param {PaginatedSearchOptions} searchOptions The configuration necessary to perform this search + * @param responseMsToLive The amount of milliseconds for the response to live in cache + * @returns {Observable} Emits an observable with the request entries + */ + searchEntries(searchOptions?: PaginatedSearchOptions, responseMsToLive?:number) + :Observable<{searchOptions:PaginatedSearchOptions, requestEntry:RequestEntry}> { const hrefObs = this.getEndpoint(searchOptions); const requestObs = hrefObs.pipe( - map((url: string) => { + map((url:string) => { const request = new this.request(this.requestService.generateRequestId(), url); - const getResponseParserFn: () => GenericConstructor = () => { + const getResponseParserFn:() => GenericConstructor = () => { return this.parser; }; return Object.assign(request, { responseMsToLive: hasValue(responseMsToLive) ? responseMsToLive : request.responseMsToLive, - getResponseParser: getResponseParserFn + getResponseParser: getResponseParserFn, + searchOptions: searchOptions }); }), configureRequest(this.requestService), ); - const requestEntryObs = requestObs.pipe( - switchMap((request: RestRequest) => this.requestService.getByHref(request.href)) + return requestObs.pipe( + switchMap((request:RestRequest) => this.requestService.getByHref(request.href)), + map(((requestEntry:RequestEntry) => ({ + searchOptions: searchOptions, + requestEntry: requestEntry + }))) + ); + } + + /** + * Method to convert the parsed responses into a paginated list of search results + * @param searchEntries: The request entries from the search method + * @returns {Observable>>>} Emits a paginated list with all search results found + */ + getPaginatedResults(searchEntries:Observable<{ searchOptions:PaginatedSearchOptions, requestEntry:RequestEntry }>) + :Observable>>> { + const requestEntryObs:Observable = searchEntries.pipe( + map((entry) => entry.requestEntry), ); // get search results from response cache - const sqrObs: Observable = requestEntryObs.pipe( + const sqrObs:Observable = requestEntryObs.pipe( filterSuccessfulResponses(), - map((response: SearchSuccessResponse) => response.results) + map((response:SearchSuccessResponse) => response.results), ); // turn dspace href from search results to effective list of DSpaceObjects @@ -187,11 +216,12 @@ export class SearchService implements OnDestroy { }) ); - return observableCombineLatest(hrefObs, tDomainListObs, requestEntryObs).pipe( - switchMap(([href, tDomainList, requestEntry]) => { + return observableCombineLatest(tDomainListObs, searchEntries).pipe( + switchMap(([tDomainList, searchEntry]) => { + const requestEntry = searchEntry.requestEntry; if (tDomainList.indexOf(undefined) > -1 && requestEntry && requestEntry.completed) { - this.requestService.removeByHrefSubstring(href); - return this.search(searchOptions) + this.requestService.removeByHrefSubstring(requestEntry.request.href); + return this.search(searchEntry.searchOptions) } else { return this.rdb.toRemoteDataObservable(requestEntryObs, payloadObs); } diff --git a/src/app/+search-page/search-settings/search-settings.component.html b/src/app/+search-page/search-settings/search-settings.component.html index d693196dae..d8878982b4 100644 --- a/src/app/+search-page/search-settings/search-settings.component.html +++ b/src/app/+search-page/search-settings/search-settings.component.html @@ -1,24 +1,32 @@ -

{{ 'search.sidebar.settings.title' | translate}}

-
-
{{ 'search.sidebar.settings.sort-by' | translate}}
- -
+

{{ 'search.sidebar.settings.title' | translate}}

-
-
{{ 'search.sidebar.settings.rpp' | translate}}
- -
- \ No newline at end of file +
+ + + +
+ +
+ + + +
+ diff --git a/src/app/+search-page/search-settings/search-settings.component.spec.ts b/src/app/+search-page/search-settings/search-settings.component.spec.ts index b9b5c5a5eb..e0fbc84deb 100644 --- a/src/app/+search-page/search-settings/search-settings.component.spec.ts +++ b/src/app/+search-page/search-settings/search-settings.component.spec.ts @@ -7,84 +7,92 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options import { TranslateModule } from '@ngx-translate/core'; import { RouterTestingModule } from '@angular/router/testing'; import { ActivatedRoute } from '@angular/router'; -import { SearchSidebarService } from '../search-sidebar/search-sidebar.service'; +import { SidebarService } from '../../shared/sidebar/sidebar.service'; import { NO_ERRORS_SCHEMA } from '@angular/core'; import { EnumKeysPipe } from '../../shared/utils/enum-keys-pipe'; import { By } from '@angular/platform-browser'; import { SearchFilterService } from '../search-filters/search-filter/search-filter.service'; -import { hot } from 'jasmine-marbles'; import { VarDirective } from '../../shared/utils/var.directive'; -import { first } from 'rxjs/operators'; +import { take } from 'rxjs/operators'; import { SEARCH_CONFIG_SERVICE } from '../../+my-dspace-page/my-dspace-page.component'; describe('SearchSettingsComponent', () => { - let comp: SearchSettingsComponent; - let fixture: ComponentFixture; - let searchServiceObject: SearchService; + let comp:SearchSettingsComponent; + let fixture:ComponentFixture; + let searchServiceObject:SearchService; - const pagination: PaginationComponentOptions = new PaginationComponentOptions(); - pagination.id = 'search-results-pagination'; - pagination.currentPage = 1; - pagination.pageSize = 10; - const sort: SortOptions = new SortOptions('score', SortDirection.DESC); - const mockResults = ['test', 'data']; - const searchServiceStub = { - searchOptions: { pagination: pagination, sort: sort }, - search: () => mockResults - }; + let pagination:PaginationComponentOptions; + let sort:SortOptions; + let mockResults; + let searchServiceStub; - const queryParam = 'test query'; - const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f'; - const paginatedSearchOptions = { - query: queryParam, - scope: scopeParam, - pagination, - sort - }; + let queryParam; + let scopeParam; + let paginatedSearchOptions; - const activatedRouteStub = { - queryParams: observableOf({ - query: queryParam, - scope: scopeParam - }) - }; + let activatedRouteStub; - const sidebarService = { - isCollapsed: observableOf(true), - collapse: () => this.isCollapsed = observableOf(true), - expand: () => this.isCollapsed = observableOf(false) - }; + let sidebarService; beforeEach(async(() => { + pagination = new PaginationComponentOptions(); + pagination.id = 'search-results-pagination'; + pagination.currentPage = 1; + pagination.pageSize = 10; + sort = new SortOptions('score', SortDirection.DESC); + mockResults = ['test', 'data']; + searchServiceStub = { + searchOptions: {pagination: pagination, sort: sort}, + search: () => mockResults, + }; + + queryParam = 'test query'; + scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f'; + paginatedSearchOptions = { + query: queryParam, + scope: scopeParam, + pagination, + sort, + }; + + activatedRouteStub = { + queryParams: observableOf({ + query: queryParam, + scope: scopeParam, + }), + }; + + sidebarService = { + isCollapsed: observableOf(true), + collapse: () => this.isCollapsed = observableOf(true), + expand: () => this.isCollapsed = observableOf(false), + }; + TestBed.configureTestingModule({ imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])], declarations: [SearchSettingsComponent, EnumKeysPipe, VarDirective], providers: [ - { provide: SearchService, useValue: searchServiceStub }, + {provide: SearchService, useValue: searchServiceStub}, - { provide: ActivatedRoute, useValue: activatedRouteStub }, + {provide: ActivatedRoute, useValue: activatedRouteStub}, { - provide: SearchSidebarService, - useValue: sidebarService + provide: SidebarService, + useValue: sidebarService, }, { provide: SearchFilterService, - useValue: {} + useValue: {}, }, { provide: SEARCH_CONFIG_SERVICE, useValue: { - paginatedSearchOptions: hot('a', { - a: paginatedSearchOptions - }), - getCurrentScope: hot('a', { - a: 'test-id' - }), - } + paginatedSearchOptions: observableOf(paginatedSearchOptions), + getCurrentScope: observableOf('test-id'), + }, }, ], - schemas: [NO_ERRORS_SCHEMA] + schemas: [NO_ERRORS_SCHEMA], }).compileComponents(); })); @@ -101,42 +109,46 @@ describe('SearchSettingsComponent', () => { }); - it('it should show the order settings with the respective selectable options', () => { - (comp as any).searchOptions$.pipe(first()).subscribe((options) => { + it('it should show the order settings with the respective selectable options', (done) => { + (comp as any).searchOptions$.pipe(take(1)).subscribe((options) => { fixture.detectChanges(); const orderSetting = fixture.debugElement.query(By.css('div.result-order-settings')); expect(orderSetting).toBeDefined(); - const childElements = orderSetting.query(By.css('.form-control')).children; + const childElements = orderSetting.queryAll(By.css('option')); expect(childElements.length).toEqual(comp.searchOptionPossibilities.length); + done(); }); }); - it('it should show the size settings with the respective selectable options', () => { - (comp as any).searchOptions$.pipe(first()).subscribe((options) => { + it('it should show the size settings with the respective selectable options', (done) => { + (comp as any).searchOptions$.pipe(take(1)).subscribe((options) => { fixture.detectChanges(); const pageSizeSetting = fixture.debugElement.query(By.css('div.page-size-settings')); expect(pageSizeSetting).toBeDefined(); - const childElements = pageSizeSetting.query(By.css('.form-control')).children; + const childElements = pageSizeSetting.queryAll(By.css('option')); expect(childElements.length).toEqual(options.pagination.pageSizeOptions.length); - } - ) + done(); + }, + ); }); - it('should have the proper order value selected by default', () => { - (comp as any).searchOptions$.pipe(first()).subscribe((options) => { + it('should have the proper order value selected by default', (done) => { + (comp as any).searchOptions$.pipe(take(1)).subscribe((options) => { fixture.detectChanges(); const orderSetting = fixture.debugElement.query(By.css('div.result-order-settings')); - const childElementToBeSelected = orderSetting.query(By.css('.form-control option[value="0"][selected="selected"]')); + const childElementToBeSelected = orderSetting.query(By.css('option[value="0"][selected="selected"]')); expect(childElementToBeSelected).toBeDefined(); + done(); }); }); - it('should have the proper rpp value selected by default', () => { - (comp as any).searchOptions$.pipe(first()).subscribe((options) => { + it('should have the proper rpp value selected by default', (done) => { + (comp as any).searchOptions$.pipe(take(1)).subscribe((options) => { fixture.detectChanges(); const pageSizeSetting = fixture.debugElement.query(By.css('div.page-size-settings')); - const childElementToBeSelected = pageSizeSetting.query(By.css('.form-control option[value="10"][selected="selected"]')); + const childElementToBeSelected = pageSizeSetting.query(By.css('option[value="10"][selected="selected"]')); expect(childElementToBeSelected).toBeDefined(); + done(); }); }); diff --git a/src/app/+search-page/search-sidebar/search-sidebar.reducer.ts b/src/app/+search-page/search-sidebar/search-sidebar.reducer.ts deleted file mode 100644 index a01f0ff6d6..0000000000 --- a/src/app/+search-page/search-sidebar/search-sidebar.reducer.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { SearchSidebarAction, SearchSidebarActionTypes } from './search-sidebar.actions'; - -/** - * Interface that represents the state of the sidebar - */ -export interface SearchSidebarState { - sidebarCollapsed: boolean; -} - -const initialState: SearchSidebarState = { - sidebarCollapsed: true -}; - -/** - * Performs a search sidebar action on the current state - * @param {SearchSidebarState} state The state before the action is performed - * @param {SearchSidebarAction} action The action that should be performed - * @returns {SearchSidebarState} The state after the action is performed - */ -export function sidebarReducer(state = initialState, action: SearchSidebarAction): SearchSidebarState { - switch (action.type) { - - case SearchSidebarActionTypes.COLLAPSE: { - return Object.assign({}, state, { - sidebarCollapsed: true - }); - } - - case SearchSidebarActionTypes.EXPAND: { - return Object.assign({}, state, { - sidebarCollapsed: false - }); - - } - - case SearchSidebarActionTypes.TOGGLE: { - return Object.assign({}, state, { - sidebarCollapsed: !state.sidebarCollapsed - }); - - } - - default: { - return state; - } - } -} diff --git a/src/app/+search-page/search-tracker.component.html b/src/app/+search-page/search-tracker.component.html new file mode 100644 index 0000000000..c0c0ffe181 --- /dev/null +++ b/src/app/+search-page/search-tracker.component.html @@ -0,0 +1 @@ +  diff --git a/src/app/+search-page/search-tracker.component.scss b/src/app/+search-page/search-tracker.component.scss new file mode 100644 index 0000000000..c76cafbe44 --- /dev/null +++ b/src/app/+search-page/search-tracker.component.scss @@ -0,0 +1,3 @@ +:host { + display: none +} diff --git a/src/app/+search-page/search-tracker.component.ts b/src/app/+search-page/search-tracker.component.ts new file mode 100644 index 0000000000..e1df9b3905 --- /dev/null +++ b/src/app/+search-page/search-tracker.component.ts @@ -0,0 +1,88 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { Angulartics2 } from 'angulartics2'; +import { filter, map, switchMap } from 'rxjs/operators'; +import { SearchComponent } from './search.component'; +import { SearchService } from './search-service/search.service'; +import { SidebarService } from '../shared/sidebar/sidebar.service'; +import { SearchConfigurationService } from './search-service/search-configuration.service'; +import { HostWindowService } from '../shared/host-window.service'; +import { SEARCH_CONFIG_SERVICE } from '../+my-dspace-page/my-dspace-page.component'; +import { RouteService } from '../core/services/route.service'; +import { hasValue } from '../shared/empty.util'; +import { SearchQueryResponse } from './search-service/search-query-response.model'; +import { SearchSuccessResponse } from '../core/cache/response.models'; +import { PaginatedSearchOptions } from './paginated-search-options.model'; + +/** + * This component triggers a page view statistic + */ +@Component({ + selector: 'ds-search-tracker', + styleUrls: ['./search-tracker.component.scss'], + templateUrl: './search-tracker.component.html', + providers: [ + { + provide: SEARCH_CONFIG_SERVICE, + useClass: SearchConfigurationService + } + ] +}) +export class SearchTrackerComponent extends SearchComponent implements OnInit { + + constructor( + protected service:SearchService, + protected sidebarService:SidebarService, + protected windowService:HostWindowService, + @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService:SearchConfigurationService, + protected routeService:RouteService, + public angulartics2:Angulartics2 + ) { + super(service, sidebarService, windowService, searchConfigService, routeService); + } + + ngOnInit():void { + // super.ngOnInit(); + this.getSearchOptions().pipe( + switchMap((options) => this.service.searchEntries(options) + .pipe( + filter((entry) => + hasValue(entry.requestEntry) + && hasValue(entry.requestEntry.response) + && entry.requestEntry.response.isSuccessful === true + ), + map((entry) => ({ + searchOptions: entry.searchOptions, + response: (entry.requestEntry.response as SearchSuccessResponse).results + })), + ) + ) + ) + .subscribe((entry) => { + const config:PaginatedSearchOptions = entry.searchOptions; + const searchQueryResponse:SearchQueryResponse = entry.response; + const filters:Array<{ filter:string, operator:string, value:string, label:string; }> = []; + const appliedFilters = searchQueryResponse.appliedFilters || []; + for (let i = 0, filtersLength = appliedFilters.length; i < filtersLength; i++) { + const appliedFilter = appliedFilters[i]; + filters.push(appliedFilter); + } + this.angulartics2.eventTrack.next({ + action: 'search', + properties: { + searchOptions: config, + page: { + size: config.pagination.size, // same as searchQueryResponse.page.elementsPerPage + totalElements: searchQueryResponse.page.totalElements, + totalPages: searchQueryResponse.page.totalPages, + number: config.pagination.currentPage, // same as searchQueryResponse.page.currentPage + }, + sort: { + by: config.sort.field, + order: config.sort.direction + }, + filters: filters, + }, + }) + }); + } +} diff --git a/src/app/+search-page/search.component.html b/src/app/+search-page/search.component.html new file mode 100644 index 0000000000..9423062bde --- /dev/null +++ b/src/app/+search-page/search.component.html @@ -0,0 +1,50 @@ +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ + +
+ +
+
+ + + + + + + + + + + + + diff --git a/src/app/+search-page/search.component.scss b/src/app/+search-page/search.component.scss new file mode 100644 index 0000000000..9c3da88be6 --- /dev/null +++ b/src/app/+search-page/search.component.scss @@ -0,0 +1,10 @@ +@include media-breakpoint-down(md) { + .container { + width: 100%; + max-width: none; + } +} + +/deep/ .search-controls { + margin-bottom: $spacer; +} diff --git a/src/app/+search-page/search-page.component.spec.ts b/src/app/+search-page/search.component.spec.ts similarity index 81% rename from src/app/+search-page/search-page.component.spec.ts rename to src/app/+search-page/search.component.spec.ts index d072c80628..dbf79de977 100644 --- a/src/app/+search-page/search-page.component.spec.ts +++ b/src/app/+search-page/search.component.spec.ts @@ -10,13 +10,13 @@ import { SortDirection, SortOptions } from '../core/cache/models/sort-options.mo import { CommunityDataService } from '../core/data/community-data.service'; import { HostWindowService } from '../shared/host-window.service'; import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model'; -import { SearchPageComponent } from './search-page.component'; +import { SearchComponent } from './search.component'; import { SearchService } from './search-service/search.service'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { ActivatedRoute } from '@angular/router'; import { By } from '@angular/platform-browser'; import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap'; -import { SearchSidebarService } from './search-sidebar/search-sidebar.service'; +import { SidebarService } from '../shared/sidebar/sidebar.service'; import { SearchFilterService } from './search-filters/search-filter/search-filter.service'; import { SearchConfigurationService } from './search-service/search-configuration.service'; import { RemoteData } from '../core/data/remote-data'; @@ -27,11 +27,11 @@ import { PaginatedSearchOptions } from './paginated-search-options.model'; import { SearchFixedFilterService } from './search-filters/search-filter/search-fixed-filter.service'; import { createSuccessfulRemoteDataObject$ } from '../shared/testing/utils'; -let comp: SearchPageComponent; -let fixture: ComponentFixture; +let comp: SearchComponent; +let fixture: ComponentFixture; let searchServiceObject: SearchService; let searchConfigurationServiceObject: SearchConfigurationService; -const store: Store = jasmine.createSpyObj('store', { +const store: Store = jasmine.createSpyObj('store', { /* tslint:disable:no-empty */ dispatch: {}, /* tslint:enable:no-empty */ @@ -115,7 +115,7 @@ export function configureSearchComponentTestingModule(compType) { }) }, { - provide: SearchSidebarService, + provide: SidebarService, useValue: sidebarService }, { @@ -150,14 +150,14 @@ export function configureSearchComponentTestingModule(compType) { }).compileComponents(); } -describe('SearchPageComponent', () => { +describe('SearchComponent', () => { beforeEach(async(() => { - configureSearchComponentTestingModule(SearchPageComponent); + configureSearchComponentTestingModule(SearchComponent); })); beforeEach(() => { - fixture = TestBed.createComponent(SearchPageComponent); - comp = fixture.componentInstance; // SearchPageComponent test instance + fixture = TestBed.createComponent(SearchComponent); + comp = fixture.componentInstance; // SearchComponent test instance fixture.detectChanges(); searchServiceObject = (comp as any).service; searchConfigurationServiceObject = (comp as any).searchConfigService; @@ -191,34 +191,4 @@ describe('SearchPageComponent', () => { }); }); - - describe('when sidebarCollapsed is true in mobile view', () => { - let menu: HTMLElement; - - beforeEach(() => { - menu = fixture.debugElement.query(By.css('#search-sidebar-sm')).nativeElement; - (comp as any).isSidebarCollapsed$ = observableOf(true); - fixture.detectChanges(); - }); - - it('should close the sidebar', () => { - expect(menu.classList).not.toContain('active'); - }); - - }); - - describe('when sidebarCollapsed is false in mobile view', () => { - let menu: HTMLElement; - - beforeEach(() => { - menu = fixture.debugElement.query(By.css('#search-sidebar-sm')).nativeElement; - (comp as any).isSidebarCollapsed$ = observableOf(false); - fixture.detectChanges(); - }); - - it('should open the menu', () => { - expect(menu.classList).toContain('active'); - }); - - }); }); diff --git a/src/app/+search-page/search.component.ts b/src/app/+search-page/search.component.ts new file mode 100644 index 0000000000..cc763e253f --- /dev/null +++ b/src/app/+search-page/search.component.ts @@ -0,0 +1,175 @@ +import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core'; +import { BehaviorSubject, Observable, of as observableOf, Subscription } from 'rxjs'; +import { startWith, switchMap, } from 'rxjs/operators'; +import { PaginatedList } from '../core/data/paginated-list'; +import { RemoteData } from '../core/data/remote-data'; +import { DSpaceObject } from '../core/shared/dspace-object.model'; +import { pushInOut } from '../shared/animations/push'; +import { HostWindowService } from '../shared/host-window.service'; +import { PaginatedSearchOptions } from './paginated-search-options.model'; +import { SearchResult } from './search-result.model'; +import { SearchService } from './search-service/search.service'; +import { SidebarService } from '../shared/sidebar/sidebar.service'; +import { hasValue, isNotEmpty } from '../shared/empty.util'; +import { SearchConfigurationService } from './search-service/search-configuration.service'; +import { getSucceededRemoteData } from '../core/shared/operators'; +import { RouteService } from '../core/services/route.service'; +import { SEARCH_CONFIG_SERVICE } from '../+my-dspace-page/my-dspace-page.component'; + +@Component({ + selector: 'ds-search', + styleUrls: ['./search.component.scss'], + templateUrl: './search.component.html', + changeDetection: ChangeDetectionStrategy.OnPush, + animations: [pushInOut], + providers: [ + { + provide: SEARCH_CONFIG_SERVICE, + useClass: SearchConfigurationService + } + ] +}) + +/** + * This component renders a sidebar, a search input bar and the search results. + */ +export class SearchComponent implements OnInit { + /** + * The current search results + */ + resultsRD$: BehaviorSubject>>> = new BehaviorSubject(null); + + /** + * The current paginated search options + */ + searchOptions$: Observable; + + /** + * The current relevant scopes + */ + scopeListRD$: Observable; + + /** + * Emits true if were on a small screen + */ + isXsOrSm$: Observable; + + /** + * Subscription to unsubscribe from + */ + sub: Subscription; + + /** + * True when the search component should show results on the current page + */ + @Input() inPlaceSearch = true; + + /** + * Whether or not the search bar should be visible + */ + @Input() + searchEnabled = true; + + /** + * The width of the sidebar (bootstrap columns) + */ + @Input() + sideBarWidth = 3; + + /** + * The currently applied configuration (determines title of search) + */ + @Input() + configuration$: Observable; + + /** + * Link to the search page + */ + searchLink: string; + + /** + * Observable for whether or not the sidebar is currently collapsed + */ + isSidebarCollapsed$: Observable; + + constructor(protected service: SearchService, + protected sidebarService: SidebarService, + protected windowService: HostWindowService, + @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService, + protected routeService: RouteService) { + this.isXsOrSm$ = this.windowService.isXsOrSm(); + } + + /** + * Listening to changes in the paginated search options + * If something changes, update the search results + * + * Listen to changes in the scope + * If something changes, update the list of scopes for the dropdown + */ + ngOnInit(): void { + this.isSidebarCollapsed$ = this.isSidebarCollapsed(); + this.searchLink = this.getSearchLink(); + this.searchOptions$ = this.getSearchOptions(); + this.sub = this.searchOptions$.pipe( + switchMap((options) => this.service.search(options).pipe(getSucceededRemoteData(), startWith(undefined)))) + .subscribe((results) => { + this.resultsRD$.next(results); + }); + this.scopeListRD$ = this.searchConfigService.getCurrentScope('').pipe( + switchMap((scopeId) => this.service.getScopes(scopeId)) + ); + if (!isNotEmpty(this.configuration$)) { + this.configuration$ = this.routeService.getRouteParameterValue('configuration'); + } + } + + /** + * Get the current paginated search options + * @returns {Observable} + */ + protected getSearchOptions(): Observable { + return this.searchConfigService.paginatedSearchOptions; + } + + /** + * Set the sidebar to a collapsed state + */ + public closeSidebar(): void { + this.sidebarService.collapse() + } + + /** + * Set the sidebar to an expanded state + */ + public openSidebar(): void { + this.sidebarService.expand(); + } + + /** + * Check if the sidebar is collapsed + * @returns {Observable} emits true if the sidebar is currently collapsed, false if it is expanded + */ + private isSidebarCollapsed(): Observable { + return this.sidebarService.isCollapsed; + } + + /** + * @returns {string} The base path to the search page, or the current page when inPlaceSearch is true + */ + private getSearchLink(): string { + if (this.inPlaceSearch) { + return './'; + } + return this.service.getSearchLink(); + } + + /** + * Unsubscribe from the subscription + */ + ngOnDestroy(): void { + if (hasValue(this.sub)) { + this.sub.unsubscribe(); + } + } +} diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts index 5b78e3462f..ad11daa121 100644 --- a/src/app/app.component.spec.ts +++ b/src/app/app.component.spec.ts @@ -46,6 +46,7 @@ import { MockActivatedRoute } from './shared/mocks/mock-active-router'; import { MockRouter } from './shared/mocks/mock-router'; import { MockCookieService } from './shared/mocks/mock-cookie.service'; import { CookieService } from './core/services/cookie.service'; +import { Angulartics2DSpace } from './statistics/angulartics/dspace-provider'; let comp: AppComponent; let fixture: ComponentFixture; @@ -74,6 +75,7 @@ describe('App component', () => { { provide: NativeWindowService, useValue: new NativeWindowRef() }, { provide: MetadataService, useValue: new MockMetadataService() }, { provide: Angulartics2GoogleAnalytics, useValue: new AngularticsMock() }, + { provide: Angulartics2DSpace, useValue: new AngularticsMock() }, { provide: AuthService, useValue: new AuthServiceMock() }, { provide: Router, useValue: new MockRouter() }, { provide: ActivatedRoute, useValue: new MockActivatedRoute() }, diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 50baaf6e57..64e530fc84 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -34,6 +34,7 @@ import { HostWindowService } from './shared/host-window.service'; import { Theme } from '../config/theme.inferface'; import { isNotEmpty } from './shared/empty.util'; import { CookieService } from './core/services/cookie.service'; +import { Angulartics2DSpace } from './statistics/angulartics/dspace-provider'; export const LANG_COOKIE = 'language_cookie'; @@ -60,6 +61,7 @@ export class AppComponent implements OnInit, AfterViewInit { private store: Store, private metadata: MetadataService, private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics, + private angulartics2DSpace: Angulartics2DSpace, private authService: AuthService, private router: Router, private cssService: CSSVariableService, @@ -89,6 +91,8 @@ export class AppComponent implements OnInit, AfterViewInit { } } + angulartics2DSpace.startTracking(); + metadata.listenForRouteChange(); if (config.debug) { diff --git a/src/app/app.reducer.ts b/src/app/app.reducer.ts index f8c8b5df3d..d8de0cc45c 100644 --- a/src/app/app.reducer.ts +++ b/src/app/app.reducer.ts @@ -1,12 +1,16 @@ -import { ActionReducerMap, createSelector, MemoizedSelector } from '@ngrx/store'; +import { ActionReducerMap, createSelector, MemoizedSelector, State } from '@ngrx/store'; import * as fromRouter from '@ngrx/router-store'; import { CommunityListReducer, CommunityListState } from './community-list-page/community-list.reducer'; import { hostWindowReducer, HostWindowState } from './shared/host-window.reducer'; import { formReducer, FormState } from './shared/form/form.reducer'; import { - SearchSidebarState, + SidebarState, sidebarReducer -} from './+search-page/search-sidebar/search-sidebar.reducer'; +} from './shared/sidebar/sidebar.reducer'; +import { + SidebarFilterState, + sidebarFilterReducer, SidebarFiltersState +} from './shared/sidebar/filter/sidebar-filter.reducer'; import { filterReducer, SearchFiltersState @@ -38,7 +42,8 @@ export interface AppState { metadataRegistry: MetadataRegistryState; bitstreamFormats: BitstreamFormatRegistryState; notifications: NotificationsState; - searchSidebar: SearchSidebarState; + sidebar: SidebarState; + sidebarFilter: SidebarFiltersState; searchFilter: SearchFiltersState; truncatable: TruncatablesState; cssVariables: CSSVariablesState; @@ -55,7 +60,8 @@ export const appReducers: ActionReducerMap = { metadataRegistry: metadataRegistryReducer, bitstreamFormats: bitstreamFormatReducer, notifications: notificationsReducer, - searchSidebar: sidebarReducer, + sidebar: sidebarReducer, + sidebarFilter: sidebarFilterReducer, searchFilter: filterReducer, truncatable: truncatableReducer, cssVariables: cssVariablesReducer, diff --git a/src/app/core/cache/models/normalized-site.model.ts b/src/app/core/cache/models/normalized-site.model.ts new file mode 100644 index 0000000000..68a7e0a480 --- /dev/null +++ b/src/app/core/cache/models/normalized-site.model.ts @@ -0,0 +1,13 @@ +import { inheritSerialization } from 'cerialize'; +import { NormalizedDSpaceObject } from './normalized-dspace-object.model'; +import { mapsTo } from '../builders/build-decorators'; +import { Site } from '../../shared/site.model'; + +/** + * Normalized model class for a Site object + */ +@mapsTo(Site) +@inheritSerialization(NormalizedDSpaceObject) +export class NormalizedSite extends NormalizedDSpaceObject { + +} diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index a03cc6a9cb..f8a8626f15 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -121,6 +121,8 @@ import { NormalizedBrowseEntry } from './shared/normalized-browse-entry.model'; import { BrowseDefinition } from './shared/browse-definition.model'; import { MappedCollectionsReponseParsingService } from './data/mapped-collections-reponse-parsing.service'; import { ObjectSelectService } from '../shared/object-select/object-select.service'; +import { SiteDataService } from './data/site-data.service'; +import { NormalizedSite } from './cache/models/normalized-site.model'; const IMPORTS = [ CommonModule, @@ -139,6 +141,7 @@ const PROVIDERS = [ AuthResponseParsingService, CommunityDataService, CollectionDataService, + SiteDataService, DSOResponseParsingService, DSpaceRESTv2Service, DynamicFormLayoutService, @@ -232,6 +235,7 @@ export const normalizedModels = NormalizedBitstream, NormalizedBitstreamFormat, NormalizedItem, + NormalizedSite, NormalizedCollection, NormalizedCommunity, NormalizedEPerson, diff --git a/src/app/core/data/search-response-parsing.service.ts b/src/app/core/data/search-response-parsing.service.ts index 9ab0104393..389541745d 100644 --- a/src/app/core/data/search-response-parsing.service.ts +++ b/src/app/core/data/search-response-parsing.service.ts @@ -22,6 +22,10 @@ export class SearchResponseParsingService implements ResponseParsingService { } }; const payload = data.payload._embedded.searchResult || emptyPayload; + payload.appliedFilters = data.payload.appliedFilters; + payload.sort = data.payload.sort; + payload.scope = data.payload.scope; + payload.configuration = data.payload.configuration; const hitHighlights: MetadataMap[] = payload._embedded.objects .map((object) => object.hitHighlights) .map((hhObject) => { diff --git a/src/app/core/data/site-data.service.spec.ts b/src/app/core/data/site-data.service.spec.ts new file mode 100644 index 0000000000..189218b5cf --- /dev/null +++ b/src/app/core/data/site-data.service.spec.ts @@ -0,0 +1,104 @@ +import { cold, getTestScheduler } from 'jasmine-marbles'; +import { SiteDataService } from './site-data.service'; +import { RequestService } from './request.service'; +import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service'; +import { ObjectCacheService } from '../cache/object-cache.service'; +import { Site } from '../shared/site.model'; +import { Store } from '@ngrx/store'; +import { CoreState } from '../core.reducers'; +import { NotificationsService } from '../../shared/notifications/notifications.service'; +import { HttpClient } from '@angular/common/http'; +import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service'; +import { HALEndpointService } from '../shared/hal-endpoint.service'; +import { of as observableOf } from 'rxjs'; +import { RestResponse } from '../cache/response.models'; +import { RequestEntry } from './request.reducer'; +import { FindAllOptions } from './request.models'; +import { TestScheduler } from 'rxjs/testing'; +import { PaginatedList } from './paginated-list'; +import { RemoteData } from './remote-data'; + +describe('SiteDataService', () => { + let scheduler:TestScheduler; + let service:SiteDataService; + let halService:HALEndpointService; + let requestService:RequestService; + let rdbService:RemoteDataBuildService; + let objectCache:ObjectCacheService; + + const testObject = Object.assign(new Site(), { + uuid: '9b4f22f4-164a-49db-8817-3316b6ee5746', + }); + + const requestUUID = '34cfed7c-f597-49ef-9cbe-ea351f0023c2'; + const options = Object.assign(new FindAllOptions(), {}); + + const getRequestEntry$ = (successful:boolean, statusCode:number, statusText:string) => { + return observableOf({ + response: new RestResponse(successful, statusCode, statusText) + } as RequestEntry); + }; + + const siteLink = 'https://rest.api/rest/api/config/sites'; + + beforeEach(() => { + scheduler = getTestScheduler(); + + halService = jasmine.createSpyObj('halService', { + getEndpoint: cold('a', {a: siteLink}) + }); + requestService = jasmine.createSpyObj('requestService', { + generateRequestId: requestUUID, + configure: true, + getByHref: getRequestEntry$(true, 200, 'Success') + }); + rdbService = jasmine.createSpyObj('rdbService', { + buildList: cold('a', { + a: new RemoteData(false, false, true, undefined, new PaginatedList(null, [testObject])) + }) + }); + + const store = {} as Store; + objectCache = {} as ObjectCacheService; + const notificationsService = {} as NotificationsService; + const http = {} as HttpClient; + const comparator = {} as any; + const dataBuildService = {} as NormalizedObjectBuildService; + + service = new SiteDataService( + requestService, + rdbService, + dataBuildService, + store, + objectCache, + halService, + notificationsService, + http, + comparator + ); + }); + + describe('getBrowseEndpoint', () => { + it('should return the Static Page endpoint', () => { + + const result = service.getBrowseEndpoint(options); + const expected = cold('b', {b: siteLink}); + + expect(result).toBeObservable(expected); + }); + }); + + describe('find', () => { + it('should return the Site object', () => { + + spyOn(service, 'findAll').and.returnValue(cold('a', { + a: new RemoteData(false, false, true, undefined, new PaginatedList(null, [testObject])) + })); + + const expected = cold('(b|)', {b: testObject}); + const result = service.find(); + + expect(result).toBeObservable(expected); + }); + }); +}); diff --git a/src/app/core/data/site-data.service.ts b/src/app/core/data/site-data.service.ts new file mode 100644 index 0000000000..4993d47226 --- /dev/null +++ b/src/app/core/data/site-data.service.ts @@ -0,0 +1,68 @@ +import { DataService } from './data.service'; +import { Site } from '../shared/site.model'; +import { RequestService } from './request.service'; +import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service'; +import { NormalizedObjectBuildService } from '../cache/builders/normalized-object-build.service'; +import { Store } from '@ngrx/store'; +import { CoreState } from '../core.reducers'; +import { ObjectCacheService } from '../cache/object-cache.service'; +import { HALEndpointService } from '../shared/hal-endpoint.service'; +import { NotificationsService } from '../../shared/notifications/notifications.service'; +import { HttpClient } from '@angular/common/http'; +import { DSOChangeAnalyzer } from './dso-change-analyzer.service'; +import { FindAllOptions } from './request.models'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { RemoteData } from './remote-data'; +import { PaginatedList } from './paginated-list'; +import { Injectable } from '@angular/core'; +import { getSucceededRemoteData } from '../shared/operators'; + +/** + * Service responsible for handling requests related to the Site object + */ +@Injectable() +export class SiteDataService extends DataService { +​ + protected linkPath = 'sites'; + protected forceBypassCache = false; +​ + + constructor( + protected requestService:RequestService, + protected rdbService:RemoteDataBuildService, + protected dataBuildService:NormalizedObjectBuildService, + protected store:Store, + protected objectCache:ObjectCacheService, + protected halService:HALEndpointService, + protected notificationsService:NotificationsService, + protected http:HttpClient, + protected comparator:DSOChangeAnalyzer, + ) { + super(); + } + +​ + + /** + * Get the endpoint for browsing the site object + * @param {FindAllOptions} options + * @param {Observable} linkPath + */ + getBrowseEndpoint(options:FindAllOptions, linkPath?:string):Observable { + return this.halService.getEndpoint(this.linkPath); + } + +​ + + /** + * Retrieve the Site Object + */ + find():Observable { + return this.findAll().pipe( + getSucceededRemoteData(), + map((remoteData:RemoteData>) => remoteData.payload), + map((list:PaginatedList) => list.page[0]) + ); + } +} diff --git a/src/app/core/shared/site.model.ts b/src/app/core/shared/site.model.ts new file mode 100644 index 0000000000..a191b2143f --- /dev/null +++ b/src/app/core/shared/site.model.ts @@ -0,0 +1,11 @@ +import { DSpaceObject } from './dspace-object.model'; +import { ResourceType } from './resource-type'; + +/** + * Model class for the Site object + */ +export class Site extends DSpaceObject { +​ + static type = new ResourceType('site'); +​ +} diff --git a/src/app/core/submission/submission-object-data.service.spec.ts b/src/app/core/submission/submission-object-data.service.spec.ts new file mode 100644 index 0000000000..b7c06272e6 --- /dev/null +++ b/src/app/core/submission/submission-object-data.service.spec.ts @@ -0,0 +1,95 @@ +import { Observable } from 'rxjs'; +import { SubmissionService } from '../../submission/submission.service'; +import { RemoteData } from '../data/remote-data'; +import { SubmissionObject } from './models/submission-object.model'; +import { WorkspaceItem } from './models/workspaceitem.model'; +import { SubmissionObjectDataService } from './submission-object-data.service'; +import { SubmissionScopeType } from './submission-scope-type'; +import { WorkflowItemDataService } from './workflowitem-data.service'; +import { WorkspaceitemDataService } from './workspaceitem-data.service'; + +describe('SubmissionObjectDataService', () => { + let service: SubmissionObjectDataService; + let submissionService: SubmissionService; + let workspaceitemDataService: WorkspaceitemDataService; + let workflowItemDataService: WorkflowItemDataService; + + const submissionId = '1234'; + const wsiResult = 'wsiResult' as any; + const wfiResult = 'wfiResult' as any; + + beforeEach(() => { + workspaceitemDataService = jasmine.createSpyObj('WorkspaceitemDataService', { + findById: wsiResult + }); + workflowItemDataService = jasmine.createSpyObj('WorkflowItemDataService', { + findById: wfiResult + }); + }); + + describe('findById', () => { + it('should call SubmissionService.getSubmissionScope to determine the type of submission object', () => { + submissionService = jasmine.createSpyObj('SubmissionService', { + getSubmissionScope: {} + }); + service = new SubmissionObjectDataService(workspaceitemDataService, workflowItemDataService, submissionService); + service.findById(submissionId); + expect(submissionService.getSubmissionScope).toHaveBeenCalled(); + }); + + describe('when the submission ID refers to a WorkspaceItem', () => { + beforeEach(() => { + submissionService = jasmine.createSpyObj('SubmissionService', { + getSubmissionScope: SubmissionScopeType.WorkspaceItem + }); + service = new SubmissionObjectDataService(workspaceitemDataService, workflowItemDataService, submissionService); + }); + + it('should forward the result of WorkspaceitemDataService.findById()', () => { + const result = service.findById(submissionId); + expect(workspaceitemDataService.findById).toHaveBeenCalledWith(submissionId); + expect(result).toBe(wsiResult); + }); + }); + + describe('when the submission ID refers to a WorkflowItem', () => { + beforeEach(() => { + submissionService = jasmine.createSpyObj('SubmissionService', { + getSubmissionScope: SubmissionScopeType.WorkflowItem + }); + service = new SubmissionObjectDataService(workspaceitemDataService, workflowItemDataService, submissionService); + }); + + it('should forward the result of WorkflowItemDataService.findById()', () => { + const result = service.findById(submissionId); + expect(workflowItemDataService.findById).toHaveBeenCalledWith(submissionId); + expect(result).toBe(wfiResult); + }); + }); + + describe('when the type of submission object is unknown', () => { + beforeEach(() => { + submissionService = jasmine.createSpyObj('SubmissionService', { + getSubmissionScope: 'Something else' + }); + service = new SubmissionObjectDataService(workspaceitemDataService, workflowItemDataService, submissionService); + }); + + it('shouldn\'t call any data service methods', () => { + service.findById(submissionId); + expect(workspaceitemDataService.findById).not.toHaveBeenCalled(); + expect(workflowItemDataService.findById).not.toHaveBeenCalled(); + }); + + it('should return a RemoteData containing an error', (done) => { + const result = service.findById(submissionId); + result.subscribe((rd: RemoteData) => { + expect(rd.hasFailed).toBe(true); + expect(rd.error).toBeDefined(); + done(); + }) + }); + }); + + }); +}); diff --git a/src/app/core/submission/submission-object-data.service.ts b/src/app/core/submission/submission-object-data.service.ts new file mode 100644 index 0000000000..15ede18cb8 --- /dev/null +++ b/src/app/core/submission/submission-object-data.service.ts @@ -0,0 +1,46 @@ +import { Injectable } from '@angular/core'; +import { of as observableOf, Observable } from 'rxjs'; +import { SubmissionService } from '../../submission/submission.service'; +import { RemoteData } from '../data/remote-data'; +import { RemoteDataError } from '../data/remote-data-error'; +import { SubmissionObject } from './models/submission-object.model'; +import { SubmissionScopeType } from './submission-scope-type'; +import { WorkflowItemDataService } from './workflowitem-data.service'; +import { WorkspaceitemDataService } from './workspaceitem-data.service'; + +/** + * A service to retrieve submission objects (WorkspaceItem/WorkflowItem) + * without knowing their type + */ +@Injectable({ + providedIn: 'root' +}) +export class SubmissionObjectDataService { + constructor( + private workspaceitemDataService: WorkspaceitemDataService, + private workflowItemDataService: WorkflowItemDataService, + private submissionService: SubmissionService + ) { + } + + /** + * Retrieve a submission object based on its ID. + * + * @param id The identifier of a submission object + */ + findById(id: string): Observable> { + switch (this.submissionService.getSubmissionScope()) { + case SubmissionScopeType.WorkspaceItem: + return this.workspaceitemDataService.findById(id); + case SubmissionScopeType.WorkflowItem: + return this.workflowItemDataService.findById(id); + default: + const error = new RemoteDataError( + undefined, + undefined, + 'The request couldn\'t be sent. Unable to determine the type of submission object' + ); + return observableOf(new RemoteData(false, false, false, error, undefined)); + } + } +} diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts index 13a9ba4e85..e5663e93cb 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.spec.ts @@ -112,6 +112,7 @@ describe('DsDynamicFormControlContainerComponent test suite', () => { repeatable: false }), new DynamicRelationGroupModel({ + submissionId: '1234', id: 'relationGroup', formConfiguration: [], mandatoryField: '', diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.spec.ts index 6d5839f867..e1d12650fe 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.spec.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.component.spec.ts @@ -33,6 +33,8 @@ export let FORM_GROUP_TEST_GROUP; const config: GlobalConfig = MOCK_SUBMISSION_CONFIG; +const submissionId = '1234'; + function init() { FORM_GROUP_TEST_MODEL_CONFIG = { disabled: false, @@ -67,6 +69,7 @@ function init() { }] } as FormFieldModel] } as FormRowModel], + submissionId, id: 'dc_contributor_author', label: 'Authors', mandatoryField: 'dc.contributor.author', @@ -183,7 +186,7 @@ describe('DsDynamicRelationGroupComponent test suite', () => { it('should init component properly', inject([FormBuilderService], (service: FormBuilderService) => { const formConfig = { rows: groupComp.model.formConfiguration } as SubmissionFormsModel; - const formModel = service.modelFromConfiguration(formConfig, groupComp.model.scopeUUID, {}, groupComp.model.submissionScope, groupComp.model.readOnly); + const formModel = service.modelFromConfiguration(submissionId, formConfig, groupComp.model.scopeUUID, {}, groupComp.model.submissionScope, groupComp.model.readOnly); const chips = new Chips([], 'value', 'dc.contributor.author'); groupComp.formCollapsed.subscribe((value) => { expect(value).toEqual(false); @@ -257,7 +260,7 @@ describe('DsDynamicRelationGroupComponent test suite', () => { it('should init component properly', inject([FormBuilderService], (service: FormBuilderService) => { const formConfig = { rows: groupComp.model.formConfiguration } as SubmissionFormsModel; - const formModel = service.modelFromConfiguration(formConfig, groupComp.model.scopeUUID, {}, groupComp.model.submissionScope, groupComp.model.readOnly); + const formModel = service.modelFromConfiguration(submissionId, formConfig, groupComp.model.scopeUUID, {}, groupComp.model.submissionScope, groupComp.model.readOnly); const chips = new Chips(modelValue, 'value', 'dc.contributor.author'); groupComp.formCollapsed.subscribe((value) => { expect(value).toEqual(true); diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts index 62b6b4effa..ea62eeb4ce 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.components.ts @@ -93,6 +93,7 @@ export class DsDynamicRelationGroupComponent extends DynamicFormControlComponent this.formId = this.formService.getUniqueId(this.model.id); this.formModel = this.formBuilderService.modelFromConfiguration( + this.model.submissionId, config, this.model.scopeUUID, {}, diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model.ts index e6d2b95afc..c1f76f0431 100644 --- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model.ts +++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model.ts @@ -10,6 +10,7 @@ export const PLACEHOLDER_PARENT_METADATA = '#PLACEHOLDER_PARENT_METADATA_VALUE#' * Dynamic Group Model configuration interface */ export interface DynamicRelationGroupModelConfig extends DsDynamicInputModelConfig { + submissionId: string, formConfiguration: FormRowModel[], mandatoryField: string, relationFields: string[], @@ -21,6 +22,7 @@ export interface DynamicRelationGroupModelConfig extends DsDynamicInputModelConf * Dynamic Group Model class */ export class DynamicRelationGroupModel extends DsDynamicInputModel { + @serializable() submissionId: string; @serializable() formConfiguration: FormRowModel[]; @serializable() mandatoryField: string; @serializable() relationFields: string[]; @@ -32,6 +34,7 @@ export class DynamicRelationGroupModel extends DsDynamicInputModel { constructor(config: DynamicRelationGroupModelConfig, layout?: DynamicFormControlLayout) { super(config, layout); + this.submissionId = config.submissionId; this.formConfiguration = config.formConfiguration; this.mandatoryField = config.mandatoryField; this.relationFields = config.relationFields; diff --git a/src/app/shared/form/builder/form-builder.service.spec.ts b/src/app/shared/form/builder/form-builder.service.spec.ts index 58a1696a92..496c06629a 100644 --- a/src/app/shared/form/builder/form-builder.service.spec.ts +++ b/src/app/shared/form/builder/form-builder.service.spec.ts @@ -56,6 +56,8 @@ describe('FormBuilderService test suite', () => { let testFormConfiguration: SubmissionFormsModel; let service: FormBuilderService; + const submissionId = '1234'; + function testValidator() { return {testValidator: {valid: true}}; } @@ -204,6 +206,7 @@ describe('FormBuilderService test suite', () => { new DynamicListRadioGroupModel({id: 'testRadioList', authorityOptions: authorityOptions, repeatable: false}), new DynamicRelationGroupModel({ + submissionId, id: 'testRelationGroup', formConfiguration: [{ fields: [{ @@ -406,7 +409,7 @@ describe('FormBuilderService test suite', () => { }); it('should create an array of form models', () => { - const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID'); + const formModel = service.modelFromConfiguration(submissionId, testFormConfiguration, 'testScopeUUID'); expect(formModel[0] instanceof DynamicRowGroupModel).toBe(true); expect((formModel[0] as DynamicRowGroupModel).group.length).toBe(3); @@ -427,7 +430,7 @@ describe('FormBuilderService test suite', () => { }); it('should return form\'s fields value from form model', () => { - const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID'); + const formModel = service.modelFromConfiguration(submissionId, testFormConfiguration, 'testScopeUUID'); let value = {} as any; expect(service.getValueFromModel(formModel)).toEqual(value); @@ -448,7 +451,7 @@ describe('FormBuilderService test suite', () => { }); it('should clear all form\'s fields value', () => { - const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID'); + const formModel = service.modelFromConfiguration(submissionId, testFormConfiguration, 'testScopeUUID'); const value = {} as any; ((formModel[0] as DynamicRowGroupModel).get(1) as DsDynamicInputModel).valueUpdates.next('test'); @@ -460,7 +463,7 @@ describe('FormBuilderService test suite', () => { }); it('should return true when model has a custom group model as parent', () => { - const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID'); + const formModel = service.modelFromConfiguration(submissionId, testFormConfiguration, 'testScopeUUID'); let model = service.findById('dc_identifier_QUALDROP_VALUE', formModel); let modelParent = service.findById('dc_identifier_QUALDROP_GROUP', formModel); model.parent = modelParent; @@ -489,7 +492,7 @@ describe('FormBuilderService test suite', () => { }); it('should return true when model value is a map', () => { - const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID'); + const formModel = service.modelFromConfiguration(submissionId, testFormConfiguration, 'testScopeUUID'); const model = service.findById('dc_identifier_QUALDROP_VALUE', formModel); const modelParent = service.findById('dc_identifier_QUALDROP_GROUP', formModel); model.parent = modelParent; @@ -498,7 +501,7 @@ describe('FormBuilderService test suite', () => { }); it('should return true when model is a Qualdrop Group', () => { - const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID'); + const formModel = service.modelFromConfiguration(submissionId, testFormConfiguration, 'testScopeUUID'); let model = service.findById('dc_identifier_QUALDROP_GROUP', formModel); expect(service.isQualdropGroup(model)).toBe(true); @@ -509,7 +512,7 @@ describe('FormBuilderService test suite', () => { }); it('should return true when model is a Custom or List Group', () => { - const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID'); + const formModel = service.modelFromConfiguration(submissionId, testFormConfiguration, 'testScopeUUID'); let model = service.findById('dc_identifier_QUALDROP_GROUP', formModel); expect(service.isCustomOrListGroup(model)).toBe(true); @@ -528,7 +531,7 @@ describe('FormBuilderService test suite', () => { }); it('should return true when model is a Custom Group', () => { - const formModel = service.modelFromConfiguration(testFormConfiguration, 'testScopeUUID'); + const formModel = service.modelFromConfiguration(submissionId, testFormConfiguration, 'testScopeUUID'); let model = service.findById('dc_identifier_QUALDROP_GROUP', formModel); expect(service.isCustomGroup(model)).toBe(true); diff --git a/src/app/shared/form/builder/form-builder.service.ts b/src/app/shared/form/builder/form-builder.service.ts index 21e702aabb..f867d1f79c 100644 --- a/src/app/shared/form/builder/form-builder.service.ts +++ b/src/app/shared/form/builder/form-builder.service.ts @@ -10,7 +10,7 @@ import { DynamicFormArrayModel, DynamicFormControlModel, DynamicFormGroupModel, - DynamicFormService, + DynamicFormService, DynamicFormValidationService, DynamicPathable, JSONUtils, } from '@ng-dynamic-forms/core'; @@ -33,6 +33,13 @@ import { isNgbDateStruct } from '../../date.util'; @Injectable() export class FormBuilderService extends DynamicFormService { + constructor( + validationService: DynamicFormValidationService, + protected rowParser: RowParser + ) { + super(validationService); + } + findById(id: string, groupModel: DynamicFormControlModel[], arrayIndex = null): DynamicFormControlModel | null { let result = null; @@ -198,13 +205,13 @@ export class FormBuilderService extends DynamicFormService { return result; } - modelFromConfiguration(json: string | SubmissionFormsModel, scopeUUID: string, initFormValues: any = {}, submissionScope?: string, readOnly = false): DynamicFormControlModel[] | never { + modelFromConfiguration(submissionId: string, json: string | SubmissionFormsModel, scopeUUID: string, sectionData: any = {}, submissionScope?: string, readOnly = false): DynamicFormControlModel[] | never { let rows: DynamicFormControlModel[] = []; const rawData = typeof json === 'string' ? JSON.parse(json, JSONUtils.parseReviver) : json; if (rawData.rows && !isEmpty(rawData.rows)) { rawData.rows.forEach((currentRow) => { - const rowParsed = new RowParser(currentRow, scopeUUID, initFormValues, submissionScope, readOnly).parse(); + const rowParsed = this.rowParser.parse(submissionId, currentRow, scopeUUID, sectionData, submissionScope, readOnly); if (isNotNull(rowParsed)) { if (Array.isArray(rowParsed)) { rows = rows.concat(rowParsed); diff --git a/src/app/shared/form/builder/parsers/concat-field-parser.ts b/src/app/shared/form/builder/parsers/concat-field-parser.ts index 6323905555..449827c56b 100644 --- a/src/app/shared/form/builder/parsers/concat-field-parser.ts +++ b/src/app/shared/form/builder/parsers/concat-field-parser.ts @@ -1,4 +1,11 @@ -import { FieldParser } from './field-parser'; +import { Inject } from '@angular/core'; +import { + CONFIG_DATA, + FieldParser, + INIT_FORM_VALUES, + PARSER_OPTIONS, + SUBMISSION_ID +} from './field-parser'; import { FormFieldModel } from '../models/form-field.model'; import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model'; import { DynamicFormControlLayout, DynamicInputModel, DynamicInputModelConfig } from '@ng-dynamic-forms/core'; @@ -14,13 +21,15 @@ import { ParserOptions } from './parser-options'; export class ConcatFieldParser extends FieldParser { - constructor(protected configData: FormFieldModel, - protected initFormValues, - protected parserOptions: ParserOptions, + constructor( + @Inject(SUBMISSION_ID) submissionId: string, + @Inject(CONFIG_DATA) configData: FormFieldModel, + @Inject(INIT_FORM_VALUES) initFormValues, + @Inject(PARSER_OPTIONS) parserOptions: ParserOptions, protected separator: string, protected firstPlaceholder: string = null, protected secondPlaceholder: string = null) { - super(configData, initFormValues, parserOptions); + super(submissionId, configData, initFormValues, parserOptions); this.separator = separator; this.firstPlaceholder = firstPlaceholder; diff --git a/src/app/shared/form/builder/parsers/date-field-parser.spec.ts b/src/app/shared/form/builder/parsers/date-field-parser.spec.ts index bbcfa60621..efa4f3cdb5 100644 --- a/src/app/shared/form/builder/parsers/date-field-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/date-field-parser.spec.ts @@ -1,6 +1,4 @@ import { FormFieldModel } from '../models/form-field.model'; -import { DynamicConcatModel } from '../ds-dynamic-form-ui/models/ds-dynamic-concat.model'; -import { SeriesFieldParser } from './series-field-parser'; import { DateFieldParser } from './date-field-parser'; import { DynamicDsDatePickerModel } from '../ds-dynamic-form-ui/models/date-picker/date-picker.model'; import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model'; @@ -10,6 +8,7 @@ describe('DateFieldParser test suite', () => { let field: FormFieldModel; let initFormValues: any = {}; + const submissionId = '1234'; const parserOptions: ParserOptions = { readOnly: false, submissionScope: null, @@ -37,13 +36,13 @@ describe('DateFieldParser test suite', () => { }); it('should init parser properly', () => { - const parser = new DateFieldParser(field, initFormValues, parserOptions); + const parser = new DateFieldParser(submissionId, field, initFormValues, parserOptions); expect(parser instanceof DateFieldParser).toBe(true); }); it('should return a DynamicDsDatePickerModel object when repeatable option is false', () => { - const parser = new DateFieldParser(field, initFormValues, parserOptions); + const parser = new DateFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -56,7 +55,7 @@ describe('DateFieldParser test suite', () => { }; const expectedValue = '1983-11-18'; - const parser = new DateFieldParser(field, initFormValues, parserOptions); + const parser = new DateFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); diff --git a/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts b/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts index 5dfdcfa5ce..8dbd68e05a 100644 --- a/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/dropdown-field-parser.spec.ts @@ -6,6 +6,7 @@ import { ParserOptions } from './parser-options'; describe('DropdownFieldParser test suite', () => { let field: FormFieldModel; + const submissionId = '1234'; const initFormValues = {}; const parserOptions: ParserOptions = { readOnly: false, @@ -35,13 +36,13 @@ describe('DropdownFieldParser test suite', () => { }); it('should init parser properly', () => { - const parser = new DropdownFieldParser(field, initFormValues, parserOptions); + const parser = new DropdownFieldParser(submissionId, field, initFormValues, parserOptions); expect(parser instanceof DropdownFieldParser).toBe(true); }); it('should return a DynamicScrollableDropdownModel object when repeatable option is false', () => { - const parser = new DropdownFieldParser(field, initFormValues, parserOptions); + const parser = new DropdownFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -50,7 +51,7 @@ describe('DropdownFieldParser test suite', () => { it('should throw when authority is not passed', () => { field.selectableMetadata[0].authority = null; - const parser = new DropdownFieldParser(field, initFormValues, parserOptions); + const parser = new DropdownFieldParser(submissionId, field, initFormValues, parserOptions); expect(() => parser.parse()) .toThrow(); diff --git a/src/app/shared/form/builder/parsers/dropdown-field-parser.ts b/src/app/shared/form/builder/parsers/dropdown-field-parser.ts index 1623829b15..4816a2a073 100644 --- a/src/app/shared/form/builder/parsers/dropdown-field-parser.ts +++ b/src/app/shared/form/builder/parsers/dropdown-field-parser.ts @@ -1,4 +1,12 @@ -import { FieldParser } from './field-parser'; +import { Inject } from '@angular/core'; +import { FormFieldModel } from '../models/form-field.model'; +import { + CONFIG_DATA, + FieldParser, + INIT_FORM_VALUES, + PARSER_OPTIONS, + SUBMISSION_ID +} from './field-parser'; import { DynamicFormControlLayout, } from '@ng-dynamic-forms/core'; import { DynamicScrollableDropdownModel, @@ -6,9 +14,19 @@ import { } from '../ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.model'; import { isNotEmpty } from '../../../empty.util'; import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model'; +import { ParserOptions } from './parser-options'; export class DropdownFieldParser extends FieldParser { + constructor( + @Inject(SUBMISSION_ID) submissionId: string, + @Inject(CONFIG_DATA) configData: FormFieldModel, + @Inject(INIT_FORM_VALUES) initFormValues, + @Inject(PARSER_OPTIONS) parserOptions: ParserOptions + ) { + super(submissionId, configData, initFormValues, parserOptions) + } + public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean): any { const dropdownModelConfig: DynamicScrollableDropdownModelConfig = this.initModel(null, label); let layout: DynamicFormControlLayout; diff --git a/src/app/shared/form/builder/parsers/field-parser.ts b/src/app/shared/form/builder/parsers/field-parser.ts index dd37a45fba..83bdd14e9c 100644 --- a/src/app/shared/form/builder/parsers/field-parser.ts +++ b/src/app/shared/form/builder/parsers/field-parser.ts @@ -1,3 +1,4 @@ +import { Inject, InjectionToken } from '@angular/core'; import { hasValue, isNotEmpty, isNotNull, isNotUndefined } from '../../../empty.util'; import { FormFieldModel } from '../models/form-field.model'; @@ -13,12 +14,21 @@ import { setLayout } from './parser.utils'; import { AuthorityOptions } from '../../../../core/integration/models/authority-options.model'; import { ParserOptions } from './parser-options'; +export const SUBMISSION_ID: InjectionToken = new InjectionToken('submissionId'); +export const CONFIG_DATA: InjectionToken = new InjectionToken('configData'); +export const INIT_FORM_VALUES:InjectionToken = new InjectionToken('initFormValues'); +export const PARSER_OPTIONS: InjectionToken = new InjectionToken('parserOptions'); + export abstract class FieldParser { protected fieldId: string; - constructor(protected configData: FormFieldModel, protected initFormValues, protected parserOptions: ParserOptions) { - } + constructor( + @Inject(SUBMISSION_ID) protected submissionId: string, + @Inject(CONFIG_DATA) protected configData: FormFieldModel, + @Inject(INIT_FORM_VALUES) protected initFormValues: any, + @Inject(PARSER_OPTIONS) protected parserOptions: ParserOptions + ) {} public abstract modelFactory(fieldValue?: FormFieldMetadataValueObject, label?: boolean): any; diff --git a/src/app/shared/form/builder/parsers/list-field-parser.spec.ts b/src/app/shared/form/builder/parsers/list-field-parser.spec.ts index b2fa0b2089..fab5ec3888 100644 --- a/src/app/shared/form/builder/parsers/list-field-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/list-field-parser.spec.ts @@ -9,6 +9,7 @@ describe('ListFieldParser test suite', () => { let field: FormFieldModel; let initFormValues = {}; + const submissionId = '1234'; const parserOptions: ParserOptions = { readOnly: false, submissionScope: 'testScopeUUID', @@ -37,13 +38,13 @@ describe('ListFieldParser test suite', () => { }); it('should init parser properly', () => { - const parser = new ListFieldParser(field, initFormValues, parserOptions); + const parser = new ListFieldParser(submissionId, field, initFormValues, parserOptions); expect(parser instanceof ListFieldParser).toBe(true); }); it('should return a DynamicListCheckboxGroupModel object when repeatable option is true', () => { - const parser = new ListFieldParser(field, initFormValues, parserOptions); + const parser = new ListFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -52,7 +53,7 @@ describe('ListFieldParser test suite', () => { it('should return a DynamicListRadioGroupModel object when repeatable option is false', () => { field.repeatable = false; - const parser = new ListFieldParser(field, initFormValues, parserOptions); + const parser = new ListFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -65,7 +66,7 @@ describe('ListFieldParser test suite', () => { }; const expectedValue = [new FormFieldMetadataValueObject('test type')]; - const parser = new ListFieldParser(field, initFormValues, parserOptions); + const parser = new ListFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); diff --git a/src/app/shared/form/builder/parsers/lookup-field-parser.spec.ts b/src/app/shared/form/builder/parsers/lookup-field-parser.spec.ts index c45d39d5bb..5e14e0c013 100644 --- a/src/app/shared/form/builder/parsers/lookup-field-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/lookup-field-parser.spec.ts @@ -8,6 +8,7 @@ describe('LookupFieldParser test suite', () => { let field: FormFieldModel; let initFormValues = {}; + const submissionId = '1234'; const parserOptions: ParserOptions = { readOnly: false, submissionScope: 'testScopeUUID', @@ -36,13 +37,13 @@ describe('LookupFieldParser test suite', () => { }); it('should init parser properly', () => { - const parser = new LookupFieldParser(field, initFormValues, parserOptions); + const parser = new LookupFieldParser(submissionId, field, initFormValues, parserOptions); expect(parser instanceof LookupFieldParser).toBe(true); }); it('should return a DynamicLookupModel object when repeatable option is false', () => { - const parser = new LookupFieldParser(field, initFormValues, parserOptions); + const parser = new LookupFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -55,7 +56,7 @@ describe('LookupFieldParser test suite', () => { }; const expectedValue = new FormFieldMetadataValueObject('test journal'); - const parser = new LookupFieldParser(field, initFormValues, parserOptions); + const parser = new LookupFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); diff --git a/src/app/shared/form/builder/parsers/lookup-name-field-parser.spec.ts b/src/app/shared/form/builder/parsers/lookup-name-field-parser.spec.ts index b324ba7a7e..adc1e90166 100644 --- a/src/app/shared/form/builder/parsers/lookup-name-field-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/lookup-name-field-parser.spec.ts @@ -1,7 +1,5 @@ import { FormFieldModel } from '../models/form-field.model'; import { FormFieldMetadataValueObject } from '../models/form-field-metadata-value.model'; -import { LookupFieldParser } from './lookup-field-parser'; -import { DynamicLookupModel } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup.model'; import { LookupNameFieldParser } from './lookup-name-field-parser'; import { DynamicLookupNameModel } from '../ds-dynamic-form-ui/models/lookup/dynamic-lookup-name.model'; import { ParserOptions } from './parser-options'; @@ -10,6 +8,7 @@ describe('LookupNameFieldParser test suite', () => { let field: FormFieldModel; let initFormValues = {}; + const submissionId = '1234'; const parserOptions: ParserOptions = { readOnly: false, submissionScope: 'testScopeUUID', @@ -38,13 +37,13 @@ describe('LookupNameFieldParser test suite', () => { }); it('should init parser properly', () => { - const parser = new LookupNameFieldParser(field, initFormValues, parserOptions); + const parser = new LookupNameFieldParser(submissionId, field, initFormValues, parserOptions); expect(parser instanceof LookupNameFieldParser).toBe(true); }); it('should return a DynamicLookupNameModel object when repeatable option is false', () => { - const parser = new LookupNameFieldParser(field, initFormValues, parserOptions); + const parser = new LookupNameFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -57,7 +56,7 @@ describe('LookupNameFieldParser test suite', () => { }; const expectedValue = new FormFieldMetadataValueObject('test author'); - const parser = new LookupNameFieldParser(field, initFormValues, parserOptions); + const parser = new LookupNameFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); diff --git a/src/app/shared/form/builder/parsers/name-field-parser.spec.ts b/src/app/shared/form/builder/parsers/name-field-parser.spec.ts index 889244e8f2..1b0c637030 100644 --- a/src/app/shared/form/builder/parsers/name-field-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/name-field-parser.spec.ts @@ -10,6 +10,7 @@ describe('NameFieldParser test suite', () => { let field3: FormFieldModel; let initFormValues: any = {}; + const submissionId = '1234'; const parserOptions: ParserOptions = { readOnly: false, submissionScope: 'testScopeUUID', @@ -69,13 +70,13 @@ describe('NameFieldParser test suite', () => { }); it('should init parser properly', () => { - const parser = new NameFieldParser(field1, initFormValues, parserOptions); + const parser = new NameFieldParser(submissionId, field1, initFormValues, parserOptions); expect(parser instanceof NameFieldParser).toBe(true); }); it('should return a DynamicConcatModel object when repeatable option is false', () => { - const parser = new NameFieldParser(field2, initFormValues, parserOptions); + const parser = new NameFieldParser(submissionId, field2, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -83,7 +84,7 @@ describe('NameFieldParser test suite', () => { }); it('should return a DynamicConcatModel object with the correct separator', () => { - const parser = new NameFieldParser(field2, initFormValues, parserOptions); + const parser = new NameFieldParser(submissionId, field2, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -96,7 +97,7 @@ describe('NameFieldParser test suite', () => { }; const expectedValue = new FormFieldMetadataValueObject('test, name'); - const parser = new NameFieldParser(field1, initFormValues, parserOptions); + const parser = new NameFieldParser(submissionId, field1, initFormValues, parserOptions); const fieldModel = parser.parse(); diff --git a/src/app/shared/form/builder/parsers/name-field-parser.ts b/src/app/shared/form/builder/parsers/name-field-parser.ts index 896b3cc478..e5ecb034ea 100644 --- a/src/app/shared/form/builder/parsers/name-field-parser.ts +++ b/src/app/shared/form/builder/parsers/name-field-parser.ts @@ -1,10 +1,17 @@ +import { Inject } from '@angular/core'; import { FormFieldModel } from '../models/form-field.model'; import { ConcatFieldParser } from './concat-field-parser'; +import { CONFIG_DATA, INIT_FORM_VALUES, PARSER_OPTIONS, SUBMISSION_ID } from './field-parser'; import { ParserOptions } from './parser-options'; export class NameFieldParser extends ConcatFieldParser { - constructor(protected configData: FormFieldModel, protected initFormValues, protected parserOptions: ParserOptions) { - super(configData, initFormValues, parserOptions, ',', 'form.last-name', 'form.first-name'); + constructor( + @Inject(SUBMISSION_ID) submissionId: string, + @Inject(CONFIG_DATA) configData: FormFieldModel, + @Inject(INIT_FORM_VALUES) initFormValues, + @Inject(PARSER_OPTIONS) parserOptions: ParserOptions + ) { + super(submissionId, configData, initFormValues, parserOptions, ',', 'form.last-name', 'form.first-name'); } } diff --git a/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts b/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts index 89c576bf3a..4668b3017d 100644 --- a/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/onebox-field-parser.spec.ts @@ -10,6 +10,7 @@ describe('OneboxFieldParser test suite', () => { let field2: FormFieldModel; let field3: FormFieldModel; + const submissionId = '1234'; const initFormValues = {}; const parserOptions: ParserOptions = { readOnly: false, @@ -70,13 +71,13 @@ describe('OneboxFieldParser test suite', () => { }); it('should init parser properly', () => { - const parser = new OneboxFieldParser(field1, initFormValues, parserOptions); + const parser = new OneboxFieldParser(submissionId, field1, initFormValues, parserOptions); expect(parser instanceof OneboxFieldParser).toBe(true); }); it('should return a DynamicQualdropModel object when selectableMetadata is multiple', () => { - const parser = new OneboxFieldParser(field2, initFormValues, parserOptions); + const parser = new OneboxFieldParser(submissionId, field2, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -84,7 +85,7 @@ describe('OneboxFieldParser test suite', () => { }); it('should return a DsDynamicInputModel object when selectableMetadata is not multiple', () => { - const parser = new OneboxFieldParser(field3, initFormValues, parserOptions); + const parser = new OneboxFieldParser(submissionId, field3, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -92,7 +93,7 @@ describe('OneboxFieldParser test suite', () => { }); it('should return a DynamicTypeaheadModel object when selectableMetadata has authority', () => { - const parser = new OneboxFieldParser(field1, initFormValues, parserOptions); + const parser = new OneboxFieldParser(submissionId, field1, initFormValues, parserOptions); const fieldModel = parser.parse(); diff --git a/src/app/shared/form/builder/parsers/parser-factory.ts b/src/app/shared/form/builder/parsers/parser-factory.ts index 2cbee18783..67d8f31740 100644 --- a/src/app/shared/form/builder/parsers/parser-factory.ts +++ b/src/app/shared/form/builder/parsers/parser-factory.ts @@ -1,6 +1,12 @@ +import { StaticProvider } from '@angular/core'; import { ParserType } from './parser-type'; -import { GenericConstructor } from '../../../../core/shared/generic-constructor'; -import { FieldParser } from './field-parser'; +import { + CONFIG_DATA, + FieldParser, + INIT_FORM_VALUES, + PARSER_OPTIONS, + SUBMISSION_ID +} from './field-parser'; import { DateFieldParser } from './date-field-parser'; import { DropdownFieldParser } from './dropdown-field-parser'; import { RelationGroupFieldParser } from './relation-group-field-parser'; @@ -13,41 +19,92 @@ import { SeriesFieldParser } from './series-field-parser'; import { TagFieldParser } from './tag-field-parser'; import { TextareaFieldParser } from './textarea-field-parser'; +const fieldParserDeps = [ + SUBMISSION_ID, + CONFIG_DATA, + INIT_FORM_VALUES, + PARSER_OPTIONS, +]; + export class ParserFactory { - public static getConstructor(type: ParserType): GenericConstructor { + public static getProvider(type: ParserType): StaticProvider { switch (type) { case ParserType.Date: { - return DateFieldParser + return { + provide: FieldParser, + useClass: DateFieldParser, + deps: [...fieldParserDeps] + } } case ParserType.Dropdown: { - return DropdownFieldParser + return { + provide: FieldParser, + useClass: DropdownFieldParser, + deps: [...fieldParserDeps] + } } case ParserType.RelationGroup: { - return RelationGroupFieldParser + return { + provide: FieldParser, + useClass: RelationGroupFieldParser, + deps: [...fieldParserDeps] + } } case ParserType.List: { - return ListFieldParser + return { + provide: FieldParser, + useClass: ListFieldParser, + deps: [...fieldParserDeps] + } } case ParserType.Lookup: { - return LookupFieldParser + return { + provide: FieldParser, + useClass: LookupFieldParser, + deps: [...fieldParserDeps] + } } case ParserType.LookupName: { - return LookupNameFieldParser + return { + provide: FieldParser, + useClass: LookupNameFieldParser, + deps: [...fieldParserDeps] + } } case ParserType.Onebox: { - return OneboxFieldParser + return { + provide: FieldParser, + useClass: OneboxFieldParser, + deps: [...fieldParserDeps] + } } case ParserType.Name: { - return NameFieldParser + return { + provide: FieldParser, + useClass: NameFieldParser, + deps: [...fieldParserDeps] + } } case ParserType.Series: { - return SeriesFieldParser + return { + provide: FieldParser, + useClass: SeriesFieldParser, + deps: [...fieldParserDeps] + } } case ParserType.Tag: { - return TagFieldParser + return { + provide: FieldParser, + useClass: TagFieldParser, + deps: [...fieldParserDeps] + } } case ParserType.Textarea: { - return TextareaFieldParser + return { + provide: FieldParser, + useClass: TextareaFieldParser, + deps: [...fieldParserDeps] + } } default: { diff --git a/src/app/shared/form/builder/parsers/relation-group-field-parser.spec.ts b/src/app/shared/form/builder/parsers/relation-group-field-parser.spec.ts index e6bf0dc2c8..84f3df0365 100644 --- a/src/app/shared/form/builder/parsers/relation-group-field-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/relation-group-field-parser.spec.ts @@ -8,6 +8,7 @@ describe('RelationGroupFieldParser test suite', () => { let field: FormFieldModel; let initFormValues = {}; + const submissionId = '1234'; const parserOptions: ParserOptions = { readOnly: false, submissionScope: 'testScopeUUID', @@ -71,13 +72,13 @@ describe('RelationGroupFieldParser test suite', () => { }); it('should init parser properly', () => { - const parser = new RelationGroupFieldParser(field, initFormValues, parserOptions); + const parser = new RelationGroupFieldParser(submissionId, field, initFormValues, parserOptions); expect(parser instanceof RelationGroupFieldParser).toBe(true); }); it('should return a DynamicRelationGroupModel object', () => { - const parser = new RelationGroupFieldParser(field, initFormValues, parserOptions); + const parser = new RelationGroupFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -86,7 +87,7 @@ describe('RelationGroupFieldParser test suite', () => { it('should throw when rows configuration is empty', () => { field.rows = null; - const parser = new RelationGroupFieldParser(field, initFormValues, parserOptions); + const parser = new RelationGroupFieldParser(submissionId, field, initFormValues, parserOptions); expect(() => parser.parse()) .toThrow(); @@ -97,7 +98,7 @@ describe('RelationGroupFieldParser test suite', () => { author: [new FormFieldMetadataValueObject('test author')], affiliation: [new FormFieldMetadataValueObject('test affiliation')] }; - const parser = new RelationGroupFieldParser(field, initFormValues, parserOptions); + const parser = new RelationGroupFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); const expectedValue = [{ diff --git a/src/app/shared/form/builder/parsers/relation-group-field-parser.ts b/src/app/shared/form/builder/parsers/relation-group-field-parser.ts index b3f6e749f3..01699d9e78 100644 --- a/src/app/shared/form/builder/parsers/relation-group-field-parser.ts +++ b/src/app/shared/form/builder/parsers/relation-group-field-parser.ts @@ -15,6 +15,7 @@ export class RelationGroupFieldParser extends FieldParser { public modelFactory(fieldValue?: FormFieldMetadataValueObject | any, label?: boolean) { const modelConfiguration: DynamicRelationGroupModelConfig = this.initModel(null, label); + modelConfiguration.submissionId = this.submissionId; modelConfiguration.scopeUUID = this.parserOptions.authorityUuid; modelConfiguration.submissionScope = this.parserOptions.submissionScope; if (this.configData && this.configData.rows && this.configData.rows.length > 0) { diff --git a/src/app/shared/form/builder/parsers/row-parser.spec.ts b/src/app/shared/form/builder/parsers/row-parser.spec.ts index 58b1d1de99..435c6a6426 100644 --- a/src/app/shared/form/builder/parsers/row-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/row-parser.spec.ts @@ -17,6 +17,7 @@ describe('RowParser test suite', () => { let row9: FormRowModel; let row10: FormRowModel; + const submissionId = '1234'; const scopeUUID = 'testScopeUUID'; const initFormValues = {}; const submissionScope = 'WORKSPACE'; @@ -328,76 +329,98 @@ describe('RowParser test suite', () => { }); it('should init parser properly', () => { - let parser = new RowParser(row1, scopeUUID, initFormValues, submissionScope, readOnly); - - expect(parser instanceof RowParser).toBe(true); - - parser = new RowParser(row2, scopeUUID, initFormValues, submissionScope, readOnly); - - expect(parser instanceof RowParser).toBe(true); - - parser = new RowParser(row3, scopeUUID, initFormValues, submissionScope, readOnly); - - expect(parser instanceof RowParser).toBe(true); - - parser = new RowParser(row4, scopeUUID, initFormValues, submissionScope, readOnly); - - expect(parser instanceof RowParser).toBe(true); - - parser = new RowParser(row5, scopeUUID, initFormValues, submissionScope, readOnly); - - expect(parser instanceof RowParser).toBe(true); - - parser = new RowParser(row6, scopeUUID, initFormValues, submissionScope, readOnly); - - expect(parser instanceof RowParser).toBe(true); - - parser = new RowParser(row7, scopeUUID, initFormValues, submissionScope, readOnly); - - expect(parser instanceof RowParser).toBe(true); - - parser = new RowParser(row8, scopeUUID, initFormValues, submissionScope, readOnly); - - expect(parser instanceof RowParser).toBe(true); - - parser = new RowParser(row9, scopeUUID, initFormValues, submissionScope, readOnly); - - expect(parser instanceof RowParser).toBe(true); - - parser = new RowParser(row10, scopeUUID, initFormValues, submissionScope, readOnly); + const parser = new RowParser(undefined); expect(parser instanceof RowParser).toBe(true); }); - it('should return a DynamicRowGroupModel object', () => { - const parser = new RowParser(row1, scopeUUID, initFormValues, submissionScope, readOnly); + describe('parse', () => { + it('should return a DynamicRowGroupModel object', () => { + const parser = new RowParser(undefined); - const rowModel = parser.parse(); + const rowModel = parser.parse(submissionId, row1, scopeUUID, initFormValues, submissionScope, readOnly); - expect(rowModel instanceof DynamicRowGroupModel).toBe(true); - }); + expect(rowModel instanceof DynamicRowGroupModel).toBe(true); + }); - it('should return a row with three fields', () => { - const parser = new RowParser(row1, scopeUUID, initFormValues, submissionScope, readOnly); + it('should return a row with three fields', () => { + const parser = new RowParser(undefined); - const rowModel = parser.parse(); + const rowModel = parser.parse(submissionId, row1, scopeUUID, initFormValues, submissionScope, readOnly); - expect((rowModel as DynamicRowGroupModel).group.length).toBe(3); - }); + expect((rowModel as DynamicRowGroupModel).group.length).toBe(3); + }); - it('should return a DynamicRowArrayModel object', () => { - const parser = new RowParser(row2, scopeUUID, initFormValues, submissionScope, readOnly); + it('should return a DynamicRowArrayModel object', () => { + const parser = new RowParser(undefined); - const rowModel = parser.parse(); + const rowModel = parser.parse(submissionId, row2, scopeUUID, initFormValues, submissionScope, readOnly); - expect(rowModel instanceof DynamicRowArrayModel).toBe(true); - }); + expect(rowModel instanceof DynamicRowArrayModel).toBe(true); + }); - it('should return a row that contains only scoped fields', () => { - const parser = new RowParser(row3, scopeUUID, initFormValues, submissionScope, readOnly); + it('should return a row that contains only scoped fields', () => { + const parser = new RowParser(undefined); - const rowModel = parser.parse(); + const rowModel = parser.parse(submissionId, row3, scopeUUID, initFormValues, submissionScope, readOnly); - expect((rowModel as DynamicRowGroupModel).group.length).toBe(1); + expect((rowModel as DynamicRowGroupModel).group.length).toBe(1); + }); + + it('should be able to parse a dropdown combo field', () => { + const parser = new RowParser(undefined); + + const rowModel = parser.parse(submissionId, row4, scopeUUID, initFormValues, submissionScope, readOnly); + + expect(rowModel).toBeDefined(); + }); + + it('should be able to parse a lookup-name field', () => { + const parser = new RowParser(undefined); + + const rowModel = parser.parse(submissionId, row5, scopeUUID, initFormValues, submissionScope, readOnly); + + expect(rowModel).toBeDefined(); + }); + + it('should be able to parse a list field', () => { + const parser = new RowParser(undefined); + + const rowModel = parser.parse(submissionId, row6, scopeUUID, initFormValues, submissionScope, readOnly); + + expect(rowModel).toBeDefined(); + }); + + it('should be able to parse a date field', () => { + const parser = new RowParser(undefined); + + const rowModel = parser.parse(submissionId, row7, scopeUUID, initFormValues, submissionScope, readOnly); + + expect(rowModel).toBeDefined(); + }); + + it('should be able to parse a tag field', () => { + const parser = new RowParser(undefined); + + const rowModel = parser.parse(submissionId, row8, scopeUUID, initFormValues, submissionScope, readOnly); + + expect(rowModel).toBeDefined(); + }); + + it('should be able to parse a textarea field', () => { + const parser = new RowParser(undefined); + + const rowModel = parser.parse(submissionId, row9, scopeUUID, initFormValues, submissionScope, readOnly); + + expect(rowModel).toBeDefined(); + }); + + it('should be able to parse a group field', () => { + const parser = new RowParser(undefined); + + const rowModel = parser.parse(submissionId, row10, scopeUUID, initFormValues, submissionScope, readOnly); + + expect(rowModel).toBeDefined(); + }); }); }); diff --git a/src/app/shared/form/builder/parsers/row-parser.ts b/src/app/shared/form/builder/parsers/row-parser.ts index 0bb8a0e89a..72737cfaa9 100644 --- a/src/app/shared/form/builder/parsers/row-parser.ts +++ b/src/app/shared/form/builder/parsers/row-parser.ts @@ -1,30 +1,42 @@ -import { DYNAMIC_FORM_CONTROL_TYPE_ARRAY, DynamicFormGroupModelConfig } from '@ng-dynamic-forms/core'; +import { Injectable, Injector } from '@angular/core'; +import { + DYNAMIC_FORM_CONTROL_TYPE_ARRAY, + DynamicFormGroupModelConfig +} from '@ng-dynamic-forms/core'; import { uniqueId } from 'lodash'; import { IntegrationSearchOptions } from '../../../../core/integration/models/integration-options.model'; -import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from '../ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model'; -import { DynamicRowGroupModel } from '../ds-dynamic-form-ui/models/ds-dynamic-row-group-model'; import { isEmpty } from '../../../empty.util'; -import { setLayout } from './parser.utils'; +import { DynamicRowGroupModel } from '../ds-dynamic-form-ui/models/ds-dynamic-row-group-model'; +import { DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP } from '../ds-dynamic-form-ui/models/relation-group/dynamic-relation-group.model'; import { FormFieldModel } from '../models/form-field.model'; -import { ParserType } from './parser-type'; -import { ParserOptions } from './parser-options'; +import { + CONFIG_DATA, + FieldParser, + INIT_FORM_VALUES, + PARSER_OPTIONS, + SUBMISSION_ID +} from './field-parser'; import { ParserFactory } from './parser-factory'; +import { ParserOptions } from './parser-options'; +import { ParserType } from './parser-type'; +import { setLayout } from './parser.utils'; export const ROW_ID_PREFIX = 'df-row-group-config-'; +@Injectable({ + providedIn: 'root' +}) export class RowParser { - protected authorityOptions: IntegrationSearchOptions; - - constructor(protected rowData, - protected scopeUUID, - protected initFormValues: any, - protected submissionScope, - protected readOnly: boolean) { - this.authorityOptions = new IntegrationSearchOptions(scopeUUID); + constructor(private parentInjector: Injector) { } - public parse(): DynamicRowGroupModel { + public parse(submissionId: string, + rowData, + scopeUUID, + initFormValues: any, + submissionScope, + readOnly: boolean): DynamicRowGroupModel { let fieldModel: any = null; let parsedResult = null; const config: DynamicFormGroupModelConfig = { @@ -32,31 +44,44 @@ export class RowParser { group: [], }; - const scopedFields: FormFieldModel[] = this.filterScopedFields(this.rowData.fields); + const authorityOptions = new IntegrationSearchOptions(scopeUUID); + + const scopedFields: FormFieldModel[] = this.filterScopedFields(rowData.fields, submissionScope); const layoutDefaultGridClass = ' col-sm-' + Math.trunc(12 / scopedFields.length); const layoutClass = ' d-flex flex-column justify-content-start'; const parserOptions: ParserOptions = { - readOnly: this.readOnly, - submissionScope: this.submissionScope, - authorityUuid: this.authorityOptions.uuid + readOnly: readOnly, + submissionScope: submissionScope, + authorityUuid: authorityOptions.uuid }; // Iterate over row's fields scopedFields.forEach((fieldData: FormFieldModel) => { const layoutFieldClass = (fieldData.style || layoutDefaultGridClass) + layoutClass; - const parserCo = ParserFactory.getConstructor(fieldData.input.type as ParserType); - if (parserCo) { - fieldModel = new parserCo(fieldData, this.initFormValues, parserOptions).parse(); + const parserProvider = ParserFactory.getProvider(fieldData.input.type as ParserType); + if (parserProvider) { + const fieldInjector = Injector.create({ + providers: [ + parserProvider, + { provide: SUBMISSION_ID, useValue: submissionId }, + { provide: CONFIG_DATA, useValue: fieldData }, + { provide: INIT_FORM_VALUES, useValue: initFormValues }, + { provide: PARSER_OPTIONS, useValue: parserOptions } + ], + parent: this.parentInjector + }); + + fieldModel = fieldInjector.get(FieldParser).parse(); } else { - throw new Error(`unknown form control model type "${fieldData.input.type}" defined for Input field with label "${fieldData.label}".`, ); + throw new Error(`unknown form control model type "${fieldData.input.type}" defined for Input field with label "${fieldData.label}".`,); } if (fieldModel) { if (fieldModel.type === DYNAMIC_FORM_CONTROL_TYPE_ARRAY || fieldModel.type === DYNAMIC_FORM_CONTROL_TYPE_RELATION_GROUP) { - if (this.rowData.fields.length > 1) { + if (rowData.fields.length > 1) { setLayout(fieldModel, 'grid', 'host', layoutFieldClass); config.group.push(fieldModel); // if (isEmpty(parsedResult)) { @@ -98,15 +123,15 @@ export class RowParser { return parsedResult; } - checksFieldScope(fieldScope) { - return (isEmpty(fieldScope) || isEmpty(this.submissionScope) || fieldScope === this.submissionScope); + checksFieldScope(fieldScope, submissionScope) { + return (isEmpty(fieldScope) || isEmpty(submissionScope) || fieldScope === submissionScope); } - filterScopedFields(fields: FormFieldModel[]): FormFieldModel[] { + filterScopedFields(fields: FormFieldModel[], submissionScope): FormFieldModel[] { const filteredFields: FormFieldModel[] = []; fields.forEach((field: FormFieldModel) => { // Whether field scope doesn't match the submission scope, skip it - if (this.checksFieldScope(field.scope)) { + if (this.checksFieldScope(field.scope, submissionScope)) { filteredFields.push(field); } }); diff --git a/src/app/shared/form/builder/parsers/series-field-parser.spec.ts b/src/app/shared/form/builder/parsers/series-field-parser.spec.ts index 95351d027f..ceb4e96320 100644 --- a/src/app/shared/form/builder/parsers/series-field-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/series-field-parser.spec.ts @@ -8,6 +8,7 @@ describe('SeriesFieldParser test suite', () => { let field: FormFieldModel; let initFormValues: any = {}; + const submissionId = '1234'; const parserOptions: ParserOptions = { readOnly: false, submissionScope: 'testScopeUUID', @@ -32,13 +33,13 @@ describe('SeriesFieldParser test suite', () => { }); it('should init parser properly', () => { - const parser = new SeriesFieldParser(field, initFormValues, parserOptions); + const parser = new SeriesFieldParser(submissionId, field, initFormValues, parserOptions); expect(parser instanceof SeriesFieldParser).toBe(true); }); it('should return a DynamicConcatModel object when repeatable option is false', () => { - const parser = new SeriesFieldParser(field, initFormValues, parserOptions); + const parser = new SeriesFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -46,7 +47,7 @@ describe('SeriesFieldParser test suite', () => { }); it('should return a DynamicConcatModel object with the correct separator', () => { - const parser = new SeriesFieldParser(field, initFormValues, parserOptions); + const parser = new SeriesFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -59,7 +60,7 @@ describe('SeriesFieldParser test suite', () => { }; const expectedValue = new FormFieldMetadataValueObject('test; series'); - const parser = new SeriesFieldParser(field, initFormValues, parserOptions); + const parser = new SeriesFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); diff --git a/src/app/shared/form/builder/parsers/series-field-parser.ts b/src/app/shared/form/builder/parsers/series-field-parser.ts index 9857b4e993..36ee9c36c1 100644 --- a/src/app/shared/form/builder/parsers/series-field-parser.ts +++ b/src/app/shared/form/builder/parsers/series-field-parser.ts @@ -1,10 +1,17 @@ +import { Inject } from '@angular/core'; import { FormFieldModel } from '../models/form-field.model'; import { ConcatFieldParser } from './concat-field-parser'; +import { CONFIG_DATA, INIT_FORM_VALUES, PARSER_OPTIONS, SUBMISSION_ID } from './field-parser'; import { ParserOptions } from './parser-options'; export class SeriesFieldParser extends ConcatFieldParser { - constructor(protected configData: FormFieldModel, protected initFormValues, protected parserOptions: ParserOptions) { - super(configData, initFormValues, parserOptions, ';'); + constructor( + @Inject(SUBMISSION_ID) submissionId: string, + @Inject(CONFIG_DATA) configData: FormFieldModel, + @Inject(INIT_FORM_VALUES) initFormValues, + @Inject(PARSER_OPTIONS) parserOptions: ParserOptions + ) { + super(submissionId, configData, initFormValues, parserOptions, ';'); } } diff --git a/src/app/shared/form/builder/parsers/tag-field-parser.spec.ts b/src/app/shared/form/builder/parsers/tag-field-parser.spec.ts index 3051dc6395..90449e62e5 100644 --- a/src/app/shared/form/builder/parsers/tag-field-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/tag-field-parser.spec.ts @@ -8,6 +8,7 @@ describe('TagFieldParser test suite', () => { let field: FormFieldModel; let initFormValues: any = {}; + const submissionId = '1234'; const parserOptions: ParserOptions = { readOnly: false, submissionScope: 'testScopeUUID', @@ -36,13 +37,13 @@ describe('TagFieldParser test suite', () => { }); it('should init parser properly', () => { - const parser = new TagFieldParser(field, initFormValues, parserOptions); + const parser = new TagFieldParser(submissionId, field, initFormValues, parserOptions); expect(parser instanceof TagFieldParser).toBe(true); }); it('should return a DynamicTagModel object when repeatable option is false', () => { - const parser = new TagFieldParser(field, initFormValues, parserOptions); + const parser = new TagFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -57,7 +58,7 @@ describe('TagFieldParser test suite', () => { ], }; - const parser = new TagFieldParser(field, initFormValues, parserOptions); + const parser = new TagFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); diff --git a/src/app/shared/form/builder/parsers/textarea-field-parser.spec.ts b/src/app/shared/form/builder/parsers/textarea-field-parser.spec.ts index c26d758e48..167f126cf2 100644 --- a/src/app/shared/form/builder/parsers/textarea-field-parser.spec.ts +++ b/src/app/shared/form/builder/parsers/textarea-field-parser.spec.ts @@ -8,6 +8,7 @@ describe('TextareaFieldParser test suite', () => { let field: FormFieldModel; let initFormValues: any = {}; + const submissionId = '1234'; const parserOptions: ParserOptions = { readOnly: false, submissionScope: null, @@ -34,13 +35,13 @@ describe('TextareaFieldParser test suite', () => { }); it('should init parser properly', () => { - const parser = new TextareaFieldParser(field, initFormValues, parserOptions); + const parser = new TextareaFieldParser(submissionId, field, initFormValues, parserOptions); expect(parser instanceof TextareaFieldParser).toBe(true); }); it('should return a DsDynamicTextAreaModel object when repeatable option is false', () => { - const parser = new TextareaFieldParser(field, initFormValues, parserOptions); + const parser = new TextareaFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); @@ -55,7 +56,7 @@ describe('TextareaFieldParser test suite', () => { }; const expectedValue ='test description'; - const parser = new TextareaFieldParser(field, initFormValues, parserOptions); + const parser = new TextareaFieldParser(submissionId, field, initFormValues, parserOptions); const fieldModel = parser.parse(); diff --git a/src/app/shared/mocks/mock-angulartics.service.ts b/src/app/shared/mocks/mock-angulartics.service.ts index 99a8b96b22..5581e183d1 100644 --- a/src/app/shared/mocks/mock-angulartics.service.ts +++ b/src/app/shared/mocks/mock-angulartics.service.ts @@ -1,4 +1,5 @@ /* tslint:disable:no-empty */ export class AngularticsMock { public eventTrack(action, properties) { } + public startTracking():void {} } diff --git a/src/app/shared/mocks/mock-form-models.ts b/src/app/shared/mocks/mock-form-models.ts index f2fc38c420..74f1581814 100644 --- a/src/app/shared/mocks/mock-form-models.ts +++ b/src/app/shared/mocks/mock-form-models.ts @@ -115,6 +115,7 @@ const mockFormRowModel = { } as FormRowModel; const relationGroupConfig = { + submissionId: '1234', id: 'relationGroup', formConfiguration: [mockFormRowModel], mandatoryField: 'false', diff --git a/src/app/shared/mocks/mock-request.service.ts b/src/app/shared/mocks/mock-request.service.ts index 9a320b749c..9d7f2baeab 100644 --- a/src/app/shared/mocks/mock-request.service.ts +++ b/src/app/shared/mocks/mock-request.service.ts @@ -1,8 +1,9 @@ import {of as observableOf, Observable } from 'rxjs'; import { RequestService } from '../../core/data/request.service'; import { RequestEntry } from '../../core/data/request.reducer'; +import SpyObj = jasmine.SpyObj; -export function getMockRequestService(requestEntry$: Observable = observableOf(new RequestEntry())): RequestService { +export function getMockRequestService(requestEntry$: Observable = observableOf(new RequestEntry())): SpyObj { return jasmine.createSpyObj('requestService', { configure: false, generateRequestId: 'clients/b186e8ce-e99c-4183-bc9a-42b4821bdb78', diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index cce01012e5..68a9049cb5 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -145,6 +145,10 @@ import { ListableObjectDirective } from './object-collection/shared/listable-obj import { CommunitySearchResultGridElementComponent } from './object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component'; import { CollectionSearchResultGridElementComponent } from './object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component'; import { ItemMetadataRepresentationListElementComponent } from './object-list/metadata-representation-list-element/item/item-metadata-representation-list-element.component'; +import { PageWithSidebarComponent } from './sidebar/page-with-sidebar.component'; +import { SidebarDropdownComponent } from './sidebar/sidebar-dropdown.component'; +import { SidebarFilterComponent } from './sidebar/filter/sidebar-filter.component'; +import { SidebarFilterSelectedOptionComponent } from './sidebar/filter/sidebar-filter-selected-option.component'; const MODULES = [ // Do NOT include UniversalModule, HttpModule, or JsonpModule here @@ -228,6 +232,10 @@ const COMPONENTS = [ ObjectCollectionComponent, PaginationComponent, SearchFormComponent, + PageWithSidebarComponent, + SidebarDropdownComponent, + SidebarFilterComponent, + SidebarFilterSelectedOptionComponent, ThumbnailComponent, GridThumbnailComponent, UploaderComponent, diff --git a/src/app/shared/sidebar/filter/sidebar-filter-selected-option.component.html b/src/app/shared/sidebar/filter/sidebar-filter-selected-option.component.html new file mode 100644 index 0000000000..bbe0b93566 --- /dev/null +++ b/src/app/shared/sidebar/filter/sidebar-filter-selected-option.component.html @@ -0,0 +1,6 @@ + + + diff --git a/src/app/shared/sidebar/filter/sidebar-filter-selected-option.component.scss b/src/app/shared/sidebar/filter/sidebar-filter-selected-option.component.scss new file mode 100644 index 0000000000..b4e9cd340c --- /dev/null +++ b/src/app/shared/sidebar/filter/sidebar-filter-selected-option.component.scss @@ -0,0 +1,11 @@ +a { + color: $body-color; + + &:hover, &focus { + text-decoration: none; + } + + span.badge { + vertical-align: text-top; + } +} diff --git a/src/app/shared/sidebar/filter/sidebar-filter-selected-option.component.ts b/src/app/shared/sidebar/filter/sidebar-filter-selected-option.component.ts new file mode 100644 index 0000000000..5c80a9cd87 --- /dev/null +++ b/src/app/shared/sidebar/filter/sidebar-filter-selected-option.component.ts @@ -0,0 +1,15 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +@Component({ + selector: 'ds-sidebar-filter-selected-option', + styleUrls: ['./sidebar-filter-selected-option.component.scss'], + templateUrl: './sidebar-filter-selected-option.component.html', +}) + +/** + * Represents a single selected option in a sidebar filter + */ +export class SidebarFilterSelectedOptionComponent { + @Input() label:string; + @Output() click:EventEmitter = new EventEmitter(); +} diff --git a/src/app/shared/sidebar/filter/sidebar-filter.actions.ts b/src/app/shared/sidebar/filter/sidebar-filter.actions.ts new file mode 100644 index 0000000000..2391274489 --- /dev/null +++ b/src/app/shared/sidebar/filter/sidebar-filter.actions.ts @@ -0,0 +1,74 @@ +import { Action } from '@ngrx/store'; + +import { type } from '../../ngrx/type'; + +/** + * For each action type in an action group, make a simple + * enum object for all of this group's action types. + * + * The 'type' utility function coerces strings into string + * literal types and runs a simple check to guarantee all + * action types in the application are unique. + */ +export const SidebarFilterActionTypes = { + INITIALIZE: type('dspace/sidebar-filter/INITIALIZE'), + COLLAPSE: type('dspace/sidebar-filter/COLLAPSE'), + EXPAND: type('dspace/sidebar-filter/EXPAND'), + TOGGLE: type('dspace/sidebar-filter/TOGGLE'), +}; + +export class SidebarFilterAction implements Action { + /** + * Name of the filter the action is performed on, used to identify the filter + */ + filterName: string; + + /** + * Type of action that will be performed + */ + type; + + /** + * Initialize with the filter's name + * @param {string} name of the filter + */ + constructor(name: string) { + this.filterName = name; + } +} + +/* tslint:disable:max-classes-per-file */ +/** + * Used to initialize a filter + */ +export class FilterInitializeAction extends SidebarFilterAction { + type = SidebarFilterActionTypes.INITIALIZE; + initiallyExpanded; + + constructor(name:string, initiallyExpanded:boolean) { + super(name); + this.initiallyExpanded = initiallyExpanded; + } +} + +/** + * Used to collapse a filter + */ +export class FilterCollapseAction extends SidebarFilterAction { + type = SidebarFilterActionTypes.COLLAPSE; +} + +/** + * Used to expand a filter + */ +export class FilterExpandAction extends SidebarFilterAction { + type = SidebarFilterActionTypes.EXPAND; +} + +/** + * Used to collapse a filter when it's expanded and expand it when it's collapsed + */ +export class FilterToggleAction extends SidebarFilterAction { + type = SidebarFilterActionTypes.TOGGLE; +} +/* tslint:enable:max-classes-per-file */ diff --git a/src/app/shared/sidebar/filter/sidebar-filter.component.html b/src/app/shared/sidebar/filter/sidebar-filter.component.html new file mode 100644 index 0000000000..bd392aa715 --- /dev/null +++ b/src/app/shared/sidebar/filter/sidebar-filter.component.html @@ -0,0 +1,26 @@ +
+
+
+ {{ label | translate }} +
+ + +
+
+
+
+ + + + +
+ +
+
+
diff --git a/src/app/shared/sidebar/filter/sidebar-filter.component.scss b/src/app/shared/sidebar/filter/sidebar-filter.component.scss new file mode 100644 index 0000000000..68949f3450 --- /dev/null +++ b/src/app/shared/sidebar/filter/sidebar-filter.component.scss @@ -0,0 +1,12 @@ +:host .facet-filter { + border: 1px solid map-get($theme-colors, light); + cursor: pointer; + + .sidebar-filter-wrapper.closed { + overflow: hidden; + } + + .filter-toggle { + line-height: $line-height-base; + } +} diff --git a/src/app/shared/sidebar/filter/sidebar-filter.component.ts b/src/app/shared/sidebar/filter/sidebar-filter.component.ts new file mode 100644 index 0000000000..2a98565639 --- /dev/null +++ b/src/app/shared/sidebar/filter/sidebar-filter.component.ts @@ -0,0 +1,89 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Observable } from 'rxjs'; +import { SidebarFilterService } from './sidebar-filter.service'; +import { slide } from '../../animations/slide'; + +@Component({ + selector: 'ds-sidebar-filter', + styleUrls: ['./sidebar-filter.component.scss'], + templateUrl: './sidebar-filter.component.html', + animations: [slide], +}) +/** + * This components renders a sidebar filter including the label and the selected values. + * The filter input itself should still be provided in the content. + */ +export class SidebarFilterComponent implements OnInit { + + @Input() name:string; + @Input() type:string; + @Input() label:string; + @Input() expanded = true; + @Input() singleValue = false; + @Input() selectedValues:Observable; + @Output() removeValue:EventEmitter = new EventEmitter(); + + /** + * True when the filter is 100% collapsed in the UI + */ + closed = true; + + /** + * Emits true when the filter is currently collapsed in the store + */ + collapsed$:Observable; + + constructor( + protected filterService:SidebarFilterService, + ) { + } + + /** + * Changes the state for this filter to collapsed when it's expanded and to expanded it when it's collapsed + */ + toggle() { + this.filterService.toggle(this.name); + } + + /** + * Method to change this.collapsed to false when the slide animation ends and is sliding open + * @param event The animation event + */ + finishSlide(event:any):void { + if (event.fromState === 'collapsed') { + this.closed = false; + } + } + + /** + * Method to change this.collapsed to true when the slide animation starts and is sliding closed + * @param event The animation event + */ + startSlide(event:any):void { + if (event.toState === 'collapsed') { + this.closed = true; + } + } + + ngOnInit():void { + this.closed = !this.expanded; + this.initializeFilter(); + this.collapsed$ = this.isCollapsed(); + } + + /** + * Sets the initial state of the filter + */ + initializeFilter() { + this.filterService.initializeFilter(this.name, this.expanded); + } + + /** + * Checks if the filter is currently collapsed + * @returns {Observable} Emits true when the current state of the filter is collapsed, false when it's expanded + */ + private isCollapsed():Observable { + return this.filterService.isCollapsed(this.name); + } + +} diff --git a/src/app/shared/sidebar/filter/sidebar-filter.reducer.ts b/src/app/shared/sidebar/filter/sidebar-filter.reducer.ts new file mode 100644 index 0000000000..d25737eaa9 --- /dev/null +++ b/src/app/shared/sidebar/filter/sidebar-filter.reducer.ts @@ -0,0 +1,70 @@ +import { + FilterInitializeAction, + SidebarFilterAction, + SidebarFilterActionTypes +} from './sidebar-filter.actions'; + +/** + * Interface that represents the state for a single filters + */ +export interface SidebarFilterState { + filterCollapsed:boolean, +} + +/** + * Interface that represents the state for all available filters + */ +export interface SidebarFiltersState { + [name:string]:SidebarFilterState +} + +const initialState:SidebarFiltersState = Object.create(null); + +/** + * Performs a filter action on the current state + * @param {SidebarFiltersState} state The state before the action is performed + * @param {SidebarFilterAction} action The action that should be performed + * @returns {SidebarFiltersState} The state after the action is performed + */ +export function sidebarFilterReducer(state = initialState, action:SidebarFilterAction):SidebarFiltersState { + + switch (action.type) { + + case SidebarFilterActionTypes.INITIALIZE: { + const initAction = (action as FilterInitializeAction); + return Object.assign({}, state, { + [action.filterName]: { + filterCollapsed: !initAction.initiallyExpanded, + } + }); + } + + case SidebarFilterActionTypes.COLLAPSE: { + return Object.assign({}, state, { + [action.filterName]: { + filterCollapsed: true, + } + }); + } + + case SidebarFilterActionTypes.EXPAND: { + return Object.assign({}, state, { + [action.filterName]: { + filterCollapsed: false, + } + }); + } + + case SidebarFilterActionTypes.TOGGLE: { + return Object.assign({}, state, { + [action.filterName]: { + filterCollapsed: !state[action.filterName].filterCollapsed, + } + }); + } + + default: { + return state; + } + } +} diff --git a/src/app/shared/sidebar/filter/sidebar-filter.service.ts b/src/app/shared/sidebar/filter/sidebar-filter.service.ts new file mode 100644 index 0000000000..2ff28fd2f5 --- /dev/null +++ b/src/app/shared/sidebar/filter/sidebar-filter.service.ts @@ -0,0 +1,90 @@ +import { Injectable } from '@angular/core'; +import { + FilterCollapseAction, + FilterExpandAction, FilterInitializeAction, + FilterToggleAction +} from './sidebar-filter.actions'; +import { createSelector, MemoizedSelector, select, Store } from '@ngrx/store'; +import { SidebarFiltersState, SidebarFilterState } from './sidebar-filter.reducer'; +import { Observable } from 'rxjs'; +import { distinctUntilChanged, map } from 'rxjs/operators'; +import { hasValue } from '../../empty.util'; + +/** + * Service that performs all actions that have to do with sidebar filters like collapsing or expanding them. + */ +@Injectable() +export class SidebarFilterService { + + constructor(private store:Store) { + } + + /** + * Dispatches an initialize action to the store for a given filter + * @param {string} filter The filter for which the action is dispatched + * @param {boolean} expanded If the filter should be open from the start + */ + public initializeFilter(filter:string, expanded:boolean):void { + this.store.dispatch(new FilterInitializeAction(filter, expanded)); + } + + /** + * Dispatches a collapse action to the store for a given filter + * @param {string} filterName The filter for which the action is dispatched + */ + public collapse(filterName:string):void { + this.store.dispatch(new FilterCollapseAction(filterName)); + } + + /** + * Dispatches an expand action to the store for a given filter + * @param {string} filterName The filter for which the action is dispatched + */ + public expand(filterName:string):void { + this.store.dispatch(new FilterExpandAction(filterName)); + } + + /** + * Dispatches a toggle action to the store for a given filter + * @param {string} filterName The filter for which the action is dispatched + */ + public toggle(filterName:string):void { + this.store.dispatch(new FilterToggleAction(filterName)); + } + + /** + * Checks if the state of a given filter is currently collapsed or not + * @param {string} filterName The filtername for which the collapsed state is checked + * @returns {Observable} Emits the current collapsed state of the given filter, if it's unavailable, return false + */ + isCollapsed(filterName:string):Observable { + return this.store.pipe( + select(filterByNameSelector(filterName)), + map((object:SidebarFilterState) => { + if (object) { + return object.filterCollapsed; + } else { + return false; + } + }), + distinctUntilChanged() + ); + } + +} + +const filterStateSelector = (state:SidebarFiltersState) => state.sidebarFilter; + +function filterByNameSelector(name:string):MemoizedSelector { + return keySelector(name); +} + +export function keySelector(key:string):MemoizedSelector { + return createSelector(filterStateSelector, (state:SidebarFilterState) => { + if (hasValue(state)) { + return state[key]; + } else { + return undefined; + } + }); +} diff --git a/src/app/shared/sidebar/page-with-sidebar.component.html b/src/app/shared/sidebar/page-with-sidebar.component.html new file mode 100644 index 0000000000..9feb6c792e --- /dev/null +++ b/src/app/shared/sidebar/page-with-sidebar.component.html @@ -0,0 +1,14 @@ +
+
+
+
+ +
+
+ +
+
+
+
diff --git a/src/app/shared/sidebar/page-with-sidebar.component.scss b/src/app/shared/sidebar/page-with-sidebar.component.scss new file mode 100644 index 0000000000..8be48cea2b --- /dev/null +++ b/src/app/shared/sidebar/page-with-sidebar.component.scss @@ -0,0 +1,52 @@ +@include media-breakpoint-down(md) { + .container { + width: 100%; + max-width: none; + } +} + +.row-with-sidebar { + + &.row-offcanvas { + width: 100%; + } + + @include media-breakpoint-up(md) { + display: flex; + } + + @include media-breakpoint-down(sm) { + position: relative; + + &.row-offcanvas { + position: relative; + } + + &.row-offcanvas-right .sidebar-content { + right: -100%; + } + + &.row-offcanvas-left .sidebar-content { + left: -100%; + } + + .sidebar-content { + position: absolute; + top: 0; + width: 100%; + } + } +} + +@include media-breakpoint-up(md) { + .sidebar-content { + position: sticky; + position: -webkit-sticky; + top: 0; + z-index: $zindex-sticky; + padding-top: $content-spacing; + margin-top: -$content-spacing; + align-self: flex-start; + display: block; + } +} diff --git a/src/app/shared/sidebar/page-with-sidebar.component.spec.ts b/src/app/shared/sidebar/page-with-sidebar.component.spec.ts new file mode 100644 index 0000000000..77f59090ab --- /dev/null +++ b/src/app/shared/sidebar/page-with-sidebar.component.spec.ts @@ -0,0 +1,75 @@ +import { By } from '@angular/platform-browser'; +import { of as observableOf } from 'rxjs'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { PageWithSidebarComponent } from './page-with-sidebar.component'; +import { SidebarService } from './sidebar.service'; +import { HostWindowService } from '../host-window.service'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; + +describe('PageWithSidebarComponent', () => { + let comp:PageWithSidebarComponent; + let fixture:ComponentFixture; + + const sidebarService = { + isCollapsed: observableOf(true), + collapse: () => this.isCollapsed = observableOf(true), + expand: () => this.isCollapsed = observableOf(false) + }; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [NoopAnimationsModule], + providers: [ + { + provide: SidebarService, + useValue: sidebarService + }, + { + provide: HostWindowService, useValue: jasmine.createSpyObj('hostWindowService', + { + isXs: observableOf(true), + isSm: observableOf(false), + isXsOrSm: observableOf(true) + }) + }, + ], + declarations: [PageWithSidebarComponent] + }).compileComponents(); + fixture = TestBed.createComponent(PageWithSidebarComponent); + comp = fixture.componentInstance; + comp.id = 'mock-id'; + fixture.detectChanges(); + }); + + describe('when sidebarCollapsed is true in mobile view', () => { + let menu:HTMLElement; + + beforeEach(() => { + menu = fixture.debugElement.query(By.css('#mock-id-sidebar-content')).nativeElement; + (comp as any).sidebarService.isCollapsed = observableOf(true); + comp.ngOnInit(); + fixture.detectChanges(); + }); + + it('should close the sidebar', () => { + expect(menu.classList).not.toContain('active'); + }); + + }); + + describe('when sidebarCollapsed is false in mobile view', () => { + let menu:HTMLElement; + + beforeEach(() => { + menu = fixture.debugElement.query(By.css('#mock-id-sidebar-content')).nativeElement; + (comp as any).sidebarService.isCollapsed = observableOf(false); + comp.ngOnInit(); + fixture.detectChanges(); + }); + + it('should open the menu', () => { + expect(menu.classList).toContain('active'); + }); + + }); +}); diff --git a/src/app/shared/sidebar/page-with-sidebar.component.ts b/src/app/shared/sidebar/page-with-sidebar.component.ts new file mode 100644 index 0000000000..8b7f987a37 --- /dev/null +++ b/src/app/shared/sidebar/page-with-sidebar.component.ts @@ -0,0 +1,77 @@ +import { Component, Input, OnInit, TemplateRef } from '@angular/core'; +import { SidebarService } from './sidebar.service'; +import { HostWindowService } from '../host-window.service'; +import { Observable } from 'rxjs'; +import { pushInOut } from '../animations/push'; +import { map } from 'rxjs/operators'; + +@Component({ + selector: 'ds-page-with-sidebar', + styleUrls: ['./page-with-sidebar.component.scss'], + templateUrl: './page-with-sidebar.component.html', + animations: [pushInOut], +}) +/** + * This component takes care of displaying the sidebar properly on all viewports. It does not + * provide default buttons to open or close the sidebar. Instead the parent component is expected + * to provide the content of the sidebar through an input. The main content of the page goes in + * the template outlet (inside the page-width-sidebar tags). + */ +export class PageWithSidebarComponent implements OnInit { + @Input() id:string; + @Input() sidebarContent:TemplateRef; + + /** + * Emits true if were on a small screen + */ + isXsOrSm$:Observable; + + /** + * The width of the sidebar (bootstrap columns) + */ + @Input() + sideBarWidth = 3; + + /** + * Observable for whether or not the sidebar is currently collapsed + */ + isSidebarCollapsed$:Observable; + + sidebarClasses:Observable; + + constructor(protected sidebarService:SidebarService, + protected windowService:HostWindowService, + ) { + } + + ngOnInit():void { + this.isXsOrSm$ = this.windowService.isXsOrSm(); + this.isSidebarCollapsed$ = this.isSidebarCollapsed(); + this.sidebarClasses = this.isSidebarCollapsed$.pipe( + map((isCollapsed) => isCollapsed ? '' : 'active') + ); + } + + /** + * Check if the sidebar is collapsed + * @returns {Observable} emits true if the sidebar is currently collapsed, false if it is expanded + */ + private isSidebarCollapsed():Observable { + return this.sidebarService.isCollapsed; + } + + /** + * Set the sidebar to a collapsed state + */ + public closeSidebar():void { + this.sidebarService.collapse() + } + + /** + * Set the sidebar to an expanded state + */ + public openSidebar():void { + this.sidebarService.expand(); + } + +} diff --git a/src/app/+search-page/search-sidebar/search-sidebar.effects.spec.ts b/src/app/shared/sidebar/search-sidebar.effects.spec.ts similarity index 68% rename from src/app/+search-page/search-sidebar/search-sidebar.effects.spec.ts rename to src/app/shared/sidebar/search-sidebar.effects.spec.ts index f34f6b72de..da675a38ce 100644 --- a/src/app/+search-page/search-sidebar/search-sidebar.effects.spec.ts +++ b/src/app/shared/sidebar/search-sidebar.effects.spec.ts @@ -3,24 +3,24 @@ import { Observable } from 'rxjs'; import { provideMockActions } from '@ngrx/effects/testing'; import { cold, hot } from 'jasmine-marbles'; import * as fromRouter from '@ngrx/router-store'; -import { SearchSidebarCollapseAction } from './search-sidebar.actions'; -import { SearchSidebarEffects } from './search-sidebar.effects'; +import { SidebarCollapseAction } from './sidebar.actions'; +import { SidebarEffects } from './sidebar-effects.service'; -describe('SearchSidebarEffects', () => { - let sidebarEffects: SearchSidebarEffects; +describe('SidebarEffects', () => { + let sidebarEffects: SidebarEffects; let actions: Observable; const dummyURL = 'http://f4fb15e2-1bd3-4e63-8d0d-486ad8bc714a'; beforeEach(() => { TestBed.configureTestingModule({ providers: [ - SearchSidebarEffects, + SidebarEffects, provideMockActions(() => actions), // other providers ], }); - sidebarEffects = TestBed.get(SearchSidebarEffects); + sidebarEffects = TestBed.get(SidebarEffects); }); describe('routeChange$', () => { @@ -28,7 +28,7 @@ describe('SearchSidebarEffects', () => { it('should return a COLLAPSE action in response to an UPDATE_LOCATION action to a new route', () => { actions = hot('--a-', { a: { type: fromRouter.ROUTER_NAVIGATION, payload: {routerState: {url: dummyURL}} } }); - const expected = cold('--b-', { b: new SearchSidebarCollapseAction() }); + const expected = cold('--b-', { b: new SidebarCollapseAction() }); expect(sidebarEffects.routeChange$).toBeObservable(expected); }); diff --git a/src/app/shared/sidebar/sidebar-dropdown.component.html b/src/app/shared/sidebar/sidebar-dropdown.component.html new file mode 100644 index 0000000000..0c2a1c05d2 --- /dev/null +++ b/src/app/shared/sidebar/sidebar-dropdown.component.html @@ -0,0 +1,6 @@ +
+
+ +
diff --git a/src/app/shared/sidebar/sidebar-dropdown.component.scss b/src/app/shared/sidebar/sidebar-dropdown.component.scss new file mode 100644 index 0000000000..1c025095dd --- /dev/null +++ b/src/app/shared/sidebar/sidebar-dropdown.component.scss @@ -0,0 +1,3 @@ +.setting-option { + border: 1px solid map-get($theme-colors, light); +} diff --git a/src/app/shared/sidebar/sidebar-dropdown.component.ts b/src/app/shared/sidebar/sidebar-dropdown.component.ts new file mode 100644 index 0000000000..313538eded --- /dev/null +++ b/src/app/shared/sidebar/sidebar-dropdown.component.ts @@ -0,0 +1,16 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +@Component({ + selector: 'ds-sidebar-dropdown', + styleUrls: ['./sidebar-dropdown.component.scss'], + templateUrl: './sidebar-dropdown.component.html', +}) +/** + * This components renders a sidebar dropdown including the label. + * The options should still be provided in the content. + */ +export class SidebarDropdownComponent { + @Input() id:string; + @Input() label:string; + @Output() change:EventEmitter = new EventEmitter(); +} diff --git a/src/app/+search-page/search-sidebar/search-sidebar.effects.ts b/src/app/shared/sidebar/sidebar-effects.service.ts similarity index 85% rename from src/app/+search-page/search-sidebar/search-sidebar.effects.ts rename to src/app/shared/sidebar/sidebar-effects.service.ts index 1f5fb0ef60..fc6643be4b 100644 --- a/src/app/+search-page/search-sidebar/search-sidebar.effects.ts +++ b/src/app/shared/sidebar/sidebar-effects.service.ts @@ -3,14 +3,14 @@ import { Injectable } from '@angular/core'; import { Effect, Actions, ofType } from '@ngrx/effects' import * as fromRouter from '@ngrx/router-store'; -import { SearchSidebarCollapseAction } from './search-sidebar.actions'; +import { SidebarCollapseAction } from './sidebar.actions'; import { URLBaser } from '../../core/url-baser/url-baser'; /** * Makes sure that if the user navigates to another route, the sidebar is collapsed */ @Injectable() -export class SearchSidebarEffects { +export class SidebarEffects { private previousPath: string; @Effect() routeChange$ = this.actions$ .pipe( @@ -19,7 +19,7 @@ export class SearchSidebarEffects { tap((action) => { this.previousPath = this.getBaseUrl(action) }), - map(() => new SearchSidebarCollapseAction()) + map(() => new SidebarCollapseAction()) ); constructor(private actions$: Actions) { diff --git a/src/app/+search-page/search-sidebar/search-sidebar.actions.ts b/src/app/shared/sidebar/sidebar.actions.ts similarity index 51% rename from src/app/+search-page/search-sidebar/search-sidebar.actions.ts rename to src/app/shared/sidebar/sidebar.actions.ts index 84a34b2790..4a7c85696a 100644 --- a/src/app/+search-page/search-sidebar/search-sidebar.actions.ts +++ b/src/app/shared/sidebar/sidebar.actions.ts @@ -1,6 +1,6 @@ import { Action } from '@ngrx/store'; -import { type } from '../../shared/ngrx/type'; +import { type } from '../ngrx/type'; /** * For each action type in an action group, make a simple @@ -10,32 +10,32 @@ import { type } from '../../shared/ngrx/type'; * literal types and runs a simple check to guarantee all * action types in the application are unique. */ -export const SearchSidebarActionTypes = { - COLLAPSE: type('dspace/search-sidebar/COLLAPSE'), - EXPAND: type('dspace/search-sidebar/EXPAND'), - TOGGLE: type('dspace/search-sidebar/TOGGLE') +export const SidebarActionTypes = { + COLLAPSE: type('dspace/sidebar/COLLAPSE'), + EXPAND: type('dspace/sidebar/EXPAND'), + TOGGLE: type('dspace/sidebar/TOGGLE') }; /* tslint:disable:max-classes-per-file */ /** * Used to collapse the sidebar */ -export class SearchSidebarCollapseAction implements Action { - type = SearchSidebarActionTypes.COLLAPSE; +export class SidebarCollapseAction implements Action { + type = SidebarActionTypes.COLLAPSE; } /** * Used to expand the sidebar */ -export class SearchSidebarExpandAction implements Action { - type = SearchSidebarActionTypes.EXPAND; +export class SidebarExpandAction implements Action { + type = SidebarActionTypes.EXPAND; } /** * Used to collapse the sidebar when it's expanded and expand it when it's collapsed */ -export class SearchSidebarToggleAction implements Action { - type = SearchSidebarActionTypes.TOGGLE; +export class SidebarToggleAction implements Action { + type = SidebarActionTypes.TOGGLE; } /* tslint:enable:max-classes-per-file */ @@ -43,7 +43,7 @@ export class SearchSidebarToggleAction implements Action { * Export a type alias of all actions in this action group * so that reducers can easily compose action types */ -export type SearchSidebarAction - = SearchSidebarCollapseAction - | SearchSidebarExpandAction - | SearchSidebarToggleAction +export type SidebarAction + = SidebarCollapseAction + | SidebarExpandAction + | SidebarToggleAction diff --git a/src/app/+search-page/search-sidebar/search-sidebar.reducer.spec.ts b/src/app/shared/sidebar/sidebar.reducer.spec.ts similarity index 80% rename from src/app/+search-page/search-sidebar/search-sidebar.reducer.spec.ts rename to src/app/shared/sidebar/sidebar.reducer.spec.ts index dfdead4369..0fbfce84fc 100644 --- a/src/app/+search-page/search-sidebar/search-sidebar.reducer.spec.ts +++ b/src/app/shared/sidebar/sidebar.reducer.spec.ts @@ -1,12 +1,12 @@ import * as deepFreeze from 'deep-freeze'; -import { sidebarReducer } from './search-sidebar.reducer'; +import { sidebarReducer } from './sidebar.reducer'; import { - SearchSidebarCollapseAction, SearchSidebarExpandAction, - SearchSidebarToggleAction -} from './search-sidebar.actions'; + SidebarCollapseAction, SidebarExpandAction, + SidebarToggleAction +} from './sidebar.actions'; -class NullAction extends SearchSidebarCollapseAction { +class NullAction extends SidebarCollapseAction { type = null; constructor() { @@ -34,7 +34,7 @@ describe('sidebarReducer', () => { it('should set sidebarCollapsed to true in response to the COLLAPSE action', () => { const state = { sidebarCollapsed: false }; - const action = new SearchSidebarCollapseAction(); + const action = new SidebarCollapseAction(); const newState = sidebarReducer(state, action); expect(newState.sidebarCollapsed).toEqual(true); @@ -44,7 +44,7 @@ describe('sidebarReducer', () => { const state = { sidebarCollapsed: false }; deepFreeze([state]); - const action = new SearchSidebarCollapseAction(); + const action = new SidebarCollapseAction(); sidebarReducer(state, action); // no expect required, deepFreeze will ensure an exception is thrown if the state @@ -53,7 +53,7 @@ describe('sidebarReducer', () => { it('should set sidebarCollapsed to false in response to the EXPAND action', () => { const state = { sidebarCollapsed: true }; - const action = new SearchSidebarExpandAction(); + const action = new SidebarExpandAction(); const newState = sidebarReducer(state, action); expect(newState.sidebarCollapsed).toEqual(false); @@ -63,13 +63,13 @@ describe('sidebarReducer', () => { const state = { sidebarCollapsed: true }; deepFreeze([state]); - const action = new SearchSidebarExpandAction(); + const action = new SidebarExpandAction(); sidebarReducer(state, action); }); it('should flip the value of sidebarCollapsed in response to the TOGGLE action', () => { const state1 = { sidebarCollapsed: true }; - const action = new SearchSidebarToggleAction(); + const action = new SidebarToggleAction(); const state2 = sidebarReducer(state1, action); const state3 = sidebarReducer(state2, action); @@ -82,7 +82,7 @@ describe('sidebarReducer', () => { const state = { sidebarCollapsed: true }; deepFreeze([state]); - const action = new SearchSidebarToggleAction(); + const action = new SidebarToggleAction(); sidebarReducer(state, action); }); diff --git a/src/app/shared/sidebar/sidebar.reducer.ts b/src/app/shared/sidebar/sidebar.reducer.ts new file mode 100644 index 0000000000..05e7d38d48 --- /dev/null +++ b/src/app/shared/sidebar/sidebar.reducer.ts @@ -0,0 +1,47 @@ +import { SidebarAction, SidebarActionTypes } from './sidebar.actions'; + +/** + * Interface that represents the state of the sidebar + */ +export interface SidebarState { + sidebarCollapsed: boolean; +} + +const initialState: SidebarState = { + sidebarCollapsed: true +}; + +/** + * Performs a sidebar action on the current state + * @param {SidebarState} state The state before the action is performed + * @param {SidebarAction} action The action that should be performed + * @returns {SidebarState} The state after the action is performed + */ +export function sidebarReducer(state = initialState, action: SidebarAction): SidebarState { + switch (action.type) { + + case SidebarActionTypes.COLLAPSE: { + return Object.assign({}, state, { + sidebarCollapsed: true + }); + } + + case SidebarActionTypes.EXPAND: { + return Object.assign({}, state, { + sidebarCollapsed: false + }); + + } + + case SidebarActionTypes.TOGGLE: { + return Object.assign({}, state, { + sidebarCollapsed: !state.sidebarCollapsed + }); + + } + + default: { + return state; + } + } +} diff --git a/src/app/+search-page/search-sidebar/search-sidebar.service.spec.ts b/src/app/shared/sidebar/sidebar.service.spec.ts similarity index 61% rename from src/app/+search-page/search-sidebar/search-sidebar.service.spec.ts rename to src/app/shared/sidebar/sidebar.service.spec.ts index 0cccf9ea40..6d8e845836 100644 --- a/src/app/+search-page/search-sidebar/search-sidebar.service.spec.ts +++ b/src/app/shared/sidebar/sidebar.service.spec.ts @@ -1,13 +1,13 @@ import { Store } from '@ngrx/store'; -import { SearchSidebarService } from './search-sidebar.service'; +import { SidebarService } from './sidebar.service'; import { AppState } from '../../app.reducer'; import { async, TestBed } from '@angular/core/testing'; import { of as observableOf } from 'rxjs'; -import { SearchSidebarCollapseAction, SearchSidebarExpandAction } from './search-sidebar.actions'; -import { HostWindowService } from '../../shared/host-window.service'; +import { SidebarCollapseAction, SidebarExpandAction } from './sidebar.actions'; +import { HostWindowService } from '../host-window.service'; -describe('SearchSidebarService', () => { - let service: SearchSidebarService; +describe('SidebarService', () => { + let service: SidebarService; const store: Store = jasmine.createSpyObj('store', { /* tslint:disable:no-empty */ dispatch: {}, @@ -35,7 +35,7 @@ describe('SearchSidebarService', () => { })); beforeEach(() => { - service = new SearchSidebarService(store, windowService); + service = new SidebarService(store, windowService); }) ; describe('when the collapse method is triggered', () => { @@ -43,8 +43,8 @@ describe('SearchSidebarService', () => { service.collapse(); }); - it('SearchSidebarCollapseAction should be dispatched to the store', () => { - expect(store.dispatch).toHaveBeenCalledWith(new SearchSidebarCollapseAction()); + it('SidebarCollapseAction should be dispatched to the store', () => { + expect(store.dispatch).toHaveBeenCalledWith(new SidebarCollapseAction()); }); }); @@ -54,8 +54,8 @@ describe('SearchSidebarService', () => { service.expand(); }); - it('SearchSidebarExpandAction should be dispatched to the store', () => { - expect(store.dispatch).toHaveBeenCalledWith(new SearchSidebarExpandAction()); + it('SidebarExpandAction should be dispatched to the store', () => { + expect(store.dispatch).toHaveBeenCalledWith(new SidebarExpandAction()); }); }); diff --git a/src/app/+search-page/search-sidebar/search-sidebar.service.ts b/src/app/shared/sidebar/sidebar.service.ts similarity index 70% rename from src/app/+search-page/search-sidebar/search-sidebar.service.ts rename to src/app/shared/sidebar/sidebar.service.ts index 7185984538..8e3bbbf117 100644 --- a/src/app/+search-page/search-sidebar/search-sidebar.service.ts +++ b/src/app/shared/sidebar/sidebar.service.ts @@ -1,20 +1,20 @@ import { combineLatest as observableCombineLatest, Observable } from 'rxjs'; import { Injectable } from '@angular/core'; -import { SearchSidebarState } from './search-sidebar.reducer'; +import { SidebarState } from './sidebar.reducer'; import { createSelector, select, Store } from '@ngrx/store'; -import { SearchSidebarCollapseAction, SearchSidebarExpandAction } from './search-sidebar.actions'; +import { SidebarCollapseAction, SidebarExpandAction } from './sidebar.actions'; import { AppState } from '../../app.reducer'; -import { HostWindowService } from '../../shared/host-window.service'; +import { HostWindowService } from '../host-window.service'; import { map } from 'rxjs/operators'; -const sidebarStateSelector = (state: AppState) => state.searchSidebar; -const sidebarCollapsedSelector = createSelector(sidebarStateSelector, (sidebar: SearchSidebarState) => sidebar.sidebarCollapsed); +const sidebarStateSelector = (state: AppState) => state.sidebar; +const sidebarCollapsedSelector = createSelector(sidebarStateSelector, (sidebar: SidebarState) => sidebar.sidebarCollapsed); /** - * Service that performs all actions that have to do with the search sidebar + * Service that performs all actions that have to do with the sidebar */ @Injectable() -export class SearchSidebarService { +export class SidebarService { /** * Emits true is the current screen size is mobile */ @@ -47,13 +47,13 @@ export class SearchSidebarService { * Dispatches a collapse action to the store */ public collapse(): void { - this.store.dispatch(new SearchSidebarCollapseAction()); + this.store.dispatch(new SidebarCollapseAction()); } /** * Dispatches an expand action to the store */ public expand(): void { - this.store.dispatch(new SearchSidebarExpandAction()); + this.store.dispatch(new SidebarExpandAction()); } } diff --git a/src/app/statistics/angulartics/dspace-provider.spec.ts b/src/app/statistics/angulartics/dspace-provider.spec.ts new file mode 100644 index 0000000000..d89d2d9fc6 --- /dev/null +++ b/src/app/statistics/angulartics/dspace-provider.spec.ts @@ -0,0 +1,26 @@ +import { Angulartics2DSpace } from './dspace-provider'; +import { Angulartics2 } from 'angulartics2'; +import { StatisticsService } from '../statistics.service'; +import { filter } from 'rxjs/operators'; +import { of as observableOf } from 'rxjs'; + +describe('Angulartics2DSpace', () => { + let provider:Angulartics2DSpace; + let angulartics2:Angulartics2; + let statisticsService:jasmine.SpyObj; + + beforeEach(() => { + angulartics2 = { + eventTrack: observableOf({action: 'pageView', properties: {object: 'mock-object'}}), + filterDeveloperMode: () => filter(() => true) + } as any; + statisticsService = jasmine.createSpyObj('statisticsService', {trackViewEvent: null}); + provider = new Angulartics2DSpace(angulartics2, statisticsService); + }); + + it('should use the statisticsService', () => { + provider.startTracking(); + expect(statisticsService.trackViewEvent).toHaveBeenCalledWith('mock-object'); + }); + +}); diff --git a/src/app/statistics/angulartics/dspace-provider.ts b/src/app/statistics/angulartics/dspace-provider.ts new file mode 100644 index 0000000000..9ab01f6023 --- /dev/null +++ b/src/app/statistics/angulartics/dspace-provider.ts @@ -0,0 +1,38 @@ +import { Injectable } from '@angular/core'; +import { Angulartics2 } from 'angulartics2'; +import { StatisticsService } from '../statistics.service'; + +/** + * Angulartics2DSpace is a angulartics2 plugin that provides DSpace with the events. + */ +@Injectable({providedIn: 'root'}) +export class Angulartics2DSpace { + + constructor( + private angulartics2:Angulartics2, + private statisticsService:StatisticsService, + ) { + } + + /** + * Activates this plugin + */ + startTracking():void { + this.angulartics2.eventTrack + .pipe(this.angulartics2.filterDeveloperMode()) + .subscribe((event) => this.eventTrack(event)); + } + + private eventTrack(event) { + if (event.action === 'pageView') { + this.statisticsService.trackViewEvent(event.properties.object); + } else if (event.action === 'search') { + this.statisticsService.trackSearchEvent( + event.properties.searchOptions, + event.properties.page, + event.properties.sort, + event.properties.filters + ); + } + } +} diff --git a/src/app/statistics/angulartics/dspace/view-tracker.component.html b/src/app/statistics/angulartics/dspace/view-tracker.component.html new file mode 100644 index 0000000000..c0c0ffe181 --- /dev/null +++ b/src/app/statistics/angulartics/dspace/view-tracker.component.html @@ -0,0 +1 @@ +  diff --git a/src/app/statistics/angulartics/dspace/view-tracker.component.scss b/src/app/statistics/angulartics/dspace/view-tracker.component.scss new file mode 100644 index 0000000000..c76cafbe44 --- /dev/null +++ b/src/app/statistics/angulartics/dspace/view-tracker.component.scss @@ -0,0 +1,3 @@ +:host { + display: none +} diff --git a/src/app/statistics/angulartics/dspace/view-tracker.component.ts b/src/app/statistics/angulartics/dspace/view-tracker.component.ts new file mode 100644 index 0000000000..1151287ea8 --- /dev/null +++ b/src/app/statistics/angulartics/dspace/view-tracker.component.ts @@ -0,0 +1,27 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Angulartics2 } from 'angulartics2'; +import { DSpaceObject } from '../../../core/shared/dspace-object.model'; + +/** + * This component triggers a page view statistic + */ +@Component({ + selector: 'ds-view-tracker', + styleUrls: ['./view-tracker.component.scss'], + templateUrl: './view-tracker.component.html', +}) +export class ViewTrackerComponent implements OnInit { + @Input() object:DSpaceObject; + + constructor( + public angulartics2:Angulartics2 + ) { + } + + ngOnInit():void { + this.angulartics2.eventTrack.next({ + action: 'pageView', + properties: {object: this.object}, + }); + } +} diff --git a/src/app/statistics/statistics.module.ts b/src/app/statistics/statistics.module.ts new file mode 100644 index 0000000000..a67ff7613c --- /dev/null +++ b/src/app/statistics/statistics.module.ts @@ -0,0 +1,36 @@ +import { ModuleWithProviders, NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { CoreModule } from '../core/core.module'; +import { SharedModule } from '../shared/shared.module'; +import { ViewTrackerComponent } from './angulartics/dspace/view-tracker.component'; +import { StatisticsService } from './statistics.service'; + +@NgModule({ + imports: [ + CommonModule, + CoreModule.forRoot(), + SharedModule, + ], + declarations: [ + ViewTrackerComponent, + ], + exports: [ + ViewTrackerComponent, + ], + providers: [ + StatisticsService + ] +}) +/** + * This module handles the statistics + */ +export class StatisticsModule { + static forRoot():ModuleWithProviders { + return { + ngModule: StatisticsModule, + providers: [ + StatisticsService + ] + }; + } +} diff --git a/src/app/statistics/statistics.service.spec.ts b/src/app/statistics/statistics.service.spec.ts new file mode 100644 index 0000000000..3a416968f8 --- /dev/null +++ b/src/app/statistics/statistics.service.spec.ts @@ -0,0 +1,145 @@ +import { StatisticsService } from './statistics.service'; +import { RequestService } from '../core/data/request.service'; +import { HALEndpointServiceStub } from '../shared/testing/hal-endpoint-service-stub'; +import { getMockRequestService } from '../shared/mocks/mock-request.service'; +import { TrackRequest } from './track-request.model'; +import { ResourceType } from '../core/shared/resource-type'; +import { SearchOptions } from '../+search-page/search-options.model'; +import { isEqual } from 'lodash'; +import { DSpaceObjectType } from '../core/shared/dspace-object-type.model'; + +describe('StatisticsService', () => { + let service:StatisticsService; + let requestService:jasmine.SpyObj; + const restURL = 'https://rest.api'; + const halService:any = new HALEndpointServiceStub(restURL); + + function initTestService() { + return new StatisticsService( + requestService, + halService, + ); + } + + describe('trackViewEvent', () => { + requestService = getMockRequestService(); + service = initTestService(); + + it('should send a request to track an item view ', () => { + const mockItem:any = {uuid: 'mock-item-uuid', type: 'item'}; + service.trackViewEvent(mockItem); + const request:TrackRequest = requestService.configure.calls.mostRecent().args[0]; + expect(request.body).toBeDefined('request.body'); + const body = JSON.parse(request.body); + expect(body.targetId).toBe('mock-item-uuid'); + expect(body.targetType).toBe('item'); + }); + }); + + describe('trackSearchEvent', () => { + requestService = getMockRequestService(); + service = initTestService(); + + const mockSearch:any = new SearchOptions({ + query: 'mock-query', + }); + + const page = { + size: 10, + totalElements: 248, + totalPages: 25, + number: 4 + }; + const sort = {by: 'search-field', order: 'ASC'}; + service.trackSearchEvent(mockSearch, page, sort); + const request:TrackRequest = requestService.configure.calls.mostRecent().args[0]; + const body = JSON.parse(request.body); + + it('should specify the right query', () => { + expect(body.query).toBe('mock-query'); + }); + + it('should specify the pagination info', () => { + expect(body.page).toEqual({ + size: 10, + totalElements: 248, + totalPages: 25, + number: 4 + }); + }); + + it('should specify the sort options', () => { + expect(body.sort).toEqual({ + by: 'search-field', + order: 'asc' + }); + }); + }); + + describe('trackSearchEvent with optional parameters', () => { + requestService = getMockRequestService(); + service = initTestService(); + + const mockSearch:any = new SearchOptions({ + query: 'mock-query', + configuration: 'mock-configuration', + dsoType: DSpaceObjectType.ITEM, + scope: 'mock-scope' + }); + + const page = { + size: 10, + totalElements: 248, + totalPages: 25, + number: 4 + }; + const sort = {by: 'search-field', order: 'ASC'}; + const filters = [ + { + filter: 'title', + operator: 'notcontains', + value: 'dolor sit', + label: 'dolor sit' + }, + { + filter: 'author', + operator: 'authority', + value: '9zvxzdm4qru17or5a83wfgac', + label: 'Amet, Consectetur' + } + ]; + service.trackSearchEvent(mockSearch, page, sort, filters); + const request:TrackRequest = requestService.configure.calls.mostRecent().args[0]; + const body = JSON.parse(request.body); + + it('should specify the dsoType', () => { + expect(body.dsoType).toBe('item'); + }); + + it('should specify the scope', () => { + expect(body.scope).toBe('mock-scope'); + }); + + it('should specify the configuration', () => { + expect(body.configuration).toBe('mock-configuration'); + }); + + it('should specify the filters', () => { + expect(isEqual(body.appliedFilters, [ + { + filter: 'title', + operator: 'notcontains', + value: 'dolor sit', + label: 'dolor sit' + }, + { + filter: 'author', + operator: 'authority', + value: '9zvxzdm4qru17or5a83wfgac', + label: 'Amet, Consectetur' + } + ])).toBe(true); + }); + }); + +}); diff --git a/src/app/statistics/statistics.service.ts b/src/app/statistics/statistics.service.ts new file mode 100644 index 0000000000..cd89125b3c --- /dev/null +++ b/src/app/statistics/statistics.service.ts @@ -0,0 +1,93 @@ +import { RequestService } from '../core/data/request.service'; +import { Injectable } from '@angular/core'; +import { DSpaceObject } from '../core/shared/dspace-object.model'; +import { map, take } from 'rxjs/operators'; +import { TrackRequest } from './track-request.model'; +import { SearchOptions } from '../+search-page/search-options.model'; +import { hasValue, isNotEmpty } from '../shared/empty.util'; +import { HALEndpointService } from '../core/shared/hal-endpoint.service'; +import { RestRequest } from '../core/data/request.models'; + +/** + * The statistics service + */ +@Injectable() +export class StatisticsService { + + constructor( + protected requestService:RequestService, + protected halService:HALEndpointService, + ) { + } + + private sendEvent(linkPath:string, body:any) { + const requestId = this.requestService.generateRequestId(); + this.halService.getEndpoint(linkPath).pipe( + map((endpoint:string) => new TrackRequest(requestId, endpoint, JSON.stringify(body))), + take(1) // otherwise the previous events will fire again + ).subscribe((request:RestRequest) => this.requestService.configure(request)); + } + + /** + * To track a page view + * @param dso: The dso which was viewed + */ + trackViewEvent(dso:DSpaceObject) { + this.sendEvent('/statistics/viewevents', { + targetId: dso.uuid, + targetType: (dso as any).type + }); + } + + /** + * To track a search + * @param searchOptions: The query, scope, dsoType and configuration of the search. Filters from this object are ignored in favor of the filters parameter of this method. + * @param page: An object that describes the pagination status + * @param sort: An object that describes the sort status + * @param filters: An array of search filters used to filter the result set + */ + trackSearchEvent( + searchOptions:SearchOptions, + page:{ size:number, totalElements:number, totalPages:number, number:number }, + sort:{ by:string, order:string }, + filters?:Array<{ filter:string, operator:string, value:string, label:string }> + ) { + const body = { + query: searchOptions.query, + page: { + size: page.size, + totalElements: page.totalElements, + totalPages: page.totalPages, + number: page.number + }, + sort: { + by: sort.by, + order: sort.order.toLowerCase() + }, + }; + if (hasValue(searchOptions.configuration)) { + Object.assign(body, {configuration: searchOptions.configuration}) + } + if (hasValue(searchOptions.dsoType)) { + Object.assign(body, {dsoType: searchOptions.dsoType.toLowerCase()}) + } + if (hasValue(searchOptions.scope)) { + Object.assign(body, {scope: searchOptions.scope}) + } + if (isNotEmpty(filters)) { + const bodyFilters = []; + for (let i = 0, arrayLength = filters.length; i < arrayLength; i++) { + const filter = filters[i]; + bodyFilters.push({ + filter: filter.filter, + operator: filter.operator, + value: filter.value, + label: filter.label + }) + } + Object.assign(body, {appliedFilters: bodyFilters}) + } + this.sendEvent('/statistics/searchevents', body); + } + +} diff --git a/src/app/statistics/track-request.model.ts b/src/app/statistics/track-request.model.ts new file mode 100644 index 0000000000..df3e51c070 --- /dev/null +++ b/src/app/statistics/track-request.model.ts @@ -0,0 +1,4 @@ +import { PostRequest } from '../core/data/request.models'; + +export class TrackRequest extends PostRequest { +} diff --git a/src/app/submission/form/submission-form.component.ts b/src/app/submission/form/submission-form.component.ts index b592972839..1732075bf8 100644 --- a/src/app/submission/form/submission-form.component.ts +++ b/src/app/submission/form/submission-form.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, SimpleChanges } from '@angular/core'; import { of as observableOf, Observable, Subscription } from 'rxjs'; -import { distinctUntilChanged, filter, flatMap, map } from 'rxjs/operators'; +import { distinctUntilChanged, filter, flatMap, map, switchMap } from 'rxjs/operators'; import { hasValue, isNotEmpty } from '../../shared/empty.util'; import { SubmissionObjectEntry } from '../objects/submission-objects.reducer'; @@ -125,7 +125,7 @@ export class SubmissionFormComponent implements OnChanges, OnDestroy { map((submission: SubmissionObjectEntry) => submission.isLoading), map((isLoading: boolean) => isLoading), distinctUntilChanged(), - flatMap((isLoading: boolean) => { + switchMap((isLoading: boolean) => { if (!isLoading) { return this.getSectionsList(); } else { diff --git a/src/app/submission/sections/form/section-form.component.ts b/src/app/submission/sections/form/section-form.component.ts index 2269ccd5f1..c1ca394911 100644 --- a/src/app/submission/sections/form/section-form.component.ts +++ b/src/app/submission/sections/form/section-form.component.ts @@ -215,6 +215,7 @@ export class SubmissionSectionformComponent extends SectionModelComponent { initForm(sectionData: WorkspaceitemSectionFormObject): void { try { this.formModel = this.formBuilderService.modelFromConfiguration( + this.submissionId, this.formConfig, this.collectionId, sectionData, diff --git a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts index b2575d1d58..8cf0d22d20 100644 --- a/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts +++ b/src/app/submission/sections/upload/file/edit/section-upload-file-edit.component.ts @@ -166,6 +166,7 @@ export class SubmissionSectionUploadFileEditComponent implements OnChanges { const formModel: DynamicFormControlModel[] = []; const metadataGroupModelConfig = Object.assign({}, BITSTREAM_METADATA_FORM_GROUP_CONFIG); metadataGroupModelConfig.group = this.formBuilderService.modelFromConfiguration( + this.submissionId, configForm, this.collectionId, this.fileData.metadata, diff --git a/src/modules/app/browser-app.module.ts b/src/modules/app/browser-app.module.ts index ede2b53e74..87b830ee7d 100644 --- a/src/modules/app/browser-app.module.ts +++ b/src/modules/app/browser-app.module.ts @@ -21,6 +21,8 @@ import { AuthService } from '../../app/core/auth/auth.service'; import { Angulartics2Module } from 'angulartics2'; import { Angulartics2GoogleAnalytics } from 'angulartics2/ga'; import { SubmissionService } from '../../app/submission/submission.service'; +import { Angulartics2DSpace } from '../../app/statistics/angulartics/dspace-provider'; +import { StatisticsModule } from '../../app/statistics/statistics.module'; export const REQ_KEY = makeStateKey('req'); @@ -47,7 +49,8 @@ export function getRequest(transferState: TransferState): any { preloadingStrategy: IdlePreload }), - Angulartics2Module.forRoot([Angulartics2GoogleAnalytics]), + StatisticsModule.forRoot(), + Angulartics2Module.forRoot([Angulartics2GoogleAnalytics, Angulartics2DSpace]), BrowserAnimationsModule, DSpaceBrowserTransferStateModule, TranslateModule.forRoot({ diff --git a/src/modules/app/server-app.module.ts b/src/modules/app/server-app.module.ts index 02abf6449b..44b21859bd 100644 --- a/src/modules/app/server-app.module.ts +++ b/src/modules/app/server-app.module.ts @@ -22,6 +22,8 @@ import { Angulartics2GoogleAnalytics } from 'angulartics2/ga'; import { AngularticsMock } from '../../app/shared/mocks/mock-angulartics.service'; import { SubmissionService } from '../../app/submission/submission.service'; import { ServerSubmissionService } from '../../app/submission/server-submission.service'; +import { Angulartics2DSpace } from '../../app/statistics/angulartics/dspace-provider'; +import { Angulartics2Module } from 'angulartics2'; export function createTranslateLoader() { return new TranslateJson5UniversalLoader('dist/assets/i18n/', '.json5'); @@ -45,6 +47,7 @@ export function createTranslateLoader() { deps: [] } }), + Angulartics2Module.forRoot([Angulartics2GoogleAnalytics, Angulartics2DSpace]), ServerModule, AppModule ], @@ -53,6 +56,10 @@ export function createTranslateLoader() { provide: Angulartics2GoogleAnalytics, useClass: AngularticsMock }, + { + provide: Angulartics2DSpace, + useClass: AngularticsMock + }, { provide: AuthService, useClass: ServerAuthService diff --git a/themes/mantis/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html b/themes/mantis/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html index 99d92d2af8..907f70b941 100644 --- a/themes/mantis/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html +++ b/themes/mantis/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html @@ -4,7 +4,7 @@
- +
{ let copyWebpackOptions = [{ from: path.join(__dirname, '..', 'node_modules', '@fortawesome', 'fontawesome-free', 'webfonts'), to: path.join('assets', 'fonts') + }, { + from: path.join(__dirname, '..', 'resources', 'fonts'), + to: path.join('assets', 'fonts') }, { from: path.join(__dirname, '..', 'resources', 'images'), to: path.join('assets', 'images') @@ -24,6 +27,15 @@ module.exports = (env) => { } ]; + const themeFonts = path.join(themePath, 'resources', 'fonts'); + if(theme && fs.existsSync(themeFonts)) { + copyWebpackOptions.push({ + from: themeFonts, + to: path.join('assets', 'fonts') , + force: true, + }); + } + const themeImages = path.join(themePath, 'resources', 'images'); if(theme && fs.existsSync(themeImages)) { copyWebpackOptions.push({ @@ -107,12 +119,6 @@ module.exports = (env) => { sourceMap: true } }, - { - loader: 'resolve-url-loader', - options: { - sourceMap: true - } - }, { loader: 'sass-loader', options: { @@ -120,6 +126,12 @@ module.exports = (env) => { includePaths: [projectRoot('./'), path.join(themePath, 'styles')] } }, + { + loader: 'resolve-url-loader', + options: { + sourceMap: true + } + }, { loader: 'sass-resources-loader', options: { @@ -145,23 +157,23 @@ module.exports = (env) => { sourceMap: true } }, - { - loader: 'resolve-url-loader', - options: { - sourceMap: true - } - }, { loader: 'sass-loader', options: { sourceMap: true, includePaths: [projectRoot('./'), path.join(themePath, 'styles')] } - } + }, + { + loader: 'resolve-url-loader', + options: { + sourceMap: true + } + }, ] }, { - test: /\.html$/, + test: /\.(html|eot|ttf|otf|svg|woff|woff2)$/, loader: 'raw-loader' } ] diff --git a/webpack/webpack.test.js b/webpack/webpack.test.js index 83e6e44e79..de53de31c4 100644 --- a/webpack/webpack.test.js +++ b/webpack/webpack.test.js @@ -160,12 +160,6 @@ module.exports = function (env) { sourceMap: true } }, - { - loader: 'resolve-url-loader', - options: { - sourceMap: true - } - }, { loader: 'sass-loader', options: { @@ -173,6 +167,12 @@ module.exports = function (env) { includePaths: [projectRoot('./'), path.join(themePath, 'styles')] } }, + { + loader: 'resolve-url-loader', + options: { + sourceMap: true + } + }, { loader: 'sass-resources-loader', options: { @@ -198,19 +198,19 @@ module.exports = function (env) { sourceMap: true } }, - { - loader: 'resolve-url-loader', - options: { - sourceMap: true - } - }, { loader: 'sass-loader', options: { sourceMap: true, includePaths: [projectRoot('./'), path.join(themePath, 'styles')] } - } + }, + { + loader: 'resolve-url-loader', + options: { + sourceMap: true + } + }, ] }, diff --git a/yarn.lock b/yarn.lock index d5c8d144de..c3f9e59a4d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2100,15 +2100,14 @@ cliui@^5.0.0: strip-ansi "^5.2.0" wrap-ansi "^5.1.0" -clone-deep@^2.0.1: - version "2.0.2" - resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-2.0.2.tgz#00db3a1e173656730d1188c3d6aced6d7ea97713" - integrity sha512-SZegPTKjCgpQH63E+eN6mVEEPdQBOUzjyJm5Pora4lrwWRFS8I0QAxV/KD6vV/i0WuijHZWQC1fMsPEdxfdVCQ== +clone-deep@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387" + integrity sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ== dependencies: - for-own "^1.0.0" is-plain-object "^2.0.4" - kind-of "^6.0.0" - shallow-clone "^1.0.0" + kind-of "^6.0.2" + shallow-clone "^3.0.0" clone-stats@^0.0.1: version "0.0.1" @@ -4128,11 +4127,6 @@ font-awesome@4.7.0: resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133" integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM= -for-in@^0.1.3: - version "0.1.8" - resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1" - integrity sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE= - for-in@^1.0.1, for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -4145,13 +4139,6 @@ for-own@^0.1.4: dependencies: for-in "^1.0.1" -for-own@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b" - integrity sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs= - dependencies: - for-in "^1.0.1" - forever-agent@~0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91" @@ -6155,7 +6142,7 @@ loader-utils@^0.2.12, loader-utils@^0.2.15, loader-utils@^0.2.16: json5 "^0.5.0" object-assign "^4.0.1" -loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0: +loader-utils@^1.0.0, loader-utils@^1.0.2, loader-utils@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd" integrity sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0= @@ -6164,7 +6151,7 @@ loader-utils@^1.0.0, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1 emojis-list "^2.0.0" json5 "^0.5.0" -loader-utils@^1.0.4: +loader-utils@^1.0.1, loader-utils@^1.0.4: version "1.2.3" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7" dependencies: @@ -6378,11 +6365,6 @@ lodash.startswith@^4.2.1: resolved "https://registry.yarnpkg.com/lodash.startswith/-/lodash.startswith-4.2.1.tgz#c598c4adce188a27e53145731cdc6c0e7177600c" integrity sha1-xZjErc4YiiflMUVzHNxsDnF3YAw= -lodash.tail@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664" - integrity sha1-0jM6NtnncXyK0vfKyv7HwytERmQ= - lodash.template@^3.0.0: version "3.6.2" resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-3.6.2.tgz#f8cdecc6169a255be9098ae8b0c53d378931d14f" @@ -6856,14 +6838,6 @@ mixin-deep@^1.2.0: for-in "^1.0.2" is-extendable "^1.0.1" -mixin-object@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e" - integrity sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4= - dependencies: - for-in "^0.1.3" - is-extendable "^0.1.1" - mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1: version "0.5.1" resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903" @@ -9661,17 +9635,16 @@ sass-graph@^2.2.4: scss-tokenizer "^0.2.3" yargs "^7.0.0" -sass-loader@7.1.0: - version "7.1.0" - resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.1.0.tgz#16fd5138cb8b424bf8a759528a1972d72aad069d" - integrity sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w== +sass-loader@^7.1.0: + version "7.3.1" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.3.1.tgz#a5bf68a04bcea1c13ff842d747150f7ab7d0d23f" + integrity sha512-tuU7+zm0pTCynKYHpdqaPpe+MMTQ76I9TPZ7i4/5dZsigE350shQWe5EZNl5dBidM49TPET75tNqRbcsUZWeNA== dependencies: - clone-deep "^2.0.1" + clone-deep "^4.0.1" loader-utils "^1.0.1" - lodash.tail "^4.1.1" neo-async "^2.5.0" - pify "^3.0.0" - semver "^5.5.0" + pify "^4.0.1" + semver "^6.3.0" sass-resources-loader@^2.0.0: version "2.0.0" @@ -9776,7 +9749,7 @@ semver-intersect@^1.1.2: dependencies: semver "^5.0.0" -"semver@2 >=2.2.1 || 3.x || 4 || 5", "semver@2 || 3 || 4 || 5", semver@^5.0.0, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.5.0: +"semver@2 >=2.2.1 || 3.x || 4 || 5", "semver@2 || 3 || 4 || 5", semver@^5.0.0, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0: version "5.5.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477" integrity sha512-PqpAxfrEhlSUWge8dwIp4tZnQ25DIOthpiaHNIthsjEFQD6EvqUKUDM7L8O2rShkFccYo1VjJR0coWfNkCubRw== @@ -9786,7 +9759,12 @@ semver@^5.0.1: resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004" integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg== -semver@^6.1.1: +semver@^5.5.0: + version "5.7.1" + resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" + integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== + +semver@^6.1.1, semver@^6.3.0: version "6.3.0" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== @@ -9917,14 +9895,12 @@ sha.js@^2.4.0, sha.js@^2.4.8: inherits "^2.0.1" safe-buffer "^5.0.1" -shallow-clone@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-1.0.0.tgz#4480cd06e882ef68b2ad88a3ea54832e2c48b571" - integrity sha512-oeXreoKR/SyNJtRJMAKPDSvd28OqEwG4eR/xc856cRGBII7gX9lvAqDxusPm0846z/w/hWYjI1NpKwJ00NHzRA== +shallow-clone@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3" + integrity sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA== dependencies: - is-extendable "^0.1.1" - kind-of "^5.0.0" - mixin-object "^2.0.1" + kind-of "^6.0.2" shebang-command@^1.2.0: version "1.2.0"