From 01daf93d01a8e551e25abdc611e5a9554132e998 Mon Sep 17 00:00:00 2001 From: gaurav Date: Wed, 31 Aug 2022 11:14:43 +0530 Subject: [PATCH] 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', } };