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

create project modal window with form

This commit is contained in:
annampak 2017-10-24 12:49:02 +03:00
parent eefb09a94c
commit 265cc65999
6 changed files with 65 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/entities/model/project.ts
View File

@ -3,7 +3,7 @@ import { Dmp } from './dmp'
import { Dataset } from './dataset' import { Dataset } from './dataset'
export class Project { export class Project {
name: string; label: string;
id: string; id: string;
abbreviation: string; abbreviation: string;
definition: string; definition: string;

13
dmp-frontend/src/app/modal/modal.component.ts
View File

@ -3,7 +3,10 @@ import { ServerService } from '../../app/services/server.service';
import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown'; import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
import { Param } from '../entities/model/param'; import { Param } from '../entities/model/param';
import { Dataset } from '../entities/model/dataset'; import { Dataset } from '../entities/model/dataset';
import { Project } from '../entities/model/project';
import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4'; import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
declare var jquery:any;
declare var $ :any;
@Component({ @Component({
selector: 'modal', selector: 'modal',
@ -15,8 +18,10 @@ export class ModalComponent implements OnInit {
@Input() datasetDropDown: DropdownField; @Input() datasetDropDown: DropdownField;
@Input() dataSetVisibe:boolean; @Input() dataSetVisibe:boolean;
@Input() datasets: Dataset[]; @Input() datasets: Dataset[];
@Input() project: Project;
datasetResource :DataTableResource<Dataset>; datasetResource :DataTableResource<Dataset>;
@Input() datasetCount = 0; @Input() datasetCount = 0;
@Input('show-modal') showModal: boolean;
@ViewChild('modalDmps') modalDmps; @ViewChild('modalDmps') modalDmps;
@ -25,6 +30,7 @@ export class ModalComponent implements OnInit {
this.datasetDropDown.options = []; this.datasetDropDown.options = [];
this.dataSetVisibe= false; this.dataSetVisibe= false;
this.datasets = []; this.datasets = [];
this.project = new Project();
} }
ngOnInit() { ngOnInit() {
@ -46,6 +52,13 @@ export class ModalComponent implements OnInit {
} }
show(gridRow){
this.project.label = gridRow.label;
this.project.abbreviation = gridRow.abbreviation;
this.project.uri = gridRow.uri;
$("#exampleModalDmps").modal("show");
}
showDatasets(dmpId, event) { showDatasets(dmpId, event) {
debugger; debugger;
this.dataSetVisibe = true; this.dataSetVisibe = true;

14
dmp-frontend/src/app/modal/modal.html
View File

@ -8,7 +8,7 @@
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form> <form #ModalProjectForm="ngForm">
<div class="form-group"> <div class="form-group">
<label for="recipient-name" class="col-form-label">DMP:</label> <label for="recipient-name" class="col-form-label">DMP:</label>
<select class="form-control" [id]="datasetDropDownKey" [(ngModel)]="datasetDropDownKey" [name]="datasetDropDown" #datasetfield> <select class="form-control" [id]="datasetDropDownKey" [(ngModel)]="datasetDropDownKey" [name]="datasetDropDown" #datasetfield>
@ -17,27 +17,27 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="label-name" class="form-control-label">Label:</label> <label for="label-name" class="form-control-label">Label:</label>
<input type="text" class="form-control" id="label-name"> <input type="text" class="form-control" id="label-name" [(ngModel)]= "project.label" name = "label">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="abbreviation-text" class="form-control-label">Abbreviation:</label> <label for="abbreviation-text" class="form-control-label">Abbreviation:</label>
<input class="form-control" id="abbreviation-text"> <input class="form-control" id="abbreviation-text" [(ngModel)]= "project.abbreviation" name = "abbreviation">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="reference-text" class="form-control-label">Reference:</label> <label for="reference-text" class="form-control-label">Reference:</label>
<input class="form-control" id="reference-text"> <input class="form-control" id="reference-text" [(ngModel)]= "project.reference" name = "reference">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="uri-text" class="form-control-label">Uri:</label> <label for="uri-text" class="form-control-label">Uri:</label>
<input class="form-control" id="uri-text"> <input class="form-control" id="uri-text" [(ngModel)]= "project.uri" name = "uri">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="start-date" class="form-control-label">Start Date:</label> <label for="start-date" class="form-control-label">Start Date:</label>
<input class="form-control" id="startDate-date"> <input class="form-control" id="startDate-date" [(ngModel)]= "project.startDate" name = "startDate">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="end-date" class="form-control-label">End Date:</label> <label for="end-date" class="form-control-label">End Date:</label>
<input class="form-control" id="endDate-date"> <input class="form-control" id="endDate-date" [(ngModel)]= "project.endDate" name = "endDate">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="code-name" class="form-control-label">Code:</label> <label for="code-name" class="form-control-label">Code:</label>

16
dmp-frontend/src/app/projects/project.html
View File

@ -7,7 +7,7 @@
[limit]="8" [sortBy]="'rating'" [sortAsc]="false" [selectColumn]="true" [multiSelect]="false" [substituteRows]="false" [limit]="8" [sortBy]="'rating'" [sortAsc]="false" [selectColumn]="true" [multiSelect]="false" [substituteRows]="false"
[expandableRows]="true" [translations]="translations" [indexColumnHeader]="'#'" [selectOnRowClick]="true"> [expandableRows]="true" [translations]="translations" [indexColumnHeader]="'#'" [selectOnRowClick]="true">
<data-table-column [property]="'name'" [header]="'Label'" [sortable]="true"> <data-table-column [property]="'label'" [header]="'Label'" [sortable]="true">
</data-table-column> </data-table-column>
<data-table-column [property]="'abbreviation'" [header]="'Abbreviation'" [sortable]="true"> <data-table-column [property]="'abbreviation'" [header]="'Abbreviation'" [sortable]="true">
</data-table-column> </data-table-column>
@ -31,7 +31,7 @@
<i>Actions</i> <i>Actions</i>
</template> </template>
<template #dataTableCell let-item="item"> <template #dataTableCell let-item="item">
<a class="editGridColumn" data-toggle="modal" data-target="#exampleModalDmps"><i class="fa fa-pencil fa-fw"></i></a> <a class="editGridColumn" (click) = "editRow(item)"><i class="fa fa-pencil fa-fw"></i></a> <!--data-toggle="modal" data-target="#exampleModalDmps" -->
</template> </template>
</data-table-column> </data-table-column>
</data-table> </data-table>
@ -62,27 +62,27 @@
<form #newProjectForm="ngForm" (ngSubmit)="SaveNewProject()"> <form #newProjectForm="ngForm" (ngSubmit)="SaveNewProject()">
<div class="form-group"> <div class="form-group">
<label for="label-name" class="form-control-label">Label:</label> <label for="label-name" class="form-control-label">Label:</label>
<input type="text" class="form-control" id="label-name" [(ngModel)]= "project.Label" name = "name"> <input type="text" class="form-control" id="label-name" [(ngModel)]= "project.label" name = "label">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="abbreviation-text" class="form-control-label">Abbreviation:</label> <label for="abbreviation-text" class="form-control-label">Abbreviation:</label>
<input class="form-control" id="abbreviation-text" [(ngModel)]= "project.Abbreviation" name = "Abbreviation"> <input class="form-control" id="abbreviation-text" [(ngModel)]= "project.abbreviation" name = "abbreviation">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="reference-text" class="form-control-label">Reference:</label> <label for="reference-text" class="form-control-label">Reference:</label>
<input class="form-control" id="reference-text" [(ngModel)]= "project.Reference" name = "Reference"> <input class="form-control" id="reference-text" [(ngModel)]= "project.reference" name = "reference">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="uri-text" class="form-control-label">Uri:</label> <label for="uri-text" class="form-control-label">Uri:</label>
<input class="form-control" id="uri-text" [(ngModel)]= "project.Uri" name = "Uri"> <input class="form-control" id="uri-text" [(ngModel)]= "project.uri" name = "uri">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="start-date" class="form-control-label">Start Date:</label> <label for="start-date" class="form-control-label">Start Date:</label>
<input class="form-control" id="startDate-date" [(ngModel)]= "project.name" name = "name"> <input class="form-control" id="startDate-date" [(ngModel)]= "project.startDate" name = "startDate">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="end-date" class="form-control-label">End Date:</label> <label for="end-date" class="form-control-label">End Date:</label>
<input class="form-control" id="endDate-date" [(ngModel)]= "project.name" name = "name"> <input class="form-control" id="endDate-date" [(ngModel)]= "project.endDate" name = "endDate">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="code-name" class="form-control-label">Code:</label> <label for="code-name" class="form-control-label">Code:</label>

18
dmp-frontend/src/app/projects/projects.component.ts
View File

@ -43,6 +43,7 @@ export class ProjectsComponent implements OnInit{
@Input() dataSetVisibe:boolean; @Input() dataSetVisibe:boolean;
@Input() datasets: Dataset[]; @Input() datasets: Dataset[];
project: any; project: any;
modalEditedRow: ModalComponent;
@ViewChild(DataTable) projectsTable; @ViewChild(DataTable) projectsTable;
@ViewChild(DataTable) datasetsTable; @ViewChild(DataTable) datasetsTable;
@ -63,6 +64,7 @@ export class ProjectsComponent implements OnInit{
uri:'', uri:'',
definition:'' definition:''
} }
this.modalEditedRow = new ModalComponent(serverService);
} }
ngOnInit() { ngOnInit() {
@ -75,15 +77,15 @@ export class ProjectsComponent implements OnInit{
response.forEach(resp => { response.forEach(resp => {
let pr = new Project(); let pr = new Project();
pr.id = resp.id; pr.id = resp.id;
pr.name = resp.label; pr.label = resp.label;
pr.abbreviation = resp.abbreviation; pr.abbreviation = resp.abbreviation;
pr.definition = resp.definition; pr.definition = resp.definition;
pr.uri = resp.uri; pr.uri = resp.uri;
pr.dmp = new Dmp(); // pr.dmp = new Dmp();
// pr.dmp.id = resp.dmp; // pr.dmp.id = resp.dmp;
pr.dmp.id = resp.dmp =! null ? resp.dmp.id : null; // pr.dmp.id = resp.dmp != null && resp.dmp != undefined ? resp.dmp.id : null;
pr.dataset = new Dataset(); // pr.dataset = new Dataset();
pr.dmp.dataset = resp.dmp !=null && resp.dmp.dataset != null ? resp.dmp.dataset.id: null; // pr.dmp.dataset = resp.dmp !=null && resp.dmp.dataset != null ? resp.dmp.dataset.id: null;
this.projects.push(pr); this.projects.push(pr);
var params = {limit:8,offset:0, sortAsc:false} var params = {limit:8,offset:0, sortAsc:false}
this.afterLoad(); this.afterLoad();
@ -184,7 +186,11 @@ myFunction() {
} }
} }
SaveNewProject(){debugger; editRow(item){
this.modalEditedRow.show(item);
}
SaveNewProject(){
console.log(this.project); console.log(this.project);
//this.http.post('http://someurl', JSON.stringify(this.project)) //this.http.post('http://someurl', JSON.stringify(this.project))
this.serverService.createProject(this.project) this.serverService.createProject(this.project)

1
dmp-frontend/src/index.html
View File

@ -7,6 +7,7 @@
<!-- add after bootstrap.min.js --> <!-- add after bootstrap.min.js -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc.min.js"></script> <script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.4.1/dist/bootstrap-toc.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Data Management Plans - Manager</title> <title>Data Management Plans - Manager</title>