chet novoe

src/components/budgets/TransactionEditDrawer.vue

@@ -5,7 +5,7 @@ import DatePicker from "primevue/datepicker";
 import FloatLabel from "primevue/floatlabel";
 import InputNumber from "primevue/inputnumber";
 import Button from "primevue/button";
-import {ref, onMounted, computed} from 'vue';
+import {ref, onMounted, computed, onBeforeUnmount} from 'vue';
 import {Transaction, TransactionType} from "@/models/Transaction";
 import {CategoryType} from "@/models/Category";
 import SelectButton from "primevue/selectbutton";
@@ -176,13 +176,27 @@ const dateErrorMessage = computed(() => {
 
 // Закрытие окна
 const closeDrawer = () => emit('close-drawer');
-
+const keyboardOpen = ref(false);
 // Мониторинг при монтировании
 onMounted(async () => {
   loading.value = true;
   await fetchCategoriesAndTypes();
   prepareData();
   loading.value = false;
+
+  // Сохранение изначальной высоты окна
+  const initialHeight = window.innerHeight;
+
+  // Добавляем слушателя на событие изменения размера окна
+  window.addEventListener('resize', () => {
+    keyboardOpen.value = window.innerHeight < initialHeight;
+  });
+});
+
+onBeforeUnmount(() => {
+  // Удаляем слушателя при уничтожении компонента
+  window.removeEventListener('resize', () => {
+  });
 });
 </script>
 
@@ -201,10 +215,10 @@ onMounted(async () => {
             <div class="flex flex-row gap-2">
               <!--            {{editedTransaction.value.transactionType}}-->
               <Select v-if="!isEditing" v-model="editedTransaction.transactionType" :allow-empty="false"
-                            :options="transactionTypes"
+                      :options="transactionTypes"
-                            optionLabel="name"
+                      optionLabel="name"
-                            aria-labelledby="basic"
+                      aria-labelledby="basic"
-                            class="justify-center"/>
+                      class="justify-center"/>
               <SelectButton v-model="selectedCategoryType" :options="categoryTypes" :allow-empty="false"
                             optionLabel="name"
                             aria-labelledby="basic"
@@ -255,31 +269,31 @@ onMounted(async () => {
         <div class="flex flex-row gap-4">
 
 
-            <FloatLabel variant="on" class="">
+          <FloatLabel variant="on" class="">
-              <InputNumber class=""
+            <InputNumber class=""
-                           :invalid="!editedTransaction.amount"
+                         :invalid="!editedTransaction.amount"
-                           :minFractionDigits="0"
+                         :minFractionDigits="0"
-                           id="amount"
+                         id="amount"
-                           v-model="editedTransaction.amount"
+                         v-model="editedTransaction.amount"
-                           mode="currency"
+                         mode="currency"
-                           currency="RUB"
+                         currency="RUB"
-                           locale="ru-RU"
+                         locale="ru-RU"
 
-              />
+            />
-              <label for="amount" class="">Amount</label>
+            <label for="amount" class="">Amount</label>
-            </FloatLabel>
+          </FloatLabel>
 
           <!-- Comment Input -->
 
-            <FloatLabel variant="on" class="w-full">
+          <FloatLabel variant="on" class="w-full">
-              <label for="comment">Comment</label>
+            <label for="comment">Comment</label>
-              <InputText class="w-full"
+            <InputText class="w-full"
-                         :invalid="!editedTransaction.comment"
+                       :invalid="!editedTransaction.comment"
-                         id="comment"
+                       id="comment"
-                         v-model="editedTransaction.comment"
+                       v-model="editedTransaction.comment"
 
-              />
+            />
-            </FloatLabel>
+          </FloatLabel>
 
         </div>
 
@@ -308,7 +322,8 @@ onMounted(async () => {
 
 
         <!-- Buttons -->
-        <div class="fixed  col-12 bottom-6 flex justify-content-end gap-4">
+        {{keyboardOpen}}
+        <div class="fixed  col-12 bottom-6 flex justify-content-end gap-4" :class="keyboardOpen ? 'bottom-16' :''">
 
           <Button label="Save" icon="pi pi-check" class="p-button-success"
                   @click="isEditing ? updateTransaction() : createTransaction()"/>