project table

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

@@ -48,24 +48,22 @@
         </tr>
 
         <tr *ngFor="let project of mf.data" class="hover">
-            <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dmp.id}}</td>
+            <td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{project.id}}</td>
             <td>{{project?.label}}</td>
             <td>{{project?.abbreviation}}</td>
             <td>{{project?.startDate}}</td>
             <td>{{project?.endDate}}</td>
             <td>{{project?.description}}</td>
             <td>{{project?.status}}</td>
-            <td><a class="editGridColumn" (click)="editRow(dmp, $event)"><i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i>
+            <td><a class="editGridColumn" (click)="editRow(project, $event)"><i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i>
-                <i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i> 
+                <i class="fa fa-eraser fa-fw" data-toggle="tooltip" title="delete project"></i></a></td>
-                <i class="fa fa-eraser fa-fw" data-toggle="tooltip" title="delete DMP"></i> 
-                <i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a></td>
             
         </tr>
     </tbody>
     <tfoot>
         <tr>
             <td colspan="7">
-                    <button type="button" class="btn btn-info btncustom" (click)="newDmp(item)">New Dmp</button>
+                <button type="button" class="btn btn-info btncustom" (click)="newProject(item)">New Project</button>
                 <mfBootstrapPaginator [rowsOnPageSet]="[5,20,40]"></mfBootstrapPaginator>
             </td>
         </tr>
@@ -73,11 +71,11 @@
 </table>
 
 
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+<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">Create New Project</h5>
+                <h5 class="modal-title" id="exampleModalLabel">Project</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">&times;</span>
               </button>
@@ -109,8 +107,8 @@
                         <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>
+                        <label for="code-name" class="form-control-label">Description:</label>
-                        <input type="text" class="form-control" id="code-name" disabled>
+                        <input type="text" class="form-control" name="desc" id="descr" [(ngModel)]= "project.description">
                     </div>
                 </form>
             </div>

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

@@ -15,9 +15,12 @@ import { FormGroup, FormControl }                 from '@angular/forms'; //na dw
 import { NgForm } from '@angular/forms';
 import { TokenService, TokenProvider } from '../services/token.service';
 
+declare var $ :any;
+
 @Component({
   selector: 'projects',
   templateUrl: 'project.html',
+  styleUrls: ['./project.css'],
   providers:  [ServerService]
 })
 
@@ -73,7 +76,9 @@ export class ProjectsComponent implements OnInit{
         abbreviation:'',
         reference:'',
         uri:'',
-        definition:''
+        definition:'',
+        endDate:'',
+        startDate:''
       }
   }
 
@@ -137,28 +142,10 @@ showDatasets(){debugger; //dmpId, event
       
 }
 
-myFunction() {
+// editRow(item){
-  var input, filter, table, tr, td, i;
+//   this.show = true;  
-  input = document.getElementById("myInput");
+//   this.item = item;
-  filter = input.value.toUpperCase();
+// }
-  table = document.getElementById("projects-grid");
-  tr = table.getElementsByTagName("tr");
-  for (i = 0; i < tr.length; i++) {
-    td = tr[i].getElementsByTagName("td")[3];
-    if (td) {
-      if (td.innerText.toUpperCase().indexOf(filter) > -1) {
-        tr[i].style.display = "";
-      } else {
-        tr[i].style.display = "none";
-      }
-    }       
-  }
-}
-
-editRow(item){
-  this.show = true;  
-  this.item = item;
-}
 
 SaveNewProject(){
   console.log(this.project);  
@@ -170,8 +157,34 @@ SaveNewProject(){
       console.log(response);      
     }
   );
+  $("#newEditProjectModal").modal("hide");
 }
 
+newProject(item){
+  this.project.label = "";
+  this.project.id = null;
+  this.project.abbreviation = "";
+  this.project.reference = "";
+  this.project.uri = "";
+  this.project.definition = "";
+  $("#newEditProjectModal").modal("show");
+
+}
+
+editRow(item, event){ 
+  if (event.toElement.id == "editDMP"){
+    this.project.label = item.label;
+    this.project.abbreviation = item.abbreviation;
+    this.project.reference = item.reference;
+    this.project.uri = item.uri;
+    this.project.definition = item.definition;
+    this.project.id = item.id;
+    $("#newEditProjectModal").modal("show");
+  }
+
+
+    
+  }
 
 signOut() {
       this.serverService.logOut();