merch-tracker-v2/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

request list

Browse source
This commit is contained in:
nquidox 2025-09-18 21:05:19 +03:00
parent 2caf1fb999
commit 291ba7e678
2 changed files with 48 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/views/CollectionView.vue
View file

@ -1,31 +1,39 @@
<script setup> <script setup>
import CollectionToolbar from '@/views/CollectionView/CollectionToolbar.vue' import CollectionToolbar from '@/views/CollectionView/CollectionToolbar.vue'
import CollectionMerchCard from '@/views/CollectionView/CollectionMerchCard.vue' import CollectionMerchCard from '@/views/CollectionView/CollectionMerchCard.vue'
import { onMounted, ref } from 'vue'
import { apiClient } from '@/services/apiClient.js'
const merchList = ref(null)
const loading = ref(true)
const error = ref(null)
const fetchMerch = async () => {
try {
const response = await apiClient.get('/merch/')
if (!response.ok) throw new Error('Network error')
merchList.value = await response.data
} catch (err) {
error.value = err.message
} finally {
loading.value = false
}
}
onMounted(() => {
fetchMerch()
})
</script> </script>
<template> <template>
<CollectionToolbar /> <CollectionToolbar />
<n-grid <n-grid responsive="screen" cols="2 s:3 m:4 l:5 xl:6 2xl:7" class="grid-main">
responsive="screen" <n-gi class="grid-item" v-for="item in merchList" :key="item.merch_uuid">
cols="2 s:3 m:4 l:5 xl:6 2xl:7" <router-link :to="`/details/${item.merch_uuid}`" class="card-link">
class="grid-main" <CollectionMerchCard :merch="item" />
> </router-link>
<n-gi class="grid-item"><CollectionMerchCard /></n-gi> </n-gi>
<n-gi class="grid-item"><CollectionMerchCard /></n-gi>
<n-gi class="grid-item"><CollectionMerchCard /></n-gi>
<n-gi class="grid-item"><CollectionMerchCard /></n-gi>
<n-gi class="grid-item"><CollectionMerchCard /></n-gi>
<n-gi class="grid-item"><CollectionMerchCard /></n-gi>
<n-gi class="grid-item"><CollectionMerchCard /></n-gi>
<n-gi class="grid-item"><CollectionMerchCard /></n-gi>
<n-gi class="grid-item"><CollectionMerchCard /></n-gi>
<n-gi class="grid-item"><CollectionMerchCard /></n-gi>
<n-gi class="grid-item"><CollectionMerchCard /></n-gi>
<n-gi class="grid-item"><CollectionMerchCard /></n-gi>
</n-grid> </n-grid>
</template> </template>
<style scoped> <style scoped>
@ -36,4 +44,13 @@ import CollectionMerchCard from '@/views/CollectionView/CollectionMerchCard.vue'
.grid-main { .grid-main {
margin: 10px auto; margin: 10px auto;
} }
.card-link {
display: block;
text-decoration: none;
color: inherit;
}
.card-link:hover {
text-decoration: none;
}
</style> </style>

12
src/views/CollectionView/CollectionMerchCard.vue
View file

@ -1,9 +1,16 @@
<script setup lang="ts"> <script setup>
import BoxIcon from '@/components/icons/BoxIcon.vue' import BoxIcon from '@/components/icons/BoxIcon.vue'
defineProps({
merch: {
type: Object,
required: true,
}
})
</script> </script>
<template> <template>
<n-card title="Card template" class="responsive-card"> <n-card :title="merch.name" class="responsive-card">
<template #cover> <template #cover>
<div class="cover-wrapper"> <div class="cover-wrapper">
<BoxIcon /> <BoxIcon />
@ -33,4 +40,5 @@ import BoxIcon from '@/components/icons/BoxIcon.vue'
height: auto; height: auto;
max-width: 80%; max-width: 80%;
} }
</style> </style>