56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
|
|
|
|
import {Category} from "@/models/Category";
|
|
import {onMounted, ref} from "vue";
|
|
import {getCategories} from "@/services/categoryService";
|
|
import CategoryListItem from "@/components/settings/categories/CategoryListItem.vue";
|
|
import Button from "primevue/button";
|
|
|
|
const loading = ref(true);
|
|
const categories = ref<Category[]>([]);
|
|
|
|
const fetchCategories = async () => {
|
|
loading.value = true;
|
|
try {
|
|
console.log('loaded')
|
|
const result = await getCategories();
|
|
categories.value = result.data;
|
|
} catch (error) {
|
|
console.error('Error fetching categories:', error);
|
|
}
|
|
loading.value = false
|
|
}
|
|
onMounted(async () => {
|
|
await fetchCategories()
|
|
}
|
|
)
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="loading" class="flex flex-row ">
|
|
Loading...
|
|
</div>
|
|
<div v-else class="">
|
|
<div class="flex flex-col bg-gray-200 outline outline-2 outline-gray-300 rounded-2xl p-4">
|
|
<div class="flex flex-row items-center min-w-fit justify-between">
|
|
<p class="text-2xl font-bold">Категории</p>
|
|
<router-link to="/settings/categories">
|
|
<Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded/>
|
|
</router-link>
|
|
</div>
|
|
<div class="flex flex-row overflow-x-auto gap-4 h-fit p-6 ">
|
|
<CategoryListItem v-for="category in categories" :category="category"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.overflow-x-auto {
|
|
max-height: 60vh; /* Ограничение высоты для появления прокрутки */
|
|
}
|
|
</style> |