feat: search category in navbar

src/api/homeRepository.ts

@@ -2,13 +2,20 @@ import AxiosClient from "./axios";
 
 const resource = "/index";
 const resourceCategory = "/categories";
+const resourceSearchCategory = "/searchChildren";
 
 export default {
   get() {
     return AxiosClient.get(`${resource}`);
   },
   getCategory() {
     return AxiosClient.get(`${resourceCategory}`)
+  },
+  searchCategory(searchText: string, parentId: number = 14) {
+    return AxiosClient.post(`${resourceSearchCategory}`, {
+      keyword: searchText,
+      parentId,
+    });
   }
 }
 

src/components/Navbar/MutilTab.vue

@@ -9,27 +9,53 @@
       <Icon icon="pi-sort-down-fill" class="text-[#a6adc9] text-[0.6rem]"/>
     </div>
     <div 
-      v-if="isShow" 
+      v-show="isShow" 
       @mouseenter="mouseEnter"
       @mouseleave="mouseLeave"
-      class="w-fit absolute max-h-[24rem] top-4 left-0 box-shadow bg-white rounded overflow-y-auto"
+      class="w-fit absolute max-h-[24rem] top-4 left-0 box-shadow bg-white rounded flex flex-col"
     >
-      <router-link
-        v-for="item in props.childrenNode"
-        :to="{ name: 'exercise', params: { classId: item.slug } }"
-        :key="item.slug"
-        class="p-2 text-nowrap text-[#606266] text-[0.7rem] cursor-pointer hover:bg-slate-200/30 block"
-      >
-        {{ item.name }}
-      </router-link>
+      <SearchCategory
+        :size="props.childrenNode.length"
+        v-model:searchData="searchData"
+      />
+
+      <div class="flex-1 overflow-y-auto">
+        <div v-if="searchData.results?.length > 0">
+          <router-link
+            v-for="item in searchData.results"
+            :to="{ name: 'exercise', params: { classId: item.slug } }"
+            :key="item.slug"
+            class="p-2 text-nowrap text-[#606266] text-[0.7rem] cursor-pointer hover:bg-slate-200/30 block"
+          >
+            {{ item.name }}
+          </router-link>
+        </div>
+        <div v-else-if="searchData.results?.length == 0" class="text-center p-2 text-red-600">
+          KHÔNG TÌM THẤY
+        </div>
+        <div v-else>
+          <router-link
+            v-for="item in props.childrenNode"
+            :to="{ name: 'exercise', params: { classId: item.slug } }"
+            :key="item.slug"
+            class="p-2 text-nowrap text-[#606266] text-[0.7rem] cursor-pointer hover:bg-slate-200/30 block"
+          >
+            {{ item.name }}
+          </router-link>
+        </div>
+      </div>
     </div>
   </div>
 
 </template>
 
 <script setup>
-  import { ref } from "vue";
+  import { ref, reactive } from "vue";
   import Icon from "@/components/Icon.vue";
+  import SearchCategory from "@/components/Navbar/SearchCategory.vue";
+
+  const searchChildren = reactive([]);
+  const searchData = ref([]);
   
   const props = defineProps({
     name: {

src/components/Navbar/MutilTabMobile.vue

@@ -15,6 +15,8 @@
 
 <script setup>
   import SingleTab from "@/components/Navbar/SingleTab.vue";
+  import { reactive } from "vue";
+
   const isShowNavbar = defineModel("isShowNavbar", {
     type: Boolean,
     required: true,

src/components/Navbar/SearchCategory.vue

@@ -0,0 +1,35 @@
+<template lang="">
+  <input 
+    type="text"
+    v-if="props.size > 40"
+    class="border rounded p-2 font-normal focus:outline-green-400 !focus:outline-[0.1px] text-gray-500"
+    placeholder="Tìm môn học"
+    v-model="inputCategory"
+    @input="createDebounce"
+  />
+</template>
+
+<script setup>
+  import { ref } from "vue";
+  import { RepositoryFactory } from "@/api/RepositoryFactory";
+
+  const HomeRepository = RepositoryFactory.get("home");
+  let timeout = null;
+  const inputCategory = ref("");
+
+  const searchData = defineModel("searchData")
+  const props = defineProps({
+    size: {
+      type: Number,
+      required: true,
+    }
+  });
+
+  function createDebounce(fnc) {
+    clearTimeout(timeout);
+    timeout = setTimeout(async() => {
+      const { data } = await HomeRepository.searchCategory(inputCategory.value);
+      searchData.value = data;
+    }, 300);
+  }
+</script>

src/views/HomePage.vue

@@ -50,8 +50,6 @@
     const { data } = await HomeRepository.get();
     loadingStore.changeLoadingState(false);
     homeData.value = data;
-
-    console.log(homeData.value);
   });
   
 </script>