noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added virtuallist to asset manager tilelist

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-20 15:13:02 +02:00
parent 8adb4e6c84
commit 5c8d4947b1
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/utilities/assetManager/partials/TileList.vue
View File

@ -7,15 +7,19 @@
<input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" /> <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 class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</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 v-bind="containerProps">
<div class="flex items-center gap-2.5"> <div v-bind="wrapperProps">
<div class="h-[28px] w-[75px] max-w-[75px] flex justify-center"> <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)">
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/tiles/${tile.id}.png`" alt="Tile" /> <div class="flex items-center gap-2.5">
</div> <div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
<span>{{ tile.name }}</span> <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>
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div> </div>
</a>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -25,6 +29,7 @@ import { onMounted, ref, computed } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager' import { useAssetManagerStore } from '@/stores/assetManager'
import { useAssetStore } from '@/stores/assets' import { useAssetStore } from '@/stores/assets'
import type { Tile } from '@/types' import type { Tile } from '@/types'
import { useVirtualList } from '@vueuse/core'
const gameStore = useGameStore() const gameStore = useGameStore()
const tileUploadField = ref(null) const tileUploadField = ref(null)
@ -62,6 +67,14 @@ const filteredTiles = computed(() => {
return assetManagerStore.tileList.filter((tile) => tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())) 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(() => { onMounted(() => {
gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => { gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
assetManagerStore.setTileList(response) assetManagerStore.setTileList(response)