From ba12fb649a067e2d93872b05850fc21e8ccb180b Mon Sep 17 00:00:00 2001
From: xds <iam@voroninv.ru>
Date: Mon, 3 Mar 2025 12:29:51 +0300
Subject: [PATCH] toolbar fix and wishlist image notify

---
 src/components/ToolBar.vue                    | 107 ++++++++++--------
 .../wishlists/WishlistExternalView.vue        |  45 ++++----
 src/components/wishlists/WishlistView.vue     |   4 +
 3 files changed, 88 insertions(+), 68 deletions(-)

diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
index 4e4e510..17d3fc0 100644
--- a/src/components/ToolBar.vue
+++ b/src/components/ToolBar.vue
@@ -38,9 +38,9 @@
       </div>
 
       <div class="flex flex-col gap-2 p-2">
-        <router-link to="/transactions" class="items-center flex flex-col gap-2">
+        <router-link to="/wishlists" class="items-center flex flex-col gap-2">
           <i class="pi pi-star text-2xl" style="font-size: 1rem"></i>
-          <p>Транзакции</p>
+          <p>Вишлисты</p>
         </router-link>
       </div>
 
@@ -50,58 +50,64 @@
           <p>Настройки</p>
         </router-link>
       </div>
+      <div class=" flex-col gap-2 p-2 flex">
+        <button @click="router.go(0)" class="items-center flex flex-col gap-2">
+          <i class="pi pi-refresh text-2xl" style="font-size: 1rem"></i>
+          <p>Обновить</p>
+        </button>
+      </div>
 
 
       <!-- Создать с подменю -->
-      <div class="relative  flex-col gap-2 p-2 items-center hidden sm:flex" @click="showSubmenu = !showSubmenu"
-           @mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false">
-        <!--        <router-link to="/transactions/create" class="items-center flex flex-col gap-2">-->
-        <i class="pi pi-cog text-2xl" style="font-size: 1rem"></i>
-        <p>Создать</p>
-        <!--        </router-link>-->
+<!--      <div class="relative  flex-col gap-2 p-2 items-center hidden sm:flex" @click="showSubmenu = !showSubmenu"-->
+<!--           @mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false">-->
+<!--        &lt;!&ndash;        <router-link to="/transactions/create" class="items-center flex flex-col gap-2">&ndash;&gt;-->
+<!--        <i class="pi pi-cog text-2xl" style="font-size: 1rem"></i>-->
+<!--        <p>Создать</p>-->
+<!--        &lt;!&ndash;        </router-link>&ndash;&gt;-->
 
-        <!-- Подменю для Создать -->
-        <div v-if="showSubmenu" class="absolute bottom-full right-0 mb-2 w-48 p-2 bg-white shadow-lg rounded-lg z-50">
-          <div class="flex flex-col gap-2 items-start">
-            <button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg">
-              <p>Создать текущую</p>
-            </button>
-            <button @click="openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg">
-              <p> Создать плановый расход</p>
-            </button>
-            <button @click=" openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg">
-              Создать плановое поступление
-            </button>
-          </div>
-        </div>
-      </div>
-      <div class="relative  flex-col gap-2 p-2 items-center flex sm:hidden" @click="showSubmenu = !showSubmenu"
-           @mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false">
-        <!--        <router-link to="/transactions/create" class="items-center flex flex-col gap-2">-->
-        <i class="pi pi-bars text-2xl" style="font-size: 1rem"></i>
-        <p>Меню</p>
-        <!--        </router-link>-->
+<!--        &lt;!&ndash; Подменю для Создать &ndash;&gt;-->
+<!--        <div v-if="showSubmenu" class="absolute bottom-full right-0 mb-2 w-48 p-2 bg-white shadow-lg rounded-lg z-50">-->
+<!--          <div class="flex flex-col gap-2 items-start">-->
+<!--            <button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg">-->
+<!--              <p>Создать текущую</p>-->
+<!--            </button>-->
+<!--            <button @click="openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg">-->
+<!--              <p> Создать плановый расход</p>-->
+<!--            </button>-->
+<!--            <button @click=" openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg">-->
+<!--              Создать плановое поступление-->
+<!--            </button>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--      <div class="relative  flex-col gap-2 p-2 items-center flex sm:hidden" @click="showSubmenu = !showSubmenu"-->
+<!--           @mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false">-->
+<!--        &lt;!&ndash;        <router-link to="/transactions/create" class="items-center flex flex-col gap-2">&ndash;&gt;-->
+<!--        <i class="pi pi-bars text-2xl" style="font-size: 1rem"></i>-->
+<!--        <p>Меню</p>-->
+<!--        &lt;!&ndash;        </router-link>&ndash;&gt;-->
 
-        <!-- Подменю для Создать -->
-        <div v-if="showSubmenu" class="absolute bottom-full  right-0 w-48 p-2 bg-white shadow-lg rounded-lg z-50">
-          <div class="flex flex-col-reverse gap-2 items-start">
-            <button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg">
-              <p>Создать текущую</p>
-            </button>
-            <button @click="openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg">
-              <p class="text-left"> Создать плановый расход</p>
-            </button>
-            <button @click=" openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg">
-              <p class="text-left">Создать плановое поступление</p>
-            </button>
-            <router-link to="/settings" class="items-center flex flex-col gap-2 p-2">
-              <!--              <i class="pi pi-check text-2xl" style="font-size: 1.5rem"></i>-->
-              <p>Настройки</p>
-            </router-link>
-            <button @click="refreshPage"><p class="text-left"><i class="pi pi-refresh"/>Обновить страницу</p></button>
-          </div>
-        </div>
-      </div>
+<!--        &lt;!&ndash; Подменю для Создать &ndash;&gt;-->
+<!--        <div v-if="showSubmenu" class="absolute bottom-full  right-0 w-48 p-2 bg-white shadow-lg rounded-lg z-50">-->
+<!--          <div class="flex flex-col-reverse gap-2 items-start">-->
+<!--            <button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg">-->
+<!--              <p>Создать текущую</p>-->
+<!--            </button>-->
+<!--            <button @click="openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg">-->
+<!--              <p class="text-left"> Создать плановый расход</p>-->
+<!--            </button>-->
+<!--            <button @click=" openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg">-->
+<!--              <p class="text-left">Создать плановое поступление</p>-->
+<!--            </button>-->
+<!--            <router-link to="/settings" class="items-center flex flex-col gap-2 p-2">-->
+<!--              &lt;!&ndash;              <i class="pi pi-check text-2xl" style="font-size: 1.5rem"></i>&ndash;&gt;-->
+<!--              <p>Настройки</p>-->
+<!--            </router-link>-->
+<!--            <button @click="refreshPage"><p class="text-left"><i class="pi pi-refresh"/>Обновить страницу</p></button>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
     </div>
 
 
@@ -114,6 +120,9 @@ import Button from 'primevue/button';
 import {TransactionType} from "@/models/Transaction";
 import {CategoryType} from "@/models/Category";
 import {useDrawerStore} from "@/stores/drawerStore";
+import {useRoute, useRouter} from "vue-router";
+const router = useRouter()
+const route = useRoute()
 
 const showSubmenu = ref(false);
 
diff --git a/src/components/wishlists/WishlistExternalView.vue b/src/components/wishlists/WishlistExternalView.vue
index 9cec249..acc0c80 100644
--- a/src/components/wishlists/WishlistExternalView.vue
+++ b/src/components/wishlists/WishlistExternalView.vue
@@ -157,31 +157,38 @@ onMounted(async () => {
           <div class="grid grid-cols-1 lg:grid-cols-4 gap-2">
             <div v-for="item in wishlist.items"
                  class=" bg-white flex flex-col p-4 flex-shrink-0  gap-4 shadow-md rounded-lg max-w-128 h-full">
-              <div class="flex flex-col w-full justify-center gap-2">
-                <div  v-if="item.images.length > 0 && selectedImage.get(item.id)" class="flex flex-col w-full h-full justify-between">
-                <div v-if="item.images.length > 0 && selectedImage.get(item.id)" class="flex w-full justify-center">
-                  <Image
-                      :src="selectedImage.get(item.id).startsWith('http') ? selectedImage.get(item.id) : apiClient.defaults.baseURL+'/'+selectedImage.get(item.id) "
-                      alt="Image"
-                      width="128" height="128" show="show" preview
-                      imageClass="h-64 w-64 object-cover items-center justify-center justify-items-center"/>
-                </div>
-                <div class="flex flex-row !h-12 gap-2">
 
-                  <div v-for="(image, index) in item.images" class="group relative h-12 w-12 rounded-lg shadow-md ">
-                    <button @click="selectedImage.set(item.id, image)">
-                      <Image
-                          :src="image.startsWith('http') ? image : apiClient.defaults.baseURL+'/'+image " alt="Image"
-                          width="48" height="48" show="show"
-                          imageClass="w-12 h-12 object-cover"/>
-                    </button>
+              <div class="flex flex-col w-full justify-center gap-2">
+
+                <div v-if="item.images.length > 0 && selectedImage.get(item.id)"
+                     class="flex flex-col w-full h-full justify-between gap-2">
+                  <i class="pi pi-info-circle w-full text-end " style="font-size: 0.7rem"
+                     v-tooltip="'Некоторые изображения могут быть недоступны при включенном VPN'" tabindex="1"/>
+                  <div v-if="item.images.length > 0 && selectedImage.get(item.id)" class="flex w-full justify-center">
+                    <Image
+                        :src="selectedImage.get(item.id).startsWith('http') ? selectedImage.get(item.id) : apiClient.defaults.baseURL+'/'+selectedImage.get(item.id) "
+                        alt="Image"
+                        width="128" height="128" show="show" preview
+                        imageClass="h-64 w-64 object-cover items-center justify-center justify-items-center"/>
 
                   </div>
+                  <div class="flex flex-row !h-12 gap-2">
+
+                    <div v-for="(image, index) in item.images" class="group relative h-12 w-12 rounded-lg shadow-md ">
+                      <button @click="selectedImage.set(item.id, image)">
+                        <Image
+                            :src="image.startsWith('http') ? image : apiClient.defaults.baseURL+'/'+image " alt="Image"
+                            width="48" height="48" show="show"
+                            imageClass="w-12 h-12 object-cover"/>
+                      </button>
+
+                    </div>
 
 
+                  </div>
                 </div>
-                </div>
-                <div v-else class="min-h-[304px] flex flex-col items-center w-full justify-center gap-2 bg-gray-100 rounded-lg max-w-128 h-full">
+                <div v-else
+                     class="min-h-[304px] flex flex-col items-center w-full justify-center gap-2 bg-gray-100 rounded-lg max-w-128 h-full">
                   <i class="pi pi-images !text-gray-400 z-50" style="font-size: 8rem"/>
                   <span class="text-lg font-bold text-center text-gray-400">Изображение пока не загружено</span>
 
diff --git a/src/components/wishlists/WishlistView.vue b/src/components/wishlists/WishlistView.vue
index 75396d5..daff1c7 100644
--- a/src/components/wishlists/WishlistView.vue
+++ b/src/components/wishlists/WishlistView.vue
@@ -281,6 +281,10 @@ onMounted(async () => {
           <label for="link">Ссылка</label>
           <InputText id="link" v-model="fileUploadLink" class="w-full"/>
         </FloatLabel>
+        <div class="bg-orange-200 border-1 border-orange-500 rounded-l p-2 flex flex-row items-center gap-2">
+          <i class="pi pi-exclamation-circle text-orange-500" style="font-size: 1.5rem;"/>
+          <span class="text-orange-700 font-semibold">Некоторые изображения, полученные по ссылке могут быть недоступны при VPN или без VPN!</span>
+        </div>
         <div class="flex justify-center">
           <Image v-if="fileUploadLink" :src="fileUploadLink" width="240" preview class="w-fit"/>
         </div>