init

src/views/AssetsView.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { dataService } from '../services/dataService'
+import type { Asset } from '@/models/asset'
+import Button from 'primevue/button'
+import Skeleton from 'primevue/skeleton'
+import Dialog from 'primevue/dialog'
+import Paginator from 'primevue/paginator'
+
+const router = useRouter()
+const assets = ref<Asset[]>([])
+const loading = ref(true)
+const activeFilter = ref('all')
+const API_URL = import.meta.env.VITE_API_URL
+
+const selectedAsset = ref<Asset | null>(null)
+const isModalVisible = ref(false)
+
+const first = ref(0)
+const rows = ref(12)
+const totalRecords = ref(0)
+
+const openModal = (asset: Asset) => {
+    selectedAsset.value = asset
+    isModalVisible.value = true
+}
+
+const loadAssets = async () => {
+    loading.value = true
+    try {
+        const response = await dataService.getAssets(rows.value, first.value, activeFilter.value)
+        if (response && response.assets) {
+            assets.value = response.assets
+            totalRecords.value = response.total_count || 0
+        } else {
+            // Fallback for unexpected response structure
+            assets.value = Array.isArray(response) ? response : []
+            totalRecords.value = assets.value.length
+        }
+    } catch (e) {
+        console.error('Failed to load assets', e)
+    } finally {
+        loading.value = false
+    }
+}
+
+onMounted(() => {
+    loadAssets()
+})
+
+// Server-side filtering is now used, so we don't need a local filteredAssets computed property
+// unless we want to do secondary filtering, but usually it's better to let the server handle it.
+
+const paginatedAssets = computed(() => {
+    // With server-side pagination, assets.value already contains only the current page
+    return assets.value
+})
+
+const onPage = (event: any) => {
+    first.value = event.first
+    rows.value = event.rows
+    loadAssets()
+}
+
+const handleFilterChange = (filter: string) => {
+    activeFilter.value = filter
+    first.value = 0 // Reset to first page when filter changes
+    loadAssets()
+}
+
+const goBack = () => {
+    router.push('/')
+}
+
+const formatDate = (dateString: string) => {
+    if (!dateString) return ''
+    return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date(dateString))
+}
+</script>
+
+<template>
+    <div class="flex h-screen bg-slate-900 overflow-hidden">
+        <!-- Sidebar -->
+        <nav class="glass-panel w-20 m-4 flex flex-col items-center py-6 rounded-3xl z-10">
+            <div class="mb-12 cursor-pointer" @click="goBack">
+                <div
+                    class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center font-bold text-white text-xl transition-all duration-300 hover:bg-white/20">
+                    ←
+                </div>
+            </div>
+
+            <div class="flex-1 flex flex-col gap-6 w-full items-center">
+                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
+                    @click="router.push('/')">
+                    <span class="text-2xl">🏠</span>
+                </div>
+                <div
+                    class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 bg-white/10 text-slate-50">
+                    <span class="text-2xl">📂</span>
+                </div>
+                <div class="w-12 h-12 flex items-center justify-center rounded-xl cursor-pointer transition-all duration-300 text-slate-400 hover:bg-white/10 hover:text-slate-50"
+                    @click="router.push('/characters')">
+                    <span class="text-2xl">👥</span>
+                </div>
+
+                <!-- Pagination -->
+                <div v-if="totalRecords > rows" class="mt-auto py-6">
+                    <Paginator :first="first" :rows="rows" :totalRecords="totalRecords" @page="onPage" :template="{
+                        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
+                    }" class="!bg-transparent !border-none !p-0" :pt="{
+                        root: { class: '!bg-transparent' },
+                        pcPageButton: {
+                            root: ({ context }) => ({
+                                class: [
+                                    '!min-w-[40px] !h-10 !rounded-xl !border-none !transition-all !duration-300 !font-bold',
+                                    context.active ? '!bg-violet-600 !text-white !shadow-lg' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-50'
+                                ]
+                            })
+                        },
+                        pcFirstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
+                        pcPreviousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
+                        pcNextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
+                        pcLastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } }
+                    }" />
+                </div>
+            </div>
+        </nav>
+
+        <!-- Main Content -->
+        <main class="flex-1 p-8 overflow-y-auto flex flex-col">
+            <!-- Top Bar -->
+            <header class="flex justify-between items-end mb-8">
+                <div>
+                    <h1 class="text-4xl font-bold m-0">Assets Library</h1>
+                    <p class="mt-2 mb-0 text-slate-400">Manage all your assets</p>
+                </div>
+
+                <div class="glass-panel p-2 flex gap-2 rounded-xl">
+                    <Button v-for="filter in ['all', 'image']" :key="filter"
+                        :label="filter.charAt(0).toUpperCase() + filter.slice(1)"
+                        :class="activeFilter === filter ? 'bg-white/10 text-slate-50' : 'bg-transparent text-slate-400'"
+                        class="px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:text-slate-50" text
+                        @click="handleFilterChange(filter)" />
+                </div>
+            </header>
+
+            <!-- Loading State -->
+            <div v-if="loading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 pb-8">
+                <div v-for="i in 8" :key="i" class="glass-panel rounded-2xl overflow-hidden">
+                    <Skeleton height="180px" />
+                    <div class="p-5">
+                        <Skeleton class="mb-2" />
+                        <Skeleton width="60%" />
+                    </div>
+                </div>
+            </div>
+
+            <!-- Assets Grid -->
+            <div v-else class="flex-1 flex flex-col">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6 pb-8">
+                    <div v-for="asset in paginatedAssets" :key="asset.id" @click="openModal(asset)"
+                        class="glass-panel rounded-2xl overflow-hidden transition-all duration-300 cursor-pointer border border-white/5 hover:-translate-y-1 hover:border-white/20 hover:shadow-2xl">
+                        <!-- Media Preview -->
+                        <div class="h-70 bg-black/30 relative overflow-hidden">
+                            <img :src="API_URL + asset.url || 'https://via.placeholder.com/300'" :alt="asset.name"
+                                class="w-full h-full object-cover transition-transform duration-500 hover:scale-105" />
+                            <div
+                                class="absolute top-2.5 right-2.5 bg-black/60 backdrop-blur-sm px-3 py-1 rounded-full text-xs uppercase font-semibold text-white z-10">
+                                {{ asset.type }}
+                            </div>
+                        </div>
+
+                        <!-- Asset Info -->
+                        <div class="p-5">
+                            <div class="flex justify-between items-start mb-2">
+                                <h3
+                                    class="m-0 text-base font-semibold whitespace-nowrap overflow-hidden text-ellipsis flex-1 mr-2">
+                                    {{ asset.name }}
+                                </h3>
+                            </div>
+                            <div class="flex justify-between items-center text-xs text-slate-400">
+                                <span>{{ formatDate(asset.created_at) }}</span>
+                                <span v-if="asset.linked_char_id"
+                                    class="bg-emerald-500/10 text-emerald-400 px-2 py-0.5 rounded">
+                                    🔗 Linked
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Pagination -->
+                <div v-if="totalRecords > rows" class="mt-auto py-6">
+                    <Paginator :first="first" :rows="rows" :totalRecords="totalRecords" @page="onPage" :template="{
+                        default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink'
+                    }" class="!bg-transparent !border-none !p-0" :pt="{
+                        root: { class: '!bg-transparent' },
+                        pcPageButton: {
+                            root: ({ context }) => ({
+                                class: [
+                                    '!min-w-[40px] !h-10 !rounded-xl !border-none !transition-all !duration-300 !font-bold',
+                                    context.active ? '!bg-violet-600 !text-white !shadow-lg' : '!bg-white/5 !text-slate-400 hover:!bg-white/10 hover:!text-slate-50'
+                                ]
+                            })
+                        },
+                        pcFirstPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
+                        pcPreviousPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
+                        pcNextPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } },
+                        pcLastPageButton: { root: { class: '!bg-white/5 !text-slate-400 !border-none !rounded-xl !min-w-[40px] !h-10 hover:!bg-white/10 hover:!text-slate-50 transition-all' } }
+                    }" />
+                </div>
+            </div>
+        </main>
+
+        <Dialog v-model:visible="isModalVisible" modal dismissableMask header="Asset View"
+            :style="{ width: '90vw', maxWidth: '800px' }" class="glass-panel rounded-2xl">
+            <div v-if="selectedAsset" class="flex flex-col items-center">
+                <img :src="selectedAsset.link ? API_URL + selectedAsset.link : (selectedAsset.url ? API_URL + selectedAsset.url : 'https://via.placeholder.com/800')"
+                    :alt="selectedAsset.name" class="max-w-full max-h-[70vh] rounded-xl object-contain shadow-2xl" />
+                <div class="mt-6 text-center">
+                    <h2 class="text-2xl font-bold mb-2">{{ selectedAsset.name }}</h2>
+                    <p class="text-slate-400">{{ formatDate(selectedAsset.created_at) }}</p>
+                </div>
+            </div>
+        </Dialog>
+    </div>
+</template>
+
+<style scoped>
+/* Additional custom styles if needed */
+</style>