Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add record navigation #962

Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
28 changes: 18 additions & 10 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,22 +95,26 @@ 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
}
Expand All @@ -124,7 +128,7 @@ export default defineComponent({
// // disabled rollback when change route
// // root.$store.dispatch('setDataLog', {})
// }
const tableName = panelMetadata.value.tableName
const tableName = props.panelMetadata.tableName
// TODO: Replace with general dispatch to set current record
root.$router.push({
name: root.$route.name,
Expand Down Expand Up @@ -163,10 +167,14 @@ export default defineComponent({
return
}

const recordsList = computed(() => {
return props.containerManager.data.recordsList || []
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Container manager is not a data container, please remove this

})

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
132 changes: 132 additions & 0 deletions src/components/ADempiere/RecordNavigation/index.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<!--
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"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

where is psssed the callback?

: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
}

const recordNavigationManager = computed(() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is it?

return {
data: root.$store.getters.getContainerData({
containerUuid: props.containerUuid
})
}
})

return {
activeName,
// computeds
recordNavigationManager,
isLoadedPanel,
panelMetadata,
shorcutKey,
// methods
actionAdvancedQuery
}
}
})
</script>

<style>
.record-navigation {
background-color: #fff;
height: 100%;
}
</style>
61 changes: 49 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="containerManager"
: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 Down Expand Up @@ -150,13 +178,22 @@ export default defineComponent({

const getData = () => {
// TODO: Add store get data from tab
root.$store.dispatch('getListEntities', {
parentUuid: props.parentUuid,
containerUuid: tabUuid.value,
...props.tabsList[currentTab.value]
})
}

getData()

setTabNumber(currentTab.value)

const isShowRecords = ref(false)

return {
isShowRecords,
tabUuid,
currentTab,
// computed
tabStyle,
Expand Down
4 changes: 2 additions & 2 deletions src/router/modules/ADempiere/testRoutes.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,12 @@ const testRoutes = [
},

{
path: '/test/multitab/window',
path: '/test/window/multitab',
component: Layout,
hidden: true,
children: [
{
path: '/test/multitab/window',
path: '/test/window/multitab',
component: () => import('@/views/ADempiere/Test/MultiTabWindow'),
name: 'Multi Tab Window View',
meta: {
Expand Down
Loading