chet novoe

package-lock.json

@@ -14,6 +14,7 @@
         "chart.js": "^4.4.4",
         "date-fns": "^4.1.0",
         "date-fns-tz": "^3.2.0",
+        "platform": "^1.3.6",
         "primeicons": "^7.0.0",
         "primevue": "^4.1.0",
         "tailwindcss-primeui": "^0.3.4",
@@ -22,6 +23,7 @@
         "vue-router": "^4.4.5"
       },
       "devDependencies": {
+        "@types/platform": "^1.3.6",
         "@vitejs/plugin-vue": "^5.1.4",
         "@vue/cli-plugin-typescript": "~5.0.0",
         "autoprefixer": "^10.4.20",
@@ -849,6 +851,12 @@
       "resolved": "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.2.tgz",
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
     },
+    "node_modules/@types/platform": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@types/platform/-/platform-1.3.6.tgz",
+      "integrity": "sha512-ZmSaqHuvzv+jC232cFoz2QqPUkaj6EvMmCrWcx3WRr7xTPVFCMUOTcOq8m2d+Zw1iKRc1kDiaA+jtNrV0hkVew==",
+      "dev": true
+    },
     "node_modules/@types/qs": {
       "version": "6.9.16",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.16.tgz",
@@ -6394,6 +6402,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/platform": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz",
+      "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg=="
+    },
     "node_modules/portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",
@@ -10259,6 +10272,12 @@
       "resolved": "https://registry.npmmirror.com/@types/parse-json/-/parse-json-4.0.2.tgz",
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
     },
+    "@types/platform": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@types/platform/-/platform-1.3.6.tgz",
+      "integrity": "sha512-ZmSaqHuvzv+jC232cFoz2QqPUkaj6EvMmCrWcx3WRr7xTPVFCMUOTcOq8m2d+Zw1iKRc1kDiaA+jtNrV0hkVew==",
+      "dev": true
+    },
     "@types/qs": {
       "version": "6.9.16",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.16.tgz",
@@ -14153,6 +14172,11 @@
         "find-up": "^4.0.0"
       }
     },
+    "platform": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz",
+      "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg=="
+    },
     "portfinder": {
       "version": "1.0.32",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.32.tgz",

package.json

@@ -14,6 +14,7 @@
     "chart.js": "^4.4.4",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
+    "platform": "^1.3.6",
     "primeicons": "^7.0.0",
     "primevue": "^4.1.0",
     "tailwindcss-primeui": "^0.3.4",
@@ -22,6 +23,7 @@
     "vue-router": "^4.4.5"
   },
   "devDependencies": {
+    "@types/platform": "^1.3.6",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/cli-plugin-typescript": "~5.0.0",
     "autoprefixer": "^10.4.20",

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 deviceInfo = platform;
-  // Сохранение изначальной высоты окна
+  isMobile.value = deviceInfo.os.family === 'iOS' || deviceInfo.os.family === 'Android';
-  const initialHeight = window.innerHeight;
+  console.log(deviceInfo);
-
+})
-  // Добавляем слушателя на событие изменения размера окна
-  window.addEventListener('resize', () => {
-    keyboardOpen.value = window.innerHeight < initialHeight;
-  });
-});
-
-onBeforeUnmount(() => {
-  // Удаляем слушателя при уничтожении компонента
-  window.removeEventListener('resize', () => {
-  });
-});
 </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}}
+        {{ keyboardOpen }}
-        <div class="fixed  col-12 bottom-6 flex justify-content-end gap-4" :class="keyboardOpen ? 'bottom-16' :''">
+        <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()"/>