refactor: refs #8198 simplify state management and data fetching in ItemDiary component

src/pages/Item/Card/ItemDiary.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { onMounted, computed, reactive, ref, nextTick, watch } from 'vue';
+import { onMounted, computed, ref, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 
 import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
 import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
@@ -22,19 +22,16 @@ import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
 const state = useState();
 const user = state.getUser();
-const today = ref(Date.vnNew());
+const today = Date.vnNew();
+today.setHours(0, 0, 0, 0);
 const warehousesOptions = ref([]);
-const itemBalancesRef = ref(null);
-const itemsBalanceFilter = reactive({
-    where: { itemFk: route.params.id, warehouseFk: null, date: null },
-});
-const itemBalances = ref([]);
-const warehouseFk = ref(null);
-const _showWhatsBeforeInventory = ref(false);
+const itemBalances = computed(() => arrayDataItemBalances.store.data);
+const where = computed(() => arrayDataItemBalances.store.filter.where || {});
+const showWhatsBeforeInventory = ref(false);
 const inventoriedDate = ref(null);
+let arrayDataItemBalances = useArrayData('ItemBalances');
 
 const originTypeMap = {
     entry: {
@@ -122,36 +119,28 @@ const columns = computed(() => [
     },
 ]);
 
-const showWhatsBeforeInventory = computed({
-    get: () => _showWhatsBeforeInventory.value,
-    set: (val) => {
-        _showWhatsBeforeInventory.value = val;
-        if (!val) itemsBalanceFilter.where.date = null;
-        else itemsBalanceFilter.where.date = inventoriedDate.value ?? new Date();
-    },
-});
-
 onMounted(async () => {
-    today.value.setHours(0, 0, 0, 0);
-    if (route.query.warehouseFk) warehouseFk.value = route.query.warehouseFk;
-    else if (user.value) warehouseFk.value = user.value.warehouseFk;
-    itemsBalanceFilter.where.warehouseFk = warehouseFk.value;
-    const { data } = await axios.get('Configs/findOne');
-    inventoriedDate.value = data.inventoried;
+    const ref = where.value;
+    const query = route.query;
+    inventoriedDate.value =
+        (await axios.get('Configs/findOne')).data?.inventoried || today;
+
+    if (query.warehouseFk) ref.warehouseFk = query.warehouseFk;
+    else if (!ref.warehouseFk && user.value) ref.warehouseFk = user.value.warehouseFk;
+    if (ref.date) showWhatsBeforeInventory.value = true;
+    ref.itemFk = route.params.id;
+
+    arrayDataItemBalances = useArrayData('ItemBalances', {
+        url: 'Items/getBalance',
+        filter: { where: ref },
+    });
+
     await fetchItemBalances();
     await scrollToToday();
-    await updateWarehouse(warehouseFk.value);
+    await updateWarehouse(ref.warehouseFk);
 });
 
-watch(
-    () => router.currentRoute.value.params.id,
-    (newId) => {
-        itemsBalanceFilter.where.itemFk = newId;
-        itemBalancesRef.value.fetch();
-    }
-);
-
-const fetchItemBalances = async () => await itemBalancesRef.value.fetch();
+const fetchItemBalances = async () => await arrayDataItemBalances.fetch({});
 
 const getBadgeAttrs = (_date) => {
     const isSameDate = date.isSameDate(today.value, _date);
@@ -178,23 +167,13 @@ const formatDateForAttribute = (dateValue) => {
 };
 
 async function updateWarehouse(warehouseFk) {
-    const stock = useArrayData('descriptorStock', {
-        userParams: {
-            warehouseFk,
-        },
-    });
+    const stock = useArrayData('descriptorStock', { userParams: { warehouseFk } });
     await stock.fetch({});
     stock.store.data.itemFk = route.params.id;
 }
 </script>
 
 <template>
-    <FetchData
-        ref="itemBalancesRef"
-        url="Items/getBalance"
-        :filter="itemsBalanceFilter"
-        @on-fetch="(data) => (itemBalances = data)"
-    />
     <FetchData
         url="Warehouses"
         :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
@@ -207,27 +186,30 @@ async function updateWarehouse(warehouseFk) {
                 <VnSelect
                     :label="t('itemDiary.warehouse')"
                     :options="warehousesOptions"
-                    hide-selected
-                    option-label="name"
-                    option-value="id"
-                    dense
-                    v-model="itemsBalanceFilter.where.warehouseFk"
+                    v-model="where.warehouseFk"
                     @update:model-value="
-                        (value) => fetchItemBalances() && updateWarehouse(value)
+                        (val) => fetchItemBalances() && updateWarehouse(val)
                     "
                     class="q-mr-lg"
+                    :is-clearable="false"
                 />
                 <QCheckbox
                     :label="t('itemDiary.showBefore')"
                     v-model="showWhatsBeforeInventory"
-                    @update:model-value="fetchItemBalances"
+                    @update:model-value="
+                        async (val) => {
+                            if (!val) where.date = null;
+                            else where.date = inventoriedDate;
+                            await fetchItemBalances();
+                        }
+                    "
                     class="q-mr-lg"
                 />
                 <VnInputDate
                     v-if="showWhatsBeforeInventory"
                     :label="t('itemDiary.since')"
                     dense
-                    v-model="itemsBalanceFilter.where.date"
+                    v-model="where.date"
                     @update:model-value="fetchItemBalances"
                 />
             </div>