new color scheme + some fixes
This commit is contained in:
@@ -20,6 +20,8 @@
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
--primary-color: #FF0000;
|
||||
--primary-color-text: #FFFFFF;
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
@@ -35,6 +37,10 @@
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
--p-primary-500: var(--p-blue-500);
|
||||
--p-button-primary-color : var(--p-primary-500);
|
||||
--primary-color: #FF0000;
|
||||
--primary-color-text: #FFFFFF;
|
||||
}
|
||||
|
||||
/*@media (prefers-color-scheme: dark) {*/
|
||||
|
||||
@@ -5,7 +5,8 @@
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
.p-inputnumber-input{
|
||||
|
||||
.p-inputnumber-input {
|
||||
width: 7rem;
|
||||
}
|
||||
|
||||
@@ -14,21 +15,22 @@
|
||||
justify-content: left !important;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.p-progressbar {
|
||||
height: 0.5rem !important;
|
||||
}
|
||||
|
||||
.p-selectbutton{
|
||||
.p-selectbutton {
|
||||
border-width: 1px !important;
|
||||
border-color: #d1d5db !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
canvas {
|
||||
/*margin-top: 1rem;*/
|
||||
/*height: 12 8px !important*/
|
||||
}
|
||||
|
||||
/*#app {*/
|
||||
/* !*max-width: 1280px;*!*/
|
||||
/* !*margin: 0 auto;*!*/
|
||||
|
||||
@@ -30,7 +30,7 @@ const props = defineProps(
|
||||
|
||||
<li v-for="el in elements"
|
||||
class="px-2 py-2 hover:bg-blue-50 rounded-md line-clamp-1 w-full"
|
||||
:class="selectedElement == el.id? '!bg-emerald-50 text-emerald-700': '' "
|
||||
:class="selectedElement == el.id? '!bg-blue-50 text-blue-700': '' "
|
||||
@click="selectedElement=el">
|
||||
{{ category.icon }} {{ e.name }}
|
||||
</li>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<Select v-model="spaceStore.space" :options="spaces" optionLabel="name" @change="selectSpace"/>
|
||||
<div class="relative flex flex-col items-center group">
|
||||
<!-- Имя пользователя -->
|
||||
<div class="flex bg-emerald-300 rounded-full w-10 h-10 items-center justify-center">
|
||||
<div class="flex bg-blue-300 rounded-full w-10 h-10 items-center justify-center">
|
||||
<span class="text-white text-center">{{ user.firstName.substring(0, 1) }}</span>
|
||||
</div>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
|
||||
<!-- Сообщение "Скопировано" -->
|
||||
<div v-if="copied"
|
||||
class="absolute bottom-[-60px] bg-green-500 text-white text-xs px-2 py-1 rounded transition-opacity">
|
||||
class="absolute bottom-[-60px] blue text-white text-xs px-2 py-1 rounded transition-opacity">
|
||||
Скопировано!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<transition name="slide-up">
|
||||
<div v-if="isOpen" class="fixed bottom-0 left-0 right-0 h-[90vh] bg-white rounded-t-2xl shadow-lg z-50 flex flex-col">
|
||||
<header class="flex justify-between items-center p-4 border-b border-gray-200">
|
||||
<h2 class="text-lg font-semibold">{{ props.header }}</h2>
|
||||
<h1 class="text-lg font-semibold">{{ props.header }}</h1>
|
||||
<button class="text-blue-600 text-lg" @click="closePopup">Закрыть</button>
|
||||
</header>
|
||||
<div class="flex-grow overflow-y-auto p-4">
|
||||
|
||||
@@ -11,10 +11,10 @@ const props = defineProps({
|
||||
<div v-if="show" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
|
||||
<div
|
||||
class=" px-10 py-5 rounded-lg border border-gray-200 flex flex-col items-center gap-4"
|
||||
:class="isError ? 'bg-red-100' : 'bg-green-100'"
|
||||
:class="isError ? 'bg-red-100' : 'bg-blue-100'"
|
||||
aria-label="Custom ProgressSpinner">
|
||||
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-green-500'" style="font-size: 2rem;"/>
|
||||
<p class="text-green-700" :class="isError ? 'text-red-500' : 'text-green-500'">{{ message }}</p>
|
||||
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-blue-500'" style="font-size: 2rem;"/>
|
||||
<p class="text-blue-700" :class="isError ? 'text-red-500' : 'text-blue-500'">{{ message }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -299,7 +299,7 @@ onMounted(async () => {
|
||||
<span v-html="catType"/>
|
||||
<ul>
|
||||
<li v-for="cat in category" class="px-2 py-2 hover:bg-blue-50 rounded-md line-clamp- w-full"
|
||||
:class="selectedCategory.id == cat.id? '!bg-emerald-50 text-emerald-700': '' " @click="selectedCategory=cat"> {{cat.icon}} {{cat.name}}</li>
|
||||
:class="selectedCategory.id == cat.id? '!bg-blue-50 text-blue-700': '' " @click="selectedCategory=cat"> {{cat.icon}} {{cat.name}}</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="flex flex-col items-center justify-center h-screen bg-gray-100">
|
||||
<Card class="w-full max-w-sm p-6 bg-white rounded-lg shadow-md">
|
||||
<template #title>
|
||||
<h2 class="text-2xl font-bold text-center">Вход</h2>
|
||||
<h1 class="text-2xl font-bold text-center">Вход</h1>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
@@ -23,7 +23,7 @@
|
||||
<small v-if="errors.password" class="text-red-500">{{ errors.password }}</small>
|
||||
</div>
|
||||
|
||||
<Button label="Войти" type="submit" class="w-full mt-2" :disabled="loading" :loading="loading" />
|
||||
<Button label="Войти" type="submit" class="w-full mt-2 !bg-blue-300 hover:!bg-blue-400 !border-blue-300" :disabled="loading" :loading="loading" />
|
||||
</form>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="flex items-center justify-center min-h-screen bg-gray-100">
|
||||
<Card class="w-full max-w-md p-6 bg-white rounded-2xl shadow-lg">
|
||||
<template #title>
|
||||
<h2 class="text-2xl font-bold text-center text-gray-800">Регистрация</h2>
|
||||
<h1 class="text-2xl font-bold text-center text-gray-800">Регистрация</h1>
|
||||
</template>
|
||||
<Toast/>
|
||||
<template #content>
|
||||
@@ -31,7 +31,7 @@
|
||||
<small v-if="errors.confirmPassword" class="text-red-500">{{ errors.confirmPassword }}</small>
|
||||
</div>
|
||||
|
||||
<Button label="Зарегистрироваться" type="submit" class="w-full mt-2" :disabled="loading" :loading="loading" />
|
||||
<Button label="Зарегистрироваться" type="submit" class="w-full mt-2 !bg-blue-300 hover:!bg-blue-400 !border-blue-300" :disabled="loading" :loading="loading" />
|
||||
</form>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -78,7 +78,7 @@ watch(
|
||||
unstyled
|
||||
/>
|
||||
<Button v-if="isEditing" @click="stopEditing" icon="pi pi-check" severity="success" rounded outlined
|
||||
aria-label="Search"/>
|
||||
aria-label="Search" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -121,7 +121,7 @@ onMounted(() => {
|
||||
</div>
|
||||
<div v-if="categories.length ==0" class="text-red-500 font-bold">Сперва лучше создать категории</div>
|
||||
<div class="flex flex-row gap-2 justify-end items-center">
|
||||
<Button label="Создать" severity="success" icon="pi pi-save" @click="create"/>
|
||||
<Button label="Создать" severity="success" icon="pi pi-save" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300" @click="create"/>
|
||||
<Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancel"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<div v-else class="p-4 bg-gray-100 h-full flex flex-col gap-4 ">
|
||||
<!-- Заголовок -->
|
||||
<div class="flex flex-row gap-4 items-center">
|
||||
<h2 class="text-4xl font-bold">Бюджеты</h2>
|
||||
<Button v-if="selectedSpace" label="+ Создать" @click="creationOpened=true" size="small"/>
|
||||
<h1 class="text-4xl font-bold">Бюджеты</h1>
|
||||
<Button v-if="selectedSpace" label="+ Создать" @click="creationOpened=true" size="small" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
<BudgetCreationView :opened="creationOpened" @budget-created="fetchBudgets"
|
||||
@close-modal="creationOpened=false"/>
|
||||
<StatusView :show="creationSuccessModal" :is-error="false" :message="'Бюджет создан!'"/>
|
||||
@@ -39,7 +39,7 @@
|
||||
</div>
|
||||
<div class="flex flex-col justify-between gap-4">
|
||||
<router-link :to="'/budgets/'+budget.id">
|
||||
<i class="pi pi-arrow-circle-right text-green-500" style="font-size: 1.5rem;"/>
|
||||
<i class="pi pi-arrow-circle-right text-blue-300" style="font-size: 1.5rem;"/>
|
||||
</router-link>
|
||||
<button @click="deleteBudget(budget)"><i class="pi pi-trash" style="color:red; font-size: 1.2rem"/></button>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@ import {computed, onMounted, PropType, ref} from "vue";
|
||||
import {Transaction} from "@/models/Transaction";
|
||||
import {Category, CategoryType} from "@/models/Category";
|
||||
import {getCategories, getCategoryTypes} from "@/services/categoryService";
|
||||
import { updateTransactionRequest} from "@/services/transactionService";
|
||||
import {updateTransactionRequest} from "@/services/transactionService";
|
||||
import {formatAmount, formatDate} from "@/utils/utils";
|
||||
import TransactionForm from "@/components/transactions/TransactionForm.vue";
|
||||
import {useToast} from "primevue/usetoast";
|
||||
@@ -25,13 +25,13 @@ const props = defineProps(
|
||||
transactions: {
|
||||
type: Array as () => Array<Transaction>,
|
||||
required: false
|
||||
}
|
||||
},
|
||||
bgColor: String
|
||||
}
|
||||
)
|
||||
const emits = defineEmits(['open-drawer', 'transaction-checked', 'transaction-updated', 'delete-transaction'])
|
||||
|
||||
|
||||
|
||||
const setIsDoneTrue = async () => {
|
||||
setTimeout(async () => {
|
||||
|
||||
@@ -116,9 +116,8 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<div :class="
|
||||
props.isList ? ' bg-gradient-to-r shadow-lg border-2 gap-5 p-2 rounded-xl me-5' : 'border-b pb-2'
|
||||
"
|
||||
class="flex bg-white min-w-fit max-h-fit flex-row items-center gap-4 w-full ">
|
||||
props.isList ? ' bg-gradient-to-r shadow-lg border-2 gap-5 p-2 rounded-xl me-5' : 'border-b pb-2', props.bgColor ? props.bgColor : 'bg-white'"
|
||||
class="flex min-w-fit max-h-fit flex-row items-center gap-4 w-full ">
|
||||
<div>
|
||||
<p v-if="transaction.type.code=='INSTANT' || props.isList"
|
||||
class="text-6xl font-bold text-gray-700 dark:text-gray-400">
|
||||
@@ -136,14 +135,15 @@ onMounted(async () => {
|
||||
<p :class="transaction.isDone && isPlanned && !props.isList ? 'line-through' : ''" class="font-bold">{{
|
||||
transaction.comment
|
||||
}}</p>
|
||||
<p :class="transaction.isDone && isPlanned && !props.isList ? 'line-through' : ''" class="font-light text-start">
|
||||
<p :class="transaction.isDone && isPlanned && !props.isList ? 'line-through' : ''"
|
||||
class="font-light text-start">
|
||||
{{ isPlanned ? transaction.category.icon : '' }} {{
|
||||
transaction.category.name
|
||||
}} |
|
||||
{{ formatDate(transaction.date) }}</p>
|
||||
</div>
|
||||
<div
|
||||
:class="transaction.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-green-700' && transaction.isDone && isPlanned ? 'line-through' : ''"
|
||||
:class="transaction.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-blue-700' && transaction.isDone && isPlanned ? 'line-through' : ''"
|
||||
class="text-lg line-clamp-1 ">
|
||||
|
||||
{{ formatAmount(transaction.amount) }} ₽
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<div :class="!updateLoading ? '' : 'h-fit bg-white opacity-50 z-0 '" class=" flex flex-col gap-3">
|
||||
<div class="flex flex-row justify-between ">
|
||||
<div class="flex flex-col gap-2">
|
||||
<h2 class="text-4xl font-bold">Бюджет {{ budget.name }} </h2>
|
||||
<h1 class="text-4xl font-bold">Бюджет {{ budget.name }} </h1>
|
||||
<div class="flex flex-row gap-2 text-xl">{{ formatDate(budget.dateFrom) }} -
|
||||
{{ formatDate(budget.dateTo) }}
|
||||
</div>
|
||||
|
||||
@@ -705,7 +705,7 @@ watch([budget, plannedExpenses], () => {
|
||||
if (lastDateWithExpenses && periodStart) {
|
||||
// Добавляем период без трат, если он был
|
||||
result.push({
|
||||
date: currentDate,
|
||||
date: new Date(currentDate),
|
||||
dateStr: periodStart.toLocaleDateString('ru-RU') === new Date(new Date(currentDate).setDate(currentDate.getDate() - 1)).toLocaleDateString('ru-RU')
|
||||
? periodStart.getUTCDate() + " " + getMonthName2(periodStart.getMonth(), "род") + " " + periodStart.getUTCFullYear() + ' трат нет.'
|
||||
: `В период с ${periodStart.toLocaleDateString('ru-RU')} по ${new Date(new Date(currentDate).setDate(currentDate.getDate() - 1)).toLocaleDateString('ru-RU')} трат нет.`,
|
||||
@@ -718,7 +718,7 @@ watch([budget, plannedExpenses], () => {
|
||||
// Добавляем день с тратами
|
||||
lastDateWithExpenses = new Date(currentDate)
|
||||
result.push({
|
||||
date: currentDate,
|
||||
date: new Date(currentDate),
|
||||
dateStr: currentDate.getUTCDate() + " " + getMonthName2(currentDate.getMonth(), "род") + " " + currentDate.getUTCFullYear(),
|
||||
expenses: expenses,
|
||||
expensesSum: expensesSum,
|
||||
@@ -733,7 +733,7 @@ watch([budget, plannedExpenses], () => {
|
||||
// Добавляем последний период без трат, если он был
|
||||
if (lastDateWithExpenses && periodStart) {
|
||||
result.push({
|
||||
date: currentDate,
|
||||
date: new Date(currentDate),
|
||||
dateStr: `В период с ${periodStart.toLocaleDateString('ru-RU')} по ${lastDateWithExpenses.toLocaleDateString('ru-RU')} трат нет.`,
|
||||
expenses: [],
|
||||
expensesSum: 0
|
||||
@@ -791,7 +791,7 @@ onUnmounted(async () => {
|
||||
<div class=" flex flex-col gap-3">
|
||||
<div class="flex flex-row justify-between ">
|
||||
<div class="flex flex-col gap-2">
|
||||
<h2 class="text-4xl font-bold text-gray-700">Бюджет {{ budget.name }} </h2>
|
||||
<h1 class="text-4xl font-bold text-gray-700">Бюджет {{ budget.name }} </h1>
|
||||
<div class="flex flex-row gap-2 text-xl text-gray-700">{{ formatDate(budget.dateFrom) }} -
|
||||
{{ formatDate(budget.dateTo) }}
|
||||
</div>
|
||||
@@ -1088,7 +1088,7 @@ onUnmounted(async () => {
|
||||
<!-- Планируемые доходы -->
|
||||
<div >
|
||||
<div class="flex flex-row gap-4 items-center mb-4">
|
||||
<h3 class="text-2xl font-bold text-emerald-500 ">Поступления</h3>
|
||||
<h3 class="text-2xl font-bold text-blue-500 ">Поступления</h3>
|
||||
<button @click="openDrawer('PLANNED', 'INCOME')">
|
||||
<!-- <i class="pi pi-plus-circle text-green-500" style="font-size: 1rem;"/>-->
|
||||
<span class="font-light text-sm">+ Добавить</span>
|
||||
@@ -1166,8 +1166,9 @@ onUnmounted(async () => {
|
||||
|
||||
<div v-for="day, dayOne in calendar" class="flex flex-col justify-between p-4 shadow-md rounded-lg "
|
||||
v-if="calendarExpanded == '1'"
|
||||
:class="day.date.toISOString().split('T')[0] == new Date().toISOString().split('T')[0]? 'bg-emerald-200' : 'bg-white '">
|
||||
:class="day.date.toISOString().split('T')[0] == new Date().toISOString().split('T')[0] && !day.dateStr.includes('нет')? 'bg-blue-100' : 'bg-white '">
|
||||
<div class="flex flex-row gap-2 items-center ">
|
||||
|
||||
<span class="font-bold text-xl">{{ day.dateStr }} </span>
|
||||
<span
|
||||
v-if="day.expensesSum>0">Трат по плану: {{ formatAmount(day.expensesSum) }} ₽</span>
|
||||
@@ -1176,6 +1177,7 @@ onUnmounted(async () => {
|
||||
<BudgetTransactionView v-for="expense in day.expenses" :key="expense.id"
|
||||
:transaction="expense"
|
||||
:is-list="false"
|
||||
:bg-color="day.date.toISOString().split('T')[0] == new Date().toISOString().split('T')[0] ? 'bg-blue-100' : 'bg-white '"
|
||||
@transaction-updated="updateTransactions"
|
||||
@transaction-checked="updateTransactions"
|
||||
/>
|
||||
@@ -1186,16 +1188,16 @@ onUnmounted(async () => {
|
||||
<li v-for="(category, categoryId) in categoriesTransactions" :key="categoryId"
|
||||
class="flex flex-col justify-between p-4 shadow-md rounded-lg bg-white ">
|
||||
<div class="">
|
||||
<div class="flex flex-row justify-between w-full items-center">
|
||||
<div class="flex flex-row justify-between gap-2 w-full items-center">
|
||||
<div class="flex flex-row col-span-2 gap-2 items-center">
|
||||
<span class=" font-bold line-clamp-1" style="font-size: 1.25rem">{{
|
||||
<span class=" font-bold overflow-hidden truncate max-w-[11rem] md:max-w-[16rem] " style="font-size: 1.25rem">{{
|
||||
category.name.category.icon
|
||||
}} {{ category.name.category.name }}</span>
|
||||
<button @click="openDrawer('INSTANT', 'EXPENSE', category.name.category.id)">
|
||||
<i class="pi pi-plus-circle"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-row w-fit gap-1 justify-between">
|
||||
<div class="flex flex-row min-w-fit gap-1 justify-between">
|
||||
|
||||
<span>{{ formatAmount(category.name.currentSpent) }} </span>
|
||||
<span> / </span>
|
||||
|
||||
@@ -290,10 +290,10 @@ onMounted(async () => {
|
||||
<div v-if="result" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
|
||||
<div
|
||||
class=" px-10 py-5 rounded-lg border border-gray-200 flex flex-col items-center gap-4"
|
||||
:class="isError ? 'bg-red-100' : 'bg-green-100'"
|
||||
:class="isError ? 'bg-red-100' : 'bg-blue-100'"
|
||||
aria-label="Custom ProgressSpinner">
|
||||
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-green-500'" style="font-size: 2rem;"/>
|
||||
<p class="text-green-700" :class="isError ? 'text-red-500' : 'text-green-500'">{{ resultText }}</p>
|
||||
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-blue-500'" style="font-size: 2rem;"/>
|
||||
<p class="text-blue-700" :class="isError ? 'text-red-500' : 'text-blue-500'">{{ resultText }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -423,7 +423,7 @@ onMounted(async () => {
|
||||
|
||||
<div class="fixed col-12 flex justify-content-end gap-4 bottom-8">
|
||||
|
||||
<Button label="Сохранить" icon="pi pi-check" class="p-button-success"
|
||||
<Button label="Сохранить" icon="pi pi-check" class="p-button-success !bg-blue-300 hover:!bg-blue-400 !border-blue-300"
|
||||
@click="isEditing ? updateTransaction() : createTransaction()"/>
|
||||
<Button label="Отмена" icon="pi pi-times" class="p-button-secondary " @click="closeDrawer"/>
|
||||
<Button v-if="isEditing" label="Удалить" icon="pi pi-times" class="p-button-success" severity="danger"
|
||||
|
||||
@@ -123,7 +123,7 @@ const fetchRecurrents = async () => {
|
||||
</div>
|
||||
<!-- <button @click="showCreateCategoryModal=true">hui</button>-->
|
||||
<div class="flex flex-col gap-2">
|
||||
<Button label="Добавить категорию" icon="pi pi-plus" class="text-sm"
|
||||
<Button label="Добавить категорию" icon="pi pi-plus" class="text-sm !bg-blue-300 hover:!bg-blue-400 !border-blue-300"
|
||||
@click="showCreateCategoryModal=true"/>
|
||||
|
||||
<CreateCategoryModal v-if="showCreateCategoryModal" :show="showCreateCategoryModal"
|
||||
|
||||
@@ -38,7 +38,7 @@ onMounted(async () => {
|
||||
<div class="flex flex-row items-center min-w-fit justify-between">
|
||||
<p class="text-2xl ">Категории</p>
|
||||
<router-link to="/settings/categories">
|
||||
<Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded/>
|
||||
<Button size="large" icon="pi pi-arrow-circle-right" class=" !bg-blue-300 hover:!bg-blue-400 !border-blue-300"severity="secondary" text rounded/>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="flex flex-row overflow-x-auto gap-4 h-fit p-6 ">
|
||||
|
||||
@@ -138,11 +138,11 @@ onMounted(async () => {
|
||||
<div class="flex flex-row items-center gap-2 flex-wrap">
|
||||
<Tag v-for="tag in tags" :key="tag.id" class="w-fit group">{{ tag.name }} ({{ tag.code }})<i
|
||||
class="pi pi-trash !hidden group-hover:!block" @click="deleteTag(tag)"/></Tag>
|
||||
<button v-if=!creationShowed class="bg-emerald-100 border border-emerald-700 p-0.5 px-1 rounded"
|
||||
<button v-if=!creationShowed class="bg-blue-100 border border-blue-700 p-0.5 px-1 rounded"
|
||||
@click="creationShowed = !creationShowed"><span
|
||||
class="text-gray-500 font-bold flex flex-row gap-1 items-center"><i
|
||||
class="pi pi-plus-circle"/> Добавить</span></button>
|
||||
<div v-else class=" bg-emerald-50 border-spacing-0.5 border-emerald-700 rounded p-0.5">
|
||||
<div v-else class=" bg-blue-50 border-spacing-0.5 border-blue-700 rounded p-0.5">
|
||||
<div class="flex flex-row gap-4 px-1">
|
||||
<div class="flex flex-col items-center gap- ">
|
||||
<div class="flex flex-row items-center gap-2 ">
|
||||
|
||||
@@ -43,7 +43,7 @@ onMounted(async () => {
|
||||
<div class="flex flex-row items-center min-w-fit justify-between">
|
||||
<p class="text-2xl font-bold">Повторяемые операции</p>
|
||||
<router-link to="/settings/recurrents">
|
||||
<Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded/>
|
||||
<Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded class="!bg-blue-400 hover:!bg-blue-500 !border-blue-500"/>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="flex flex-row overflow-x-auto gap-4 h-fit p-6 ">
|
||||
|
||||
@@ -51,13 +51,13 @@ const pages = ref([
|
||||
<template>
|
||||
|
||||
<div class="flex bg-gray-100 flex-col h-full px-4 gap-4 ">
|
||||
<h2 class="text-4xl font-bold ">Настройки</h2>
|
||||
<h1 class="text-4xl font-bold ">Настройки</h1>
|
||||
|
||||
<div class="xl:grid xl:grid-cols-8 w-full h-full ">
|
||||
<div class=" hidden xl:flex flex-row items-start justify-end col-start-2 col-span-1 ">
|
||||
<div class=" hidden xl:flex flex-row items-start justify-end w-fit col-start-2 col-span-1 ">
|
||||
<ul class=" flex-col gap-1 ">
|
||||
<li v-for="page in pages" :key="page.code"
|
||||
class="flex flex-row gap-2 p-2 hover:bg-emerald-100 hover:text-emerald-700 hover:rounded-md items-center"
|
||||
class="flex flex-row gap-2 p-2 hover:bg-blue-100 hover:text-blue-700 hover:rounded-md items-center"
|
||||
:class="selectedModeCode == page.code ? 'bg-blue-100' : ''" @click="selectMode(page.code)">
|
||||
<i :class="page.icon"/>{{ page.title }}
|
||||
</li>
|
||||
@@ -69,7 +69,7 @@ const pages = ref([
|
||||
<ul class=" min-w-fit w-full items-start">
|
||||
<li v-for="page in pages"
|
||||
class=" flex flex-row gap-2 px-2 py-2 hover:bg-blue-50 rounded-md line-clamp-1 w-full"
|
||||
:class="selectedModeCode == page.code ? '!bg-emerald-50 text-emerald-700': '' "
|
||||
:class="selectedModeCode == page.code ? '!bg-blue-50 text-blue-700': '' "
|
||||
@click="selectMode(page.code)">
|
||||
<i :class="page.icon"/>{{ page.title }}
|
||||
</li>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<div v-else>
|
||||
<div class="flex flex-col gap-4 xl:flex-row justify-between bg-gray-100">
|
||||
<h2 class="text-4xl ">Категории</h2>
|
||||
<Button label="Добавить категорию" icon="pi pi-plus" class="text-sm" @click="openCreateDialog(null)"/>
|
||||
<Button label="Добавить категорию" icon="pi pi-plus" class="text-sm !bg-blue-300 hover:!bg-blue-400 !border-blue-300" @click="openCreateDialog(null)"/>
|
||||
</div>
|
||||
|
||||
<!-- Поле для поиска -->
|
||||
@@ -23,7 +23,7 @@
|
||||
<!-- Переключатель категорий (доходы/расходы) -->
|
||||
<div class="card flex justify-center w-full ">
|
||||
<SelectButton v-model="selectedCategoryType" :options="categoryTypes" optionLabel="name"
|
||||
class="!bg-emerald-50 !border-emerald-600 "
|
||||
class="!bg-blue-50 !border-blue-600 "
|
||||
aria-labelledby="category-switch"/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -98,7 +98,7 @@
|
||||
|
||||
<!-- Кнопки -->
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<Button label="Сохранить" icon="pi pi-check" @click="savePayment" class="p-button-success"/>
|
||||
<Button label="Сохранить" icon="pi pi-check" @click="savePayment" class="p-button-succes!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
<Button label="Отмена" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -209,7 +209,7 @@ const resetForm = () => {
|
||||
|
||||
<!-- Кнопки -->
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<Button label="Сохранить" icon="pi pi-check" @click="savePayment" class="p-button-success"/>
|
||||
<Button label="Сохранить" icon="pi pi-check" @click="savePayment" class="p-button-success !bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
<Button label="Отмена" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<!-- Заголовок -->
|
||||
<div class="flex flex-col gap-4 xl:flex-row justify-between bg-gray-100">
|
||||
<h1 class="text-4xl text-gray-800">Ежемесячные платежи</h1>
|
||||
<Button label="Добавить платеж" icon="pi pi-plus" class="text-sm " @click="toggleModal(null)"/>
|
||||
<Button label="Добавить платеж" icon="pi pi-plus" class="text-sm !bg-blue-300 hover:!bg-blue-400 !border-blue-300" @click="toggleModal(null)"/>
|
||||
</div>
|
||||
<div v-if="!space">Выберите сперва пространство</div>
|
||||
<!-- Список рекуррентных платежей -->
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<!-- Дата и Сумма -->
|
||||
<div class="flex flex-row justify-between w-full items-center">
|
||||
<div class="text-gray-500">
|
||||
<strong class="text-xl text-green-600">{{ payment.atDay }} </strong> числа | {{payment.category.type.code=='EXPENSE' ? 'Расход' : 'Приход'}}
|
||||
<strong class="text-xl text-blue-400">{{ payment.atDay }} </strong> числа | {{payment.category.type.code=='EXPENSE' ? 'Расход' : 'Приход'}}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
@@ -35,7 +35,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="payment.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-green-700'"
|
||||
:class="payment.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-blue-700'"
|
||||
class="text-xl font-bold line-clamp-1 ">{{ formatAmount(payment.amount) }} ₽
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -62,7 +62,7 @@ const resetForm = () => {
|
||||
|
||||
<template>
|
||||
<LoadingView v-if="loading" halfscreen/>
|
||||
<div v-else class="flex flex-col gap-4 mt-1">
|
||||
<div v-else class="flex flex-col gap-4 mt-1 h-80 items-center justify-between">
|
||||
<FloatLabel variant="on" class="w-full">
|
||||
<label for="name">Название</label>
|
||||
<InputText v-model="spaceName" id="name" class="w-full"/>
|
||||
@@ -76,7 +76,7 @@ const resetForm = () => {
|
||||
Создать стандартный набор категорий?
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 justify-end items-center">
|
||||
<Button label="Создать" severity="success" icon="pi pi-save" @click="createSpace"/>
|
||||
<Button label="Создать" severity="success" icon="pi pi-save" @click="createSpace" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
<Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancel"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -39,7 +39,7 @@ const acceptInvite = async () => {
|
||||
<p class="text-lg">Принять приглашение?</p>
|
||||
<div class="flex flex-row gap-4">
|
||||
<Button label="Отказаться" severity="secondary" @click="router.push('/spaces')"/>
|
||||
<Button label="Принять" severity="success" @click="acceptInvite"/>
|
||||
<Button label="Принять" severity="success" @click="acceptInvite" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -253,7 +253,7 @@ onMounted(async () => {
|
||||
<button @click="selectSpace(space)">
|
||||
|
||||
<div class="flex p-1 rounded border"
|
||||
:class="selectedSpace? selectedSpace.id === space.id ? 'bg-green-100' : 'bg-gray-100':'bg-gray-100'"
|
||||
:class="selectedSpace? selectedSpace.id === space.id ? 'bg-blue-100' : 'bg-gray-100':'bg-gray-100'"
|
||||
@click="spaceStore.setSpace(space)">
|
||||
<span v-if="selectedSpace? space.id === selectedSpace.id : false"
|
||||
class="font-bold text-gray-500 items-center"><i
|
||||
@@ -269,7 +269,7 @@ onMounted(async () => {
|
||||
:key="user.id"
|
||||
@mouseover="user.isHovered = true"
|
||||
@mouseleave="user.isHovered = false">
|
||||
<div class="relative flex bg-emerald-300 rounded-full w-10 h-10 items-center justify-center">
|
||||
<div class="relative flex bg-blue-300 rounded-full w-10 h-10 items-center justify-center">
|
||||
<!-- Первая буква имени -->
|
||||
<span class="text-white text-center">
|
||||
{{ user.firstName.substring(0, 1) }}
|
||||
@@ -301,7 +301,7 @@ onMounted(async () => {
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="space.owner.id == useUserStore().user.id"
|
||||
class="flex bg-gray-300 hover:bg-emerald-300 rounded-full w-10 h-10 items-center justify-center relative"
|
||||
class="flex bg-gray-300 hover:bg-blue-300 rounded-full w-10 h-10 items-center justify-center relative"
|
||||
>
|
||||
<i class="text-white text-center pi pi-plus" @click="createInvite(space)"></i>
|
||||
</div>
|
||||
@@ -322,8 +322,8 @@ onMounted(async () => {
|
||||
<div class="w-full h-full">
|
||||
<div class="bg-white p-4 shadow-lg rounded-lg flex flex-col gap-2 justify-center items-center h-[200px]">
|
||||
<button class="flex-col" @click="creationOpened = !creationOpened">
|
||||
<i class="pi pi-plus-circle text-emerald-300" style="font-size: 2.5rem"></i>
|
||||
<p class="text-emerald-600">Создать пространство</p>
|
||||
<i class="pi pi-plus-circle text-blue-300" style="font-size: 2.5rem"></i>
|
||||
<p class="text-blue-600">Создать пространство</p>
|
||||
</button>
|
||||
<SpaceCreationDialog :opened="creationOpened" @spaceCreated="spaceCreated"
|
||||
@close-modal="creationOpened = false"/>
|
||||
|
||||
@@ -249,7 +249,7 @@ const updateTransaction = async () => {
|
||||
emit('update-transaction', editedTransaction.value);
|
||||
emit('transaction-updated');
|
||||
await transactionsUpdatedEmit()
|
||||
toast.add({severity: 'success', summary: 'Успешно!', detail: 'Транзакция создана!', life: 3000});
|
||||
toast.add({severity: 'success', summary: 'Успешно!', detail: 'Транзакция изменена!', life: 3000});
|
||||
} catch (error) {
|
||||
toast.add({severity: 'error', summary: 'Ошибка!', detail: error.response.data["message"], life: 3000});
|
||||
console.error('Error updating transaction:', error);
|
||||
@@ -357,10 +357,10 @@ onMounted(async () => {
|
||||
<div v-if="result" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
|
||||
<div
|
||||
class=" px-10 py-5 rounded-lg border border-gray-200 flex flex-col items-center gap-4"
|
||||
:class="isError ? 'bg-red-100' : 'bg-green-100'"
|
||||
:class="isError ? 'bg-red-100' : 'bg-blue-100'"
|
||||
aria-label="Custom ProgressSpinner">
|
||||
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-green-500'" style="font-size: 2rem;"/>
|
||||
<p class="text-green-700" :class="isError ? 'text-red-500' : 'text-green-500'">{{ resultText }}</p>
|
||||
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-blue-500'" style="font-size: 2rem;"/>
|
||||
<p class="text-blue-700" :class="isError ? 'text-red-500' : 'text-blue-500'">{{ resultText }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -493,7 +493,7 @@ onMounted(async () => {
|
||||
|
||||
<div class="fixed col-12 flex justify-content-end gap-4 bottom-8">
|
||||
|
||||
<Button label="Сохранить" icon="pi pi-check" class="p-button-success"
|
||||
<Button label="Сохранить" icon="pi pi-check" class="p-button-success !bg-blue-300 hover:!bg-blue-400 !border-blue-300"
|
||||
@click="isEditing ? updateTransaction() : createTransaction()"/>
|
||||
<Button label="Отмена" icon="pi pi-times" class="p-button-secondary " @click="closeDrawer"/>
|
||||
<Button v-if="isEditing" label="Удалить" icon="pi pi-times" class="p-button-success" severity="danger"
|
||||
|
||||
@@ -141,12 +141,12 @@ onUnmounted(async () => {
|
||||
<template>
|
||||
<div class="flex flex-col gap-4 p-4 bg-gray-100 h-full ">
|
||||
<div class="flex flex-row gap-4 items-center">
|
||||
<h2 class="text-4xl font-bold">Список транзакций </h2>
|
||||
<h1 class="text-4xl font-bold">Список транзакций </h1>
|
||||
<Button v-if="selectedSpace" label="+ Создать" @click="{
|
||||
drawerStore.setCategoryType('EXPENSE');
|
||||
drawerStore.setTransactionType('INSTANT');
|
||||
drawerStore.visible = true
|
||||
}" size="small"/>
|
||||
}" size="small" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
</div>
|
||||
<div v-if="!selectedSpace" class="flex w-full h-full items-center justify-center">
|
||||
<p>Сперва нужно выбрать Пространство.
|
||||
@@ -185,7 +185,7 @@ onUnmounted(async () => {
|
||||
@delete-transaction="fetchTransactions(true)"
|
||||
/>
|
||||
<div v-if="!loading" class="flex items-center justify-center px-2 py-1 mb-5">
|
||||
<Button @click="fetchTransactions(false)">Загрузить следующие...</Button>
|
||||
<Button @click="fetchTransactions(false)" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300">Загрузить следующие...</Button>
|
||||
</div>
|
||||
<!-- Показать спиннер загрузки, если идет загрузка -->
|
||||
<ProgressSpinner v-if="loading" class="mb-4" style="width: 50px; height: 50px;"
|
||||
|
||||
@@ -112,8 +112,8 @@ onMounted(async () => {
|
||||
|
||||
<!-- Заголовок -->
|
||||
<div class="flex flex-row gap-4 items-center">
|
||||
<h2 class="text-4xl font-bold">Вишлисты</h2>
|
||||
<Button v-if="selectedSpace" label="+ Создать" @click="creationOpened=true" size="small"/>
|
||||
<h1 class="text-4xl font-bold">Вишлисты</h1>
|
||||
<Button v-if="selectedSpace" label="+ Создать" @click="creationOpened=true" size="small" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
<!-- <StatusView :show="creationSuccessModal" :is-error="false" :message="'Бюджет создан!'"/>-->
|
||||
</div>
|
||||
<!-- Плитка с бюджетами -->
|
||||
@@ -142,7 +142,7 @@ onMounted(async () => {
|
||||
</router-link>
|
||||
<div class="text-sm font-light ">{{ wishlist.description }}</div>
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<div class="relative flex bg-emerald-300 rounded-full w-10 h-10 items-center justify-center">
|
||||
<div class="relative flex bg-blue-300 rounded-full w-10 h-10 items-center justify-center">
|
||||
<!-- Первая буква имени -->
|
||||
<span class="text-white text-center">{{ wishlist.owner.firstName.substring(0, 1) }}</span>
|
||||
</div>
|
||||
|
||||
@@ -73,7 +73,7 @@ const cancelCreation = () => {
|
||||
<Textarea v-model="wishlist.description" id="name" class="w-full"/>
|
||||
</FloatLabel>
|
||||
<div class="flex flex-row gap-2 justify-end items-center">
|
||||
<Button label="Создать" severity="success" icon="pi pi-save" @click="createWishlist"/>
|
||||
<Button label="Создать" severity="success" icon="pi pi-save" @click="createWishlist" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
<Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancelCreation"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -121,7 +121,7 @@ onMounted(async () => {
|
||||
<InputText id="link" type="text" v-model="reservedBy" class="w-full"/>
|
||||
</FloatLabel>
|
||||
<div class="flex flex-row w-full justify-between">
|
||||
<Button label="Сохранить" @click="reserveItem"/>
|
||||
<Button label="Сохранить" @click="reserveItem" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
<Button label="Отмена" @click="reserveModalShow=false;selectedReserveItem=null;reservedBy=null"
|
||||
severity="secondary"/>
|
||||
</div>
|
||||
@@ -138,11 +138,11 @@ onMounted(async () => {
|
||||
<div class="flex flex-col justify-between gap-5">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-row gap-2 items-end">
|
||||
<h2 class="text-4xl font-bold text-gray-700">Вишлист {{ wishlist.name }} </h2>
|
||||
<h1 class="text-4xl font-bold text-gray-700">Вишлист {{ wishlist.name }} </h1>
|
||||
</div>
|
||||
<p class="text-lg text-gray-500">{{ wishlist.description }}</p>
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<div class="relative flex bg-emerald-300 rounded-full w-10 h-10 items-center justify-center">
|
||||
<div class="relative flex bg-blue-300 rounded-full w-10 h-10 items-center justify-center">
|
||||
<!-- Первая буква имени -->
|
||||
<span class="text-white text-center">{{ wishlist.owner.firstName.substring(0, 1) }}</span>
|
||||
</div>
|
||||
@@ -200,14 +200,14 @@ onMounted(async () => {
|
||||
<div class="flex flex-row w-full justify-between">
|
||||
<p class="font-semibold text-xl text-gray-700">{{ item.name }}</p>
|
||||
</div>
|
||||
<p class="font-bold text-lg text-emerald-700">{{ formatAmount(item.price) }} ₽</p>
|
||||
<p class="font-bold text-lg text-blue-700">{{ formatAmount(item.price) }} ₽</p>
|
||||
<p class="font-light text-gray-700 text-wrap">{{ item.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 ">
|
||||
<a :href="item.link"
|
||||
target="_blank" class="w-fit">
|
||||
<Button label="В магазин" icon="pi pi-arrow-up-right" iconPos="right"/>
|
||||
<Button label="В магазин" icon="pi pi-arrow-up-right" iconPos="right" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
</a>
|
||||
<Button
|
||||
:label="!item.reservedBy ? 'Я беру!' : item.reservedBy.aid != aidCookie ? 'Забронировано.' : 'Отменить'"
|
||||
|
||||
@@ -113,7 +113,7 @@ const resetForm = () => {
|
||||
<InputGroupAddon>.00</InputGroupAddon>
|
||||
</InputGroup>
|
||||
<div class="flex flex-row gap-2 justify-end items-center">
|
||||
<Button label="Создать" severity="success" icon="pi pi-save" @click="itemCreate"/>
|
||||
<Button label="Создать" severity="success" icon="pi pi-save" @click="itemCreate" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
<Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancelCreation"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -289,7 +289,7 @@ onMounted(async () => {
|
||||
<Image v-if="fileUploadLink" :src="fileUploadLink" width="240" preview class="w-fit"/>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 w-full justify-center">
|
||||
<Button label="Загрузить" @click="upload"/>
|
||||
<Button label="Загрузить" @click="upload" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
<Button label="Сбросить" @click="fileUploadLink=null;fileupload=null" severity="secondary"/>
|
||||
<Button label="Отмена" @click="imageUploadVisible = false;fileUploadLink=null" severity="danger"/>
|
||||
</div>
|
||||
@@ -320,7 +320,7 @@ onMounted(async () => {
|
||||
<div class="flex flex-col justify-between gap-5">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-col md:flex-row gap-2 items-start md:items-end">
|
||||
<h2 class="text-4xl font-bold text-gray-700">Вишлист {{ wishlist.name }} </h2>
|
||||
<h1 class="text-4xl font-bold text-gray-700">Вишлист {{ wishlist.name }} </h1>
|
||||
<button @click="shareDialogOpened=true"><span class="text-sm text-gray-600">Поделиться <i
|
||||
class="pi pi-arrow-up-right" style="font-size: 0.65rem"/></span></button>
|
||||
</div>
|
||||
@@ -330,7 +330,7 @@ onMounted(async () => {
|
||||
<p class="text-lg text-gray-500">{{ wishlist.description }}</p>
|
||||
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<div class="relative flex bg-emerald-300 rounded-full w-10 h-10 items-center justify-center">
|
||||
<div class="relative flex bg-blue-300 rounded-full w-10 h-10 items-center justify-center">
|
||||
<!-- Первая буква имени -->
|
||||
<span class="text-white text-center">{{ wishlist.owner.firstName.substring(0, 1) }}</span>
|
||||
</div>
|
||||
@@ -340,7 +340,7 @@ onMounted(async () => {
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex flex-row gap-4">
|
||||
<p class="text-2xl text-gray-700">Желания</p>
|
||||
<Button label="+ Создать" @click="wishlistItemCreationOpened=true" size="small"/>
|
||||
<Button label="+ Создать" @click="wishlistItemCreationOpened=true" size="small" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-2">
|
||||
@@ -409,7 +409,7 @@ onMounted(async () => {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-bold text-lg text-emerald-700">{{ formatAmount(item.price) }} ₽</p>
|
||||
<p class="font-bold text-lg text-blue-700">{{ formatAmount(item.price) }} ₽</p>
|
||||
<p class="font-light text-gray-700 text-wrap">{{ item.description }}</p>
|
||||
</div>
|
||||
|
||||
@@ -417,7 +417,7 @@ onMounted(async () => {
|
||||
<div class="grid grid-cols-2 w-full justify-between items-center">
|
||||
<a :href="item.link"
|
||||
target="_blank">
|
||||
<Button label="В магазин" icon="pi pi-arrow-up-right" iconPos="right"/>
|
||||
<Button label="В магазин" icon="pi pi-arrow-up-right" iconPos="right" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
|
||||
</a>
|
||||
<span v-if="!item.reservedBy" class="text-gray-500">Не забронировано</span>
|
||||
<Button v-else @mouseover="hoveredCancelReservationButton.set(item.id, true)"
|
||||
@@ -425,7 +425,7 @@ onMounted(async () => {
|
||||
:label="hoveredCancelReservationButton.get(item.id) ? 'Отменить' : 'Забронировано'"
|
||||
:disabled="!hoveredCancelReservationButton.get(item.id)"
|
||||
:severity="hoveredCancelReservationButton.get(item.id) ? 'danger' : ''"
|
||||
class="w-full"
|
||||
class="w-full !bg-blue-300 hover:!bg-blue-400 !border-blue-300"
|
||||
@click="hoveredCancelReservationButton.get(item.id) ? cancelReserve(item): ''"/>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user