fix recurrents & categories

src/components/settings/recurrent/CreateRecurrentModal.vue

@@ -1,10 +1,17 @@
 <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">
+    <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>
@@ -14,9 +21,8 @@
         <!-- Категория -->
         <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">
@@ -98,10 +104,15 @@
 
         <!-- Кнопки -->
         <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-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 v-else class="flex items-center justify-center w-full h-full">
+        Категорий с установленным типом не найдено. Создайте сперва категорию.
+      </div>
+    </div>
   </Dialog>
 </template>
 
@@ -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>