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>
<div class="info">
<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>
<mat-divider></mat-divider>
@ -84,7 +84,7 @@
<h4> DATASETS </h4>
<div class="info">
<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>
<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 {
background: url('/assets/images/dashboard-bg.png') no-repeat;
background-size: cover;
margin-top: 70px;
min-height: 20em;
position: relative;
background: url("/assets/images/dashboard-bg.png") no-repeat;
background-size: cover;
margin-top: 70px;
min-height: 20em;
position: relative;
}
.header-text-container {
background: rgba(255, 255, 255, 0.7);
position: absolute;
bottom: 0px;
padding-left: 5em;
padding-right: 10em;
padding-top: 2em;
padding-bottom: 2em;
background: rgba(255, 255, 255, 0.7);
position: absolute;
bottom: 0px;
padding-left: 5em;
padding-right: 10em;
padding-top: 2em;
padding-bottom: 2em;
}
.dashboard-main-container {
margin-top: 0px;
margin-top: 0px;
}
.non-auth-main-container {
padding: 0;
padding: 0;
}
.non-auth-stats {
background-color: rgba(255, 255, 255, 0.5);
background-color: rgba(255, 255, 255, 0.5);
}
.non-auth-title-container {
margin-top: 3em;
margin-top: 3em;
}
.dashboard {
.card {
padding: 25px 20px 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.card {
padding: 25px 20px 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.card h6,
p {
color: #999;
}
.card h6,
p {
color: #999;
}
.icon {
margin-top: 20px;
width: 130px;
height: 130px;
border: 1px solid #e5e5e5;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.icon {
margin-top: 20px;
width: 130px;
height: 130px;
border: 1px solid #e5e5e5;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.icon i {
font-size: 55px;
color: #e91e63;
}
.icon i {
font-size: 55px;
color: #e91e63;
}
.card-title {
margin-top: 30px;
margin-bottom: 3px;
}
.card-title {
margin-top: 30px;
margin-bottom: 3px;
}
.card-description {
margin-bottom: 20px;
}
.card-description {
margin-bottom: 20px;
}
.card-dataset {
display: flex;
flex-direction: column;
padding: 20px;
position: relative;
margin-top: 40px;
}
.card-dataset {
display: flex;
flex-direction: column;
padding: 20px;
position: relative;
margin-top: 40px;
}
.card {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
border-radius: 6px;
color: rgba(0, 0, 0, 0.87);
background: #fff;
}
.card {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
border-radius: 6px;
color: rgba(0, 0, 0, 0.87);
background: #fff;
}
.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);
}
.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);
}
.full-width {
width: 100%;
}
.full-width {
width: 100%;
}
}
.info {
display: flex;
flex-wrap: nowrap;
display: flex;
flex-wrap: nowrap;
}
.subtitle {
margin-bottom: 0px !important;
margin-bottom: 0px !important;
}
.view-all {
margin-left: auto;
margin-bottom: 0px !important;
margin-left: auto;
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]);
}
viewAllPublicDmpsClicked() {
this.router.navigate(['/explore-plans']);
}
// viewAllPublicDmpsClicked() {
// this.router.navigate(['/explore-plans']);
// }
viewAllPublicDatasetsClicked() {
this.router.navigate(['explore']);
}
// viewAllPublicDatasetsClicked() {
// this.router.navigate(['explore']);
// }
}

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

@ -1,59 +1,69 @@
.grey {
color: rgb(162, 162, 162);
color: rgb(162, 162, 162);
}
.card-draft {
height: calc(100% - 60px);
height: calc(100% - 60px);
}
.draft-desc {
position: relative;
overflow: hidden;
height: 60px;
font-size: 14px;
padding-top: 15px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
height: 60px;
font-size: 14px;
padding-top: 15px;
margin-bottom: 30px;
}
.draft-desc:after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 70%;
height: 1.4em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 70%;
height: 1.4em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
td:hover .draft-desc:after {
background: rgba(255, 255, 255, 0);
background: rgba(255, 255, 255, 0);
}
.draft-subtitle {
font-weight: 400;
color: rgb(162, 162, 162);
font-weight: 400;
color: rgb(162, 162, 162);
}
.draft-title {
font-weight: 500;
color: black;
font-weight: 500;
color: black;
}
.drafts-more-btn {
text-align: right;
text-align: right;
}
.grant-pill {
width: 80%;
border: 1px solid rgb(231, 230, 230);
color: rgb(145, 145, 145);
background-color: rgb(242, 242, 242);
border-radius: 10em;
text-align: center;
max-width: 160px;
padding-left: 0.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 80%;
border: 1px solid rgb(231, 230, 230);
color: rgb(145, 145, 145);
background-color: rgb(242, 242, 242);
border-radius: 10em;
text-align: center;
max-width: 160px;
padding-left: 0.5em;
white-space: nowrap;
overflow: hidden;
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>
<p class="card-category">{{ 'TYPES.DATASET-STATUS.DRAFT-DESC' | translate }}</p>
</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 class="card-body table-responsive">
<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 class="card-footer">
<div class="stats">
<div *ngIf="routerLink" class="view-all" [class.clickable]="isAuthenticated()" (click)="navigateToUrl()">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</div>
<div *ngIf="!routerLink" class="view-all-hidden" [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>
<a *ngIf="!routerLink" class="view-all-hidden" [class.clickable]="isAuthenticated()">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a>
</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;
}
.table-row {
cursor: pointer;
display: table-row;
}
.is-public {
padding-left: 5px;
padding-right: 5px;
@ -51,3 +56,13 @@ a {
.mat-icon-button :hover {
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}}
</p>
</div>
<div class="view-all" [class.clickable]="isAuthenticated()" (click)="navigateToUrl()">
{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</div>
<a class="view-all" [class.clickable]="isAuthenticated()" [routerLink]="['plans/']">
{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate}}</a>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
@ -24,74 +24,68 @@
<th></th>
</thead>
<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;"> -->
<td><a [routerLink]="['../plans/overview/' + activity.id]">{{ activity.label }}</a></td>
<td><a [routerLink]="['../plans/overview/' + activity.id]">
<div *ngIf="activity.profile" matTooltip="{{ activity.profile }}" class="template-name">
{{ activity.profile }}
</div>
<div *ngIf="!(activity.profile)" class="template-name">--</div>
</a>
<td>{{ activity.label }}</td>
<td>
<div *ngIf="activity.profile" matTooltip="{{ activity.profile }}" class="template-name">
{{ activity.profile }}
</div>
<div *ngIf="!(activity.profile)" class="template-name">--</div>
</td>
<td><a [routerLink]="['../plans/overview/' + activity.id]">{{ activity.grant }}</a></td>
<td><a [routerLink]="['../plans/overview/' + activity.id]">{{ roleDisplay(activity.users)}}</a></td>
<td><a [routerLink]="['../plans/overview/' + activity.id]">{{ activity.organisations }}</a></td>
<td *ngIf="activity.status === 1 && activity.public === true"><a [routerLink]="['plans/overview/' + activity.id]">
<div class="is-public">
{{'TYPES.DMP-VISIBILITY.PUBLIC' | translate}}
</div>
</a>
<td>{{ activity.grant }}</td>
<td>{{ roleDisplay(activity.users)}}</td>
<td>{{ activity.organisations }}</td>
<td *ngIf="activity.status === 1 && activity.public === true">
<div class="is-public">
{{'TYPES.DMP-VISIBILITY.PUBLIC' | translate}}
</div>
</td>
<td *ngIf="activity.status === 1 && activity.public === false" class="text-center">
<a [routerLink]="['../plans/overview/' + activity.id]">
{{ enumUtils.toDmpStatusString(activity.status) }}</a>
{{ enumUtils.toDmpStatusString(activity.status) }}
</td>
<td *ngIf="activity.status === 0" class="text-center">
<a [routerLink]="['../plans/overview/' + activity.id]">
{{ enumUtils.toDmpStatusString(activity.status) }}</a>
{{ enumUtils.toDmpStatusString(activity.status) }}
</td>
<td><a [routerLink]="['../plans/overview/' + activity.id]">
{{ activity.modifiedTime | date: "shortDate" }}</a>
<td>
{{ activity.modifiedTime | date: "shortDate" }}
</td>
<td><a [routerLink]="['../plans/overview/' + activity.id]">
<!-- <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();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
<td>
<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>
</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>
<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-item (click)="cloneClicked(activity)" class="menu-item">
<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
</button>
<button mat-menu-item (click)="deleteClicked(activity)" class="menu-item">
<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
</button>
<button mat-menu-item [matMenuTriggerFor]="exportMethod" class="menu-item">
<mat-icon>save_alt</mat-icon>{{ 'DMP-LISTING.ACTIONS.EXP-AS' | translate }}
</button>
</mat-menu>
<mat-menu #exportMethod>
<button mat-menu-item (click)="downloadPDF(activity.id)">
<i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadDocx(activity.id)">
<i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadXml(activity.id)">
<i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadJson(activity.id)">
<i class="fa fa-file-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
</button>
</mat-menu>
</a>
<button mat-menu-item (click)="cloneClicked(activity)" class="menu-item">
<mat-icon>add</mat-icon>{{ 'DMP-LISTING.ACTIONS.CLONE' | translate }}
</button>
<button mat-menu-item (click)="deleteClicked(activity)" class="menu-item">
<mat-icon>delete</mat-icon>{{ 'DMP-LISTING.ACTIONS.DELETE' | translate }}
</button>
<button mat-menu-item [matMenuTriggerFor]="exportMethod" class="menu-item">
<mat-icon>save_alt</mat-icon>{{ 'DMP-LISTING.ACTIONS.EXP-AS' | translate }}
</button>
</mat-menu>
<mat-menu #exportMethod>
<button mat-menu-item (click)="downloadPDF(activity.id)">
<i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadDocx(activity.id)">
<i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadXml(activity.id)">
<i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
</button>
<button mat-menu-item (click)="downloadJson(activity.id)">
<i class="fa fa-file-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.JSON' | translate}}</span>
</button>
</mat-menu>
</td>
</a>
</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() {
this.router.navigate(["plans/"]);
}
// navigateToUrl() {
// this.router.navigate(["plans/"]);
// }
roleDisplay(value: any) {
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="col card-desc">
<h4 class="card-title pb-1">{{ title }}</h4>
@ -7,4 +7,4 @@
<i class="col-auto material-icons play_circle">{{ icon }}</i>
</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();
});
});