src/components/ui/VnRow.vue

@@ -1,4 +1,3 @@
-<script setup></script>
 <template>
     <div class="vn-row q-gutter-md q-mb-md">
         <slot />

src/pages/Item/Card/ItemLastEntries.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, computed, onUnmounted, reactive, ref } from 'vue';
+import { onMounted, computed, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { dateRange } from 'src/filters';
@@ -11,6 +11,7 @@ import { toDateTimeFormat } from 'src/filters/date.js';
 import { dashIfEmpty } from 'src/filters';
 import { toCurrency } from 'filters/index';
 import { useArrayData } from 'composables/useArrayData';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -35,26 +36,8 @@ const exprBuilder = (param, value) => {
     }
 };
 
-const datedRange = reactive({
-    from: null,
-    to: null,
-});
-
-const from = computed({
-    get: () => datedRange.from,
-    set: (val) => {
-        updateFrom(val);
-        updateFilter();
-    },
-});
-
-const to = computed({
-    get: () => datedRange.to,
-    set: (val) => {
-        updateTo(val);
-        updateFilter();
-    },
-});
+const from = ref();
+const to = ref();
 
 const arrayData = useArrayData('ItemLastEntries', {
     url: 'Items/lastEntriesFilter',
@@ -162,41 +145,48 @@ const fetchItemLastEntries = async () => {
     itemLastEntries.value = data;
 };
 
-const updateFrom = async (date) => {
-    date.setHours(0, 0, 0, 0);
-    datedRange.from = date.toISOString();
-};
-
-const updateTo = async (date) => {
-    date.setHours(23, 59, 59, 59);
-    datedRange.to = date.toISOString();
+const getDate = (date, type) => {
+    if (type == 'from') {
+        date.setHours(0, 0, 0, 0);
+    } else if (type == 'to') {
+        date.setHours(23, 59, 59, 999);
+    }
+    return date.toISOString();
 };
 
 const updateFilter = async () => {
-    arrayData.store.userFilter.where.landed = {
-        between: [datedRange.from, datedRange.to],
-    };
+    let filter;
+    if (!from.value && to.value) filter = { lte: to.value };
+    else if (from.value && !to.value) filter = { gte: from.value };
+    else if (from.value && to.value) filter = { between: [from.value, to.value] };
+
+    arrayData.store.userFilter.where.landed = filter;
     await fetchItemLastEntries();
 };
 
 onMounted(async () => {
     const _from = Date.vnNew();
     _from.setDate(_from.getDate() - 75);
-    updateFrom(_from);
-
+    from.value = getDate(_from, 'from');
     const _to = Date.vnNew();
     _to.setDate(_to.getDate() + 10);
-    updateTo(_to);
+    to.value = getDate(Date.vnNew(), 'to');
 
     updateFilter();
+
+    watch([from, to], ([nFrom, nTo], [oFrom, oTo]) => {
+        if (nFrom && nFrom != oFrom) nFrom = getDate(new Date(nFrom), 'from');
+        if (nTo && nTo != oTo) nTo = getDate(new Date(nTo), 'to');
+        updateFilter();
+    });
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
-    <QToolbar class="justify-end">
-        <div id="st-data" class="row">
+    <VnSubToolbar>
+        <template #st-data>
             <VnInputDate
                 :label="t('lastEntries.since')"
                 dense
@@ -204,11 +194,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 class="q-mr-lg"
             />
             <VnInputDate :label="t('lastEntries.to')" dense v-model="to" />
-        </div>
-        <QSpace />
-        <div id="st-actions"></div>
-    </QToolbar>
-    <QPage class="column items-center q-pa-md">
+        </template>
+    </VnSubToolbar>
+    <QPage class="column items-center q-pa-xd">
         <QTable
             :rows="itemLastEntries"
             :columns="columns"