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>

src/pages/Zone/Card/ZoneCard.vue

@@ -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"

src/pages/Zone/Card/ZoneCreateWarehouse.vue

@@ -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>

src/pages/Zone/Card/ZoneDescriptorMenuItems.vue

@@ -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>

src/pages/Zone/Card/ZoneWarehouses.vue

@@ -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 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 { openConfirmationModal } = useVnConfirm();
 
-const deleteWarehouse = () => {
+const paginateRef = ref(null);
-    return true;
+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
+                    <QTable :rows="data" :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
                                         name="delete"
                                         size="sm"
                                         class="cursor-pointer"
                                         color="primary"
-                                @click="deleteWarehouse()"
+                                        @click="
+                                            openConfirmationModal(
+                                                t('warehouses.deleteTitle'),
+                                                t('warehouses.deleteSubtitle'),
+                                                () => deleteWarehouse(row, rows, rowIndex)
+                                            )
+                                        "
                                     >
                                         <QTooltip>
-                                    {{ t('Remove row') }}
+                                            {{ 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>

src/pages/Zone/locale/en.yml

@@ -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

src/pages/Zone/locale/es.yml

@@ -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

src/router/modules/zone.js

@@ -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',
+                    name: 'ZoneWarehouses',
-                    path: 'basic-data',
+                    path: 'warehouses',
                     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',
@@ -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'),
-                //         },
-                //     ],
-                // },
             ],
         },
     ],