feat: Add default table to replace data table. (#942)

* feat: Add default table to replace data table.

* fix eslint

* use formatPrice and formatQuantity

src/components/ADempiere/DefaultTable/CellInfo.vue

@@ -0,0 +1,126 @@
+<template>
+  <el-tag
+    v-if="isDocumentStatus"
+    key="document-status"
+    :type="documentStatus"
+    disable-transitions
+  >
+    {{ displayedValue }}
+  </el-tag>
+
+  <span v-else key="info-value">
+    {{ displayedValue }}
+  </span>
+</template>
+
+<script>
+import { defineComponent, computed } from '@vue/composition-api'
+
+import { COLUMNS_NAME_DOCUMENT_STATUS, FIELDS_CURRENCY } from '@/utils/ADempiere/references.js'
+import { typeValue } from '@/utils/ADempiere/valueUtils.js'
+import {
+  formatField, formatPrice, formatQuantity, convertBooleanToTranslationLang
+} from '@/utils/ADempiere/valueFormat.js'
+
+export default defineComponent({
+  name: 'CellInfo',
+
+  props: {
+    fieldAttributes: {
+      type: Object,
+      required: true
+    },
+    dataRow: {
+      type: Object,
+      default: () => {}
+    }
+  },
+
+  setup(props, { root }) {
+    const { columnName } = props.fieldAttributes
+    const fieldValue = props.dataRow[columnName]
+
+    const isDocumentStatus = computed(() => {
+      return COLUMNS_NAME_DOCUMENT_STATUS.includes(columnName)
+    })
+
+    const displayedValue = computed(() => {
+      return formatValue(props.dataRow, props.fieldAttributes)
+    })
+
+    const documentStatus = computed(() => {
+      return root.tagStatus(fieldValue)
+    })
+
+    const formatNumber = ({ displayType, value }) => {
+      if (root.isEmptyValue(value)) {
+        value = 0
+      }
+      // Amount, Costs+Prices
+      if (FIELDS_CURRENCY.includes(displayType)) {
+        return formatPrice(value)
+      }
+      return formatQuantity(value)
+    }
+
+    /**
+     * @param {object} row, row data
+     * @param {object} field, field with attributes
+     */
+    const formatValue = (row, field) => {
+      const { componentPath, displayColumnName, displayType } = field
+
+      let valueToShow
+      switch (componentPath) {
+        case 'FieldDate':
+        case 'FieldTime': {
+          let cell = fieldValue
+          if (typeValue(cell) === 'DATE') {
+            cell = cell.getTime()
+          }
+          // replace number timestamp value for date
+          valueToShow = formatField(cell, displayType)
+          break
+        }
+
+        case 'FieldNumber':
+          if (root.isEmptyValue(fieldValue)) {
+            valueToShow = undefined
+            break
+          }
+          valueToShow = formatNumber({
+            displayType,
+            value: fieldValue
+          })
+          break
+
+        case 'FieldSelect':
+          valueToShow = row[displayColumnName]
+          if (root.isEmptyValue(valueToShow) && fieldValue === 0) {
+            valueToShow = field.defaultValue
+            break
+          }
+          break
+
+        case 'FieldYesNo':
+          // replace boolean true-false value for 'Yes' or 'Not' ('Si' or 'No' for spanish)
+          valueToShow = convertBooleanToTranslationLang(fieldValue)
+          break
+
+        default:
+          valueToShow = fieldValue
+          break
+      }
+
+      return valueToShow
+    }
+
+    return {
+      // computeds
+      isDocumentStatus,
+      documentStatus,
+      displayedValue
+    }
+  }
+})
+</script>

src/components/ADempiere/DefaultTable/index.vue

@@ -0,0 +1,179 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.com www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https:www.gnu.org/licenses/>.
+-->
+
+<template>
+  <el-main style="padding: 0px !important; overflow: hidden;">
+    <el-table
+      ref="multipleTable"
+      style="width: 100%"
+      border
+      :row-key="keyColumn"
+      reserve-selection
+      highlight-current-row
+      :data="[]"
+      :element-loading-text="$t('notifications.loading')"
+      element-loading-background="rgba(255, 255, 255, 0.8)"
+      @row-click="handleRowClick"
+    >
+      <!-- column with the checkbox -->
+      <el-table-column
+        type="selection"
+        :prop="keyColumn"
+        fixed
+        min-width="50"
+      />
+
+      <template v-for="(fieldAttributes, key) in fieldsList">
+        <el-table-column
+          v-if="isDisplayed(fieldAttributes)"
+          :key="key"
+          :label="headerLabel(fieldAttributes)"
+          :column-key="fieldAttributes.columnName"
+          :prop="fieldAttributes.columnName"
+          sortable
+          min-width="200"
+          :fixed="fieldAttributes.isFixedTableColumn"
+        >
+          <template slot-scope="scope">
+            <!-- formatted displayed value -->
+            <cell-info
+              :field-attributes="fieldAttributes"
+              :data-row="scope.row"
+            />
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <!-- pagination table, set custom or use default change page method -->
+    <custom-pagination
+      :total="0"
+      :current-page="1"
+      :selection="0"
+      :handle-change-page="handleChangePage"
+    />
+  </el-main>
+</template>
+
+<script>
+import { defineComponent, computed } from '@vue/composition-api'
+
+import FieldDefinition from '@/components/ADempiere/Field'
+import CellInfo from './CellInfo'
+import CustomPagination from '@/components/ADempiere/Pagination'
+import { fieldIsDisplayed } from '@/utils/ADempiere/dictionaryUtils'
+
+export default defineComponent({
+  name: 'DefaultTable',
+
+  components: {
+    CellInfo,
+    CustomPagination,
+    FieldDefinition
+  },
+
+  props: {
+    parentUuid: {
+      type: String,
+      default: undefined
+    },
+    containerUuid: {
+      type: String,
+      required: true
+    }
+  },
+
+  setup(props, { root }) {
+    const panelMetadata = computed(() => {
+      return root.$store.getters.getPanel(props.containerUuid)
+    })
+
+    const keyColumn = computed(() => {
+      if (panelMetadata.value) {
+        return panelMetadata.value.keyColumn
+      }
+    })
+
+    const fieldsList = computed(() => {
+      const panel = panelMetadata.value
+      if (panel && panel.fieldsList) {
+        return panel.fieldsList
+      }
+      return []
+    })
+
+    const handleRowClick = (row, column, event) => {
+      // this.currentTable = this.recordsData.findIndex(item => item.UUID === row.UUID)
+      // if (this.uuidCurrentRecordSelected !== row.UUID) {
+      //   this.uuidCurrentRecordSelected = row.UUID
+      //   // disabled rollback when change route
+      //   // root.$store.dispatch('setDataLog', {})
+      // }
+      const tableName = panelMetadata.value.tableName
+      // TODO: Replace with general dispatch to set current record
+      root.$router.push({
+        name: root.$route.name,
+        query: {
+          ...root.$route.query,
+          action: row.UUID
+        },
+        params: {
+          ...root.$router.params,
+          tableName,
+          recordId: row[`${tableName}_ID`]
+        }
+      }, () => {})
+      // root.$store.commit('setCurrentRecord', row)
+    }
+
+    const headerLabel = (field) => {
+      if (field.isMandatory || field.isMandatoryFromLogic) {
+        return '* ' + field.name
+      }
+
+      return field.name
+    }
+
+    /**
+     * Verify is displayed column/field in table
+     */
+    const isDisplayed = (field) => {
+      return fieldIsDisplayed(field, true)
+    }
+
+    /**
+     * custom method to handle change page
+     */
+    const handleChangePage = () => {
+      return
+    }
+
+    return {
+      // computeds
+      keyColumn,
+      panelMetadata,
+      fieldsList,
+      // methods
+      headerLabel,
+      handleChangePage,
+      handleRowClick,
+      isDisplayed
+    }
+  }
+})
+</script>

src/utils/ADempiere/references.js

@@ -626,6 +626,11 @@ export const COLUMNS_NAME_READ_ONLY = [
   COLUMN_PROCESSING.columnName
 ]
 
+export const COLUMNS_NAME_DOCUMENT_STATUS = [
+  'DocStatus',
+  'O_DocStatus'
+]
+
 /**
  * Fields with this column name, changed all fields is read only
  */

src/views/ADempiere/BrowserView/index.vue

@@ -58,10 +58,9 @@
         </el-collapse-item>
       </el-collapse>
 
-      <data-table
+      <!-- result of records in the table -->
+      <default-table
         :container-uuid="browserUuid"
-        :panel-type="panelType"
-        :metadata="browserMetadata"
       />
     </el-main>
   </el-container>
@@ -83,14 +82,14 @@ import ContextMenu from '@/components/ADempiere/ContextMenu'
 import ModalDialog from '@/components/ADempiere/Dialog'
 import TitleAndHelp from '@/components/ADempiere/TitleAndHelp'
 import PanelDefinition from '@/components/ADempiere/PanelDefinition'
-import DataTable from '@/components/ADempiere/DataTable'
+import DefaultTable from '@/components/ADempiere/DefaultTable'
 
 export default defineComponent({
   name: 'BrowserView',
 
   components: {
     ContextMenu,
-    DataTable,
+    DefaultTable,
     ModalDialog,
     PanelDefinition,
     TitleAndHelp