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

translate, search and login bug fixed

This commit is contained in:
apapachristou 2019-04-25 12:03:22 +03:00
parent 8a9e0c2d1f
commit 314d4b3df7
14 changed files with 428 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,21 @@
th {
text-transform: uppercase;
}
.is-public {
padding-left: 0px;
border: 1px solid rgb(197, 224, 180);
color: rgb(131, 184, 95);
background-color: rgb(240, 247, 236);
border-radius: 10em;
text-align: center;
}
.template-name {
padding-left: 0px;
border: 1px solid rgb(218, 227, 243);
color: rgb(43, 104, 209);
background-color: rgb(236, 241, 249);
border-radius: 10em;
text-align: center;
}

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

@ -1,115 +1,62 @@
<div class="card"> <div class="card">
<div class="card-header card-header-plain"> <div class="card-header card-header-plain">
<div class="card-desc"> <div class="card-desc">
<h4 class="card-title"> <h4 class="card-title">
LAST EDITED DATA MANAGEMENT PLAN {{ 'RECENT-ACTIVITY.LAST-EDITED-DMP' | translate}}
</h4> </h4>
<p class="card-category"> <p class="card-category">
The DMPs below are public under the ## license of {{ 'RECENT-ACTIVITY.LICENSE' | translate}}
</p> </p>
</div> </div>
<a href="#" class="view-all">VIEW ALL</a> <a href="#" class="view-all">{{ '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">
<thead class="text-default"> <thead class="text-default">
<th>NAME</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}}</th>
<th>TEMPLATE</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.TEMPLATE' | translate }}</th>
<th>PROJECT</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.PROJECT' | translate }}</th>
<th>ROLE</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</th>
<th>ORGANIZATION</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ORGANIZATION' | translate }}</th>
<th>STATUS</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.STATUS' | translate }}</th>
<th>VISITED</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.VISITED' | translate }}</th>
<th></th> <th></th>
</thead> </thead>
<tbody> <tbody *ngIf="dmpActivities != null">
<tr> <tr *ngFor="let activity of dmpActivities">
<td>DMP Name</td> <td>{{ activity.label }}</td>
<td> <td>
<ul <div class="template-name">
class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue" --
> </div>
<li class="nav-item"> </td>
<a <td>{{ activity.project }}</td>
class="nav-link active" <td>Role Name</td>
data-toggle="tab" <td>{{ activity.organisations }}</td>
href="#" <td *ngIf="activity.status === 1">
role="tab" <div class="is-public">
>Template name</a {{ enumUtils.toDmpStatusString(activity.status) }}
> </div>
</li> </td>
</ul> <td *ngIf="activity.status === 0" style="padding-left: 12px">
</td> {{ enumUtils.toDmpStatusString(activity.status) }}
<td>Project Name</td> </td>
<td>Role Name</td> <td>{{ activity.creationTime | date: "shortDate" }}</td>
<td>Organization Name</td> <td><i class="material-icons more-icon">more_horiz</i></td>
<td>PRIVATE</td> </tr>
<td>01.01.2019</td> </tbody>
<td><i class="material-icons more-icon">more_horiz</i></td> <tbody *ngIf="dmpActivities == null">
</tr> <tr>
<tr> <td></td>
<td>DMP Name</td> <td></td>
<td> <td></td>
<ul <td></td>
class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue" <td></td>
> <td></td>
<li class="nav-item"> <td></td>
<a <td></td>
class="nav-link active" </tr>
data-toggle="tab" </tbody>
href="#" </table>
role="tab" </div>
>Template name</a
>
</li>
</ul>
</td>
<td>Project Name</td>
<td>Role Name</td>
<td>Organization Name</td>
<td style="padding-left: 0px;">
<ul
class="nav max-width-80 md-pills nav-justified pills-rounded pills-outline-green"
>
<li class="nav-item">
<a
class="nav-link active"
data-toggle="tab"
href="#"
role="tab"
>PUBLIC</a
>
</li>
</ul>
</td>
<td>01.01.2019</td>
<td><i class="material-icons more-icon">more_horiz</i></td>
</tr>
<tr>
<td>DMP Name</td>
<td>
<ul
class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue"
>
<li class="nav-item">
<a
class="nav-link active"
data-toggle="tab"
href="#"
role="tab"
>Template name</a
>
</li>
</ul>
</td>
<td>Project Name</td>
<td>Role Name</td>
<td>Organization Name</td>
<td>PRIVATE</td>
<td>01.01.2019</td>
<td><i class="material-icons more-icon">more_horiz</i></td>
</tr>
</tbody>
</table>
</div>
</div> </div>

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

@ -1,15 +1,41 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { DmpListingModel } from '../../../core/model/dmp/dmp-listing';
import { EnumUtils } from '../../../core/services/utilities/enum-utils.service';
import { AuthService } from '../../../core/services/auth/auth.service';
import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
import { DmpCriteria } from '../../../core/query/dmp/dmp-criteria';
import { DmpService } from '../../../core/services/dmp/dmp.service';
@Component({ @Component({
selector: 'app-recent-edited-activity', selector: 'app-recent-edited-activity',
templateUrl: './recent-edited-activity.component.html', templateUrl: './recent-edited-activity.component.html',
styleUrls: ['./recent-edited-activity.component.css'] styleUrls: ['./recent-edited-activity.component.css']
}) })
export class RecentEditedActivityComponent implements OnInit { export class RecentEditedActivityComponent implements OnInit {
dmpActivities: DmpListingModel[];
constructor() { } constructor(
public enumUtils: EnumUtils,
private authentication: AuthService,
private dmpService: DmpService
) { }
ngOnInit() { ngOnInit() {
} if (this.isAuthenticated()) {
const fields: Array<string> = ["-created"];
const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(0, null, { fields: fields });
dmpDataTableRequest.criteria = new DmpCriteria();
dmpDataTableRequest.criteria.like = "";
this.dmpService
.getPaged(dmpDataTableRequest, "listing")
.subscribe(response => {
this.dmpActivities = response.data;
});
}
}
public isAuthenticated(): boolean {
return !!this.authentication.current();
}
} }

21
dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.css
View File

@ -0,0 +1,21 @@
th {
text-transform: uppercase;
}
.is-public {
padding-left: 0px;
border: 1px solid rgb(197, 224, 180);
color: rgb(131, 184, 95);
background-color: rgb(240, 247, 236);
border-radius: 10em;
text-align: center;
}
.template-name {
padding-left: 0px;
border: 1px solid rgb(218, 227, 243);
color: rgb(43, 104, 209);
background-color: rgb(236, 241, 249);
border-radius: 10em;
text-align: center;
}

145
dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.html
View File

@ -1,86 +1,63 @@
<div class="card"> <div class="card">
<div class="card-header card-header-plain"> <div class="card-header card-header-plain">
<div class="card-desc"> <div class="card-desc">
<h4 class="card-title"> <h4 class="card-title">
LAST VISITED DATA MANAGEMENT PLAN {{ 'RECENT-ACTIVITY.LAST-VISITED-DMP' | translate}}
</h4> </h4>
<p class="card-category"> <p class="card-category">
The DMPs below are public under the ## license of {{ 'RECENT-ACTIVITY.LICENSE' | translate}}
</p> </p>
</div> </div>
<a href="#" class="view-all">VIEW ALL</a> <a href="#" class="view-all">{{ '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">
<thead class="text-default"> <thead class="text-default">
<th>NAME</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate }}</th>
<th>TEMPLATE</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.TEMPLATE' | translate }}</th>
<th>PROJECT</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.PROJECT' | translate }}</th>
<th>ROLE</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</th>
<th>ORGANIZATION</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ORGANIZATION' | translate }}</th>
<th>STATUS</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.STATUS' | translate }}</th>
<th>VISITED</th> <th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.VISITED' | translate }}</th>
<th></th> <th></th>
</thead> </thead>
<tbody *ngIf="dmpActivities!=null"> <tbody *ngIf="dmpActivities != null">
<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"
<td>{{activity.label}}</td> style="cursor: pointer;">
<td> <td>{{ activity.label }}</td>
<ul <td>
class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue" <div class="template-name">
> --
<li class="nav-item"> </div>
<a </td>
class="nav-link active" <td>{{ activity.project }}</td>
data-toggle="tab" <td>Role Name</td>
href="#" <td>{{ activity.organisations }}</td>
role="tab" <td *ngIf="activity.status === 1">
>Template name</a <div class="is-public">
> {{ enumUtils.toDmpStatusString(activity.status) }}
</li> </div>
</ul> </td>
</td> <td *ngIf="activity.status === 0" style="padding-left: 12px">
<td>Project Name</td> {{ enumUtils.toDmpStatusString(activity.status) }}
<td>Role Name</td> </td>
<td>Organization Name</td> <td>{{ activity.creationTime | date: "shortDate" }}</td>
<td style="padding-left: 0px;" *ngIf="public"> <td><i class="material-icons more-icon">more_horiz</i></td>
<ul class="nav max-width-80 md-pills nav-justified pills-rounded pills-outline-green"> </tr>
<li class="nav-item"> </tbody>
<a class="nav-link active" data-toggle="tab" href="#" role="tab">PUBLIC</a> <tbody *ngIf="dmpActivities == null">
</li> <tr>
</ul> <td></td>
</td> <td></td>
<td style="padding-left: 0px;" *ngIf="!public">PRIVATE</td> <td></td>
<td>{{activity.timestamp | date:'shortDate'}}</td> <td></td>
<td><i class="material-icons more-icon">more_horiz</i></td> <td></td>
</tr> <td></td>
</tbody> <td></td>
<tbody *ngIf="dmpActivities==null"> <td><i class="material-icons more-icon">more_horiz</i></td>
<tr> </tr>
<td>--</td> </tbody>
<td> </table>
<ul </div>
class="nav max-width-136 md-pills nav-justified pills-rounded pills-outline-blue"
>
<li class="nav-item">
<a
class="nav-link active"
data-toggle="tab"
href="#"
role="tab"
>--</a
>
</li>
</ul>
</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td><i class="material-icons more-icon">more_horiz</i></td>
</tr>
</tbody>
</table>
</div>
</div> </div>

37
dmp-frontend/src/app/ui/dashboard/recent-visited-activity/recent-visited-activity.component.ts
View File

@ -1,38 +1,47 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { RecentActivityType } from "../../../core/common/enum/recent-activity-type"; import { RecentActivityType } from "../../../core/common/enum/recent-activity-type";
import { BaseComponent } from '../../../core/common/base/base.component'; import { BaseComponent } from "../../../core/common/base/base.component";
import { Router } from "@angular/router"; import { Router } from "@angular/router";
import { AuthService } from "../../../core/services/auth/auth.service"; import { AuthService } from "../../../core/services/auth/auth.service";
import { UserService } from "../../../core/services/user/user.service"; import { UserService } from "../../../core/services/user/user.service";
import { takeUntil } from "rxjs/operators"; import { takeUntil } from "rxjs/operators";
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 { DmpListingModel } from "../../../core/model/dmp/dmp-listing";
import { EnumUtils } from "../../../core/services/utilities/enum-utils.service";
@Component({ @Component({
selector: "app-recent-visited-activity", selector: "app-recent-visited-activity",
templateUrl: "./recent-visited-activity.component.html", templateUrl: "./recent-visited-activity.component.html",
styleUrls: ["./recent-visited-activity.component.css"] styleUrls: ["./recent-visited-activity.component.css"]
}) })
export class RecentVisitedActivityComponent extends BaseComponent implements OnInit { export class RecentVisitedActivityComponent extends BaseComponent
dmpActivities: any[]; implements OnInit {
dmpActivities: DmpListingModel[];
recentActivityItems: any[]; recentActivityItems: any[];
datasetActivities: any[];
projectActivities: any[];
organisationActivities: any[];
recentActivityTypeEnum = RecentActivityType; recentActivityTypeEnum = RecentActivityType;
public: boolean = false; public: boolean = false;
constructor(private router: Router, private authentication: AuthService, private userService: UserService) { constructor(
private router: Router,
private authentication: AuthService,
private dmpService: DmpService,
public enumUtils: EnumUtils
) {
super(); super();
} }
ngOnInit() { ngOnInit() {
if (this.isAuthenticated()) { if (this.isAuthenticated()) {
this.userService.getRecentActivity() const fields: Array<string> = ["-created"];
.pipe(takeUntil(this._destroyed)) const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(0, null, { fields: fields });
dmpDataTableRequest.criteria = new DmpCriteria();
dmpDataTableRequest.criteria.like = "";
this.dmpService
.getPaged(dmpDataTableRequest, "listing")
.subscribe(response => { .subscribe(response => {
this.datasetActivities = response['recentDatasetActivities']; this.dmpActivities = response.data;
this.dmpActivities = response['recentDmpActivities'];
this.projectActivities = response['recentProjectActivities'];
this.organisationActivities = response['totalOrganisationCount'];
}); });
} }
} }
@ -57,6 +66,6 @@ export class RecentVisitedActivityComponent extends BaseComponent implements OnI
} }
public isAuthenticated(): boolean { public isAuthenticated(): boolean {
return !(!this.authentication.current()); return !!this.authentication.current();
} }
} }

5
dmp-frontend/src/app/ui/misc/search/search.component.css
View File

@ -8,3 +8,8 @@
.input-search input { .input-search input {
padding-top: 15px; padding-top: 15px;
} }
.option {
line-height: inherit;
height: 50px;
}

54
dmp-frontend/src/app/ui/misc/search/search.component.html
View File

@ -1,60 +1,14 @@
<form class="navbar-form"> <form class="navbar-form">
<div class="input-group input-search"> <div class="input-group input-search">
<input type="text" value="" class="form-control" placeholder="{{ 'DASHBOARD.SEARCH' | translate }}" [formControl]="searchControl" [matAutocomplete]="auto"> <input type="text" value="" class="form-control" placeholder="{{ 'DASHBOARD.SEARCH' | translate }}"
[formControl]="searchControl" [matAutocomplete]="auto">
<button type="submit" class="btn btn-link"><i class="material-icons">search</i></button> <button type="submit" class="btn btn-link"><i class="material-icons">search</i></button>
</div> </div>
<mat-autocomplete <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)">
autoActiveFirstOption <mat-option *ngFor="let option of (filteredOptions | async)" [value]="option" class="option">
#auto="matAutocomplete"
(optionSelected)="onOptionSelected($event)"
>
<mat-option
*ngFor="let option of (filteredOptions | async)"
[value]="option"
class="transformation-value-mat-option two-line-mat-option"
>
<span>{{ option.label }}</span> <span>{{ option.label }}</span>
<br /> <br />
<small>{{ transformType(option.type) }}</small> <small>{{ transformType(option.type) }}</small>
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
</form> </form>
<!-- <div class="col"></div>
<div *ngIf="search && this.isAuthenticated()" class="col-auto">
<mat-form-field floatLabel="never">
<input
type="text"
placeholder="{{ 'DASHBOARD.SEARCH' | translate }}"
matInput
[formControl]="searchControl"
[matAutocomplete]="auto"
/>
<mat-autocomplete
autoActiveFirstOption
#auto="matAutocomplete"
(optionSelected)="onOptionSelected($event)"
>
<mat-option
*ngFor="let option of (filteredOptions | async)"
[value]="option"
class="transformation-value-mat-option two-line-mat-option"
>
<span>{{ option.label }}</span>
<br />
<small>{{ transformType(option.type) }}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div *ngIf="!search && this.isAuthenticated()" class="col-auto">
<button mat-button (click)="this.search = true">
<mat-icon>search</mat-icon>
</button>
</div>
<div *ngIf="search && this.isAuthenticated()" class="col-auto">
<button mat-button (click)="this.search = false">
<mat-icon>close</mat-icon>
</button>
</div> -->

62
dmp-frontend/src/app/ui/navbar/navbar.component.html
View File

@ -1,20 +1,20 @@
<nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top"> <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top">
<div class="container-fluid"> <div class="container-fluid">
<div class="navbar-wrapper"> <div class="navbar-wrapper">
<a href="#"> <a routerLink="/home">
<i class="material-icons">dashboard</i> <i class="material-icons">dashboard</i>
</a> </a>
<a class="navbar-brand" href="/home">Dashboard</a> <a class="navbar-brand" routerLink="/home">{{ 'NAV-BAR.BREADCRUMB-ROOT' | translate }}</a>
</div> </div>
<button mat-raised-button class="navbar-toggler" type="button" (click)="sidebarToggle()"> <button mat-raised-button class="navbar-toggler" type="button" (click)="sidebarToggle()">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span> <span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span> <span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span> <span class="navbar-toggler-icon icon-bar"></span>
</button> </button>
<div class="collapse navbar-collapse justify-content-end" id="navigation"> <div class="collapse navbar-collapse justify-content-end" id="navigation">
<!-- <form class="navbar-form"> <!-- <form class="navbar-form">
<div class="input-group input-search"> <div class="input-group input-search">
<input type="text" value="" class="form-control" placeholder="SEARCH..."> <input type="text" value="" class="form-control" placeholder="SEARCH...">
<button type="submit" class="btn btn-link"><i class="material-icons">search</i></button> <button type="submit" class="btn btn-link"><i class="material-icons">search</i></button>
@ -23,9 +23,9 @@
<app-search></app-search> <app-search></app-search>
<ul class="navbar-nav"> <ul class="navbar-nav">
<!-- Notifications --> <!-- Notifications -->
<!-- <li class="nav-item dropdown"> <!-- <li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons md-32">notifications</i> <i class="material-icons md-32">notifications</i>
<span class="notification">3</span> <span class="notification">3</span>
@ -46,21 +46,27 @@
<!-- <div *ngIf="isAuthenticated();else loginoption" class="col-auto"> <!-- <div *ngIf="isAuthenticated();else loginoption" class="col-auto">
<img mat-card-avatar *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()"> <img mat-card-avatar *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
</div> --> </div> -->
<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
<a class="nav-link" (click)="openProfile()"> <!-- Admin -->
<i class="material-icons md-32">person</i> <!-- <a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button"
<p> routerLink="/users">{{'NAV-BAR.USERS' | translate}}</a>
<span class="d-lg-none d-md-block">Account</span> <a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dmp-profiles">{{'NAV-BAR.DMP-PROFILES' |
</p> translate}}</a>
</a> <a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dataset-profiles">{{'NAV-BAR.DATASETS-ADMIN'
| translate}}</a> -->
<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
<a class="nav-link" (click)="openProfile()">
<i class="material-icons md-32">person</i>
</a>
</li> </li>
<ng-template #loginoption> <ng-template #loginoption>
<button mat-button [routerLink]=" ['/login'] "> <button mat-button [routerLink]=" ['/login'] ">
<span class="login-label">Log in</span> <span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
</button> </button>
</ng-template> </ng-template>
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>

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

@ -6,6 +6,7 @@ import { Router } from '@angular/router';
import { AuthService } from '../../core/services/auth/auth.service'; import { AuthService } from '../../core/services/auth/auth.service';
import { MatDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component'; import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
import { AppRole } from '../../core/common/enum/app-role';
@Component({ @Component({
selector: 'app-navbar', selector: 'app-navbar',
@ -143,6 +144,17 @@ export class NavbarComponent implements OnInit {
return this.authentication.current().avatarUrl; return this.authentication.current().avatarUrl;
} }
public isAdmin(): boolean {
if (!this.authentication.current()) { return false; }
const principalRoles = this.authentication.current().authorities;
for (let i = 0; i < principalRoles.length; i++) {
if (principalRoles[i] === AppRole.Admin) {
return true;
}
}
return false;
}
openProfile() { openProfile() {
const dialogRef = this.dialog.open(UserDialogComponent, { const dialogRef = this.dialog.open(UserDialogComponent, {
hasBackdrop: true, hasBackdrop: true,

24
dmp-frontend/src/app/ui/sidebar/sidebar.component.css
View File

@ -1,23 +1,23 @@
.logo-img { .logo-img {
width: 60px; width: 60px;
display: block; display: block;
max-height: none; max-height: none;
margin-left: 100px; margin-left: 100px;
} }
.logo-img img { .logo-img img {
width: 60px; width: 60px;
top: 0px; top: 0px;
position: inherit; position: inherit;
} }
.sidebarSubtitle p { .sidebarSubtitle p {
margin-left: 20px; margin-left: 20px;
color: rgb(166, 166, 166); color: rgb(166, 166, 166);
} }
.nav hr { .nav hr {
width: 230px; width: 230px;
border-top: 2px solid #fff; border-top: 2px solid #fff;
border-bottom: 2px solid #e0e2e3; border-bottom: 2px solid #e0e2e3;
} }

176
dmp-frontend/src/app/ui/user-profile/user-profile.component.html
View File

@ -1,89 +1,93 @@
<div *ngIf="user | async as userProfile; else loading" class="row user-profile"> <div class="main-content">
<mat-card class="col-12 profile-card"> <div class="container-fluid">
<mat-card-content> <div *ngIf="user | async as userProfile; else loading" class="row user-profile">
<div class="row"> <mat-card class="col-12 profile-card">
<div class="col-12"> <mat-card-content>
<div class="row profile-card-center-row"> <div class="row">
<div class="col-auto"><img mat-card-avatar [src]="userProfile.additionalinfo.avatarUrl"></div> <div class="col-12">
</div> <div class="row profile-card-center-row">
<div class="row profile-card-center-row"> <div class="col-auto"><img mat-card-avatar [src]="userProfile.additionalinfo.avatarUrl"></div>
<mat-card-title class="col-auto">{{userProfile.name}}</mat-card-title>
</div>
<div class="row profile-card-center-row">
<mat-card-subtitle class="col-auto">{{userProfile.email}}</mat-card-subtitle>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
<mat-card class="col-12 profile-card">
<mat-card-content>
<div>
<div>
<h4>{{'USER-PROFILE.ASSOCIATED-DMPS' | translate}}</h4>
</div>
<div>
<mat-list>
<mat-list-item class="clickable" (click)="navigateToDmp(dmp)" *ngFor="let dmp of userProfile.associatedDmps">
<div>
{{dmp.label}}
</div> </div>
<div> <div class="row profile-card-center-row">
<mat-chip-list> <mat-card-title class="col-auto">{{userProfile.name}}</mat-card-title>
<mat-chip>{{getUserRole(dmp)}}</mat-chip>
</mat-chip-list>
</div> </div>
</mat-list-item> <div class="row profile-card-center-row">
</mat-list> <mat-card-subtitle class="col-auto">{{userProfile.email}}</mat-card-subtitle>
<button mat-button (click)="showAllDmps()"> {{'USER-PROFILE.DMPS.SHOW-ALL' | translate}}</button> </div>
</div> </div>
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card class="col-12 profile-card"> <mat-card class="col-12 profile-card">
<mat-card-header> <mat-card-content>
<mat-card-title> <div>
<div class="row"> <div>
<h4 class="col-auto">{{ 'USER-PROFILE.SETTINGS.TITLE' | translate}}</h4> <h4>{{'USER-PROFILE.ASSOCIATED-DMPS' | translate}}</h4>
<button class="col-auto" *ngIf="!editMode" mat-icon-button (click)="unlock()"> </div>
<mat-icon class="mat-24">edit</mat-icon> <div>
</button> <mat-list>
<button class="col-auto" *ngIf="editMode" mat-icon-button (click)="lock()"> <mat-list-item class="clickable" (click)="navigateToDmp(dmp)" *ngFor="let dmp of userProfile.associatedDmps">
<mat-icon class="mat-24">lock</mat-icon> <div>
</button> {{dmp.label}}
</div> </div>
</mat-card-title> <div>
</mat-card-header> <mat-chip-list>
<mat-card-content> <mat-chip>{{getUserRole(dmp)}}</mat-chip>
<div class="container"> </mat-chip-list>
<div class="row" [formGroup]="formGroup"> </div>
<mat-form-field class="col-md-4"> </mat-list-item>
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [formControl]="this.formGroup.get('timezone')" matInput [matAutocomplete]="timezone" required> </mat-list>
<mat-autocomplete #timezone="matAutocomplete"> <button mat-button (click)="showAllDmps()"> {{'USER-PROFILE.DMPS.SHOW-ALL' | translate}}</button>
<mat-option *ngFor="let timezone of timezones | async" [value]="timezone"> </div>
{{ timezone | timezoneInfoDisplay }} </div>
</mat-option> </mat-card-content>
</mat-autocomplete> </mat-card>
</mat-form-field> <mat-card class="col-12 profile-card">
<mat-form-field class="col-md-4"> <mat-card-header>
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [formControl]="this.formGroup.get('culture')" matInput [matAutocomplete]="culture" required> <mat-card-title>
<mat-autocomplete #culture="matAutocomplete" [displayWith]="displayFn"> <div class="row">
<mat-option *ngFor="let culture of cultures | async" [value]="culture"> <h4 class="col-auto">{{ 'USER-PROFILE.SETTINGS.TITLE' | translate}}</h4>
{{ culture.displayName }} - {{ culture.nativeName }} <button class="col-auto" *ngIf="!editMode" mat-icon-button (click)="unlock()">
</mat-option> <mat-icon class="mat-24">edit</mat-icon>
</mat-autocomplete> </button>
</mat-form-field> <button class="col-auto" *ngIf="editMode" mat-icon-button (click)="lock()">
<mat-form-field class="col-md-4"> <mat-icon class="mat-24">lock</mat-icon>
<mat-select placeholder="{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}" [formControl]="this.formGroup.get('language')" required> </button>
<mat-option *ngFor="let language of languages" [value]="language"> </div>
{{ language.label }} </mat-card-title>
</mat-option> </mat-card-header>
</mat-select> <mat-card-content>
</mat-form-field> <div class="container">
</div> <div class="row" [formGroup]="formGroup">
</div> <mat-form-field class="col-md-4">
</mat-card-content> <input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [formControl]="this.formGroup.get('timezone')" matInput [matAutocomplete]="timezone" required>
</mat-card> <mat-autocomplete #timezone="matAutocomplete">
<mat-option *ngFor="let timezone of timezones | async" [value]="timezone">
{{ timezone | timezoneInfoDisplay }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="col-md-4">
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.CULTURE' | translate}}" [formControl]="this.formGroup.get('culture')" matInput [matAutocomplete]="culture" required>
<mat-autocomplete #culture="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let culture of cultures | async" [value]="culture">
{{ culture.displayName }} - {{ culture.nativeName }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="col-md-4">
<mat-select placeholder="{{'USER-PROFILE.SETTINGS.LANGUAGE' | translate}}" [formControl]="this.formGroup.get('language')" required>
<mat-option *ngFor="let language of languages" [value]="language">
{{ language.label }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<ng-template #loading>
</ng-template>
</div>
</div> </div>
<ng-template #loading>
</ng-template>

77
dmp-frontend/src/assets/css/demo.css
View File

@ -2,6 +2,7 @@
outline: none !important; outline: none !important;
} }
a { a {
color: rgb(106, 164, 217); color: rgb(106, 164, 217);
} }
@ -31,6 +32,17 @@ h4 {
/* float: right; */ /* float: right; */
} }
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 2;
width: 260px;
background: #fff;
box-shadow: 0 16px 24px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.sidebar .sidebar-background { .sidebar .sidebar-background {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@ -69,9 +81,9 @@ h4 {
.sidebar[data-color="danger"] li.active > a { .sidebar[data-color="danger"] li.active > a {
background-color: #ffffff; background-color: #ffffff;
-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba(255, 255, 255, 0.4); 0 7px 10px -5px rgba(255, 255, 255, 0.4);
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba(255, 255, 255, 0.4); 0 7px 10px -5px rgba(255, 255, 255, 0.4);
} }
.sidebar .nav li.active > a i { .sidebar .nav li.active > a i {
@ -106,7 +118,7 @@ h4 {
} }
.navbar form .btn { .navbar form .btn {
margin-bottom: 0; margin-bottom: 0;
padding-left: 5px; padding-left: 5px;
} }
@ -145,9 +157,9 @@ h4 {
.card .card-header-default:not(.card-header-icon):not(.card-header-text), .card .card-header-default:not(.card-header-icon):not(.card-header-text),
.card .card-header-default .card-text { .card .card-header-default .card-text {
-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba(0, 0, 0, 0.14); 0 7px 10px -5px rgba(0, 0, 0, 0.14);
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba(0, 0, 0, 0.14); 0 7px 10px -5px rgba(0, 0, 0, 0.14);
} }
.card .card-header-plain .card-icon, .card .card-header-plain .card-icon,
@ -179,9 +191,9 @@ h4 {
.card .card-header-blue:not(.card-header-icon):not(.card-header-text), .card .card-header-blue:not(.card-header-icon):not(.card-header-text),
.card .card-header-blue .card-text { .card .card-header-blue .card-text {
-webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), -webkit-box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba(0, 0, 0, 0.14); 0 7px 10px -5px rgba(0, 0, 0, 0.14);
box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14),
0 7px 10px -5px rgba(0, 0, 0, 0.14); 0 7px 10px -5px rgba(0, 0, 0, 0.14);
} }
.card-stats .card-header.card-header-icon i { .card-stats .card-header.card-header-icon i {
@ -213,6 +225,10 @@ h4 {
margin-top: 5px; margin-top: 5px;
} }
.card-title h4 {
text-transform: uppercase;
}
.card-footer .stats { .card-footer .stats {
font-size: 12px; font-size: 12px;
line-height: 22px; line-height: 22px;
@ -229,7 +245,7 @@ h4 {
} }
.card .card
[class*="card-header-"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) { [class*="card-header-"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
border-radius: 5px; border-radius: 5px;
margin-top: -20px; margin-top: -20px;
padding: 15px; padding: 15px;
@ -237,7 +253,7 @@ h4 {
} }
.card .card
[class*="card-header-plain"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) { [class*="card-header-plain"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
border-radius: 5px; border-radius: 5px;
margin-top: -20px; margin-top: -20px;
padding: 15px; padding: 15px;
@ -254,6 +270,7 @@ h4 {
margin-top: 10px; margin-top: 10px;
margin-right: 10px; margin-right: 10px;
font-weight: 400; font-weight: 400;
text-transform: uppercase;
} }
.card-header-plain h4 { .card-header-plain h4 {
@ -300,36 +317,14 @@ table > thead > tr > th,
cursor: pointer; cursor: pointer;
} }
.pills-rounded .nav-item .nav-link { .navbar.navbar-absolute {
border-radius: 10em; position: absolute;
width: 100%;
z-index: 0;
} }
.pills-outline-green .nav-item .nav-link { .fixed-top {
border: 1px solid rgb(197, 224, 180); z-index: 0;
color: rgb(131, 184, 95);
}
.pills-outline-green .nav-item .nav-link.active {
border: 1px solid rgb(197, 224, 180);
color: #4caf50;
background-color: rgb(240, 247, 236);
}
.pills-outline-green .nav-item .nav-link.active:hover {
border: 1px solid rgb(197, 224, 180);
color: #4caf50;
}
.pills-outline-blue .nav-item .nav-link {
border: 1px solid rgb(218, 227, 243);
color: rgb(43, 104, 209);
}
.pills-outline-blue .nav-item .nav-link.active {
border: 1px solid rgb(218, 227, 243);
color: rgb(43, 104, 209);
background-color: rgb(236, 241, 249);
}
.pills-outline-blue .nav-item .nav-link.active:hover {
border: 1px solid rgb(218, 227, 243);
color: rgb(43, 104, 209);
} }
.pills-outline-blue .nav-item .nav-link { .pills-outline-blue .nav-item .nav-link {
@ -345,3 +340,11 @@ table > thead > tr > th,
border: 1px solid rgb(231, 230, 230); border: 1px solid rgb(231, 230, 230);
color: rgb(145, 145, 145); color: rgb(145, 145, 145);
} }
.form-control:focus {
color: #495057;
background-color: rgba(0, 0, 0, 0);
border-color: none;
outline: none;
box-shadow: none;
}

14
dmp-frontend/src/assets/i18n/en.json
View File

@ -38,9 +38,14 @@
"CONFIRM": "Yes", "CONFIRM": "Yes",
"CANCEL": "No" "CANCEL": "No"
} }
},
"ACTIONS": {
"VIEW-ALL": "View All",
"LOG-IN": "Log in"
} }
}, },
"NAV-BAR": { "NAV-BAR": {
"BREADCRUMB-ROOT": "Dashboard",
"TITLE": "OpenDMP", "TITLE": "OpenDMP",
"PROJECTS": "Projects", "PROJECTS": "Projects",
"DMPS": "DMPs", "DMPS": "DMPs",
@ -324,7 +329,11 @@
"REFERNCE": "Reference", "REFERNCE": "Reference",
"PROJECT": "Project", "PROJECT": "Project",
"URI": "Uri", "URI": "Uri",
"ROLE": "Role",
"TEMPLATE": "Template",
"ORGANIZATION": "Organization",
"STATUS": "Status", "STATUS": "Status",
"VISITED": "Visited",
"DESCRIPTION": "Description", "DESCRIPTION": "Description",
"CREATED": "Created", "CREATED": "Created",
"ACTIONS": "Actions", "ACTIONS": "Actions",
@ -616,7 +625,10 @@
"RECENT-ACTIVITY": { "RECENT-ACTIVITY": {
"MY-TITLE-PROJECT": "My Recent Project Activity", "MY-TITLE-PROJECT": "My Recent Project Activity",
"MY-TITLE-DMP": "My Recent DMP Activity", "MY-TITLE-DMP": "My Recent DMP Activity",
"MY-TITLE-DATASET": "My Recent Dataset Activity" "MY-TITLE-DATASET": "My Recent Dataset Activity",
"LAST-VISITED-DMP": "Last Visited Data Management Plan",
"LAST-EDITED-DMP": "Last Edited Data Management Plan",
"LICENSE": "The DMPs below are public under the ## license of"
}, },
"FILE-UPLOADER": { "FILE-UPLOADER": {
"DEFAULT": "Choose a file", "DEFAULT": "Choose a file",