init

src/components/settings/RecurrentSettingView.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+
+import Button from "primevue/button";
+import {RecurrentPayment} from "@/models/Recurrent";
+import {onMounted, ref} from "vue";
+import {getRecurrentPayments} from "@/services/recurrentService";
+
+const loading = ref(true);
+
+const recurrentPayments = ref<RecurrentPayment[]>([]);
+const fetchRecurrentPayments = async () => {
+  loading.value = true;
+  try {
+    console.log('loaded')
+    const result = await getRecurrentPayments();
+    recurrentPayments.value = result.data;
+  } catch (error) {
+    console.error('Error fetching recurrent payments:', error);
+  }
+  loading.value = false
+}
+
+onMounted(async () => {
+  await fetchRecurrentPayments()
+})
+
+</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">Recurrent operations</p>
+        <router-link to="/settings/recurrents">
+          <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 ">
+        <div v-for="recurrent in recurrentPayments"
+             class="flex rounded-xl border-2 bg-white shadow-xl min-w-fit  max-h-fit gap-5 flex-row items-center justify-between w-full p-2">
+
+
+          <div class="flex flex-row  items-center p-x-4 gap-4">
+            <p class="text-6xl font-bold text-gray-700 dark:text-gray-400">{{ recurrent.category.icon }}</p>
+            <div class="flex flex-col items-start justify-items-start w-full">
+              <p class="font-bold">{{ recurrent.name }}</p>
+              <p class="font-light">{{ recurrent.description }}</p>
+            </div>
+          </div>
+          <div class="flex flex-col items-center p-x-4 justify-items-end text-end ">
+            <p :class="recurrent.category.type.code == 'EXPENSE' ? 'text-red-400' : 'text-green-400' " class=" font-bold">- {{ recurrent.amount }} руб.</p>
+            <p class="text-end"> {{ recurrent.atDay }} числа</p>
+            <!--            <Button icon="pi pi-pen-to-square" rounded @click="openEdit"/>-->
+            <!--            <Button icon="pi pi-trash" severity="danger" rounded @click="deleteCategory"/>-->
+          </div>
+        </div>
+
+      </div>
+
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>