create project modal window with form

dmp-frontend/src/app/entities/model/project.ts

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

dmp-frontend/src/app/modal/modal.component.ts

@@ -3,7 +3,10 @@ import { ServerService } from '../../app/services/server.service';
 import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
 import { Param } from '../entities/model/param';
 import { Dataset } from '../entities/model/dataset';
+import { Project } from '../entities/model/project';
 import { DataTable, DataTableTranslations, DataTableResource } from 'angular-4-data-table-bootstrap-4';
+declare var jquery:any;
+declare var $ :any;
 
 @Component({
   selector: 'modal',
@@ -15,9 +18,11 @@ export class ModalComponent implements OnInit {
   @Input() datasetDropDown: DropdownField;
   @Input() dataSetVisibe:boolean;
   @Input() datasets: Dataset[]; 
+  @Input() project: Project; 
   datasetResource :DataTableResource<Dataset>; 
   @Input() datasetCount = 0;
- 
+  @Input('show-modal') showModal: boolean;
+
   @ViewChild('modalDmps') modalDmps;
 
   constructor(private serverService: ServerService) {
@@ -25,6 +30,7 @@ export class ModalComponent implements OnInit {
     this.datasetDropDown.options = [];
     this.dataSetVisibe= false;
     this.datasets = [];
+    this.project = new Project();
   }
 
   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) {
     debugger;
     this.dataSetVisibe = true;

dmp-frontend/src/app/modal/modal.html

@@ -8,41 +8,41 @@
           </button>
         </div>
         <div class="modal-body">
-          <form>
+          <form #ModalProjectForm="ngForm">
             <div class="form-group">
               <label for="recipient-name" class="col-form-label">DMP:</label>
               <select class="form-control" [id]="datasetDropDownKey" [(ngModel)]="datasetDropDownKey" [name]="datasetDropDown" #datasetfield>
                 <option *ngFor="let opt of datasetDropDown.options" [value]="opt.key">{{opt.value}}</option>
                 </select>
             </div>
-            <div class="form-group">
-              <label for="label-name" class="form-control-label">Label:</label>
-              <input type="text" class="form-control" id="label-name">
-          </div>
-          <div class="form-group">
-              <label for="abbreviation-text" class="form-control-label">Abbreviation:</label>
-              <input class="form-control" id="abbreviation-text">
-          </div>
-          <div class="form-group">
-              <label for="reference-text" class="form-control-label">Reference:</label>
-              <input class="form-control" id="reference-text">
-          </div>
-          <div class="form-group">
-              <label for="uri-text" class="form-control-label">Uri:</label>
-              <input class="form-control" id="uri-text">
-          </div>
-          <div class="form-group">
-              <label for="start-date" class="form-control-label">Start Date:</label>
-              <input class="form-control" id="startDate-date">
-          </div>
-          <div class="form-group">
-              <label for="end-date" class="form-control-label">End Date:</label>
-              <input class="form-control" id="endDate-date">
-          </div>
-          <div class="form-group">
-              <label for="code-name" class="form-control-label">Code:</label>
-              <input type="text" class="form-control" id="code-name" disabled>
-          </div>
+           <div class="form-group">
+                        <label for="label-name" class="form-control-label">Label:</label>
+                        <input type="text" class="form-control" id="label-name" [(ngModel)]= "project.label" name = "label">
+                    </div>
+                    <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" id="startDate-date" [(ngModel)]= "project.startDate" name = "startDate">
+                    </div>
+                    <div class="form-group">
+                        <label for="end-date" class="form-control-label">End Date:</label>
+                        <input class="form-control" id="endDate-date" [(ngModel)]= "project.endDate" name = "endDate">
+                    </div>
+                    <div class="form-group">
+                        <label for="code-name" class="form-control-label">Code:</label>
+                        <input type="text" class="form-control" id="code-name" disabled>
+                    </div>
           </form>
         </div>
         <div class="modal-footer">

dmp-frontend/src/app/projects/project.html

@@ -7,7 +7,7 @@
         [limit]="8" [sortBy]="'rating'" [sortAsc]="false" [selectColumn]="true" [multiSelect]="false" [substituteRows]="false"
         [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 [property]="'abbreviation'" [header]="'Abbreviation'" [sortable]="true">
         </data-table-column>
@@ -31,7 +31,7 @@
                 <i>Actions</i>
             </template>
             <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>
         </data-table-column>
     </data-table>
@@ -62,27 +62,27 @@
                 <form #newProjectForm="ngForm" (ngSubmit)="SaveNewProject()">
                     <div class="form-group">
                         <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 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">
+                        <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">
+                        <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">
+                        <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" id="startDate-date" [(ngModel)]= "project.name" name = "name">
+                        <input class="form-control" id="startDate-date" [(ngModel)]= "project.startDate" name = "startDate">
                     </div>
                     <div class="form-group">
                         <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 class="form-group">
                         <label for="code-name" class="form-control-label">Code:</label>

dmp-frontend/src/app/projects/projects.component.ts

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

dmp-frontend/src/index.html

@@ -7,6 +7,7 @@
 		<!-- 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" />
 		<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>
   <meta charset="utf-8">
   <title>Data Management Plans - Manager</title>