mark required fields as red on save new row

Author: sadakchap

src/components/BrowserCell/BrowserCell.react.js

@@ -214,7 +214,7 @@ export default class BrowserCell extends Component {
   //#endregion
 
   render() {
-    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, field, onEditSelectedRow, readonly, isRequired } = this.props;
+    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredField } = this.props;
     let content = value;
     this.copyableValue = content;
     let classes = [styles.cell, unselectable];
@@ -305,6 +305,10 @@ export default class BrowserCell extends Component {
       classes.push(styles.current);
     }
 
+    if (markRequiredField && isRequired && !value) {
+      classes.push(styles.required);
+    }
+    
     return readonly ? (
       <Tooltip placement='bottom' tooltip='Read only (CTRL+C to copy)' visible={this.state.showTooltip} >
         <span

src/components/BrowserCell/BrowserCell.scss

@@ -35,3 +35,18 @@
     bottom: 0;
   }
 }
+
+.required {
+  position: relative;
+
+  &:after {
+    position: absolute;
+    pointer-events: none;
+    content: '';
+    border: 2px solid #ff395e;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}

src/components/BrowserRow/BrowserRow.react.js

@@ -19,7 +19,7 @@ export default class BrowserRow extends Component {
   }
 
   render() {
-    const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow, setContextMenu, onFilterChange } = this.props;
+    const { className, columns, currentCol, isUnique, obj, onPointerClick, order, readOnlyFields, row, rowWidth, selection, selectRow, setCopyableValue, setCurrent, setEditing, setRelation, onEditSelectedRow, setContextMenu, onFilterChange, markRequiredField } = this.props;
     let attributes = obj.attributes;
     return (
       <div className={styles.tableRow} style={{ minWidth: rowWidth }}>
@@ -82,6 +82,7 @@ export default class BrowserRow extends Component {
               value={attr}
               hidden={hidden}
               isRequired={isRequired}
+              markRequiredField={markRequiredField}
               setCopyableValue={setCopyableValue}
               setContextMenu={setContextMenu}
               onEditSelectedRow={onEditSelectedRow} />

src/dashboard/Data/Browser/Browser.react.js

@@ -79,6 +79,7 @@ class Browser extends DashboardView {
 
       isUnique: false,
       uniqueField: null,
+      markRequiredField: false
     };
 
     this.prefetchData = this.prefetchData.bind(this);
@@ -302,6 +303,11 @@ class Browser extends DashboardView {
         newObject: null
       });
     }
+    if (this.state.markRequiredField) {
+      this.setState({
+        markRequiredField: false
+      });
+    }
   }
 
   saveNewRow(){
@@ -310,6 +316,45 @@ class Browser extends DashboardView {
       return;
     }
 
+    // check if required fields are missing
+    const className = this.props.params.className;
+    let requiredCols = [];
+    if (className) {
+      let classColumns = this.props.schema.data.get('classes').get(className);
+      classColumns.forEach(({ required }, name) => {
+          if (name === 'objectId' || this.state.isUnique && name !== this.state.uniqueField) {
+            return;
+          }
+          if (!!required) {
+            requiredCols.push(name);
+          }
+          if (className === '_User' && (name === 'username' || name === 'password')) {
+            if (!obj.get('authData')) {
+              requiredCols.push(name);
+            }
+          }
+          if (className === '_Role' && (name === 'name' || name === 'ACL')) {
+            requiredCols.push(name);
+          }
+        });
+    }
+    if (requiredCols.length) {
+      for (let idx = 0; idx < requiredCols.length; idx++) {
+        const name = requiredCols[idx];
+        if (!obj.get(name)) {
+          this.showNote("Please enter all required fields", true);
+          this.setState({
+            markRequiredField: true
+          });
+          return;
+        }
+      }
+    }
+    if (this.state.markRequiredField) {
+      this.setState({
+        markRequiredField: false
+      });
+    }
     obj.save(null, { useMasterKey: true }).then(
       objectSaved => {
         let msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' created';
@@ -1080,6 +1125,7 @@ class Browser extends DashboardView {
             onSaveNewRow={this.saveNewRow}
             onAbortAddRow={this.abortAddRow}
 
+            markRequiredField={this.state.markRequiredField}
             columns={columns}
             className={className}
             fetchNextPage={this.fetchNextPage}

src/dashboard/Data/Browser/BrowserTable.react.js

@@ -143,6 +143,7 @@ export default class BrowserTable extends React.Component {
               setCopyableValue={this.props.setCopyableValue}
               setContextMenu={this.props.setContextMenu}
               onEditSelectedRow={this.props.onEditSelectedRow}
+              markRequiredField={this.props.markRequiredField}
             />
             <Button
               value="Add"