indicate new row (#338)

* indicate new row

* add focus in field text

* minimal changes.

* delete unused method.

* scrollTop to new record table children

* minimal changes

* change color of new cell

Co-authored-by: Edwin Betancourt <EdwinBetanc0urt@hotmail.com>

src/components/ADempiere/DataTable/index.vue

@@ -149,6 +149,7 @@
             element-loading-spinner="el-icon-loading"
             cell-class-name="datatable-max-cell-height"
             :show-summary="getterPanel.isShowedTotals"
+            :row-class-name="tableRowClassName"
             :summary-method="getSummaries"
             @row-click="handleRowClick"
             @row-dblclick="handleRowDblClick"
@@ -715,6 +716,12 @@ export default {
     callOffNewRecord() {
       this.getterDataRecords.shift()
     },
+    tableRowClassName({ row, rowIndex }) {
+      if (row.isNew) {
+        return 'warning-row'
+      }
+      return ''
+    },
     addNewRow() {
       if (this.getterNewRecords <= 0) {
         this.$store.dispatch('addNewRow', {
@@ -724,6 +731,7 @@ export default {
           isEdit: true,
           isSendServer: false
         })
+        this.$refs.multipleTable.$refs.bodyWrapper.scrollTop = 0
       } else {
         const fieldsEmpty = this.$store.getters.getFieldListEmptyMandatory({
           containerUuid: this.containerUuid
@@ -734,6 +742,20 @@ export default {
         })
       }
     },
+    async setFocus() {
+      return new Promise(resolve => {
+        const fieldFocus = this.fieldList.find(itemField => {
+          if (this.$refs.hasOwnProperty(itemField.columnName)) {
+            if (fieldIsDisplayed(itemField) && !itemField.isReadOnly && itemField.isUpdateable) {
+              return true
+            }
+          }
+        })
+        this.$refs[fieldFocus.columnName][0].focusField()
+        resolve()
+        return
+      })
+    },
     async getList() {
       this.oldgetDataDetail = this.getterDataRecords.map(v => v.id)
       this.newgetDataDetail = this.oldgetDataDetail.slice()
@@ -1042,6 +1064,13 @@ export default {
   }
 </style>
 <style>
+  .el-table .warning-row {
+    background: rgba(104, 245, 203, 0.712);
+  }
+
+  .el-table .success-row {
+    background: #f0f9eb;
+  }
   .el-table > .cell {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;

src/components/ADempiere/Field/FieldMixin.js

@@ -22,6 +22,7 @@ export const fieldMixin = {
     }
   },
   computed: {
+    /*
     getterValue() {
       const field = this.$store.getters.getFieldFromColumnName({
         containerUuid: this.metadata.containerUuid,
@@ -33,15 +34,14 @@ export const fieldMixin = {
       }
       return undefined
     },
+    */
     isDisabled() {
       return Boolean(this.metadata.readonly || this.metadata.disabled)
     }
   },
   methods: {
     activeFocus() {
-      if (this.metadata.isUpdateable) {
       this.$refs[this.metadata.columnName].focus()
-      }
     },
     /**
      * Overwrite component method if necessary

src/components/ADempiere/Field/FieldText.vue

@@ -10,6 +10,7 @@
     :disabled="isDisabled"
     :maxlength="maxLength"
     :show-password="Boolean(metadata.isEncrypted)"
+    :autofocus="metadata.inTable"
     @change="preHandleChange"
   />
 </template>

src/components/ADempiere/Field/index.vue

@@ -420,9 +420,9 @@ export default {
       })
       return Boolean(field)
     },
-    focus(columnName) {
+    focusField() {
       if (this.isDisplayed() && this.isMandatory() && !this.isReadOnly()) {
-        this.$refs[columnName].activeFocus(columnName)
+        this.$refs[this.field.columnName].activeFocus()
       }
     },
     redirect({ window, columnName, value }) {

src/components/ADempiere/Panel/index.vue

@@ -664,23 +664,21 @@ export default {
       this.setTagsViewTitle(uuidRecord)
       this.setFocus()
     },
-    setFocus() {
-      let isFocusEnabled = false
-      this.getterFieldList.forEach(fieldItem => {
-        if (!isFocusEnabled) {
-          if (this.isFocusable(fieldItem) && this.$refs.hasOwnProperty(fieldItem.columnName)) {
-            this.$refs[fieldItem.columnName][0].focus(fieldItem.columnName)
-            isFocusEnabled = true
-          }
-        }
-        return
-      })
-    },
-    isFocusable(field) {
-      if (fieldIsDisplayed(field) && !field.isReadOnly && field.isUpdateable) {
+    async setFocus() {
+      return new Promise(resolve => {
+        const fieldFocus = this.getterFieldList.find(itemField => {
+          if (this.$refs.hasOwnProperty(itemField.columnName)) {
+            if (fieldIsDisplayed(itemField) && !itemField.isReadOnly && itemField.isUpdateable) {
               return true
             }
-      return false
+          }
+        })
+        if (fieldFocus) {
+          this.$refs[fieldFocus.columnName][0].focusField()
+        }
+        resolve()
+        return
+      })
     }
   }
 }