CCKEY-204 Added colorpicker to tag modal

React-color component library used in the tag modal, showing sample tag in the tag table

Author: fermentfan

package-lock.json

@@ -42,6 +42,7 @@
  "prop-type": "latest",
  "rc-queue-anim": "1.0.4",
  "react": "15.4.2",
+ "react-color": "2.13.8",
  "react-copy-to-clipboard": "5.0.0",
  "react-dom": "15.4.2",
  "react-file-download": "0.3.4",

package.json

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {Button, Col, Form, Icon, Input, Modal, Row, Tooltip} from "antd";
+import { SliderPicker } from "react-color";
 import "antd/lib/button/style/index.less";
 import "antd/lib/checkbox/style/index.less";
 import "antd/lib/col/style/css";
@@ -18,7 +19,7 @@ import "./TagModal.less";
  */
 const ManagedForm = Form.create()(
  (props) => {
- const {administrationMode, tag, creationMode, form} = props;
+ const {tag, creationMode, form, colorPicker} = props;
  const {getFieldDecorator} = form;
 
  return (
@@ -34,26 +35,11 @@ const ManagedForm = Form.create()(
  })(
  <Input
  addonBefore="Name"
- readOnly={!administrationMode}
  />
  )}
  </Form.Item>
- <Form.Item
- {...managedFormItemLayout}
- validateStatus={form.getFieldError("color") ? "error" : ""}
- colon={false}
- >
- {getFieldDecorator("color", {
- initialValue: tag.name,
- rules: [{required: true, message: "Color is required"}]
- })(
- <Input
- addonBefore="Color"
- readOnly={!administrationMode}
- />
- )}
- </Form.Item>
- {!creationMode && administrationMode &&
+ {colorPicker()}
+ {!creationMode &&
  <div>
  <Form.Item {...managedFormItemLayout}>
  <Input
@@ -136,6 +122,7 @@ class TagModal extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
+ color: props.tag.color ? props.tag.color : "#2ad127"
  };
  }
 
@@ -144,6 +131,7 @@ class TagModal extends React.Component {
  */
  handleActionButtonOnClick = () => this.form.validateFields((errors, payload) => {
  if (!errors) {
+ payload.color = this.state.color;
  this.props.onSave(payload);
  this.form.resetFields();
  }
@@ -164,9 +152,19 @@ class TagModal extends React.Component {
  */
  saveManagedFormRef = (form) => this.form = form;
 
+ /**
+ * Gets the color from the color picker
+ *
+ * @param color - The color picked by the user
+ */
+ handleChangeComplete = (color) => {
+ this.setState({
+ color: color.hex
+ });
+ };
+
  render() {
  const {
- administrationMode,
  creationMode,
  loading,
  locked,
@@ -189,7 +187,7 @@ class TagModal extends React.Component {
  <Row type="flex" align="middle">
  <Col span={8}>
  <div className="operations">
- {!creationMode && administrationMode &&
+ {!creationMode &&
  <Button.Group>
  <Button disabled={locked} key="delete" type="danger" ghost={true} size="large" icon="delete" onClick={onDelete}/>
  </Button.Group>
@@ -208,6 +206,15 @@ class TagModal extends React.Component {
  </div>
  );
 
+ const colorPicker = () => (
+ <Form.Item {...managedFormItemLayout} colon={false}>
+ <SliderPicker
+ color={this.state.color}
+ onChangeComplete={this.handleChangeComplete}
+ />
+ </Form.Item>
+ );
+
  return (
  <Modal
  id="cckey-components-data-views-tag-modal"
@@ -222,24 +229,19 @@ class TagModal extends React.Component {
  <ManagedForm
  ref={this.saveManagedFormRef}
  tag={tag}
- administrationMode={administrationMode}
  creationMode={creationMode}
+ colorPicker={colorPicker}
  />
  </Col>
  </Row>
- {!creationMode && administrationMode && <Row span={4}>{lockStatusButton()}</Row>}
+ {!creationMode && <Row span={4}>{lockStatusButton()}</Row>}
  <Row><Col>{footer()}</Col></Row>
  </Modal>
  );
  }
 }
 
 TagModal.propTypes = {
- /**
- * Indicates if the user group modal is in administration mode.
- */
- administrationMode: PropTypes.bool,
-
  /**
  * Indicates if the user group modal is in creation mode.
  *
@@ -298,7 +300,6 @@ TagModal.propTypes = {
 };
 
 TagModal.defaultProps = {
- administrationMode: false,
  creationMode: false,
  loading: false
 };

src/components/data/TagModal.js

@@ -1,7 +1,7 @@
 import React from "react";
 import update from "immutability-helper";
 import _ from "lodash";
-import {Button, Col, Icon, Row, Table} from "antd";
+import {Button, Col, Icon, Row, Table, Tag} from "antd";
 import {inject, observer, PropTypes as MobXPropTypes} from "mobx-react";
 import {toJS} from "mobx";
 import TagModal from "./../../components/data/TagModal";
@@ -13,15 +13,25 @@ import "antd/lib/col/style/css";
 import "antd/lib/icon/style/css";
 import "antd/lib/row/style/css";
 import "antd/lib/table/style/index.less";
+import "antd/lib/tag/style/index.less";
 import "./TagAdministration.less";
 import "./../../BaseLayout.less";
 
+/**
+ * A tag component to show the color in the table
+ *
+ * @param {object} tag - The tag containing the color
+ * @constructor
+ */
+export const TAG_TABLE_COLOR_TAG = (tag) =>
+ <Tag color={tag.color}>{tag.color}</Tag>;
+
 /**
  * The default tag table column configuration.
  */
 export const TAG_TABLE_DEFAULT_COLUMNS = [
  {title: "Name", dataIndex: "name", key: "name", fixed: true},
- {title: "Color", dataIndex: "color", key: "color"}
+ {title: "Color", render: TAG_TABLE_COLOR_TAG}
 ];
 
 /**
@@ -165,7 +175,7 @@ class TagAdministration extends React.Component {
 
  render() {
  const {processing, tag, tagModalCreationMode, tagModalLocked, tagModalVisible} = this.state;
- const {authStore, tagStore} = this.props;
+ const {tagStore} = this.props;
 
  const mainDataView = () => (
  <div>
@@ -198,7 +208,6 @@ class TagAdministration extends React.Component {
  visible={tagModalVisible}
  key={tag.id}
  tag={tag}
- administrationMode={authStore.privileged}
  locked={tagModalLocked}
  creationMode={tagModalCreationMode}
  loading={processing}