fix: order description to vnTable

src/pages/Order/Card/OrderVolume.vue

@@ -2,24 +2,20 @@
 import axios from 'axios';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
-
-import VnPaginate from 'components/ui/VnPaginate.vue';
-import FetchData from 'components/FetchData.vue';
-import VnLv from 'components/ui/VnLv.vue';
-import CardList from 'components/ui/CardList.vue';
-import FetchedTags from 'components/ui/FetchedTags.vue';
-import { useStateStore } from 'stores/useStateStore';
+import { ref } from 'vue';
 import { dashIfEmpty } from 'src/filters';
-import { onMounted } from 'vue';
 
-const router = useRouter();
+import FetchData from 'components/FetchData.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import ItemDescriptorProxy from 'pages/Item/Card/ItemDescriptorProxy.vue';
+import VnLv from 'components/ui/VnLv.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
+
 const route = useRoute();
 const { t } = useI18n();
 const volumeSummary = ref(null);
 const volumeRef = ref();
-const stateStore = useStateStore();
+const volumes = ref([]);
 const volumeFilter = ref({
     include: [
         {
@@ -29,26 +25,39 @@ const volumeFilter = ref({
     where: { orderFk: route.params.id },
 });
 
+const columns = [
+    {
+        name: 'itemFk',
+        label: t('item'),
+        align: 'left',
+    },
+    {
+        name: 'description',
+        label: t('globals.description'),
+        align: 'left',
+    },
+    {
+        name: 'quantity',
+        label: t('quantity'),
+        align: 'left',
+    },
+    {
+        name: 'volume',
+        label: t('volume'),
+        align: 'left',
+    },
+];
+
 const loadVolumes = async (rows) => {
+    if (!rows) return;
     const { data } = await axios.get(`Orders/${route.params.id}/getVolumes`);
-    (rows || []).forEach((order) => {
+    rows.forEach((order) => {
         (data.volumes || []).forEach((volume) => {
-            if (order.itemFk === volume.itemFk) {
-                order.volume = volume.volume;
-            }
+            if (order.itemFk === volume.itemFk) order.volume = volume.volume;
         });
     });
+    volumes.value = rows;
 };
-
-watch(
-    () => router.currentRoute.value.params.id,
-    () => {
-        volumeFilter.value.where.orderFk = router.currentRoute.value.params.id;
-
-        volumeRef.value.fetch();
-    }
-);
-onMounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
@@ -57,61 +66,38 @@ onMounted(() => (stateStore.rightDrawer = false));
         @on-fetch="(data) => (volumeSummary = data)"
         auto-load
     />
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <div
-                v-if="!volumeSummary?.totalVolume && !volumeSummary?.totalBoxes"
-                class="no-result"
-            >
-                {{ t('globals.noResults') }}
-            </div>
-            <QCard v-else class="order-volume-summary q-pa-lg">
-                <VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
-                <VnLv
-                    :label="t('boxes')"
-                    :value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
-                />
-            </QCard>
-            <VnPaginate
-                data-key="OrderCatalogVolume"
-                ref="volumeRef"
-                url="OrderRows"
-                :limit="20"
-                auto-load
-                :user-filter="volumeFilter"
-                order="itemFk"
-                @on-fetch="(data) => loadVolumes(data)"
-            >
-                <template #body="{ rows }">
-                    <div class="catalog-list q-mt-xl">
-                        <CardList
-                            v-for="row in rows"
-                            :key="row.id"
-                            :id="row.id"
-                            :title="row?.item?.name"
-                            class="cursor-inherit"
-                        >
-                            <template #list-items>
-                                <div class="q-mb-sm">
-                                    <FetchedTags :item="row.item" :max-length="5" />
-                                </div>
-                                <VnLv :label="t('item')" :value="row.item.id" />
-                                <VnLv :label="t('subName')">
-                                    <template #value>
-                                        <span class="text-uppercase">
-                                            {{ row.item.subName }}
-                                        </span>
-                                    </template>
-                                </VnLv>
-                                <VnLv :label="t('quantity')" :value="row.quantity" />
-                                <VnLv :label="t('volume')" :value="row.volume" />
-                            </template>
-                        </CardList>
-                    </div>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
+    <QCard v-if="volumeSummary" class="order-volume-summary q-pa-lg">
+        <VnLv :label="t('total')" :value="`${volumeSummary?.totalVolume} m³`" />
+        <VnLv
+            :label="t('boxes')"
+            :value="`${dashIfEmpty(volumeSummary?.totalBoxes)} U`"
+        />
+    </QCard>
+    <VnTable
+        ref="volumeRef"
+        data-key="OrderCatalogVolume"
+        url="OrderRows"
+        :columns="columns"
+        auto-load
+        :user-filter="volumeFilter"
+        order="itemFk"
+        @on-fetch="(data) => loadVolumes(data)"
+        :right-search="false"
+        :column-search="false"
+    >
+        <template #column-itemFk="{ row }">
+            <span class="link">
+                {{ row.itemFk }}
+                <ItemDescriptorProxy :id="row.itemFk" />
+            </span>
+        </template>
+        <template #column-description="{ row }">
+            <FetchedTags :item="row.item" :max-length="5" />
+        </template>
+        <template #column-volume="{ rowIndex }">
+            {{ volumes?.[rowIndex]?.volume }}
+        </template>
+    </VnTable>
 </template>
 
 <style lang="scss">
@@ -136,29 +122,12 @@ onMounted(() => (stateStore.rightDrawer = false));
     }
 }
 </style>
-<style lang="scss" scoped>
-.header {
-    color: $primary;
-    font-weight: bold;
-    margin-bottom: 25px;
-    font-size: 20px;
-    display: inline-block;
-}
-
-.no-result {
-    font-size: 24px;
-    font-weight: bold;
-    color: var(--vn-label-color);
-    text-align: center;
-}
-</style>
 <i18n>
 en:
     summary: Summary
     total: Total
     boxes: Boxes
     item: Item
-    subName: Subname
     quantity: Quantity
     volume: m³ per quantity
 es:
@@ -166,7 +135,6 @@ es:
     total: Total
     boxes: Cajas
     item: Artículo
-    subName: Subnombre
     quantity: Cantidad
     volume: m³ por cantidad
 </i18n>