From c04adf0e7dfc2733fe846eee959a18c73e840c06 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 11 Feb 2025 11:15:19 +0100
Subject: [PATCH] refactor: refs #6897 update SkeletonDescriptor component add
 image

---
 src/components/ui/SkeletonDescriptor.vue | 65 ++++++++----------------
 src/pages/Entry/Card/EntryBuys.vue       |  4 +-
 2 files changed, 25 insertions(+), 44 deletions(-)

diff --git a/src/components/ui/SkeletonDescriptor.vue b/src/components/ui/SkeletonDescriptor.vue
index 9679751f5..f9188221a 100644
--- a/src/components/ui/SkeletonDescriptor.vue
+++ b/src/components/ui/SkeletonDescriptor.vue
@@ -1,53 +1,32 @@
+<script setup>
+defineProps({
+    hasImage: {
+        type: Boolean,
+        default: false,
+    },
+});
+</script>
 <template>
-    <div id="descriptor-skeleton">
+    <div id="descriptor-skeleton" class="bg-vn-page">
         <div class="row justify-between q-pa-sm">
-            <QSkeleton square size="40px" />
-            <QSkeleton square size="40px" />
-            <QSkeleton square height="40px" width="20px" />
+            <QSkeleton square size="30px" v-for="i in 3" :key="i" />
         </div>
-        <div class="col justify-between q-pa-sm q-gutter-y-xs">
-            <QSkeleton square height="40px" width="150px" />
-            <QSkeleton square height="30px" width="70px" />
+        <div class="q-pa-xs" v-if="hasImage">
+            <QSkeleton square height="200px" width="100%" />
         </div>
-        <div class="col q-pl-sm q-pa-sm q-mb-md">
-            <div class="row justify-between">
-                <QSkeleton type="text" square height="30px" width="20%" />
-                <QSkeleton type="text" square height="30px" width="60%" />
-            </div>
-            <div class="row justify-between">
-                <QSkeleton type="text" square height="30px" width="20%" />
-                <QSkeleton type="text" square height="30px" width="60%" />
-            </div>
-            <div class="row justify-between">
-                <QSkeleton type="text" square height="30px" width="20%" />
-                <QSkeleton type="text" square height="30px" width="60%" />
-            </div>
-            <div class="row justify-between">
-                <QSkeleton type="text" square height="30px" width="20%" />
-                <QSkeleton type="text" square height="30px" width="60%" />
-            </div>
-            <div class="row justify-between">
-                <QSkeleton type="text" square height="30px" width="20%" />
-                <QSkeleton type="text" square height="30px" width="60%" />
-            </div>
-            <div class="row justify-between">
-                <QSkeleton type="text" square height="30px" width="20%" />
-                <QSkeleton type="text" square height="30px" width="60%" />
+        <div class="col justify-between q-pa-md q-gutter-y-xs">
+            <QSkeleton square height="25px" width="150px" />
+            <QSkeleton square height="15px" width="70px" />
+        </div>
+        <div class="q-pl-sm q-pa-sm q-mb-md">
+            <div class="row q-gutter-x-sm q-pa-none q-ma-none" v-for="i in 5" :key="i">
+                <QSkeleton type="text" square height="20px" width="30%" />
+                <QSkeleton type="text" square height="20px" width="60%" />
             </div>
         </div>
 
-        <QCardActions>
-            <QSkeleton size="40px" />
-            <QSkeleton size="40px" />
-            <QSkeleton size="40px" />
-            <QSkeleton size="40px" />
-            <QSkeleton size="40px" />
+        <QCardActions class="q-gutter-x-sm justify-between">
+            <QSkeleton size="40px" v-for="i in 5" :key="i" />
         </QCardActions>
     </div>
 </template>
-
-<style lang="scss" scoped>
-#descriptor-skeleton .q-card__actions {
-    justify-content: space-between;
-}
-</style>
diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
index b084d2ab9..a0576ee2a 100644
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -16,6 +16,7 @@ import ItemDescriptor from 'src/pages/Item/Card/ItemDescriptor.vue';
 import axios from 'axios';
 import VnSelectEnum from 'src/components/common/VnSelectEnum.vue';
 import { checkEntryLock } from 'src/composables/checkEntryLock';
+import SkeletonDescriptor from 'src/components/ui/SkeletonDescriptor.vue';
 
 const $props = defineProps({
     id: {
@@ -719,7 +720,8 @@ onMounted(() => {
         </template>
         <template #previous-create-dialog="{ data }">
             <div style="position: absolute">
-                <ItemDescriptor :id="data.itemFk ?? NaN" />
+                <ItemDescriptor :id="data.itemFk" v-if="data.itemFk" />
+                <SkeletonDescriptor v-if="!data.itemFk" :has-image="true" />
             </div>
         </template>
     </VnTable>