record access mode mobile support (#755)

* record access mode mobile support

* resolve conflict

* add traslation

* minimal changes

Co-authored-by: Elsio Sanchez <elsiosanche@gmail.com>

src/components/ADempiere/ContextMenu/contextMenuDesktop.vue

@@ -216,6 +216,10 @@ export default {
     clickRunAction(action) {
       if (action === 'refreshData') {
         this.refreshData()
+      } else if (action.action === 'recordAccess') {
+        this.$store.commit('changeShowRigthPanel', true)
+        this.$store.commit('setRecordAccess', true)
+        this.runAction(action)
       } else {
         this.runAction(action)
       }
@@ -286,7 +290,7 @@ export default {
     border-radius: 4px;
     -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-    max-height: 250px;
+    max-height: 300px;
     max-width: 220px;
     overflow: auto;
   }

src/components/ADempiere/ContextMenu/contextMenuMobile.vue

@@ -214,6 +214,9 @@ export default {
     clickRunAction(action) {
       if (action === 'refreshData') {
         this.refreshData()
+      } else if (action.action === 'recordAccess') {
+        this.$store.commit('changeShowRigthPanel', true)
+        this.$store.commit('setRecordAccess', true)
       } else {
         this.runAction(action)
       }

src/components/ADempiere/Dialog/index.vue

@@ -30,7 +30,9 @@
     <div
       v-if="panelType !== 'From'"
     >
-      <record-access />
+      <record-access
+        v-if="showRecordAccess"
+      />
       <sequence-order
         v-if="modalMetadata.isSortTab"
         key="order"
@@ -70,7 +72,7 @@
 <script>
 import MainPanel from '@/components/ADempiere/Panel'
 import SequenceOrder from '@/components/ADempiere/SequenceOrder'
-import RecordAccess from '@/components/ADempiere/recordAccess'
+import RecordAccess from '@/components/ADempiere/RecordAccess'
 import { showNotification } from '@/utils/ADempiere/notification'
 import {
   updateAccessRecord
@@ -121,6 +123,9 @@ export default {
     },
     getterDataRecordsAndSelection() {
       return this.$store.getters.getDataRecordAndSelection(this.containerUuid)
+    },
+    showRecordAccess() {
+      return this.$store.getters.getShowRecordAccess
     }
   },
   watch: {
@@ -149,8 +154,10 @@ export default {
         type: this.modalMetadata.panelType,
         action: undefined
       })
+      this.$store.commit('setRecordAccess', false)
     },
     runAction(action) {
+      this.$store.commit('setRecordAccess', false)
       if (action.isSortTab) {
         this.$store.dispatch('updateSequence', {
           parentUuid: this.modalMetadata.parentUuid,

src/components/ADempiere/Field/index.vue

@@ -547,6 +547,7 @@ export default {
       }
     },
     handleCommand(command) {
+      this.$store.commit('setRecordAccess', false)
       if (command.name === this.$t('table.ProcessActivity.zoomIn')) {
         this.redirect({ window: command.fieldAttributes.reference.zoomWindows[0] })
         return

src/components/ADempiere/RecordAccess/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <component
+    :is="templateDevice"
+  />
+</template>
+
+<script>
+export default {
+  name: 'RecordAccess',
+  computed: {
+    isMobile() {
+      return this.$store.state.app.device === 'mobile'
+    },
+    templateDevice() {
+      if (this.isMobile) {
+        return () => import('@/components/ADempiere/RecordAccess/recordAccessMobile')
+      }
+      return () => import('@/components/ADempiere/RecordAccess/recordAccessDesktop')
+    }
+  }
+}
+</script>

src/components/ADempiere/RecordAccess/recordAccessDesktop.vue

@@ -80,7 +80,7 @@
 import draggable from 'vuedraggable'
 
 export default {
-  name: 'RecordAccess',
+  name: 'RecordAccessDesktop',
   components: {
     draggable
   },

src/components/ADempiere/RecordAccess/recordAccessMobile.vue

@@ -0,0 +1,281 @@
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <span>
+        {{ $t('data.recordAccess.actions') }}
+      </span>
+    </div>
+    <div style="margin-bottom: 10%;">
+      <span style="margin-bottom: 10%;">
+        {{ $t('data.recordAccess.hideRecord') }}
+      </span>
+      <br>
+      <el-select
+        v-model="getterListExclude"
+        multiple
+        style="margin-top: 5%;"
+        placeholder="Select"
+        clearable
+        @change="addListExclude"
+      >
+        <el-option
+          v-for="item in getterDataRecords"
+          :key="item.clientId"
+          :label="item.name"
+          :value="item.uuid"
+        />
+      </el-select>
+    </div>
+    <div
+      style="margin-bottom: 10%;"
+    >
+      <span
+        style="margin-bottom: 10%;"
+      >
+        {{ $t('data.recordAccess.recordDisplay') }}
+      </span>
+      <br>
+      <el-select
+        v-model="getterListInclude"
+        multiple
+        style="margin-top: 5%;"
+        placeholder="Select"
+        @change="addListInclude"
+      >
+        <el-option
+          v-for="item in getterDataRecords"
+          :key="item.clientId"
+          :label="item.name"
+          :value="item.uuid"
+        />
+      </el-select>
+    </div>
+    <el-form
+      label-position="top"
+      size="small"
+      class="create-bp"
+    >
+      <el-row :gutter="24">
+        <template
+          v-for="(record, index) in getterListInclude"
+        >
+          <div :key="index" style="margin-left: 5%;">
+            <el-tag>
+              {{ record }}
+            </el-tag>
+            <p>
+              {{ $t('data.recordAccess.isReadonly') }}
+              <el-checkbox v-model="isReadonly" />
+            </p>
+            <p>
+              {{ $t('data.recordAccess.isDependentEntities') }} <el-checkbox v-model="isDependentEntities" />
+            </p>
+          </div>
+        </template>
+      </el-row>
+    </el-form>
+  </el-card>
+</template>
+
+<script>
+
+export default {
+  name: 'RecordAccessMobile',
+  props: {
+    parentUuid: {
+      type: String,
+      default: undefined
+    },
+    containerUuid: {
+      type: String,
+      default: undefined
+    },
+    order: {
+      type: String,
+      default: undefined
+    },
+    included: {
+      type: String,
+      default: undefined
+    },
+    keyColumn: {
+      type: String,
+      default: undefined
+    },
+    identifiersList: {
+      type: Array,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      group: 'sequence',
+      isReadonly: false,
+      isDependentEntities: true,
+      getterDataRecords: this.$store.getters['user/getRoles']
+    }
+  },
+  computed: {
+    getterListExclude() {
+      const list = this.getterDataRecords.filter(item => item.isPersonalLock === false)
+      return list.map(element => {
+        return element.name
+      })
+    },
+    getterListInclude() {
+      const list = this.getterDataRecords.filter(item => item.isPersonalLock === true)
+      return list.map(element => {
+        return element.name
+      })
+    },
+    getIdentifiersList() {
+      return this.identifiersList
+        .filter(item => item.componentPath !== 'FieldSelect')
+    }
+  },
+  created() {
+    const record = this.getterDataRecords.map(record => {
+      return {
+        id: record.id,
+        uuid: record.uuid,
+        IsExclude: record.isPersonalLock,
+        isDependentEntities: this.isDependentEntities,
+        isReadonly: this.isReadonly
+      }
+    })
+    this.$store.dispatch('changeList', record)
+  },
+  methods: {
+    handleChange(value) {
+      const action = Object.keys(value)[0] // get property
+      const element = value.[action].element
+      const index = this.getterDataRecords.findIndex(role => role.id === element.id)
+      switch (action) {
+        case 'added':
+          this.addItem({
+            index,
+            element
+          })
+          break
+        case 'removed':
+          this.deleteItem({
+            index,
+            element
+          })
+          break
+      }
+    },
+    addListInclude(element) {
+      const index = this.getterDataRecords.findIndex(item => element[element.length - 1] === item.uuid)
+      this.getterDataRecords[index].isPersonalLock = true
+    },
+    addListExclude(element) {
+      const index = this.getterDataRecords.findIndex(item => element[element.length - 1] === item.uuid)
+      this.getterDataRecords[index].isPersonalLock = false
+    },
+    /**
+     * @param {number} index: the index of the added element
+     * @param {object} element: the added element
+     */
+    addItem({
+      index,
+      element
+    }) {
+      this.getterDataRecords[index].isPersonalLock = !element.isPersonalLock
+    },
+    /**
+     * @param {number} index: the index of the element before remove
+     * @param {object} element: the removed element
+     */
+    deleteItem({
+      index,
+      element
+    }) {
+      this.getterDataRecords[index].isPersonalLock = !element.isPersonalLock
+      const record = this.getterDataRecords.map(record => {
+        return {
+          id: record.id,
+          uuid: record.uuid,
+          IsExclude: record.isPersonalLock,
+          isDependentEntities: this.isDependentEntities,
+          isReadonly: this.isReadonly
+        }
+      })
+      this.$store.dispatch('changeList', record)
+    },
+    getOrder(arrayToSort, orderBy = this.order) {
+      return arrayToSort.sort((itemA, itemB) => {
+        return itemA[orderBy] - itemB[orderBy]
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .board-column {
+    min-width: 250px;
+    min-height: 70px;
+    height: auto;
+    overflow: hidden;
+    background: #f0f0f0;
+    border-radius: 3px;
+
+    .board-column-header {
+      height: 50px;
+      line-height: 50px;
+      overflow: hidden;
+      padding: 0 20px;
+      text-align: center;
+      background: #333;
+      color: #fff;
+      border-radius: 3px 3px 0 0;
+    }
+
+    .board-column-content {
+      height: auto;
+      overflow: hidden;
+      border: 10px solid transparent;
+      min-height: 60px;
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: column;
+      align-items: center;
+
+      .board-item {
+        cursor: pointer;
+        width: 100%;
+        height: 30px;
+        margin: 5px 0;
+        background-color: #fff;
+        text-align: left;
+        line-height: 30px;
+        padding: 0px 10px;
+        box-sizing: border-box;
+        box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
+      }
+    }
+  }
+</style>
+<style lang="scss">
+  .board {
+    width: 100%;
+    margin-left: 20px;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .kanban {
+    &.todo {
+      .board-column-header {
+        background: #f9944a;
+      }
+    }
+    &.working {
+      .board-column-header {
+        background: #4A9FF9;
+      }
+    }
+  }
+</style>

src/lang/ADempiere/es.js

@@ -310,7 +310,7 @@ export default {
     lockRecord: 'Bloquear Registro',
     noDescription: 'Sin Descripción',
     recordAccess: {
-      actions: 'Acceso a registros',
+      actions: 'Acceso a Registros',
       hideRecord: 'Ocultar Registro',
       recordDisplay: 'Permitir Visualización del Registro',
       isReadonly: 'Solo  Lectura',

src/store/modules/ADempiere/contextMenu.js

@@ -28,7 +28,8 @@ const initStateContextMenu = {
     documentActionsList: [],
     recordId: undefined,
     recordUuid: undefined
-  }
+  },
+  recordAccess: false
 }
 
 const contextMenu = {
@@ -57,6 +58,9 @@ const contextMenu = {
     },
     fieldContextMenu(state, payload) {
       state.optionField = payload
+    },
+    setRecordAccess(state, params) {
+      state.recordAccess = params
     }
   },
   actions: {
@@ -189,6 +193,9 @@ const contextMenu = {
     },
     getFieldContextMenu: (state) => {
       return state.optionField
+    },
+    getShowRecordAccess: (state) => {
+      return state.recordAccess
     }
   }
 }

src/views/ADempiere/Window/index.vue

@@ -315,8 +315,12 @@
       <right-panel
         v-if="panelContextMenu && isMobile"
       >
+        <record-access
+          v-if="showRecordAccess"
+        />
         <component
           :is="componentRender"
+          v-if="!showRecordAccess"
           :field-attributes="contextMenuField.fieldAttributes"
           :source-field="contextMenuField.fieldAttributes"
           :record-uuid="contextMenuField.fieldAttributes.recordUuid"

src/views/ADempiere/Window/windowLogicComponent.js

@@ -30,7 +30,7 @@ import WorkflowLogs from '@/components/ADempiere/ContainerInfo/workflowLogs'
 import WorkflowStatusBar from '@/components/ADempiere/WorkflowStatusBar'
 // Panel right the Context Menu Field
 import RightPanel from '@/components/ADempiere/RightPanel'
-
+import RecordAccess from '@/components/ADempiere/RecordAccess'
 /**
  * Window Logic Component View
  * Build and show window, tab and records view, generates with
@@ -51,7 +51,8 @@ export default {
     ChatEntries,
     RecordLogs,
     WorkflowLogs,
-    WorkflowStatusBar
+    WorkflowStatusBar,
+    RecordAccess
   },
   beforeRouteUpdate(to, from, next) {
     this.$store.dispatch('setWindowOldRoute', {
@@ -110,6 +111,9 @@ export default {
       }
       return component
     },
+    showRecordAccess() {
+      return this.$store.getters.getShowRecordAccess
+    },
     isNewRecord() {
       return this.isEmptyValue(this.$route.query) ||
         this.isEmptyValue(this.$route.query.action) ||