toolbar fix and wishlist image notify

This commit is contained in:
xds
2025-03-03 12:29:51 +03:00
parent 95e4b05edc
commit ba12fb649a
3 changed files with 88 additions and 68 deletions

View File

@@ -38,9 +38,9 @@
</div> </div>
<div class="flex flex-col gap-2 p-2"> <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> <i class="pi pi-star text-2xl" style="font-size: 1rem"></i>
<p>Транзакции</p> <p>Вишлисты</p>
</router-link> </router-link>
</div> </div>
@@ -50,58 +50,64 @@
<p>Настройки</p> <p>Настройки</p>
</router-link> </router-link>
</div> </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" <!-- <div class="relative flex-col gap-2 p-2 items-center hidden sm:flex" @click="showSubmenu = !showSubmenu"-->
@mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false"> <!-- @mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false">-->
<!-- <router-link to="/transactions/create" class="items-center flex flex-col gap-2">--> <!-- &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> <!-- <i class="pi pi-cog text-2xl" style="font-size: 1rem"></i>-->
<p>Создать</p> <!-- <p>Создать</p>-->
<!-- </router-link>--> <!-- &lt;!&ndash; </router-link>&ndash;&gt;-->
<!-- Подменю для Создать --> <!-- &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 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"> <!-- <div class="flex flex-col gap-2 items-start">-->
<button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg"> <!-- <button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg">-->
<p>Создать текущую</p> <!-- <p>Создать текущую</p>-->
</button> <!-- </button>-->
<button @click="openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg"> <!-- <button @click="openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg">-->
<p> Создать плановый расход</p> <!-- <p> Создать плановый расход</p>-->
</button> <!-- </button>-->
<button @click=" openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg"> <!-- <button @click=" openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg">-->
Создать плановое поступление <!-- Создать плановое поступление-->
</button> <!-- </button>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="relative flex-col gap-2 p-2 items-center flex sm:hidden" @click="showSubmenu = !showSubmenu" <!-- <div class="relative flex-col gap-2 p-2 items-center flex sm:hidden" @click="showSubmenu = !showSubmenu"-->
@mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false"> <!-- @mouseenter="showSubmenu = true" @mouseleave="showSubmenu = false">-->
<!-- <router-link to="/transactions/create" class="items-center flex flex-col gap-2">--> <!-- &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> <!-- <i class="pi pi-bars text-2xl" style="font-size: 1rem"></i>-->
<p>Меню</p> <!-- <p>Меню</p>-->
<!-- </router-link>--> <!-- &lt;!&ndash; </router-link>&ndash;&gt;-->
<!-- Подменю для Создать --> <!-- &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 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"> <!-- <div class="flex flex-col-reverse gap-2 items-start">-->
<button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg"> <!-- <button @click="openDrawer('INSTANT')" class="hover:bg-gray-100 p-2 rounded-lg">-->
<p>Создать текущую</p> <!-- <p>Создать текущую</p>-->
</button> <!-- </button>-->
<button @click="openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg"> <!-- <button @click="openDrawer('PLANNED', 'EXPENSE')" class="hover:bg-gray-100 p-2 rounded-lg">-->
<p class="text-left"> Создать плановый расход</p> <!-- <p class="text-left"> Создать плановый расход</p>-->
</button> <!-- </button>-->
<button @click=" openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg"> <!-- <button @click=" openDrawer('PLANNED', 'INCOME')" class="hover:bg-gray-100 p-2 rounded-lg">-->
<p class="text-left">Создать плановое поступление</p> <!-- <p class="text-left">Создать плановое поступление</p>-->
</button> <!-- </button>-->
<router-link to="/settings" class="items-center flex flex-col gap-2 p-2"> <!-- <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>--> <!-- &lt;!&ndash; <i class="pi pi-check text-2xl" style="font-size: 1.5rem"></i>&ndash;&gt;-->
<p>Настройки</p> <!-- <p>Настройки</p>-->
</router-link> <!-- </router-link>-->
<button @click="refreshPage"><p class="text-left"><i class="pi pi-refresh"/>Обновить страницу</p></button> <!-- <button @click="refreshPage"><p class="text-left"><i class="pi pi-refresh"/>Обновить страницу</p></button>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> </div>
@@ -114,6 +120,9 @@ import Button from 'primevue/button';
import {TransactionType} from "@/models/Transaction"; import {TransactionType} from "@/models/Transaction";
import {CategoryType} from "@/models/Category"; import {CategoryType} from "@/models/Category";
import {useDrawerStore} from "@/stores/drawerStore"; import {useDrawerStore} from "@/stores/drawerStore";
import {useRoute, useRouter} from "vue-router";
const router = useRouter()
const route = useRoute()
const showSubmenu = ref(false); const showSubmenu = ref(false);

View File

@@ -157,14 +157,20 @@ onMounted(async () => {
<div class="grid grid-cols-1 lg:grid-cols-4 gap-2"> <div class="grid grid-cols-1 lg:grid-cols-4 gap-2">
<div v-for="item in wishlist.items" <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"> 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 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 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"> <div v-if="item.images.length > 0 && selectedImage.get(item.id)" class="flex w-full justify-center">
<Image <Image
:src="selectedImage.get(item.id).startsWith('http') ? selectedImage.get(item.id) : apiClient.defaults.baseURL+'/'+selectedImage.get(item.id) " :src="selectedImage.get(item.id).startsWith('http') ? selectedImage.get(item.id) : apiClient.defaults.baseURL+'/'+selectedImage.get(item.id) "
alt="Image" alt="Image"
width="128" height="128" show="show" preview width="128" height="128" show="show" preview
imageClass="h-64 w-64 object-cover items-center justify-center justify-items-center"/> imageClass="h-64 w-64 object-cover items-center justify-center justify-items-center"/>
</div> </div>
<div class="flex flex-row !h-12 gap-2"> <div class="flex flex-row !h-12 gap-2">
@@ -181,7 +187,8 @@ onMounted(async () => {
</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"/> <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> <span class="text-lg font-bold text-center text-gray-400">Изображение пока не загружено</span>

View File

@@ -281,6 +281,10 @@ onMounted(async () => {
<label for="link">Ссылка</label> <label for="link">Ссылка</label>
<InputText id="link" v-model="fileUploadLink" class="w-full"/> <InputText id="link" v-model="fileUploadLink" class="w-full"/>
</FloatLabel> </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"> <div class="flex justify-center">
<Image v-if="fileUploadLink" :src="fileUploadLink" width="240" preview class="w-fit"/> <Image v-if="fileUploadLink" :src="fileUploadLink" width="240" preview class="w-fit"/>
</div> </div>