init

src/components/settings/CategorySettingView.vue

@@ -0,0 +1,56 @@
+<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 mt-40">
+    Loading...
+  </div>
+  <div v-else class="">
+    <div class="flex flex-col mt-40 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">Categories</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>