WIP: refactor: #8322 changed zone component to use VnSection/VnCardBeta #1133

Draft
provira wants to merge 4 commits from 8322-zone into dev
9 changed files with 195 additions and 117 deletions

View File

@ -49,6 +49,7 @@ const $props = defineProps({
});
const vnInputRef = ref(null);
const showPassword = ref(false);
const value = computed({
get() {
return $props.modelValue;

View File

@ -2,6 +2,7 @@
import { ref, computed, watch, onBeforeMount } from 'vue';
import { useRoute } from 'vue-router';
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import { useArrayData } from 'src/composables/useArrayData';
import { isDialogOpened } from 'src/filters';
import VnMoreOptions from './VnMoreOptions.vue';

View File

@ -3,7 +3,6 @@ import axios from 'axios';
import { computed, onMounted, ref, toRefs } from 'vue';
import { useI18n } from 'vue-i18n';
import { useVnConfirm } from 'composables/useVnConfirm';
import { useRoute } from 'vue-router';
import { useAcl } from 'src/composables/useAcl';
import { useArrayData } from 'src/composables/useArrayData';
import { useState } from 'src/composables/useState';
@ -14,15 +13,13 @@ import { useQuasar } from 'quasar';
import { useRouter } from 'vue-router';
const $props = defineProps({
hasAccount: {
type: Boolean,
default: false,
entityId: {
type: Number,
required: true,
},
});
const { t } = useI18n();
const { hasAccount } = toRefs($props);
const { openConfirmationModal } = useVnConfirm();
const route = useRoute();
const router = useRouter();
@ -37,9 +34,9 @@ const hasSysadminAccess = ref();
async function updateStatusAccount(active) {
if (active) {
await axios.post(`Accounts`, { id: entityId.value });
await axios.post(`Accounts`, { id: $props.entityId });
} else {
await axios.delete(`Accounts/${entityId.value}`);
await axios.delete(`Accounts/${$props.entityId}`);
}
account.value.hasAccount = active;
@ -50,7 +47,7 @@ async function updateStatusAccount(active) {
});
}
async function updateStatusUser(active) {
await axios.patch(`VnUsers/${entityId.value}`, { active });
await axios.patch(`VnUsers/${$props.entityId}`, { active });
account.value.active = active;
const status = active ? 'activate' : 'deactivate';
notify({

View File

@ -483,6 +483,96 @@ onBeforeMount(async () => {
</template>
</VnSelect>
</template>
<template #more-create-dialog="{ data }">
<VnInput
v-model="data.provisionalName"
:label="t('globals.description')"
:is-required="true"
/>
<VnSelect
url="Tags"
v-model="data.tag"
:label="t('globals.tag')"
:fields="['id', 'name']"
option-label="name"
option-value="id"
:is-required="true"
:sort-by="['name ASC']"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
<QItemLabel caption> #{{ scope.opt?.id }} </QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnSelect
:options="validPriorities"
v-model="data.priority"
:label="t('item.create.priority')"
:is-required="true"
/>
<VnSelect
url="ItemTypes"
v-model="data.typeFk"
:label="t('item.list.typeName')"
:fields="['id', 'code', 'name']"
option-label="name"
option-value="id"
:is-required="true"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
<QItemLabel caption>
{{ scope.opt?.code }} #{{ scope.opt?.id }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnSelect
url="Intrastats"
v-model="data.intrastatFk"
:label="t('globals.intrastat')"
:fields="['id', 'description']"
option-label="description"
option-value="id"
:is-required="true"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt?.description }}</QItemLabel>
<QItemLabel caption> #{{ scope.opt?.id }} </QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
<VnSelect
url="Origins"
v-model="data.originFk"
:label="t('globals.origin')"
:fields="['id', 'code', 'name']"
option-label="code"
option-value="id"
:is-required="true"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>{{ scope.opt?.name }}</QItemLabel>
<QItemLabel caption>
{{ scope.opt?.code }} #{{ scope.opt?.id }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelect>
</template>
</VnTable>
</template>
<style lang="scss" scoped>

View File

@ -53,6 +53,7 @@ const transfer = ref({
});
const tableRef = ref([]);
const canProceed = ref();
const isLoading = ref(false);
watch(
() => route.params.id,
@ -213,6 +214,9 @@ const updateQuantity = async ({ quantity, id }) => {
};
const addSale = async (sale) => {
if (isLoading.value) return;
isLoading.value = true;
const params = {
barcode: sale.itemFk,
quantity: sale.quantity,

View File

@ -1,13 +1,10 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
import VnCard from 'components/common/VnCard.vue';
import VnCardBeta from 'src/components/common/VnCardBeta.vue';
import ZoneDescriptor from './ZoneDescriptor.vue';
import ZoneFilterPanel from '../ZoneFilterPanel.vue';
const { t } = useI18n();
const route = useRoute();
const routeName = computed(() => route.name);
@ -18,21 +15,5 @@ function notIsLocations(ifIsFalse, ifIsTrue) {
</script>
<template>
<VnCard
data-key="zone"
:base-url="notIsLocations('Zones', undefined)"
:descriptor="ZoneDescriptor"
:filter-panel="notIsLocations(ZoneFilterPanel, undefined)"
:search-data-key="notIsLocations('ZoneList', undefined)"
:searchbar-props="{
url: notIsLocations('Zones', 'ZoneLocations'),
label: notIsLocations(t('list.searchZone'), t('list.searchLocation')),
info: t('list.searchInfo'),
whereFilter: notIsLocations((value) => {
return /^\d+$/.test(value)
? { id: value }
: { name: { like: `%${value}%` } };
}),
}"
/>
<VnCardBeta data-key="zone" base-url="Zones" :descriptor="ZoneDescriptor" />
</template>

View File

@ -258,4 +258,4 @@ function showValidAddresses(row) {
es:
Search zone: Buscar zona
You can search zones by id or name: Puedes buscar zonas por id o nombre
</i18n>
</i18n>

View File

@ -24,7 +24,7 @@ list:
price: Price
create: Create zone
openSummary: Details
searchZone: Search zones
search: Search zones
searchLocation: Search locations
searchInfo: Search zone by id or name
confirmCloneTitle: All it's properties will be copied

View File

@ -1,24 +1,12 @@
import { RouterView } from 'vue-router';
export default {
path: '/zone',
const zoneCard = {
name: 'Zone',
path: '/zone',
component: () => import('src/pages/Zone/Card/ZoneCard.vue'),
redirect: { name: 'ZoneSummary' },
meta: {
title: 'zones',
icon: 'vn:zone',
moduleName: 'Zone',
keyBinding: 'z',
},
component: RouterView,
redirect: { name: 'ZoneMain' },
menus: {
main: [
'ZoneList',
'ZoneDeliveryDays',
'ZoneUpcomingList',
'ZoneUpcomingDeliveries',
],
card: [
menu: [
'ZoneBasicData',
'ZoneWarehouses',
'ZoneHistory',
@ -26,21 +14,99 @@ export default {
'ZoneEvents',
],
},
children: [
{
name: 'ZoneSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/Zone/Card/ZoneSummary.vue'),
},
{
name: 'ZoneBasicData',
path: 'basic-data',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () => import('src/pages/Zone/Card/ZoneBasicData.vue'),
},
{
name: 'ZoneLocations',
path: 'location',
meta: {
title: 'locations',
icon: 'my_location',
},
component: () => import('src/pages/Zone/Card/ZoneLocations.vue'),
},
{
name: 'ZoneWarehouses',
path: 'warehouses',
meta: {
title: 'warehouses',
icon: 'home',
},
component: () => import('src/pages/Zone/Card/ZoneWarehouses.vue'),
},
{
name: 'ZoneHistory',
path: 'log',
meta: {
title: 'log',
icon: 'history',
},
component: () => import('src/pages/Zone/Card/ZoneLog.vue'),
},
{
name: 'ZoneEvents',
path: 'events',
meta: {
title: 'calendar',
icon: 'vn:calendar',
},
component: () => import('src/pages/Zone/Card/ZoneEvents.vue'),
},
],
};
export default {
name: 'Zone',
path: '/zone',
meta: {
title: 'zones',
icon: 'vn:zone',
moduleName: 'Zone',
keyBinding: 'z',
menu: ['ZoneList', 'ZoneDeliveryDays', 'ZoneUpcomingList', 'ZoneUpcomingDeliveries',],
},
component: RouterView,
redirect: { name: 'ZoneMain' },
children: [
{
path: '/zone',
name: 'ZoneMain',
component: () => import('src/components/common/VnModule.vue'),
redirect: { name: 'ZoneList' },
redirect: { name: 'ZoneIndexMain' },
children: [
{
path: 'list',
name: 'ZoneList',
meta: {
title: 'zonesList',
icon: 'view_list',
},
path: '',
name: 'ZoneIndexMain',
redirect: { name: 'ZoneList' },
component: () => import('src/pages/Zone/ZoneList.vue'),
children: [
{
name: 'ZoneList',
path: 'list',
meta: {
title: 'list',
icon: 'view_list',
},
},
zoneCard,
],
},
{
path: 'delivery-days',
@ -62,67 +128,5 @@ export default {
},
],
},
{
name: 'ZoneCard',
path: ':id',
component: () => import('src/pages/Zone/Card/ZoneCard.vue'),
redirect: { name: 'ZoneSummary' },
children: [
{
name: 'ZoneSummary',
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/Zone/Card/ZoneSummary.vue'),
},
{
name: 'ZoneBasicData',
path: 'basic-data',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () => import('src/pages/Zone/Card/ZoneBasicData.vue'),
},
{
name: 'ZoneLocations',
path: 'location',
meta: {
title: 'locations',
icon: 'my_location',
},
component: () => import('src/pages/Zone/Card/ZoneLocations.vue'),
},
{
name: 'ZoneWarehouses',
path: 'warehouses',
meta: {
title: 'warehouses',
icon: 'home',
},
component: () => import('src/pages/Zone/Card/ZoneWarehouses.vue'),
},
{
name: 'ZoneHistory',
path: 'log',
meta: {
title: 'log',
icon: 'history',
},
component: () => import('src/pages/Zone/Card/ZoneLog.vue'),
},
{
name: 'ZoneEvents',
path: 'events',
meta: {
title: 'calendar',
icon: 'vn:calendar',
},
component: () => import('src/pages/Zone/Card/ZoneEvents.vue'),
},
],
},
],
};