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

Adds anchors on "VIEW ALL" links, wizards on dashboard.

This commit is contained in:
apapachristou 2019-10-25 14:54:12 +03:00
parent 2d35a3d665
commit 3f5d3f86b5
11 changed files with 206 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -70,7 +70,7 @@
<h4> {{'DASHBOARD.DATA-MANAGEMENT-PLANS' | translate}} </h4> <h4> {{'DASHBOARD.DATA-MANAGEMENT-PLANS' | translate}} </h4>
<div class="info"> <div class="info">
<p class="subtitle">{{ dashboardStatisticsData?.totalDataManagementPlanCount }} {{'HOME.DMPS' | translate}}</p> <p class="subtitle">{{ dashboardStatisticsData?.totalDataManagementPlanCount }} {{'HOME.DMPS' | translate}}</p>
<p class="view-all" (click)=viewAllPublicDmpsClicked()>{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate }}</p> <a class="view-all" [routerLink]="['/explore-plans']">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate }}</a>
</div> </div>
</div> </div>
<mat-divider></mat-divider> <mat-divider></mat-divider>
@ -84,7 +84,7 @@
<h4> DATASETS </h4> <h4> DATASETS </h4>
<div class="info"> <div class="info">
<p class="subtitle">{{ dashboardStatisticsData?.totalDataSetCount }} {{'HOME.DATASETS' | translate}}</p> <p class="subtitle">{{ dashboardStatisticsData?.totalDataSetCount }} {{'HOME.DATASETS' | translate}}</p>
<p class="view-all" (click)=viewAllPublicDatasetsClicked()>{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate }}</p> <a class="view-all" [routerLink]="['explore']">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate }}</a>
</div> </div>
</div> </div>
<mat-divider class="col-12"></mat-divider> <mat-divider class="col-12"></mat-divider>

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

@ -1,109 +1,115 @@
.header-image { .header-image {
background: url('/assets/images/dashboard-bg.png') no-repeat; background: url("/assets/images/dashboard-bg.png") no-repeat;
background-size: cover; background-size: cover;
margin-top: 70px; margin-top: 70px;
min-height: 20em; min-height: 20em;
position: relative; position: relative;
} }
.header-text-container { .header-text-container {
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
padding-left: 5em; padding-left: 5em;
padding-right: 10em; padding-right: 10em;
padding-top: 2em; padding-top: 2em;
padding-bottom: 2em; padding-bottom: 2em;
} }
.dashboard-main-container { .dashboard-main-container {
margin-top: 0px; margin-top: 0px;
} }
.non-auth-main-container { .non-auth-main-container {
padding: 0; padding: 0;
} }
.non-auth-stats { .non-auth-stats {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
} }
.non-auth-title-container { .non-auth-title-container {
margin-top: 3em; margin-top: 3em;
} }
.dashboard { .dashboard {
.card { .card {
padding: 25px 20px 20px 20px; padding: 25px 20px 20px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.card h6, .card h6,
p { p {
color: #999; color: #999;
} }
.icon { .icon {
margin-top: 20px; margin-top: 20px;
width: 130px; width: 130px;
height: 130px; height: 130px;
border: 1px solid #e5e5e5; border: 1px solid #e5e5e5;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.icon i { .icon i {
font-size: 55px; font-size: 55px;
color: #e91e63; color: #e91e63;
} }
.card-title { .card-title {
margin-top: 30px; margin-top: 30px;
margin-bottom: 3px; margin-bottom: 3px;
} }
.card-description { .card-description {
margin-bottom: 20px; margin-bottom: 20px;
} }
.card-dataset { .card-dataset {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px; padding: 20px;
position: relative; position: relative;
margin-top: 40px; margin-top: 40px;
} }
.card { .card {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
border-radius: 6px; border-radius: 6px;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
background: #fff; background: #fff;
} }
.card-raised { .card-raised {
box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.42), 0 4px 25px 0px rgba(0, 0, 0, 0.12),
} 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.full-width { .full-width {
width: 100%; width: 100%;
} }
} }
.info { .info {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.subtitle { .subtitle {
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
.view-all { .view-all {
margin-left: auto; margin-left: auto;
margin-bottom: 0px !important; margin-bottom: 0px !important;
color: #6aa4d9;
}
.view-all:hover {
color: rgb(46, 117, 182) !important;
} }

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

@ -175,11 +175,11 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
this.router.navigate(['/datasets/publicEdit/' + dataset.id]); this.router.navigate(['/datasets/publicEdit/' + dataset.id]);
} }
viewAllPublicDmpsClicked() { // viewAllPublicDmpsClicked() {
this.router.navigate(['/explore-plans']); // this.router.navigate(['/explore-plans']);
} // }
viewAllPublicDatasetsClicked() { // viewAllPublicDatasetsClicked() {
this.router.navigate(['explore']); // this.router.navigate(['explore']);
} // }
} }

76
dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.css
View File

@ -1,59 +1,69 @@
.grey { .grey {
color: rgb(162, 162, 162); color: rgb(162, 162, 162);
} }
.card-draft { .card-draft {
height: calc(100% - 60px); height: calc(100% - 60px);
} }
.draft-desc { .draft-desc {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 60px; height: 60px;
font-size: 14px; font-size: 14px;
padding-top: 15px; padding-top: 15px;
margin-bottom: 30px; margin-bottom: 30px;
} }
.draft-desc:after { .draft-desc:after {
content: ""; content: "";
text-align: right; text-align: right;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
width: 70%; width: 70%;
height: 1.4em; height: 1.4em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
} }
td:hover .draft-desc:after { td:hover .draft-desc:after {
background: rgba(255, 255, 255, 0); background: rgba(255, 255, 255, 0);
} }
.draft-subtitle { .draft-subtitle {
font-weight: 400; font-weight: 400;
color: rgb(162, 162, 162); color: rgb(162, 162, 162);
} }
.draft-title { .draft-title {
font-weight: 500; font-weight: 500;
color: black; color: black;
} }
.drafts-more-btn { .drafts-more-btn {
text-align: right; text-align: right;
} }
.grant-pill { .grant-pill {
width: 80%; width: 80%;
border: 1px solid rgb(231, 230, 230); border: 1px solid rgb(231, 230, 230);
color: rgb(145, 145, 145); color: rgb(145, 145, 145);
background-color: rgb(242, 242, 242); background-color: rgb(242, 242, 242);
border-radius: 10em; border-radius: 10em;
text-align: center; text-align: center;
max-width: 160px; max-width: 160px;
padding-left: 0.5em; padding-left: 0.5em;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
}
.view-all {
margin-left: auto;
margin-bottom: 0px !important;
color: #6aa4d9;
}
.view-all:hover {
color: rgb(46, 117, 182) !important;
} }

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

@ -4,7 +4,7 @@
<h4 class="card-title">{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</h4> <h4 class="card-title">{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}</h4>
<p class="card-category">{{ 'TYPES.DATASET-STATUS.DRAFT-DESC' | translate }}</p> <p class="card-category">{{ 'TYPES.DATASET-STATUS.DRAFT-DESC' | translate }}</p>
</div> </div>
<div class="view-all" [class.clickable]="isAuthenticated()" (click)="navigateToUrl()">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</div> <a class="view-all" [class.clickable]="isAuthenticated()" [routerLink]="['/datasets']" [queryParams]="{status: 0}">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a>
</div> </div>
<div class="card-body table-responsive"> <div class="card-body table-responsive">
<table class="table table-hover"> <table class="table table-hover">

4
dmp-frontend/src/app/ui/dashboard/info-counter/info-counter.component.html
View File

@ -13,8 +13,8 @@
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div class="stats"> <div class="stats">
<div *ngIf="routerLink" class="view-all" [class.clickable]="isAuthenticated()" (click)="navigateToUrl()">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</div> <a *ngIf="routerLink" class="view-all" [class.clickable]="isAuthenticated()" [routerLink]="[routerLink]">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a>
<div *ngIf="!routerLink" class="view-all-hidden" [class.clickable]="isAuthenticated()" (click)="navigateToUrl()">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</div> <a *ngIf="!routerLink" class="view-all-hidden" [class.clickable]="isAuthenticated()">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a>
</div> </div>
</div> </div>
</div> </div>

15
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css
View File

@ -6,6 +6,11 @@ a {
color: #212529; color: #212529;
} }
.table-row {
cursor: pointer;
display: table-row;
}
.is-public { .is-public {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
@ -51,3 +56,13 @@ a {
.mat-icon-button :hover { .mat-icon-button :hover {
color: rgb(120, 173, 220); color: rgb(120, 173, 220);
} }
.view-all {
margin-left: auto;
margin-bottom: 0px !important;
color: #6aa4d9;
}
.view-all:hover {
color: rgb(46, 117, 182) !important;
}

116
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
View File

@ -8,8 +8,8 @@
{{ 'RECENT-ACTIVITY.LICENSE' | translate}} {{ 'RECENT-ACTIVITY.LICENSE' | translate}}
</p> </p>
</div> </div>
<div class="view-all" [class.clickable]="isAuthenticated()" (click)="navigateToUrl()"> <a class="view-all" [class.clickable]="isAuthenticated()" [routerLink]="['plans/']">
{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</div> {{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a>
</div> </div>
<div class="card-body table-responsive"> <div class="card-body table-responsive">
<table class="table table-hover"> <table class="table table-hover">
@ -24,74 +24,68 @@
<th></th> <th></th>
</thead> </thead>
<tbody *ngIf="dmpActivities != null"> <tbody *ngIf="dmpActivities != null">
<a *ngFor="let activity of dmpActivities" style="cursor: pointer; display: table-row" [routerLink]="['../plans/overview/' + activity.id]"> <a *ngFor="let activity of dmpActivities" class="table-row" [routerLink]="['../plans/overview/' + activity.id]">
<!-- <tr (click)="redirect(activity.id, recentActivityTypeEnum.Dmp)" *ngFor="let activity of dmpActivities" style="cursor: pointer;"> --> <!-- <tr (click)="redirect(activity.id, recentActivityTypeEnum.Dmp)" *ngFor="let activity of dmpActivities" style="cursor: pointer;"> -->
<td><a [routerLink]="['../plans/overview/' + activity.id]">{{ activity.label }}</a></td> <td>{{ activity.label }}</td>
<td><a [routerLink]="['../plans/overview/' + activity.id]"> <td>
<div *ngIf="activity.profile" matTooltip="{{ activity.profile }}" class="template-name"> <div *ngIf="activity.profile" matTooltip="{{ activity.profile }}" class="template-name">
{{ activity.profile }} {{ activity.profile }}
</div> </div>
<div *ngIf="!(activity.profile)" class="template-name">--</div> <div *ngIf="!(activity.profile)" class="template-name">--</div>
</a>
</td> </td>
<td><a [routerLink]="['../plans/overview/' + activity.id]">{{ activity.grant }}</a></td> <td>{{ activity.grant }}</td>
<td><a [routerLink]="['../plans/overview/' + activity.id]">{{ roleDisplay(activity.users)}}</a></td> <td>{{ roleDisplay(activity.users)}}</td>
<td><a [routerLink]="['../plans/overview/' + activity.id]">{{ activity.organisations }}</a></td> <td>{{ activity.organisations }}</td>
<td *ngIf="activity.status === 1 && activity.public === true"><a [routerLink]="['plans/overview/' + activity.id]"> <td *ngIf="activity.status === 1 && activity.public === true">
<div class="is-public"> <div class="is-public">
{{'TYPES.DMP-VISIBILITY.PUBLIC' | translate}} {{'TYPES.DMP-VISIBILITY.PUBLIC' | translate}}
</div> </div>
</a>
</td> </td>
<td *ngIf="activity.status === 1 && activity.public === false" class="text-center"> <td *ngIf="activity.status === 1 && activity.public === false" class="text-center">
<a [routerLink]="['../plans/overview/' + activity.id]"> {{ enumUtils.toDmpStatusString(activity.status) }}
{{ enumUtils.toDmpStatusString(activity.status) }}</a>
</td> </td>
<td *ngIf="activity.status === 0" class="text-center"> <td *ngIf="activity.status === 0" class="text-center">
<a [routerLink]="['../plans/overview/' + activity.id]"> {{ enumUtils.toDmpStatusString(activity.status) }}
{{ enumUtils.toDmpStatusString(activity.status) }}</a>
</td> </td>
<td><a [routerLink]="['../plans/overview/' + activity.id]"> <td>
{{ activity.modifiedTime | date: "shortDate" }}</a> {{ activity.modifiedTime | date: "shortDate" }}
</td> </td>
<td><a [routerLink]="['../plans/overview/' + activity.id]"> <td>
<!-- <i class="material-icons more-icon">more_horiz</i> --> <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon" (click)="$event.preventDefault(); $event.stopPropagation();">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto more-icon" (click)="$event.preventDefault(); $event.stopPropagation();"> <mat-icon class="more-horiz">more_horiz</mat-icon>
<mat-icon class="more-horiz">more_horiz</mat-icon> </button>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="editClicked(activity)" class="menu-item">
<mat-icon>edit</mat-icon>{{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
</button> </button>
<mat-menu #actionsMenu="matMenu"> <button mat-menu-item (click)="cloneClicked(activity)" class="menu-item">
<button mat-menu-item (click)="editClicked(activity)" class="menu-item"> <mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
<mat-icon>edit</mat-icon>{{ 'DMP-LISTING.ACTIONS.EDIT' | translate }} </button>
</button> <button mat-menu-item (click)="deleteClicked(activity)" class="menu-item">
<button mat-menu-item (click)="cloneClicked(activity)" class="menu-item"> <mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }} </button>
</button> <button mat-menu-item [matMenuTriggerFor]="exportMethod" class="menu-item">
<button mat-menu-item (click)="deleteClicked(activity)" class="menu-item"> <mat-icon>save_alt</mat-icon>{{ 'DMP-LISTING.ACTIONS.EXP-AS' | translate }}
<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }} </button>
</button> </mat-menu>
<button mat-menu-item [matMenuTriggerFor]="exportMethod" class="menu-item"> <mat-menu #exportMethod>
<mat-icon>save_alt</mat-icon>{{ 'DMP-LISTING.ACTIONS.EXP-AS' | translate }} <button mat-menu-item (click)="downloadPDF(activity.id)">
</button> <i class="fa fa-file-pdf-o pr-2"></i>
</mat-menu> <span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
<mat-menu #exportMethod> </button>
<button mat-menu-item (click)="downloadPDF(activity.id)"> <button mat-menu-item (click)="downloadDocx(activity.id)">
<i class="fa fa-file-pdf-o pr-2"></i> <i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span> <span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
</button> </button>
<button mat-menu-item (click)="downloadDocx(activity.id)"> <button mat-menu-item (click)="downloadXml(activity.id)">
<i class="fa fa-file-word-o pr-2"></i> <i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span> <span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
</button> </button>
<button mat-menu-item (click)="downloadXml(activity.id)"> <button mat-menu-item (click)="downloadJson(activity.id)">
<i class="fa fa-file-code-o pr-2"></i> <i class="fa fa-file-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span> <span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
</button> </button>
<button mat-menu-item (click)="downloadJson(activity.id)"> </mat-menu>
<i class="fa fa-file-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
</button>
</mat-menu>
</a>
</td> </td>
</a> </a>
</tbody> </tbody>

6
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts
View File

@ -115,9 +115,9 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
} }
} }
navigateToUrl() { // navigateToUrl() {
this.router.navigate(["plans/"]); // this.router.navigate(["plans/"]);
} // }
roleDisplay(value: any) { roleDisplay(value: any) {
const principal: Principal = this.authentication.current(); const principal: Principal = this.authentication.current();

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

@ -1,4 +1,4 @@
<div class="card clickable"> <a [routerLink]="[routerLink]" class="card clickable">
<div class="row card-header card-header-blue"> <div class="row card-header card-header-blue">
<div class="col card-desc"> <div class="col card-desc">
<h4 class="card-title pb-1">{{ title }}</h4> <h4 class="card-title pb-1">{{ title }}</h4>
@ -7,4 +7,4 @@
<i class="col-auto material-icons play_circle">{{ icon }}</i> <i class="col-auto material-icons play_circle">{{ icon }}</i>
</div> </div>
<div class="card-body table-responsive"></div> <div class="card-body table-responsive"></div>
</div> </a>

25
dmp-frontend/src/app/ui/dashboard/wizard/wizard.component.spec.ts
View File

@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { WizardComponent } from './wizard.component';
describe('WizardComponent', () => {
let component: WizardComponent;
let fixture: ComponentFixture<WizardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ WizardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(WizardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});