ZoneWarehouses and ZoneWareousesCreate refactor

src/pages/Zone/Card/ZoneCreateWarehouse.vue

@@ -1,33 +1,20 @@
 <script setup>
 import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 
 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';
 
-import axios from 'axios';
-
-const emit = defineEmits(['onSubmit']);
+const emit = defineEmits(['onSubmitCreateWarehouse']);
 const { t } = useI18n();
-const route = useRoute();
 
 const ZoneWarehouseFormData = reactive({
     warehouseFk: null,
 });
 
 const warehousesOptions = ref([]);
-
-const createZoneWarehouse = () => {
-    try {
-        axios.post(`Zones/${route.params.id}/warehouses`, ZoneWarehouseFormData);
-        emit('onSubmit');
-    } catch (error) {
-        console.error(error);
-    }
-};
 </script>
 
 <template>
@@ -37,7 +24,10 @@ const createZoneWarehouse = () => {
         auto-load
         @on-fetch="(data) => (warehousesOptions = data)"
     />
-    <FormPopup model="ZoneWarehouse" @on-submit="createZoneWarehouse()">
+    <FormPopup
+        model="ZoneWarehouse"
+        @on-submit="emit('onSubmitCreateWarehouse', ZoneWarehouseFormData)"
+    >
         <template #form-inputs>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">

src/pages/Zone/Card/ZoneWarehouses.vue

@@ -17,12 +17,11 @@ const { openConfirmationModal } = useVnConfirm();
 const paginateRef = ref(null);
 const createWarehouseDialogRef = ref(null);
 
-const arrayData = useArrayData('ZoneWarehouses', {
-    url: `Zones/${route.params.id}/warehouses`,
-    filter: { include: 'warehouse' },
-});
+const arrayData = useArrayData('ZoneWarehouses');
 const store = arrayData.store;
 
+const data = computed(() => store.data);
+
 const urlPath = computed(() => `Zones/${route.params.id}/warehouses`);
 
 const columns = computed(() => [
@@ -34,17 +33,23 @@ const columns = computed(() => [
     },
 ]);
 
-const deleteWarehouse = async (row, rows, rowIndex) => {
+const deleteWarehouse = async (row) => {
     try {
         await axios.delete(`${urlPath.value}/${row.id}`);
-        if (rowIndex || rowIndex === 0) rows.splice(rowIndex, 1);
+        fetchWarehouses();
     } catch (error) {
         console.error(error);
     }
 };
 
-const openCreateWarehouseForm = () => {
-    createWarehouseDialogRef.value.show();
+const createZoneWarehouse = async (ZoneWarehouseFormData) => {
+    console.log(ZoneWarehouseFormData);
+    try {
+        await axios.post(urlPath.value, ZoneWarehouseFormData);
+        fetchWarehouses();
+    } catch (error) {
+        console.error(error);
+    }
 };
 
 watch(
@@ -57,6 +62,8 @@ watch(
 );
 
 const fetchWarehouses = () => paginateRef.value.fetch();
+
+const openCreateWarehouseForm = () => createWarehouseDialogRef.value.show();
 </script>
 
 <template>
@@ -70,7 +77,7 @@ const fetchWarehouses = () => paginateRef.value.fetch();
                 auto-load
             >
                 <template #body="{ rows }">
-                    <QTable :rows="rows" :columns="columns" hide-header>
+                    <QTable :rows="data" :columns="columns" hide-header>
                         <template #body="{ row, rowIndex }">
                             <QTr>
                                 <QTd>
@@ -101,12 +108,12 @@ const fetchWarehouses = () => paginateRef.value.fetch();
                 </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>
-                <QDialog ref="createWarehouseDialogRef">
-                    <ZoneCreateWarehouse @on-submit="fetchWarehouses()" />
-                </QDialog>
             </QBtn>
         </QPageSticky>
     </QPage>