65 lines
2.3 KiB
Vue
65 lines
2.3 KiB
Vue
<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" :categoryId="categoryId" @close-drawer="closeDrawer" @create-transaction="transactionUpdated('create')"
|
|
@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" :categoryId="categoryId" @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,
|
|
categoryId: 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 = (text) => {
|
|
console.log(text)
|
|
emit("transaction-updated");
|
|
}
|
|
|
|
</script>
|