#446 Errors indicators

metasfresh · Mar 3, 2017 · 9a91ae0 · 9a91ae0
1 parent c33b622
commit 9a91ae0
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 92 deletions.
diff --git a/src/assets/css/inputs.css b/src/assets/css/inputs.css
@@ -421,6 +421,25 @@ input:checked + .input-slider:before {
     border-radius: 3px;
 }
 
+.input-body-container {
+    position: relative;
+}
+
+.input-error-popup {
+    position: absolute;
+    right:0;
+    bottom: 100%;
+    margin-bottom: .3rem;
+
+    padding: .2rem .5rem;
+
+    font-size: .7rem;
+    color: $brand-danger-color;
+    background-color: #fff;
+    border: 1px solid $brand-danger-color;
+    border-radius: 3px;
+}
+
 .input-error {
     border-color: $brand-danger-color;
 }
@@ -543,6 +562,7 @@ input:checked + .input-slider:before {
 }
 
 .form-group {
+    position: relative;
     margin-bottom: 0.2rem;
 }
 

diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css
@@ -959,6 +959,24 @@ td.pulse-off input {
  *  Animations
  */
 
+.fade-enter {
+    opacity: 0.01;
+}
+
+.fade-enter.fade-enter-active {
+    opacity: 1;
+    transition: opacity .2s;
+}
+
+.fade-leave {
+    opacity: 1;
+}
+
+.fade-leave.fade-leave-active {
+    opacity: 0.01;
+    transition: opacity .2s;
+ }
+
 .slidein-enter {
     right: -100%;
 }

diff --git a/src/components/widget/DatetimeRange.js b/src/components/widget/DatetimeRange.js
@@ -55,7 +55,7 @@ class DatetimeRange extends Component {
             ]
         }
         const {startDate, endDate} = this.state;
-        const {onShow, onHide, mandatory} = this.props;
+        const {onShow, onHide, mandatory, validStatus} = this.props;
 
         return (
             <DateRangePicker
@@ -75,8 +75,11 @@ class DatetimeRange extends Component {
             >
                 <button className={
                     'btn btn-block text-xs-left btn-meta-outline-secondary ' +
-                    'btn-distance btn-sm input-icon-container input-primary' +
-                    (mandatory && !startDate && !endDate ? ' input-mandatory ' : '')
+                    'btn-distance btn-sm input-icon-container input-primary ' +
+                    ((mandatory && !startDate && !endDate) ? 
+                        'input-mandatory ' : '') +
+                    ((validStatus && !validStatus.valid) ?
+                        'input-error ' : '')
                 }>
                     {!!startDate && !!endDate ?
                         ' ' + Moment(startDate).format('L') +

diff --git a/src/components/widget/List/List.js b/src/components/widget/List/List.js
@@ -45,7 +45,7 @@ class List extends Component {
     render() {
         const {
             rank, readonly, defaultValue, selected, align, updated, rowId,
-            emptyText, tabIndex, mandatory
+            emptyText, tabIndex, mandatory, validStatus
         } = this.props;
         const {list, loading} = this.state;
 
@@ -65,6 +65,7 @@ class List extends Component {
                 emptyText={emptyText}
                 tabIndex={tabIndex}
                 mandatory={mandatory}
+                validStatus={validStatus}
             />
         )
     }

diff --git a/src/components/widget/List/RawList.js b/src/components/widget/List/RawList.js
@@ -247,8 +247,8 @@ class RawList extends Component {
 
     render() {
         const {
-            list, rank, readonly, defaultValue, selected, align, updated, loading,
-            rowId, isModal, tabIndex, disabled, mandatory
+            list, rank, readonly, defaultValue, selected, align, updated, 
+            loading, rowId, isModal, tabIndex, disabled, mandatory, validStatus
         } = this.props;
 
         const {
@@ -266,7 +266,9 @@ class RawList extends Component {
                     'input-dropdown-container ' +
                     (readonly ? 'input-disabled ' : '') +
                     (rowId ? 'input-dropdown-container-static ' : '') +
-                    ((rowId && !isModal) ? 'input-table ' : '')
+                    ((rowId && !isModal) ? 'input-table ' : '') +
+                    (validStatus &&
+                        !validStatus.valid ? 'input-error ' : '')
                 }
             >
                 <div className={

diff --git a/src/components/widget/Lookup/Lookup.js b/src/components/widget/Lookup/Lookup.js
@@ -372,7 +372,7 @@ class Lookup extends Component {
     render() {
         const {
             rank, readonly, defaultValue, placeholder, align, isModal, updated,
-            filterWidget, mandatory, rowId, tabIndex
+            filterWidget, mandatory, rowId, tabIndex, validStatus
         } = this.props;
 
         const {
@@ -389,7 +389,9 @@ class Lookup extends Component {
                     (isOpen ? 'input-focused ' : '') +
                     (readonly ? 'input-disabled ' : '') +
                     (rowId ? 'input-dropdown-container-static ' : '') +
-                    ((rowId && !isModal)? 'input-table ' : '')
+                    ((rowId && !isModal)? 'input-table ' : '') +
+                    (validStatus &&
+                        !validStatus.valid ? 'input-error ' : '')
                 }
             >
                 <div className={