Complete services page

2 files changed, 51 insertions, 25 deletions

diff --git a/frontend/src/components/fields/extensions/ColorField.js b/frontend/src/components/fields/extensions/ColorField.js
index c1c210f..96ebc49 100644
--- a/frontend/src/components/fields/extensions/ColorField.js
+++ b/frontend/src/components/fields/extensions/ColorField.js
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {OverlayTrigger, Popover} from "react-bootstrap";
 import './ColorField.scss';
 import InputField from "../InputField";
+import validation from "../../../validation";
 
 class ColorField extends Component {
 
@@ -15,11 +16,24 @@ class ColorField extends Component {
             "#00897B", "#43A047", "#7CB342", "#9E9D24", "#F9A825", "#FB8C00", "#F4511E", "#6D4C41"];
     }
 
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (prevProps.value !== this.props.value) {
+            this.onChange(this.props.value);
+        }
+    }
+
+    onChange = (value) => {
+        this.setState({invalid: value !== "" && !validation.isValidColor(value)});
+
+        if (typeof this.props.onChange === "function") {
+            this.props.onChange(value);
+        }
+    };
+
     render() {
         const colorButtons = this.colors.map((color) =>
             <span key={"button" + color} className="color-input" style={{"backgroundColor": color}}
                   onClick={() => {
-                      this.setState({color: color});
                       if (typeof this.props.onChange === "function") {
                           this.props.onChange(color);
                       }
@@ -43,18 +57,22 @@ class ColorField extends Component {
         );
 
         let buttonStyles = {};
-        if (this.state.color) {
-            buttonStyles["backgroundColor"] = this.state.color;
+        if (this.props.value) {
+            buttonStyles["backgroundColor"] = this.props.value;
         }
 
         return (
             <div className="field color-field">
-                <InputField {...this.props} name="color" />
-                <div className="color-picker">
-                    <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose>
-                        <button type="button" className="picker-button" style={buttonStyles}>pick</button>
-                    </OverlayTrigger>
+                <div className="color-input">
+                    <InputField {...this.props} onChange={this.onChange} invalid={this.state.invalid} name="color"
+                                error={null} />
+                    <div className="color-picker">
+                        <OverlayTrigger trigger="click" placement="top" overlay={popover} rootClose>
+                            <button type="button" className="picker-button" style={buttonStyles}>pick</button>
+                        </OverlayTrigger>
+                    </div>
                 </div>
+                {this.props.error && <div className="color-error">{this.props.error}</div>}
             </div>
         );
     }
diff --git a/frontend/src/components/fields/extensions/ColorField.scss b/frontend/src/components/fields/extensions/ColorField.scss
index 1c3931f..6eabbda 100644
--- a/frontend/src/components/fields/extensions/ColorField.scss
+++ b/frontend/src/components/fields/extensions/ColorField.scss
@@ -1,29 +1,37 @@
 @import '../../../colors.scss';
 
 .color-field {
-  display: flex;
-  align-items: flex-end;
+  .color-input {
+    display: flex;
+    align-items: flex-end;
 
-  .input-field {
-    flex: 1;
+    .input-field {
+      flex: 1;
 
-    input {
-      border-bottom-right-radius: 0 !important;
-      border-top-right-radius: 0 !important;
+      input {
+        border-bottom-right-radius: 0 !important;
+        border-top-right-radius: 0 !important;
+      }
     }
-  }
 
-  .color-picker {
-    margin-bottom: 5.5px;
+    .color-picker {
+      margin-bottom: 5px;
 
-    .picker-button {
-      font-size: 0.8em;
-      padding: 8px 15px;
-      border-bottom-right-radius: 5px;
-      border-top-right-radius: 5px;
-      background-color: $color-primary-1;
+      .picker-button {
+        font-size: 0.8em;
+        padding: 8px 15px;
+        border-bottom-right-radius: 5px;
+        border-top-right-radius: 5px;
+        background-color: $color-primary-1;
+      }
     }
   }
+
+  .color-error {
+    font-size: 0.8em;
+    color: $color-secondary-0;
+    margin-left: 10px;
+  }
 }
 
 .colors-container {
@@ -35,4 +43,4 @@
     height: 31px;
     cursor: pointer;
   }
-}
\ No newline at end of file
+}