From 7ecf3ef52b5f36ec9e52bf100fa958f5cb0b37b5 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Tue, 20 Oct 2020 22:04:09 +0200
Subject: Add comment dialog

---
 frontend/src/components/objects/Connection.js      | 30 +++++-----
 frontend/src/components/objects/MessageAction.js   | 69 ----------------------
 frontend/src/components/objects/MessageAction.scss |  8 ---
 3 files changed, 16 insertions(+), 91 deletions(-)
 delete mode 100644 frontend/src/components/objects/MessageAction.js
 delete mode 100644 frontend/src/components/objects/MessageAction.scss

(limited to 'frontend/src/components/objects')

diff --git a/frontend/src/components/objects/Connection.js b/frontend/src/components/objects/Connection.js
index b70b7f7..29c747a 100644
--- a/frontend/src/components/objects/Connection.js
+++ b/frontend/src/components/objects/Connection.js
@@ -16,11 +16,12 @@
  */
 
 import React, {Component} from "react";
-import {Form} from "react-bootstrap";
 import backend from "../../backend";
 import dispatcher from "../../dispatcher";
 import {dateTimeToTime, durationBetween, formatSize} from "../../utils";
+import CommentDialog from "../dialogs/CommentDialog";
 import ButtonField from "../fields/ButtonField";
+import TextField from "../fields/TextField";
 import "./Connection.scss";
 import CopyLinkPopover from "./CopyLinkPopover";
 import LinkPopover from "./LinkPopover";
@@ -33,15 +34,7 @@ class Connection extends Component {
         update: false
     };
 
-    handleAction = (name) => {
-        if (name === "hide") {
-            const enabled = !this.props.data.hidden;
-            backend.post(`/api/connections/${this.props.data.id}/${enabled ? "hide" : "show"}`)
-                .then((_) => {
-                    this.props.onEnabled(!enabled);
-                    this.setState({update: true});
-                });
-        }
+    handleAction = (name, comment) => {
         if (name === "mark") {
             const marked = this.props.data.marked;
             backend.post(`/api/connections/${this.props.data.id}/${marked ? "unmark" : "mark"}`)
@@ -49,6 +42,9 @@ class Connection extends Component {
                     this.props.onMarked(!marked);
                     this.setState({update: true});
                 });
+        } else if (name === "comment") {
+            this.props.onCommented(comment);
+            this.setState({showCommentDialog: false});
         }
     };
 
@@ -70,9 +66,9 @@ class Connection extends Component {
             <span>Closed at {closedAt.toLocaleDateString() + " " + closedAt.toLocaleTimeString()}</span>
         </div>;
 
-        const commentPopoverContent = <div>
-            <span>Click to <strong>{conn.comment.length > 0 ? "edit" : "add"}</strong> comment</span>
-            {conn.comment && <Form.Control as="textarea" readOnly={true} rows={2} defaultValue={conn.comment}/>}
+        const commentPopoverContent = <div style={{"width": "250px"}}>
+            <span>Click to <strong>{conn.comment ? "edit" : "add"}</strong> comment</span>
+            {conn.comment && <TextField rows={3} value={conn.comment} readonly/>}
         </div>;
 
         return (
@@ -100,10 +96,16 @@ class Connection extends Component {
                                              onClick={() => this.handleAction("mark")}>!!</span>}
                                  content={<span>Mark this connection</span>} placement="right"/>
                     <LinkPopover text={<span className={classNames("connection-icon", {"icon-enabled": conn.comment})}
-                                             onClick={() => this.handleAction("comment")}>@</span>}
+                                             onClick={() => this.setState({showCommentDialog: true})}>@</span>}
                                  content={commentPopoverContent} placement="right"/>
                     <CopyLinkPopover text="#" value={conn.id}
                                      textClassName={classNames("connection-icon", {"icon-enabled": conn.hidden})}/>
+                    {
+                        this.state.showCommentDialog &&
+                        <CommentDialog onSave={(comment) => this.handleAction("comment", comment)}
+                                       initialComment={conn.comment} connectionId={conn.id}/>
+                    }
+
                 </td>
             </tr>
         );
diff --git a/frontend/src/components/objects/MessageAction.js b/frontend/src/components/objects/MessageAction.js
deleted file mode 100644
index e0c96e8..0000000
--- a/frontend/src/components/objects/MessageAction.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * This file is part of caronte (https://github.com/eciavatta/caronte).
- * Copyright (c) 2020 Emiliano Ciavatta.
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful, but
- * WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
- * General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import React, {Component} from "react";
-import {Modal} from "react-bootstrap";
-import ButtonField from "../fields/ButtonField";
-import TextField from "../fields/TextField";
-import "./MessageAction.scss";
-
-class MessageAction extends Component {
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            copyButtonText: "copy"
-        };
-        this.actionValue = React.createRef();
-        this.copyActionValue = this.copyActionValue.bind(this);
-    }
-
-    copyActionValue() {
-        this.actionValue.current.select();
-        document.execCommand("copy");
-        this.setState({copyButtonText: "copied!"});
-        setTimeout(() => this.setState({copyButtonText: "copy"}), 3000);
-    }
-
-    render() {
-        return (
-            <Modal
-                {...this.props}
-                show={true}
-                size="lg"
-                aria-labelledby="message-action-dialog"
-                centered
-            >
-                <Modal.Header>
-                    <Modal.Title id="message-action-dialog">
-                        {this.props.actionName}
-                    </Modal.Title>
-                </Modal.Header>
-                <Modal.Body>
-                    <TextField readonly value={this.props.actionValue} textRef={this.actionValue} rows={15}/>
-                </Modal.Body>
-                <Modal.Footer className="dialog-footer">
-                    <ButtonField variant="green" bordered onClick={this.copyActionValue}
-                                 name={this.state.copyButtonText}/>
-                    <ButtonField variant="red" bordered onClick={this.props.onHide} name="close"/>
-                </Modal.Footer>
-            </Modal>
-        );
-    }
-}
-
-export default MessageAction;
diff --git a/frontend/src/components/objects/MessageAction.scss b/frontend/src/components/objects/MessageAction.scss
deleted file mode 100644
index 996007b..0000000
--- a/frontend/src/components/objects/MessageAction.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@import "../../colors";
-
-.message-action-value {
-  font-size: 13px;
-  padding: 15px;
-  color: $color-primary-4;
-  background-color: $color-primary-2;
-}
-- 
cgit v1.2.3-70-g09d2