WIP: refactor: #8322 changed zone component to use VnSection/VnCardBeta #1133
|
@ -49,6 +49,7 @@ const $props = defineProps({
|
||||||
});
|
});
|
||||||
|
|
||||||
const vnInputRef = ref(null);
|
const vnInputRef = ref(null);
|
||||||
|
const showPassword = ref(false);
|
||||||
const value = computed({
|
const value = computed({
|
||||||
get() {
|
get() {
|
||||||
return $props.modelValue;
|
return $props.modelValue;
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
import { ref, computed, watch, onBeforeMount } from 'vue';
|
import { ref, computed, watch, onBeforeMount } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
|
import SkeletonSummary from 'components/ui/SkeletonSummary.vue';
|
||||||
|
import VnLv from 'src/components/ui/VnLv.vue';
|
||||||
import { useArrayData } from 'src/composables/useArrayData';
|
import { useArrayData } from 'src/composables/useArrayData';
|
||||||
import { isDialogOpened } from 'src/filters';
|
import { isDialogOpened } from 'src/filters';
|
||||||
import VnMoreOptions from './VnMoreOptions.vue';
|
import VnMoreOptions from './VnMoreOptions.vue';
|
||||||
|
|
|
@ -3,7 +3,6 @@ import axios from 'axios';
|
||||||
import { computed, onMounted, ref, toRefs } from 'vue';
|
import { computed, onMounted, ref, toRefs } from 'vue';
|
||||||
import { useI18n } from 'vue-i18n';
|
import { useI18n } from 'vue-i18n';
|
||||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
import { useVnConfirm } from 'composables/useVnConfirm';
|
||||||
import { useRoute } from 'vue-router';
|
|
||||||
import { useAcl } from 'src/composables/useAcl';
|
import { useAcl } from 'src/composables/useAcl';
|
||||||
import { useArrayData } from 'src/composables/useArrayData';
|
import { useArrayData } from 'src/composables/useArrayData';
|
||||||
import { useState } from 'src/composables/useState';
|
import { useState } from 'src/composables/useState';
|
||||||
|
@ -14,15 +13,13 @@ import { useQuasar } from 'quasar';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
|
|
||||||
const $props = defineProps({
|
const $props = defineProps({
|
||||||
hasAccount: {
|
entityId: {
|
||||||
type: Boolean,
|
type: Number,
|
||||||
default: false,
|
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { hasAccount } = toRefs($props);
|
|
||||||
const { openConfirmationModal } = useVnConfirm();
|
const { openConfirmationModal } = useVnConfirm();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
@ -37,9 +34,9 @@ const hasSysadminAccess = ref();
|
||||||
|
|
||||||
async function updateStatusAccount(active) {
|
async function updateStatusAccount(active) {
|
||||||
if (active) {
|
if (active) {
|
||||||
await axios.post(`Accounts`, { id: entityId.value });
|
await axios.post(`Accounts`, { id: $props.entityId });
|
||||||
} else {
|
} else {
|
||||||
await axios.delete(`Accounts/${entityId.value}`);
|
await axios.delete(`Accounts/${$props.entityId}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
account.value.hasAccount = active;
|
account.value.hasAccount = active;
|
||||||
|
@ -50,7 +47,7 @@ async function updateStatusAccount(active) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
async function updateStatusUser(active) {
|
async function updateStatusUser(active) {
|
||||||
await axios.patch(`VnUsers/${entityId.value}`, { active });
|
await axios.patch(`VnUsers/${$props.entityId}`, { active });
|
||||||
account.value.active = active;
|
account.value.active = active;
|
||||||
const status = active ? 'activate' : 'deactivate';
|
const status = active ? 'activate' : 'deactivate';
|
||||||
notify({
|
notify({
|
||||||
|
|
|
@ -483,6 +483,96 @@ onBeforeMount(async () => {
|
||||||
</template>
|
</template>
|
||||||
</VnSelect>
|
</VnSelect>
|
||||||
</template>
|
</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>
|
</VnTable>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -53,6 +53,7 @@ const transfer = ref({
|
||||||
});
|
});
|
||||||
const tableRef = ref([]);
|
const tableRef = ref([]);
|
||||||
const canProceed = ref();
|
const canProceed = ref();
|
||||||
|
const isLoading = ref(false);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => route.params.id,
|
() => route.params.id,
|
||||||
|
@ -213,6 +214,9 @@ const updateQuantity = async ({ quantity, id }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const addSale = async (sale) => {
|
const addSale = async (sale) => {
|
||||||
|
if (isLoading.value) return;
|
||||||
|
|
||||||
|
isLoading.value = true;
|
||||||
const params = {
|
const params = {
|
||||||
barcode: sale.itemFk,
|
barcode: sale.itemFk,
|
||||||
quantity: sale.quantity,
|
quantity: sale.quantity,
|
||||||
|
|
|
@ -1,13 +1,10 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
import { computed } from 'vue';
|
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 ZoneDescriptor from './ZoneDescriptor.vue';
|
||||||
import ZoneFilterPanel from '../ZoneFilterPanel.vue';
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const routeName = computed(() => route.name);
|
const routeName = computed(() => route.name);
|
||||||
|
|
||||||
|
@ -18,21 +15,5 @@ function notIsLocations(ifIsFalse, ifIsTrue) {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<VnCard
|
<VnCardBeta data-key="zone" base-url="Zones" :descriptor="ZoneDescriptor" />
|
||||||
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}%` } };
|
|
||||||
}),
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -258,4 +258,4 @@ function showValidAddresses(row) {
|
||||||
es:
|
es:
|
||||||
Search zone: Buscar zona
|
Search zone: Buscar zona
|
||||||
You can search zones by id or name: Puedes buscar zonas por id o nombre
|
You can search zones by id or name: Puedes buscar zonas por id o nombre
|
||||||
</i18n>
|
</i18n>
|
|
@ -24,7 +24,7 @@ list:
|
||||||
price: Price
|
price: Price
|
||||||
create: Create zone
|
create: Create zone
|
||||||
openSummary: Details
|
openSummary: Details
|
||||||
searchZone: Search zones
|
search: Search zones
|
||||||
searchLocation: Search locations
|
searchLocation: Search locations
|
||||||
searchInfo: Search zone by id or name
|
searchInfo: Search zone by id or name
|
||||||
confirmCloneTitle: All it's properties will be copied
|
confirmCloneTitle: All it's properties will be copied
|
||||||
|
|
|
@ -1,24 +1,12 @@
|
||||||
import { RouterView } from 'vue-router';
|
import { RouterView } from 'vue-router';
|
||||||
|
|
||||||
export default {
|
const zoneCard = {
|
||||||
path: '/zone',
|
|
||||||
name: 'Zone',
|
name: 'Zone',
|
||||||
|
path: '/zone',
|
||||||
|
component: () => import('src/pages/Zone/Card/ZoneCard.vue'),
|
||||||
|
redirect: { name: 'ZoneSummary' },
|
||||||
meta: {
|
meta: {
|
||||||
title: 'zones',
|
menu: [
|
||||||
icon: 'vn:zone',
|
|
||||||
moduleName: 'Zone',
|
|
||||||
keyBinding: 'z',
|
|
||||||
},
|
|
||||||
component: RouterView,
|
|
||||||
redirect: { name: 'ZoneMain' },
|
|
||||||
menus: {
|
|
||||||
main: [
|
|
||||||
'ZoneList',
|
|
||||||
'ZoneDeliveryDays',
|
|
||||||
'ZoneUpcomingList',
|
|
||||||
'ZoneUpcomingDeliveries',
|
|
||||||
],
|
|
||||||
card: [
|
|
||||||
'ZoneBasicData',
|
'ZoneBasicData',
|
||||||
'ZoneWarehouses',
|
'ZoneWarehouses',
|
||||||
'ZoneHistory',
|
'ZoneHistory',
|
||||||
|
@ -26,21 +14,99 @@ export default {
|
||||||
'ZoneEvents',
|
'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: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '/zone',
|
path: '/zone',
|
||||||
name: 'ZoneMain',
|
name: 'ZoneMain',
|
||||||
component: () => import('src/components/common/VnModule.vue'),
|
component: () => import('src/components/common/VnModule.vue'),
|
||||||
redirect: { name: 'ZoneList' },
|
redirect: { name: 'ZoneIndexMain' },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'list',
|
path: '',
|
||||||
name: 'ZoneList',
|
name: 'ZoneIndexMain',
|
||||||
meta: {
|
redirect: { name: 'ZoneList' },
|
||||||
title: 'zonesList',
|
|
||||||
icon: 'view_list',
|
|
||||||
},
|
|
||||||
component: () => import('src/pages/Zone/ZoneList.vue'),
|
component: () => import('src/pages/Zone/ZoneList.vue'),
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: 'ZoneList',
|
||||||
|
path: 'list',
|
||||||
|
meta: {
|
||||||
|
title: 'list',
|
||||||
|
icon: 'view_list',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
zoneCard,
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'delivery-days',
|
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'),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue