Confirmation widget added

dmp-frontend/src/app/app.module.ts

@@ -23,6 +23,7 @@ import { AuthGuard } from './guards/auth.guard';
 import { PageNotFoundComponent }   from './not-found.component';
 import { EmptyComponent }    from './empty.component';
 import { TocComponent } from './form/tableOfContents/toc.component';
+import { ConfirmationComponent } from './widgets/confirmation/confirmation.component';
 
 import { PaginationService } from './services/pagination.service';
 import { EestoreService } from './services/eestore.service';
@@ -86,6 +87,7 @@ import { UserWorkspaceComponent } from './user-workspace/user-workspace.componen
     DmpComponent,
     DatasetsComponent,
     UserWorkspaceComponent,
+    ConfirmationComponent,
     
     ProjectTableFilterPipe, 
     DmpVersionFilterPipe, 

dmp-frontend/src/app/datasets/dataset.component.ts

@@ -9,6 +9,7 @@ import {DataTable} from 'angular2-datatable';
 import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
 import { Param } from '../entities/model/param';
 import { StatusToString } from '../pipes/various/status-to-string';
+import { ConfirmationComponent } from '../widgets/confirmation/confirmation.component';
 
 declare var $: any;
 
@@ -217,7 +218,17 @@ export class DatasetsComponent implements OnInit {
     this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profile.id, datasetId:item.id}]));
   }
 
-  deleteRow(dataset, $event){
+  markDatasetForDelete(dataset){
+    this.dataset = dataset;
+  }
+  
+  deleteDataset(confirmation){
+    if(confirmation==true)
+      this.deleteRow(this.dataset);
+  }
+
+
+  deleteRow(dataset){
     this.serverService.deleteDataset(dataset).subscribe( 
       response => { 
         simple_notifier("success",null,"Deleted dataset");

dmp-frontend/src/app/datasets/dataset.html

@@ -62,7 +62,7 @@
                 <td>{{dataset?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
                 <td>{{dataset?.status | statusToString }}</td>
                 <td><a class="editGridColumn" (click)="editRow(dataset, $event)"><i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit Properties" id="editDataset"></i>
-                    <i class="fa fa-eraser fa-fw" data-toggle="tooltip" (click)="deleteRow(dataset, $event)" title="delete Dataset"></i> 
+                    <i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dataset-confirm" (click)="markDatasetForDelete(dataset)" title="delete Dataset"></i> 
                     <i class="fa fa-list-alt fa-fw" data-toggle="tooltip" title="describe dataset" id="describeDataset"></i></a></td>
 
             </tr>
@@ -136,4 +136,7 @@
                 </div>
             </div>
         </div>
-    </div>
+    </div>
+
+<!-- Confirmation module- do not delete --> 
+<confirmation [confirmationID]="'delete-dataset-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this dataset. Are you sure you want to delete this dataset ? This is not revertable !'" (responseSender)="deleteDataset($event)"></confirmation>

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

@@ -5,6 +5,7 @@ import { ServerService } from '../../app/services/server.service';
 import { Dmp } from '../entities/model/dmp';
 import { Dataset } from '../entities/model/dataset';
 import { Project } from '../entities/model/project';
+import { ConfirmationComponent } from '../widgets/confirmation/confirmation.component';
 
 import {DataTable} from 'angular2-datatable';
 import { DropdownField } from '../../app/form/fields/dropdown/field-dropdown';
@@ -53,7 +54,6 @@ export class DmpComponent implements OnInit{
   showIDs : boolean = false;
 // END ALTERNATIVE
 
-
   dmp:any;
   @Input() dmpTableVisible: boolean;
   @Input() dmpCount = 0;
@@ -241,7 +241,16 @@ newDmp(item){
   $("#newDmpModal").modal("show");
 }
 
-deleteRow(dmp, $event){
+markDMPForDelete(dmp){
+  this.dmp = dmp;
+}
+
+deleteDMP(confirmation){
+  if(confirmation==true)
+    this.deleteRow(this.dmp);
+}
+
+deleteRow(dmp){
 
   this.serverService.deleteDmp(dmp).subscribe( 
     response => { 

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

@@ -1,7 +1,5 @@
 <meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
 
-<!-- <div [ngClass]="{true:'visible', false:'invisible'}[editorVisible]"> -->
-
 <table class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
     #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
     <thead>
@@ -73,7 +71,7 @@
             <td>{{dmp?.status | statusToString }}</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>
                 <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" (click)="deleteRow(dmp, $event)" title="delete DMP"></i> 
+                <i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm" (click)="markDMPForDelete(dmp)" 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>
@@ -197,3 +195,7 @@
 
 <!--DATASET TABLE-->
 <datasets-table *ngIf="dataSetVisibe" [dmpIdforDatasets]="dmpIdforDatasets" [dmpLabelforDatasets]="dmpLabelforDatasets" [(dataSetVisibe)]="dataSetVisibe"></datasets-table>
+
+
+<!-- Confirmation module- do not delete --> 
+<confirmation [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure you want to delete this DMP ? This is not revertable !'" (responseSender)="deleteDMP($event)"></confirmation>

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

@@ -16,6 +16,7 @@ import { FormGroup, FormControl }                 from '@angular/forms'; //na dw
 import { NgForm } from '@angular/forms';
 import { DatepickerOptions } from 'ng2-datepicker';
 import { StatusToString} from '../pipes/various/status-to-string';
+import { ConfirmationComponent } from '../widgets/confirmation/confirmation.component';
 
 import { ProjectTableFilterPipe } from '../pipes/project-table-filter.pipe';
 

dmp-frontend/src/app/widgets/confirmation/confirmation.component.css

@@ -0,0 +1,11 @@
+.modal-header {
+    padding:9px 15px;
+    border-bottom:1px solid #eee;
+    background-color: #0480be;
+    -webkit-border-top-left-radius: 5px;
+    -webkit-border-top-right-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    -moz-border-radius-topright: 5px;
+     border-top-left-radius: 5px;
+     border-top-right-radius: 5px;
+ }

dmp-frontend/src/app/widgets/confirmation/confirmation.component.html

@@ -0,0 +1,21 @@
+<!-- Modal -->
+<div class="modal fade" id="{{confirmationID}}" role="dialog">
+    <div class="modal-dialog">
+    
+      <!-- Modal content-->
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4 class="modal-title">{{confirmationTitle}}</h4>
+        </div>
+        <div class="modal-body">
+          <p>{{confirmationDescr}}</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal" (click)=saidYes()>Yes</button>
+          <button type="button" class="btn btn-default" data-dismiss="modal" (click)=saidNo()>NO</button>
+        </div>
+      </div>
+      
+    </div>
+  </div>

dmp-frontend/src/app/widgets/confirmation/confirmation.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmationComponent } from './confirmation.component';
+
+describe('ConfirmationComponent', () => {
+  let component: ConfirmationComponent;
+  let fixture: ComponentFixture<ConfirmationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ConfirmationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

dmp-frontend/src/app/widgets/confirmation/confirmation.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input,Output,EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'confirmation',
+  templateUrl: './confirmation.component.html',
+  styleUrls: ['./confirmation.component.css']
+})
+export class ConfirmationComponent implements OnInit {
+  
+  @Input() confirmationID : string;
+  @Input() confirmationTitle : string;
+  @Input() confirmationDescr : string;
+  @Input() subjectObj : any;
+
+  @Output() responseSender: EventEmitter<any> = new EventEmitter<any>();
+
+  constructor() {
+
+  }
+
+
+  ngOnInit() {
+
+  }
+
+  saidNo(){
+    this.responseSender.emit(false);
+  }
+
+  saidYes(){
+    this.responseSender.emit(true);
+  }
+
+
+}