From 5c8d4947b1c481ef658b930c065e417628059a7e Mon Sep 17 00:00:00 2001
From: Colin Kallemein <kallemein@redkiwi.nl>
Date: Sat, 20 Jul 2024 15:13:02 +0200
Subject: [PATCH] Added virtuallist to asset manager tilelist

---
 .../assetManager/partials/TileList.vue        | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index d94e21f..65637d7 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -7,15 +7,19 @@
     <input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
     <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
   </div>
-  <a class="relative p-2.5 cursor-pointer" :class="{ 'bg-cyan/80': assetManagerStore.selectedTile?.id === tile.id }" v-for="(tile, index) in filteredTiles" :key="index" @click="assetManagerStore.setSelectedTile(tile as Tile)">
-    <div class="flex items-center gap-2.5">
-      <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
-        <img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" />
-      </div>
-      <span>{{ tile.name }}</span>
+  <div v-bind="containerProps">
+    <div v-bind="wrapperProps">
+      <a class="relative p-2.5 cursor-pointer block" :class="{ 'bg-cyan/80': assetManagerStore.selectedTile?.id === tile.data.id }" v-for="(tile, index) in list" :key="index" @click="assetManagerStore.setSelectedTile(tile.data as Tile)">
+        <div class="flex items-center gap-2.5">
+          <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
+            <img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile.data.id}.png`" alt="Tile" />
+          </div>
+          <span>{{ tile.data.name }}</span>
+        </div>
+        <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
+      </a>
     </div>
-    <div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
-  </a>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -25,6 +29,7 @@ import { onMounted, ref, computed } from 'vue'
 import { useAssetManagerStore } from '@/stores/assetManager'
 import { useAssetStore } from '@/stores/assets'
 import type { Tile } from '@/types'
+import { useVirtualList } from '@vueuse/core'
 
 const gameStore = useGameStore()
 const tileUploadField = ref(null)
@@ -62,6 +67,14 @@ const filteredTiles = computed(() => {
   return assetManagerStore.tileList.filter((tile) => tile.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
 })
 
+const { list, containerProps, wrapperProps } = useVirtualList(
+  filteredTiles,
+  {
+    // Keep `itemHeight` in sync with the item's row.
+    itemHeight: 28,
+  },
+)
+
 onMounted(() => {
   gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
     assetManagerStore.setTileList(response)