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

Merge pull request 'Zone warehouses' (!385) from hyervoni/salix-front-mindshore:feature/ZoneWarehouses into dev 

Reviewed-on: verdnatura/salix-front#385
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
This commit is contained in:
Javier Segarra 2024-05-20 06:44:36 +00:00
parent bfbe71c63e c40f322a8f
commit 8787db8622
7 changed files with 207 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,35 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
import VnCard from 'components/common/VnCard.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',
ZoneSummary: 'ZoneSummary',
};
</script>
<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
data-key="Zone"
base-url="Zones"

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

@ -0,0 +1,47 @@
<script setup>
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
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';
const emit = defineEmits(['onSubmitCreateWarehouse']);
const { t } = useI18n();
const ZoneWarehouseFormData = reactive({
warehouseFk: null,
});
const warehousesOptions = ref([]);
</script>
<template>
<FetchData
url="Warehouses"
:filter="{ order: 'name' }"
auto-load
@on-fetch="(data) => (warehousesOptions = data)"
/>
<FormPopup
model="ZoneWarehouse"
@on-submit="emit('onSubmitCreateWarehouse', ZoneWarehouseFormData)"
>
<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>

10
src/pages/Zone/Card/ZoneDescriptorMenuItems.vue
View File

@ -74,20 +74,20 @@ function openConfirmDialog(callback) {
<QItemSection avatar>
<QIcon name="delete" />
</QItemSection>
<QItemSection>{{ t('deleteOrder') }}</QItemSection>
<QItemSection>{{ t('deleteZone') }}</QItemSection>
</QItem>
</template>
<i18n>
en:
deleteOrder: Delete order
deleteZone: Delete zone
confirmDeletion: Confirm deletion
confirmDeletionMessage: Are you sure you want to delete this order?
confirmDeletionMessage: Are you sure you want to delete this zone?
es:
To clone zone: Clonar zone
deleteOrder: Eliminar pedido
deleteZone: Eliminar zona
confirmDeletion: Confirmar eliminación
confirmDeletionMessage: Seguro que quieres eliminar este pedido?
confirmDeletionMessage: Seguro que quieres eliminar este zona?
</i18n>

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

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

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

@ -3,8 +3,10 @@ zone:
zones: Zone
zonesList: Zones
zoneCreate: Create zone
locations: Locations
deliveryDays: Delivery days
upcomingList: Upcoming deliveries
warehouses: Warehouses
list:
clone: Clone
id: Id
@ -56,3 +58,9 @@ zoneClosingTable:
price: Price
preview: Preview
zones: Zones
warehouses:
delete: Delete
deleteTitle: This item will be deleted
deleteSubtitle: Are you sure you want to continue?
warehouse: Warehouse
add: Add

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

@ -3,8 +3,10 @@ zone:
zones: Zonas
zonesList: Zonas
zoneCreate: Nueva zona
locations: Localizaciones
deliveryDays: Días de entrega
upcomingList: Próximos repartos
warehouses: Almacenes
list:
clone: Clonar
id: Id
@ -58,3 +60,9 @@ zoneClosingTable:
zones: Zonas
Search zones: Buscar zonas
You can search by zone reference: Puedes buscar por referencia de la zona
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' },
menus: {
main: ['ZoneList', 'ZoneDeliveryDays', 'ZoneUpcomingList'],
card: ['ZoneBasicData', 'ZoneHistory', 'ZoneLocations'],
card: ['ZoneBasicData', 'ZoneWarehouses', 'ZoneHistory', 'ZoneLocations'],
},
children: [
{
@ -57,15 +57,6 @@ export default {
},
component: () => import('src/pages/Zone/ZoneCreate.vue'),
},
// {
// path: 'counter',
// name: 'ZoneCounter',
// meta: {
// title: 'zoneCounter',
// icon: 'add_circle',
// },
// component: () => import('src/pages/Zone/ZoneCounter.vue'),
// },
],
},
{
@ -83,6 +74,15 @@ export default {
},
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',
@ -93,13 +93,13 @@ export default {
component: () => import('src/pages/Zone/Card/ZoneLocations.vue'),
},
{
name: 'ZoneBasicData',
path: 'basic-data',
name: 'ZoneWarehouses',
path: 'warehouses',
meta: {
title: 'basicData',
icon: 'vn:settings',
title: 'warehouses',
icon: 'home',
},
component: () => import('src/pages/Zone/Card/ZoneBasicData.vue'),
component: () => import('src/pages/Zone/Card/ZoneWarehouses.vue'),
},
{
name: 'ZoneHistory',
@ -110,83 +110,6 @@ export default {
},
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'),
// },
// ],
// },
],
},
],