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

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

View File

@ -1,115 +1,62 @@
<div class="card">
<div class="card-header card-header-plain">
<div class="card-desc">
<h4 class="card-title">
LAST EDITED DATA MANAGEMENT PLAN
</h4>
<p class="card-category">
The DMPs below are public under the ## license of
</p>
</div>
<a href="#" class="view-all">VIEW ALL</a>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-default">
<th>NAME</th>
<th>TEMPLATE</th>
<th>PROJECT</th>
<th>ROLE</th>
<th>ORGANIZATION</th>
<th>STATUS</th>
<th>VISITED</th>
<th></th>
</thead>
<tbody>
<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>
<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 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 class="card-header card-header-plain">
<div class="card-desc">
<h4 class="card-title">
{{ 'RECENT-ACTIVITY.LAST-EDITED-DMP' | translate}}
</h4>
<p class="card-category">
{{ 'RECENT-ACTIVITY.LICENSE' | translate}}
</p>
</div>
<a href="#" class="view-all">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate }}</a>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-default">
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate}}</th>
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.TEMPLATE' | translate }}</th>
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.PROJECT' | translate }}</th>
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</th>
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ORGANIZATION' | translate }}</th>
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.STATUS' | translate }}</th>
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.VISITED' | translate }}</th>
<th></th>
</thead>
<tbody *ngIf="dmpActivities != null">
<tr *ngFor="let activity of dmpActivities">
<td>{{ activity.label }}</td>
<td>
<div class="template-name">
--
</div>
</td>
<td>{{ activity.project }}</td>
<td>Role Name</td>
<td>{{ activity.organisations }}</td>
<td *ngIf="activity.status === 1">
<div class="is-public">
{{ enumUtils.toDmpStatusString(activity.status) }}
</div>
</td>
<td *ngIf="activity.status === 0" style="padding-left: 12px">
{{ enumUtils.toDmpStatusString(activity.status) }}
</td>
<td>{{ activity.creationTime | date: "shortDate" }}</td>
<td><i class="material-icons more-icon">more_horiz</i></td>
</tr>
</tbody>
<tbody *ngIf="dmpActivities == null">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>

View File

@ -1,15 +1,41 @@
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({
selector: 'app-recent-edited-activity',
templateUrl: './recent-edited-activity.component.html',
styleUrls: ['./recent-edited-activity.component.css']
selector: 'app-recent-edited-activity',
templateUrl: './recent-edited-activity.component.html',
styleUrls: ['./recent-edited-activity.component.css']
})
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();
}
}

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

View File

@ -1,86 +1,63 @@
<div class="card">
<div class="card-header card-header-plain">
<div class="card-desc">
<h4 class="card-title">
LAST VISITED DATA MANAGEMENT PLAN
</h4>
<p class="card-category">
The DMPs below are public under the ## license of
</p>
</div>
<a href="#" class="view-all">VIEW ALL</a>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-default">
<th>NAME</th>
<th>TEMPLATE</th>
<th>PROJECT</th>
<th>ROLE</th>
<th>ORGANIZATION</th>
<th>STATUS</th>
<th>VISITED</th>
<th></th>
</thead>
<tbody *ngIf="dmpActivities!=null">
<tr (click)="redirect(activity.id, recentActivityTypeEnum.Dmp)" *ngFor="let activity of dmpActivities" style="cursor: pointer;">
<td>{{activity.label}}</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 style="padding-left: 0px;" *ngIf="public">
<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 style="padding-left: 0px;" *ngIf="!public">PRIVATE</td>
<td>{{activity.timestamp | date:'shortDate'}}</td>
<td><i class="material-icons more-icon">more_horiz</i></td>
</tr>
</tbody>
<tbody *ngIf="dmpActivities==null">
<tr>
<td>--</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"
>--</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 class="card-header card-header-plain">
<div class="card-desc">
<h4 class="card-title">
{{ 'RECENT-ACTIVITY.LAST-VISITED-DMP' | translate}}
</h4>
<p class="card-category">
{{ 'RECENT-ACTIVITY.LICENSE' | translate}}
</p>
</div>
<a href="#" class="view-all">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate }}</a>
</div>
<div class="card-body table-responsive">
<table class="table table-hover">
<thead class="text-default">
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.NAME' | translate }}</th>
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.TEMPLATE' | translate }}</th>
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.PROJECT' | translate }}</th>
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ROLE' | translate }}</th>
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.ORGANIZATION' | translate }}</th>
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.STATUS' | translate }}</th>
<th>{{ 'DATASET-PROFILE-LISTING.COLUMNS.VISITED' | translate }}</th>
<th></th>
</thead>
<tbody *ngIf="dmpActivities != null">
<tr (click)="redirect(activity.id, recentActivityTypeEnum.Dmp)" *ngFor="let activity of dmpActivities"
style="cursor: pointer;">
<td>{{ activity.label }}</td>
<td>
<div class="template-name">
--
</div>
</td>
<td>{{ activity.project }}</td>
<td>Role Name</td>
<td>{{ activity.organisations }}</td>
<td *ngIf="activity.status === 1">
<div class="is-public">
{{ enumUtils.toDmpStatusString(activity.status) }}
</div>
</td>
<td *ngIf="activity.status === 0" style="padding-left: 12px">
{{ enumUtils.toDmpStatusString(activity.status) }}
</td>
<td>{{ activity.creationTime | date: "shortDate" }}</td>
<td><i class="material-icons more-icon">more_horiz</i></td>
</tr>
</tbody>
<tbody *ngIf="dmpActivities == null">
<tr>
<td></td>
<td></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>

View File

@ -1,38 +1,47 @@
import { Component, OnInit } from "@angular/core";
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 { AuthService } from "../../../core/services/auth/auth.service";
import { UserService } from "../../../core/services/user/user.service";
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({
selector: "app-recent-visited-activity",
templateUrl: "./recent-visited-activity.component.html",
styleUrls: ["./recent-visited-activity.component.css"]
})
export class RecentVisitedActivityComponent extends BaseComponent implements OnInit {
dmpActivities: any[];
export class RecentVisitedActivityComponent extends BaseComponent
implements OnInit {
dmpActivities: DmpListingModel[];
recentActivityItems: any[];
datasetActivities: any[];
projectActivities: any[];
organisationActivities: any[];
recentActivityTypeEnum = RecentActivityType;
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();
}
ngOnInit() {
if (this.isAuthenticated()) {
this.userService.getRecentActivity()
.pipe(takeUntil(this._destroyed))
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.datasetActivities = response['recentDatasetActivities'];
this.dmpActivities = response['recentDmpActivities'];
this.projectActivities = response['recentProjectActivities'];
this.organisationActivities = response['totalOrganisationCount'];
this.dmpActivities = response.data;
});
}
}
@ -57,6 +66,6 @@ export class RecentVisitedActivityComponent extends BaseComponent implements OnI
}
public isAuthenticated(): boolean {
return !(!this.authentication.current());
return !!this.authentication.current();
}
}

View File

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

View File

@ -1,60 +1,14 @@
<form class="navbar-form">
<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>
</div>
<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"
>
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)">
<mat-option *ngFor="let option of (filteredOptions | async)" [value]="option" class="option">
<span>{{ option.label }}</span>
<br />
<small>{{ transformType(option.type) }}</small>
</mat-option>
</mat-autocomplete>
</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> -->

View File

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

View File

@ -6,6 +6,7 @@ import { Router } from '@angular/router';
import { AuthService } from '../../core/services/auth/auth.service';
import { MatDialog } from '@angular/material';
import { UserDialogComponent } from '../misc/navigation/user-dialog/user-dialog.component';
import { AppRole } from '../../core/common/enum/app-role';
@Component({
selector: 'app-navbar',
@ -143,6 +144,17 @@ export class NavbarComponent implements OnInit {
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() {
const dialogRef = this.dialog.open(UserDialogComponent, {
hasBackdrop: true,

View File

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

View File

@ -1,89 +1,93 @@
<div *ngIf="user | async as userProfile; else loading" class="row user-profile">
<mat-card class="col-12 profile-card">
<mat-card-content>
<div class="row">
<div class="col-12">
<div class="row profile-card-center-row">
<div class="col-auto"><img mat-card-avatar [src]="userProfile.additionalinfo.avatarUrl"></div>
</div>
<div class="row profile-card-center-row">
<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 class="main-content">
<div class="container-fluid">
<div *ngIf="user | async as userProfile; else loading" class="row user-profile">
<mat-card class="col-12 profile-card">
<mat-card-content>
<div class="row">
<div class="col-12">
<div class="row profile-card-center-row">
<div class="col-auto"><img mat-card-avatar [src]="userProfile.additionalinfo.avatarUrl"></div>
</div>
<div>
<mat-chip-list>
<mat-chip>{{getUserRole(dmp)}}</mat-chip>
</mat-chip-list>
<div class="row profile-card-center-row">
<mat-card-title class="col-auto">{{userProfile.name}}</mat-card-title>
</div>
</mat-list-item>
</mat-list>
<button mat-button (click)="showAllDmps()"> {{'USER-PROFILE.DMPS.SHOW-ALL' | translate}}</button>
</div>
</div>
</mat-card-content>
</mat-card>
<mat-card class="col-12 profile-card">
<mat-card-header>
<mat-card-title>
<div class="row">
<h4 class="col-auto">{{ 'USER-PROFILE.SETTINGS.TITLE' | translate}}</h4>
<button class="col-auto" *ngIf="!editMode" mat-icon-button (click)="unlock()">
<mat-icon class="mat-24">edit</mat-icon>
</button>
<button class="col-auto" *ngIf="editMode" mat-icon-button (click)="lock()">
<mat-icon class="mat-24">lock</mat-icon>
</button>
</div>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="container">
<div class="row" [formGroup]="formGroup">
<mat-form-field class="col-md-4">
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [formControl]="this.formGroup.get('timezone')" matInput [matAutocomplete]="timezone" required>
<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 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>
<mat-chip-list>
<mat-chip>{{getUserRole(dmp)}}</mat-chip>
</mat-chip-list>
</div>
</mat-list-item>
</mat-list>
<button mat-button (click)="showAllDmps()"> {{'USER-PROFILE.DMPS.SHOW-ALL' | translate}}</button>
</div>
</div>
</mat-card-content>
</mat-card>
<mat-card class="col-12 profile-card">
<mat-card-header>
<mat-card-title>
<div class="row">
<h4 class="col-auto">{{ 'USER-PROFILE.SETTINGS.TITLE' | translate}}</h4>
<button class="col-auto" *ngIf="!editMode" mat-icon-button (click)="unlock()">
<mat-icon class="mat-24">edit</mat-icon>
</button>
<button class="col-auto" *ngIf="editMode" mat-icon-button (click)="lock()">
<mat-icon class="mat-24">lock</mat-icon>
</button>
</div>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="container">
<div class="row" [formGroup]="formGroup">
<mat-form-field class="col-md-4">
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.TIMEZONE' | translate}}" [formControl]="this.formGroup.get('timezone')" matInput [matAutocomplete]="timezone" required>
<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>
<ng-template #loading>
</ng-template>

View File

@ -2,6 +2,7 @@
outline: none !important;
}
a {
color: rgb(106, 164, 217);
}
@ -31,6 +32,17 @@ h4 {
/* 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 {
position: absolute;
z-index: 1;
@ -69,9 +81,9 @@ h4 {
.sidebar[data-color="danger"] li.active > a {
background-color: #ffffff;
-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),
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 {
@ -106,7 +118,7 @@ h4 {
}
.navbar form .btn {
margin-bottom: 0;
margin-bottom: 0;
padding-left: 5px;
}
@ -145,9 +157,9 @@ h4 {
.card .card-header-default:not(.card-header-icon):not(.card-header-text),
.card .card-header-default .card-text {
-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),
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,
@ -179,9 +191,9 @@ h4 {
.card .card-header-blue:not(.card-header-icon):not(.card-header-text),
.card .card-header-blue .card-text {
-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),
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 {
@ -213,6 +225,10 @@ h4 {
margin-top: 5px;
}
.card-title h4 {
text-transform: uppercase;
}
.card-footer .stats {
font-size: 12px;
line-height: 22px;
@ -229,7 +245,7 @@ h4 {
}
.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;
margin-top: -20px;
padding: 15px;
@ -237,7 +253,7 @@ h4 {
}
.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;
margin-top: -20px;
padding: 15px;
@ -254,6 +270,7 @@ h4 {
margin-top: 10px;
margin-right: 10px;
font-weight: 400;
text-transform: uppercase;
}
.card-header-plain h4 {
@ -300,36 +317,14 @@ table > thead > tr > th,
cursor: pointer;
}
.pills-rounded .nav-item .nav-link {
border-radius: 10em;
.navbar.navbar-absolute {
position: absolute;
width: 100%;
z-index: 0;
}
.pills-outline-green .nav-item .nav-link {
border: 1px solid rgb(197, 224, 180);
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);
.fixed-top {
z-index: 0;
}
.pills-outline-blue .nav-item .nav-link {
@ -345,3 +340,11 @@ table > thead > tr > th,
border: 1px solid rgb(231, 230, 230);
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;
}

View File

@ -38,9 +38,14 @@
"CONFIRM": "Yes",
"CANCEL": "No"
}
},
"ACTIONS": {
"VIEW-ALL": "View All",
"LOG-IN": "Log in"
}
},
"NAV-BAR": {
"BREADCRUMB-ROOT": "Dashboard",
"TITLE": "OpenDMP",
"PROJECTS": "Projects",
"DMPS": "DMPs",
@ -324,7 +329,11 @@
"REFERNCE": "Reference",
"PROJECT": "Project",
"URI": "Uri",
"ROLE": "Role",
"TEMPLATE": "Template",
"ORGANIZATION": "Organization",
"STATUS": "Status",
"VISITED": "Visited",
"DESCRIPTION": "Description",
"CREATED": "Created",
"ACTIONS": "Actions",
@ -616,7 +625,10 @@
"RECENT-ACTIVITY": {
"MY-TITLE-PROJECT": "My Recent Project 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": {
"DEFAULT": "Choose a file",