@attivio/suit/es/components/Comments.js

Attivio SUIT, the Search UI Toolkit, is a library for creating search clients for searching the Attivio platform.

var _class, _temp;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

import React from 'react';
import PropTypes from 'prop-types';
import { Modal, Button, Col, Row, Glyphicon } from 'react-bootstrap';

import QueryResponse from '../api/QueryResponse';
import AuthUtils from '../util/AuthUtils';
import SimpleQueryRequest from '../api/SimpleQueryRequest';
import Comment from '../api/Comment';

var Comments = (_temp = _class = function (_React$Component) {
  _inherits(Comments, _React$Component);

  function Comments(props) {
    _classCallCheck(this, Comments);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.state = {
      comment: '',
      commentList: [],
      error: null,
      showCommentModal: false
    };
    _this.showCommentModal = _this.showCommentModal.bind(_this);
    _this.hideCommentModal = _this.hideCommentModal.bind(_this);
    _this.captureComment = _this.captureComment.bind(_this);
    _this.saveComment = _this.saveComment.bind(_this);
    _this.clearComment = _this.clearComment.bind(_this);
    _this.getComments = _this.getComments.bind(_this);
    _this.deleteComment = _this.deleteComment.bind(_this);
    return _this;
  }

  Comments.prototype.componentDidMount = function componentDidMount() {
    this.getComments();
  };

  Comments.prototype.getComments = function getComments() {
    var _this2 = this;

    var searcher = this.context.searcher;
    var _props = this.props,
        docId = _props.docId,
        commentsTable = _props.commentsTable;

    var commentList = [];
    if (searcher) {
      var qr = new SimpleQueryRequest();
      qr.query = 'AND(table:' + commentsTable + ', docId_s:FACET("' + docId + '"))';
      qr.facets = [];
      qr.queryLanguage = 'advanced';
      searcher.doCustomSearch(qr, function (response, error) {
        if (response && response.documents) {
          response.documents.forEach(function (doc) {
            commentList.push(Comment.fromDoc(doc));
          });
          _this2.setState({
            commentList: commentList,
            comment: ''
          });
        } else if (error) {
          _this2.setState({
            error: error
          });
        }
      });
    }
  };

  Comments.prototype.deleteComment = function deleteComment(id) {
    var jsonDoc = '{ "id" : "' + id + '", "mode" : "DELETE" }';
    this.context.searcher.search.addOrDeleteDocument(JSON.parse(jsonDoc), this.getComments);
  };

  Comments.prototype.createFormattedCommentList = function createFormattedCommentList() {
    var _this3 = this;

    var commentList = this.state.commentList;

    var loggedInUser = AuthUtils.getUserName(AuthUtils.getSavedUser());
    var formattedCommentList = [];
    if (commentList && commentList.length > 0) {
      commentList.forEach(function (comment) {
        var isCommentByLoggedInUser = comment.username === loggedInUser;
        var removeCommentOption = isCommentByLoggedInUser && React.createElement(Glyphicon, {
          glyph: 'trash',
          onClick: function onClick() {
            _this3.deleteComment(comment.id);
          },
          style: { fontSize: '1em', color: '#003c7e', cursor: 'pointer' },
          title: 'Delete this comment'
        });
        formattedCommentList.push(React.createElement(
          'div',
          { key: comment.id },
          React.createElement(
            'div',
            {
              style: { color: '#484848', backgroundColor: '#F5F5F5', borderRadius: '5px' },
              title: comment.timestamp
            },
            React.createElement(
              'div',
              { style: { padding: '0.5em' } },
              React.createElement(
                'b',
                null,
                ' ',
                React.createElement(
                  'i',
                  null,
                  ' ',
                  comment.username,
                  ' '
                ),
                ' '
              ),
              React.createElement(
                'div',
                { style: { float: 'right' } },
                removeCommentOption
              ),
              React.createElement('br', null),
              React.createElement(
                'span',
                { style: { whiteSpace: 'pre-wrap' } },
                comment.text
              )
            )
          ),
          React.createElement('br', null)
        ));
      });
    }
    return formattedCommentList;
  };

  Comments.prototype.showCommentModal = function showCommentModal() {
    this.setState({
      showCommentModal: true
    });
  };

  Comments.prototype.hideCommentModal = function hideCommentModal() {
    this.setState({
      showCommentModal: false
    });
  };

  Comments.prototype.captureComment = function captureComment(e) {
    if (e.target instanceof HTMLTextAreaElement) {
      this.setState({
        comment: e.target.value
      });
    }
  };

  Comments.prototype.saveComment = function saveComment() {
    var docId = this.props.docId;
    var comment = this.state.comment;
    var searcher = this.context.searcher;

    var username = AuthUtils.getUserName(AuthUtils.getSavedUser());
    var d = new Date();
    var loggedDateTime = d.toISOString();
    var id = username.concat(loggedDateTime);
    var body = {
      fields: {
        comment_s: [comment],
        docId_s: [docId],
        username_s: [username],
        date: [loggedDateTime],
        table: ['comments']
      },
      id: id
    };
    searcher.search.addOrDeleteDocument(JSON.parse(JSON.stringify(body)), this.getComments);
  };

  Comments.prototype.clearComment = function clearComment() {
    this.setState({
      comment: ''
    });
  };

  Comments.prototype.renderComments = function renderComments() {
    var commentList = this.state.commentList;

    var showComments = commentList && commentList.length > 0;
    if (showComments) {
      var formattedCommentList = this.createFormattedCommentList();
      return formattedCommentList;
    }
    return React.createElement(
      'div',
      { style: { width: '100%', textAlign: 'center', padding: '1em', color: 'gray' } },
      React.createElement(
        'i',
        null,
        ' No Comments Available '
      )
    );
  };

  Comments.prototype.renderCommentModal = function renderCommentModal() {
    var _state = this.state,
        showCommentModal = _state.showCommentModal,
        comment = _state.comment;

    return React.createElement(
      Modal,
      {
        show: showCommentModal,
        onHide: this.hideCommentModal,
        backdrop: 'static'
      },
      React.createElement(
        Modal.Header,
        { closeButton: true },
        React.createElement(
          Modal.Title,
          null,
          'Add or View Comments'
        )
      ),
      React.createElement(
        Modal.Body,
        null,
        React.createElement(
          Row,
          null,
          React.createElement(
            Col,
            { xs: 12, sm: 12, md: 12, lg: 12 },
            React.createElement('textarea', {
              onChange: this.captureComment,
              value: comment,
              style: { width: '100%' },
              rows: 5
            }),
            React.createElement(
              'div',
              { style: { float: 'right' } },
              React.createElement(
                Button,
                { onClick: this.clearComment },
                'Clear'
              ),
              '\xA0',
              React.createElement(
                Button,
                { onClick: this.saveComment },
                'Add Comment'
              )
            )
          ),
          React.createElement(
            Col,
            { xs: 12, sm: 12, md: 12, lg: 12 },
            React.createElement('br', null),
            React.createElement('br', null)
          ),
          React.createElement(
            Col,
            { xs: 12, sm: 12, md: 12, lg: 12 },
            React.createElement(
              'h5',
              { style: { borderBottom: '1px solid lightgray', fontWeight: 'bold' } },
              ' Previously Added Comments : '
            ),
            this.renderComments()
          )
        )
      ),
      React.createElement(
        Modal.Footer,
        null,
        React.createElement(
          Button,
          { onClick: this.hideCommentModal },
          'Close'
        )
      )
    );
  };

  Comments.prototype.renderCommentLink = function renderCommentLink() {
    var commentList = this.state.commentList;

    var commentCount = commentList && commentList.length > 0 ? commentList.length : 0;
    var commentLabel = commentCount > 0 ? 'Comment (' + commentCount + ')' : 'Comment';
    return React.createElement(
      'a',
      {
        className: 'attivio-tags-more',
        onClick: this.showCommentModal,
        role: 'button',
        tabIndex: 0,
        title: 'Add/View Comments'
      },
      commentLabel
    );
  };

  Comments.prototype.render = function render() {
    return React.createElement(
      'div',
      null,
      this.renderCommentLink(),
      this.renderCommentModal()
    );
  };

  return Comments;
}(React.Component), _class.contextTypes = {
  searcher: PropTypes.any
}, _class.displayName = 'Comments', _temp);


export default Comments;