Merge branch 'baghi/hadith/refactor' of https://git2.tavasi.ir/front/hadith_ui into main

assets/haditha/font-icons/close-circle.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.7158C0 7.87926 7.16344 0.71582 16 0.71582C24.8366 0.71582 32 7.87926 32 16.7158C32 25.5524 24.8366 32.7158 16 32.7158C7.16344 32.7158 0 25.5524 0 16.7158Z" fill="#F0F1F4"/>
+<path d="M11 21.7158L21 11.7158" stroke="#1B2132" stroke-linecap="round"/>
+<path d="M11 11.7158L21 21.7158" stroke="#1B2132" stroke-linecap="round"/>
+</svg>

components/haditha/AutoComplation.vue

@@ -57,6 +57,7 @@ const search_type = ref("normal");
 const type_key = ref("hadith");
 const typeModelValue = ref("normal");
 const typeModelValueFa = ref("");
+const showclearButton = ref(false);
 
 // If you want to share state across multiple components,
 // you can use the same key in useState. Nuxt will ensure
@@ -168,17 +169,27 @@ const clearSimilar = () => {
 // const onUpdateModel = (newVal: boolean | InputMenuItem | any) => {
 //   console.info("onUpdateModel", newVal);
 // };
+const searchButtonIcon = computed(() => {
+  return showclearButton.value ? "i-lucide-x" : "i-haditha-search";
+});
+
+const handleSearchClearButton = ()=>{
+  showclearButton.value = true;
+  sendQuery();
+}
 
 const onKeyDown = () => {
-  clearTimeout(typingTimer.value);
-};
-const onKeyUp = () => {
-  clearTimeout(typingTimer.value);
-  typingTimer.value = setTimeout(() => {
-    if (props.autoRedirection) sendQuery();
-  }, doneTypingInterval.value);
+  showclearButton.value = false;
+  // clearTimeout(typingTimer.value);
 };
 
+// const onKeyUp = () => {
+//   clearTimeout(typingTimer.value);
+//   typingTimer.value = setTimeout(() => {
+//     if (props.autoRedirection) sendQuery();
+//   }, doneTypingInterval.value);
+// };
+
 const setType = (type: string) => {
   search_type.value = type;
   sendQuery();
@@ -225,11 +236,6 @@ const sendQuery = async (payload = {}) => {
     .postRequest(url, payload)
     .then((res) => {
       // pass res and search query to the parent.
-      emit("response-ready", {
-        res: res,
-        searchQuery: searchTerm.value,
-        disableAutoRedirect: true,
-      });
 
       loading.value = false;
       // check if search term is not empty
@@ -238,6 +244,32 @@ const sendQuery = async (payload = {}) => {
       // close the history dropdown menu
       open.value = false;
 
+
+      
+      // show clear button
+      if (showclearButton.value) {
+        searchTerm.value = "";
+
+        emit("response-ready", {
+          res: {
+            hits:{
+              total:0,
+              hits:[]
+            }
+          },
+          searchQuery: searchTerm.value,
+          disableAutoRedirect: true,
+        });
+      } else {
+        emit("response-ready", {
+          res: res,
+          searchQuery: searchTerm.value,
+          disableAutoRedirect: true,
+        });
+      }
+      
+      showclearButton.value = !showclearButton.value;
+
       // store search phrase
       useStorage("searchPhrase", searchTerm.value);
     })
@@ -405,7 +437,6 @@ onMounted(() => {
           @blur="open = false"
           @change="sendQuery"
           @keydown="onKeyDown"
-          @keyup="onKeyUp"
           @keydown.enter="sendQuery"
         >
           <!-- @update:modelValue="onUpdateModel" -->
@@ -414,8 +445,9 @@ onMounted(() => {
       </div>
       <UButton
         class="my-trailing-button"
-        @click.prevent="sendQuery"
-        icon="i-haditha-search"
+        :class="{ 'close-mode': showclearButton }"
+        @click.prevent="handleSearchClearButton"
+        :icon="searchButtonIcon"
       >
         <!-- <UIcon  name="i-lucide-search" /> -->
       </UButton>
@@ -765,6 +797,13 @@ onMounted(() => {
       ); */
     }
   }
+  .close-mode {
+    background: #f0f1f4;
+    color: #000; /* رنگ خاکستری */
+    &:hover {
+      background: #e0e0e0; /* رنگ خاکستری */
+    }
+  }
   .haditha-search-input {
     z-index: 0;
 

components/haditha/search-page/SearchList.vue

@@ -23,11 +23,18 @@ const router = useRouter();
 function openModal(selectedItem) {
   // modal.open(SearchShow, { title: "Welcome" });
   // isModalOpen.value = true;
+
+  const slug = selectedItem._source.content.split(' ').filter((v,i)=>i<4).join('-');
+
   router.push({
     name: "hadithaSearchShow",
     params: {
-      id: selectedItem._id,
-      slug: "no-slug",
+      id: selectedItem._source.id,
+      slug: slug,
+    },
+    query: {
+      firstPage: 1,
+      page_count:props.total
     },
   });
 }

pages/haditha/search/[id]/[slug]/index.vue

@@ -228,10 +228,14 @@ const handlePagination = (prevNextIndicator: string) => {
     .getRequest(url)
     .then((res) => {
       state.selectedItem = res.hits.hits?.[0];
+      page_num.value = res.hits.hits[0]._source.address.page_num ?? 1;
     })
     .finally(() => (loading.value = false));
 };
-
+const page_num = ref(1);
+const handlePageChange = () => {
+  handlePagination(1, page_num.value);
+};
 // const localCopyTextToClipboard = (text: string) => {
 //   copyTextToClipboard(text);
 // };
@@ -413,24 +417,24 @@ const handlePagination = (prevNextIndicator: string) => {
 
       <div class="body-footer">
         <div class="mt-5 z-2">
-          <div class="flex justify-between actions">
-            <UButton
+          <!-- <div class="flex justify-between actions"> -->
+          <!-- <UButton
               disabled
               class="similar-btn"
               icon="i-haditha-search-3"
               label="مشابه"
               color="neutral"
               variant="outline"
-            />
-            <!-- @click.prevent="goToTheSearch('similar')" -->
-            <UButton
+            /> -->
+          <!-- @click.prevent="goToTheSearch('similar')" -->
+          <!-- <UButton
               class="explore-btn"
               trailing-icon="i-haditha-explore"
               label="کاوش"
               variant="solid"
               @click.prevent="goToTheChatbot"
-            />
-          </div>
+            /> -->
+          <!-- </div> -->
           <div class="flex justify-between pagination">
             <UButton
               @click="handlePagination('-1')"
@@ -440,6 +444,27 @@ const handlePagination = (prevNextIndicator: string) => {
               variant="soft"
               icon="i-haditha-chevron-right"
             />
+            <div class="flex items-center">
+                <span class="total-pages">{{ route.query.page_count }}</span>
+                <span class="mx-2">/</span>
+                <UInput
+                  :disabled="loading"
+                  color="neutral"
+                  variant="outline"
+                  v-model="page_num"
+                  @change="handlePageChange"
+                  :ui="{
+                    root: 'root ',
+                    base: 'base page-number-input',
+                    leading: 'leading',
+                    leadingIcon: 'leadingIcon',
+                    leadingAvatar: 'leadingAvatar',
+                    leadingAvatarSize: 'leadingAvatarSize',
+                    trailing: 'trailing',
+                    trailingIcon: 'trailingIcon',
+                  }"
+                />
+              </div>
             <UButton
               @click="handlePagination('1')"
               class="next-haditha"
@@ -778,6 +803,15 @@ const handlePagination = (prevNextIndicator: string) => {
         text-align: right;
         color: var(--ui-color-two);
       }
+      .total-pages {
+          font-family: IRANSansX;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 100%;
+          letter-spacing: 0%;
+          text-align: right;
+          color: #8a92a8;
+        }
     }
   }
 }

pages/haditha/search/index.vue

@@ -90,7 +90,7 @@ const SearchList = defineAsyncComponent(() =>
           </div>
           <div
             v-if="searchQuery?.length == 0"
-            class="flex justify-center flex-col items-center"
+            class="flex justify-center flex-col items-center mt-10"
           >
             <img
               fit="auto"
@@ -100,7 +100,7 @@ const SearchList = defineAsyncComponent(() =>
             />
             <div class="title">
               کاوش با
-              <span class="badge-style"> هوش مصنوعی </span>
+              <span class="badge-style mx-1">هوش مصنوعی</span>
               در احادیث اسلامی
             </div>
           </div>