70 lines
2.5 KiB
Vue
70 lines
2.5 KiB
Vue
<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> |