Merge pull request #304 from letehaha/fix/category-select-field

feat: Improve. categories select field

src/components/fields/category-select-field.vue

@@ -105,6 +105,15 @@
                 </template>
               </button>
             </template>
+
+            <router-link
+              to="/settings/categories"
+              :class="buttonVariants({ size: 'sm', variant: 'link', class: 'w-full gap-2 mt-4' })"
+            >
+              Create custom category
+
+              <ExternalLinkIcon class="size-4" />
+            </router-link>
           </div>
         </div>
       </div>
@@ -116,13 +125,13 @@
 
 <script setup lang="ts">
 import { ref, Ref, computed, watch, onBeforeUnmount } from "vue";
+import { ChevronLeftIcon, ChevronRightIcon, ExternalLinkIcon } from "lucide-vue-next";
 import { CategoryModel } from "shared-types";
 import { type FormattedCategory } from "@/common/types";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-vue-next";
 import { cn } from "@/lib/utils";
 
 import { InputField, FieldError, FieldLabel } from "@/components/fields";
-import { Button } from "@/components/lib/ui/button";
+import { Button, buttonVariants } from "@/components/lib/ui/button";
 import CategoryCircle from "@/components/common/category-circle.vue";
 
 const props = withDefaults(
@@ -150,6 +159,19 @@ const emit = defineEmits<{
 const selectedValue = ref(props.modelValue || props.values[0]);
 const buttonRef = ref<HTMLButtonElement>(null);
 
+watch(
+  () => props.modelValue,
+  (value) => {
+    // Sometimes real value comes with a delay, not immediately. We need to assign it to
+    // selectedValue with a delay. Yet we need to avoid any risks of infinite loop, so we need to
+    // compare IDs to only apply this when values differ
+    if (value.id !== selectedValue.value.id) {
+      selectedValue.value = value;
+    }
+  },
+  { deep: true },
+);
+
 const levelValues = ref(props.values);
 
 const rootCategories = ref(props.values);

src/components/modals/modify-record/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ref, watch, computed, onMounted, nextTick, onUnmounted } from "vue";
+import { useRoute } from "vue-router";
 import { storeToRefs } from "pinia";
 import { useQueryClient } from "@tanstack/vue-query";
 import { useEventListener, watchOnce } from "@vueuse/core";
@@ -59,6 +60,12 @@ const props = withDefaults(defineProps<CreateRecordModalProps>(), {
 });
 
 const emit = defineEmits([MODAL_EVENTS.closeModal]);
+const closeModal = () => {
+  emit(MODAL_EVENTS.closeModal);
+};
+
+const route = useRoute();
+watch(() => route.path, closeModal);
 
 const { addErrorNotification } = useNotificationCenter();
 const { addModal } = useModalCenter();
@@ -328,10 +335,6 @@ const deleteTransactionRecordHandler = () => {
   linkedTransaction.value = null;
 };
 
-const closeModal = () => {
-  emit(MODAL_EVENTS.closeModal);
-};
-
 const selectTransactionType = (type: FORM_TYPES, disabled = false) => {
   if (!disabled) form.value.type = type;
 };

src/components/ui-tabs.vue

@@ -63,7 +63,7 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     options: Tab[];
-    initialTab?: Tab | null;
+    initialTab?: Tab | null | undefined;
     tabsAlignment?: CSSProperties["justifyContent"];
   }>(),
   {

src/pages/settings/settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="settings-page">
-    <UiTabs :options="tabs" tabs-alignment="flex-start" />
+    <UiTabs :initial-tab="initialTab" :options="tabs" tabs-alignment="flex-start" />
 
     <router-view />
   </div>
@@ -9,20 +9,23 @@
 <script setup lang="ts">
 import { ROUTES_NAMES } from "@/routes";
 import UiTabs, { type Tab } from "@/components/ui-tabs.vue";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
 
 const tabs: Tab[] = [
   {
     name: "currencies",
     label: "Currencies",
     to: { name: ROUTES_NAMES.settingsCurrencies },
-    initial: true,
   },
   {
     name: "categories",
     label: "Categories",
     to: { name: ROUTES_NAMES.settingsCategories },
   },
 ];
+const initialTab = tabs.find((i) => i.name === route.path.split("/").at(-1));
 </script>
 
 <style lang="scss" scoped>