110 lines
2.6 KiB
Vue
110 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
|
|
import SpeedDial from "primevue/speeddial";
|
|
import TransactionEditDrawer from "@/components/budgets/TransactionEditDrawer.vue";
|
|
import { onMounted, ref} from "vue";
|
|
import {TransactionType} from "@/models/Transaction";
|
|
import {CategoryType} from "@/models/Category";
|
|
import {useRoute} from "vue-router";
|
|
|
|
const loading = ref(false);
|
|
const drawerOpened = ref(false);
|
|
const transactionType = ref<TransactionType>()
|
|
const categoryType = ref<CategoryType>()
|
|
|
|
const route = useRoute()
|
|
|
|
|
|
const openDrawer = (selectedTransactionType = null, selectedCategoryType = null) => {
|
|
if (selectedTransactionType && selectedCategoryType) {
|
|
transactionType.value = selectedTransactionType;
|
|
categoryType.value = selectedCategoryType;
|
|
} else if (selectedTransactionType) {
|
|
transactionType.value = selectedTransactionType;
|
|
categoryType.value = 'EXPENSE'
|
|
}
|
|
|
|
drawerOpened.value = true;
|
|
}
|
|
|
|
|
|
|
|
const closeDrawer = () => {
|
|
drawerOpened.value = false;
|
|
}
|
|
|
|
const items = ref([
|
|
{
|
|
label: 'Create instant transaction',
|
|
icon: 'pi pi-pencil',
|
|
command: () => {
|
|
openDrawer('INSTANT')
|
|
}
|
|
},
|
|
{
|
|
label: 'Create planned income',
|
|
icon: 'pi pi-refresh',
|
|
command: () => {
|
|
openDrawer('PLANNED', 'INCOME')
|
|
}
|
|
},
|
|
{
|
|
label: 'Create planned expense',
|
|
icon: 'pi pi-trash',
|
|
command: () => {
|
|
openDrawer('PLANNED', 'EXPENSE')
|
|
}
|
|
}
|
|
])
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
|
|
if (route.path == '/transactions/create') {
|
|
|
|
|
|
openDrawer('INSTANT')
|
|
|
|
}
|
|
}, 10)
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
|
|
<div v-if="loading">Loding...</div>
|
|
<div v-else>
|
|
<TransactionEditDrawer v-if="drawerOpened" :visible="drawerOpened"
|
|
:transaction-type="transactionType"
|
|
:category-type="categoryType"
|
|
@close-drawer="closeDrawer()"
|
|
/>
|
|
|
|
<SpeedDial
|
|
:model="items"
|
|
:radius="120"
|
|
type="quarter"
|
|
direction="up"
|
|
class="lg:flex lg:fixed hidden mb-10 h-fit !items-end me-10"
|
|
:style="{ position: 'fixed', right: 0, bottom: 0 }"
|
|
pt:menuitem="m-2">
|
|
|
|
|
|
<template #item="{ item, toggleCallback }" >
|
|
<div
|
|
class="flex flex-row items-start gap-2 justify-between right-10 p-2 border bg-white rounded border-surface-200 dark:border-surface-700 cursor-pointer"
|
|
@click="toggleCallback"> <!-- Установлена минимальная ширина -->
|
|
|
|
<span>{{ item.label }}</span>
|
|
<span :class="item.icon"></span>
|
|
</div>
|
|
</template>
|
|
</SpeedDial>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |