Skip to content

Commit

Permalink
feat: Add record navigation (#962)
Browse files Browse the repository at this point in the history
* feat: Add record navigation

* add vuex store

* use drawer to records

* set current tab uuid from route

* add seek record form tab

* set namespace to vuex store module.

* add callbacks in windows test
  • Loading branch information
EdwinBetanc0urt authored Jul 8, 2021
1 parent 240c2da commit f08f19c
Show file tree
Hide file tree
Showing 10 changed files with 379 additions and 58 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,21 @@
</el-button>
</el-tooltip>

<slot name="prefix" />

<span :style="isLocked ? 'color: red;' :'color: #1890ff;'">
{{ tabName }}
</span>

<slot name="sufix" />
</span>

<span v-else key="onlyName">
<slot name="prefix" />

{{ tabName }}

<slot name="sufix" />
</span>
</template>

Expand Down
61 changes: 31 additions & 30 deletions src/components/ADempiere/DefaultTable/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
:row-key="keyColumn"
reserve-selection
highlight-current-row
:data="[]"
:data="recordsList"
:element-loading-text="$t('notifications.loading')"
element-loading-background="rgba(255, 255, 255, 0.8)"
@row-click="handleRowClick"
Expand Down Expand Up @@ -95,50 +95,37 @@ export default defineComponent({
containerUuid: {
type: String,
required: true
},
containerManager: {
type: Object,
required: true
},
panelMetadata: {
type: Object,
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
if (props.panelMetadata) {
return props.panelMetadata.keyColumn
}
})
const fieldsList = computed(() => {
const panel = panelMetadata.value
const panel = props.panelMetadata
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)
props.containerManager.seekRecord({
row,
tableName: props.panelMetadata.tableName
})
}
const headerLabel = (field) => {
Expand All @@ -163,10 +150,24 @@ export default defineComponent({
return
}
// namespace to vuex store module
const vuexStore = props.containerManager.vuexStore()
// get records list
const recordsList = computed(() => {
const data = root.$store.getters[vuexStore + '/getContainerData']({
containerUuid: props.containerUuid
})
if (data && data.recordsList) {
return data.recordsList
}
return []
})
return {
// computeds
recordsList,
keyColumn,
panelMetadata,
fieldsList,
// methods
headerLabel,
Expand Down
2 changes: 1 addition & 1 deletion src/components/ADempiere/PanelDefinition/StandardPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
-->

<template>
<div class="wrapper" style="margin: 15px">
<div class="wrapper" style="margin-right: 10px">
<el-form
label-position="top"
label-width="200px"
Expand Down
127 changes: 127 additions & 0 deletions src/components/ADempiere/RecordNavigation/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<!--
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-container class="record-navigation">

<!-- records in table -->
<default-table
:parent-uuid="parentUuid"
:container-uuid="containerUuid"
:container-manager="recordNavigationManager"
:panel-metadata="panelMetadata"
/>

</el-container>
</template>

<script>
import { defineComponent, computed, ref } from '@vue/composition-api'
import { generatePanelAndFields } from '@/components/ADempiere/PanelDefinition/panelUtils'
import DefaultTable from '@/components/ADempiere/DefaultTable'
import PanelDefinition from '@/components/ADempiere/PanelDefinition'
export default defineComponent({
name: 'RecordNavigation',
components: {
DefaultTable,
PanelDefinition
},
props: {
parentUuid: {
type: String,
default: undefined
},
containerUuid: {
type: String,
required: true
},
containerManager: {
type: Object,
required: true
},
currentTab: {
type: Object,
required: true
}
},
setup(props, { root }) {
const activeName = ref([])
// TODO: Manage attribute with vuex store in window module
if (root.$route.query.action && root.$route.query.action === 'advancedQuery') {
activeName.value.push('PanelAdvancedQuery')
}
const shorcutKey = computed(() => {
return {
f6: ['f6'],
ctrlf: ['ctrl', 'f']
}
})
const isLoadedPanel = computed(() => {
const panelMetadata = root.$store.getters.getPanel('table_' + props.containerUuid)
if (!root.isEmptyValue(panelMetadata)) {
return true
}
return false
})
const panelMetadata = computed(() => {
return generatePanelAndFields({
parentUuid: props.parentUuid,
containerUuid: props.containerUuid,
panelMetadata: props.currentTab
})
})
const actionAdvancedQuery = () => {
const activeNames = []
if (!activeName.value.length) {
activeNames.push('PanelAdvancedQuery')
}
activeName.value = activeNames
}
// set and/or overwrite methods
const recordNavigationManager = props.containerManager
return {
activeName,
// computeds
recordNavigationManager,
isLoadedPanel,
panelMetadata,
shorcutKey,
// methods
actionAdvancedQuery
}
}
})
</script>

<style>
.record-navigation {
background-color: #fff;
height: 100%;
}
</style>
70 changes: 58 additions & 12 deletions src/components/ADempiere/TabManager/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,28 @@
-->

<template>
<el-tabs
v-model="currentTab"
type="border-card"
@tab-click="handleClick"
>
<template v-for="(tabAttributes, key) in tabsList">
<div>
<el-drawer
:title="tabsList[currentTab].name"
size="50%"
:visible.sync="isShowRecords"
with-header
>
<record-navigation
:parent-uuid="parentUuid"
:container-uuid="tabUuid"
:container-manager="containerManagerTab"
:current-tab="tabsList[currentTab]"
/>
</el-drawer>

<el-tabs
v-model="currentTab"
type="border-card"
@tab-click="handleClick"
>
<el-tab-pane
v-for="(tabAttributes, key) in tabsList"
:key="key"
:label="tabAttributes.name"
:name="String(key)"
Expand All @@ -39,7 +54,16 @@
:tab-uuid="tabAttributes.uuid"
:table-name="tabAttributes.tableName"
:tab-name="tabAttributes.name"
/>
>
<el-button
v-if="currentTab == key"
slot="prefix"
type="text"
@click="isShowRecords = true"
>
<i class="el-icon-s-fold" style="font-size: 15px; color: black;" />
</el-button>
</lock-record>

<panel-definition
:parent-uuid="parentUuid"
Expand All @@ -48,23 +72,26 @@
:panel-metadata="tabAttributes"
:group-tab="tabAttributes.tabGroup"
/>

</el-tab-pane>
</template>
</el-tabs>
</el-tabs>
</div>
</template>

<script>
import { defineComponent, computed, ref } from '@vue/composition-api'
import PanelDefinition from '@/components/ADempiere/PanelDefinition'
import LockRecord from '@/components/ADempiere/ContainerOptions/LockRecord'
import PanelDefinition from '@/components/ADempiere/PanelDefinition'
import RecordNavigation from '@/components/ADempiere/RecordNavigation'
export default defineComponent({
name: 'TabManager',
components: {
LockRecord,
PanelDefinition,
LockRecord
RecordNavigation
},
props: {
Expand All @@ -87,9 +114,10 @@ export default defineComponent({
const tabNo = root.$route.query.tab || '0'
const currentTab = ref(tabNo)
const tabUuid = ref(props.tabsList[0].uuid)
const tabUuid = ref(props.tabsList[tabNo].uuid)
const tabStyle = computed(() => {
// height in card
return {
height: '75vh',
overflow: 'auto'
Expand All @@ -108,6 +136,14 @@ export default defineComponent({
// TODO: Add store current tab
}
const containerManagerTab = computed(() => {
return {
...props.containerManager,
vuexStore: () => 'dataManager'
}
})
/**
* @param {object} tabHTML DOM HTML the tab clicked
*/
Expand Down Expand Up @@ -150,15 +186,25 @@ export default defineComponent({
const getData = () => {
// TODO: Add store get data from tab
root.$store.dispatch('dataManager/getEntitiesList', {
parentUuid: props.parentUuid,
containerUuid: tabUuid.value,
...props.tabsList[currentTab.value]
})
}
getData()
setTabNumber(currentTab.value)
const isShowRecords = ref(false)
return {
isShowRecords,
tabUuid,
currentTab,
// computed
containerManagerTab,
tabStyle,
// meyhods
handleClick,
Expand Down
Loading

0 comments on commit f08f19c

Please sign in to comment.