From 1412a34f64e234dbc7d4e6815b841699f4dd104a Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Sun, 27 Sep 2020 17:48:38 +0200
Subject: Add other custom fields

---
 frontend/src/components/fields/ButtonField.js      |  44 ++++++++
 frontend/src/components/fields/ButtonField.scss    | 119 +++++++++++++++++++++
 frontend/src/components/fields/CheckField.js       |   5 +-
 frontend/src/components/fields/ChoiceField.js      |  59 ++++++++++
 frontend/src/components/fields/ChoiceField.scss    |  69 ++++++++++++
 frontend/src/components/fields/InputField.js       |   7 +-
 frontend/src/components/fields/InputField.scss     |  28 +----
 frontend/src/components/fields/TextField.js        |   5 +-
 frontend/src/components/fields/TextField.scss      |  25 -----
 frontend/src/components/fields/common.scss         |  54 ++++++++++
 .../src/components/fields/extensions/ColorField.js |  63 +++++++++++
 .../components/fields/extensions/ColorField.scss   |  39 +++++++
 .../components/fields/extensions/NumericField.js   |  39 +++++++
 13 files changed, 499 insertions(+), 57 deletions(-)
 create mode 100644 frontend/src/components/fields/ButtonField.js
 create mode 100644 frontend/src/components/fields/ButtonField.scss
 create mode 100644 frontend/src/components/fields/ChoiceField.js
 create mode 100644 frontend/src/components/fields/ChoiceField.scss
 create mode 100644 frontend/src/components/fields/common.scss
 create mode 100644 frontend/src/components/fields/extensions/ColorField.js
 create mode 100644 frontend/src/components/fields/extensions/ColorField.scss
 create mode 100644 frontend/src/components/fields/extensions/NumericField.js

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

diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js
new file mode 100644
index 0000000..b32aee8
--- /dev/null
+++ b/frontend/src/components/fields/ButtonField.js
@@ -0,0 +1,44 @@
+import React, {Component} from 'react';
+import './ButtonField.scss';
+import './common.scss';
+
+const classNames = require('classnames');
+
+class ButtonField extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const handler = () => {
+            if (typeof this.props.onClick === "function") {
+                this.props.onClick();
+            }
+        };
+
+        let buttonClassnames = {
+            "button-bordered": this.props.bordered,
+        };
+        if (this.props.variant) {
+            buttonClassnames[`button-variant-${this.props.variant}`] = true;
+        }
+
+        let buttonStyle = {};
+        if (this.props.color) {
+            buttonStyle["backgroundColor"] = this.props.color;
+        }
+        if (this.props.border) {
+            buttonStyle["borderColor"] = this.props.border;
+        }
+
+        return (
+            <div className={classNames( "field", "button-field", {"field-small": this.props.small})}>
+                <button type="button" className={classNames(classNames(buttonClassnames))}
+                        onClick={handler} style={buttonStyle}>{this.props.name}</button>
+            </div>
+        );
+    }
+}
+
+export default ButtonField;
diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss
new file mode 100644
index 0000000..933279e
--- /dev/null
+++ b/frontend/src/components/fields/ButtonField.scss
@@ -0,0 +1,119 @@
+@import '../../colors.scss';
+
+.button-field {
+  font-size: 0.9em;
+
+  .button-bordered {
+    border-bottom: 5px solid $color-primary-1;
+  }
+
+  &.field-small {
+    font-size: 0.8em;
+  }
+
+  .button-variant-red {
+    color: $color-red-light;
+    background-color: $color-red;
+
+    &.button-bordered {
+      border-bottom: 5px solid $color-red-dark;
+    }
+
+    &:hover,
+    &:active {
+      color: $color-red-light;
+      background-color: $color-red-dark;
+    }
+  }
+
+  .button-variant-pink {
+    color: $color-pink-light;
+    background-color: $color-pink;
+
+    &.button-bordered {
+      border-bottom: 5px solid $color-pink-dark;
+    }
+
+    &:hover,
+    &:active {
+      color: $color-pink-light;
+      background-color: $color-pink-dark;
+    }
+  }
+
+  .button-variant-purple {
+    color: $color-purple-light;
+    background-color: $color-purple;
+
+    &.button-bordered {
+      border-bottom: 5px solid $color-purple-dark;
+    }
+
+    &:hover,
+    &:active {
+      color: $color-purple-light;
+      background-color: $color-purple-dark;
+    }
+  }
+
+  .button-variant-deep-purple {
+    color: $color-deep-purple-light;
+    background-color: $color-deep-purple;
+
+    &.button-bordered {
+      border-bottom: 5px solid $color-deep-purple-dark;
+    }
+
+    &:hover,
+    &:active {
+      color: $color-deep-purple-light;
+      background-color: $color-deep-purple-dark;
+    }
+  }
+
+  .button-variant-indigo {
+    color: $color-indigo-light;
+    background-color: $color-indigo;
+
+    &.button-bordered {
+      border-bottom: 5px solid $color-indigo-dark;
+    }
+
+    &:hover,
+    &:active {
+      color: $color-indigo-light;
+      background-color: $color-indigo-dark;
+    }
+  }
+
+  .button-variant-blue {
+    color: $color-blue-light;
+    background-color: $color-blue;
+
+    &.button-bordered {
+      border-bottom: 5px solid $color-blue-dark;
+    }
+
+    &:hover,
+    &:active {
+      color: $color-blue-light;
+      background-color: $color-blue-dark;
+    }
+  }
+
+  .button-variant-green {
+    color: $color-green-light;
+    background-color: $color-green;
+
+    &.button-bordered {
+      border-bottom: 5px solid $color-green-dark;
+    }
+
+    &:hover,
+    &:active {
+      color: $color-green-light;
+      background-color: $color-green-dark;
+    }
+  }
+
+}
diff --git a/frontend/src/components/fields/CheckField.js b/frontend/src/components/fields/CheckField.js
index 5cceac4..33f4f83 100644
--- a/frontend/src/components/fields/CheckField.js
+++ b/frontend/src/components/fields/CheckField.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import './CheckField.scss';
+import './common.scss';
 import {randomClassName} from "../../utils";
 
 const classNames = require('classnames');
@@ -23,10 +24,10 @@ class CheckField extends Component {
         };
 
         return (
-            <div className={classNames( "check-field", {"field-checked" : checked}, {"field-small": small})}>
+            <div className={classNames( "field", "check-field", {"field-checked" : checked}, {"field-small": small})}>
                 <div className="field-input">
                     <input type="checkbox" id={this.id} checked={checked} onChange={handler} />
-                    <label htmlFor={this.id}>{(checked ? "✓ " : "✗ ") + name}</label>
+                    <label htmlFor={this.id}>{(checked ? "✓ " : "✗ ") + (name != null ? name : "")}</label>
                 </div>
             </div>
         );
diff --git a/frontend/src/components/fields/ChoiceField.js b/frontend/src/components/fields/ChoiceField.js
new file mode 100644
index 0000000..d409b21
--- /dev/null
+++ b/frontend/src/components/fields/ChoiceField.js
@@ -0,0 +1,59 @@
+import React, {Component} from 'react';
+import './ChoiceField.scss';
+import './common.scss';
+import {randomClassName} from "../../utils";
+
+const classNames = require('classnames');
+
+class ChoiceField extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            expanded: false
+        };
+
+        this.id = `field-${this.props.name || "noname"}-${randomClassName()}`;
+    }
+
+    render() {
+        const name = this.props.name || null;
+        const inline = this.props.inline;
+
+        const collapse = () => this.setState({expanded: false});
+        const expand = () => this.setState({expanded: true});
+
+        const handler = (key) => {
+            collapse();
+            if (this.props.onChange) {
+                this.props.onChange(key);
+            }
+        };
+
+        const keys = this.props.keys || [];
+        const values = this.props.values || [];
+
+        const options = keys.map((key, i) =>
+            <span className="field-option" key={key} onClick={() => handler(key)}>{values[i]}</span>
+        );
+
+        return (
+            <div className={classNames( "field", "choice-field", {"field-inline" : inline},
+                {"field-small": this.props.small})}>
+                {!inline && name && <label className="field-name">{name}:</label>}
+                <div className={classNames("field-select", {"select-expanded": this.state.expanded})}
+                     tabIndex={0} onBlur={collapse} onClick={() => this.state.expanded ? collapse() : expand()}>
+                    <div className="field-value">
+                        {((inline && name) ? (name + ": ") : "") + (this.props.value || "select a value")}
+                    </div>
+                    <div className="field-options">
+                        {options}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ChoiceField;
diff --git a/frontend/src/components/fields/ChoiceField.scss b/frontend/src/components/fields/ChoiceField.scss
new file mode 100644
index 0000000..7f32b0e
--- /dev/null
+++ b/frontend/src/components/fields/ChoiceField.scss
@@ -0,0 +1,69 @@
+@import '../../colors.scss';
+
+.choice-field {
+  font-size: 0.9em;
+
+  .field-name {
+    margin: 0;
+  }
+
+  .field-select {
+    position: relative;
+    margin-top: 5px;
+
+    .field-value {
+      background-color: $color-primary-2;
+      border: none;
+      color: $color-primary-4;
+      border-radius: 5px;
+      padding: 7px 10px;
+      cursor: pointer;
+
+      &:after {
+        content: "⋎";
+        position: absolute;
+        right: 10px;
+      }
+    }
+
+    .field-options {
+      position: absolute;
+      top: 35px;
+      width: 100%;
+      z-index: 20;
+      border-top: 3px solid $color-primary-0;
+      border-radius: 5px;
+      background-color: $color-primary-2;
+      display: none;
+
+      .field-option {
+        display: block;
+        padding: 5px 10px;
+        cursor: pointer;
+        border-radius: 5px;
+      }
+
+      .field-option:hover {
+        background-color: $color-primary-1;
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .field-select.select-expanded {
+    .field-options {
+      display: block;
+    }
+
+    .field-value:after {
+      content: "⋏";
+    }
+  }
+
+  &.field-small {
+    font-size: 0.8em;
+  }
+}
diff --git a/frontend/src/components/fields/InputField.js b/frontend/src/components/fields/InputField.js
index af3b3df..6cf967a 100644
--- a/frontend/src/components/fields/InputField.js
+++ b/frontend/src/components/fields/InputField.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import './InputField.scss';
+import './common.scss';
 import {randomClassName} from "../../utils";
 
 const classNames = require('classnames');
@@ -36,12 +37,12 @@ class InputField extends Component {
         };
         let inputProps = {};
         if (type !== "file") {
-            inputProps["value"] = value;
+            inputProps["value"] = value || this.props.initialValue;
         }
 
         return (
-            <div className={classNames("input-field", {"field-active" : active}, {"field-invalid": invalid},
-                {"field-small": small}, {"field-inline": inline})}>
+            <div className={classNames("field", "input-field", {"field-active" : active},
+                {"field-invalid": invalid}, {"field-small": small}, {"field-inline": inline})}>
                 <div className="field-wrapper">
                     { name &&
                     <div className="field-name">
diff --git a/frontend/src/components/fields/InputField.scss b/frontend/src/components/fields/InputField.scss
index cdb8c9f..79e2b7e 100644
--- a/frontend/src/components/fields/InputField.scss
+++ b/frontend/src/components/fields/InputField.scss
@@ -14,42 +14,20 @@
     position: relative;
 
     .field-value {
-      input, .file-label {
+      .file-label {
         background-color: $color-primary-2;
+        margin: 0;
         width: 100%;
-        border: none;
         color: $color-primary-4;
         border-radius: 5px;
         padding: 7px 10px;
-
-        &:focus {
-          background-color: $color-primary-1;
-          color: $color-primary-4;
-          box-shadow: none;
-          outline: none;
-        }
-
-        &[readonly] {
-          background-color: $color-primary-2;
-          border: none;
-          color: $color-primary-4;
-        }
-
-        &[readonly]:focus {
-          background-color: $color-primary-1;
-          color: $color-primary-4;
-          box-shadow: none;
-        }
+        cursor: pointer;
       }
 
       input[type="file"] {
         display: none;
       }
 
-      .file-label {
-        margin: 0;
-      }
-
       .file-label:after {
         content: "Browse";
         position: absolute;
diff --git a/frontend/src/components/fields/TextField.js b/frontend/src/components/fields/TextField.js
index 86b98ed..de68c21 100644
--- a/frontend/src/components/fields/TextField.js
+++ b/frontend/src/components/fields/TextField.js
@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import './TextField.scss';
+import './common.scss';
 import {randomClassName} from "../../utils";
 
 const classNames = require('classnames');
@@ -28,11 +29,11 @@ class TextField extends Component {
         };
 
         return (
-            <div className={classNames("text-field", {"field-active": this.props.active},
+            <div className={classNames("field", "text-field", {"field-active": this.props.active},
                 {"field-invalid": this.props.invalid}, {"field-small": this.props.small})}>
                 {name && <label htmlFor={this.id}>{name}:</label>}
                 <textarea id={this.id} placeholder={this.props.defaultValue} onChange={handler} rows={rows}
-                          readOnly={this.props.readonly} value={this.props.value} />
+                          readOnly={this.props.readonly} value={this.props.value} ref={this.props.textRef} />
                 {error && <div className="field-error">error: {error}</div>}
             </div>
         );
diff --git a/frontend/src/components/fields/TextField.scss b/frontend/src/components/fields/TextField.scss
index 606f537..de831fb 100644
--- a/frontend/src/components/fields/TextField.scss
+++ b/frontend/src/components/fields/TextField.scss
@@ -10,32 +10,7 @@
   }
 
   textarea {
-    background-color: $color-primary-2;
-    width: 100%;
-    border: none;
-    color: $color-primary-4;
-    border-radius: 5px;
-    padding: 7px 10px;
     resize: none;
-
-    &:focus {
-      background-color: $color-primary-1;
-      color: $color-primary-4;
-      box-shadow: none;
-      outline: none;
-    }
-
-    &[readonly] {
-      background-color: $color-primary-2;
-      border: none;
-      color: $color-primary-4;
-    }
-
-    &[readonly]:focus {
-      background-color: $color-primary-1;
-      color: $color-primary-4;
-      box-shadow: none;
-    }
   }
 
   &.field-active {
diff --git a/frontend/src/components/fields/common.scss b/frontend/src/components/fields/common.scss
new file mode 100644
index 0000000..f83a988
--- /dev/null
+++ b/frontend/src/components/fields/common.scss
@@ -0,0 +1,54 @@
+@import '../../colors.scss';
+
+.field {
+
+  input, textarea {
+    background-color: $color-primary-2;
+    width: 100%;
+    border: none;
+    color: $color-primary-4;
+    border-radius: 5px;
+    padding: 7px 10px;
+
+    &:focus {
+      background-color: $color-primary-1;
+      color: $color-primary-4;
+      box-shadow: none;
+      outline: none;
+    }
+
+    &[readonly] {
+      background-color: $color-primary-2;
+      border: none;
+      color: $color-primary-4;
+    }
+
+    &[readonly]:focus {
+      background-color: $color-primary-1;
+      color: $color-primary-4;
+      box-shadow: none;
+    }
+  }
+
+  button {
+    border-radius: 0;
+    background-color: $color-primary-2;
+    border: none;
+    color: $color-primary-4;
+    outline: none;
+    padding: 5px 12px;
+    font-weight: 500;
+
+    &:hover,
+    &:active {
+      background-color: $color-primary-1;
+      color: $color-primary-4;
+    }
+
+    &:focus,
+    &:active {
+      outline: none !important;
+      box-shadow: none !important;
+    }
+  }
+}
diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js
new file mode 100644
index 0000000..edcb720
--- /dev/null
+++ b/frontend/src/components/fields/extensions/ColorField.js
@@ -0,0 +1,63 @@
+import React, {Component} from 'react';
+import {Button, ButtonGroup, Form, OverlayTrigger, Popover} from "react-bootstrap";
+import './ColorField.scss';
+import InputField from "../InputField";
+
+class ColorField extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            invalid: false
+        };
+
+        this.colors = ["#E53935", "#D81B60", "#8E24AA", "#5E35B1", "#3949AB", "#1E88E5", "#039BE5", "#00ACC1",
+            "#00897B", "#43A047", "#7CB342", "#9E9D24", "#F9A825", "#FB8C00", "#F4511E", "#6D4C41"];
+    }
+
+    render() {
+        const colorButtons = this.colors.map((color) =>
+            <span key={"button" + color} className="color-input"
+                  style={{"backgroundColor": color, "borderColor": this.state.color === color ? "#fff" : color}}
+                  onClick={() => {
+                      this.setState({color: color});
+                      if (typeof this.props.onChange === "function") {
+                          this.props.onChange(color);
+                      }
+                      document.body.click(); // magic to close popup
+                  }} />);
+
+        const popover = (
+            <Popover id="popover-basic">
+                <Popover.Title as="h3">choose a color</Popover.Title>
+                <Popover.Content>
+                    <div className="colors-container">
+                        <div className="colors-row">
+                            {colorButtons.slice(0, 8)}
+                        </div>
+                        <div className="colors-row">
+                            {colorButtons.slice(8, 18)}
+                        </div>
+                    </div>
+                </Popover.Content>
+            </Popover>
+        );
+
+        return (
+            <div className="color-field">
+                <InputField {...this.props} name="color" />
+
+                <div className="color-picker">
+                    <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose>
+                        <Button variant="picker" size="sm">pick</Button>
+                    </OverlayTrigger>
+                </div>
+
+            </div>
+        );
+    }
+
+}
+
+export default ColorField;
diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss
new file mode 100644
index 0000000..c8f617c
--- /dev/null
+++ b/frontend/src/components/fields/extensions/ColorField.scss
@@ -0,0 +1,39 @@
+@import '../../../colors.scss';
+
+.color-field {
+  display: flex;
+  align-items: flex-end;
+
+  .input-field {
+    flex: 1;
+
+    input {
+      border-bottom-right-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+    }
+  }
+
+  .color-picker {
+    margin-bottom: 5.5px;
+
+    .btn-picker {
+      padding: 8.5px 15px;
+      border-bottom-right-radius: 5px;
+      border-top-right-radius: 5px;
+      background-color: $color-indigo;
+    }
+  }
+
+
+}
+
+.colors-container {
+  width: 600px;
+
+  .color-input {
+    display: inline-block;
+    width: 31px;
+    height: 31px;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js
new file mode 100644
index 0000000..8823c42
--- /dev/null
+++ b/frontend/src/components/fields/extensions/NumericField.js
@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+import InputField from "../InputField";
+
+class NumericField extends Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            invalid: false
+        };
+    }
+
+    render() {
+        const handler = (value) => {
+            value = value.replace(/[^\d]/gi, '');
+            let intValue = 0;
+            if (value !== "") {
+                intValue = parseInt(value);
+            }
+            const valid =
+                (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) &&
+                (!this.props.min || (typeof this.props.min === "number" && intValue >= this.props.min)) &&
+                (!this.props.max || (typeof this.props.max === "number" && intValue <= this.props.max));
+            this.setState({invalid: !valid});
+            if (this.props.onChange) {
+                this.props.onChange(intValue);
+            }
+        };
+
+        return (
+            <InputField {...this.props} onChange={handler} initialValue={this.props.initialValue || 0}
+                        invalid={this.state.invalid} />
+        );
+    }
+
+}
+
+export default NumericField;
-- 
cgit v1.2.3-70-g09d2