fix: Show/hidden totals in table. (#254)

src/components/ADempiere/DataTable/index.vue

@@ -6,8 +6,8 @@
           <el-collapse
             v-if="isParent && isAdvancedQuery"
             v-show="isAdvancedQuery"
-            v-model="activeNames"
+            v-model="activeName"
-            v-shortkey="{f6: ['f6'], ctrlf: ['ctrl', 'f']}"
+            v-shortkey="{ f6: ['f6'], ctrlf: ['ctrl', 'f'] }"
             @shortkey.native="actionAdvancedQuery()"
           >
             <el-collapse-item :title="$t('table.dataTable.advancedQuery')" name="1">
@@ -29,9 +29,9 @@
                 :panel-type="panelType"
                 :is-parent="isParent"
                 :is-panel-window="isPanelWindow"
-                :is-process-menu="getterContextMenu"
+                :process-menu="getterContextMenu"
                 :is-mobile="isMobile"
-                :is-panel="getterPanel"
+                :panel-metadata="getterPanel"
               />
               <el-button
                 v-if="!isParent && isPanelWindow"
@@ -54,7 +54,7 @@
                 :panel-type="panelType"
                 class="field-optional"
               />
-              <div :class="{ 'show': showTableSearch }" class="table-search">
+              <div :class="{ show: showTableSearch }" class="table-search">
                 <svg-icon class-name="search-icon" icon-class="search" @click.stop="click()" />
                 <el-input
                   ref="headerSearchSelect"
@@ -78,7 +78,7 @@
                   :panel-type="panelType"
                   class="field-optional"
                 />
-                <div :class="{ 'show' :showTableSearch }" class="table-search">
+                <div :class="{ show: showTableSearch }" class="table-search">
                   <svg-icon class-name="search-icon" icon-class="search" @click.stop="click()" />
                   <el-input
                     ref="headerSearchSelect"
@@ -91,7 +91,7 @@
                 </div>
               </div>
               <div v-else class="panel-expand">
-                <div :class="{ 'show': showTableSearch }" class="table-search">
+                <div :class="{ show: showTableSearch }" class="table-search">
                   <svg-icon class-name="search-icon" icon-class="search" @click.stop="click()" />
                   <el-input
                     ref="headerSearchSelect"
@@ -122,37 +122,22 @@
         </el-header>
         <el-main style="padding: 0px !important; overflow: hidden;">
           <context-menu
-            v-if="isParent"
+            v-show="isParent ? getShowContextMenuTable : getShowContextMenuTabChildren"
-            v-show="getShowContextMenuTable"
+            :style="{ left: left + 'px', top: top + 'px' }"
-            :style="{left:left+'px',top:top+'px'}"
             class="contextmenu"
             :container-uuid="containerUuid"
             :parent-uuid="parentUuid"
             :panel-type="panelType"
             :is-option="isOption"
             :is-panel-window="isPanelWindow"
-            :is-process-menu="getterContextMenu"
+            :process-menu="getterContextMenu"
             :is-mobile="isMobile"
-            :is-panel="getterPanel"
+            :panel-metadata="getterPanel"
-          />
-          <context-menu
-            v-if="!isParent"
-            v-show="getShowContextMenuTabChildren"
-            :style="{left:left+'px',top:top+'px'}"
-            class="contextmenu"
-            :container-uuid="containerUuid"
-            :parent-uuid="parentUuid"
-            :panel-type="panelType"
-            :is-option="isOption"
-            :is-panel-window="isPanelWindow"
-            :is-process-menu="getterContextMenu"
-            :is-mobile="isMobile"
-            :is-panel="getterPanel"
           />
           <el-table
             ref="multipleTable"
             v-loading="$route.query.action !== 'create-new' && isLoaded"
-            v-shortkey="{up: ['arrowup'], down: ['arrowdown'], left: ['arrowleft'], right: ['arrowright']}"
+            v-shortkey="{ up: ['arrowup'], down: ['arrowdown'], left: ['arrowleft'], right: ['arrowright'] }"
             :height="getHeigthTable"
             style="width: 100%"
             border
@@ -238,21 +223,21 @@
       </el-container>
     </el-main>
     <el-footer style="height: 30px;">
-      <div>
+      <div style="float: right;">
-        <div style="float: right;">
+        <el-pagination
-          <el-pagination
+          small
-            small
+          layout="slot, total, prev, pager, next"
-            layout="slot, total, prev, pager, next"
+          :current-page="currentPage"
-            :current-page="currentPage"
+          :page-size="defaultMaxPagination"
-            :page-size="defaultMaxPagination"
+          :total="getterRecordCount"
-            :total="getterRecordCount"
+          @current-change="handleChangePage"
-            @current-change="handleChangePage"
+        >
-          >
+          <template v-slot>
-            <template v-slot>
+            <span>
-              <span>{{ $t('table.dataTable.selected') }}: {{ getDataSelection.length }} / </span>
+              {{ $t('table.dataTable.selected') }}: {{ getDataSelection.length }} /
-            </template>
+            </span>
-          </el-pagination>
+          </template>
-        </div>
+        </el-pagination>
       </div>
     </el-footer>
   </el-container>
@@ -268,10 +253,9 @@ import TableMenu from '@/components/ADempiere/DataTable/menu'
 import IconElement from '@/components/ADempiere/IconElement'
 import { formatDate } from '@/filters/ADempiere'
 import MainPanel from '@/components/ADempiere/Panel'
-import { sortFields } from '@/utils/ADempiere'
+import { sortFields } from '@/utils/ADempiere/dictionaryUtils'
-import { FIELD_READ_ONLY_FORM } from '@/components/ADempiere/Field/references'
+import { FIELDS_FLOATS, FIELDS_QUANTITY, FIELD_READ_ONLY_FORM } from '@/components/ADempiere/Field/references'
 import { fieldIsDisplayed } from '@/utils/ADempiere'
-import { supportedTypes, exportFileFromJson, exportFileZip } from '@/utils/ADempiere/exportUtil'
 import evaluator from '@/utils/ADempiere/evaluator'
 
 export default {
@@ -324,21 +308,18 @@ export default {
       top: 0,
       left: 0,
       isOption: {},
-      activeNames: ['0'],
       focusTable: false,
       currentRow: null,
       currentTable: 0,
       visible: this.getShowContextMenuTable,
       searchTable: '', // text from search
       defaultMaxPagination: 50,
-      option: supportedTypes,
       menuTable: '1',
-      activeName: this.$route.query.action === 'advancedQuery' ? '1' : '',
+      activeName: this.$route.query.action === 'advancedQuery' ? ['1'] : [],
       isFixed: false,
       isLoadPanelFromServer: false,
       rowStyle: { height: '52px' },
       sortable: null,
-      isExpand: false,
       currentPage: 1,
       uuidCurrentRecordSelected: '',
       showTableSearch: false,
@@ -347,7 +328,7 @@ export default {
   },
   computed: {
     getterContextMenu() {
-      var process = this.$store.getters.getContextMenu(this.containerUuid).actions
+      const process = this.$store.getters.getContextMenu(this.containerUuid).actions
       if (process) {
         return process.filter(menu => {
           if (menu.type === 'process') {
@@ -366,42 +347,9 @@ export default {
     getterFieldList() {
       return this.$store.getters.getFieldsListFromPanel(this.containerUuid)
     },
-    getterFieldListHeader() {
-      return this.getterFieldList.filter(fieldItem => {
-        const isDisplayed = fieldItem.isDisplayed || fieldItem.isDisplayedFromLogic
-        if (fieldItem.isActive && isDisplayed && !fieldItem.isKey) {
-          return fieldItem.name
-        }
-      }).map(fieldItem => {
-        return fieldItem.name
-      })
-    },
-    getterFieldListValue() {
-      var value = this.getterFieldList.filter(fieldItem => {
-        const isDisplayed = fieldItem.isDisplayed || fieldItem.isDisplayedFromLogic
-        if (fieldItem.isActive && isDisplayed && !fieldItem.isKey) {
-          return fieldItem
-        }
-      })
-      return value.map(fieldItem => {
-        if (fieldItem.componentPath === 'FieldSelect') {
-          return 'DisplayColumn_' + fieldItem.columnName
-        } else {
-          return fieldItem.columnName
-        }
-      })
-    },
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
-    classTableMenu() {
-      if (this.isMobile) {
-        return 'menu-table-mobile'
-      } else if (this.$store.state.app.sidebar.opened) {
-        return 'menu-table'
-      }
-      return 'menu-table'
-    },
     getterPanel() {
       return this.$store.getters.getPanel(this.containerUuid)
     },
@@ -419,7 +367,7 @@ export default {
     },
     getterNewRecords() {
       if (this.isPanelWindow && !this.isParent) {
-        var newRecordTable = this.getterDataRecordsAndSelection.record.filter(recordItem => {
+        const newRecordTable = this.getterDataRecordsAndSelection.record.filter(recordItem => {
           return recordItem.isNew
         })
         return newRecordTable.length
@@ -439,7 +387,7 @@ export default {
       return this.$store.getters.getFieldsIsDisplayed(this.containerUuid)
     },
     getterIsShowedCriteria() {
-      var browser = this.$store.getters.getBrowser(this.containerUuid)
+      const browser = this.$store.getters.getBrowser(this.containerUuid)
       if (browser) {
         return browser.isShowedCriteria
       }
@@ -469,35 +417,38 @@ export default {
       }
     },
     getHeigthTable() {
+      let totalRow = 0
+      if (this.getterPanel.isShowedTotals) {
+        totalRow = 27
+      }
+
       if (this.isPanelWindow) {
         // table record navigation
         if (this.isParent) {
           if (this.isAdvancedQuery) {
             if (this.isEmptyValue(this.activeName)) {
-              return this.getterHeight - 220
+              return this.getterHeight - 220 - totalRow
-            } else {
-              return this.getterHeight - 420
             }
-          } else {
+            return this.getterHeight - 420 - totalRow
-            return this.getterHeight - 180
           }
+          return this.getterHeight - 180 - totalRow
         }
-        if (!this.isExpand) {
+        if (!this.activeName.length) {
-          return this.getHeightPanelBottom + 'vh'
+          return (this.getHeightPanelBottom - 7) + 'vh'
         }
-        return this.getterHeight - 220
+        return this.getterHeight - 220 - totalRow
       } else if (this.panelType === 'browser') {
         // open browser criteria
         if (this.getterIsShowedCriteria) {
           // showed some field query criteria
           if (this.getterFieldIsDisplayed.isDisplayed) {
-            return this.getterHeight - 495
+            return this.getterHeight - 495 - totalRow
           }
-          return this.getterHeight - 415
+          return this.getterHeight - 415 - totalRow
         }
-        return this.getterHeight - 290
+        return this.getterHeight - 290 - totalRow
       }
-      return this.getterHeight - 300
+      return this.getterHeight - 300 - totalRow
     },
     fieldList() {
       if (this.getterPanel && this.getterPanel.fieldList) {
@@ -588,10 +539,10 @@ export default {
   },
   methods: {
     actionAdvancedQuery() {
-      if (this.activeNames < 1) {
+      if (this.activeName.length) {
-        this.activeNames = '1'
+        this.activeName = []
       } else {
-        this.activeNames = '0'
+        this.activeName = ['1']
       }
     },
     setCurrent(row) {
@@ -638,81 +589,29 @@ export default {
       const maxLeft = offsetWidth - menuMinWidth // left boundary
       const left = event.clientX - offsetLeft + 15 // 15: margin right
 
+      this.left = left
       if (left > maxLeft) {
         this.left = maxLeft
-      } else {
-        this.left = left
       }
+
+      this.top = event.clientY - event.screenY
       if (this.isParent) {
         this.top = event.clientY - 100
-        this.isOption = row
-        this.visible = true
-        this.$store.dispatch('showMenuTable', {
-          isShowedTable: true
-        })
-        this.$store.dispatch('showMenuTabChildren', {
-          isShowedTabChildren: false
-        })
-      } else {
-        this.top = event.clientY - event.screenY
-        this.isOption = row
-        this.visible = true
-        this.$store.dispatch('showMenuTabChildren', {
-          isShowedTabChildren: true
-        })
-        this.$store.dispatch('showMenuTable', {
-          isShowedTable: false
-        })
       }
-    },
+
-    typeFormat(key, keyPath) {
+      this.isOption = row
-      Object.keys(supportedTypes).forEach(type => {
+      this.visible = true
-        if (type === key) {
+      this.$store.dispatch('showMenuTable', {
-          this.exporRecordTable(key)
+        isShowedTable: this.isParent
-        }
       })
-    },
+      this.$store.dispatch('showMenuTabChildren', {
-    exporZipRecordTable() {
+        isShowedTabChildren: !this.isParent
-      const Header = this.getterFieldListHeader
-      const filterVal = this.getterFieldListValue
-      const list = this.getDataSelection
-      const data = this.formatJson(filterVal, list)
-      const filename = 'prueba'
-      exportFileZip(
-        Header,
-        data,
-        filename
-      )
-    },
-    exporRecordTable(key) {
-      const Header = this.getterFieldListHeader
-      const filterVal = this.getterFieldListValue
-      const list = this.getDataSelection
-      const data = this.formatJson(filterVal, list)
-      exportFileFromJson({
-        header: Header,
-        data,
-        filename: '',
-        exportType: key
       })
     },
-    formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => v[j]))
-    },
     sortFields,
     handleChange(val) {
       val = !val
     },
-    showOnlyMandatoryColumns() {
-      this.$store.dispatch('showOnlyMandatoryColumns', {
-        containerUuid: this.containerUuid
-      })
-    },
-    showAllAvailableColumns() {
-      this.$store.dispatch('showAllAvailableColumns', {
-        containerUuid: this.containerUuid
-      })
-    },
     headerLabel(field) {
       if (field.isMandatory || field.isMandatoryFromLogic) {
         return '* ' + field.name
@@ -724,7 +623,7 @@ export default {
      * @param {string} tag, document status key
      */
     tagStatus(tag) {
-      var type
+      let type
       switch (tag) {
         case 'VO':
           type = 'danger'
@@ -784,7 +683,10 @@ export default {
         if (this.isEmptyValue(row[field.columnName])) {
           return undefined
         }
-        return this.formatNumber({ referenceType: field.referenceType, number: row[field.columnName] })
+        return this.formatNumber({
+          referenceType: field.referenceType,
+          number: row[field.columnName]
+        })
       }
       return row['DisplayColumn_' + field.columnName] || row[field.columnName]
     },
@@ -821,7 +723,7 @@ export default {
         // })
         // // columnName: Processed, Processing
         // if (fieldReadOnlyAllForm.length) {
-        //   var isReadOnlyAllRow = Boolean(fieldReadOnlyAllForm.find(item => row[item.columnName] === item.valueIsReadOnlyForm))
+        //   const isReadOnlyAllRow = Boolean(fieldReadOnlyAllForm.find(item => row[item.columnName] === item.valueIsReadOnlyForm))
         //   return isReadOnlyAllRow
         // }
 
@@ -830,7 +732,7 @@ export default {
           return row.hasOwnProperty(item.columnName) && !item.isChangedAllForm
         })
         if (fieldReadOnlyForm) {
-          var isReadOnlyRow = row[fieldReadOnlyForm.columnName] === fieldReadOnlyForm.valueIsReadOnlyForm && field.columnName !== fieldReadOnlyForm.columnName
+          const isReadOnlyRow = row[fieldReadOnlyForm.columnName] === fieldReadOnlyForm.valueIsReadOnlyForm && field.columnName !== fieldReadOnlyForm.columnName
           return isReadOnlyRow
         }
       }
@@ -893,9 +795,6 @@ export default {
       this.showTableSearch = false
       this.isFixed = !this.isFixed
     },
-    expandPanel() {
-      this.isExpand = !this.isExpand
-    },
     async getList() {
       this.oldgetDataDetail = this.getterDataRecords.map(v => v.id)
       this.newgetDataDetail = this.oldgetDataDetail.slice()
@@ -925,14 +824,13 @@ export default {
       }
     },
     changeOrder() {
-      var reversed = this.getterDataRecords.reverse()
+      return this.getterDataRecords.reverse()
-      return reversed
     },
     /**
      * @param {object} field
      */
     cellClass(field) {
-      var classReturn = ''
+      let classReturn = ''
       if (field.isReadOnly) {
         classReturn += 'cell-no-edit'
       }
@@ -1002,7 +900,7 @@ export default {
         if (!row.isEdit) {
           row.isEdit = true
           /*
-          var inSelection = this.getDataSelection.some(item => {
+          const inSelection = this.getDataSelection.some(item => {
             return JSON.stringify(item) === JSON.stringify(row)
           })
           if (inSelection) {
@@ -1025,13 +923,13 @@ export default {
     },
     isAllSelected(selection = 0) {
       if (selection > 0) {
-        var data = this.getterDataRecords
+        const data = this.getterDataRecords
         return data.length === selection
       }
       return false
     },
     handleSelectionAll(rowsSelection) {
-      // var selectAll = false
+      // let selectAll = false
       // if (this.isAllSelected(rowsSelection.length)) {
       //   selectAll = true
       // }
@@ -1044,8 +942,7 @@ export default {
       // })
     },
     filterResult() {
-      var data = []
+      const data = this.getterDataRecords.filter(rowItem => {
-      data = this.getterDataRecords.filter(rowItem => {
         if (this.searchTable.trim().length) {
           let find = false
           Object.keys(rowItem).forEach(key => {
@@ -1064,7 +961,7 @@ export default {
      * Verify is displayed field in column table
      */
     isDisplayed(field) {
-      var isDisplayed = field.isDisplayed && field.isDisplayedFromLogic && field.isShowedTableFromUser && !field.isKey
+      const isDisplayed = field.isDisplayed && field.isDisplayedFromLogic && field.isShowedTableFromUser && !field.isKey
       //  Verify for displayed and is active
       return field.isActive && isDisplayed
     },
@@ -1081,7 +978,7 @@ export default {
         }).then(response => {
           this.isLoadPanelFromServer = true
         }).catch(error => {
-          console.warn('FieldList Load Error ' + error.code + ': ' + error.message)
+          console.warn(`FieldList Load Error ${error.code}: ${error.message}.`)
         })
       }
     },
@@ -1096,19 +993,19 @@ export default {
         return
       }
 
-      columns.forEach((column, index) => {
+      columns.forEach((columnItem, index) => {
         if (index === 0) {
           sums[index] = 'Σ'
           return
         }
-        const field = this.fieldList.find(field => field.columnName === column.property)
+        const field = this.fieldList.find(field => field.columnName === columnItem.property)
-        if (field.componentPath !== 'FieldNumber') {
+        if (!FIELDS_QUANTITY.includes(field.referenceType)) {
           sums[index] = ''
           return
         }
-        const values = this.getDataSelection.map(item => Number(item[column.property]))
+        const values = this.getDataSelection.map(item => Number(item[columnItem.property]))
         if (values.every(value => isNaN(value))) {
-          sums[index] = ''
+          sums[index] = 0
         } else {
           const total = values.reduce((prev, curr) => {
             const value = Number(curr)
@@ -1117,7 +1014,10 @@ export default {
             }
             return prev
           }, 0)
-          sums[index] = this.formatNumber({ referenceType: field.referenceType, number: total })
+          sums[index] = this.formatNumber({
+            referenceType: field.referenceType,
+            number: total
+          })
         }
       })
 
@@ -1125,7 +1025,8 @@ export default {
     },
     formatNumber({ referenceType, number }) {
       let fixed = 0
-      if (['Amount', 'Costs+Prices', 'Number'].includes(referenceType)) {
+      // Amount, Costs+Prices, Number
+      if (FIELDS_FLOATS.includes(referenceType)) {
         fixed = 2
       }
       return new Intl.NumberFormat().format(number.toFixed(fixed))
@@ -1156,7 +1057,7 @@ export default {
         })
       }
       if (!value) {
-        var oldAction = this.$store.getters.getOldAction
+        const oldAction = this.$store.getters.getOldAction
         this.$router.push({
           query: {
             ...this.$route.query,
@@ -1166,11 +1067,11 @@ export default {
       }
     },
     getFieldDefinition(fieldDefinition, row) {
-      var styleSheet = ''
+      let styleSheet = ''
       if (fieldDefinition && (fieldDefinition.id !== null || fieldDefinition.conditionsList.length)) {
         fieldDefinition.conditionsList.forEach(condition => {
-          var columns = evaluator.parseDepends(condition.condition)
+          const columns = evaluator.parseDepends(condition.condition)
-          var conditionLogic = condition.condition
+          let conditionLogic = condition.condition
           columns.forEach(column => {
             conditionLogic = conditionLogic.replace(/@/g, '')
             conditionLogic = conditionLogic.replace(column, row[column])
@@ -1197,8 +1098,11 @@ export default {
         }
       })
 
-      this.$store.dispatch('getWindowByUuid', { routes: this.permissionRoutes, windowUuid: browserMetadata.window.uuid })
+      this.$store.dispatch('getWindowByUuid', {
-      var windowRoute = this.$store.getters.getWindowRoute(browserMetadata.window.uuid)
+        routes: this.permissionRoutes,
+        windowUuid: browserMetadata.window.uuid
+      })
+      const windowRoute = this.$store.getters.getWindowRoute(browserMetadata.window.uuid)
       this.$router.push({
         name: windowRoute.name,
         query: {

src/components/ADempiere/DataTable/menu/contextMenu.vue

@@ -1,5 +1,9 @@
 <template>
-  <el-menu :collapse="isCollapse" class="el-menu-demo" @select="typeFormat">
+  <el-menu
+    :collapse="isCollapse"
+    class="el-menu-demo"
+    @select="typeFormat"
+  >
     <el-submenu
       index="xlsx"
     >
@@ -24,7 +28,7 @@
       {{ $t('window.deleteRecord') }}
     </el-menu-item>
     <el-menu-item
-      v-for="(process, key) in isProcessMenu"
+      v-for="(process, key) in processMenu"
       :key="key"
       index="process"
       @click="tableProcess(process)"
@@ -33,8 +37,10 @@
     </el-menu-item>
   </el-menu>
 </template>
+
 <script>
 import { menuTableMixin } from '@/components/ADempiere/DataTable/menu/mixinMenu'
+
 export default {
   name: 'ContextMenu',
   mixins: [menuTableMixin]

src/components/ADempiere/DataTable/menu/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <el-menu :default-active="menuTable" :class="classTableMenu + ' menu-table-container'" mode="horizontal" @select="typeFormat">
+  <el-menu
+    :default-active="menuTable"
+    :class="classTableMenu + ' menu-table-container'"
+    mode="horizontal"
+    @select="typeFormat"
+  >
     <el-submenu index="2">
       <template slot="title">
         <i class="el-icon-more" />
@@ -19,8 +24,8 @@
         {{ $t('table.dataTable.deleteSelection') }}
       </el-menu-item>
       <el-menu-item
-        v-for="(process, key) in isProcessMenu"
+        v-for="(process, key) in processMenu"
-        v-show="isPanelWindow && isProcessMenu"
+        v-show="isPanelWindow && processMenu"
         :key="key"
         :disabled="Boolean(getDataSelection.length < 1)"
         index="process"
@@ -37,7 +42,9 @@
         :disabled="Boolean(getDataSelection.length < 1)"
         index="xlsx"
       >
-        <template slot="title">{{ $t('table.dataTable.exportRecordTable') }}</template>
+        <template slot="title">
+          {{ $t('table.dataTable.exportRecordTable') }}
+        </template>
         <template v-for="(format, index) in option">
           <el-menu-item :key="index" :index="index">
             {{ format }}
@@ -55,20 +62,24 @@
       </el-menu-item>
       <el-menu-item
         v-if="['browser', 'window'].includes(panelType)"
+        :disabled="isFieldsQuantity"
         @click="showTotals()"
       >
-        {{ isPanel.isShowedTotals ? $t('table.dataTable.hiddenTotal') : $t('table.dataTable.showTotal') }}
+        {{ panelMetadata.isShowedTotals ? $t('table.dataTable.hiddenTotal') : $t('table.dataTable.showTotal') }}
       </el-menu-item>
     </el-submenu>
   </el-menu>
 </template>
+
 <script>
 import { menuTableMixin } from '@/components/ADempiere/DataTable/menu/mixinMenu'
+
 export default {
   name: 'TableMenu',
   mixins: [menuTableMixin]
 }
 </script>
+
 <style>
 .el-menu--vertical .nest-menu .el-submenu>.el-submenu__title:hover, .el-menu--vertical .el-menu-item:hover {
   background-color: #74bcff94 !important;
@@ -84,18 +95,18 @@ export default {
   background-color: initial !important;
 }
 .el-menu-item {
-    height: 56px;
+  height: 56px;
-    line-height: 56px;
+  line-height: 56px;
-    font-size: 14px;
+  font-size: 14px;
-    color: #303133;
+  color: #303133;
-    padding: 0 20px;
+  padding: 0 20px;
-    list-style: none;
+  list-style: none;
-    cursor: pointer;
+  cursor: pointer;
-    position: relative;
+  position: relative;
-    -webkit-transition: border-color .3s, background-color .3s, color .3s;
+  -webkit-transition: border-color .3s, background-color .3s, color .3s;
-    transition: border-color .3s, background-color .3s, color .3s;
+  transition: border-color .3s, background-color .3s, color .3s;
-    -webkit-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
-    box-sizing: border-box;
+  box-sizing: border-box;
-    white-space: nowrap;
+  white-space: nowrap;
 }
 </style>

src/components/ADempiere/DataTable/menu/mixinMenu.js

@@ -1,5 +1,6 @@
 import { supportedTypes, exportFileFromJson, exportFileZip } from '@/utils/ADempiere/exportUtil'
 import { showNotification } from '@/utils/ADempiere/notification'
+import { FIELDS_QUANTITY } from '@/components/ADempiere/Field/references'
 
 export const menuTableMixin = {
   props: {
@@ -23,11 +24,9 @@ export const menuTableMixin = {
       type: Boolean,
       default: false
     },
-    isProcessMenu: {
+    processMenu: {
       type: Array,
-      default: function() {
+      default: () => []
-        return []
-      }
     },
     isPanelWindow: {
       type: Boolean,
@@ -37,11 +36,7 @@ export const menuTableMixin = {
       type: Boolean,
       default: false
     },
-    isPanel: {
+    panelMetadata: {
-      type: Object,
-      default: () => {}
-    },
-    isDataRecord: {
       type: Object,
       default: () => {}
     }
@@ -57,7 +52,7 @@ export const menuTableMixin = {
   },
   computed: {
     isProcessTable() {
-      if (this.isProcessMenu) {
+      if (this.processMenu) {
         return true
       }
       return false
@@ -75,7 +70,7 @@ export const menuTableMixin = {
     },
     getterNewRecords() {
       if (this.isPanelWindow && !this.isParent) {
-        var newRecordTable = this.getterDataRecordsAndSelection.record.filter(recordItem => {
+        const newRecordTable = this.getterDataRecordsAndSelection.record.filter(recordItem => {
           return recordItem.isNew
         })
         return newRecordTable.length
@@ -89,9 +84,9 @@ export const menuTableMixin = {
       return this.getterDataRecordsAndSelection.record
     },
     fieldList() {
-      if (this.isPanel && this.isPanel.fieldList) {
+      if (this.panelMetadata && this.panelMetadata.fieldList) {
         return this.sortFields(
-          this.isPanel.fieldList,
+          this.panelMetadata.fieldList,
           this.panelType !== 'browser' ? 'seqNoGrid' : 'sequence'
         )
       }
@@ -119,7 +114,7 @@ export const menuTableMixin = {
       if (this.$route.query.action === 'create-new') {
         return true
       }
-      if (!this.isPanel.isInsertRecord) {
+      if (!this.panelMetadata.isInsertRecord) {
         return true
       }
       if (this.isReadOnlyParent) {
@@ -130,11 +125,17 @@ export const menuTableMixin = {
       }
       return false
     },
+    isFieldsQuantity() {
+      const fieldsQuantity = this.getterFieldList.filter(fieldItem => {
+        return FIELDS_QUANTITY.includes(fieldItem.referenceType)
+      }).length
+      return !fieldsQuantity
+    },
     getterFieldList() {
       return this.$store.getters.getFieldsListFromPanel(this.containerUuid)
     },
     getterFieldListHeader() {
-      var header = this.getterFieldList.filter(fieldItem => {
+      const header = this.getterFieldList.filter(fieldItem => {
         const isDisplayed = fieldItem.isDisplayed || fieldItem.isDisplayedFromLogic
         if (fieldItem.isActive && isDisplayed && !fieldItem.isKey) {
           return fieldItem.name
@@ -145,7 +146,7 @@ export const menuTableMixin = {
       })
     },
     getterFieldListValue() {
-      var value = this.getterFieldList.filter(fieldItem => {
+      const value = this.getterFieldList.filter(fieldItem => {
         const isDisplayed = fieldItem.isDisplayed || fieldItem.isDisplayedFromLogic
         if (fieldItem.isActive && isDisplayed && !fieldItem.isKey) {
           return fieldItem
@@ -154,15 +155,13 @@ export const menuTableMixin = {
       return value.map(fieldItem => {
         if (fieldItem.componentPath === 'FieldSelect') {
           return 'DisplayColumn_' + fieldItem.columnName
-        } else {
-          return fieldItem.columnName
         }
+        return fieldItem.columnName
       })
     },
     gettersRecordContextMenu() {
-      var record = []
+      const record = []
-      var recordTable = this.isOption
+      record.push(this.isOption)
-      record.push(recordTable)
       return record
     }
   },
@@ -177,28 +176,27 @@ export const menuTableMixin = {
       })
     },
     showModal(process) {
-      var processData
+      const processData = this.$store.getters.getProcess(process.uuid)
-      processData = this.$store.getters.getProcess(process.uuid)
       if (!this.isOption) {
         this.$store.dispatch('setProcessSelect', {
           selection: this.getDataSelection,
           processTablaSelection: true,
-          tableName: this.isPanel.keyColumn
+          tableName: this.panelMetadata.keyColumn
         })
       } else {
-        var selection = this.isOption
+        let valueProcess
+        const selection = this.isOption
         for (const element in selection) {
-          if (element === this.isPanel.keyColumn) {
+          if (element === this.panelMetadata.keyColumn) {
             valueProcess = selection[element]
           }
         }
         this.$store.dispatch('setProcessTable', {
           valueRecord: valueProcess,
-          tableName: this.isPanel.keyColumn,
+          tableName: this.panelMetadata.keyColumn,
           processTable: true
         })
       }
-      var valueProcess
       if (processData === undefined) {
         this.$store.dispatch('getProcessFromServer', {
           containerUuid: process.uuid,
@@ -211,10 +209,13 @@ export const menuTableMixin = {
               record: this.getDataSelection
             })
           }).catch(error => {
-            console.warn('ContextMenu: Dictionary Process (State) - Error ' + error.code + ': ' + error.message)
+            console.warn(`ContextMenu: Dictionary Process (State) - Error ${error.code}: ${error.message}.`)
           })
       } else {
-        this.$store.dispatch('setShowDialog', { type: process.type, action: processData })
+        this.$store.dispatch('setShowDialog', {
+          type: process.type,
+          action: processData
+        })
       }
     },
     tableProcess(process) {
@@ -256,13 +257,15 @@ export const menuTableMixin = {
           isEdit: true,
           isSendServer: false
         })
-      } else {
+        return
-        const fieldsEmpty = this.$store.getters.getFieldListEmptyMandatory({ containerUuid: this.containerUuid })
-        this.$message({
-          message: this.$t('notifications.mandatoryFieldMissing') + fieldsEmpty,
-          type: 'info'
-        })
       }
+      const fieldsEmpty = this.$store.getters.getFieldListEmptyMandatory({
+        containerUuid: this.containerUuid
+      })
+      this.$message({
+        message: this.$t('notifications.mandatoryFieldMissing') + fieldsEmpty,
+        type: 'info'
+      })
     },
     showOptionalColums() {
       this.$store.dispatch('changePanelAttributesBoolean', {
@@ -283,42 +286,38 @@ export const menuTableMixin = {
       this.closeMenu()
     },
     exporRecordTable(key) {
-      const Header = this.getterFieldListHeader
+      const header = this.getterFieldListHeader
       const filterVal = this.getterFieldListValue
-      var list
+      let list = this.getDataSelection
-      if (!this.isOption) {
+      if (this.isOption) {
-        list = this.getDataSelection
+        list = this.gettersRecrdContextMenu
-      } else {
-        list = this.gettersRecordContextMenu
       }
 
       const data = this.formatJson(filterVal, list)
       exportFileFromJson({
-        header: Header,
+        header,
         data,
         filename: '',
         exportType: key
       })
     },
     exporZipRecordTable() {
-      const Header = this.getterFieldListHeader
+      const header = this.getterFieldListHeader
       const filterVal = this.getterFieldListValue
-      var list
+      let list = this.getDataSelection
       if (this.getDataSelection.length <= 0) {
         list = this.getDataAllRecord
-      } else {
-        list = this.getDataSelection
       }
       const data = this.formatJson(filterVal, list)
       exportFileZip({
-        header: Header,
+        header,
         data,
         title: this.$route.meta.title,
         exportType: 'zip'
       })
     },
     formatJson(filterVal, jsonData) {
-      return jsonData.map(v => filterVal.map(j => v[j]))
+      return jsonData.map(rowData => filterVal.map(j => rowData[j]))
     }
   }
 }

src/components/ADempiere/Field/FieldNumber.vue

@@ -16,6 +16,7 @@
 
 <script>
 import { fieldMixin } from '@/components/ADempiere/Field/FieldMixin'
+import { FIELDS_FLOATS } from '@/components/ADempiere/Field/references'
 
 export default {
   name: 'FieldNumber',
@@ -51,7 +52,8 @@ export default {
         .join('-').toLowerCase()
     },
     precision() {
-      if (['Amount', 'Costs+Prices', 'Number'].includes(this.metadata.referenceType)) {
+      // Amount, Costs+Prices, Number
+      if (FIELDS_FLOATS.includes(this.metadata.referenceType)) {
         return 2
       }
       return undefined

src/components/ADempiere/Field/references.js

@@ -55,7 +55,7 @@ const REFERENCES = [
     type: 'FieldNumber',
     support: true,
     description: 'Costs + Prices (minimum currency precision but if exists more)',
-    alias: ['CostsPrices', 'Costs+Prices', 'Cost Prices']
+    alias: ['Costs+Prices', 'CostsPrices', 'Cost Prices']
   },
   {
     id: 15,
@@ -244,9 +244,9 @@ export const FIELD_RANGE = [
   },
   {
     id: 37,
-    type: 'CostsPrices',
+    type: 'Costs+Prices',
     description: 'Costs + Prices (minimum currency precision but if exists more)',
-    alias: ['CostsPrices', 'Costs+Prices', 'Cost Prices']
+    alias: ['Costs+Prices', 'CostsPrices', 'Cost Prices']
   },
   {
     id: 15,
@@ -327,3 +327,7 @@ export const FIELD_READ_ONLY_FORM = [
     isChangedAllForm: true
   }
 ]
+
+export const FIELDS_FLOATS = ['Amount', 'Costs+Prices', 'Number']
+
+export const FIELDS_QUANTITY = ['Amount', 'Costs+Prices', 'Integer', 'Number', 'Quantity']

src/utils/ADempiere/dictionaryUtils.js

@@ -19,6 +19,7 @@ export function generateField(fieldToGenerate, moreAttributes, typeRange = false
   }
 
   const componentReference = evalutateTypeField(fieldToGenerate.displayType, true)
+  const referenceType = componentReference.alias[0]
 
   let parsedDefaultValue = fieldToGenerate.defaultValue
   if (String(parsedDefaultValue).includes('@')) {
@@ -34,7 +35,7 @@ export function generateField(fieldToGenerate, moreAttributes, typeRange = false
   parsedDefaultValue = parsedValueComponent({
     fieldType: componentReference.type,
     value: parsedDefaultValue,
-    referenceType: componentReference.alias[0],
+    referenceType,
     isMandatory: fieldToGenerate.isMandatory
   })
 
@@ -49,7 +50,7 @@ export function generateField(fieldToGenerate, moreAttributes, typeRange = false
   parsedDefaultValueTo = parsedValueComponent({
     fieldType: componentReference.type,
     value: parsedDefaultValueTo,
-    referenceType: componentReference.alias[0],
+    referenceType,
     isMandatory: fieldToGenerate.isMandatory
   })
   fieldToGenerate.reference.zoomWindowList = fieldToGenerate.reference.windowsList
@@ -59,14 +60,14 @@ export function generateField(fieldToGenerate, moreAttributes, typeRange = false
     // displayed attributes
     componentPath: componentReference.type,
     isSupport: componentReference.support,
-    referenceType: componentReference.alias[0],
+    referenceType,
     displayColumn: undefined, // link to value from selects and table
     // value attributes
     value: String(parsedDefaultValue).trim() === '' ? undefined : parsedDefaultValue,
     oldValue: parsedDefaultValue,
     valueTo: parsedDefaultValueTo,
-    parsedDefaultValue: parsedDefaultValue,
+    parsedDefaultValue,
-    parsedDefaultValueTo: parsedDefaultValueTo,
+    parsedDefaultValueTo,
     // logics to app
     isDisplayedFromLogic: fieldToGenerate.isDisplayed,
     isReadOnlyFromLogic: undefined,
@@ -76,7 +77,7 @@ export function generateField(fieldToGenerate, moreAttributes, typeRange = false
     dependentFieldsList: [],
     // TODO: Add support on server
     // app attributes
-    isShowedFromUser: isShowedFromUser,
+    isShowedFromUser,
     isShowedTableFromUser: fieldToGenerate.isDisplayed,
     isFixedTableColumn: false
   }
@@ -148,7 +149,7 @@ export function generateProcess({ processToGenerate, containerUuidAssociated = u
     processId: processToGenerate.id,
     processName: processToGenerate.name,
     containerUuid: processToGenerate.uuid,
-    panelType: panelType
+    panelType
   }
 
   //  Convert from gRPC
@@ -283,15 +284,15 @@ export function generateProcess({ processToGenerate, containerUuidAssociated = u
 
   const processDefinition = {
     ...processToGenerate,
-    panelType: panelType,
+    panelType,
     isAssociated: Boolean(containerUuidAssociated),
-    containerUuidAssociated: containerUuidAssociated,
+    containerUuidAssociated,
     fieldList: fieldDefinitionList
   }
 
   return {
-    processDefinition: processDefinition,
+    processDefinition,
-    actions: actions
+    actions
   }
 }