imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Applied to object list as well

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-20 17:12:14 +02:00
parent ddfa3b4952
commit c3aff706f0
2 changed files with 56 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/utilities/assetManager/AssetManager.vue
View File

@ -41,7 +41,6 @@
<div class="overflow-auto h-full w-[35%] flex flex-col relative">
<TileList v-if="selectedCategory === 'tiles'" />
<ObjectList v-if="selectedCategory === 'objects'" />
<ObjectList v-if="selectedCategory === 'objects'" />
</div>
<div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>

70
src/components/utilities/assetManager/partials/ObjectList.vue
View File

@ -7,15 +7,28 @@
<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.selectedObject?.id === object.id }" v-for="(object, index) in filteredObjects" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)">
<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/objects/${object.id}.png`" alt="Object" />
</div>
<span>{{ object.name }}</span>
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
<div v-bind="wrapperProps" ref="elementToScroll">
<a
v-for="{ data: object } in list"
:key="object.id"
class="relative p-2.5 cursor-pointer block"
:class="{ 'bg-cyan/80': assetManagerStore.selectedObject?.id === object.id }"
@click="assetManagerStore.setSelectedObject(object as Object)"
>
<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/objects/${object.id}.png`" alt="Object" />
</div>
<span>{{ object.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>
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
<img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
</button>
</div>
</template>
<script setup lang="ts">
@ -25,6 +38,7 @@ import { onMounted, ref, computed } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
import { useAssetStore } from '@/stores/assets'
import type { Object } from '@/types'
import { useVirtualList } from '@vueuse/core'
const gameStore = useGameStore()
const objectUploadField = ref(null)
@ -33,10 +47,13 @@ const assetStore = useAssetStore()
const searchQuery = ref('')
const hasScrolled = ref(false)
const elementToScroll = ref()
const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files
if (!files) return
gameStore.connection.emit('gm:object:upload', files, (response: boolean) => {
gameStore.connection?.emit('gm:object:upload', files, (response: boolean) => {
if (!response) {
if (config.development) console.error('Failed to upload object')
return
@ -44,26 +61,51 @@ const handleFileUpload = (e: Event) => {
assetStore.fetchAssets()
gameStore.connection.emit('gm:object:list', {}, (response: Object[]) => {
gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
assetManagerStore.setObjectList(response)
})
})
}
const handleSearch = () => {
// The filtering is handled by the computed property, so we don't need to do anything here
// This function is kept in case you want to add debounce or other functionality later
// Trigger a re-render of the virtual list
virtualList.value?.scrollTo(0)
}
const filteredObjects = computed(() => {
if (!searchQuery.value) {
return assetManagerStore.objectList
}
return assetManagerStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
return assetManagerStore.objectList.filter((object) =>
object.name.toLowerCase().includes(searchQuery.value.toLowerCase())
)
})
const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
filteredObjects,
{
itemHeight: 48,
},
)
const virtualList = ref({ scrollTo })
const onScroll = () => {
let scrollTop = elementToScroll.value.style.marginTop.replace('px', '');
if (scrollTop > 80) {
hasScrolled.value = true
} else if (scrollTop <= 80) {
hasScrolled.value = false
}
}
function toTop() {
virtualList.value?.scrollTo(0)
}
onMounted(() => {
gameStore.connection.emit('gm:object:list', {}, (response: Object[]) => {
gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
assetManagerStore.setObjectList(response)
})
})