add category search feature

thuongtruong1009 · Jun 7, 2022 · f730ac9 · f730ac9
1 parent ef11fe1
commit f730ac9
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 39 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
     CarbonLanguage: typeof import('~icons/carbon/language')['default']
     CarbonMoon: typeof import('~icons/carbon/moon')['default']
     CarbonSun: typeof import('~icons/carbon/sun')['default']
+    CarbonWarning: typeof import('~icons/carbon/warning')['default']
     CASellerList: typeof import('./components/admin/CASellerList.vue')['default']
     CBAccount: typeof import('./components/buyer/CBAccount.vue')['default']
     CBBanner: typeof import('./components/buyer/CBBanner.vue')['default']
@@ -41,6 +42,7 @@ declare module 'vue' {
     CCartItem: typeof import('./components/buyer/CCartItem.vue')['default']
     CError: typeof import('./components/CError.vue')['default']
     CExtension: typeof import('./components/CExtension.vue')['default']
+    CGetCategoryChildren: typeof import('./components/CGetCategoryChildren.vue')['default']
     CLoading: typeof import('./components/CLoading.vue')['default']
     CMap: typeof import('./components/CMap.vue')['default']
     Counter: typeof import('./components/Counter.vue')['default']

diff --git a/src/components/CGetCategoryChildren.vue b/src/components/CGetCategoryChildren.vue
@@ -0,0 +1,72 @@
+<script setup>
+import { useRouter } from 'vue-router'
+import { useProduct } from '~/stores/product'
+
+const router = useRouter()
+const product = useProduct()
+
+const props = defineProps({
+  level0: Object,
+})
+
+const searchCategory = async(category) => {
+  await router.push(`/search/${encodeURIComponent(category)}`)
+  await location.reload()
+}
+
+</script>
+
+<template>
+  <div class="grid grid-cols-4 rounded-xl gap-2">
+    <div class="py-2 max-h-max overflow-y-scroll rounded-xl shadow-md" :class="{'bg-white dark:(bg-blue-gray-800 shadow-gray-600)': props.level0}">
+      <div v-for="(category, i) in props.level0" :key="i" class="flex justify-between items-center dark:hover:bg-blue-gray-700 hover:(bg-[#FAFAFA] text-red-500 font-medium) px-3 py-1 cursor-pointer" @mouseover="product.level.level1 = category.children" @click="searchCategory(category.name)">
+        <p>{{ category.name }}</p>
+        <ICaretRight v-if="category.number_of_children" />
+      </div>
+    </div>
+
+    <Transition duration="500" name="nested">
+      <div v-if="product.level.level1" :class="{'py-2 bg-white rounded-xl shadow-md dark:(bg-blue-gray-800 shadow-gray-600)': product.level.level1}">
+        <div v-for="(category, i) in product.level.level1" :key="i" class="flex justify-between items-center dark:hover:bg-blue-gray-700 hover:(bg-[#FAFAFA] text-red-500 font-medium) px-3 py-1 cursor-pointer" @mouseover="product.level.level2 = category.children" @click="searchCategory(category.name)">
+          <p>{{ category.name }}</p>
+          <ICaretRight v-if="category.number_of_children" />
+        </div>
+      </div>
+    </Transition>
+
+    <Transition duration="500" name="nested">
+      <div v-if="product.level.level2" class="py-2 bg-white rounded-xl shadow-md dark:(bg-blue-gray-800 shadow-gray-600)">
+        <div v-for="(category, i) in product.level.level2" :key="i" class="flex justify-between items-center dark:hover:bg-blue-gray-700 hover:(bg-[#FAFAFA] text-red-500 font-medium) px-3 py-1 cursor-pointer" @mouseover="product.level.level3 = category.children">
+          <a>{{ category.name }}</a>
+          <ICaretRight v-if="category.number_of_children" />
+        </div>
+      </div>
+    </Transition>
+
+    <Transition duration="500" name="nested">
+      <div v-if="product.level.level3" :class="{'py-2 bg-white rounded-xl shadow-md dark:(bg-blue-gray-800 shadow-gray-600)': product.level.level3}">
+        <div v-for="(category, i) in product.level.level3" :key="i" class="flex justify-between items-center dark:hover:bg-blue-gray-700 hover:(bg-[#FAFAFA] text-red-500 font-medium) px-3 py-1 cursor-pointer">
+          <p>{{ category.name }}</p>
+          <ICaretRight v-if="category.number_of_children" />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+::-webkit-scrollbar-thumb {
+  background: #ddd;
+}
+::-webkit-scrollbar {
+  width: 2px;
+}
+.nested-enter-active {
+    transition: all 0.2s ease-in-out;
+}
+
+.nested-enter-from{
+    transform: translateY(30px);
+    opacity: 0;
+}
+</style>
diff --git a/src/components/head/CBMenuCategories.vue b/src/components/head/CBMenuCategories.vue
@@ -5,49 +5,29 @@ import { useProduct } from '~/stores/product'
 const { t } = useI18n()
 const product = useProduct()
 
-watch(async() => {
+watchEffect(async() => {
   const { data } = await ProductRequest.getCategoriesChildrenById()
   product.category = data
 })
 
-const getLevel1 = async(id) => {
-  const { data } = await ProductRequest.getCategoriesChildrenById(id)
-  product.level1 = data
-  product.choicedList[0] = product.level1.parent
-}
-
-const getLevel2 = async(id) => {
-  const { data } = await ProductRequest.getCategoriesChildrenById(id)
-  product.level2 = data
-  product.choicedList[1] = product.level2.parent
-}
-
-const getLevel3 = async(id) => {
-  const { data } = await ProductRequest.getCategoriesChildrenById(id)
-  product.level3 = data
-  product.choicedList[2] = product.level3.parent
-}
-
 const isAppearMenu = ref(false)
-const onAppearMenu = () => {
+const appearMenu = () => {
   isAppearMenu.value = !isAppearMenu.value
-  if (!isAppearMenu.value) {
-    product.level1 = ''
-    product.level2 = ''
-    product.level3 = ''
-  }
+  product.level.level1 = ''
+  product.level.level2 = ''
+  product.level.level3 = ''
 }
 </script>
 
 <template>
   <div class="menu-item-container">
     <div class="menu-item relative">
-      <p href="#" class="menu-link text-sm text-gray-500 duration-200 py-1.5 pl-5 pr-4 flex items-end gap-1.5 cursor-pointer" @click="onAppearMenu">
+      <p href="#" class="menu-link text-sm text-gray-500 duration-200 py-1.5 pl-5 pr-4 flex items-end gap-1.5 cursor-pointer" @mouseover="appearMenu" @click="appearMenu">
         <i class="fas fa-list-ul mb-0.5" /> {{ t('header.categories') }} <IBCaretDown />
       </p>
       <Transition duration="500" name="nested">
-        <div v-if="isAppearMenu === true" class="menu-child absolute z-90 mt-3 rounded-xl">
-          <CSChooseCategory class="w-max" :level0="product.category.children" :level1="product.level1.children" :level2="product.level2.children" :level3="product.level3.children" @get-level1="getLevel1" @get-level2="getLevel2" @get-level3="getLevel3" />
+        <div v-if="isAppearMenu" class="menu-child absolute z-90 mt-3 rounded-xl">
+          <CGetCategoryChildren class="w-max" :level0="product.category" />
         </div>
       </Transition>
     </div>

diff --git a/src/components/partterns/PNotFound.vue b/src/components/partterns/PNotFound.vue
@@ -1,3 +1,3 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 93"><g fill="none" fill-rule="evenodd" transform="translate(-2)"><rect width="96" height="96" /><ellipse cx="47" cy="87" fill="#F2F2F2" rx="45" ry="6" /><path fill="#FFF" stroke="#D8D8D8" d="M79,55.5384191 L79,84.1647059 C79,85.1783108 78.1452709,86 77.0909091,86 L17.9090909,86 C16.8547291,86 16,85.1783108 16,84.1647059 L16,9.83529412 C16,8.82168917 16.8547291,8 17.9090909,8 L77.0909091,8 C78.1452709,8 79,8.82168917 79,9.83529412 L79,43.6504538 L79,55.5384191 Z" /><path fill="#FAFAFA" stroke="#D8D8D8" d="M64.32,4.0026087 L56.62,4.0026087 L56.62,3.5026087 C56.62,2.92262436 56.214985,2.5 55.68,2.5 L40.32,2.5 C39.785015,2.5 39.38,2.92262436 39.38,3.5026087 L39.38,4.0026087 L31.68,4.0026087 C31.433015,4.0026087 31.22,4.22488523 31.22,4.50434783 L31.22,12.5182609 C31.22,12.7977235 31.433015,13.02 31.68,13.02 L64.32,13.02 C64.566985,13.02 64.78,12.7977235 64.78,12.5182609 L64.78,4.50434783 C64.78,4.22488523 64.566985,4.0026087 64.32,4.0026087 Z" /><g fill="#D8D8D8" transform="translate(83)"><circle cx="10" cy="13" r="3" opacity=".5" /><circle cx="2" cy="9" r="2" opacity=".3" /><path d="M8.5,1 C7.67157288,1 7,1.67157288 7,2.5 C7,3.32842712 7.67157288,4 8.5,4 C9.32842712,4 10,3.32842712 10,2.5 C10,1.67157288 9.32842712,1 8.5,1 Z M8.5,7.10542736e-15 C9.88071187,7.10542736e-15 11,1.11928813 11,2.5 C11,3.88071187 9.88071187,5 8.5,5 C7.11928813,5 6,3.88071187 6,2.5 C6,1.11928813 7.11928813,7.10542736e-15 8.5,7.10542736e-15 Z" opacity=".3" /></g><path fill="#D8D8D8" d="M48.5,43 C48.7761424,43 49,43.2238576 49,43.5 C49,43.7761424 48.7761424,44 48.5,44 L26.5,44 C26.2238576,44 26,43.7761424 26,43.5 C26,43.2238576 26.2238576,43 26.5,43 L48.5,43 Z M68.5,34 C68.7761424,34 69,34.2238576 69,34.5 C69,34.7761424 68.7761424,35 68.5,35 L26.5,35 C26.2238576,35 26,34.7761424 26,34.5 C26,34.2238576 26.2238576,34 26.5,34 L68.5,34 Z M68.5,25 C68.7761424,25 69,25.2238576 69,25.5 C69,25.7761424 68.7761424,26 68.5,26 L26.5,26 C26.2238576,26 26,25.7761424 26,25.5 C26,25.2238576 26.2238576,25 26.5,25 L68.5,25 Z" /></g></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 93"><g fill="none" fill-rule="evenodd" transform="translate(-2)"><rect width="96" height="96" /><ellipse cx="47" cy="87" class="dark:fill-gray-700 fill-[#F2F2F2]" rx="45" ry="6" /><path class="dark:fill-gray-700 fill-[#FFF]" stroke="#D8D8D8" d="M79,55.5384191 L79,84.1647059 C79,85.1783108 78.1452709,86 77.0909091,86 L17.9090909,86 C16.8547291,86 16,85.1783108 16,84.1647059 L16,9.83529412 C16,8.82168917 16.8547291,8 17.9090909,8 L77.0909091,8 C78.1452709,8 79,8.82168917 79,9.83529412 L79,43.6504538 L79,55.5384191 Z" /><path class="dark:fill-gray-700 fill-[#FAFAFA]" stroke="#D8D8D8" d="M64.32,4.0026087 L56.62,4.0026087 L56.62,3.5026087 C56.62,2.92262436 56.214985,2.5 55.68,2.5 L40.32,2.5 C39.785015,2.5 39.38,2.92262436 39.38,3.5026087 L39.38,4.0026087 L31.68,4.0026087 C31.433015,4.0026087 31.22,4.22488523 31.22,4.50434783 L31.22,12.5182609 C31.22,12.7977235 31.433015,13.02 31.68,13.02 L64.32,13.02 C64.566985,13.02 64.78,12.7977235 64.78,12.5182609 L64.78,4.50434783 C64.78,4.22488523 64.566985,4.0026087 64.32,4.0026087 Z" /><g fill="#D8D8D8" transform="translate(83)"><circle cx="10" cy="13" r="3" opacity=".5" /><circle cx="2" cy="9" r="2" opacity=".3" /><path d="M8.5,1 C7.67157288,1 7,1.67157288 7,2.5 C7,3.32842712 7.67157288,4 8.5,4 C9.32842712,4 10,3.32842712 10,2.5 C10,1.67157288 9.32842712,1 8.5,1 Z M8.5,7.10542736e-15 C9.88071187,7.10542736e-15 11,1.11928813 11,2.5 C11,3.88071187 9.88071187,5 8.5,5 C7.11928813,5 6,3.88071187 6,2.5 C6,1.11928813 7.11928813,7.10542736e-15 8.5,7.10542736e-15 Z" opacity=".3" /></g><path fill="#D8D8D8" d="M48.5,43 C48.7761424,43 49,43.2238576 49,43.5 C49,43.7761424 48.7761424,44 48.5,44 L26.5,44 C26.2238576,44 26,43.7761424 26,43.5 C26,43.2238576 26.2238576,43 26.5,43 L48.5,43 Z M68.5,34 C68.7761424,34 69,34.2238576 69,34.5 C69,34.7761424 68.7761424,35 68.5,35 L26.5,35 C26.2238576,35 26,34.7761424 26,34.5 C26,34.2238576 26.2238576,34 26.5,34 L68.5,34 Z M68.5,25 C68.7761424,25 69,25.2238576 69,25.5 C69,25.7761424 68.7761424,26 68.5,26 L26.5,26 C26.2238576,26 26,25.7761424 26,25.5 C26,25.2238576 26.2238576,25 26.5,25 L68.5,25 Z" /></g></svg>
 </template>
diff --git a/src/pages/product/[product].vue b/src/pages/product/[product].vue
@@ -224,7 +224,10 @@ const onvisitShop = () => {
             <IBShipping /> {{ t('product.transport') }}
           </p>
           <div>
-            <select name="province" class="cursor-pointer dark:bg-gray-700 rounded-md pl-2 appearance-none pl-2 border-1 border-dashed border-gray-300">
+            <select name="province" class="cursor-pointer dark:bg-gray-700 rounded-md px-2 appearance-none border-1 border-dashed border-gray-300">
+              <option value="" selected hidden disabled>
+                Choose province
+              </option>
               <option v-for="(province, i) in provinceNames" :key="i" :value="province" class="mt-5 bg-[#FFF5F1] dark:bg-gray-700">
                 {{ province }}
               </option>

diff --git a/src/pages/search/[keyword].vue b/src/pages/search/[keyword].vue
@@ -220,6 +220,7 @@ const onChangeRegime = (type: any) => {
           </select>
         </div>
       </div>
+
       <Transition name="slide-fade">
         <div v-if="regime === 'grid'">
           <div v-if="loading.isLoading" class="grid-products-list flex flex-wrap gap-5 py-10">
@@ -237,7 +238,14 @@ const onChangeRegime = (type: any) => {
           <CProductCardFlow v-for="(prod, index) in useKeyword.resultProduct" :key="index" class="card duration-200 ease-linear rounded-xl w-full shadow-md hover:(shadow-lg shadow-gray-400/50) pb-0 flex border-t-1 border-t-[#e9e9e9]" :card="prod" />
         </div>
       </Transition>
-      <CPagination :index="payload.page" @on-prev="--payload.page" @on-next="++payload.page" />
+      <div v-if="useKeyword.resultProduct.length===0" class="grid justify-center gap-5">
+        <PNotFound class="w-70 justify-self-center" />
+        <div class="flex gap-5 text-gray-500 dark:text-gray-300">
+          <p class="bg-[#e9e9e9] dark:(bg-gray-700 shadow-gray-700) rounded-full shadow-md shadow-gray-300 w-7 h-7 p-1 cursor-pointer" @click="router.back()"><svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" /></svg></p>
+          <p>not have product at here</p>
+        </div>
+      </div>
+      <CPagination v-else :index="payload.page" @on-prev="--payload.page" @on-next="++payload.page" />
     </div>
   </div>
 </template>

diff --git a/src/stores/product.ts b/src/stores/product.ts
@@ -5,19 +5,17 @@ export const useProduct = defineStore('product', () => {
   // create new product in seller page
   const productName = ref<string>('')
   const category = ref<any>([])
-  const level1 = ref<any>([])
-  const level2 = ref<any>([])
-  const level3 = ref<any>([])
-  const choicedList = reactive({
-    0: '',
-    1: '',
-    2: '',
+  const level = reactive<any>({
+    level1: '',
+    level2: '',
+    level3: '',
   })
+
   // search public product
   const productRequestID = ref()
   const shopRequestID = ref()
 
-  return { productName, category, level1, level2, level3, choicedList, productRequestID, shopRequestID }
+  return { productName, category, level, productRequestID, shopRequestID }
 })
 
 if (import.meta.hot)