From b90c34e0c9a773ec8b615c8d15fa7f5e9a31cb6d Mon Sep 17 00:00:00 2001
From: Laura Fuentes Grau <laurafuentesgrau@gmail.com>
Date: Tue, 16 Feb 2021 18:00:44 +0100
Subject: [PATCH] Delete (all) signal(s) with checkbox-button combination #269

---
 src/signal/edit-signal-mapping.js | 57 +++++++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/signal/edit-signal-mapping.js b/src/signal/edit-signal-mapping.js
index e977854..7dec36a 100644
--- a/src/signal/edit-signal-mapping.js
+++ b/src/signal/edit-signal-mapping.js
@@ -17,7 +17,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Button, FormGroup, FormLabel, FormText} from 'react-bootstrap';
+import {Button, FormGroup, FormLabel, FormText, OverlayTrigger, Tooltip} from 'react-bootstrap';
 import {Collapse} from 'react-collapse';
 import Table from '../common/table';
 import TableColumn from '../common/table-column';
@@ -64,6 +64,11 @@ class EditSignalMapping extends React.Component {
     }
   }
 
+  signals.forEach(signal => {
+    if(signal.checked == undefined) signal.checked = false
+  });
+
+
     return {
       signals: signals,
     };
@@ -136,6 +141,17 @@ class EditSignalMapping extends React.Component {
 
   handleRemove = () => {
 
+    let checkedSignals = this.state.signals.filter(signal => signal.checked === true);
+
+    checkedSignals.forEach(signal => {
+      AppDispatcher.dispatch({
+        type: 'signals/start-remove',
+        data: signal,
+        token: this.props.sessionToken
+      });
+  
+    })
+
   }
 
   handleAdd = (configID = null) => {
@@ -177,8 +193,32 @@ class EditSignalMapping extends React.Component {
       this.setState({signals: signals})
   }
 
-  onSignalChecked(index, signal) {
-    console.log(index);
+  onSignalChecked(signal) {
+    let tempSignals = this.state.signals;
+    const index = tempSignals.indexOf(signal);
+    
+    tempSignals[index].checked = !tempSignals[index].checked;
+
+    this.setState({signals: tempSignals});
+    
+  }
+
+  checkAll(){
+    let tempSignals = this.state.signals;
+    let allChecked = true;
+
+    tempSignals.forEach(signal =>
+      { 
+        if(signal.checked === false){
+        signal.checked = true;
+        allChecked = false;
+      }
+      });
+
+    if(allChecked){
+      tempSignals.forEach(signal => signal.checked = false);
+    }
+    this.setState({signals: tempSignals});
   }
 
   render() {
@@ -202,8 +242,8 @@ class EditSignalMapping extends React.Component {
           <FormGroup>
               <FormLabel>{this.props.direction} Mapping</FormLabel>
               <FormText>Click <i>Index</i>, <i>Name</i> or <i>Unit</i> cell to edit</FormText>
-              <Table checkbox onChecked={(index, event) => this.onSignalChecked(index, event)} data={this.state.signals}>
-                  <TableColumn checkbox onChecked={(index, event) => this.onSignalChecked(index, event)} width='30' />
+              <Table checkbox onChecked={(signal) => this.onSignalChecked(signal)} data={this.state.signals}>
+                  <TableColumn checkbox onChecked={(index, event) => this.onSignalChecked(index, event)} checkboxKey='checked' width='30' />
                   <TableColumn title='Index' dataKey='index' inlineEditable inputType='number' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
                   <TableColumn title='Name' dataKey='name' inlineEditable inputType='text' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
                   <TableColumn title='Unit' dataKey='unit' inlineEditable inputType='text' onInlineChange={(e, row, column) => this.handleMappingChange(e, row, column)} />
@@ -212,8 +252,11 @@ class EditSignalMapping extends React.Component {
               </Table>
 
               <div >
-                <Button key={50} style={{ float: 'left' }} onClick={() => this.handleRemove()} style={buttonStyle}> Remove </Button>
-                <Button key={51} style={{ float: 'right' }} onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal </Button>
+              <OverlayTrigger key={0} placement={'left'} overlay={<Tooltip id={`tooltip-${"check"}`}> Check/Uncheck All </Tooltip>} >
+                <Button key={50} style={{ float: 'left' }} onClick={() => this.checkAll()} style={buttonStyle}> <Icon icon="check" />  </Button>
+              </OverlayTrigger>
+                <Button key={51} style={{ float: 'left' }} onClick={() => this.handleRemove()} style={buttonStyle}> Remove </Button>
+                <Button key={52} style={{ float: 'right' }} onClick={() => this.handleAdd()} style={buttonStyle}><Icon icon="plus" /> Signal </Button>
               </div>
               <div>
                 <Collapse isOpened={this.state.openCollapse}>