feat: Separate record-lock in different tab component. (#919)

* Separate record-lock in different tab component.

* record id fixed.

* change path into ContainerOptions

src/components/ADempiere/ContainerOptions/LockRecord/index.vue

@@ -0,0 +1,169 @@
+<!--
+ 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>
+  <div>
+    <span v-if="isFirstTab" key="tooltip">
+      <el-tooltip
+        v-if="isFirstTab"
+        :content="isLocked ? $t('data.lockRecord') : $t('data.unlockRecord')"
+        placement="top"
+      >
+        <el-button type="text" @click="lockRecord()">
+          <i
+            :class="isLocked ? 'el-icon-lock' : 'el-icon-unlock'"
+            style="font-size: 15px; color: black;"
+          />
+        </el-button>
+      </el-tooltip>
+      <span :style="isLocked ? 'color: red;' :'color: #1890ff;'">
+        {{ tabName }}
+      </span>
+    </span>
+
+    <template v-else>
+      {{ tabName }}
+    </template>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed, ref, watch } from '@vue/composition-api'
+
+export default defineComponent({
+  name: 'LockRecord',
+
+  props: {
+    tabPosition: {
+      type: Number,
+      default: 0
+    },
+    tabName: {
+      type: String,
+      required: true
+    }
+  },
+
+  setup(props, { root }) {
+    const { tabUuid: containerUuid } = root.$route.meta
+    const { tableName } = root.$route.params
+
+    const isFirstTab = computed(() => {
+      return props.tabPosition === 0
+    })
+
+    const isLocked = ref(false)
+
+    const isValidUuid = (recordUuid) => {
+      return !root.isEmptyValue(recordUuid) && recordUuid !== 'create-new'
+    }
+
+    const lockRecord = () => {
+      const action = isLocked.value ? 'unlockRecord' : 'lockRecord'
+      const { recordId, recordUuid } = getRecordId()
+
+      root.$store.dispatch(action, {
+        tableName,
+        recordId,
+        recordUuid
+      })
+        .then(() => {
+          root.$message({
+            type: 'success',
+            message: root.$t('data.notification.' + action),
+            showClose: true
+          })
+        })
+        .catch(() => {
+          root.$message({
+            type: 'error',
+            message: root.$t('data.isError') + root.$t('data.' + action),
+            showClose: true
+          })
+        })
+        .finally(() => {
+          getPrivateAccess()
+        })
+    }
+
+    const record = computed(() => {
+      if (isFirstTab) {
+        const recordUuid = root.$route.query.action
+        if (isValidUuid(recordUuid)) {
+          return root.$store.getters.getRowData({
+            containerUuid,
+            recordUuid
+          })
+        }
+      }
+
+      return undefined
+    })
+
+    const getRecordId = () => {
+      let recordId
+      let recordUuid
+      const recordRow = record.value
+      if (!root.isEmptyValue(recordRow)) {
+        recordId = recordRow[tableName + '_ID']
+        recordUuid = recordRow.UUID
+      } else {
+        if (isValidUuid(root.$route.query.action)) {
+          recordUuid = root.$route.query.action
+        }
+      }
+
+      return {
+        recordId,
+        recordUuid
+      }
+    }
+
+    const getPrivateAccess = () => {
+      const { recordId, recordUuid } = getRecordId()
+
+      root.$store.dispatch('getPrivateAccessFromServer', {
+        tableName,
+        recordId,
+        recordUuid
+      })
+        .then(privateAccessResponse => {
+          if (!root.isEmptyValue(privateAccessResponse)) {
+            isLocked.value = privateAccessResponse.isLocked
+          } else {
+            isLocked.value = false
+          }
+        })
+    }
+
+    watch(() => root.$route.query.action, (newValue) => {
+      if (isValidUuid(newValue)) {
+        getPrivateAccess()
+      }
+    })
+
+    return {
+      isLocked,
+      // computed
+      isFirstTab,
+      // methods
+      lockRecord
+    }
+  }
+})
+</script>

src/components/ADempiere/Tab/index.vue

@@ -1,7 +1,7 @@
 <!--
  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@hotmail.com www.erpya.com
+ 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
@@ -28,19 +28,13 @@
         :disabled="Boolean(key > 0 && isCreateNew)"
         :style="tabParentStyle"
       >
-        <span v-if="key === 0" slot="label">
+        <span slot="label">
-          <el-tooltip v-if="key === 0" :content="lock ? $t('data.lockRecord') : $t('data.unlockRecord')" placement="top">
+          <lock-record
-            <el-button type="text" @click="lockRecord()">
+            :tab-position="key"
-              <i :class="!lock ? 'el-icon-unlock' : 'el-icon-lock'" style="font-size: 15px;color: black;" />
+            :tab-name="tabAttributes.name"
-            </el-button>
+          />
-          </el-tooltip>
-          <span :style="!lock ? 'color: #1890ff;': 'color: red;'">
-            {{ tabAttributes.name }}
-          </span>
-        </span>
-        <span v-else slot="label">
-          {{ tabAttributes.name }}
         </span>
+
         <main-panel
           :parent-uuid="windowUuid"
           :container-uuid="tabAttributes.uuid"
@@ -57,11 +51,13 @@
 <script>
 import tabMixin from './tabMixin.js'
 import MainPanel from '@/components/ADempiere/Panel'
+import LockRecord from '@/components/ADempiere/ContainerOptions/LockRecord'
 import { parseContext } from '@/utils/ADempiere/contextUtils'
 
 export default {
   name: 'TabParent',
   components: {
+    LockRecord,
     MainPanel
   },
   mixins: [tabMixin],
@@ -111,55 +107,9 @@ export default {
     },
     tabUuid(value) {
       this.setCurrentTab()
-    },
-    record(value) {
-      const tableName = this.windowMetadata.firstTab.tableName
-      if (value) {
-        this.$store.dispatch('getPrivateAccessFromServer', {
-          tableName,
-          recordId: this.record[tableName + '_ID'],
-          recordUuid: this.record.UUID
-        })
-          .then(privateAccessResponse => {
-            this.lock = privateAccessResponse.isLocked
-          })
-      }
     }
   },
   methods: {
-    lockRecord() {
-      const tableName = this.windowMetadata.firstTab.tableName
-      const action = this.lock ? 'unlockRecord' : 'lockRecord'
-      this.$store.dispatch(action, {
-        tableName,
-        recordId: this.record[tableName + '_ID'],
-        recordUuid: this.record.UUID
-      })
-        .then(() => {
-          this.$message({
-            type: 'success',
-            message: this.$t('data.notification.' + action),
-            showClose: true
-          })
-        })
-        .catch(() => {
-          this.$message({
-            type: 'error',
-            message: this.$t('data.isError') + this.$t('data.' + action),
-            showClose: true
-          })
-        })
-        .finally(() => {
-          this.$store.dispatch('getPrivateAccessFromServer', {
-            tableName,
-            recordId: this.record[tableName + '_ID'],
-            recordUuid: this.record.UUID
-          })
-            .then(privateAccessResponse => {
-              this.lock = privateAccessResponse.isLocked
-            })
-        })
-    },
     setCurrentTab() {
       this.$store.dispatch('setCurrentTab', {
         parentUuid: this.windowUuid,