feat(desk): v-gallery loading mode

Author: zzhenryquezz

packages/core/entities/view-gallery.ts

@@ -5,12 +5,6 @@ export interface ViewGallerySize {
     height: number | string
 }
 
-export interface ViewGallerySizes {
-    sm: ViewGallerySize
-    md: ViewGallerySize
-    lg: ViewGallerySize
-}
-
 export interface ViewGalleryThumbnail {
     key?: string
     position?: string
@@ -20,24 +14,7 @@ export interface ViewGalleryThumbnail {
 export default class ViewGallery extends View {
     public readonly component = 'gallery'
 
-    public thumbnail: ViewGalleryThumbnail = {
-        key: '',
-        position: '',
-        fit: '',
-    }
+    public thumbnail?: ViewGalleryThumbnail
 
-    public sizes: Record<string, ViewGallerySize> = {
-        sm: {
-            width: 200,
-            height: 'auto',
-        },
-        md: {
-            width: 282,
-            height: 'auto',
-        },
-        lg: {
-            width: 200,
-            height: 'auto',
-        },
-    }
+    public sizes?: Record<'sm' | 'md' | 'lg', ViewGallerySize>
 }

packages/desktop/components/v-gallery.vue

@@ -24,6 +24,14 @@ const props = defineProps({
         type: [String, Number],
         default: 20,
     },
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+    itemKey: {
+        type: String,
+        default: '',
+    },
 })
 
 // bindings
@@ -82,9 +90,26 @@ const visibleItems = computed(() => props.items.slice(0, pagination.value.limit)
 </script>
 
 <template>
-    <div ref="rootRef" class="flex flex-wrap gap-4">
+    <div
+        ref="rootRef"
+        class="flex flex-wrap gap-4 relative"
+        :class="loading ? 'animate-pulse' : ''"
+    >
+        <div v-if="loading" class="absolute top-0 left-0 h-[1px] w-full bg-accent animate-pulse" />
+
+        <v-card
+            v-else-if="!items.length"
+            width="100%"
+            height="100"
+            :color="color"
+            class="flex items-center justify-center"
+        >
+            {{ $t('noEntity', [$t('item', 2)]) }}
+        </v-card>
+
         <slot
             v-for="(item, index) in visibleItems"
+            :key="item[itemKey]"
             name="item"
             :size="size"
             :index="index"
@@ -94,7 +119,6 @@ const visibleItems = computed(() => props.items.slice(0, pagination.value.limit)
             :item="item"
         >
             <v-card
-                :key="index"
                 :width="size.width"
                 :height="size.height"
                 class="overflow-auto"
@@ -109,16 +133,6 @@ const visibleItems = computed(() => props.items.slice(0, pagination.value.limit)
             </v-card>
         </slot>
 
-        <v-card
-            v-if="!items.length"
-            width="100%"
-            height="100"
-            :color="color"
-            class="flex items-center justify-center"
-        >
-            {{ $t('noEntity', [$t('item', 2)]) }}
-        </v-card>
-
         <slot
             name="append-body"
             :size="size"

packages/desktop/i18n/en-US.ts

@@ -71,6 +71,7 @@ export default {
     heightEntity: 'Height {0}',
     position: 'Position',
     fit: 'Fit',
+    loadingEntity: 'Loading {0}',
     errors: {
         workspaceNotFound: '@:workspace not found: {0}',
         collectionNotFound: '@:collection not found: {1}',

packages/desktop/modules/collection/components/CGallery.vue

@@ -84,6 +84,39 @@ const columns = computed({
     },
 })
 
+// thumbnail
+
+const thumbnail = computed(() => {
+    if (view.value.thumbnail) return view.value.thumbnail
+
+    return {
+        key: '',
+        position: '',
+        fit: '',
+    }
+})
+
+// sizes
+
+const sizes = computed(() => {
+    if (view.value.sizes) return view.value.sizes
+
+    return {
+        sm: {
+            width: 200,
+            height: 'auto',
+        },
+        md: {
+            width: 282,
+            height: 'auto',
+        },
+        lg: {
+            width: 200,
+            height: 'auto',
+        },
+    }
+})
+
 // count visible columns
 
 const visibleColumns = computed(() => view.value.columns.filter((c) => !c.hide).length)
@@ -213,7 +246,8 @@ const updateItem = debounce(store.item.update, 500)
                 :columns="columns"
                 v-bind="bindings.gallery"
                 :loading="loading"
-                :sizes="view.sizes"
+                :sizes="sizes"
+                item-key="id"
             >
                 <template #item="data">
                     <v-card
@@ -224,17 +258,21 @@ const updateItem = debounce(store.item.update, 500)
                         v-bind="data.bindings.card"
                     >
                         <e-img
-                            v-if="view.thumbnail.key"
-                            :src="data.item[view.thumbnail.key]"
+                            v-if="thumbnail.key"
+                            :src="data.item[thumbnail.key]"
                             :height="`calc(100% - ${visibleColumns * 48}px)`"
-                            :fit="view.thumbnail.fit"
-                            :position="view.thumbnail.position"
+                            :fit="thumbnail.fit"
+                            :position="thumbnail.position"
                             width="100%"
                             class="object-cover"
                         />
 
-                        <template v-for="(c, cIndex) in data.columns" :key="cIndex">
-                            <is-list-item v-if="!c.hide" size="px-1 py-1">
+                        <template v-for="c in data.columns" :key="`${c.id}-${data.item.id}`">
+                            <is-list-item
+                                v-if="!c.hide"
+                                :id="`${c.id}-${data.item.id}`"
+                                size="px-1 py-1"
+                            >
                                 <i-value
                                     :model-value="data.item[c.field]"
                                     :column="c"

packages/desktop/modules/item/components/IValue.vue

@@ -4,24 +4,24 @@ import template from 'lodash/template'
 
 import uuid from 'uuid-random'
 
-import { CollectionColumn } from '@core/entities/collection'
+import Column from '@core/entities/column'
 import Item from '@core/entities/item'
+import DirectoryEntry from '@core/entities/directory-entry'
 import ExecuteScriptDTO from '@core/use-cases/execute-script/execute-script.dto'
 
 import SOutput from '@/modules/script/components/SOutput.vue'
 import EEntryIcon from '@/modules/entry/components/EEntryIcon.vue'
 
 import { useVModel } from 'vue-wind/composables/v-model'
 import { useStore } from '../store'
-import DirectoryEntry from '@/../core/entities/directory-entry'
 
 const props = defineProps({
     modelValue: {
         type: [String, Number, Object] as PropType<any>,
         default: null,
     },
     column: {
-        type: Object as () => CollectionColumn,
+        type: Object as () => Column,
         required: true,
     },
     item: {
@@ -213,5 +213,5 @@ function upload() {
         </div>
     </template>
 
-    <is-input v-else v-model="model" flat />
+    <is-input v-else-if="typeof model === 'string'" v-model="model" flat />
 </template>