From 01daf93d01a8e551e25abdc611e5a9554132e998 Mon Sep 17 00:00:00 2001 From: gaurav Date: Wed, 31 Aug 2022 11:14:43 +0530 Subject: [PATCH 1/4] Displaying Recent Submissions on the homepage --- config/config.example.yml | 6 ++ src/app/home-page/home-page.component.html | 1 + src/app/home-page/home-page.module.ts | 3 +- .../recent-item-list.component.html | 15 ++++ .../recent-item-list.component.scss | 0 .../recent-item-list.component.spec.ts | 74 +++++++++++++++++++ .../recent-item-list.component.ts | 72 ++++++++++++++++++ src/assets/i18n/en.json5 | 1 + src/config/app-config.interface.ts | 3 +- src/config/default-app-config.ts | 9 ++- src/config/homepage-config.interface.ts | 17 +++++ src/environments/environment.test.ts | 7 ++ 12 files changed, 205 insertions(+), 3 deletions(-) create mode 100644 src/app/home-page/recent-item-list/recent-item-list.component.html create mode 100644 src/app/home-page/recent-item-list/recent-item-list.component.scss create mode 100644 src/app/home-page/recent-item-list/recent-item-list.component.spec.ts create mode 100644 src/app/home-page/recent-item-list/recent-item-list.component.ts create mode 100644 src/config/homepage-config.interface.ts diff --git a/config/config.example.yml b/config/config.example.yml index ae733e0be5..b48b509a4d 100644 --- a/config/config.example.yml +++ b/config/config.example.yml @@ -258,3 +258,9 @@ mediaViewer: info: enableEndUserAgreement: true enablePrivacyStatement: true +# Home Page +homePage: + # The number of item showing in recent submission components + recentSubmissionsRpp: 5 + # Sort record of recent submission + recentSubmissionsSortField: 'dc.date.accessioned' diff --git a/src/app/home-page/home-page.component.html b/src/app/home-page/home-page.component.html index 0f7db182f0..f8073f4571 100644 --- a/src/app/home-page/home-page.component.html +++ b/src/app/home-page/home-page.component.html @@ -5,4 +5,5 @@ + diff --git a/src/app/home-page/home-page.module.ts b/src/app/home-page/home-page.module.ts index d304c78696..26fde41d8d 100644 --- a/src/app/home-page/home-page.module.ts +++ b/src/app/home-page/home-page.module.ts @@ -9,13 +9,14 @@ import { TopLevelCommunityListComponent } from './top-level-community-list/top-l import { StatisticsModule } from '../statistics/statistics.module'; import { ThemedHomeNewsComponent } from './home-news/themed-home-news.component'; import { ThemedHomePageComponent } from './themed-home-page.component'; - +import { RecentItemListComponent } from './recent-item-list/recent-item-list.component'; const DECLARATIONS = [ HomePageComponent, ThemedHomePageComponent, TopLevelCommunityListComponent, ThemedHomeNewsComponent, HomeNewsComponent, + RecentItemListComponent ]; @NgModule({ diff --git a/src/app/home-page/recent-item-list/recent-item-list.component.html b/src/app/home-page/recent-item-list/recent-item-list.component.html new file mode 100644 index 0000000000..8314580f1d --- /dev/null +++ b/src/app/home-page/recent-item-list/recent-item-list.component.html @@ -0,0 +1,15 @@ + +
+
+

{{'home.recent-submissions.head' | translate}}

+
+ + +
+ +
+ + + + \ No newline at end of file diff --git a/src/app/home-page/recent-item-list/recent-item-list.component.scss b/src/app/home-page/recent-item-list/recent-item-list.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/app/home-page/recent-item-list/recent-item-list.component.spec.ts b/src/app/home-page/recent-item-list/recent-item-list.component.spec.ts new file mode 100644 index 0000000000..bb267adabf --- /dev/null +++ b/src/app/home-page/recent-item-list/recent-item-list.component.spec.ts @@ -0,0 +1,74 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { SearchService } from 'src/app/core/shared/search/search.service'; +import { createSuccessfulRemoteDataObject } from 'src/app/shared/remote-data.utils'; +import { SearchServiceStub } from 'src/app/shared/testing/search-service.stub'; +import { createPaginatedList } from 'src/app/shared/testing/utils.test'; +import { PaginationService } from '../../core/pagination/pagination.service'; +import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub'; +import { RecentItemListComponent } from './recent-item-list.component'; +import { SearchConfigurationService } from '../../core/shared/search/search-configuration.service'; +import { SearchConfigurationServiceStub } from '../../shared/testing/search-configuration-service.stub'; +import { PaginatedSearchOptions } from '../../shared/search/models/paginated-search-options.model'; +import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model'; +import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model'; +import { ViewMode } from 'src/app/core/shared/view-mode.model'; + +describe('RecentItemListComponent', () => { + let component: RecentItemListComponent; + let fixture: ComponentFixture; + const emptyList = createSuccessfulRemoteDataObject(createPaginatedList([])); + let paginationService; + let searchConfigService: SearchConfigurationService; + const searchServiceStub = Object.assign(new SearchServiceStub(), { + search: () => observableOf(emptyList), + /* eslint-disable no-empty,@typescript-eslint/no-empty-function */ + clearDiscoveryRequests: () => {} + /* eslint-enable no-empty,@typescript-eslint/no-empty-function */ + }); + paginationService = new PaginationServiceStub(); + const mockSearchOptions = observableOf(new PaginatedSearchOptions({ + pagination: Object.assign(new PaginationComponentOptions(), { + id: 'search-page-configuration', + pageSize: 10, + currentPage: 1 + }), + sort: new SortOptions('dc.date.accessioned', SortDirection.DESC), + + })); + const searchConfigServiceStub = { + paginatedSearchOptions: mockSearchOptions + }; + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RecentItemListComponent], + providers: [ + { provide: SearchService, useValue: searchServiceStub }, + { provide: PaginationService, useValue: paginationService }, + { provide: SearchConfigurationService, useValue: searchConfigServiceStub }, + ], + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(RecentItemListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should call the navigate method on the Router with view mode list parameter as a parameter when setViewMode is called', () => { + component.onLoadMore(); + expect(paginationService.updateRouteWithUrl).toHaveBeenCalledWith('page-id', ['/search'], {page: 1},{ view: ViewMode.ListElement } + ); + }); +}); +function observableOf(emptyList: any): any { + throw new Error('Function not implemented.'); +} + 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 new file mode 100644 index 0000000000..294dac3954 --- /dev/null +++ b/src/app/home-page/recent-item-list/recent-item-list.component.ts @@ -0,0 +1,72 @@ +import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; +import { PaginatedSearchOptions } from '../../shared/search/models/paginated-search-options.model'; +import { fadeIn, fadeInOut } from '../../shared/animations/fade'; +import { RemoteData } from '../../core/data/remote-data'; +import { PaginatedList } from '../../core/data/paginated-list.model'; +import { Item } from '../../core/shared/item.model'; +import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model'; +import { PaginationService } from '../../core/pagination/pagination.service'; +import { SearchService } from '../../core/shared/search/search.service'; +import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model'; +import { environment } from '../../../environments/environment'; +import { ViewMode } from '../../core/shared/view-mode.model'; +import { SearchConfigurationService } from '../../core/shared/search/search-configuration.service'; +import { + toDSpaceObjectListRD +} from '../../core/shared/operators'; +import { + Observable, +} from 'rxjs'; +@Component({ + selector: 'ds-recent-item-list', + templateUrl: './recent-item-list.component.html', + styleUrls: ['./recent-item-list.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush, + animations: [ + fadeIn, + fadeInOut + ] +}) +export class RecentItemListComponent implements OnInit { + itemRD$: Observable>>; + paginationConfig: PaginationComponentOptions; + sortConfig: SortOptions; + /** + * The view-mode we're currently on + * @type {ViewMode} + */ + viewMode = ViewMode.ListElement; + constructor(private searchService: SearchService, + private paginationService: PaginationService, + public searchConfigurationService: SearchConfigurationService + ) { + + this.paginationConfig = Object.assign(new PaginationComponentOptions(), { + id: 'hp', + pageSize: environment.homePage.recentSubmissionsRpp, + currentPage: 1, + maxSize: 1 + }); + this.sortConfig = new SortOptions(environment.homePage.recentSubmissionsSortField, SortDirection.DESC); + } + ngOnInit(): void { + this.itemRD$ = this.searchService.search( + new PaginatedSearchOptions({ + pagination: this.paginationConfig, + sort: this.sortConfig, + }), + ).pipe(toDSpaceObjectListRD()) as Observable>>; + } + ngOnDestroy(): void { + this.paginationService.clearPagination(this.paginationConfig.id); + } + onLoadMore(): void { + this.paginationService.updateRouteWithUrl(this.searchConfigurationService.paginationID, ['search'], { + sortField: environment.homePage.recentSubmissionsSortField, + sortDirection: 'DESC' as SortDirection, + page: 1 + }); + } + +} + diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5 index 57863b3a69..4305723380 100644 --- a/src/assets/i18n/en.json5 +++ b/src/assets/i18n/en.json5 @@ -4727,5 +4727,6 @@ "person.orcid.registry.queue": "ORCID Registry Queue", "person.orcid.registry.auth": "ORCID Authorizations", + "home.recent-submissions.head": "Recent Submissions", } diff --git a/src/config/app-config.interface.ts b/src/config/app-config.interface.ts index f9d38d9b45..950ff7d313 100644 --- a/src/config/app-config.interface.ts +++ b/src/config/app-config.interface.ts @@ -17,7 +17,7 @@ import { BrowseByConfig } from './browse-by-config.interface'; import { BundleConfig } from './bundle-config.interface'; import { ActuatorsConfig } from './actuators.config'; import { InfoConfig } from './info-config.interface'; - +import { HomeConfig } from './homepage-config.interface'; interface AppConfig extends Config { ui: UIServerConfig; rest: ServerConfig; @@ -38,6 +38,7 @@ interface AppConfig extends Config { bundle: BundleConfig; actuators: ActuatorsConfig info: InfoConfig; + homePage: HomeConfig; } const APP_CONFIG = new InjectionToken('APP_CONFIG'); diff --git a/src/config/default-app-config.ts b/src/config/default-app-config.ts index d2d0608a03..f57425a79a 100644 --- a/src/config/default-app-config.ts +++ b/src/config/default-app-config.ts @@ -17,7 +17,7 @@ import { UIServerConfig } from './ui-server-config.interface'; import { BundleConfig } from './bundle-config.interface'; import { ActuatorsConfig } from './actuators.config'; import { InfoConfig } from './info-config.interface'; - +import { HomeConfig } from './homepage-config.interface'; export class DefaultAppConfig implements AppConfig { production = false; @@ -338,4 +338,11 @@ export class DefaultAppConfig implements AppConfig { enableEndUserAgreement: true, enablePrivacyStatement: true }; + // Home Pages + homePage: HomeConfig = { + //The number of item showing in recent submission components + recentSubmissionsRpp: 5, + //sort record of recent submission + recentSubmissionsSortField: 'dc.date.accessioned', + }; } diff --git a/src/config/homepage-config.interface.ts b/src/config/homepage-config.interface.ts new file mode 100644 index 0000000000..564cd7f9fb --- /dev/null +++ b/src/config/homepage-config.interface.ts @@ -0,0 +1,17 @@ +import { Config } from './config.interface'; + +/** + * Config that determines how the dropdown list of years are created for browse-by-date components + */ +export interface HomeConfig extends Config { + /** + * The number of item showing in recent submission components + */ + recentSubmissionsRpp: number; + + /** + * sort record of recent submission + */ + recentSubmissionsSortField: string; + +} diff --git a/src/environments/environment.test.ts b/src/environments/environment.test.ts index 4d466bd37b..bb7f8a2962 100644 --- a/src/environments/environment.test.ts +++ b/src/environments/environment.test.ts @@ -247,5 +247,12 @@ export const environment: BuildConfig = { info: { enableEndUserAgreement: true, enablePrivacyStatement: true, + }, + //Home Page + homePage: { + //The number of item showing in recent submission components + recentSubmissionsRpp: 5, + //sort record of recent submission + recentSubmissionsSortField: 'dc.date.accessioned', } }; From bcc71ce2e179b62edafb7f5df88a59bda5664801 Mon Sep 17 00:00:00 2001 From: gaurav Date: Wed, 31 Aug 2022 12:44:47 +0530 Subject: [PATCH 2/4] Trailing spaces remove --- .../recent-item-list/recent-item-list.component.spec.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/app/home-page/recent-item-list/recent-item-list.component.spec.ts b/src/app/home-page/recent-item-list/recent-item-list.component.spec.ts index bb267adabf..43ff48824c 100644 --- a/src/app/home-page/recent-item-list/recent-item-list.component.spec.ts +++ b/src/app/home-page/recent-item-list/recent-item-list.component.spec.ts @@ -1,6 +1,4 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; - import { SearchService } from 'src/app/core/shared/search/search.service'; import { createSuccessfulRemoteDataObject } from 'src/app/shared/remote-data.utils'; import { SearchServiceStub } from 'src/app/shared/testing/search-service.stub'; @@ -9,7 +7,6 @@ import { PaginationService } from '../../core/pagination/pagination.service'; import { PaginationServiceStub } from '../../shared/testing/pagination-service.stub'; import { RecentItemListComponent } from './recent-item-list.component'; import { SearchConfigurationService } from '../../core/shared/search/search-configuration.service'; -import { SearchConfigurationServiceStub } from '../../shared/testing/search-configuration-service.stub'; import { PaginatedSearchOptions } from '../../shared/search/models/paginated-search-options.model'; import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model'; import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model'; @@ -35,7 +32,6 @@ describe('RecentItemListComponent', () => { currentPage: 1 }), sort: new SortOptions('dc.date.accessioned', SortDirection.DESC), - })); const searchConfigServiceStub = { paginatedSearchOptions: mockSearchOptions From 0840bfd8cef02fd25d3926a6c12428063b1c3555 Mon Sep 17 00:00:00 2001 From: gaurav Date: Wed, 31 Aug 2022 17:20:17 +0530 Subject: [PATCH 3/4] bug resolve --- .../recent-item-list.component.spec.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/app/home-page/recent-item-list/recent-item-list.component.spec.ts b/src/app/home-page/recent-item-list/recent-item-list.component.spec.ts index 43ff48824c..87152f53ef 100644 --- a/src/app/home-page/recent-item-list/recent-item-list.component.spec.ts +++ b/src/app/home-page/recent-item-list/recent-item-list.component.spec.ts @@ -11,13 +11,12 @@ import { PaginatedSearchOptions } from '../../shared/search/models/paginated-sea import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model'; import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model'; import { ViewMode } from 'src/app/core/shared/view-mode.model'; - +import { of as observableOf } from 'rxjs'; describe('RecentItemListComponent', () => { let component: RecentItemListComponent; let fixture: ComponentFixture; const emptyList = createSuccessfulRemoteDataObject(createPaginatedList([])); let paginationService; - let searchConfigService: SearchConfigurationService; const searchServiceStub = Object.assign(new SearchServiceStub(), { search: () => observableOf(emptyList), /* eslint-disable no-empty,@typescript-eslint/no-empty-function */ @@ -60,11 +59,8 @@ describe('RecentItemListComponent', () => { it('should call the navigate method on the Router with view mode list parameter as a parameter when setViewMode is called', () => { component.onLoadMore(); - expect(paginationService.updateRouteWithUrl).toHaveBeenCalledWith('page-id', ['/search'], {page: 1},{ view: ViewMode.ListElement } - ); + expect(paginationService.updateRouteWithUrl).toHaveBeenCalledWith(undefined, ['search'], Object({ sortField: 'dc.date.accessioned', sortDirection: 'DESC', page: 1 })); }); }); -function observableOf(emptyList: any): any { - throw new Error('Function not implemented.'); -} + From ac2922e59d03b5e83c3003a901e338cff64f71a2 Mon Sep 17 00:00:00 2001 From: gaurav Date: Wed, 14 Sep 2022 11:35:29 +0530 Subject: [PATCH 4/4] no recent submissions should be displayed if pageSize is 0 and changing the configuration structure --- config/config.example.yml | 5 +++-- src/app/home-page/home-page.component.html | 2 +- src/app/home-page/home-page.component.ts | 5 +++-- .../recent-item-list.component.ts | 6 +++--- src/config/default-app-config.ts | 10 ++++++---- src/config/homepage-config.interface.ts | 15 +++++++++------ src/environments/environment.test.ts | 9 +++++---- 7 files changed, 30 insertions(+), 22 deletions(-) diff --git a/config/config.example.yml b/config/config.example.yml index b48b509a4d..4814c826f1 100644 --- a/config/config.example.yml +++ b/config/config.example.yml @@ -260,7 +260,8 @@ info: enablePrivacyStatement: true # Home Page homePage: + recentSubmissions: # The number of item showing in recent submission components - recentSubmissionsRpp: 5 + pageSize: 5 # Sort record of recent submission - recentSubmissionsSortField: 'dc.date.accessioned' + sortField: 'dc.date.accessioned' diff --git a/src/app/home-page/home-page.component.html b/src/app/home-page/home-page.component.html index f8073f4571..1000dbe9a4 100644 --- a/src/app/home-page/home-page.component.html +++ b/src/app/home-page/home-page.component.html @@ -5,5 +5,5 @@ - + diff --git a/src/app/home-page/home-page.component.ts b/src/app/home-page/home-page.component.ts index 65caa01430..c151cbbb16 100644 --- a/src/app/home-page/home-page.component.ts +++ b/src/app/home-page/home-page.component.ts @@ -3,7 +3,7 @@ import { map } from 'rxjs/operators'; import { ActivatedRoute } from '@angular/router'; import { Observable } from 'rxjs'; import { Site } from '../core/shared/site.model'; - +import { environment } from '../../environments/environment'; @Component({ selector: 'ds-home-page', styleUrls: ['./home-page.component.scss'], @@ -12,10 +12,11 @@ import { Site } from '../core/shared/site.model'; export class HomePageComponent implements OnInit { site$: Observable; - + recentSubmissionspageSize: number; constructor( private route: ActivatedRoute, ) { + this.recentSubmissionspageSize = environment.homePage.recentSubmissions.pageSize; } ngOnInit(): void { 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 294dac3954..df5359386a 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 @@ -43,11 +43,11 @@ export class RecentItemListComponent implements OnInit { this.paginationConfig = Object.assign(new PaginationComponentOptions(), { id: 'hp', - pageSize: environment.homePage.recentSubmissionsRpp, + pageSize: environment.homePage.recentSubmissions.pageSize, currentPage: 1, maxSize: 1 }); - this.sortConfig = new SortOptions(environment.homePage.recentSubmissionsSortField, SortDirection.DESC); + this.sortConfig = new SortOptions(environment.homePage.recentSubmissions.sortField, SortDirection.DESC); } ngOnInit(): void { this.itemRD$ = this.searchService.search( @@ -62,7 +62,7 @@ export class RecentItemListComponent implements OnInit { } onLoadMore(): void { this.paginationService.updateRouteWithUrl(this.searchConfigurationService.paginationID, ['search'], { - sortField: environment.homePage.recentSubmissionsSortField, + sortField: environment.homePage.recentSubmissions.sortField, sortDirection: 'DESC' as SortDirection, page: 1 }); diff --git a/src/config/default-app-config.ts b/src/config/default-app-config.ts index f57425a79a..b1b64d1c87 100644 --- a/src/config/default-app-config.ts +++ b/src/config/default-app-config.ts @@ -340,9 +340,11 @@ export class DefaultAppConfig implements AppConfig { }; // Home Pages homePage: HomeConfig = { - //The number of item showing in recent submission components - recentSubmissionsRpp: 5, - //sort record of recent submission - recentSubmissionsSortField: 'dc.date.accessioned', + recentSubmissions: { + //The number of item showing in recent submission components + pageSize: 5, + //sort record of recent submission + sortField: 'dc.date.accessioned', + } }; } diff --git a/src/config/homepage-config.interface.ts b/src/config/homepage-config.interface.ts index 564cd7f9fb..1f955358e0 100644 --- a/src/config/homepage-config.interface.ts +++ b/src/config/homepage-config.interface.ts @@ -4,14 +4,17 @@ import { Config } from './config.interface'; * Config that determines how the dropdown list of years are created for browse-by-date components */ export interface HomeConfig extends Config { - /** + recentSubmissions: { + /** * The number of item showing in recent submission components */ - recentSubmissionsRpp: number; + pageSize: number; + + /** + * sort record of recent submission + */ + sortField: string; + } - /** - * sort record of recent submission - */ - recentSubmissionsSortField: string; } diff --git a/src/environments/environment.test.ts b/src/environments/environment.test.ts index bb7f8a2962..6fe4dd6516 100644 --- a/src/environments/environment.test.ts +++ b/src/environments/environment.test.ts @@ -250,9 +250,10 @@ export const environment: BuildConfig = { }, //Home Page homePage: { - //The number of item showing in recent submission components - recentSubmissionsRpp: 5, - //sort record of recent submission - recentSubmissionsSortField: 'dc.date.accessioned', + recentSubmissions: { + pageSize: 5, + //sort record of recent submission + sortField: 'dc.date.accessioned', + } } };