wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

Zone warehouses

This commit is contained in:
William Buezas 2024-05-17 10:57:20 -03:00
parent 475f0eda48
commit e196cf8fd5
6 changed files with 209 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/Zone/Card/ZoneCard.vue
View File

@ -1,8 +1,34 @@
<script setup> <script setup>
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
import VnCard from 'components/common/VnCard.vue'; import VnCard from 'components/common/VnCard.vue';
import ZoneDescriptor from './ZoneDescriptor.vue'; import ZoneDescriptor from './ZoneDescriptor.vue';
import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
import { useStateStore } from 'stores/useStateStore';
const { t } = useI18n();
const stateStore = useStateStore();
const route = useRoute();
const routeName = computed(() => route.name);
const searchBarDataKeys = {
ZoneWarehouses: 'ZoneWarehouses',
};
</script> </script>
<template> <template>
<template v-if="stateStore.isHeaderMounted()">
<Teleport to="#searchbar">
<VnSearchbar
:data-key="searchBarDataKeys[routeName]"
:custom-route-redirect-name="routeName"
:label="t('list.searchZone')"
:info="t('list.searchInfo')"
/>
</Teleport>
</template>
<VnCard <VnCard
data-key="Zone" data-key="Zone"
base-url="Zones" base-url="Zones"

63
src/pages/Zone/Card/ZoneCreateWarehouse.vue Normal file
View File

@ -0,0 +1,63 @@
<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
import VnRow from 'components/ui/VnRow.vue';
import FormPopup from 'components/FormPopup.vue';
import axios from 'axios';
const emit = defineEmits(['onSubmit']);
const { t } = useI18n();
const route = useRoute();
const ZoneWarehouseFormData = reactive({
warehouseFk: null,
});
const closeButton = ref(null);
const warehousesOptions = ref([]);
const createZoneWarehouse = () => {
try {
axios.post(`Zones/${route.params.id}/warehouses`, ZoneWarehouseFormData);
emit('onSubmit');
} catch (error) {
console.error(error);
}
closeForm();
};
const closeForm = () => {
if (closeButton.value) closeButton.value.click();
};
</script>
<template>
<FetchData
url="Warehouses"
:filter="{ order: 'name' }"
auto-load
@on-fetch="(data) => (warehousesOptions = data)"
/>
<FormPopup model="ZoneWarehouse" @on-submit="createZoneWarehouse()">
<template #form-inputs>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelect
:label="t('warehouses.warehouse')"
v-model="ZoneWarehouseFormData.warehouseFk"
:options="warehousesOptions"
option-value="id"
option-label="name"
hide-selected
:required="true"
/>
</div>
</VnRow>
</template>
</FormPopup>
</template>

122
src/pages/Zone/Card/ZoneWarehouses.vue
View File

@ -1,53 +1,113 @@
<script setup> <script setup>
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import VnPaginate from 'components/ui/VnPaginate.vue'; import VnPaginate from 'components/ui/VnPaginate.vue';
import CardList from 'components/CardList.vue'; import ZoneCreateWarehouse from './ZoneCreateWarehouse.vue';
import VnLv from 'components/ui/VnLv.vue';
import { useVnConfirm } from 'composables/useVnConfirm';
import { useArrayData } from 'composables/useArrayData';
import axios from 'axios';
const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const { openConfirmationModal } = useVnConfirm();
const deleteWarehouse = () => { const paginateRef = ref(null);
return true; const createWarehouseDialogRef = ref(null);
const arrayData = useArrayData('ZoneWarehouses', {
url: `Zones/${route.params.id}/warehouses`,
filter: { include: 'warehouse' },
});
const store = arrayData.store;
const urlPath = computed(() => `Zones/${route.params.id}/warehouses`);
const columns = computed(() => [
{
name: 'name',
},
{
name: 'action',
},
]);
const deleteWarehouse = async (row, rows, rowIndex) => {
try {
await axios.delete(`${urlPath.value}/${row.id}`);
if (rowIndex || rowIndex === 0) rows.splice(rowIndex, 1);
} catch (error) {
console.error(error);
}
}; };
const openCreateWarehouseForm = () => {
createWarehouseDialogRef.value.show();
};
watch(
() => route.params.id,
() => {
store.url = urlPath.value;
store.filter.include = 'warehouse';
fetchWarehouses();
}
);
const fetchWarehouses = async () => await paginateRef.value.fetch();
</script> </script>
<template> <template>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<div class="vn-card-list"> <div class="full-width" style="max-width: 400px">
<VnPaginate <VnPaginate
ref="paginateRef"
data-key="ZoneWarehouses" data-key="ZoneWarehouses"
:url="`Zones/${route.params.id}/warehouses`" :filter="{ include: 'warehouse' }"
:url="urlPath"
auto-load auto-load
> >
<template #body="{ rows }"> <template #body="{ rows }">
<CardList <QTable :rows="rows" :columns="columns" hide-header>
v-for="row of rows" <template #body="{ row, rowIndex }">
:key="row.id" <QTr>
:title="row.name" <QTd>
:id="row.id" <span>{{ row.warehouse?.name }}</span>
> </QTd>
<template #list-items> <QTd style="width: 50px !important">
<VnLv :value="row.name" /> <QIcon
<QIcon name="delete"
name="delete" size="sm"
size="sm" class="cursor-pointer"
class="cursor-pointer" color="primary"
color="primary" @click="
@click="deleteWarehouse()" openConfirmationModal(
> t('warehouses.deleteTitle'),
<QTooltip> t('warehouses.deleteSubtitle'),
{{ t('Remove row') }} () => deleteWarehouse(row, rows, rowIndex)
</QTooltip> )
</QIcon> "
>
<QTooltip>
{{ t('warehouses.delete') }}
</QTooltip>
</QIcon>
</QTd>
</QTr>
</template> </template>
</CardList> </QTable>
</template> </template>
</VnPaginate> </VnPaginate>
</div> </div>
<QPageSticky position="bottom-right" :offset="[18, 18]">
<QBtn fab icon="add" color="primary" @click="openCreateWarehouseForm()">
<QTooltip>{{ t('warehouses.add') }}</QTooltip>
<QDialog ref="createWarehouseDialogRef">
<ZoneCreateWarehouse @on-submit="fetchWarehouses()" />
</QDialog>
</QBtn>
</QPageSticky>
</QPage> </QPage>
</template> </template>
<i18n>
es:
Remove row: Eliminar fila
</i18n>

7
src/pages/Zone/locale/en.yml
View File

@ -5,6 +5,7 @@ zone:
zoneCreate: Create zone zoneCreate: Create zone
deliveryList: Delivery days deliveryList: Delivery days
upcomingList: Upcoming deliveries upcomingList: Upcoming deliveries
warehouses: Warehouses
list: list:
clone: Clone clone: Clone
id: Id id: Id
@ -40,3 +41,9 @@ summary:
filterPanel: filterPanel:
name: Name name: Name
agencyModeFk: Agency agencyModeFk: Agency
warehouses:
delete: Delete
deleteTitle: This item will be deleted
deleteSubtitle: Are you sure you want to continue?
warehouse: Warehouse
add: Add

7
src/pages/Zone/locale/es.yml
View File

@ -5,6 +5,7 @@ zone:
zoneCreate: Nueva zona zoneCreate: Nueva zona
deliveryList: Días de entrega deliveryList: Días de entrega
upcomingList: Próximos repartos upcomingList: Próximos repartos
warehouses: Almacenes
list: list:
clone: Clonar clone: Clonar
id: Id id: Id
@ -40,3 +41,9 @@ summary:
filterPanel: filterPanel:
name: Nombre name: Nombre
agencyModeFk: Agencia agencyModeFk: Agencia
warehouses:
delete: Eliminar
deleteTitle: Este elemento será eliminado
deleteSubtitle: ¿Seguro que quieres continuar?
warehouse: Almacén
add: Añadir

107
src/router/modules/zone.js
View File

@ -12,7 +12,7 @@ export default {
redirect: { name: 'ZoneMain' }, redirect: { name: 'ZoneMain' },
menus: { menus: {
main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'], main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
card: ['ZoneBasicData', 'ZoneHistory', 'ZoneLocations'], card: ['ZoneBasicData', 'ZoneWarehouses', 'ZoneHistory', 'ZoneLocations'],
}, },
children: [ children: [
{ {
@ -48,15 +48,6 @@ export default {
}, },
component: () => import('src/pages/Zone/ZoneCreate.vue'), component: () => import('src/pages/Zone/ZoneCreate.vue'),
}, },
// {
// path: 'counter',
// name: 'ZoneCounter',
// meta: {
// title: 'zoneCounter',
// icon: 'add_circle',
// },
// component: () => import('src/pages/Zone/ZoneCounter.vue'),
// },
], ],
}, },
{ {
@ -74,6 +65,15 @@ export default {
}, },
component: () => import('src/pages/Zone/Card/ZoneSummary.vue'), 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', name: 'ZoneLocations',
path: 'location', path: 'location',
@ -84,13 +84,13 @@ export default {
component: () => import('src/pages/Zone/Card/ZoneLocations.vue'), component: () => import('src/pages/Zone/Card/ZoneLocations.vue'),
}, },
{ {
name: 'ZoneBasicData', name: 'ZoneWarehouses',
path: 'basic-data', path: 'warehouses',
meta: { meta: {
title: 'basicData', title: 'warehouses',
icon: 'vn:settings', icon: 'home',
}, },
component: () => import('src/pages/Zone/Card/ZoneBasicData.vue'), component: () => import('src/pages/Zone/Card/ZoneWarehouses.vue'),
}, },
{ {
name: 'ZoneHistory', name: 'ZoneHistory',
@ -101,83 +101,6 @@ export default {
}, },
component: () => import('src/pages/Zone/Card/ZoneLog.vue'), component: () => import('src/pages/Zone/Card/ZoneLog.vue'),
}, },
// {
// path: '/zone/delivery',
// name: 'ZoneDeliveryMain',
// component: () => import('src/pages/Zone/ZoneMain.vue'),
// redirect: { name: 'ZoneDeliveryList' },
// children: [
// {
// path: 'list',
// name: 'ZoneDeliveryList',
// meta: {
// title: 'deliveryList',
// icon: 'today',
// },
// component: () =>
// import('src/pages/Zone/Delivery/ZoneDeliveryList.vue'),
// },
// {
// path: 'create',
// name: 'ZoneDeliveryCreate',
// meta: {
// title: 'deliveryCreate',
// icon: 'create',
// },
// component: () =>
// import('src/pages/Zone/Delivery/ZoneDeliveryCreate.vue'),
// },
// {
// path: ':id/edit',
// name: 'ZoneDeliveryEdit',
// meta: {
// title: 'deliveryEdit',
// icon: 'edit',
// },
// component: () =>
// import('src/pages/Zone/Delivery/ZoneDeliveryCreate.vue'),
// },
// ],
// },
// {
// path: '/zone/upcoming',
// name: 'ZoneUpcomingMain',
// component: () => import('src/pages/Zone/ZoneMain.vue'),
// redirect: { name: 'ZoneUpcomingList' },
// children: [
// {
// path: 'list',
// name: 'ZoneUpcomingList',
// meta: {
// title: 'upcomingList',
// icon: 'today',
// },
// component: () =>
// import('src/pages/Zone/Upcoming/ZoneUpcomingList.vue'),
// },
// {
// path: 'create',
// name: 'ZoneUpcomingCreate',
// meta: {
// title: 'upcomingCreate',
// icon: 'create',
// },
// component: () =>
// import('src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue'),
// },
// {
// path: ':id/edit',
// name: 'ZoneUpcomingEdit',
// meta: {
// title: 'upcomingEdit',
// icon: 'edit',
// },
// component: () =>
// import('src/pages/Zone/Upcoming/ZoneUpcomingCreate.vue'),
// },
// ],
// },
], ],
}, },
], ],