added required placehlder text for edit clone rows

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, markRequiredField } = this.props;
+    let { type, value, hidden, width, current, onSelect, onEditChange, setCopyableValue, setRelation, onPointerClick, row, col, field, onEditSelectedRow, readonly, isRequired, markRequiredFieldRow } = this.props;
     let content = value;
     let isNewRow = row < 0;
     this.copyableValue = content;
@@ -331,7 +331,7 @@ export default class BrowserCell extends Component {
       classes.push(styles.current);
     }
 
-    if (markRequiredField && isRequired && !value) {
+    if (markRequiredFieldRow === row && isRequired && !value) {
       classes.push(styles.required);
     }
 

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

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

@@ -81,7 +81,7 @@ class Browser extends DashboardView {
       isUnique: false,
       uniqueField: null,
       keepAddingCols: false,
-      markRequiredField: false,
+      markRequiredFieldRow: 0,
       requiredColumnFields: []
     };
 
@@ -387,15 +387,15 @@ class Browser extends DashboardView {
         if (!obj.get(name)) {
           this.showNote("Please enter all required fields", true);
           this.setState({
-            markRequiredField: true
+            markRequiredFieldRow: -1
           });
           return;
         }
       }
     }
     if (this.state.markRequiredField) {
       this.setState({
-        markRequiredField: false
+        markRequiredFieldRow: 0
       });
     }
     obj.save(null, { useMasterKey: true }).then(
@@ -462,6 +462,47 @@ class Browser extends DashboardView {
     if (!obj) {
       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({
+            markRequiredFieldRow: rowIndex
+          });
+          return;
+        }
+      }
+    }
+    if (this.state.markRequiredField) {
+      this.setState({
+        markRequiredFieldRow: 0
+      });
+    }
+
     obj.save(null, { useMasterKey: true }).then((objectSaved) => {
       let msg = objectSaved.className + ' with id \'' + objectSaved.id + '\' ' + 'created';
       this.showNote(msg, false);
@@ -816,7 +857,7 @@ class Browser extends DashboardView {
       obj.set(attr, value);
     }
 
-    if (isNewObject) {
+    if (isNewObject || isEditCloneObj) {
       // for dynamically changing required placeholder text for _User class new row object
       if (obj.className === '_User' && attr === 'authData' && value !== undefined) {
         // username & password are not required
@@ -1175,6 +1216,7 @@ class Browser extends DashboardView {
             }
           });
         }
+        this.setRequiredColumnFields();
         this.addEditCloneRows(failedSaveObj);
       }
       this.setState({
@@ -1366,7 +1408,7 @@ class Browser extends DashboardView {
             onAbortEditCloneRow={this.abortEditCloneRow}
             onCancelPendingEditRows={this.cancelPendingEditRows}
 
-            markRequiredField={this.state.markRequiredField}
+            markRequiredFieldRow={this.state.markRequiredFieldRow}
             requiredColumnFields={this.state.requiredColumnFields}
             columns={columns}
             className={className}

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

@@ -152,6 +152,8 @@ export default class BrowserTable extends React.Component {
                     setCopyableValue={this.props.setCopyableValue}
                     setContextMenu={this.props.setContextMenu}
                     onEditSelectedRow={this.props.onEditSelectedRow}
+                    markRequiredFieldRow={this.props.markRequiredFieldRow}
+                    requiredColumnFields={this.props.requiredColumnFields}
                   />
                   <Button
                     value="Clone"
@@ -201,7 +203,7 @@ export default class BrowserTable extends React.Component {
               setCopyableValue={this.props.setCopyableValue}
               setContextMenu={this.props.setContextMenu}
               onEditSelectedRow={this.props.onEditSelectedRow}
-              markRequiredField={this.props.markRequiredField}
+              markRequiredFieldRow={this.props.markRequiredFieldRow}
               requiredColumnFields={this.props.requiredColumnFields}
             />
             <Button