Merge pull request 'Zone create' (!371) from hyervoni/salix-front-mindshore:feature/ZoneCreate into dev

Reviewed-on: verdnatura/salix-front#371
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>

src/i18n/locale/en.yml

@@ -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
+        monitors: Monitors
-        list: Listado
+        list: List
 components:
     topbar: {}
     itemsFilterPanel:

src/pages/Zone/Card/ZoneDescriptor.vue

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

src/pages/Zone/Card/ZoneSummary.vue

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

src/pages/Zone/ZoneCreate.vue

@@ -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 VnInputTime from 'components/common/VnInputTime.vue';
-import { useRoute, useRouter } from 'vue-router';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import axios from 'axios';
-
-onMounted(() => fetch());
-onUpdated(() => fetch());
 
 const { t } = useI18n();
-const route = useRoute();
 const router = useRouter();
-const $props = defineProps({
+
-    id: {
+const newZoneForm = reactive({
-        type: Number,
+    travelingDays: 0,
-        required: false,
+    price: 0.2,
-        default: null,
+    bonus: 0.2,
-    },
+    hour: Date.vnNew(),
+    isVolumetric: false,
 });
-const entityId = computed(() => $props.id || route.params.id);
+const warehousesOptions = ref([]);
+const agencyOptions = ref([]);
 
-let zoneTypes = [];
+const redirectToZoneLocations = (_, { id }) => {
-let originalData = {};
+    router.push({ name: 'ZoneLocations', params: { id } });
-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
-        );
-    });
-}
 </script>
 
 <template>
-    <QPage class="q-pa-sm q-mx-xl">
+    <FetchData
-        <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
+        url="Warehouses"
-            <QCard class="q-pa-md">
+        :filter="{ order: ['name'] }"
-                <div class="row q-col-gutter-md">
+        @on-fetch="(data) => (warehousesOptions = data)"
-                    <div class="col">
+        auto-load
-                        <QInput
-                            filled
-                            v-model="zone.label"
-                            :label="t('create.name')"
-                            type="number"
-                            min="0"
-                            :rules="[(val) => !!val || t('zone.warnings.labelNotEmpty')]"
     />
-                    </div>
+    <FetchData
-                    <div class="col">
+        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="data.name"
-                            v-model="zone.plate"
+                        :label="t('create.name')"
-                            :label="t('create.agency')"
+                        :required="true"
-                            :rules="[(val) => !!val || t('zone.warnings.plateNotEmpty')]"
                     />
-                    </div>
+                </VnRow>
-                </div>
+                <VnRow class="row q-gutter-md q-mb-md">
-                <div class="row q-col-gutter-md">
+                    <VnSelect
-                    <div class="col">
+                        :label="t('create.warehouse')"
-                        <QInput
+                        :options="warehousesOptions"
-                            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
                         hide-selected
-                            input-debounce="0"
                         option-label="name"
                         option-value="id"
-                            emit-value
+                        v-model="data.warehouseFk"
-                            map-options
+                    />
+                    <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"
+                        type="number"
-                            :rules="[(val) => !!val || t('zone.warnings.typeNotEmpty')]"
+                        min="0"
-                            @filter="filterType"
-                        >
-                            <template v-if="zone.typeFk" #append>
-                                <QIcon
-                                    name="cancel"
-                                    @click.stop.prevent="zone.typeFk = null"
-                                    class="cursor-pointer"
                     />
-                            </template>
+                    <VnInput
-                            <template #no-option>
+                        v-model="data.bonus"
-                                <QItem>
+                        :label="t('create.bonus')"
-                                    <QItemSection class="text-grey">
+                        type="number"
-                                        {{ t('zone.warnings.noData') }}
+                        min="0"
-                                    </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"
                     />
-            </div>
+                </VnRow>
-        </QForm>
+                <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>

src/pages/Zone/locale/en.yml

@@ -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:
+    bonus: Bonus
-    submit: Save
+    volumetric: Volumetric
-    reset: Reset
 summary:
     agency: Agency
     price: Price

src/pages/Zone/locale/es.yml

@@ -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:
+    bonus: Bonificación
-    submit: Guardar
+    volumetric: Volumétrico
-    reset: Reiniciar
 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

src/router/modules/zone.js

@@ -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',
+                //     path: 'counter',
-                    name: 'ZoneCounter',
+                //     name: 'ZoneCounter',
-                    meta: {
+                //     meta: {
-                        title: 'zoneCounter',
+                //         title: 'zoneCounter',
-                        icon: 'add_circle',
+                //         icon: 'add_circle',
-                    },
+                //     },
-                    component: () => import('src/pages/Zone/ZoneCounter.vue'),
+                //     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',