fix recurrents & categories
This commit is contained in:
@@ -1,105 +1,116 @@
|
|||||||
<template>
|
<template>
|
||||||
<Dialog :visible="show" modal :header="isEditing ? 'Редактировать повторяющийся платеж' : 'Создать повторяющийся платеж'"
|
<Dialog :visible="show" modal
|
||||||
|
:header="isEditing ? 'Редактировать повторяющийся платеж' : 'Создать повторяющийся платеж'"
|
||||||
:closable="true" class="!w-5/6 xl:!w-2/4">
|
:closable="true" class="!w-5/6 xl:!w-2/4">
|
||||||
<div v-if="loading">
|
<div v-if="loading">
|
||||||
Loading...
|
Loading...
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="p-fluid flex flex-col gap-6 w-full py-6 items-start">
|
<div v-else class="p-fluid flex flex-col gap-6 w-full items-start">
|
||||||
<!-- Название -->
|
<SelectButton v-model="selectedCategoryType" :options="categoryTypes" optionLabel="name"
|
||||||
<FloatLabel class="w-full" variant="on">
|
aria-labelledby="basic"
|
||||||
<label for="paymentName">Название платежа</label>
|
@change="categoryTypeChanged(selectedCategoryType.code)" class="justify-start w-fit"/>
|
||||||
<InputText v-model="name" id="paymentName" class="!w-full"/>
|
<div
|
||||||
</FloatLabel>
|
v-if="selectedCategoryType.code == 'EXPENSE' ? props.expenseCategories[0] ? true : false : props.incomeCategories[0]? true : false "
|
||||||
|
class="flex flex-col justify-center gap-2 w-full">
|
||||||
|
<!-- Название -->
|
||||||
|
<FloatLabel class="w-full" variant="on">
|
||||||
|
<label for="paymentName">Название платежа</label>
|
||||||
|
<InputText v-model="name" id="paymentName" class="!w-full"/>
|
||||||
|
</FloatLabel>
|
||||||
|
|
||||||
<!-- Категория -->
|
<!-- Категория -->
|
||||||
<div class="relative w-full justify-center justify-items-center ">
|
<div class="relative w-full justify-center justify-items-center ">
|
||||||
<div class="flex flex-col justify-items-center gap-2 w-full">
|
<div class="flex flex-col justify-items-center gap-2 w-full">
|
||||||
<SelectButton v-model="selectedCategoryType" :options="categoryTypes" optionLabel="name"
|
|
||||||
aria-labelledby="basic"
|
|
||||||
@change="categoryTypeChanged(selectedCategoryType.code)" class="justify-start w-fit"/>
|
<button class="border border-gray-300 rounded-lg w-full z-50"
|
||||||
<button class="border border-gray-300 rounded-lg w-full z-50"
|
@click="isCategorySelectorOpened = !isCategorySelectorOpened">
|
||||||
@click="isCategorySelectorOpened = !isCategorySelectorOpened">
|
<div class="flex flex-row items-center pe-4 py-2 gap-4">
|
||||||
<div class="flex flex-row items-center pe-4 py-2 gap-4">
|
<div class="flex flex-row justify-between items-center w-full px-4 gap-4">
|
||||||
<div class="flex flex-row justify-between items-center w-full px-4 gap-4">
|
<p class="text-3xl font-bold text-gray-700 dark:text-gray-400">{{ selectedCategory.icon }}</p>
|
||||||
<p class="text-3xl font-bold text-gray-700 dark:text-gray-400">{{ selectedCategory.icon }}</p>
|
<div class="flex flex-col items-start justify-items-start justify-around w-full">
|
||||||
<div class="flex flex-col items-start justify-items-start justify-around w-full">
|
<p class="font-bold text-start">{{ selectedCategory.name }}</p>
|
||||||
<p class="font-bold text-start">{{ selectedCategory.name }}</p>
|
<p class="font-light line-clamp-1 items-start text-start">{{ selectedCategory.description }}</p>
|
||||||
<p class="font-light line-clamp-1 items-start text-start">{{ selectedCategory.description }}</p>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span :class="{'rotate-90': isCategorySelectorOpened}"
|
||||||
|
class="pi pi-angle-right transition-transform duration-300 text-5xl"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Анимированное открытие списка категорий -->
|
||||||
|
<div v-show="isCategorySelectorOpened"
|
||||||
|
class="absolute left-0 right-0 top-full overflow-hidden z-50 border-b-4 border-x rounded-b-lg bg-white shadow-lg transition-all duration-500"
|
||||||
|
:class="{ 'max-h-0': !isCategorySelectorOpened, '': isCategorySelectorOpened }">
|
||||||
|
<div class="grid grid-cols-2 mt-2">
|
||||||
|
<button v-for="category in selectedCategoryType.code == 'EXPENSE' ? expenseCategories : incomeCategories"
|
||||||
|
:key="category.id" class="border rounded-lg mx-2 mb-2"
|
||||||
|
@click="selectCategory(category)">
|
||||||
|
<div class="flex flex-row justify-between w-full p-1 gap-2">
|
||||||
|
<p class="text-4xl font-bold text-gray-700 dark:text-gray-400">{{ category.icon }}</p>
|
||||||
|
<div class="flex flex-col items-start justify-items-start justify-around w-full">
|
||||||
|
<p class="font-bold text-start">{{ category.name }}</p>
|
||||||
|
<p class="font-light line-clamp-1 text-start">{{ category.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Описание -->
|
||||||
|
<FloatLabel class="!w-full">
|
||||||
|
<label for="description">Описание</label>
|
||||||
|
<Textarea v-model="description" id="description" rows="3" class="!w-full"/>
|
||||||
|
</FloatLabel>
|
||||||
|
|
||||||
|
<!-- Дата повторения (выпадающий список) -->
|
||||||
|
<div class="w-full relative">
|
||||||
|
<button class="border border-gray-300 rounded-lg w-full z-50"
|
||||||
|
@click="isDaySelectorOpened = !isDaySelectorOpened">
|
||||||
|
<div class="flex flex-row items-center pe-4 py-2 gap-4">
|
||||||
|
<div class="flex flex-row justify-between w-full px-4">
|
||||||
|
<p class="font-bold">Повторять каждый {{ repeatDay || 'N' }} день месяца</p>
|
||||||
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<span :class="{'rotate-90': isCategorySelectorOpened}"
|
<span :class="{'rotate-90': isDaySelectorOpened}"
|
||||||
class="pi pi-angle-right transition-transform duration-300 text-5xl"/>
|
class="pi pi-angle-right transition-transform duration-300 text-5xl"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Анимированное открытие списка категорий -->
|
<!-- Анимированное открытие списка дней -->
|
||||||
<div v-show="isCategorySelectorOpened"
|
<div v-show="isDaySelectorOpened"
|
||||||
class="absolute left-0 right-0 top-full overflow-hidden z-50 border-b-4 border-x rounded-b-lg bg-white shadow-lg transition-all duration-500"
|
class="absolute left-0 right-0 top-full overflow-hidden z-50 border-b-4 border-x rounded-b-lg bg-white shadow-lg transition-all duration-500"
|
||||||
:class="{ 'max-h-0': !isCategorySelectorOpened, '': isCategorySelectorOpened }">
|
:class="{ 'max-h-0': !isDaySelectorOpened, 'max-h-[500px]': isDaySelectorOpened }">
|
||||||
<div class="grid grid-cols-2 mt-2">
|
<div class="grid grid-cols-7 p-2">
|
||||||
<button v-for="category in selectedCategoryType.code == 'EXPENSE' ? expenseCategories : incomeCategories"
|
<button v-for="day in days" :key="day" class=" border"
|
||||||
:key="category.id" class="border rounded-lg mx-2 mb-2"
|
@click="selectDay(day)">
|
||||||
@click="selectCategory(category)">
|
{{ day }}
|
||||||
<div class="flex flex-row justify-between w-full p-1 gap-2">
|
</button>
|
||||||
<p class="text-4xl font-bold text-gray-700 dark:text-gray-400">{{ category.icon }}</p>
|
|
||||||
<div class="flex flex-col items-start justify-items-start justify-around w-full">
|
|
||||||
<p class="font-bold text-start">{{ category.name }}</p>
|
|
||||||
<p class="font-light line-clamp-1 text-start">{{ category.description }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Описание -->
|
|
||||||
<FloatLabel class="!w-full">
|
|
||||||
<label for="description">Описание</label>
|
|
||||||
<Textarea v-model="description" id="description" rows="3" class="!w-full"/>
|
|
||||||
</FloatLabel>
|
|
||||||
|
|
||||||
<!-- Дата повторения (выпадающий список) -->
|
|
||||||
<div class="w-full relative">
|
|
||||||
<button class="border border-gray-300 rounded-lg w-full z-50"
|
|
||||||
@click="isDaySelectorOpened = !isDaySelectorOpened">
|
|
||||||
<div class="flex flex-row items-center pe-4 py-2 gap-4">
|
|
||||||
<div class="flex flex-row justify-between w-full px-4">
|
|
||||||
<p class="font-bold">Повторять каждый {{ repeatDay || 'N' }} день месяца</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span :class="{'rotate-90': isDaySelectorOpened}"
|
|
||||||
class="pi pi-angle-right transition-transform duration-300 text-5xl"/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</div>
|
||||||
|
|
||||||
<!-- Анимированное открытие списка дней -->
|
<!-- Сумма -->
|
||||||
<div v-show="isDaySelectorOpened"
|
<InputGroup class="w-full">
|
||||||
class="absolute left-0 right-0 top-full overflow-hidden z-50 border-b-4 border-x rounded-b-lg bg-white shadow-lg transition-all duration-500"
|
<InputGroupAddon>₽</InputGroupAddon>
|
||||||
:class="{ 'max-h-0': !isDaySelectorOpened, 'max-h-[500px]': isDaySelectorOpened }">
|
<InputNumber v-model="amount" placeholder="Сумма"/>
|
||||||
<div class="grid grid-cols-7 p-2">
|
<InputGroupAddon>.00</InputGroupAddon>
|
||||||
<button v-for="day in days" :key="day" class=" border"
|
</InputGroup>
|
||||||
@click="selectDay(day)">
|
|
||||||
{{ day }}
|
<!-- Кнопки -->
|
||||||
</button>
|
<div class="flex justify-content-end gap-2 mt-4">
|
||||||
</div>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else class="flex items-center justify-center w-full h-full">
|
||||||
<!-- Сумма -->
|
Категорий с установленным типом не найдено. Создайте сперва категорию.
|
||||||
<InputGroup class="w-full">
|
|
||||||
<InputGroupAddon>₽</InputGroupAddon>
|
|
||||||
<InputNumber v-model="amount" placeholder="Сумма"/>
|
|
||||||
<InputGroupAddon>.00</InputGroupAddon>
|
|
||||||
</InputGroup>
|
|
||||||
|
|
||||||
<!-- Кнопки -->
|
|
||||||
<div class="flex justify-content-end gap-2 mt-4">
|
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
@@ -134,7 +145,12 @@ const loading = ref(false)
|
|||||||
const name = ref('');
|
const name = ref('');
|
||||||
const selectedCategoryType = ref(props.payment ? props.payment.type : props.categoryTypes[0]);
|
const selectedCategoryType = ref(props.payment ? props.payment.type : props.categoryTypes[0]);
|
||||||
console.log(props.categoryTypes)
|
console.log(props.categoryTypes)
|
||||||
const selectedCategory = ref(selectedCategoryType.code == 'EXPENSE' ? props.expenseCategories[0] : props.incomeCategories[0]);
|
console.log(selectedCategoryType.value)
|
||||||
|
console.log(props.expenseCategories)
|
||||||
|
console.log(props.incomeCategories)
|
||||||
|
const selectedCategory = ref(selectedCategoryType.code == 'EXPENSE' ? props.expenseCategories[0] ? props.expenseCategories[0] : props.incomeCategories[0] : props.incomeCategories[0] ? props.incomeCategories[0] : props.expenseCategories[0]);
|
||||||
|
console.log(selectedCategory.value)
|
||||||
|
|
||||||
|
|
||||||
const categoryTypeChanged = (code) => {
|
const categoryTypeChanged = (code) => {
|
||||||
|
|
||||||
@@ -175,6 +191,7 @@ watch(() => props.payment, (newPayment) => {
|
|||||||
description.value = newPayment.description;
|
description.value = newPayment.description;
|
||||||
repeatDay.value = newPayment.repeatDay;
|
repeatDay.value = newPayment.repeatDay;
|
||||||
amount.value = newPayment.amount;
|
amount.value = newPayment.amount;
|
||||||
|
loading.value = false
|
||||||
} else {
|
} else {
|
||||||
resetForm();
|
resetForm();
|
||||||
}
|
}
|
||||||
@@ -218,6 +235,7 @@ const resetForm = () => {
|
|||||||
description.value = '';
|
description.value = '';
|
||||||
repeatDay.value = null;
|
repeatDay.value = null;
|
||||||
amount.value = null;
|
amount.value = null;
|
||||||
|
loading.value = false
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user