From 2abbbd1a20de67c180a631fc2f879d8e685d96f9 Mon Sep 17 00:00:00 2001 From: Vlad Nouski Date: Mon, 6 Nov 2023 18:13:17 +0100 Subject: [PATCH 1/5] [DSC-1336] feature: guard at the begining of the components init --- .../collection-page.component.ts | 14 ++++++++++++-- .../recent-item-list.component.ts | 6 ++++++ .../browse-most-elements.component.ts | 8 +++++++- .../counters-section.component.ts | 10 ++++++++-- src/app/shared/search/search.component.ts | 18 +++++++++++++++++- 5 files changed, 50 insertions(+), 6 deletions(-) diff --git a/src/app/collection-page/collection-page.component.ts b/src/app/collection-page/collection-page.component.ts index 12e1d0d619a..c199c73b75a 100644 --- a/src/app/collection-page/collection-page.component.ts +++ b/src/app/collection-page/collection-page.component.ts @@ -1,4 +1,5 @@ -import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { ChangeDetectionStrategy, Component, OnInit, Inject, PLATFORM_ID } from '@angular/core'; +import { isPlatformServer } from '@angular/common'; import { ActivatedRoute, Router } from '@angular/router'; import { BehaviorSubject, combineLatest as observableCombineLatest, Observable, Subject } from 'rxjs'; import { filter, map, mergeMap, startWith, switchMap, take } from 'rxjs/operators'; @@ -60,13 +61,14 @@ export class CollectionPageComponent implements OnInit { collectionPageRoute$: Observable; constructor( + @Inject(PLATFORM_ID) private platformId: Object, private collectionDataService: CollectionDataService, private searchService: SearchService, private route: ActivatedRoute, private router: Router, private authService: AuthService, private paginationService: PaginationService, - private authorizationDataService: AuthorizationDataService, + private authorizationDataService: AuthorizationDataService ) { this.paginationConfig = new PaginationComponentOptions(); this.paginationConfig.id = 'cp'; @@ -77,6 +79,10 @@ export class CollectionPageComponent implements OnInit { } ngOnInit(): void { + if (isPlatformServer(this.platformId)) { + return; + } + this.collectionRD$ = this.route.data.pipe( map((data) => data.dso as RemoteData), redirectOn4xx(this.router, this.authService), @@ -123,6 +129,10 @@ export class CollectionPageComponent implements OnInit { ); } + isServerRendered(): boolean { + return isPlatformServer(this.platformId); + } + isNotEmpty(object: any) { return isNotEmpty(object); } diff --git a/src/app/home-page/recent-item-list/recent-item-list.component.ts b/src/app/home-page/recent-item-list/recent-item-list.component.ts index 408b79b79bb..f114330b185 100644 --- a/src/app/home-page/recent-item-list/recent-item-list.component.ts +++ b/src/app/home-page/recent-item-list/recent-item-list.component.ts @@ -1,4 +1,6 @@ import { ChangeDetectionStrategy, Component, ElementRef, Inject, OnInit, PLATFORM_ID } from '@angular/core'; +import { isPlatformServer } from '@angular/common'; + import { PaginatedSearchOptions } from '../../shared/search/models/paginated-search-options.model'; import { fadeIn, fadeInOut } from '../../shared/animations/fade'; import { RemoteData } from '../../core/data/remote-data'; @@ -62,6 +64,10 @@ export class RecentItemListComponent implements OnInit { this.sortConfig = new SortOptions(environment.homePage.recentSubmissions.sortField, SortDirection.DESC); } ngOnInit(): void { + if (isPlatformServer(this.platformId)) { + return; + } + const linksToFollow: FollowLinkConfig[] = []; if (this.appConfig.browseBy.showThumbnails) { linksToFollow.push(followLink('thumbnail')); diff --git a/src/app/shared/browse-most-elements/browse-most-elements.component.ts b/src/app/shared/browse-most-elements/browse-most-elements.component.ts index 63af28ad53c..ed616957ad6 100644 --- a/src/app/shared/browse-most-elements/browse-most-elements.component.ts +++ b/src/app/shared/browse-most-elements/browse-most-elements.component.ts @@ -1,4 +1,5 @@ -import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core'; +import { isPlatformServer } from '@angular/common'; import { SearchService } from '../../core/shared/search/search.service'; import { PaginatedSearchOptions } from '../search/models/paginated-search-options.model'; @@ -37,12 +38,17 @@ export class BrowseMostElementsComponent implements OnInit { constructor( @Inject(APP_CONFIG) protected appConfig: AppConfig, + @Inject(PLATFORM_ID) private platformId: Object, private searchService: SearchService, private cdr: ChangeDetectorRef) { } ngOnInit() { + if (isPlatformServer(this.platformId)) { + return; + } + const showThumbnails = this.showThumbnails ?? this.appConfig.browseBy.showThumbnails; const followLinks = showThumbnails ? [followLink('thumbnail')] : []; this.searchService.search(this.paginatedSearchOptions, null, true, true, ...followLinks).pipe( diff --git a/src/app/shared/explore/section-component/counters-section/counters-section.component.ts b/src/app/shared/explore/section-component/counters-section/counters-section.component.ts index db50de91833..3d7860d5e38 100644 --- a/src/app/shared/explore/section-component/counters-section/counters-section.component.ts +++ b/src/app/shared/explore/section-component/counters-section/counters-section.component.ts @@ -1,4 +1,5 @@ -import { Component, Inject, Input, OnInit } from '@angular/core'; +import { Component, Inject, Input, OnInit, PLATFORM_ID } from '@angular/core'; +import { isPlatformServer } from '@angular/common'; import { BehaviorSubject, forkJoin, Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @@ -39,11 +40,16 @@ export class CountersSectionComponent implements OnInit { constructor(private searchService: SearchService, private uuidService: UUIDService, - @Inject(NativeWindowService) protected _window: NativeWindowRef) { + @Inject(PLATFORM_ID) private platformId: Object, + @Inject(NativeWindowService) protected _window: NativeWindowRef,) { } ngOnInit() { + if (isPlatformServer(this.platformId)) { + return; + } + this.counterData$ = forkJoin( this.countersSection.counterSettingsList.map((counterSettings: CountersSettings) => this.searchService.search(new PaginatedSearchOptions({ diff --git a/src/app/shared/search/search.component.ts b/src/app/shared/search/search.component.ts index 4949c58bac4..802271164a2 100644 --- a/src/app/shared/search/search.component.ts +++ b/src/app/shared/search/search.component.ts @@ -6,9 +6,11 @@ import { Input, OnDestroy, OnInit, - Output + Output, + PLATFORM_ID } from '@angular/core'; import { Router } from '@angular/router'; +import { isPlatformServer } from '@angular/common'; import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs'; import { debounceTime, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators'; @@ -214,6 +216,11 @@ export class SearchComponent implements OnInit, OnDestroy { */ @Input() showFilterToggle = false; + /** + * Defines whether to show the toggle button to Show/Hide filter + */ + @Input() renderOnServerSide = true; + /** * Defines whether to show the toggle button to Show/Hide chart */ @@ -333,6 +340,7 @@ export class SearchComponent implements OnInit, OnDestroy { protected searchManager: SearchManager, protected sidebarService: SidebarService, protected windowService: HostWindowService, + @Inject(PLATFORM_ID) private platformId: Object, @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService, protected routeService: RouteService, protected router: Router) { @@ -347,6 +355,14 @@ export class SearchComponent implements OnInit, OnDestroy { * If something changes, update the list of scopes for the dropdown */ ngOnInit(): void { + // if (!this.renderOnServerSide) { + // return; + // } + + if (isPlatformServer(this.platformId)) { + return; + } + if (this.useUniquePageId) { // Create an unique pagination id related to the instance of the SearchComponent this.paginationId = uniqueId(this.paginationId); From d4640339ef0f3f6c27a3fd52c8dff2535c97f209 Mon Sep 17 00:00:00 2001 From: Vlad Nouski Date: Tue, 7 Nov 2023 08:32:05 +0100 Subject: [PATCH 2/5] [DSC-1336] feature: search page is not rendered with ssr --- .../collection-page/collection-page.component.ts | 4 ---- src/app/search-page/search-page.component.html | 2 +- src/app/shared/search/search.component.ts | 13 +++---------- src/app/shared/search/themed-search.component.ts | 2 ++ 4 files changed, 6 insertions(+), 15 deletions(-) diff --git a/src/app/collection-page/collection-page.component.ts b/src/app/collection-page/collection-page.component.ts index c199c73b75a..e44e8d89458 100644 --- a/src/app/collection-page/collection-page.component.ts +++ b/src/app/collection-page/collection-page.component.ts @@ -129,10 +129,6 @@ export class CollectionPageComponent implements OnInit { ); } - isServerRendered(): boolean { - return isPlatformServer(this.platformId); - } - isNotEmpty(object: any) { return isNotEmpty(object); } diff --git a/src/app/search-page/search-page.component.html b/src/app/search-page/search-page.component.html index ae9beb80d3f..86ed2bff50d 100644 --- a/src/app/search-page/search-page.component.html +++ b/src/app/search-page/search-page.component.html @@ -1 +1 @@ - + diff --git a/src/app/shared/search/search.component.ts b/src/app/shared/search/search.component.ts index 802271164a2..194685914a3 100644 --- a/src/app/shared/search/search.component.ts +++ b/src/app/shared/search/search.component.ts @@ -6,11 +6,9 @@ import { Input, OnDestroy, OnInit, - Output, - PLATFORM_ID + Output } from '@angular/core'; import { Router } from '@angular/router'; -import { isPlatformServer } from '@angular/common'; import { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs'; import { debounceTime, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators'; @@ -340,10 +338,9 @@ export class SearchComponent implements OnInit, OnDestroy { protected searchManager: SearchManager, protected sidebarService: SidebarService, protected windowService: HostWindowService, - @Inject(PLATFORM_ID) private platformId: Object, @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService, protected routeService: RouteService, - protected router: Router) { + protected router: Router,) { this.isXsOrSm$ = this.windowService.isXsOrSm(); } @@ -355,11 +352,7 @@ export class SearchComponent implements OnInit, OnDestroy { * If something changes, update the list of scopes for the dropdown */ ngOnInit(): void { - // if (!this.renderOnServerSide) { - // return; - // } - - if (isPlatformServer(this.platformId)) { + if (!this.renderOnServerSide) { return; } diff --git a/src/app/shared/search/themed-search.component.ts b/src/app/shared/search/themed-search.component.ts index 6bd1555f1b8..b63ada601fb 100644 --- a/src/app/shared/search/themed-search.component.ts +++ b/src/app/shared/search/themed-search.component.ts @@ -84,6 +84,8 @@ export class ThemedSearchComponent extends ThemedComponent { @Input() trackStatistics = false; + @Input() renderOnServerSide = true; + @Output() resultFound: EventEmitter> = new EventEmitter>(); @Output() deselectObject: EventEmitter = new EventEmitter(); From 778fa0c91a4617c33c10c40ba57f1ecf2d9fdce9 Mon Sep 17 00:00:00 2001 From: Vlad Nouski Date: Mon, 13 Nov 2023 08:36:53 +0100 Subject: [PATCH 3/5] [DSC-1336] refactor: code --- src/app/collection-page/collection-page.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/collection-page/collection-page.component.ts b/src/app/collection-page/collection-page.component.ts index e44e8d89458..ba7193dbd3e 100644 --- a/src/app/collection-page/collection-page.component.ts +++ b/src/app/collection-page/collection-page.component.ts @@ -82,7 +82,7 @@ export class CollectionPageComponent implements OnInit { if (isPlatformServer(this.platformId)) { return; } - + this.collectionRD$ = this.route.data.pipe( map((data) => data.dso as RemoteData), redirectOn4xx(this.router, this.authService), From a454efcd81a3bdf253aea7ab81a84c85b1320853 Mon Sep 17 00:00:00 2001 From: Vlad Nouski Date: Tue, 14 Nov 2023 14:35:12 +0100 Subject: [PATCH 4/5] [DSC-1336] refactor: code --- src/app/search-page/configuration-search-page.component.ts | 5 +++-- src/app/search-page/search-tracker.component.ts | 5 +++-- src/app/shared/search/search.component.ts | 7 +++++-- src/app/shared/search/themed-search.component.ts | 4 ++-- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/app/search-page/configuration-search-page.component.ts b/src/app/search-page/configuration-search-page.component.ts index 7862339dc35..7c8f76e6487 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 { SidebarService } from '../shared/sidebar/sidebar.service'; import { SearchComponent } from '../shared/search/search.component'; -import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Inject, PLATFORM_ID } from '@angular/core'; import { pushInOut } from '../shared/animations/push'; import { SEARCH_CONFIG_SERVICE } from '../my-dspace-page/my-dspace-page.component'; import { SearchConfigurationService } from '../core/shared/search/search-configuration.service'; @@ -32,9 +32,10 @@ export class ConfigurationSearchPageComponent extends SearchComponent { protected searchManager: SearchManager, protected sidebarService: SidebarService, protected windowService: HostWindowService, + @Inject(PLATFORM_ID) public platformId: any, @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService, protected routeService: RouteService, protected router: Router) { - super(service, searchManager, sidebarService, windowService, searchConfigService, routeService, router); + super(service, searchManager, sidebarService, windowService, searchConfigService, platformId, routeService, router); } } diff --git a/src/app/search-page/search-tracker.component.ts b/src/app/search-page/search-tracker.component.ts index 43b039a1d15..d4d754f59ef 100644 --- a/src/app/search-page/search-tracker.component.ts +++ b/src/app/search-page/search-tracker.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject, OnInit } from '@angular/core'; +import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core'; import { Angulartics2 } from 'angulartics2'; import { map, switchMap } from 'rxjs/operators'; import { SearchComponent } from '../shared/search/search.component'; @@ -37,12 +37,13 @@ export class SearchTrackerComponent extends SearchComponent implements OnInit { protected searchManager: SearchManager, protected sidebarService: SidebarService, protected windowService: HostWindowService, + @Inject(PLATFORM_ID) public platformId: any, @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService, protected routeService: RouteService, public angulartics2: Angulartics2, protected router: Router ) { - super(service, searchManager, sidebarService, windowService, searchConfigService, routeService, router); + super(service, searchManager, sidebarService, windowService, searchConfigService, platformId, routeService, router); } ngOnInit(): void { diff --git a/src/app/shared/search/search.component.ts b/src/app/shared/search/search.component.ts index 194685914a3..24de77959a2 100644 --- a/src/app/shared/search/search.component.ts +++ b/src/app/shared/search/search.component.ts @@ -6,7 +6,8 @@ import { Input, OnDestroy, OnInit, - Output + Output, + PLATFORM_ID } from '@angular/core'; import { Router } from '@angular/router'; @@ -46,6 +47,7 @@ import { SearchFilterConfig } from './models/search-filter-config.model'; import { WorkspaceItem } from '../../core/submission/models/workspaceitem.model'; import { SearchManager } from '../../core/browse/search-manager'; import { AlertType } from '../alert/aletr-type'; +import { isPlatformServer } from '@angular/common'; @Component({ selector: 'ds-search', @@ -338,6 +340,7 @@ export class SearchComponent implements OnInit, OnDestroy { protected searchManager: SearchManager, protected sidebarService: SidebarService, protected windowService: HostWindowService, + @Inject(PLATFORM_ID) public platformId: any, @Inject(SEARCH_CONFIG_SERVICE) public searchConfigService: SearchConfigurationService, protected routeService: RouteService, protected router: Router,) { @@ -352,7 +355,7 @@ export class SearchComponent implements OnInit, OnDestroy { * If something changes, update the list of scopes for the dropdown */ ngOnInit(): void { - if (!this.renderOnServerSide) { + if (!this.renderOnServerSide && isPlatformServer(this.platformId)) { return; } diff --git a/src/app/shared/search/themed-search.component.ts b/src/app/shared/search/themed-search.component.ts index b63ada601fb..841be50d04e 100644 --- a/src/app/shared/search/themed-search.component.ts +++ b/src/app/shared/search/themed-search.component.ts @@ -20,7 +20,7 @@ import { AlertType } from '../alert/aletr-type'; templateUrl: '../theme-support/themed.component.html', }) export class ThemedSearchComponent extends ThemedComponent { - protected inAndOutputNames: (keyof SearchComponent & keyof this)[] = ['configurationList', 'context', 'configuration', 'fixedFilterQuery', 'forcedEmbeddedKeys', 'useCachedVersionIfAvailable', 'collapseCharts', 'collapseFilters', 'inPlaceSearch', 'linkType', 'paginationId', 'projection', 'searchEnabled', 'sideBarWidth', 'searchFormPlaceholder', 'selectable', 'selectionConfig', 'showCharts', 'showExport', 'showSidebar', 'showViewModes', 'useUniquePageId', 'viewModeList', 'showScopeSelector', 'showFilterToggle', 'showChartsToggle', 'showCsvExport', 'resultFound', 'deselectObject', 'selectObject', 'customEvent', 'trackStatistics', 'searchResultNotice', 'searchResultNoticeType', 'showSearchResultNotice']; + protected inAndOutputNames: (keyof SearchComponent & keyof this)[] = ['configurationList', 'context', 'configuration', 'fixedFilterQuery', 'forcedEmbeddedKeys', 'useCachedVersionIfAvailable', 'collapseCharts', 'collapseFilters', 'inPlaceSearch', 'linkType', 'paginationId', 'projection', 'searchEnabled', 'sideBarWidth', 'searchFormPlaceholder', 'selectable', 'selectionConfig', 'showCharts', 'showExport', 'showSidebar', 'showViewModes', 'useUniquePageId', 'viewModeList', 'showScopeSelector', 'showFilterToggle', 'showChartsToggle', 'showCsvExport', 'resultFound', 'deselectObject', 'selectObject', 'customEvent', 'trackStatistics', 'searchResultNotice', 'searchResultNoticeType', 'showSearchResultNotice', 'renderOnServerSide']; @Input() configurationList: SearchConfigurationOption[] = []; @@ -84,7 +84,7 @@ export class ThemedSearchComponent extends ThemedComponent { @Input() trackStatistics = false; - @Input() renderOnServerSide = true; + @Input() renderOnServerSide = false; @Output() resultFound: EventEmitter> = new EventEmitter>(); From f1d1f5b58be42ae9e01a8c9df866680907050552 Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Mon, 27 Nov 2023 17:47:50 +0100 Subject: [PATCH 5/5] [DSC-1336] Show loading status during SSR --- src/app/collection-page/collection-page.component.html | 2 +- src/app/shared/search/search.component.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/collection-page/collection-page.component.html b/src/app/collection-page/collection-page.component.html index 6b84301e277..3949b2671f8 100644 --- a/src/app/collection-page/collection-page.component.html +++ b/src/app/collection-page/collection-page.component.html @@ -74,7 +74,7 @@

{{'collection.page.browse.recent.head' | translate}}

- diff --git a/src/app/shared/search/search.component.ts b/src/app/shared/search/search.component.ts index 0a3a3509d38..26c9d68e0ab 100644 --- a/src/app/shared/search/search.component.ts +++ b/src/app/shared/search/search.component.ts @@ -381,6 +381,7 @@ export class SearchComponent implements OnInit, OnDestroy { */ ngOnInit(): void { if (!this.renderOnServerSide && isPlatformServer(this.platformId)) { + this.initialized$.next(true); return; }