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

no message

This commit is contained in:
Diamantis Tziotzios 2018-07-24 10:58:55 +03:00
parent 22582676a3
commit 518a2ffd3c
10 changed files with 537 additions and 570 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/app-routing.module.ts
View File

@ -1,9 +1,7 @@
import { UnauthorizedComponent } from './unauthorized/unauthorized.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomepageComponent } from './homepage/homepage.component';
import { AuthGuard } from './shared/guards/auth.guard';
import { LoginComponent } from './user-management/login/login.component';
import { WelcomepageComponent } from './welcomepage/welcomepage.component';
import { B2AccessLoginComponent } from './user-management/login/b2access/b2access-login.component';

59
dmp-frontend/src/app/dmps/editor/dmp-editor.component.html
View File

@ -1,67 +1,63 @@
<div class="data-management-plan-editor">
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-card>
<mat-card-header>
<mat-card-title *ngIf="isNew">{{'DMP-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
<mat-card-title *ngIf="!isNew">
<h3>{{formGroup.get('label').value}} </h3>
<h3>{{formGroup?.get('label')?.value}} </h3>
</mat-card-title>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-card>
<mat-card-header>
<div class="fill-space"></div>
<div *ngIf="!isNew" flexLayout="row">
<div *ngIf="!isNew">
<!-- <div fxFlex>
<button mat-button type="button" (click)="redirectToProject()">
<mat-icon>arrow_right_alt</mat-icon>{{'DMP-EDITOR.ACTIONS.GO-TO-PROJECT' | translate}}</button>
</div> -->
<div fxFlex>
<div>
<button mat-button type="button" (click)="redirectToDatasets()">
<mat-icon>arrow_right_alt</mat-icon>{{'DMP-EDITOR.ACTIONS.GO-TO-DATASETS' | translate}}</button>
</div>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="newVersion(this.dataManagementPlan.id, this.dataManagementPlan.label)">
<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}</button>
<button mat-menu-item (click)="clone(this.dataManagementPlan.id)">
<mat-icon>filter_none</mat-icon>{{'DMP-LISTING.ACTIONS.CLONE' | translate}}</button>
</mat-menu>
<div fxFlex>
<button fxFlex mat-icon-button type="button" [matMenuTriggerFor]="actionsMenu">
<div>
<button mat-icon-button type="button" [matMenuTriggerFor]="actionsMenu">
<mat-icon>more_vert</mat-icon>
</button>
</div>
</div>
</mat-card-header>
<mat-card-content>
<mat-form-field class="full-width">
<div class="row">
<mat-form-field class="col-md-12">
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
<mat-error *ngIf="formGroup.get('label').errors?.backendError">{{baseErrorModel.label}}</mat-error>
<mat-error *ngIf="formGroup.get('label').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="full-width">
<mat-form-field class="col-md-12">
<textarea matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"
required></textarea>
<mat-error *ngIf="formGroup.get('description').errors?.backendError">{{errorModel.description}}</mat-error>
<mat-error *ngIf="formGroup.get('description').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<auto-complete class="mat-form-field-full-width" placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}"
[configuration]="projectAutoCompleteConfiguration" titleKey="label" [control]="formGroup.get('project')" [required]="true">
<auto-complete class="col-md-6" placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}" [configuration]="projectAutoCompleteConfiguration"
titleKey="label" [control]="formGroup.get('project')" [required]="true">
</auto-complete>
<!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
<td-chips color="accent" [items]="filteredProfiles" formControlName="profiles" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
<td-chips class="col-md-6" color="accent" [items]="filteredProfiles" formControlName="profiles" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}"
(inputChange)="filterProfiles($event)" requireMatch required>
<ng-template td-chip let-chip="chip">
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.label.substring(0, 1).toUpperCase()}}</div>
{{chip.label}}
</ng-template>
<ng-template td-autocomplete-option let-option="option">
<div layout="row" layout-align="start center">
<div>
{{option.label}}
</div>
</ng-template>
@ -73,25 +69,25 @@
<!-- <button mat-button (click)="availableProfiles()">View All</button> -->
<a style="float:right" href="#" (click)="availableProfiles()">View All</a>
<!-- <auto-complete-chip class="mat-form-field-full-width" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration"
<!-- <auto-complete-chip placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration"
titleKey="name" [control]="formGroup.get('organisations')" [required]="true">
</auto-complete-chip> -->
<td-chips color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
<td-chips class="col-md-6" color="accent" [items]="filteredOrganisations" formControlName="organisations" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}"
(inputChange)="filterOrganisations($event)" requireMatch>
<ng-template td-chip let-chip="chip">
<div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.name.substring(0, 1).toUpperCase()}}</div>
{{chip.name}}
</ng-template>
<ng-template td-autocomplete-option let-option="option">
<div layout="row" layout-align="start center">
<div>
{{option.name}}
</div>
</ng-template>
<mat-progress-bar [style.height.px]="2" *ngIf="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar>
</td-chips>
<div layout="row" layout-align="start center">
<div class="col-md-6">
<td-chips style="margin-bottom:25px; display:inline-block; width:90%" color="accent" [items]="filteredResearchers" formControlName="researchers"
placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" (inputChange)="filterResearchers($event)" requireMatch>
<ng-template td-chip let-chip="chip">
@ -99,7 +95,7 @@
{{chip.name}}
</ng-template>
<ng-template td-autocomplete-option let-option="option">
<div layout="row" layout-align="start center">
<div>
{{option.name}}
</div>
</ng-template>
@ -111,9 +107,9 @@
</button>
</div>
<h3 mat-subheader>{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h3>
<h3 mat-subheader class="col-md-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h3>
<mat-form-field class="full-width">
<mat-form-field class="col-md-6">
<input type="text" placeholder="{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}" [formControl]="textCtrl" matInput [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option" (click)="selectOption(option)">
@ -121,14 +117,14 @@
</mat-option>
</mat-autocomplete>
</mat-form-field>
<app-dynamic-dmp-field-resolver class="full-width" *ngIf="dataManagementPlan.definition" [formGroup]="formGroup" [dataManagementPlanProfile]="dataManagementPlan.definition"></app-dynamic-dmp-field-resolver>
<app-dynamic-dmp-field-resolver class="col-md-12" *ngIf="dataManagementPlan.definition" [formGroup]="formGroup" [dataManagementPlanProfile]="dataManagementPlan.definition"></app-dynamic-dmp-field-resolver>
<mat-form-field class="full-width">
<mat-form-field class="col-md-6">
<input matInput placeholder="Version" disabled [value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
</mat-form-field>
<mat-list *ngIf="associatedUsers?.length" role="list">
<mat-list *ngIf="associatedUsers?.length" role="list" class="col-md-12">
<h3 mat-subheader>Associated Users</h3>
<mat-list-item role="listitem" *ngFor="let user of associatedUsers">
<mat-icon mat-list-icon>person</mat-icon>
@ -137,14 +133,13 @@
</mat-list>
<div layout="row" class="full-width text-right" align="end">
<div class="col-md-12">
<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<!-- <button *ngIf="!isNew" mat-raised-button color="primary" (click)="invite()" type="button">{{'DMP-EDITOR.ACTIONS.INVITE' | translate}}</button> -->
<button mat-raised-button color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</button>
<button *ngIf="!isNew" mat-raised-button color="primary" type="button" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)">{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}</button>
</div>
</div>
</mat-card-content>
</mat-card>
</form>

10
dmp-frontend/src/app/dmps/editor/dmp-editor.component.scss
View File

@ -1,7 +1,3 @@
.full-width {
width: 100%;
}
.input-table {
table-layout: fixed;
}
@ -11,12 +7,6 @@
}
.data-management-plan-editor {
.mat-form-field-full-width {
mat-form-field {
width: 100%;
padding: 3px;
}
}
.fill-space {
flex: 1 1 auto;
}

10
dmp-frontend/src/app/projects/editor/project-editor.component.html
View File

@ -77,12 +77,20 @@
</td>
</tr>
</table>
<div class="col-md-12 text-right" align="end">
<div class="col-md-12">
<div class="row">
<div class="col-auto">
<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'PROJECT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto">
<button *ngIf="isNew || editMode" mat-raised-button color="primary" type="submit">{{'PROJECT-EDITOR.ACTIONS.SAVE' | translate}}</button>
</div>
<div class="col-auto">
<button *ngIf="!isNew && editMode" mat-raised-button color="primary" type="button" (click)="delete()">{{'PROJECT-EDITOR.ACTIONS.DELETE' | translate}}</button>
</div>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</form>

11
dmp-frontend/src/app/projects/listing/project-listing.component.html
View File

@ -1,13 +1,14 @@
<div>
<h3>{{languageResolverService.getBy('listingTitle') | translate}}</h3>
<app-projects-criteria-component></app-projects-criteria-component>
<mat-card class="mat-card">
<mat-card-header>
<mat-progress-bar *ngIf="dataSource?.isLoadingResults" mode="query"></mat-progress-bar>
<!-- <mat-progress-bar *ngIf="dataSource?.isLoadingResults" mode="query"></mat-progress-bar> -->
</mat-card-header>
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<mat-card-content>
<div class="row">
<app-projects-criteria-component class="col-md-12"></app-projects-criteria-component>
<mat-table class="col-md-12" [dataSource]="dataSource" matSort (matSortChange)="refresh()">
<ng-container cdkColumnDef="avatar">
<mat-header-cell *matHeaderCellDef mat-sort-header="avatar">{{'PROJECT-LISTING.COLUMNS.AVATAR' | translate}}</mat-header-cell>
@ -60,6 +61,8 @@
</mat-table>
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
</mat-paginator>
</div>
</mat-card-content>
</mat-card>
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]=" ['./new'] ">

51
dmp-frontend/src/app/projects/listing/project-listing.component.scss
View File

@ -1,34 +1,31 @@
.mat-table {
margin: 24px;
}
h3{
h3 {
margin-top: 0px;
}
.mat-fab-bottom-right {
}
.mat-fab-bottom-right {
top: auto !important;
right: 20px !important;
bottom: 10px !important;
left: auto !important;
position: fixed !important;
}
.full-width {
width: 100%;
}
.mat-card {
margin: 16px 0;
}
.mat-row {
cursor: pointer;
}
mat-row:hover {
background-color: lightgray;
}
mat-row:nth-child(odd){
background-color:#eef0fb;
}
.full-width {
width: 100%;
}
.mat-card {
margin: 16px 0;
}
.mat-row {
cursor: pointer;
}
mat-row:hover {
background-color: lightgray;
}
mat-row:nth-child(odd) {
background-color: #eef0fb;
}

2
dmp-frontend/src/app/shared/components/autocomplete/autocomplete.component.html
View File

@ -24,7 +24,7 @@
</mat-autocomplete>
</div> -->
<mat-form-field>
<mat-form-field class="autocomplete-input">
<input matInput [matAutocomplete]="auto" [formControl]="control" placeholder="{{placeholder}}" [required]="required">
<mat-error *ngIf="control['errors'] && control['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner>

24
dmp-frontend/src/app/shared/components/criteria/projects/projects-criteria.component.html
View File

@ -1,20 +1,11 @@
<div class="project-criteria">
<mat-card class="mat-card">
<mat-card-header>
<mat-card-title>
<h4>{{'CRITERIA.FILTERS'| translate}}</h4>
</mat-card-title>
</mat-card-header>
<div class="row">
<div class="col-md-4">
<mat-form-field>
<div class="row">
<!-- <h4 class="col-md-12">{{'CRITERIA.FILTERS'| translate}}</h4> -->
<mat-form-field class="col-md-4">
<input matInput placeholder=" {{'CRITERIA.PROJECTS.LIKE'| translate}}" name="projectCriteriaLike" [(ngModel)]="criteria.like"
(ngModelChange)="controlModified()">
<mat-error *ngIf="baseErrorModel?.like">{{baseErrorModel['criteria.like']}}</mat-error>
</mat-form-field>
</div>
<div class="col-md-4">
<mat-form-field>
<mat-form-field class="col-md-4">
<input matInput (focus)="periodStartPicker.open()" (click)="periodStartPicker.open()" placeholder=" {{this.languageResolver.getBy('criteriaStart')| translate}}"
[matDatepicker]="periodStartPicker" name="projectCriteriaPeriodStart" [(ngModel)]="criteria.periodStart" (ngModelChange)="controlModified()">
<mat-datepicker-toggle matSuffix [for]="periodStartPicker"></mat-datepicker-toggle>
@ -22,16 +13,11 @@
</mat-form-field>
<mat-error *ngIf="baseErrorModel['criteria.periodStart']">{{baseErrorModel['criteria.periodStart']}}</mat-error>
</div>
<div class="col-md-4">
<mat-form-field>
<mat-form-field class="col-md-4">
<input matInput (focus)="periodEndPicker.open()" (click)="periodEndPicker.open()" name="projectCriteriaPeriodEnd" placeholder=" {{this.languageResolver.getBy('criteriaEnd')| translate}}"
[matDatepicker]="periodEndPicker" [(ngModel)]="criteria.periodEnd" (ngModelChange)="controlModified()">
<mat-error *ngIf="baseErrorModel['criteria.periodEnd']">{{baseErrorModel['criteria.periodEnd']}}</mat-error>
<mat-datepicker-toggle matSuffix [for]="periodEndPicker"></mat-datepicker-toggle>
<mat-datepicker #periodEndPicker></mat-datepicker>
</mat-form-field>
</div>
</div>
</mat-card>
</div>

10
dmp-frontend/src/app/shared/components/criteria/projects/projects-criteria.component.scss
View File

@ -1,10 +0,0 @@
.project-criteria {
mat-form-field {
padding-bottom: 5px;
width: 100%;
}
mat-card {
padding-bottom: 0px;
}
}