From 42042ea3cdf968396b8ae33434b6841e41048838 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 14 Jun 2024 09:19:51 +0200
Subject: [PATCH] fix: SkeletonTable

---
 src/components/CrudModel.vue        |  2 +-
 src/components/VnTable/VnColumn.vue | 18 ++++++++++-
 src/components/VnTable/VnFilter.vue |  5 ++-
 src/components/ui/SkeletonTable.vue | 49 ++++++++++++++++++-----------
 src/composables/useArrayData.js     |  9 ++++++
 5 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 078c95b2a..e58d342ce 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -300,7 +300,7 @@ watch(formUrl, async () => {
             ></slot>
         </template>
     </VnPaginate>
-    <SkeletonTable v-if="!formData" />
+    <SkeletonTable v-if="!formData" :columns="$attrs.columns?.length" />
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <QBtnGroup push style="column-gap: 10px">
             <slot name="moreBeforeActions" />
diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 17751c7dd..9f8614fe5 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -35,6 +35,10 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
+    showLabel: {
+        type: Boolean,
+        default: null,
+    },
 });
 
 const defaultComponents = {
@@ -43,12 +47,18 @@ const defaultComponents = {
         attrs: {
             disable: !$props.isEditable,
         },
+        forceAttrs: {
+            label: $props.showLabel && $props.column.label,
+        },
     },
     number: {
         component: markRaw(VnInput),
         attrs: {
             disable: !$props.isEditable,
         },
+        forceAttrs: {
+            label: $props.showLabel && $props.column.label,
+        },
     },
     date: {
         component: markRaw(VnInputDate),
@@ -57,6 +67,9 @@ const defaultComponents = {
             disable: !$props.isEditable,
             style: 'min-width: 125px',
         },
+        forceAttrs: {
+            label: $props.showLabel && $props.column.label,
+        },
     },
     checkbox: {
         component: markRaw(QCheckbox),
@@ -74,7 +87,7 @@ const defaultComponents = {
             return defaultAttrs;
         },
         forceAttrs: {
-            label: null,
+            label: $props.showLabel && $props.column.label,
         },
     },
     select: {
@@ -82,6 +95,9 @@ const defaultComponents = {
         attrs: {
             disable: !$props.isEditable,
         },
+        forceAttrs: {
+            label: $props.showLabel && $props.column.label,
+        },
     },
     icon: {
         component: markRaw(QIcon),
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index e638ddd8e..1b3e3a773 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -108,12 +108,11 @@ async function addFilter(value) {
     value = value === '' ? undefined : value;
     let field = columnFilter.value?.name ?? $props.column.name;
 
-    let params = { [field]: value };
     if (columnFilter.value?.inWhere) {
         if (columnFilter.value.alias) field = columnFilter.value.alias + '.' + field;
-        return await arrayData.addFilterWhere(params);
+        return await arrayData.addFilterWhere({ [field]: value });
     }
-    await arrayData.addFilter({ params });
+    await arrayData.addFilter({ [field]: value });
 }
 
 function alignRow() {
diff --git a/src/components/ui/SkeletonTable.vue b/src/components/ui/SkeletonTable.vue
index e35e2c9b0..3163cd73f 100644
--- a/src/components/ui/SkeletonTable.vue
+++ b/src/components/ui/SkeletonTable.vue
@@ -1,25 +1,38 @@
+<script setup>
+defineProps({
+    columns: {
+        type: Number,
+        default: 6,
+    },
+});
+</script>
 <template>
-    <div class="q-pa-md w">
-        <div class="row q-gutter-md q-mb-md">
-            <QSkeleton type="rect" square />
-            <QSkeleton type="rect" square />
-            <QSkeleton type="rect" square />
-            <QSkeleton type="rect" square />
-            <QSkeleton type="rect" square />
-            <QSkeleton type="rect" square />
-       </div>
-       <div class="row q-gutter-md q-mb-md" v-for="n in 5" :key="n">
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
+    <div class="q-pa-md q-mx-md container">
+        <div class="row q-gutter-md q-mb-md justify-around no-wrap">
+            <QSkeleton type="rect" square v-for="n in columns" :key="n" class="column" />
+        </div>
+        <div
+            class="row q-gutter-md q-mb-md justify-around no-wrap"
+            v-for="n in 5"
+            :key="n"
+        >
+            <QSkeleton
+                type="QInput"
+                square
+                v-for="m in columns"
+                :key="m"
+                class="column"
+            />
         </div>
     </div>
 </template>
 <style lang="scss" scoped>
-.w {
-    width: 80vw;
+.container {
+    width: 100%;
+    overflow-x: hidden;
+}
+.column {
+    flex-shrink: 0;
+    width: 200px;
 }
 </style>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 6db4251e1..e59e02003 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -66,10 +66,19 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                 }
             }
         }
+        console.log('setOptions store.url: ', store.url);
     }
 
     async function fetch({ append = false, updateRouter = true }) {
         if (!store.url) return;
+        console.log('store.url: ', store.url);
+        console.log('userOptions.url: ', userOptions.url);
+        console.log('route.params.id: ', route.params.id);
+        // const urlSplited = store.url.split('/');
+        // if (!isNaN(+urlSplited[1]) && urlSplited[1] != route.params.id) {
+        //     urlSplited[1] = route.params.id;
+        //     store.url = urlSplited.join('/');
+        // }
 
         cancelRequest();
         canceller = new AbortController();