MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Apply slide 2 of the design spec to the Public Dashboard Page (Ticket #81)

This commit is contained in:
apapachristou 2019-05-15 18:21:04 +03:00
parent bb3fb91ba8
commit 9b145b5d7b
14 changed files with 441 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
dmp-frontend/src/app/ui/dashboard/dashboard.component.html
View File

@ -8,26 +8,38 @@
<div *ngIf="this.isAuthenticated()" class="container-fluid">
<div class="row" *ngIf="this.isAuthenticated()">
<div class="col-sm-6 col-md-6 col-lg-6">
<app-wizard title="{{'QUICKWIZARD.CREATE-ADD.CREATE.TITLE' | translate}}" subtitle="Follow the steps of the wizard" routerLink="/quick-wizard" icon="play_circle_outline"></app-wizard>
<app-wizard title="{{'QUICKWIZARD.CREATE-ADD.CREATE.TITLE' | translate}}"
subtitle="Follow the steps of the wizard" routerLink="/quick-wizard" icon="play_circle_outline">
</app-wizard>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<app-wizard title="{{'QUICKWIZARD.CREATE-ADD.ADD.TITLE' | translate}}" subtitle="Follow the steps of the wizard" routerLink="/datasetcreatewizard" icon="play_circle_outline"></app-wizard>
<app-wizard title="{{'QUICKWIZARD.CREATE-ADD.ADD.TITLE' | translate}}"
subtitle="Follow the steps of the wizard" routerLink="/datasetcreatewizard"
icon="play_circle_outline"></app-wizard>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.MY-DMPS'" [subtitle]="dashboardStatisticsData?.totalDataManagementPlanCount" routerLink='/plans' buttonRedirectLink="/plans/new" icon="view_agenda"></app-info-counter>
<app-info-counter [title]="'DASHBOARD.MY-DMPS'"
[subtitle]="dashboardStatisticsData?.totalDataManagementPlanCount" routerLink='/plans'
buttonRedirectLink="/plans/new" icon="view_agenda"></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.MY-DATASETS'" [subtitle]="dashboardStatisticsData?.totalDataSetCount" routerLink='/datasets' buttonRedirectLink="/datasets/new" icon="library_books"></app-info-counter>
<app-info-counter [title]="'DASHBOARD.MY-DATASETS'"
[subtitle]="dashboardStatisticsData?.totalDataSetCount" routerLink='/datasets'
buttonRedirectLink="/datasets/new" icon="library_books"></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.MY-PROJECTS'" [subtitle]="dashboardStatisticsData?.totalProjectCount" routerLink='/projects' buttonRedirectLink="/projects/new" icon="work_outline"></app-info-counter>
<app-info-counter [title]="'DASHBOARD.MY-PROJECTS'"
[subtitle]="dashboardStatisticsData?.totalProjectCount" routerLink='/projects'
buttonRedirectLink="/projects/new" icon="work_outline"></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter title="Related Organizations" [subtitle]="dashboardStatisticsData?.totalOrganisationCount" icon="scatter_plot"></app-info-counter>
<app-info-counter title="Related Organizations"
[subtitle]="dashboardStatisticsData?.totalOrganisationCount" icon="scatter_plot">
</app-info-counter>
</div>
</div>
<div class="row">
@ -44,23 +56,66 @@
<div *ngIf="!this.isAuthenticated()" class="container-fluid">
<div class="row non-auth-stats">
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.DMPS'" [subtitle]="dashboardStatisticsData?.totalDataManagementPlanCount" routerLink='/plans' buttonRedirectLink="/plans/new" icon="view_agenda"></app-info-counter>
<app-info-counter [title]="'DASHBOARD.DMPS'"
[subtitle]="dashboardStatisticsData?.totalDataManagementPlanCount" routerLink='/plans'
buttonRedirectLink="/plans/new" icon="view_agenda"></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.DATASETS'" [subtitle]="dashboardStatisticsData?.totalDataSetCount" routerLink='/datasets' buttonRedirectLink="/datasets/new" icon="library_books"></app-info-counter>
<app-info-counter [title]="'DASHBOARD.DATASETS'" [subtitle]="dashboardStatisticsData?.totalDataSetCount"
routerLink='/datasets' buttonRedirectLink="/datasets/new" icon="library_books"></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.PROJECTS'" [subtitle]="dashboardStatisticsData?.totalProjectCount" routerLink='/projects' buttonRedirectLink="/projects/new" icon="work_outline"></app-info-counter>
<app-info-counter [title]="'DASHBOARD.PROJECTS'" [subtitle]="dashboardStatisticsData?.totalProjectCount"
routerLink='/projects' buttonRedirectLink="/projects/new" icon="work_outline"></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter title="Related Organizations" [subtitle]="dashboardStatisticsData?.totalOrganisationCount" icon="scatter_plot"></app-info-counter>
<app-info-counter title="Related Organizations"
[subtitle]="dashboardStatisticsData?.totalOrganisationCount" icon="scatter_plot"></app-info-counter>
</div>
</div>
<div class="d-flex flex-column align-items-center non-auth-title-container">
<h4>This project is funded by Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</h4>
<h4>This project is funded by Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</h4>
<p>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.
</p>
</div>
<div class="row">
<div class="col-lg-6 mt-4">
<div class="title">
<h4> DATA MANAGEMENT PLANS </h4>
<div class="info">
<p class="subtitle">{{ dashboardStatisticsData?.totalDataManagementPlanCount }} Public Dmps</p>
<p class="view-all" (click)=viewAllPublicDmpsClicked()>View All</p>
</div>
</div>
<mat-divider></mat-divider>
<div *ngFor="let dmp of dmpListingItems">
<app-dmp-info-counter [dmp]="dmp" (onClick)="dmpClicked($event)"></app-dmp-info-counter>
</div>
</div>
<div class="col-lg-6 mt-4">
<div class="row">
<div class="col-12 title">
<h4> DATASETS </h4>
<div class="info">
<p class="subtitle">{{ dashboardStatisticsData?.totalDataSetCount }} Public Datasets</p>
<p class="view-all" (click)=viewAllPublicDatasetsClicked()>View All</p>
</div>
</div>
<mat-divider class="col-12"></mat-divider>
<div class="col-12">
<div class="row">
<div *ngFor="let dataset of datasetListingItems" class="col-md-6">
<app-dataset-info-counter [dataset]="dataset" (onClick)="datasetClicked($event)">
</app-dataset-info-counter>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

14
dmp-frontend/src/app/ui/dashboard/dashboard.component.scss
View File

@ -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;
}

49
dmp-frontend/src/app/ui/dashboard/dashboard.component.ts
View File

@ -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<SearchBarItem[]>;
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<string> = new Array<string>();
fields.push('asc');
const dataTableRequest: DataTableRequest<ExploreDmpCriteriaModel> = 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<string> = new Array<string>();
fields.push('asc');
const dataTableRequest: DataTableRequest<ExploreDatasetCriteriaModel> = 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']);
}
}

6
dmp-frontend/src/app/ui/dashboard/dashboard.module.ts
View File

@ -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

71
dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.css Normal file
View File

@ -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;
}

31
dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.html Normal file
View File

@ -0,0 +1,31 @@
<div class="row listing-item" (click)="itemClicked()">
<div class="col-12">
<div class="row">
<div class="col-12 gray-container container-header">
<p>PROJECT ABBREVIATION</p>
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<mat-icon class="icon">bookmark</mat-icon>
<h4 class="title">{{ dataset.label }}</h4>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="mt-1 mb-2">{{dataset.description}}</p>
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<div class="pt-1">
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
</div>
</div>
</div>
<hr>
<div class="date">
<p>Published {{dataset.created | date: "shortDate"}}</p>
</div>
</div>
</div>

25
dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.spec.ts Normal file
View File

@ -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<DatasetInfoCounterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DatasetInfoCounterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DatasetInfoCounterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

22
dmp-frontend/src/app/ui/dashboard/dataset-info-counter/dataset-info-counter.component.ts Normal file
View File

@ -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<DatasetListingModel> = new EventEmitter();
constructor() { }
ngOnInit() {
}
itemClicked() {
this.onClick.emit(this.dataset);
}
}

70
dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.css Normal file
View File

@ -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;
}

32
dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.html Normal file
View File

@ -0,0 +1,32 @@
<div class="listing-item">
<div class="col" (click)="itemClicked()">
<div class="row">
<div class="col-12 gray-container container-header">
<p (click)="$event.stopImmediatePropagation(); projectClicked(dmp.projectId)">
{{dmp.projectAbbreviation}}</p>
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<mat-icon class="icon">radio_button_checked</mat-icon>
<h4 class="title">{{dmp.label}}</h4>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="mt-1 mb-2">{{dmp.description}}</p>
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
</div>
</div>
</div>
<hr>
<div class="date">
<p>Published {{dmp.creationTime | date: "shortDate"}}</p>
</div>
</div>
</div>

25
dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.spec.ts Normal file
View File

@ -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<DmpInfoCounterComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DmpInfoCounterComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DmpInfoCounterComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

28
dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.ts Normal file
View File

@ -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<DmpListingModel> = new EventEmitter();
constructor(public router: Router) { }
ngOnInit() {
}
itemClicked() {
this.onClick.emit(this.dmp);
}
projectClicked(projectId: String) {
// this.router.navigate(['/datasets/publicEdit/' + projectId]);
}
}

1
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
View File

@ -34,6 +34,7 @@
<div class="pt-1">
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
</div>
<p>Published {{ dataset.created | date: "shortDate"}}</p>
</div>
</div>
<!-- <div class="info">

1
dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html
View File

@ -34,6 +34,7 @@
<div class="pt-1">
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
</div>
<p>Published {{dataset.created | date: "shortDate"}}</p>
</div>
</div>
<!-- <div class="info">