feat: adding filter to select-field

src/components/dialogs/manage-transaction/components/account-field.vue

@@ -8,6 +8,7 @@
           :values="accounts"
           label-key="name"
           value-key="id"
+          with-search
           :disabled="disabled || fromAccountDisabled"
           is-value-preselected
           :model-value="account"
@@ -30,6 +31,7 @@
           :values="filteredAccounts"
           label-key="name"
           value-key="id"
+          with-search
           :disabled="disabled || toAccountDisabled"
           :model-value="toAccount"
           @update:model-value="updateToAccount"
@@ -52,6 +54,7 @@
           :values="accounts"
           label-key="name"
           value-key="id"
+          with-search
           :disabled="disabled || fromAccountDisabled"
           is-value-preselected
           :model-value="account"

src/components/fields/input-field.vue

@@ -15,7 +15,9 @@
 
       <div class="relative">
         <template v-if="isLeadingIconExist">
-          <div class="absolute top-0 left-0 flex items-center h-full px-6">
+          <div
+            :class="['absolute top-0 left-0 flex items-center h-full px-6', leadingIconCssClass]"
+          >
             <slot name="iconLeading" />
           </div>
         </template>
@@ -45,7 +47,9 @@
         />
 
         <template v-if="isTrailIconExist">
-          <div class="absolute top-0 right-0 flex items-center h-full px-6">
+          <div
+            :class="['absolute top-0 right-0 flex items-center h-full px-6', trailingIconCssClass]"
+          >
             <slot name="iconTrailing" />
           </div>
         </template>
@@ -88,6 +92,8 @@ const props = defineProps<{
   inputFieldStyles?: HTMLAttributes["style"];
   onlyPositive?: boolean;
   autofocus?: boolean;
+  trailingIconCssClass?: string;
+  leadingIconCssClass?: string;
 }>();
 
 const emits = defineEmits<{

src/components/fields/select-field.vue

@@ -1,47 +1,27 @@
-<template>
-  <div>
-    <template v-if="label">
-      <FieldLabel :label="label" />
-    </template>
-
-    <Select.Select v-model="selectedKey" :disabled="disabled">
-      <Select.SelectTrigger class="w-full">
-        <Select.SelectValue :placeholder="placeholder">
-          {{ selectedValue ? getLabelFromValue(selectedValue) : placeholder }}
-        </Select.SelectValue>
-      </Select.SelectTrigger>
-      <Select.SelectContent>
-        <slot name="select-top-content" />
-
-        <Select.SelectItem
-          v-for="item in filteredValues"
-          :key="getKeyFromItem(item)"
-          :value="getKeyFromItem(item)"
-        >
-          {{ getLabelFromValue(item) }}
-        </Select.SelectItem>
-
-        <slot name="select-bottom-content" />
-      </Select.SelectContent>
-    </Select.Select>
-
-    <FieldError :error-message="errorMessage" />
-  </div>
-</template>
-
 <script lang="ts" setup generic="T extends Record<string, any>">
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import * as Select from "@/components/lib/ui/select";
+import InputField from "@/components/fields/input-field.vue";
 
+import { debounce } from "lodash-es";
+import { Button } from "@/components/lib/ui/button";
+import { XIcon } from "lucide-vue-next";
 import FieldError from "./components/field-error.vue";
 import FieldLabel from "./components/field-label.vue";
 
+type StringOrNumberKeys<T> = {
+  [P in keyof T]: T[P] extends string | number ? P : never;
+}[keyof T];
+type NonEmptyArray<T> = [T, ...T[]];
+
 const props = withDefaults(
   defineProps<{
     modelValue: T | null;
     values: T[];
     labelKey?: keyof T | ((value: T) => string) | "label";
     valueKey?: keyof T | ((value: T) => string | number) | "value";
+    withSearch?: boolean;
+    searchKeys?: NonEmptyArray<StringOrNumberKeys<T>>;
     placeholder?: string;
     disabled?: boolean;
     errorMessage?: string;
@@ -50,6 +30,8 @@ const props = withDefaults(
   {
     placeholder: "Select an option",
     disabled: false,
+    withSearch: false,
+    searchKeys: undefined,
     errorMessage: undefined,
     labelKey: "label",
     valueKey: "value",
@@ -61,7 +43,10 @@ const emit = defineEmits<{
   "update:modelValue": [value: T | null];
 }>();
 
+const searchQuery = ref("");
 const selectedValue = computed(() => props.modelValue);
+const isDropdownOpen = ref<boolean>(false);
+const debouncedFilteredValues = ref<T[]>(props.values);
 
 const getLabelFromValue = (value: T): string => {
   const { labelKey } = props;
@@ -76,13 +61,83 @@ const getValueFromItem = (item: T): string | number => {
 };
 const getKeyFromItem = (item: T): string => String(getValueFromItem(item));
 
-const filteredValues = computed(() => props.values);
-
 const selectedKey = computed({
   get: () => (selectedValue.value ? getKeyFromItem(selectedValue.value) : ""),
   set: (key: string) => {
     const newValue = props.values.find((item) => getKeyFromItem(item) === key) ?? null;
+    searchQuery.value = "";
     emit("update:modelValue", newValue);
   },
 });
+
+watch(
+  searchQuery,
+  debounce((query: string) => {
+    const lowerCaseQuery = query.toLowerCase();
+    debouncedFilteredValues.value = props.values.filter((item) => {
+      if (props.searchKeys?.length) {
+        // If keys are provided, disable filtering by the label
+        return props.searchKeys.some((key) =>
+          String(item[key]).toLowerCase().includes(lowerCaseQuery),
+        );
+      }
+      return getLabelFromValue(item).toLowerCase().includes(lowerCaseQuery);
+    });
+  }, 300),
+);
 </script>
+
+<template>
+  <div>
+    <template v-if="label">
+      <FieldLabel :label="label" />
+    </template>
+
+    <div>
+      <Select.Select
+        v-model="selectedKey"
+        :disabled="disabled"
+        @update:open="isDropdownOpen = $event"
+      >
+        <Select.SelectTrigger class="w-full">
+          <Select.SelectValue :placeholder="placeholder">
+            {{ selectedValue ? getLabelFromValue(selectedValue) : placeholder }}
+          </Select.SelectValue>
+        </Select.SelectTrigger>
+        <Select.SelectContent>
+          <template v-if="withSearch || !!searchKeys">
+            <div class="p-2">
+              <input-field
+                v-model="searchQuery"
+                type="text"
+                placeholder="Search..."
+                trailing-icon-css-class="px-0"
+                @keydown.stop
+              >
+                <template #iconTrailing>
+                  <template v-if="searchQuery">
+                    <Button variant="ghost" size="icon" @click="searchQuery = ''">
+                      <XIcon class="size-4" />
+                    </Button>
+                  </template>
+                </template>
+              </input-field>
+            </div>
+          </template>
+
+          <Select.SelectItem
+            v-for="item in debouncedFilteredValues"
+            :key="getKeyFromItem(item as T)"
+            :value="getKeyFromItem(item as T)"
+          >
+            {{ getLabelFromValue(item as T) }}
+          </Select.SelectItem>
+
+          <slot name="select-bottom-content" />
+        </Select.SelectContent>
+      </Select.Select>
+    </div>
+
+    <FieldError :error-message="errorMessage" />
+  </div>
+</template>

src/pages/auth/welcome.vue

@@ -16,7 +16,7 @@
               value-key="id"
               placeholder="Loading..."
               label="Base Currency"
-              with-search-field
+              with-search
               :label-key="(item) => `${item.code} - ${item.currency}`"
             />
           </div>

src/pages/settings/subpages/categories/index.vue

@@ -41,13 +41,21 @@
       <div class="categories-page__list">
         <template v-if="currentLevel.length">
           <template v-for="cat in currentLevel" :key="cat.id">
-            <button class="categories-page__list-item" type="button" @click="selectCategory(cat)">
+            <button
+              class="categories-page__list-item"
+              type="button"
+              :disabled="categoryLevelCount === 2"
+              @click="selectCategory(cat)"
+            >
               <div class="categories-page__category-info">
                 <CategoryCircle :category="cat" />
 
                 {{ cat.name }}
               </div>
-              <span class="base-text-smaller categories-page__category-view">
+              <span
+                v-if="categoryLevelCount !== 2"
+                class="base-text-smaller categories-page__category-view"
+              >
                 <span>View</span>
                 <span>></span>
               </span>
@@ -59,7 +67,7 @@
         </template>
       </div>
 
-      <div class="categories-page__add-subcategory">
+      <div v-if="categoryLevelCount < 2" class="categories-page__add-subcategory">
         <button type="button" @click="startCreating">Add subcategory +</button>
       </div>
     </div>
@@ -113,6 +121,7 @@ const { addErrorNotification, addSuccessNotification } = useNotificationCenter()
 const { formattedCategories } = storeToRefs(categoriesStore);
 const currentLevel = ref<FormattedCategory[]>(formattedCategories.value);
 const selectedCategory = ref<FormattedCategory | null>(null);
+const categoryLevelCount = ref<number>(0);
 
 const form = reactive({
   name: "",
@@ -143,6 +152,7 @@ const goBack = () => {
   closeForm();
   selectedCategory.value = null;
   currentLevel.value = formattedCategories.value;
+  categoryLevelCount.value = 0;
 };
 const applyChanges = async () => {
   if (!selectedCategory.value) return;
@@ -176,10 +186,12 @@ const applyChanges = async () => {
   }
 };
 const selectCategory = (category: FormattedCategory) => {
+  if (categoryLevelCount.value === 2) return;
   closeForm();
   selectedCategory.value = category;
 
   if (category.subCategories) {
+    categoryLevelCount.value++;
     currentLevel.value = category.subCategories;
   }
 };

src/pages/settings/subpages/currencies/add-new-currency.vue

@@ -1,13 +1,13 @@
 <template>
   <Card class="mb-8">
-    <CardContent class="pt-6 flex gap-4">
+    <CardContent class="!pt-6 flex gap-4">
       <div class="flex-shrink-0 w-full max-w-[300px]">
         <select-field
           v-model="selectedCurrency"
           :values="filteredCurrencies"
           :placeholder="isCurrenciesLoading ? 'Loading...' : 'Select currency'"
           value-key="id"
-          with-search-field
+          with-search
           :disabled="!filteredCurrencies.length"
           :label-key="(item: CurrencyModel) => `${item.code} - ${item.currency}`"
         />