feat: Edit records in table

src/components/ADempiere/DefaultTable/CellInfo.vue

@@ -17,17 +17,35 @@
 -->
 
 <template>
-  <document-status-tag
-    v-if="fieldAttributes.isColumnDocumentStatus"
-    key="document-status"
-    size="small"
-    :value="fieldValue"
-    :displayed-value="displayedValue"
-  />
+  <span v-if="isRowCanBeEdited(dataRow)" key="field-component">
+    <field-definition
+      key="field-definition"
+      :container-uuid="containerUuid"
+      :container-manager="containerManager"
+      :is-data-table="true"
+      :is-show-label="false"
+      :in-table="true"
+      :metadata-field="{
+        ...fieldAttributes,
+        rowIndex: scope.$index,
+        recordUuid: dataRow.UUID
+      }"
+      size="mini"
+    />
+  </span>
 
   <span v-else key="info-value">
+    <document-status-tag
+      v-if="fieldAttributes.isColumnDocumentStatus"
+      key="document-status"
+      size="small"
+      :value="fieldValue"
+      :displayed-value="displayedValue"
+    />
+
     <p
-      v-if="!isEmptyValue(displayedValue) && displayedValue.length >= 23"
+      v-else-if="!isEmptyValue(displayedValue) && displayedValue.length >= 23"
+      key="display-column"
       style="max-height: 40px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
     >
       <el-popover
@@ -49,7 +67,7 @@
       </el-popover>
     </p>
 
-    <p v-else>
+    <p v-else key="only-value">
       {{ displayedValue }}
     </p>
   </span>
@@ -60,6 +78,7 @@ import { defineComponent, computed } from '@vue/composition-api'
 
 // components and mixins
 import DocumentStatusTag from '@/components/ADempiere/ContainerOptions/DocumentStatusTag/index.vue'
+import FieldDefinition from '@/components/ADempiere/Field/index.vue'
 
 // utils and helpers methods
 import { typeValue } from '@/utils/ADempiere/valueUtils.js'
@@ -75,14 +94,27 @@ export default defineComponent({
   name: 'CellInfo',
 
   components: {
-    DocumentStatusTag
+    DocumentStatusTag,
+    FieldDefinition
   },
 
   props: {
+    containerUuid: {
+      type: String,
+      required: true
+    },
     fieldAttributes: {
       type: Object,
       required: true
     },
+    containerManager: {
+      type: Object,
+      required: true
+    },
+    scope: {
+      type: Object,
+      default: () => {}
+    },
     dataRow: {
       type: Object,
       default: () => {}
@@ -100,6 +132,13 @@ export default defineComponent({
       return formatValue(props.dataRow, props.fieldAttributes)
     })
 
+    const isReadOnly = computed(() => {
+      return props.containerManager.isReadOnlyColumn({
+        field: props.fieldAttributes,
+        row: props.dataRow
+      })
+    })
+
     const formatNumber = ({ displayType, value }) => {
       if (root.isEmptyValue(value)) {
         value = 0
@@ -163,10 +202,20 @@ export default defineComponent({
       return valueToShow
     }
 
+    function isRowCanBeEdited(record) {
+      if (!isReadOnly.value && record.isEditRow) {
+        return true
+      }
+
+      return false
+    }
+
     return {
       // computeds
       fieldValue,
-      displayedValue
+      displayedValue,
+      // methods
+      isRowCanBeEdited
     }
   }
 })

src/components/ADempiere/DefaultTable/index.vue

@@ -75,7 +75,10 @@
           <template slot-scope="scope">
             <!-- formatted displayed value -->
             <cell-info
+              :container-uuid="containerUuid"
               :field-attributes="fieldAttributes"
+              :container-manager="containerManager"
+              :scope="scope"
               :data-row="scope.row"
             />
           </template>
@@ -194,6 +197,10 @@ export default defineComponent({
         row,
         tableName: props.panelMetadata.tableName
       })
+
+      if (!row.isEditRow) {
+        row.isEditRow = true
+      }
     }
 
     function headerLabel(field) {

src/components/ADempiere/Field/FieldDate.vue

@@ -196,6 +196,16 @@ export default {
 
         // table records values
         if (this.metadata.inTable) {
+          // implement container manager row
+          if (this.containerManager && this.containerManager.getRow) {
+            const row = this.containerManager.getRow({
+              containerUuid: this.metadata.containerUuid,
+              rowIndex: this.metadata.rowIndex
+            })
+
+            return row[columnName]
+          }
+
           const row = this.$store.getters.getRowData({
             containerUuid,
             index: this.metadata.tableIndex

src/components/ADempiere/Field/FieldSelect.vue

@@ -148,6 +148,15 @@ export default {
         const { columnName, containerUuid } = this.metadata
         // table records values
         if (this.metadata.inTable) {
+          // implement container manager row
+          if (this.containerManager && this.containerManager.getRow) {
+            const row = this.containerManager.getRow({
+              containerUuid,
+              rowIndex: this.metadata.rowIndex
+            })
+            return row[columnName]
+          }
+
           const row = this.$store.getters.getRowData({
             containerUuid,
             index: this.metadata.tableIndex
@@ -204,6 +213,15 @@ export default {
         const { displayColumnName: columnName, containerUuid } = this.metadata
         // table records values
         if (this.metadata.inTable) {
+          // implement container manager row
+          if (this.containerManager && this.containerManager.getRow) {
+            const row = this.containerManager.getRow({
+              containerUuid,
+              rowIndex: this.metadata.rowIndex
+            })
+            return row[columnName]
+          }
+
           const row = this.$store.getters.getRowData({
             containerUuid,
             index: this.metadata.tableIndex

src/components/ADempiere/Field/index.vue

@@ -17,9 +17,22 @@
 -->
 
 <template>
-  <div v-if="isDisplayedField" class="field-definition">
+  <div class="field-definition">
+    <component
+      :is="componentRender"
+      v-if="inTable"
+      :id="field.panelType !== 'form' ? field.columnName : ''"
+      key="is-table-template"
+      :class="classField"
+      :parent-uuid="parentUuid"
+      :container-uuid="containerUuid"
+      :container-manager="containerManager"
+      :metadata="fieldAttributes"
+      :in-table="true"
+    />
+
     <el-col
-      v-if="!inTable"
+      v-else-if="!inTable && isDisplayedField"
       key="is-panel-template"
       :xs="sizeField.xs"
       :sm="sizeField.sm"
@@ -44,27 +57,10 @@
           :parent-uuid="parentUuid"
           :container-uuid="containerUuid"
           :container-manager="containerManager"
-          :field-metadata="fieldAttributes"
           :metadata="fieldAttributes"
-          :value-model="recordDataFields"
         />
       </el-form-item>
     </el-col>
-
-    <component
-      :is="componentRender"
-      v-else
-      :id="field.panelType !== 'form' ? field.columnName : ''"
-      key="is-table-template"
-      :class="classField"
-      :parent-uuid="parentUuid"
-      :container-uuid="containerUuid"
-      :container-manager="containerManager"
-      :field-metadata="fieldAttributes"
-      :metadata="fieldAttributes"
-      :value-model="recordDataFields"
-      :in-table="true"
-    />
   </div>
 </template>
 
@@ -106,18 +102,10 @@ export default {
       required: true
     },
     // receives the property that is an object with all the attributes
-    fieldMetadata: {
-      type: Object,
-      default: () => ({})
-    },
     metadataField: {
       type: Object,
       default: () => ({})
     },
-    recordDataFields: {
-      type: [Number, String, Boolean, Array, Object, Date],
-      default: undefined
-    },
     inGroup: {
       type: Boolean,
       default: false
@@ -131,11 +119,13 @@ export default {
       default: false
     }
   },
+
   data() {
     return {
       field: {}
     }
   },
+
   computed: {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
@@ -238,6 +228,12 @@ export default {
      * Idicate if field is read only
      */
     isReadOnlyField() {
+      if (this.inTable) {
+        // table manage with isReadOnlyColumn method
+        // if rendered the component is editable
+        return false
+      }
+
       // TODO: Add validate method to record uuid uuid without route.action
       // edit mode is diferent to create new
       const isWithRecord = this.recordUuid !== 'create-new' &&
@@ -246,7 +242,6 @@ export default {
       // validate with container manager
       return this.containerManager.isReadOnlyField({
         field: this.field,
-        preferenceClientId: this.preferenceClientId,
         // record values
         clientId: this.containerClientId,
         isActive: this.containerIsActive,
@@ -304,9 +299,6 @@ export default {
         columnName: CLIENT
       })
     },
-    preferenceClientId() {
-      return this.$store.getters.getPreferenceClientId
-    },
 
     isFieldOnly() {
       if (this.inTable || this.field.isFieldOnly) {
@@ -329,11 +321,13 @@ export default {
       return ''
     }
   },
+
   watch: {
     metadataField(value) {
       this.field = value
     }
   },
+
   created() {
     // assined field with prop
     this.field = this.metadataField
@@ -355,6 +349,7 @@ export default {
       }
     }
   },
+
   methods: {
     focusField() {
       if (this.field.handleRequestFocus || (this.field.displayed && !this.field.readonly)) {

src/components/ADempiere/Field/mixin/mixinField.js

@@ -30,18 +30,9 @@ export default {
       type: Object,
       required: true
     },
-    fieldMetadata: {
-      type: Object,
-      required: true
-    },
     metadata: {
       type: Object,
       required: true
-    },
-    // value received from data result
-    valueModel: {
-      type: [String, Number, Boolean, Date, Array, Object],
-      default: null
     }
   },
 
@@ -73,6 +64,16 @@ export default {
 
         // table records values
         if (this.metadata.inTable) {
+          // implement container manager row
+          if (this.containerManager && this.containerManager.getRow) {
+            const row = this.containerManager.getRow({
+              containerUuid: this.metadata.containerUuid,
+              rowIndex: this.metadata.rowIndex
+            })
+
+            return row[columnName]
+          }
+
           const row = this.$store.getters.getRowData({
             containerUuid,
             index: this.metadata.tableIndex