From 0deca7ca9f41dafb6fead994a55cd0947ea8b0d1 Mon Sep 17 00:00:00 2001
From: xds <iam@voroninv.ru>
Date: Tue, 18 Mar 2025 12:54:00 +0300
Subject: [PATCH] fix recurrents & categories

---
 .../recurrent/CreateRecurrentModal.vue        | 186 ++++++++++--------
 1 file changed, 102 insertions(+), 84 deletions(-)

diff --git a/src/components/settings/recurrent/CreateRecurrentModal.vue b/src/components/settings/recurrent/CreateRecurrentModal.vue
index 3586b2f..28254e0 100644
--- a/src/components/settings/recurrent/CreateRecurrentModal.vue
+++ b/src/components/settings/recurrent/CreateRecurrentModal.vue
@@ -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>