verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 62 Releases Wiki Activity

Zone create

This commit is contained in:
William Buezas 2024-05-09 11:32:04 -03:00
parent fcb6f8dd49
commit d227d4b09b
10 changed files with 217 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/i18n/locale/en.yml
View File

@ -1238,6 +1238,8 @@ zone:
pageTitles:
zones: Zone
zonesList: Zones
zoneCreate: New zone
locations: Locations
deliveryList: Delivery days
upcomingList: Upcoming deliveries
components:

2
src/i18n/locale/es.yml
View File

@ -1237,6 +1237,8 @@ zone:
pageTitles:
zones: Zona
zonesList: Zonas
zoneCreate: Nueva zona
locations: Localizaciones
deliveryList: Días de entrega
upcomingList: Próximos repartos
components:

4
src/pages/Zone/Card/ZoneSummary.vue
View File

@ -50,10 +50,10 @@ const filter = computed(() => {
/>
<VnLv :label="t('zone.card.name')" :value="zone.user?.nickname" />
<VnLv
:label="t('zone.list.department')"
:label="t('list.department')"
:value="zone.department?.department?.name"
/>
<VnLv :label="t('zone.list.email')" :value="zone.user.email" copy />
<VnLv :label="t('list.email')" :value="zone.user.email" copy />
<VnLv :label="t('zone.summary.boss')" link>
<template #value>
<VnUserLink

2
src/pages/Zone/Delivery/ZoneDeliveryList.vue
View File

@ -63,7 +63,7 @@ async function remove(row) {
outline
/>
<QBtn
:label="t('zone.list.remove')"
:label="t('list.remove')"
@click.stop="remove(row)"
color="primary"
style="margin-top: 15px"

2
src/pages/Zone/Upcoming/ZoneUpcomingList.vue
View File

@ -63,7 +63,7 @@ async function remove(row) {
outline
/>
<QBtn
:label="t('zone.list.remove')"
:label="t('list.remove')"
@click.stop="remove(row)"
color="primary"
style="margin-top: 15px"

253
src/pages/Zone/ZoneCreate.vue
View File

@ -1,184 +1,113 @@
<script setup>
import { computed, onMounted, onUpdated, ref } from 'vue';
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
import { useRouter } from 'vue-router';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';
import VnInput from 'src/components/common/VnInput.vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
onMounted(() => fetch());
onUpdated(() => fetch());
import VnInputTime from 'components/common/VnInputTime.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const $props = defineProps({
id: {
type: Number,
required: false,
default: null,
},
const newZoneForm = reactive({
travelingDays: 0,
price: 0.2,
bonus: 0.2,
hour: Date.vnNew(),
});
const entityId = computed(() => $props.id || route.params.id);
const warehousesOptions = ref([]);
const agencyOptions = ref([]);
let zoneTypes = [];
let originalData = {};
const zone = ref({});
const filteredZoneTypes = ref(zoneTypes);
async function onSubmit() {
try {
const params = {
id: entityId.value,
label: zone.value.label,
plate: zone.value.plate,
volume: zone.value.volume,
typeFk: zone.value.typeFk,
};
await axios.patch('Zones', params).then((res) => {
if (res.status == 200) router.push({ path: `/zone/list` });
});
} catch (error) {
//
}
}
async function onReset() {
if (entityId.value) {
zone.value = { ...originalData };
} else {
zone.value = {};
}
}
async function fetch() {
try {
await axios.get('ZoneTypes').then(async (res) => {
if (res.data) {
filteredZoneTypes.value = zoneTypes = res.data;
}
});
if (entityId.value) {
await axios.get(`Zones/${entityId.value}`).then(async (res) => {
const data = res.data;
if (data) {
zone.value.label = data.label;
zone.value.plate = data.plate;
zone.value.volume = data.volume;
zone.value.typeFk = data.typeFk;
originalData = { ...zone.value };
}
});
}
} catch (e) {
//
}
}
function filterType(val, update) {
update(() => {
const needle = val.toLowerCase();
filteredZoneTypes.value = zoneTypes.filter(
(v) => v.name.toLowerCase().indexOf(needle) > -1
);
});
}
const redirectToZoneLocations = (_, { id }) => {
router.push({ name: 'ZoneLocations', params: { id } });
};
</script>
<template>
<QPage class="q-pa-sm q-mx-xl">
<QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
<QCard class="q-pa-md">
<div class="row q-col-gutter-md">
<div class="col">
<QInput
filled
v-model="zone.label"
:label="t('zone.create.name')"
type="number"
min="0"
:rules="[(val) => !!val || t('zone.warnings.labelNotEmpty')]"
<FetchData
url="Warehouses"
:filter="{ order: ['name'] }"
@on-fetch="(data) => (warehousesOptions = data)"
auto-load
/>
</div>
<div class="col">
<FetchData
url="AgencyModes/isActive"
:filter="{ order: ['name'] }"
@on-fetch="(data) => (agencyOptions = data)"
auto-load
/>
<QPage>
<VnSubToolbar />
<FormModel
url-create="Zones"
model="Zones"
:form-initial-data="newZoneForm"
@on-data-saved="redirectToZoneLocations"
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<VnInput
filled
v-model="zone.plate"
:label="t('zone.create.agency')"
:rules="[(val) => !!val || t('zone.warnings.plateNotEmpty')]"
v-model="data.name"
:label="t('create.name')"
:required="true"
/>
</div>
</div>
<div class="row q-col-gutter-md">
<div class="col">
<QInput
filled
v-model="zone.volume"
:label="t('zone.create.close')"
type="number"
min="0"
:rules="[(val) => !!val || t('zone.warnings.volumeNotEmpty')]"
/>
</div>
<div class="col">
<QSelect
filled
v-model="zone.typeFk"
use-input
fill-input
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnSelect
:label="t('create.warehouse')"
:options="warehousesOptions"
hide-selected
input-debounce="0"
option-label="name"
option-value="id"
emit-value
map-options
:label="t('zone.create.price')"
:options="filteredZoneTypes"
:rules="[(val) => !!val || t('zone.warnings.typeNotEmpty')]"
@filter="filterType"
>
<template v-if="zone.typeFk" #append>
<QIcon
name="cancel"
@click.stop.prevent="zone.typeFk = null"
class="cursor-pointer"
v-model="data.warehouseFk"
/>
</template>
<template #no-option>
<QItem>
<QItemSection class="text-grey">
{{ t('zone.warnings.noData') }}
</QItemSection>
</QItem>
</template>
</QSelect>
</div>
</div>
</QCard>
<div class="q-mt-md">
<QBtn :label="t('zone.type.submit')" type="submit" color="primary" />
<QBtn
:label="t('zone.type.reset')"
type="reset"
color="primary"
flat
class="q-ml-sm"
<VnSelect
:label="t('create.agency')"
:options="agencyOptions"
hide-selected
option-label="name"
option-value="id"
v-model="data.agencyModeFk"
:required="true"
/>
</div>
</QForm>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnInput
v-model="data.travelingDays"
:label="t('create.travelingDays')"
type="number"
min="0"
/>
<VnInputTime v-model="data.hour" :label="t('create.closingHour')" />
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<VnInput
v-model="data.price"
:label="t('create.price')"
type="number"
min="0"
/>
<VnInput
v-model="data.bonus"
:label="t('create.bonus')"
type="number"
min="0"
/>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<QCheckbox
:label="t('create.volumetric')"
v-model="data.isVolumetric"
:toggle-indeterminate="false"
/>
</VnRow>
</template>
</FormModel>
</QPage>
</template>
<style lang="scss" scoped>
.q-page {
display: flex;
justify-content: center;
align-items: flex-start;
}
.q-form {
width: 70%;
}
</style>

20
src/pages/Zone/ZoneList.vue
View File

@ -30,7 +30,7 @@ async function remove(row) {
try {
await axios.delete(`Zones/${row.id}`).then(async () => {
quasar.notify({
message: t('zone.list.removeItem'),
message: t('list.removeItem'),
type: 'positive',
});
store.data.splice(store.data.indexOf(row), 1);
@ -61,23 +61,23 @@ async function remove(row) {
>
<template #list-items>
<VnLv
:label="t('zone.list.id')"
:title-label="t('zone.list.id')"
:label="t('list.id')"
:title-label="t('list.id')"
:value="row.id"
/>
<VnLv :label="t('zone.list.name')" :value="row?.name" />
<VnLv :label="t('list.name')" :value="row?.name" />
<VnLv
:label="t('zone.list.agency')"
:label="t('list.agency')"
:options="agencyOptions"
option-value="id"
option-label="name"
:value="row?.agencyFk"
/>
<VnLv
:label="t('zone.list.close')"
:label="t('list.close')"
:value="toTimeFormat(row?.hour)"
/>
<VnLv :label="t('zone.list.price')" :value="row?.price" />
<VnLv :label="t('list.price')" :value="row?.price" />
</template>
<template #actions>
<QBtn
@ -86,14 +86,14 @@ async function remove(row) {
outline
/>
<QBtn
:label="t('zone.list.openSummary')"
:label="t('list.openSummary')"
@click.stop="viewSummary(row.id, ZoneSummary)"
color="primary"
style="margin-top: 15px"
/>
<!--AQUI PONER BOTÓN CLONAR-->
<QBtn
:label="t('zone.list.clone')"
:label="t('list.clone')"
@click.stop="remove(row)"
color="primary"
style="margin-top: 15px"
@ -105,7 +105,7 @@ async function remove(row) {
</div>
<QPageSticky position="bottom-right" :offset="[18, 18]">
<QBtn @click="create" fab icon="add" color="primary">
<QTooltip>{{ t('zone.list.create') }}</QTooltip>
<QTooltip>{{ t('list.create') }}</QTooltip>
</QBtn>
</QPageSticky>
</QPage>

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

@ -1,5 +1,4 @@
zone:
list:
list:
volume: Volume
clone: Clone
id: Id
@ -9,11 +8,15 @@ zone:
price: Price
create: Create zone
openSummary: Details
create:
create:
name: Name
warehouse: Warehouse
agency: Agency
close: Close
travelingDays: Traveling days
closingHour: Closing hour
price: Price
type:
bonus: Bonus
volumetric: Volumetric
type:
submit: Save
reset: Reset

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

@ -1,5 +1,4 @@
zone:
list:
list:
volume: Volumen
clone: Clonar
id: Id
@ -9,11 +8,15 @@ zone:
price: Precio
create: Crear zona
openSummary: Detalles
create:
create:
name: Nombre
warehouse: Almacén
agency: Agencia
close: Cierre
travelingDays: Días de viaje
closingHour: Hora de cierre
price: Precio
type:
bonus: Bonificación
volumetric: Volumétrico
type:
submit: Guardar
reset: Reiniciar

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

@ -11,58 +11,54 @@ export default {
component: RouterView,
redirect: { name: 'ZoneMain' },
menus: {
main: [
/*'ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'*/
],
card: [
//
],
main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
card: ['ZoneLocations'],
},
children: [
// {
// path: '/zone',
// name: 'ZoneMain',
// component: () => import('src/pages/Zone/ZoneMain.vue'),
// redirect: { name: 'ZoneList' },
// children: [
// {
// path: 'list',
// name: 'ZoneList',
// meta: {
// title: 'zonesList',
// icon: 'vn:zone',
// },
// component: () => import('src/pages/Zone/ZoneList.vue'),
// },
// {
// path: 'create',
// name: 'ZoneCreate',
// meta: {
// title: 'zoneCreate',
// icon: 'create',
// },
// component: () => import('src/pages/Zone/ZoneCreate.vue'),
// },
// {
// path: ':id/edit',
// name: 'ZoneEdit',
// meta: {
// title: 'zoneEdit',
// icon: 'edit',
// },
// component: () => import('src/pages/Zone/ZoneCreate.vue'),
// },
// {
// path: 'counter',
// name: 'ZoneCounter',
// meta: {
// title: 'zoneCounter',
// icon: 'add_circle',
// },
// component: () => import('src/pages/Zone/ZoneCounter.vue'),
// },
// ],
// },
{
path: '/zone',
name: 'ZoneMain',
component: () => import('src/pages/Zone/ZoneMain.vue'),
redirect: { name: 'ZoneList' },
children: [
{
path: 'list',
name: 'ZoneList',
meta: {
title: 'zonesList',
icon: 'vn:zone',
},
component: () => import('src/pages/Zone/ZoneList.vue'),
},
{
path: 'create',
name: 'ZoneCreate',
meta: {
title: 'zoneCreate',
icon: 'create',
},
component: () => import('src/pages/Zone/ZoneCreate.vue'),
},
{
path: ':id/edit',
name: 'ZoneEdit',
meta: {
title: 'zoneEdit',
icon: 'edit',
},
component: () => import('src/pages/Zone/ZoneCreate.vue'),
},
{
path: 'counter',
name: 'ZoneCounter',
meta: {
title: 'zoneCounter',
icon: 'add_circle',
},
component: () => import('src/pages/Zone/ZoneCounter.vue'),
},
],
},
{
name: 'ZoneCard',
path: ':id',
@ -78,6 +74,16 @@ export default {
},
component: () => import('src/pages/Zone/Card/ZoneSummary.vue'),
},
{
name: 'ZoneLocations',
path: 'location',
meta: {
title: 'locations',
icon: 'vn:greuge',
},
component: () => import('src/pages/Zone/Card/ZoneLocations.vue'),
},
// {
// path: '/zone/delivery',
// name: 'ZoneDeliveryMain',