no message
This commit is contained in:
parent
919b60b733
commit
8ff927a4a7
|
|
@ -19,10 +19,7 @@
|
|||
"testTsconfig": "tsconfig.spec.json",
|
||||
"prefix": "app",
|
||||
"styles": [
|
||||
"../node_modules/primeng/resources/themes/omega/theme.css" ,
|
||||
"../node_modules/primeng/resources/primeng.css",
|
||||
"./../node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"styles.css"
|
||||
"styles.scss"
|
||||
],
|
||||
"scripts": [
|
||||
"./../node_modules/bootstrap/dist/js/bootstrap.min.js",
|
||||
|
|
|
|||
|
|
@ -277,6 +277,14 @@
|
|||
"tslib": "1.7.1"
|
||||
}
|
||||
},
|
||||
"@covalent/core": {
|
||||
"version": "1.0.0-rc.1",
|
||||
"resolved": "https://registry.npmjs.org/@covalent/core/-/core-1.0.0-rc.1.tgz",
|
||||
"integrity": "sha1-majfr1PoModZlV7EBM4KwMjmDSU=",
|
||||
"requires": {
|
||||
"tslib": "1.7.1"
|
||||
}
|
||||
},
|
||||
"@ng-bootstrap/ng-bootstrap": {
|
||||
"version": "1.0.0-beta.7",
|
||||
"resolved": "https://registry.npmjs.org/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0-beta.7.tgz",
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
"@angular/platform-browser": "5.1.1",
|
||||
"@angular/platform-browser-dynamic": "5.1.1",
|
||||
"@angular/router": "5.1.1",
|
||||
"@covalent/core": "^1.0.0-rc.1",
|
||||
"@ng-bootstrap/ng-bootstrap": "1.0.0-beta.7",
|
||||
"@ngui/auto-complete": "^0.16.0",
|
||||
"@ngx-translate/core": "^9.0.1",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export const HostConfiguration = {
|
||||
Server: 'http://192.168.32.103:8080/',
|
||||
Server: 'http://192.168.32.171:8080/',
|
||||
//CASHost: 'https://login-devel.uoa.gr/login',
|
||||
//Service: 'http://elkefinman/login'
|
||||
}
|
||||
|
|
@ -115,7 +115,7 @@ export class DataManagementPlanDataSource extends DataSource<DataManagementPlanL
|
|||
});
|
||||
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
|
||||
const request = new DataTableRequest(startIndex, this._paginator.pageSize);
|
||||
request.projectCriteria = this._criteria.getFormData();
|
||||
request.criteria = this._criteria.getFormData();
|
||||
return this._service.getPaged(request);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
.mat-card {
|
||||
overflow: auto;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.mat-table {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.mat-progress-bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mat-fab-bottom-right {
|
||||
top: auto !important;
|
||||
right: 20px !important;
|
||||
bottom: 10px !important;
|
||||
left: auto !important;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
|
@ -1,190 +1,83 @@
|
|||
<div class="container-fluid">
|
||||
<h3>{{'PROJECT-LISTING.TITLE' | translate}}</h3>
|
||||
<div class="project-editor">
|
||||
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
|
||||
<mat-card>
|
||||
<mat-card-title *ngIf="isNew">{{'PROJECT-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
|
||||
<mat-card-title *ngIf="!isNew">{{'PROJECT-EDITOR.TITLE.EDIT' | translate}} {{project.label}}</mat-card-title>
|
||||
<mat-card-content>
|
||||
|
||||
<app-projects-criteria-component></app-projects-criteria-component>
|
||||
<mat-card class="mat-card">
|
||||
<mat-progress-bar *ngIf="dataSource?.isLoadingResults" mode="query"></mat-progress-bar>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="{{'PROJECT-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-table [dataSource]="dataSource" matSort>
|
||||
<!-- <mat-form-field>
|
||||
<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.ABBREVIATION' | translate}}" type="text" name="abbreviation" formControlName="abbreviation"
|
||||
required>
|
||||
<mat-error *ngIf="formGroup.get('abbreviation').errors?.backendError">{{baseErrorModel.abbreviation}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('abbreviation').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<!-- Column Definition: Name -->
|
||||
<ng-container cdkColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.name}}</mat-cell>
|
||||
</ng-container>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="{{'PROJECT-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri" required>
|
||||
<mat-error *ngIf="formGroup.get('uri').errors?.backendError">{{baseErrorModel.uri}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('uri').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field> -->
|
||||
|
||||
<!-- Column Definition: Αbbreviation -->
|
||||
<ng-container cdkColumnDef="abbreviation">
|
||||
<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.ABBREVIATION' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.abbreviation}} </mat-cell>
|
||||
</ng-container>
|
||||
<!-- <table class="input-table full-width">
|
||||
<tr>
|
||||
<td>
|
||||
<mat-form-field>
|
||||
<input matInput (focus)="startDate.open()" (click)="startDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.START' | translate}}"
|
||||
class="table-input" [matDatepicker]="startDate" formControlName="startDate" required>
|
||||
<mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDate></mat-datepicker>
|
||||
<mat-error *ngIf="formGroup.get('startDate').errors?.backendError">{{baseErrorModel.startDate}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('startDate').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</td>
|
||||
<td>
|
||||
<mat-form-field>
|
||||
<input matInput (focus)="endDate.open()" (click)="endDate.open()" placeholder="{{'PROJECT-EDITOR.FIELDS.END' | translate}}"
|
||||
class="table-input" [matDatepicker]="endDate" formControlName="endDate" required>
|
||||
<mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
|
||||
<mat-datepicker #endDate></mat-datepicker>
|
||||
<mat-error *ngIf="formGroup.get('endDate').errors?.backendError">{{baseErrorModel.endDate}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('endDate').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</td>
|
||||
</tr>
|
||||
</table> -->
|
||||
|
||||
<!-- Column Definition: Start -->
|
||||
<ng-container cdkColumnDef="start">
|
||||
<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.START' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.start}} </mat-cell>
|
||||
</ng-container>
|
||||
<mat-form-field class="full-width">
|
||||
<textarea matInput class="description-area" placeholder="{{'PROJECT-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>
|
||||
|
||||
<!-- Column Definition: End -->
|
||||
<ng-container cdkColumnDef="end">
|
||||
<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.END' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.end}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Column Definition: Submission Time -->
|
||||
<ng-container cdkColumnDef="actions">
|
||||
<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"></mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id)"></mat-row>
|
||||
|
||||
</mat-table>
|
||||
<mat-paginator #paginator
|
||||
[length]="dataSource?.totalCount"
|
||||
[pageSizeOptions]="[10, 25, 100]">
|
||||
</mat-paginator>
|
||||
</mat-card>
|
||||
|
||||
<button mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]=" ['./new'] ">
|
||||
<mat-icon class="mat-24">add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<!-- <meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
|
||||
|
||||
<table class="table table-striped" [mfData]="tableData | projectTableFilter : filterQuery : whoami?.id : onlyMyProjects"
|
||||
#mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="1">
|
||||
<input class="form-control" [(ngModel)]="filterQuery" placeholder='Filter' />
|
||||
</th>
|
||||
<th style="width:50px;">
|
||||
<button class="btn btn-default" (click)="getProjects('false')">
|
||||
<span class="glyphicon glyphicon-refresh"></span>
|
||||
</button>
|
||||
</th>
|
||||
<th colspan="1">
|
||||
<div class="checkbox">
|
||||
<label><input type="checkbox" [(ngModel)]="onlyMyProjects" >Show only my projects</label>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th [ngClass]="{true:'visible', false:'invisible'}[showIDs]">
|
||||
<mfDefaultSorter by="id">ID</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="label">Label</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="abbreviation">Αbbreviation</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="startdate">Start Date</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="enddate">End Date</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="status">Status</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter by="description">Description</mfDefaultSorter>
|
||||
</th>
|
||||
<th>
|
||||
<mfDefaultSorter>Actions </mfDefaultSorter>
|
||||
</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="grayout-empty-table" *ngIf="!mf.data[0]">
|
||||
<td colspan="7">No elements</td>
|
||||
</tr>
|
||||
|
||||
<tr *ngFor="let project of mf.data" class="hover">
|
||||
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{project?.id}}</td>
|
||||
<td>{{(project?.label?.length > 40) ? (project?.label | slice:0:40)+'...':(project?.label) }}</td>
|
||||
<td>{{project?.abbreviation}}</td>
|
||||
<td>{{project?.startdate | date:'medium' }}</td>
|
||||
<td>{{project?.enddate | date:'medium'}}</td>
|
||||
<td>{{project?.status | statusToString}}</td>
|
||||
<td>{{(project?.description?.length > 40) ? (project?.description | slice:0:40)+'...':(project?.description) }}</td>
|
||||
<td>
|
||||
<a [ngClass]="{'not-active': whoami?.id!=project?.creationUser?.id }" class="editGridColumn" (click)="editRow(project, $event)">
|
||||
<i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP" ></i>
|
||||
</a>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="1">
|
||||
<button type="button" class="btn btn-info btncustom" (click)="newProject(item)">New Project</button>
|
||||
</td>
|
||||
<td colspan="5">
|
||||
|
||||
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,20]"></mfBootstrapPaginator>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="modal fade" id="newEditProjectModal" tabindex="-1" role="dialog" aria-labelledby="newProjectModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Project</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form #newProjectForm="ngForm" (ngSubmit)="SaveProject()" novalidate>
|
||||
|
||||
<label for="label-name" class="form-control-label">Label:</label>
|
||||
<input type="text" class="form-control" id="label-name" [(ngModel)]= "project.label" name = "label" required>
|
||||
<div class="form-group">
|
||||
<label for="abbreviation-text" class="form-control-label">Abbreviation:</label>
|
||||
<input class="form-control" id="abbreviation-text" [(ngModel)]= "project.abbreviation" name = "abbreviation">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="reference-text" class="form-control-label">Reference:</label>
|
||||
<input class="form-control" id="reference-text" [(ngModel)]= "project.reference" name = "reference">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="uri-text" class="form-control-label">Uri:</label>
|
||||
<input class="form-control" id="uri-text" [(ngModel)]= "project.uri" name = "uri">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="start-date" class="form-control-label">Start Date:</label>
|
||||
<input class="form-control" type='date' class="form-control" [(ngModel)]= "project.startdate" id='start-date' name = "startdate" required/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="end-date" class="form-control-label">End Date:</label>
|
||||
<input class="form-control" type='date' class="form-control" [(ngModel)]= "project.enddate" id='end-date' name = "enddate" required/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="status-name" class="col-form-label">Status:</label>
|
||||
<select class="form-control" id="statusid" [(ngModel)]="project.status" name="statusDropDown">
|
||||
<option *ngFor="let opt of statusDropDown.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
<td-chips [items]="filteredOrganisations" [debounce]="500" placeholder="Enter autocomplete strings" (inputChange)="filterOrganisations($event)"
|
||||
requireMatch>
|
||||
<ng-template td-chip let-chip="chip">
|
||||
<!-- <div class="tc-grey-100 bgc-teal-700" td-chip-avatar>{{chip.substring(0, 1).toUpperCase()}}</div> -->
|
||||
{{chip.name}}
|
||||
</ng-template>
|
||||
<ng-template td-autocomplete-option let-option="option">
|
||||
<div layout="row" layout-align="start center">
|
||||
{{option.name}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="code-name" class="form-control-label">Description:</label>
|
||||
<textarea rows="3" class="form-control" name="desc" id="description" [(ngModel)]= "project.description"> </textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-primary" [disabled]="!newProjectForm.form.valid" (click)="SaveProject();">Save project</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</ng-template>
|
||||
<mat-progress-bar [style.height.px]="2" *ngIf="filteringOrganisationsAsync" mode="indeterminate"></mat-progress-bar>
|
||||
</td-chips>
|
||||
|
||||
<div layout="row" class="full-width text-right" align="end">
|
||||
<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'PROJECT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
<button mat-raised-button color="primary" type="submit">{{'PROJECT-EDITOR.ACTIONS.SAVE' | translate}}</button>
|
||||
<button *ngIf="!isNew" mat-raised-button color="primary" type="submit" (click)="delete()">{{'PROJECT-EDITOR.ACTIONS.DELETE' | translate}}</button>
|
||||
</div>
|
||||
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.table-card .mat-grid-tile {
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.project-editor {
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.left-button {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.description-area {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,34 +1,119 @@
|
|||
import { Component, ViewChild, OnInit, AfterViewInit } from "@angular/core";
|
||||
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from "@angular/core";
|
||||
import { MatPaginator, MatSort, MatSnackBar } from "@angular/material";
|
||||
import { Router } from "@angular/router";
|
||||
import { Router, ActivatedRoute, Params } from "@angular/router";
|
||||
import { TranslateService } from "@ngx-translate/core";
|
||||
import { DataSource } from "@angular/cdk/table";
|
||||
import { Observable } from "rxjs/Observable";
|
||||
import { JsonSerializer } from "../../utilities/JsonSerializer";
|
||||
import { FormGroup } from "@angular/forms";
|
||||
import { SnackBarNotificationComponent } from "../../shared/components/notificaiton/snack-bar-notification.component";
|
||||
import { BaseErrorModel } from "../../models/error/BaseErrorModel";
|
||||
import { DataManagementPlanService } from "../../services/data-management-plan/data-management-plan.service";
|
||||
import { DataManagementPlanModel } from "../../models/data-managemnt-plans/DataManagementPlanModel";
|
||||
import { ServerService } from "../../services/server.service";
|
||||
import { ExternalSourcesService } from "../../services/external-sources/external-sources.service";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-dmp-editor-component',
|
||||
templateUrl: 'dmp-editor.component.html',
|
||||
styleUrls: ['./dmp-editor.component.css'],
|
||||
styleUrls: ['./dmp-editor.component.scss'],
|
||||
providers: [DataManagementPlanService, ExternalSourcesService],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class DataManagementPlanEditorComponent implements OnInit, AfterViewInit {
|
||||
export class DataManagementPlanEditorComponent implements AfterViewInit {
|
||||
|
||||
isNew = true;
|
||||
dataManagementPlan: DataManagementPlanModel;
|
||||
formGroup: FormGroup = null;
|
||||
|
||||
filteringOrganisationsAsync: boolean = false;
|
||||
filteringResearchersAsync: boolean = false;
|
||||
filteredOrganisations: string[];
|
||||
filteredResearchers: string[];
|
||||
|
||||
filterOrganisations(value: string): void {
|
||||
this.filteredOrganisations = undefined;
|
||||
if (value) {
|
||||
this.filteringOrganisationsAsync = true;
|
||||
|
||||
this.externalSourcesService.searchDMPOrganizations(value).subscribe(organizations => {
|
||||
this.filteredOrganisations = organizations;
|
||||
this.filteringOrganisationsAsync = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
constructor(
|
||||
private projectService: DataManagementPlanService,
|
||||
private router: Router,
|
||||
private languageService: TranslateService,
|
||||
public snackBar: MatSnackBar
|
||||
private dataManagementPlanService: DataManagementPlanService,
|
||||
private externalSourcesService: ExternalSourcesService,
|
||||
private route: ActivatedRoute,
|
||||
public snackBar: MatSnackBar,
|
||||
public router: Router,
|
||||
public language: TranslateService,
|
||||
) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
ngAfterViewInit() {
|
||||
this.route.params.subscribe((params: Params) => {
|
||||
const itemId = params['id'];
|
||||
|
||||
if (itemId != null) {
|
||||
this.isNew = false;
|
||||
this.dataManagementPlanService.getSingle(itemId).map(data => data as DataManagementPlanModel)
|
||||
.subscribe(data => {
|
||||
this.dataManagementPlan = new JsonSerializer<DataManagementPlanModel>().fromJSONObject(data, DataManagementPlanModel);
|
||||
this.formGroup = this.dataManagementPlan.buildForm();
|
||||
});
|
||||
} else {
|
||||
this.dataManagementPlan = new DataManagementPlanModel();
|
||||
setTimeout(() => {
|
||||
this.formGroup = this.dataManagementPlan.buildForm();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
formSubmit(): void {
|
||||
//this.touchAllFormFields(this.formGroup);
|
||||
if (!this.isFormValid()) { return; }
|
||||
this.onSubmit();
|
||||
}
|
||||
|
||||
public isFormValid() {
|
||||
return this.formGroup.valid;
|
||||
}
|
||||
|
||||
onSubmit(): void {
|
||||
this.dataManagementPlanService.createDataManagementPlan(this.formGroup.value).subscribe(
|
||||
complete => this.onCallbackSuccess(),
|
||||
error => this.onCallbackError(error)
|
||||
);
|
||||
}
|
||||
|
||||
onCallbackSuccess(): void {
|
||||
this.snackBar.openFromComponent(SnackBarNotificationComponent, {
|
||||
data: { message: this.isNew ? 'GENERAL.SNACK-BAR.SUCCESSFUL-CREATION' : 'GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE', language: this.language },
|
||||
duration: 3000,
|
||||
extraClasses: ['snackbar-success']
|
||||
})
|
||||
this.router.navigate(['/dataManagementPlans']);
|
||||
}
|
||||
|
||||
onCallbackError(error: any) {
|
||||
this.setErrorModel(error.error);
|
||||
//this.validateAllFormFields(this.formGroup);
|
||||
}
|
||||
|
||||
public setErrorModel(errorModel: BaseErrorModel) {
|
||||
Object.keys(errorModel).forEach(item => {
|
||||
(<any>this.dataManagementPlan.errorModel)[item] = (<any>errorModel)[item];
|
||||
})
|
||||
}
|
||||
|
||||
public cancel(): void {
|
||||
this.router.navigate(['/dataManagementPlans']);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,57 @@
|
|||
import { Serializable } from "../Serializable";
|
||||
import { ValidationContext } from "../../utilities/validators/ValidationContext";
|
||||
import { FormGroup, FormBuilder, FormControl, Validators } from "@angular/forms";
|
||||
import { BackendErrorValidator } from "../../utilities/validators/BackendErrorValidator";
|
||||
import { BaseErrorModel } from "../error/BaseErrorModel";
|
||||
import { AutoCompleteItem } from "../../shared/components/autocomplete/AutoCompleteItem";
|
||||
|
||||
export class DataManagementPlanModel implements Serializable<DataManagementPlanModel> {
|
||||
public id: String;
|
||||
public label: String;
|
||||
public abbreviation: String;
|
||||
public reference: String;
|
||||
public uri: String;
|
||||
public previous: String;
|
||||
public version: number;
|
||||
public status: String;
|
||||
public startDate: Date;
|
||||
public endDate: Date;
|
||||
public description: String;
|
||||
public selectedProject: AutoCompleteItem;
|
||||
// public selectedProjectReference: AutoCompleteItem;
|
||||
// public selectedProjectReference: AutoCompleteItem;
|
||||
|
||||
|
||||
public errorModel: BaseErrorModel = new BaseErrorModel();
|
||||
|
||||
fromJSONObject(item: any): DataManagementPlanModel {
|
||||
this.id = item.id;
|
||||
this.label = item.label;
|
||||
this.abbreviation = item.abbreviation;
|
||||
this.reference = item.reference;
|
||||
this.uri = item.uri;
|
||||
this.status = item.status;
|
||||
this.startDate = item.startDate;
|
||||
this.endDate = item.endDate;
|
||||
this.description = item.description;
|
||||
|
||||
this.previous = item.previous;
|
||||
this.version = item.version;
|
||||
this.status = item.status;
|
||||
this.description = item.description;
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
buildForm(context: ValidationContext = null, disabled: boolean = false): FormGroup {
|
||||
if (context == null) { context = this.createValidationContext(); }
|
||||
|
||||
const formGroup = new FormBuilder().group({
|
||||
label: [{ value: this.label, disabled: disabled }, context.getValidation('label').validators],
|
||||
previous: [{ value: this.previous, disabled: disabled }, context.getValidation('previous').validators],
|
||||
version: [{ value: this.version, disabled: disabled }, context.getValidation('version').validators],
|
||||
status: [{ value: this.status, disabled: disabled }, context.getValidation('status').validators],
|
||||
description: [{ value: this.description, disabled: disabled }, context.getValidation('description').validators],
|
||||
});
|
||||
|
||||
return formGroup;
|
||||
}
|
||||
|
||||
createValidationContext(): ValidationContext {
|
||||
const baseContext: ValidationContext = new ValidationContext();
|
||||
baseContext.validation.push({ key: 'label', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'label')] });
|
||||
baseContext.validation.push({ key: 'previous', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'previous')] });
|
||||
baseContext.validation.push({ key: 'version', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'version')] });
|
||||
baseContext.validation.push({ key: 'status', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'status')] });
|
||||
baseContext.validation.push({ key: 'description', validators: [Validators.required, BackendErrorValidator(this.errorModel, 'description')] });
|
||||
|
||||
return baseContext;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
import { DataManagementPlanCriteria } from "../criteria/data-management-plan/DataManagementPlanCriteria";
|
||||
import { ProjectCriteria } from "../criteria/project/ProjectCriteria";
|
||||
import { BaseCriteria } from "../criteria/BaseCriteria";
|
||||
|
||||
export class DataTableRequest {
|
||||
offset = 0;
|
||||
length = 0;
|
||||
projectCriteria: ProjectCriteria;
|
||||
dmpCriteria: DataManagementPlanCriteria;
|
||||
criteria: BaseCriteria;
|
||||
|
||||
constructor(offset: number, length: number) {
|
||||
this.length = length;
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
.mat-card {
|
||||
overflow: auto;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.mat-table {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.mat-progress-bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mat-fab-bottom-right {
|
||||
top: auto !important;
|
||||
right: 20px !important;
|
||||
bottom: 10px !important;
|
||||
left: auto !important;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<div>
|
||||
<form *ngIf="formGroup" class="expense-list" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
|
||||
<div class="project-editor">
|
||||
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
|
||||
<mat-card>
|
||||
<mat-card-title *ngIf="isNew">{{'PROJECT-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
|
||||
<mat-card-title *ngIf="!isNew">{{'PROJECT-EDITOR.TITLE.EDIT' | translate}} {{project.label}}</mat-card-title>
|
||||
|
|
@ -49,17 +49,19 @@
|
|||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<mat-form-field class="full-width">
|
||||
<textarea matInput class="description-area" placeholder="{{'PROJECT-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>
|
||||
|
||||
<div layout="row" class="full-width text-right" align="end">
|
||||
<!-- <button mat-raised-button color="primary" (click)="cancel()" type="button">{{'FORM-EXPENSE-LIST.EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
<button *ngIf="this.item.status == 0" mat-raised-button color="primary" type="submit" (click)="save()">{{'FORM-EXPENSE-LIST.EDITOR.ACTIONS.SAVE' | translate}}</button>
|
||||
<button *ngIf="this.item.status == 0" mat-raised-button color="primary" type="submit" (click)="submit()">{{'FORM-EXPENSE-LIST.EDITOR.ACTIONS.SUBMIT' | translate}}</button>
|
||||
<button *ngIf="!isNew && this.item.status == 0" mat-raised-button color="primary" type="submit" (click)="delete()">{{'FORM-EXPENSE-LIST.EDITOR.ACTIONS.DELETE' | translate}}</button> -->
|
||||
<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'PROJECT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
<button mat-raised-button color="primary" type="submit">{{'PROJECT-EDITOR.ACTIONS.SAVE' | translate}}</button>
|
||||
<button *ngIf="!isNew" mat-raised-button color="primary" type="submit" (click)="delete()">{{'PROJECT-EDITOR.ACTIONS.DELETE' | translate}}</button>
|
||||
</div>
|
||||
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.table-card .mat-grid-tile {
|
||||
background: rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
|
||||
.project-editor {
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.left-button {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.description-area {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, ViewChild, OnInit, AfterViewInit } from "@angular/core";
|
||||
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from "@angular/core";
|
||||
import { MatPaginator, MatSort, MatSnackBar } from "@angular/material";
|
||||
import { Router, ActivatedRoute, Params } from "@angular/router";
|
||||
import { TranslateService } from "@ngx-translate/core";
|
||||
|
|
@ -9,14 +9,17 @@ import { ProjectModel } from "../../models/projects/ProjectModel";
|
|||
import { ProjectService } from "../../services/project/project.service";
|
||||
import { JsonSerializer } from "../../utilities/JsonSerializer";
|
||||
import { FormGroup } from "@angular/forms";
|
||||
import { SnackBarNotificationComponent } from "../../shared/components/notificaiton/snack-bar-notification.component";
|
||||
import { BaseErrorModel } from "../../models/error/BaseErrorModel";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-project-editor-component',
|
||||
templateUrl: 'project-editor.component.html',
|
||||
styleUrls: ['./project-editor.component.css'],
|
||||
providers: [ProjectService]
|
||||
styleUrls: ['./project-editor.component.scss'],
|
||||
providers: [ProjectService],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ProjectEditorComponent implements AfterViewInit {
|
||||
|
||||
|
|
@ -27,6 +30,9 @@ export class ProjectEditorComponent implements AfterViewInit {
|
|||
constructor(
|
||||
private projectService: ProjectService,
|
||||
private route: ActivatedRoute,
|
||||
public snackBar: MatSnackBar,
|
||||
public router: Router,
|
||||
public language: TranslateService
|
||||
) {
|
||||
|
||||
}
|
||||
|
|
@ -44,8 +50,51 @@ export class ProjectEditorComponent implements AfterViewInit {
|
|||
});
|
||||
} else {
|
||||
this.project = new ProjectModel();
|
||||
this.formGroup = this.project.buildForm();
|
||||
setTimeout(() => {
|
||||
this.formGroup = this.project.buildForm();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
formSubmit(): void {
|
||||
//this.touchAllFormFields(this.formGroup);
|
||||
if (!this.isFormValid()) { return; }
|
||||
this.onSubmit();
|
||||
}
|
||||
|
||||
public isFormValid() {
|
||||
return this.formGroup.valid;
|
||||
}
|
||||
|
||||
onSubmit(): void {
|
||||
this.projectService.createProject(this.formGroup.value).subscribe(
|
||||
complete => this.onCallbackSuccess(),
|
||||
error => this.onCallbackError(error)
|
||||
);
|
||||
}
|
||||
|
||||
onCallbackSuccess(): void {
|
||||
this.snackBar.openFromComponent(SnackBarNotificationComponent, {
|
||||
data: { message: this.isNew ? 'GENERAL.SNACK-BAR.SUCCESSFUL-CREATION' : 'GENERAL.SNACK-BAR.SUCCESSFUL-UPDATE', language: this.language },
|
||||
duration: 3000,
|
||||
extraClasses: ['snackbar-success']
|
||||
})
|
||||
this.router.navigate(['/projects']);
|
||||
}
|
||||
|
||||
onCallbackError(error: any) {
|
||||
this.setErrorModel(error.error);
|
||||
//this.validateAllFormFields(this.formGroup);
|
||||
}
|
||||
|
||||
public setErrorModel(errorModel: BaseErrorModel) {
|
||||
Object.keys(errorModel).forEach(item => {
|
||||
(<any>this.project.errorModel)[item] = (<any>errorModel)[item];
|
||||
})
|
||||
}
|
||||
|
||||
public cancel(): void {
|
||||
this.router.navigate(['/projects']);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
.mat-card {
|
||||
overflow: auto;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.mat-table {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.mat-progress-bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mat-fab-bottom-right {
|
||||
top: auto !important;
|
||||
right: 20px !important;
|
||||
bottom: 10px !important;
|
||||
left: auto !important;
|
||||
position: fixed !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.mat-table {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.mat-progress-bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Component, ViewChild, OnInit, AfterViewInit } from "@angular/core";
|
||||
import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from "@angular/core";
|
||||
import { MatPaginator, MatSort, MatSnackBar } from "@angular/material";
|
||||
import { Router } from "@angular/router";
|
||||
import { TranslateService } from "@ngx-translate/core";
|
||||
|
|
@ -16,8 +16,9 @@ import { SnackBarNotificationComponent } from "../shared/components/notificaiton
|
|||
@Component({
|
||||
selector: 'app-project-listing-component',
|
||||
templateUrl: 'project-listing.component.html',
|
||||
styleUrls: ['./project-listing.component.css'],
|
||||
providers: [ProjectService]
|
||||
styleUrls: ['./project-listing.component.scss'],
|
||||
providers: [ProjectService],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ProjectListingComponent implements OnInit, AfterViewInit {
|
||||
|
||||
|
|
@ -115,7 +116,7 @@ export class ProjectDataSource extends DataSource<ProjectListingModel> {
|
|||
});
|
||||
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
|
||||
const request = new DataTableRequest(startIndex, this._paginator.pageSize);
|
||||
request.projectCriteria = this._criteria.getFormData();
|
||||
request.criteria = this._criteria.getFormData();
|
||||
return this._service.getPaged(request);
|
||||
})
|
||||
.catch((error: any) => {
|
||||
|
|
@ -136,7 +137,7 @@ export class ProjectDataSource extends DataSource<ProjectListingModel> {
|
|||
.map(result => {
|
||||
if (!result) { return []; }
|
||||
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
||||
return result.data;
|
||||
return result.payload.data;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export class DataManagementPlanService {
|
|||
|
||||
constructor(private http: BaseHttpService) {
|
||||
|
||||
this.actionUrl = HostConfiguration.Server + 'api/dmps/';
|
||||
this.actionUrl = HostConfiguration.Server + 'dmps/';
|
||||
|
||||
this.headers = new HttpHeaders();
|
||||
this.headers = this.headers.set('Content-Type', 'application/json');
|
||||
|
|
@ -32,4 +32,8 @@ export class DataManagementPlanService {
|
|||
getSingle(id: string): Observable<DataManagementPlanModel> {
|
||||
return this.http.get<DataManagementPlanModel>(this.actionUrl + id, { headers: this.headers });
|
||||
}
|
||||
|
||||
createDataManagementPlan(dataManagementPlanModel: DataManagementPlanModel): Observable<DataManagementPlanModel> {
|
||||
return this.http.post<DataManagementPlanModel>(this.actionUrl + 'add', dataManagementPlanModel, { headers: this.headers });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import 'rxjs/add/operator/map';
|
||||
import { HttpClient, HttpHeaders } from '@angular/common/http';
|
||||
import { Injectable } from '@angular/core';
|
||||
import { HostConfiguration } from './../../app.constants';
|
||||
import { BaseHttpService } from '../../utilities/cite-http-service-module/base-http.service';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
|
||||
|
||||
@Injectable()
|
||||
export class ExternalSourcesService {
|
||||
|
||||
private actionUrl: string;
|
||||
private headers: HttpHeaders;
|
||||
|
||||
constructor(private http: BaseHttpService) {
|
||||
|
||||
this.actionUrl = HostConfiguration.Server + 'external/';
|
||||
|
||||
this.headers = new HttpHeaders();
|
||||
this.headers = this.headers.set('Content-Type', 'application/json');
|
||||
this.headers = this.headers.set('Accept', 'application/json');
|
||||
}
|
||||
|
||||
public searchDatasetRegistry(like: string) {
|
||||
return this.http.get("registries" + "?query=" + like);
|
||||
}
|
||||
|
||||
public searchDatasetRepository(like: string) {
|
||||
return this.http.get("datarepos" + "?query=" + like);
|
||||
}
|
||||
|
||||
public searchDatasetService(like: string) {
|
||||
return this.http.get("services" + "?query=" + like);
|
||||
}
|
||||
|
||||
public searchDMPResearchers(like: string) {
|
||||
return this.http.get("researchers" + "?query=" + like);
|
||||
}
|
||||
|
||||
public searchDMPOrganizations(like: string): Observable<any> {
|
||||
return this.http.get<any>(this.actionUrl + "organisations" + "?query=" + like, { headers: this.headers });
|
||||
}
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@ export class ProjectService {
|
|||
|
||||
constructor(private http: BaseHttpService) {
|
||||
|
||||
this.actionUrl = HostConfiguration.Server + 'dmp-backend/rest/projects/';
|
||||
this.actionUrl = HostConfiguration.Server + 'projects/';
|
||||
|
||||
this.headers = new HttpHeaders();
|
||||
this.headers = this.headers.set('Content-Type', 'application/json');
|
||||
|
|
@ -32,4 +32,9 @@ export class ProjectService {
|
|||
getSingle(id: string): Observable<ProjectModel> {
|
||||
return this.http.get<ProjectModel>(this.actionUrl + id, { headers: this.headers });
|
||||
}
|
||||
|
||||
createProject(projectModel: ProjectModel): Observable<ProjectModel> {
|
||||
return this.http.post<ProjectModel>(this.actionUrl + 'add', projectModel, { headers: this.headers });
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export class RestBase {
|
|||
|
||||
|
||||
protocol: string = "http";
|
||||
hostname: string ="192.168.32.103"
|
||||
hostname: string ="192.168.32.171"
|
||||
port: number = 8080;
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import { BaseCriteria } from "../../../models/criteria/BaseCriteria";
|
||||
|
||||
export class AutoCompleteConfiguration {
|
||||
public callback: Function;
|
||||
public criteria: BaseCriteria;
|
||||
constructor(callback: Function, criteria: BaseCriteria) {
|
||||
this.callback = callback;
|
||||
this.criteria = criteria;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { FormGenerator } from "../../../utilities/forms/FormGenerator";
|
||||
import { ValidationContext } from "../../../utilities/validators/ValidationContext";
|
||||
import { FormBuilder, FormGroup } from "@angular/forms";
|
||||
|
||||
export class AutoCompleteItem implements FormGenerator {
|
||||
|
||||
public value: string;
|
||||
public text: string;
|
||||
public description: string;
|
||||
constructor(value: string, text: string, description: string) {
|
||||
this.value = value;
|
||||
this.text = text;
|
||||
this.description = description;
|
||||
}
|
||||
|
||||
buildForm(context: ValidationContext, disabled: boolean = false): FormGroup {
|
||||
return new FormBuilder().group({
|
||||
value: [{ value: this.value, disabled: disabled }, context.getValidation('value').validators],
|
||||
text: [{ value: this.text, disabled: disabled }, context.getValidation('text').validators],
|
||||
description: [{ value: this.description, disabled: disabled }, context.getValidation('description').validators]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<div [formGroup]="form" class="autocomplete">
|
||||
<table class="full-width">
|
||||
<tr>
|
||||
<td>
|
||||
<mat-form-field class="autocomplete-input">
|
||||
<input matInput type="text" placeholder="{{placeholder}}" [matAutocomplete]="auto" formControlName="text" [required]="required"
|
||||
[errorStateMatcher]="errorStateMatcher">
|
||||
<mat-error *ngIf="form.get('value').errors?.required">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
<mat-error *ngIf="validationErrorString">{{errorString}}</mat-error>
|
||||
<mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner>
|
||||
<input matInput type="text" [matAutocomplete]="auto" hidden="hidden">
|
||||
</mat-form-field>
|
||||
</td>
|
||||
<td *ngIf="createNew">
|
||||
<button mat-raised-button type="button" color="primary" (click)="this.ClickFunctionCall()" tabindex="2">{{'GENERAL.AUTOCOMPLETE.CREATE-NEW' | translate}}</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="this.optionSelected($event)">
|
||||
<mat-option *ngFor="let option of options" [value]="option">
|
||||
{{ option.text }} {{option.description?'['+option.description+']':''}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
.autocomplete-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.autocomplete-progress {
|
||||
overflow: initial !important;
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.left-button {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.input-table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
import { FormControl, FormGroupDirective, NgForm, FormGroup } from '@angular/forms';
|
||||
import { Observable } from 'rxjs/Rx';
|
||||
import { setTimeout } from 'timers';
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import 'rxjs/add/operator/debounceTime';
|
||||
import 'rxjs/add/operator/map';
|
||||
import { AutoCompleteConfiguration } from './AutoCompleteConfiguration';
|
||||
import { AutoCompleteItem } from './AutoCompleteItem';
|
||||
import { ErrorStateMatcher } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'auto-complete',
|
||||
templateUrl: './autocomplete.component.html',
|
||||
styleUrls: ['./autocomplete.component.scss']
|
||||
})
|
||||
export class AutocompleteComponent implements OnInit {
|
||||
@Input()
|
||||
configuration: AutoCompleteConfiguration;
|
||||
|
||||
@Input()
|
||||
mapper: Function;
|
||||
|
||||
@Input()
|
||||
typeaheadMS: number;
|
||||
|
||||
@Input()
|
||||
placeholder: String;
|
||||
|
||||
@Input()
|
||||
validationErrorString: String;
|
||||
|
||||
public errorStateMatcher: AutoCompleteErrorStateMatcher = new AutoCompleteErrorStateMatcher();
|
||||
|
||||
@Input()
|
||||
required: boolean;
|
||||
|
||||
@Input() selectedDropdownItem: AutoCompleteItem;
|
||||
@Output() selectedDropdownItemChange = new EventEmitter<AutoCompleteItem>();
|
||||
|
||||
@Output()
|
||||
output: EventEmitter<AutoCompleteItem> = new EventEmitter<AutoCompleteItem>();
|
||||
|
||||
@Input() form: FormGroup;
|
||||
|
||||
@Input() createNew = false;
|
||||
//term = new FormControl();
|
||||
@Input()
|
||||
ClickFunctionCall: Function;
|
||||
|
||||
loading = false;
|
||||
|
||||
options: AutoCompleteItem[];
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
const valueChanges = this.form.controls['text'].valueChanges.share();
|
||||
valueChanges.subscribe(searchTerm => {
|
||||
this.loading = true;
|
||||
if (this.form.controls['value'].value) {
|
||||
this.resetFormGroupValue();
|
||||
}
|
||||
});
|
||||
|
||||
valueChanges
|
||||
.debounceTime(this.typeaheadMS)
|
||||
.subscribe(searchTerm => {
|
||||
if (typeof searchTerm === 'string') {
|
||||
this.inputOnChange(searchTerm)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
resetFormGroupValue() {
|
||||
this.form.patchValue({ value: null }, { emitEvent: false });
|
||||
}
|
||||
|
||||
// listingItemToDropDown(item: DropdownListingItem): AutoCompleteItem {
|
||||
// return (item as DropdownListingItem).toDropdownList();
|
||||
// }
|
||||
|
||||
optionSelected(event: any) {
|
||||
this.form.patchValue(event.option.value, { emitEvent: false });
|
||||
this.selectedDropdownItemChange.emit(event.option.value);
|
||||
//this.form.updateValueAndValidity();
|
||||
this.options = [event.option.value];
|
||||
this.loading = false;
|
||||
}
|
||||
|
||||
inputOnChange(term: string) {
|
||||
//this.form.patchValue({ value: null, description: '', text: '' });
|
||||
//this.form.updateValueAndValidity();
|
||||
this.configuration.criteria.Like = term;
|
||||
this.configuration.callback(this.configuration.criteria)
|
||||
.map((res: any) => this.mapper(res))
|
||||
.subscribe(
|
||||
(res: AutoCompleteItem[]) => {
|
||||
this.options = res;
|
||||
},
|
||||
null,
|
||||
() => { this.loading = false });
|
||||
}
|
||||
|
||||
displayFn(item: AutoCompleteItem): string {
|
||||
return item.text ? item.text : '';
|
||||
}
|
||||
|
||||
//fieldHasErrors(control: FormControl, form: FormGroupDirective | NgForm): boolean {
|
||||
// return this.errorStateMatcher(control, form);
|
||||
// }
|
||||
}
|
||||
|
||||
export class AutoCompleteErrorStateMatcher implements ErrorStateMatcher {
|
||||
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
|
||||
const isFormSubmitted = form && form.submitted;
|
||||
const isControlInvalid = control && control.invalid && (control.dirty || control.touched || isFormSubmitted);
|
||||
const isFormInvalid = form && form.enabled && form.invalid && (form.dirty || form.touched || isFormSubmitted)
|
||||
return !!(isControlInvalid || isFormInvalid);
|
||||
}
|
||||
}
|
||||
|
|
@ -27,6 +27,7 @@ import {
|
|||
} from '@angular/material';
|
||||
import { CdkTableModule } from '@angular/cdk/table';
|
||||
import { SnackBarNotificationComponent } from '../components/notificaiton/snack-bar-notification.component';
|
||||
import { CovalentLayoutModule, CovalentChipsModule } from '@covalent/core';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -56,7 +57,9 @@ import { SnackBarNotificationComponent } from '../components/notificaiton/snack-
|
|||
MatProgressSpinnerModule,
|
||||
MatTooltipModule,
|
||||
MatCheckboxModule,
|
||||
MatTabsModule
|
||||
MatTabsModule,
|
||||
CovalentLayoutModule,
|
||||
CovalentChipsModule
|
||||
],
|
||||
|
||||
providers: [
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
{
|
||||
"GENERAL": {
|
||||
"VALIDATION": {
|
||||
"REQUIRED": "Required"
|
||||
}
|
||||
},
|
||||
"NAV-BAR": {
|
||||
"TITLE": "DMPS"
|
||||
},
|
||||
|
|
@ -26,6 +31,19 @@
|
|||
"TITLE": {
|
||||
"NEW": "New Project",
|
||||
"EDIT": "Edit"
|
||||
},
|
||||
"FIELDS": {
|
||||
"NAME": "New Project",
|
||||
"ABBREVIATION": "Abbreviation",
|
||||
"URI": "URI",
|
||||
"START": "Start",
|
||||
"END": "End",
|
||||
"DESCRIPTION": "Description"
|
||||
},
|
||||
"ACTIONS": {
|
||||
"SAVE": "Save",
|
||||
"CANCEL": "Cancel",
|
||||
"DELETE": "Delete"
|
||||
}
|
||||
},
|
||||
"CRITERIA": {
|
||||
|
|
|
|||
|
|
@ -1,103 +0,0 @@
|
|||
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
|
||||
|
||||
/* You can add global styles to this file, and also import other style files */
|
||||
/*
|
||||
body {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
background-color: #eee;
|
||||
}
|
||||
*/
|
||||
.form-signin {
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0px 0px 0px 1px #d8d4d4;
|
||||
}
|
||||
.form-signin .form-signin-heading,
|
||||
.form-signin .checkbox {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.form-signin .checkbox {
|
||||
font-weight: normal;
|
||||
}
|
||||
.form-signin .form-control {
|
||||
position: relative;
|
||||
height: auto;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.form-signin .form-control:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
.form-signin input[type="email"] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.form-signin input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.errorMessage{
|
||||
color:red;
|
||||
}
|
||||
|
||||
.form-control.is-invalid{
|
||||
border-color: #dc3545
|
||||
}
|
||||
|
||||
.invalid-feedbackCustom {
|
||||
margin-top: .25rem;
|
||||
font-size: 1.2rem;
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.ng-valid[required], .ng-valid.required {
|
||||
border-left: 5px solid #42A948; /* green */
|
||||
}
|
||||
|
||||
.form-control.ng-invalid {
|
||||
border-left: 5px solid #a94442; /* red */
|
||||
}
|
||||
|
||||
.form-groupCustom {
|
||||
border: 2px solid #A11515;
|
||||
}
|
||||
|
||||
.cursor-link{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* dashboard */
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 990px){
|
||||
#sidebar, #nav-right, #nav-left-button{
|
||||
display: none;
|
||||
}
|
||||
#menu{
|
||||
display: inline;
|
||||
}
|
||||
#main-panel{
|
||||
padding-left: 0;
|
||||
-webkit-transition: all 400ms;
|
||||
-moz-transition: all 400ms;
|
||||
-ms-transition: all 400ms;
|
||||
-o-transition: all 400ms;
|
||||
transition: all 400ms;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
|
||||
@import '~@angular/material/theming';
|
||||
@import '~@covalent/core/theming/all-theme';
|
||||
|
|
@ -194,6 +194,12 @@
|
|||
dependencies:
|
||||
tslib "^1.7.1"
|
||||
|
||||
"@covalent/core@^1.0.0-rc.1":
|
||||
version "1.0.0-rc.1"
|
||||
resolved "https://registry.yarnpkg.com/@covalent/core/-/core-1.0.0-rc.1.tgz#99a8dfaf53e8328759955ec404ce0ac0c8e60d25"
|
||||
dependencies:
|
||||
tslib "^1.7.1"
|
||||
|
||||
"@ng-bootstrap/ng-bootstrap@1.0.0-beta.7":
|
||||
version "1.0.0-beta.7"
|
||||
resolved "https://registry.yarnpkg.com/@ng-bootstrap/ng-bootstrap/-/ng-bootstrap-1.0.0-beta.7.tgz#58bc81f610028f40526529ce40483a95028163b0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue