feat: add comment box and comment button in analysis tabs for elements

app/packs/src/apps/mydb/elements/details/cellLines/analysesTab/AnalysesContainer.js

@@ -1,11 +1,17 @@
 import React, { Component } from 'react';
 import { StoreContext } from 'src/stores/mobx/RootStore';
 import { observer } from 'mobx-react';
-import { Accordion, Button, ListGroup } from 'react-bootstrap';
+import {
+  Accordion,
+  Button,
+  ListGroup,
+  ButtonToolbar
+} from 'react-bootstrap';
 import ElementStore from 'src/stores/alt/stores/ElementStore';
 import OrderModeRow from 'src/apps/mydb/elements/details/cellLines/analysesTab/OrderModeRow';
 import EditModeRow from 'src/apps/mydb/elements/details/cellLines/analysesTab/EditModeRow';
 import PropTypes from 'prop-types';
+import { CommentButton, CommentBox } from 'src/components/common/CommentBoxComponent';
 
 class AnalysesContainer extends Component {
   // eslint-disable-next-line react/static-property-placement
@@ -14,7 +20,8 @@ class AnalysesContainer extends Component {
   constructor() {
     super();
     this.state = {
-      mode: 'edit'
+      mode: 'edit',
+      commentBoxVisible: false,
     };
   }
 
@@ -25,18 +32,18 @@ class AnalysesContainer extends Component {
     const { currentElement } = ElementStore.getState();
     currentElement.container.children[0].children.push(newContainer);
     this.handleChange(true);
-  }
+  };
 
   handleStartDrag = (container) => {
     this.setState({ draggingContainer: container.id });
-  }
+  };
 
   handleEndDrag = () => {
     this.setState({
       draggingContainer: '',
       lastHoveredContainer: ''
     });
-  }
+  };
 
   handleModeToggle = () => {
     const { mode } = this.state;
@@ -45,7 +52,7 @@ class AnalysesContainer extends Component {
     } else {
       this.setState({ mode: 'edit' });
     }
-  }
+  };
 
   handleHoverOver = (containerId) => {
     const { lastHoveredContainer } = this.state;
@@ -55,7 +62,7 @@ class AnalysesContainer extends Component {
     }
 
     this.setState({ lastHoveredContainer: containerId });
-  }
+  };
 
   handleChange = (changed = false) => {
     const { item } = this.props;
@@ -64,7 +71,13 @@ class AnalysesContainer extends Component {
       cellLineDetailsStore.cellLines(item.id).setChanged(true);
     }
     this.forceUpdate();
-  }
+  };
+
+  handleCommentTextChange = (e) => {
+    const { currentElement } = ElementStore.getState();
+    currentElement.container.description = e.target.value;
+    this.handleChange(true);
+  };
 
   renderAddButton = () => {
     const { readOnly } = this.props;
@@ -79,7 +92,11 @@ class AnalysesContainer extends Component {
         Add analysis
       </Button>
     );
-  }
+  };
+
+  toggleCommentBox = () => {
+    this.setState((prevState) => ({ commentBoxVisible: !prevState.commentBoxVisible }));
+  };
 
   renderModeButton = () => {
     const { mode } = this.state;
@@ -168,15 +185,25 @@ class AnalysesContainer extends Component {
     return (mode === 'edit')
       ? this.renderEditModeContainer()
       : this.renderOrderModeContainer();
-  }
+  };
 
   render() {
+    const { commentBoxVisible } = this.state;
+    const { currentElement } = ElementStore.getState();
     return (
       <div className="analysis-container">
         <div className="d-flex justify-content-between mb-3">
           {this.renderModeButton()}
-          {this.renderAddButton()}
+          <ButtonToolbar className="gap-2">
+            <CommentButton toggleCommentBox={this.toggleCommentBox} disable={false} />
+            {this.renderAddButton()}
+          </ButtonToolbar>
         </div>
+        <CommentBox
+          isVisible={commentBoxVisible}
+          value={currentElement.container.description}
+          handleCommentTextChange={this.handleCommentTextChange}
+        />
         {this.renderContainerPanel()}
       </div>
     );

app/packs/src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersCom.js

@@ -1,15 +1,14 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
-import {
-  Button, Form, OverlayTrigger, Tooltip, ButtonToolbar, Accordion, Card
-} from 'react-bootstrap';
+import React, { useState } from 'react';
+import { ButtonToolbar, Accordion, Card } from 'react-bootstrap';
 import ContainerComponent from 'src/components/container/ContainerComponent';
 import ContainerRow from 'src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersDnd';
 import {
   AnalysesHeader,
   AnalysisModeToggle,
 } from 'src/apps/mydb/elements/details/samples/analysesTab/SampleDetailsContainersAux';
 import AccordionHeaderWithButtons from 'src/components/common/AccordionHeaderWithButtons';
+import { CommentButton, CommentBox } from 'src/components/common/CommentBoxComponent';
 
 function RndNotAvailable() {
   return (
@@ -46,61 +45,22 @@ function ReactionsDisplay({
 }) {
   const [commentBoxVisible, setCommentBoxVisible] = useState(false);
 
-  useEffect(() => {
-    if (sample.container.description && sample.container.description.trim() !== '') {
-      setCommentBoxVisible(true);
-    } else {
-      setCommentBoxVisible(false);
-    }
-  }, [sample.container.description]);
-
-  const renderCommentButton = (disable = false) => {
-    return (
-      <OverlayTrigger
-        placement="top"
-        overlay={(
-          <Tooltip id="analysisCommentBox">
-            general remarks that relate to all analytical data
-          </Tooltip>
-        )}
-      >
-        <Button
-          size="xsm"
-          variant="primary"
-          onClick={() => {setCommentBoxVisible(!commentBoxVisible)}}
-          disabled={disable}
-        >
-          Add comment
-        </Button>
-      </OverlayTrigger>
-    );
-  }
-
-  const renderCommentBox = (sample, handleCommentTextChange) => {
-    const { container } = sample;
-    return (
-      <Form.Group>
-        <Form.Control
-          as="textarea"
-          style={{ height: '80px' }}
-          value={container.description}
-          onChange={handleCommentTextChange}
-          className="my-3"
-        />
-      </Form.Group>
-    );
-  }
+  const toggleCommentBox = () => setCommentBoxVisible((prev) => !prev);
 
   return (
     <div>
       <div className="d-flex justify-content-between align-items-center mb-3">
         {AnalysisModeToggle(mode, handleToggleMode, isDisabled)}
         <ButtonToolbar className="gap-2">
-          {renderCommentButton()}
+          <CommentButton toggleCommentBox={toggleCommentBox} />
           {addButton()}
         </ButtonToolbar>
       </div>
-      {commentBoxVisible && renderCommentBox(sample, handleCommentTextChange)}
+      <CommentBox
+        isVisible={commentBoxVisible}
+        value={sample.container.description}
+        handleCommentTextChange={handleCommentTextChange}
+      />
       {mode === 'edit' ? (
         <Accordion
           id="editable-analysis-list"

app/packs/src/apps/mydb/elements/details/wellplates/analysesTab/WellplateDetailsContainers.js

@@ -1,20 +1,22 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Accordion, Button, Card } from 'react-bootstrap';
+import { Accordion, Button, Card, ButtonToolbar } from 'react-bootstrap';
 import Container from 'src/models/Container';
 import ContainerComponent from 'src/components/container/ContainerComponent';
 import PrintCodeButton from 'src/components/common/PrintCodeButton'
 
 import TextTemplateActions from 'src/stores/alt/actions/TextTemplateActions';
 import AccordionHeaderWithButtons from 'src/components/common/AccordionHeaderWithButtons';
+import { CommentButton, CommentBox } from 'src/components/common/CommentBoxComponent';
 
 export default class WellplateDetailsContainers extends Component {
   constructor(props) {
     super();
     const { wellplate } = props;
     this.state = {
       wellplate,
-      activeContainer: 0
+      activeContainer: 0,
+      commentBoxVisible: false,
     };
   }
 
@@ -86,8 +88,18 @@ export default class WellplateDetailsContainers extends Component {
     }
   }
 
+  handleCommentTextChange = (e) => {
+    const { wellplate } = this.state;
+    wellplate.container.description = e.target.value;
+    this.handleChange(wellplate.container);
+  };
+
+  toggleCommentBox = () => {
+    this.setState((prevState) => ({ commentBoxVisible: !prevState.commentBoxVisible }));
+  };
+
   render() {
-    const { wellplate, activeContainer } = this.state;
+    const { wellplate, activeContainer, commentBoxVisible } = this.state;
     const { readOnly } = this.props;
 
     let containerHeader = (container) => <div className="analysis-header d-flex justify-content-between w-100">
@@ -163,8 +175,16 @@ export default class WellplateDetailsContainers extends Component {
     return (
       <div>
         <div className="d-flex justify-content-end my-2 mx-3">
-          {this.addButton()}
+          <ButtonToolbar className="gap-2">
+            <CommentButton toggleCommentBox={this.toggleCommentBox} disable={false} />
+            {this.addButton()}
+          </ButtonToolbar>
         </div>
+        <CommentBox
+          isVisible={commentBoxVisible}
+          value={wellplate.container.description}
+          handleCommentTextChange={this.handleCommentTextChange}
+        />
         <Accordion
           className="border rounded overflow-hidden"
           onSelect={this.handleAccordionOpen}

app/packs/src/components/common/CommentBoxComponent.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Button,
+  Form,
+  OverlayTrigger,
+  Tooltip,
+} from 'react-bootstrap';
+
+function CommentButton({ toggleCommentBox }) {
+  return (
+    <OverlayTrigger
+      placement="top"
+      overlay={<Tooltip id="analysisCommentBox">General remarks related to all analytical data</Tooltip>}
+    >
+      <Button
+        size="xsm"
+        variant="primary"
+        onClick={toggleCommentBox}
+      >
+        Add comment
+      </Button>
+    </OverlayTrigger>
+  );
+}
+
+CommentButton.propTypes = {
+  toggleCommentBox: PropTypes.func.isRequired,
+};
+
+function CommentBox({ isVisible, value, handleCommentTextChange }) {
+  console.log('CommentBox value:', value);
+  return isVisible && (
+    <Form.Group>
+      <Form.Control
+        as="textarea"
+        style={{ height: '80px' }}
+        value={value}
+        onChange={handleCommentTextChange}
+        className="my-3"
+      />
+    </Form.Group>
+  );
+}
+
+CommentBox.propTypes = {
+  isVisible: PropTypes.bool.isRequired,
+  value: PropTypes.string.isRequired,
+  handleCommentTextChange: PropTypes.func.isRequired,
+};
+
+export {
+  CommentBox,
+  CommentButton
+};