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

Zone create #371

Merged
jsegarra merged 5 commits from :feature/ZoneCreate into dev 2024-05-15 07:49:35 +00:00
Conversation 2 Commits 5 Files Changed 7 +140 -204
7 changed files with 140 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1236,16 +1236,10 @@ item/itemType:
itemType: Item type
basicData: Basic data
summary: Summary
zone:
pageTitles:
zones: Zone
zonesList: Zones
deliveryList: Delivery days
upcomingList: Upcoming deliveries
monitor:
pageTitles:
monitors: Monitores
list: Listado
monitors: Monitors
list: List
components:
topbar: {}
itemsFilterPanel:

2
src/pages/Zone/Card/ZoneDescriptor.vue
View File

@ -60,7 +60,7 @@ const setData = (entity) => {
flat
dense
size="md"
icon="preview"
icon="vn:zone"
color="white"
class="link"
:to="{ name: 'ZoneList' }"

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

@ -32,7 +32,7 @@ const filter = computed(() => {
fields: ['name'],
},
where: {
id: route.params.id,
id: entityId,
},
};
return filter;

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

@ -1,184 +1,114 @@
<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(),
isVolumetric: false,
});
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,
const redirectToZoneLocations = (_, { id }) => {
router.push({ name: 'ZoneLocations', params: { id } });
};
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
);
});
}
</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('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('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('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
v-model="data.warehouseFk"
/>
<VnSelect
:label="t('create.agency')"
:options="agencyOptions"
hide-selected
option-label="name"
option-value="id"
v-model="data.agencyModeFk"
:required="true"
/>
</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')"
: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"
type="number"
min="0"
/>
</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('type.submit')" type="submit" color="primary" />
<QBtn
:label="t('type.reset')"
type="reset"
color="primary"
flat
class="q-ml-sm"
<VnInput
v-model="data.bonus"
:label="t('create.bonus')"
type="number"
min="0"
/>
</div>
</QForm>
</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>

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

@ -2,6 +2,7 @@ zone:
pageTitles:
zones: Zone
zonesList: Zones
zoneCreate: Create zone
deliveryList: Delivery days
upcomingList: Upcoming deliveries
list:
@ -13,18 +14,19 @@ list:
price: Price
create: Create zone
openSummary: Details
confirmCloneTitle: All it's properties will be copied
confirmCloneSubtitle: Do you want to clone this zone?
searchZone: Search zones
searchInfo: Search zone by id or name
confirmCloneTitle: All it's properties will be copied
confirmCloneSubtitle: Do you want to clone this zone?
create:
name: Name
warehouse: Warehouse
agency: Agency
close: Close
travelingDays: Traveling days
closingHour: Closing hour
price: Price
type:
submit: Save
reset: Reset
bonus: Bonus
volumetric: Volumetric
summary:
agency: Agency
price: Price

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

@ -2,6 +2,7 @@ zone:
pageTitles:
zones: Zonas
zonesList: Zonas
zoneCreate: Nueva zona
deliveryList: Días de entrega
upcomingList: Próximos repartos
list:
@ -13,18 +14,19 @@ list:
price: Precio
create: Crear zona
openSummary: Detalles
confirmCloneTitle: Todas sus propiedades serán copiadas
confirmCloneSubtitle: ¿Seguro que quieres clonar esta zona?
searchZone: Buscar zonas
searchInfo: Buscar zonas por identificador o nombre
confirmCloneTitle: Todas sus propiedades serán copiadas
confirmCloneSubtitle: ¿Seguro que quieres clonar esta zona?
create:
name: Nombre
warehouse: Almacén
agency: Agencia
close: Cierre
travelingDays: Días de viaje
closingHour: Hora de cierre
price: Precio
type:
submit: Guardar
reset: Reiniciar
bonus: Bonificación
volumetric: Volumétrico
summary:
agency: Agencia
price: Precio
@ -38,5 +40,3 @@ summary:
filterPanel:
name: Nombre
agencyModeFk: Agencia
Search zones: Buscar zonas
You can search by zone reference: Puedes buscar por referencia de la zona

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

@ -12,7 +12,7 @@ export default {
redirect: { name: 'ZoneMain' },
menus: {
main: ['ZoneList', 'ZoneDeliveryList', 'ZoneUpcomingList'],
card: ['ZoneBasicData', 'ZoneHistory'],
card: ['ZoneBasicData', 'ZoneHistory', 'ZoneLocations'],
},
children: [
{
@ -48,15 +48,15 @@ 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'),
},
// {
// path: 'counter',
// name: 'ZoneCounter',
// meta: {
// title: 'zoneCounter',
// icon: 'add_circle',
// },
// component: () => import('src/pages/Zone/ZoneCounter.vue'),
// },
],
},
{
@ -74,6 +74,15 @@ 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'),
},
{
name: 'ZoneBasicData',
path: 'basic-data',
@ -92,6 +101,7 @@ export default {
},
component: () => import('src/pages/Zone/Card/ZoneLog.vue'),
},
// {
// path: '/zone/delivery',
// name: 'ZoneDeliveryMain',