chet novoe

src/components/budgets/TransactionEditDrawer.vue

@@ -5,11 +5,12 @@ import DatePicker from "primevue/datepicker";
 import FloatLabel from "primevue/floatlabel";
 import InputNumber from "primevue/inputnumber";
 import Button from "primevue/button";
-import {ref, onMounted, computed, onBeforeUnmount} from 'vue';
+import {ref, onMounted, computed} from 'vue';
 import {Transaction, TransactionType} from "@/models/Transaction";
 import {CategoryType} from "@/models/Category";
 import SelectButton from "primevue/selectbutton";
 import Select from "primevue/select";
+import platform from 'platform';
 import {
   createTransactionRequest,
   getTransactionTypes,
@@ -177,27 +178,18 @@ const dateErrorMessage = computed(() => {
 // Закрытие окна
 const closeDrawer = () => emit('close-drawer');
 const keyboardOpen = ref(false);
+const isMobile = ref(false);
+const userAgent = ref(null);
 // Мониторинг при монтировании
 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', () => {
-  });
-});
+  const deviceInfo = platform;
+  isMobile.value = deviceInfo.os.family === 'iOS' || deviceInfo.os.family === 'Android';
+  console.log(deviceInfo);
+})
 </script>
 
 <template>
@@ -211,6 +203,7 @@ onBeforeUnmount(() => {
       <div v-else class=" grid gap-4 w-full ">
 
         <div class="relative w-full justify-center justify-items-center ">
+          {{userAgent}}
           <div class="flex flex-col justify-items-center gap-2">
             <div class="flex flex-row gap-2">
               <!--            {{editedTransaction.value.transactionType}}-->
@@ -278,6 +271,8 @@ onBeforeUnmount(() => {
                          mode="currency"
                          currency="RUB"
                          locale="ru-RU"
+                         @focus="keyboardOpen=true"
+                         @blur="keyboardOpen=false"
 
             />
             <label for="amount" class="">Amount</label>
@@ -291,7 +286,8 @@ onBeforeUnmount(() => {
                        :invalid="!editedTransaction.comment"
                        id="comment"
                        v-model="editedTransaction.comment"
-
+                       @focus="keyboardOpen=true"
+                       @blur="keyboardOpen=false"
             />
           </FloatLabel>
 
@@ -322,8 +318,9 @@ onBeforeUnmount(() => {
 
 
         <!-- Buttons -->
-        {{keyboardOpen}}
-        <div class="fixed  col-12 bottom-6 flex justify-content-end gap-4" :class="keyboardOpen ? 'bottom-16' :''">
+        {{ keyboardOpen }}
+        <div class="fixed  col-12  flex justify-content-end gap-4"
+             :style="keyboardOpen && isMobile ? 'bottom : 350px;' :' bottom: 5rem;'">
 
           <Button label="Save" icon="pi pi-check" class="p-button-success"
                   @click="isEditing ? updateTransaction() : createTransaction()"/>