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