[CP] Custom properties phase 1

ashes/src/components/custom-properties/custom-properties.css

@@ -0,0 +1,50 @@
+
+.controls {
+  position: absolute;
+  right: 21px;
+
+  & > i {
+    margin: 0 5px;
+    cursor: pointer;
+  }
+}
+
+:global .fc-save-cancel {
+  display: flex;
+  justify-content: flex-end;
+}
+
+:global .fc-save-cancel__cancel {
+  background-color: transparent;
+  text-decoration: underline;
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+.addProperty {
+  display: flex;
+  align-items: center;
+  margin: 30px -20px -20px -20px;
+  padding: 20px;
+  border-top: 1px solid #d9d9d9;
+  cursor: pointer;
+  transition: all .2s;
+
+  &:hover {
+    background-color: #f7f7f7;
+  }
+}
+
+.buttonTitle {
+  margin-right: 10px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.icon {
+  font-size: 10px;
+}
+
+

ashes/src/components/custom-properties/custom-properties.jsx

@@ -0,0 +1,247 @@
+// @flow
+
+// libs
+import React, { Component, Element } from 'react';
+import { autobind } from 'core-decorators';
+import { get, keys, omit } from 'lodash';
+
+// components
+import CustomPropertyModal from './custom-property-modal';
+import ConfirmationDialog from '../modal/confirmation-dialog';
+
+// style
+import s from './custom-properties.css';
+
+type Props = {
+  canAddProperty?: boolean,
+  attributes: Attributes,
+  onChange: (attributes: Attributes) => void,
+  schema?: Object,
+  children: Element<*>
+};
+
+type State = {
+  isAddingProperty: boolean,
+  isEditingProperty: boolean,
+  isDeletingProperty: boolean,
+  errors: { [id: string]: any },
+  currentEdit: {
+    name: string,
+    type: string,
+    value: any,
+  },
+  propertyToDelete: string,
+}
+
+export default class CustomProperties extends Component {
+  props: Props;
+
+  state: State = {
+    isAddingProperty: false,
+    isEditingProperty: false,
+    isDeletingProperty: false,
+    errors: {},
+    currentEdit: {
+      name: '',
+      type: '',
+      value: '',
+    },
+    propertyToDelete: '',
+  };
+
+  get customPropertyForm() {
+    if (this.state.isAddingProperty) {
+      return (
+        <CustomPropertyModal
+          isVisible={true}
+          onSave={this.handleCreateProperty}
+          onCancel={() => this.setState({ isAddingProperty: false })}
+        />
+      );
+    }
+
+    if (this.state.isEditingProperty) {
+      return (
+        <CustomPropertyModal
+          isVisible={true}
+          currentEdit={this.state.currentEdit}
+          onSave={this.handleEditProperty}
+          onCancel={() => this.setState({ isEditingProperty: false })}
+        />
+      );
+    }
+  }
+
+  get deletePropertyForm() {
+    if (this.state.isDeletingProperty) {
+      return (
+        <ConfirmationDialog
+          header="Delete Custom Property?"
+          body="Are you sure you want to delete the custom property?"
+          cancel="Cancel"
+          confirm="Yes, Delete"
+          isVisible={true}
+          confirmAction={this.handleDeleteProperty}
+          onCancel={() => this.setState({ isDeletingProperty: false }) }
+        />
+      );
+    }
+  }
+
+  @autobind
+  controlButtons(name: string, type: string, value: any) {
+    const defaultProperties = keys(get(this.props.schema, 'properties', {}));
+
+    if (defaultProperties.includes(name)) {
+      return null;
+    }
+
+    return (
+      <div className={s.controls}>
+        <i className="icon-edit" onClick={() => this.onEdit(name, type, value)} />
+        <i className="icon-trash" onClick={() => this.onDelete(name)} />
+      </div>
+    );
+  }
+
+  @autobind
+  handleCreateProperty(property: { fieldLabel: string, propertyType: string }) {
+    const { fieldLabel, propertyType } = property;
+    const label = fieldLabel.toLowerCase();
+    // TODO show error message, if fieldLabel is not unique
+    if (!this.isUnique(label)) {
+      return null;
+    }
+
+    const value = (() => {
+      switch (propertyType) {
+        case('date'):
+          return new Date().toString();
+        case('bool'):
+          return false;
+        default:
+          return '';
+      }
+    })();
+    this.setState({
+      isAddingProperty: false
+    }, () => this.handleChange(label, propertyType, value));
+  }
+
+  @autobind
+  handleEditProperty(property: { fieldLabel: string, propertyType: string, fieldValue: any }) {
+    const { attributes } = this.props;
+    const { currentEdit: { name } } = this.state;
+    const { fieldLabel, propertyType, fieldValue } = property;
+
+    const preparedObject = omit(attributes, name);
+    const newAttributes = {
+      ...preparedObject,
+      [fieldLabel]: {
+        t: propertyType,
+        v: fieldValue,
+      }
+    };
+
+    this.setState({
+      isEditingProperty: false,
+      currentEdit: {
+        name: '',
+        type: '',
+        value: ''
+      }
+    }, this.props.onChange(newAttributes));
+  }
+
+  @autobind
+  handleDeleteProperty() {
+    const newAttributes = omit(this.props.attributes, this.state.propertyToDelete);
+    this.setState({ isDeletingProperty: false }, this.props.onChange(newAttributes));
+  }
+
+  @autobind
+  handleChange(name: string, type: string, value: any) {
+    const { attributes } = this.props;
+    const newAttributes = {
+      ...attributes,
+      [name]: {
+        t: type,
+        v: value,
+      }
+    };
+
+    this.props.onChange(newAttributes);
+  }
+
+  @autobind
+  isUnique(fieldLabel: string) {
+    const reservedNames = keys(get(this.props, 'attributes', {}));
+    const unique = !reservedNames.includes(fieldLabel);
+    return unique;
+  }
+
+  @autobind
+  processAttr(content: Element<*>, name: string, type: string, value: any) {
+    return (
+      <div key={name}>
+        {this.controlButtons(name, type, value)}
+        {content}
+      </div>
+    );
+  }
+
+  @autobind
+  handleAddProperty() {
+    this.setState({ isAddingProperty: true });
+  }
+
+  @autobind
+  onEdit(name: string, type: string, value: any) {
+    this.setState({
+      isEditingProperty: true,
+      currentEdit: {
+        name,
+        type,
+        value
+      },
+    });
+  }
+
+  @autobind
+  onDelete(name: string) {
+    this.setState({
+      isDeletingProperty: true,
+      propertyToDelete: name
+    });
+  }
+
+  get addCustomProperty() {
+    if (this.props.canAddProperty) {
+      return (
+        <div className={s.addProperty} onClick={this.handleAddProperty}>
+          <span className={s.buttonTitle}>Custom Property</span>
+          <a className={s.icon}>
+            <i className="icon-add" />
+          </a>
+        </div>
+      );
+    }
+  }
+
+  get children(): Element<*> {
+    return React.cloneElement((this.props.children), {
+      processAttr: this.processAttr,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        {this.children}
+        {this.addCustomProperty}
+        {this.customPropertyForm}
+        {this.deletePropertyForm}
+      </div>
+    );
+  }
+}

ashes/src/components/custom-properties/custom-property-modal.css

@@ -0,0 +1,12 @@
+.modal {
+  min-width: 575px;
+}
+
+:global .fc-dropdown {
+  max-width: 100%;
+  margin-bottom: 10px;
+}
+
+:global .fc-content-box {
+  margin-bottom: 0;
+}