init

src/components/OverlayView.vue

@@ -0,0 +1,105 @@
+<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'
+  }
+  console.log('we tut testsete')
+  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(() => {
+    console.log(route.params['mode']);
+    if (route.params['mode']) {
+      console.log(route.params['mode']);
+
+      openDrawer('INSTANT')
+
+    }
+  }, 10)
+})
+
+</script>
+
+<template>
+
+  {{ drawerOpened }}
+  <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=" mb-10 h-fit" :style="{ position: 'fixed', right: 0, bottom: 0 }"
+               pt:menuitem="m-2">
+      <template #item="{ item, toggleCallback }">
+        <div
+            class="flex flex-row items-center justify-between  p-2 border w-56 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>