fixessome

src/components/transactions/TransactionForm.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="card flex justify-center h-fit">
+    <DrawerForm v-if="isDesktop" :visible="visible" :isEditing="isEditing" @close-drawer="closeDrawer" >
+      <template #default>
+        <TransactionFormContent :transaction="props.transaction" :transaction-type="transactionType" :category-type="categoryType" @close-drawer="closeDrawer"   @create-transaction="transactionUpdated"
+                                @delete-transaction="transactionUpdated" @transaction-updated="transactionUpdated" />
+      </template>
+    </DrawerForm>
+
+    <PopUp v-else :header="'Создать транзакцию'" @close-popup="closeDrawer">
+      <template #default>
+        <TransactionFormContent :transaction="props.transaction" :transaction-type="transactionType" :category-type="categoryType" @close-drawer="closeDrawer" @create-transaction="transactionUpdated"
+        @delete-transaction="transactionUpdated" @transaction-updated="transactionUpdated" />
+      </template>
+    </PopUp>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import DrawerForm from "@/components/DrawerForm.vue";
+import PopUp from "@/components/PopUp.vue";
+import TransactionFormContent from "@/components/transactions/TransactionFormContent.vue";
+import {Transaction} from "@/models/Transaction";
+
+
+const props = defineProps({
+  transaction: {
+    type: Object as Transaction,
+    required: false
+  },
+  transactionType: String,
+  categoryType: String,
+})
+
+const isDesktop = ref(window.innerWidth >= 1024);
+const visible = ref(true); // Устанавливаем true или false для показа/скрытия
+const isEditing = ref(false); // Определяем, редактирование или создание транзакции
+
+const emit = defineEmits([ 'close-drawer', 'transaction-updated']);
+
+
+// Обновляем `isDesktop` при изменении размера экрана
+function updateIsDesktop() {
+  isDesktop.value = window.innerWidth >= 1024;
+}
+
+onMounted(() => {
+  window.addEventListener('resize', updateIsDesktop);
+});
+
+const closeDrawer = () => {
+  console.log("close drawer");
+  visible.value = false;
+  emit('close-drawer');
+};
+
+const transactionUpdated = () => {
+  emit("transaction-updated");
+}
+
+</script>