init

src/components/budgets/BudgetTransactionView.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+
+import Button from "primevue/button";
+import Checkbox from "primevue/checkbox";
+import {computed, onMounted, PropType, ref} from "vue";
+import {Transaction} from "@/models/Transaction";
+import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
+import {Category, CategoryType} from "@/models/Category";
+import {getCategories, getCategoryTypes} from "@/services/categoryService";
+import {updateTransactionRequest} from "@/services/transactionService";
+import {formatAmount, formatDate} from "@/utils/utils";
+
+
+const props = defineProps(
+    {
+      transaction: {
+        type: Object as PropType<Transaction>,
+        required: true,
+      }
+    }
+)
+const emits = defineEmits(['open-drawer'])
+
+
+const setIsDoneTrue = async () => {
+  setTimeout(async () => {
+    await updateTransactionRequest(props.transaction)
+  }, 10);
+  // showedTransaction.value.isDone = !showedTransaction.value.isDone;
+
+
+}
+
+const drawerOpened = ref(false)
+const toggleDrawer = () => {
+  if (drawerOpened.value) {
+    drawerOpened.value = false;
+  }
+  drawerOpened.value = !drawerOpened.value
+  emits('open-drawer', props.transaction)
+}
+
+const isPlanned = computed(() => {
+  return props.transaction?.transactionType.code === "PLANNED"
+})
+
+
+const entireCategories = ref<Category[]>([])
+const expenseCategories = ref<Category[]>([])
+const incomeCategories = ref<Category[]>([])
+const fetchCategories = async () => {
+  try {
+    const response = await getCategories();
+    entireCategories.value = response.data
+    expenseCategories.value = response.data.filter((category: Category) => category.type.code === 'EXPENSE');
+    incomeCategories.value = response.data.filter((category: Category) => category.type.code === 'INCOME');
+  } catch (error) {
+    console.error('Error fetching categories:', error);
+  }
+}
+
+
+const categoryTypes = ref<CategoryType[]>([]);
+const selectedCategoryType = ref<CategoryType | null>(null);
+const fetchCategoryTypes = async () => {
+
+  try {
+    const response = await getCategoryTypes();
+    categoryTypes.value = response.data;
+    selectedCategoryType.value = categoryTypes.value.find((category: CategoryType) => category.code === 'EXPENSE');
+  } catch (error) {
+    console.error('Error fetching category types:', error);
+  }
+};
+
+const closeDrawer = () => {
+  drawerOpened.value = false;
+}
+
+
+onMounted(async () => {
+  // await fetchCategories();
+  // await fetchCategoryTypes()
+})
+
+</script>
+
+<template>
+  <div :class="transaction.category.type.code == 'INCOME' ? 'from-green-100 to-green-50' : ' from-red-100 to-red-50' &&
+          transaction.transactionType.code == 'INSTANT' ? ' bg-gradient-to-r shadow-lg  border-2 gap-5 p-2 rounded-xl '  : 'border-b pb-2'
+"
+       class="flex  bg-white  min-w-fit  max-h-fit flex-row items-center  gap-4 w-full ">
+    <div>
+      <p v-if="transaction.transactionType.code=='INSTANT'"
+         class="text-6xl font-bold text-gray-700 dark:text-gray-400">
+        {{ transaction.category.icon }}</p>
+      <Checkbox v-model="transaction.isDone" v-else-if="transaction.transactionType.code=='PLANNED'"
+                :binary="true"
+                @click="setIsDoneTrue"/>
+    </div>
+    <button class="flex flex-row  items-center p-x-4  justify-between w-full " @click="toggleDrawer">
+
+      <div class="flex flex-col items-start justify-items-start">
+        <p :class="transaction.isDone && isPlanned ? 'line-through' : ''" class="font-bold">{{
+            transaction.comment
+          }}</p>
+        <p :class="transaction.isDone && isPlanned ? 'line-through' : ''" class="font-light">{{
+            transaction.category.name
+          }} |
+          {{ formatDate(transaction.date) }}</p>
+      </div>
+      <div
+          :class="transaction.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-green-700' &&  transaction.isDone  && isPlanned ? 'line-through' : ''"
+          class="text-2xl font-bold line-clamp-1 ">
+
+        {{ formatAmount(transaction.amount) }} ₽
+
+
+      </div>
+
+    </button>
+    <TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened" :expenseCategories="expenseCategories"
+                           :incomeCategories="incomeCategories" :transaction="transaction"
+                           :category-types="categoryTypes"
+
+                           @close-drawer="closeDrawer()"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>