fixes

src/components/budgets/BudgetCreationView.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import Dialog from "primevue/dialog";
+import Checkbox from "primevue/checkbox";
+import Button from "primevue/button";
+import InputText from "primevue/inputtext";
+import FloatLabel from "primevue/floatlabel";
+import DatePicker from "primevue/datepicker";
+import {onMounted, ref} from "vue";
+import {getMonthName} from "@/utils/utils";
+import {Budget} from "@/models/Budget";
+import {createBudget} from "@/services/budgetsService";
+
+const props = defineProps({
+  opened: {
+    type: Boolean,
+    required: true
+  }
+})
+const emits = defineEmits(['close-modal'])
+const createRecurrentPayments = ref<Boolean>(true)
+
+const name = ref('')
+const dateFrom = ref(new Date())
+const dateTo = ref(new Date())
+
+const budget = ref(new Budget())
+
+const create = async () => {
+  console.log(budget.value)
+  try {
+    await createBudget(budget.value, createRecurrentPayments.value)
+    emits("close-modal");
+  } catch (e) {
+    console.error(e)
+  }
+
+}
+
+const cancel = () => {
+  emits("close-modal");
+}
+
+onMounted(() => {
+  budget.value.name = ''
+  budget.value.dateTo = new Date();
+  budget.value.dateFrom = new Date();
+  budget.value.dateFrom.setDate(10)
+  if (budget.value.dateFrom.getMonth() == 11) {
+    budget.value.dateFrom.setMonth(0)
+  } else {
+    budget.value.dateFrom.setMonth(dateFrom.value.getMonth() + 1)
+  }
+  budget.value.dateTo.setDate(9)
+  if (budget.value.dateTo.getMonth() == 10) {
+    budget.value.dateTo.setMonth(0)
+    budget.value.dateTo.setYear(dateTo.value.getFullYear() + 1)
+  } else {
+    budget.value.dateTo.setMonth(budget.value.dateTo.getMonth() + 2)
+  }
+  budget.value.name = getMonthName(budget.value.dateFrom.getMonth()) + ' ' + budget.value.dateFrom.getFullYear();
+
+
+})
+
+</script>
+
+<template>
+  <Dialog :visible="opened" modal header="Создать новый бюджет" :style="{ width: '25rem' }">
+    <div class="flex flex-col gap-4 mt-1">
+      <FloatLabel variant="on" class="w-full">
+        <label for="name">Название</label>
+        <InputText v-model="budget.name" id="name" class="w-full"/>
+      </FloatLabel>
+      <div class="flex flex-row gap-4">
+        <FloatLabel variant="on">
+          <label for="dateFrom">Дата начала</label>
+          <DatePicker v-model="budget.dateFrom" id="dateFrom" dateFormat="dd.mm.yy"/>
+        </FloatLabel>
+        <FloatLabel variant="on">
+          <label for="dateTo">Дата завершения</label>
+          <DatePicker v-model="budget.dateTo" id="dateTo" dateFormat="dd.mm.yy"/>
+        </FloatLabel>
+      </div>
+      <div class="flex flex-row items-center min-w-fit gap-4">
+        <Checkbox v-model="createRecurrentPayments" binary/>
+        Создать ежемесячные платежи?
+      </div>
+      <div class="flex flex-row gap-2 justify-end items-center">
+        <Button label="Создать" severity="success" icon="pi pi-save" @click="create"/>
+        <Button label="Отмена" severity="secondary" icon="pi pi-times-circle"/>
+      </div>
+    </div>
+  </Dialog>
+
+</template>
+
+<style scoped>
+
+</style>