diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html index b709f508e..e10d7d9ff 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.html +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.html @@ -8,26 +8,38 @@
- + +
- +
- +
- +
- +
- + +
@@ -44,23 +56,66 @@
- +
- +
- +
- +
-

This project is funded by Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

+

This project is funded by Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor +

incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui official deserunt mollit anim id est laborum. + ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in + voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non + proident, sunt in culpa qui official deserunt mollit anim id est laborum.

+
+
+
+

DATA MANAGEMENT PLANS

+
+

{{ dashboardStatisticsData?.totalDataManagementPlanCount }} Public Dmps

+

View All

+
+
+ +
+ +
+
+
+
+
+

DATASETS

+
+

{{ dashboardStatisticsData?.totalDataSetCount }} Public Datasets

+

View All

+
+
+ +
+
+
+ + +
+
+
+
+
+
diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss b/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss index fb784192c..a2bbd0d6a 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.scss @@ -93,3 +93,17 @@ width: 100%; } } + +.info { + display: flex; + flex-wrap: nowrap; +} + +.subtitle { + margin-bottom: 0px !important; +} + +.view-all { + margin-left: auto; + margin-bottom: 0px !important; +} diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts b/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts index e8c419022..4ed1018a6 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.component.ts @@ -15,6 +15,14 @@ import { SearchBarService } from '../../core/services/search-bar/search-bar.serv import { UserService } from '../../core/services/user/user.service'; import { SingleAutoCompleteConfiguration } from '../../library/auto-complete/single/single-auto-complete-configuration'; import { RequestItem } from '../../core/query/request-item'; +import { DmpListingModel } from '../../core/model/dmp/dmp-listing'; +import { DmpService } from '../../core/services/dmp/dmp.service'; +import { DataTableRequest } from '../../core/model/data-table/data-table-request'; +import { DmpCriteria } from '../../core/query/dmp/dmp-criteria'; +import { ExploreDmpCriteriaModel } from '../../core/query/explore-dmp/explore-dmp-criteria'; +import { DatasetListingModel } from '../../core/model/dataset/dataset-listing'; +import { DatasetService } from '../../core/services/dataset/dataset.service'; +import { ExploreDatasetCriteriaModel } from '../../core/query/explore-dataset/explore-dataset-criteria'; @Component({ selector: 'app-dashboard', @@ -35,10 +43,14 @@ export class DashboardComponent extends BaseComponent implements OnInit { filteredOptions: Observable; recentActivityTypeEnum = RecentActivityType; public search = false; + dmpListingItems: DmpListingModel[] = []; + datasetListingItems: DatasetListingModel[] = []; constructor( private router: Router, private projectService: ProjectService, + private dmpService: DmpService, + private datasetService: DatasetService, private dashboardService: DashboardService, private searchBarService: SearchBarService, private authentication: AuthService, @@ -90,6 +102,9 @@ export class DashboardComponent extends BaseComponent implements OnInit { this.filteredOptions = this.searchControl.valueChanges.flatMap(x => { return this.searchBarService.search(x); }); + + this.getPublicDmps(); + this.getPublicDatasets(); } public isAuthenticated(): boolean { @@ -120,4 +135,38 @@ export class DashboardComponent extends BaseComponent implements OnInit { default: throw new Error('Unsupported Activity Type '); } } + + getPublicDmps() { + const dmpCriteria = new ExploreDmpCriteriaModel(); + const fields: Array = new Array(); + fields.push('asc'); + const dataTableRequest: DataTableRequest = new DataTableRequest(0, 2, { fields: fields }); + dataTableRequest.criteria = dmpCriteria; + return this.dmpService.getPublicPaged(dataTableRequest).pipe(takeUntil(this._destroyed)).subscribe(result => { this.dmpListingItems = result.data; }); + } + + getPublicDatasets() { + const dmpCriteria = new ExploreDatasetCriteriaModel(); + const fields: Array = new Array(); + fields.push('asc'); + const dataTableRequest: DataTableRequest = new DataTableRequest(0, 4, { fields: fields }); + dataTableRequest.criteria = dmpCriteria; + return this.datasetService.getPublicPaged(dataTableRequest).pipe(takeUntil(this._destroyed)).subscribe(result => { this.datasetListingItems = result.data; }); + } + + dmpClicked(dmp: DmpListingModel) { + this.router.navigate(['/plans/publicEdit/' + dmp.id]); + } + + datasetClicked(dataset: DatasetListingModel) { + this.router.navigate(['/datasets/publicEdit/' + dataset.id]); + } + + viewAllPublicDmpsClicked() { + this.router.navigate(['/explore-plans']); + } + + viewAllPublicDatasetsClicked() { + this.router.navigate(['explore']); + } } diff --git a/dmp-frontend/src/app/ui/dashboard/dashboard.module.ts b/dmp-frontend/src/app/ui/dashboard/dashboard.module.ts index f396a5bd2..04d764ec5 100644 --- a/dmp-frontend/src/app/ui/dashboard/dashboard.module.ts +++ b/dmp-frontend/src/app/ui/dashboard/dashboard.module.ts @@ -10,6 +10,8 @@ import { RecentActivityComponent } from './recent-activity/recent-activity.compo import { RecentEditedActivityComponent } from './recent-edited-activity/recent-edited-activity.component'; import { RecentVisitedActivityComponent } from './recent-visited-activity/recent-visited-activity.component'; import { WizardComponent } from './wizard/wizard.component'; +import { DmpInfoCounterComponent } from './dmp-info-counter/dmp-info-counter.component'; +import { DatasetInfoCounterComponent } from './dataset-info-counter/dataset-info-counter.component'; @NgModule({ @@ -26,7 +28,9 @@ import { WizardComponent } from './wizard/wizard.component'; InfoCounterComponent, RecentVisitedActivityComponent, RecentEditedActivityComponent, - DraftsComponent + DraftsComponent, + DmpInfoCounterComponent, + DatasetInfoCounterComponent ], entryComponents: [ QuickWizardCreateAdd diff --git a/dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.css b/dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.css new file mode 100644 index 000000000..f12e49286 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.css @@ -0,0 +1,71 @@ +.listing-item { + background-color: #ffffff; +} + +.gray-container { + letter-spacing: 5px; + color: #aaaaaa; +} + +.container-header { + display: flex; + align-items: baseline; + margin-top: 0px; + padding-top: 10px; + text-transform: uppercase; +} + +.container-header p { + letter-spacing: 5px; + color: #aaaaaa; + /* padding: 5px 30px; */ + margin-bottom: 0px; +} + +/* h4 { + display: inline; + padding-left: 1em; +} */ + +/* .title h4 { + padding-left: 30px; + line-height: 2em; +} */ + +.about-item { + display: flex; + flex-wrap: wrap; +} + +.about-item .length { + color: rgb(70, 135, 240); +} + +.about-item .title { + margin: 2px 10px; +} + +.about-item p { + margin-left: auto; + margin-bottom: 0px; + padding-top: 7px; + color: #aaaaaa; +} + +.icon { + color: #92d050; +} + +hr { + margin: 0.6em 0em; +} + +.date { + display: flex; +} + +.date p { + margin-left: auto; + margin-bottom: 0em; + color: #aaaaaa; +} diff --git a/dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.html b/dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.html new file mode 100644 index 000000000..dffe1d066 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.html @@ -0,0 +1,31 @@ +
+
+
+
+

PROJECT ABBREVIATION

+
+
+
+
+ bookmark +

{{ dataset.label }}

+
+
+
+
+

{{dataset.description}}

+
+
+
+
+
+
{{ dataset.profile }}
+
+
+
+
+
+

Published {{dataset.created | date: "shortDate"}}

+
+
+
diff --git a/dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.spec.ts b/dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.spec.ts new file mode 100644 index 000000000..03b79759a --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DatasetInfoCounterComponent } from './dataset-info-counter.component'; + +describe('DatasetInfoCounterComponent', () => { + let component: DatasetInfoCounterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DatasetInfoCounterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DatasetInfoCounterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.ts b/dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.ts new file mode 100644 index 000000000..49c75cc03 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { DatasetListingModel } from '../../../core/model/dataset/dataset-listing'; + +@Component({ + selector: 'app-dataset-info-counter', + templateUrl: './dataset-info-counter.component.html', + styleUrls: ['./dataset-info-counter.component.css'] +}) +export class DatasetInfoCounterComponent implements OnInit { + + @Input() dataset: DatasetListingModel; + @Output() onClick: EventEmitter = new EventEmitter(); + + constructor() { } + + ngOnInit() { + } + + itemClicked() { + this.onClick.emit(this.dataset); + } +} diff --git a/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.css b/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.css new file mode 100644 index 000000000..ee94cbfe9 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.css @@ -0,0 +1,70 @@ +.listing-item { + background-color: #ffffff; +} + +.icon { + /* color: rgb(112, 173, 71); */ + color: #92d050; +} + +.gray-container { + letter-spacing: 5px; + color: #aaaaaa; +} + +.container-header { + display: flex; + align-items: baseline; + margin-top: 0px; + padding-top: 10px; + text-transform: uppercase; +} + +.container-header p { + letter-spacing: 5px; + color: #aaaaaa; + margin-bottom: 0px; +} + +/* .container-header :hover { + color: #4687e6; +} */ + +.about-item { + display: flex; + flex-wrap: wrap; +} + +.about-item .title { + margin: 2px 10px; +} + +.about-item p { + margin-left: auto; + margin-bottom: 0px; + padding-top: 7px; + color: #aaaaaa; +} + +.draft-icon { + color: #aaaaaa; +} + +.more-horiz { + font-size: 28px; + color: #aaaaaa; +} + +hr { + margin: 0.6em 0em; +} + +.date { + display: flex; +} + +.date p { + margin-left: auto; + margin-bottom: 0em; + color: #aaaaaa; +} diff --git a/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.html b/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.html new file mode 100644 index 000000000..0e9105067 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.html @@ -0,0 +1,32 @@ +
+
+
+
+

+ {{dmp.projectAbbreviation}}

+
+
+
+
+ radio_button_checked +

{{dmp.label}}

+
+
+
+
+

{{dmp.description}}

+
+
+
+
+
+
{{profile.label}}
+
+
+
+
+
+

Published {{dmp.creationTime | date: "shortDate"}}

+
+
+
diff --git a/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.spec.ts b/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.spec.ts new file mode 100644 index 000000000..25f83e934 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DmpInfoCounterComponent } from './dmp-info-counter.component'; + +describe('DmpInfoCounterComponent', () => { + let component: DmpInfoCounterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DmpInfoCounterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DmpInfoCounterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.ts b/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.ts new file mode 100644 index 000000000..c293ec0d0 --- /dev/null +++ b/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.ts @@ -0,0 +1,28 @@ +import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; +import { Router } from '@angular/router'; +import { DmpListingModel } from '../../../core/model/dmp/dmp-listing'; + +@Component({ + selector: 'app-dmp-info-counter', + templateUrl: './dmp-info-counter.component.html', + styleUrls: ['./dmp-info-counter.component.css'] +}) +export class DmpInfoCounterComponent implements OnInit { + + @Input() dmp: DmpListingModel; + @Output() onClick: EventEmitter = new EventEmitter(); + + constructor(public router: Router) { } + + ngOnInit() { + } + + itemClicked() { + this.onClick.emit(this.dmp); + } + + projectClicked(projectId: String) { + // this.router.navigate(['/datasets/publicEdit/' + projectId]); + } + +} diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html index ac10fbf41..3e4105789 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html +++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html @@ -34,6 +34,7 @@
{{ dataset.profile }}
+

Published {{ dataset.created | date: "shortDate"}}