hadith_ui/components/haditha/search-page/SearchList.vue

<script setup>
import hadithaApi from "@haditha/apis/hadithaApi";
const httpService = useNuxtApp()["$http"];
const props = defineProps({
  list: {
    default() {
      return [];
    },
  },
  total: {
    default: 0,
  },
  noDataText: {
    default: "نتیجه‌ای یافت نشد!",
  },
  noDataIcon: {
    default: "/img/haditha/no-data.png",
  },
});
const router = useRouter();
const route = useRoute();

// const modal = useModal();
// const isModalOpen = ref(false);

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?._source?.id,
      slug: slug,
    },
    query: {
      firstPage: 1,
      page_count: props.total,
    },
  });
}
// async function closeModal() {
//   await modal.close();
// }
// function resetModal() {
//   modal.reset();
// }
// function updateModalTitle() {
//   modal.patch({ title: "Updated Title" });
// }

// components declaration
// const SearchShow = defineAsyncComponent(() =>
//   import("@haditha/components/haditha/search-page/SearchShow.vue")
// );
const removeFromFavorites = async (item = {}, index = 0) => {
  let url = repoUrl() + hadithaApi.favorite.deleteByRefid;
  url = url.replace("{{data_type}}", "bookmark");
  url = url.replace("{{index_key}}", "dhparag");
  url = url.replace("{{ref_id}}", item._id);

  const formData = {
    ref_id: item._id,
    title: item?._source?.title,
  };
  httpService.postRequest(url, formData).then((res) => {
    // this.updateListAnswer(index, "tbookmark", 0);
  });
};
</script>

<template>
  <div
    v-if="props?.list?.length"
    class="search-list-item"
    v-for="(item, index) in props.list"
    :key="index"
  >
    <div class="flex justify-between mt-4 mb-2">
      <a
        :href="`/haditha/search/${item?._source?.id}/${
          item?._source?.meta?.hadith_masoum ??
          item?._source?.meta?.hadith_sanad
        }`"
        @click.prevent="openModal(item)"
        class="from-person block"
      >
        {{
          item?._source?.meta?.hadith_masoum ??
          item?._source?.meta?.hadith_sanad
        }}
      </a>
      <UButton
        v-if="route.name == 'hadithaFavorites'"
        @click="removeFromFavorites(item)"
        variant="ghost"
        color="error"
        class="copy-btn"
        label="حذف"
      />
    </div>

    <a
      @click.prevent="openModal(item)"
      class="arabic-text block"
      :href="`/haditha/search/${item?._source?.id}/${item?._source?.content_ar}`"
    >
      {{ item?._source?.content_ar }}
    </a>
    <a
      @click.prevent="openModal(item)"
      :href="`/haditha/search/${item?._source?.id}/${item?._source?.content}`"
      class="persian-text block"
      v-html="item?.highlight?.['content.fa'] ?? item?._source?.content"
    ></a>
    <div class="flex justify-end">
      <p class="reference">
        {{ item?._source?.address?.vol_title }}، صفحه
        {{ item?._source?.address?.page_num }}
      </p>
    </div>
  </div>

  <!-- <UModal
      v-model:open="isModalOpen"
      :dismissible="false"
      :ui="{
        footer: 'modal-footer',
        overlay: 'modal-overlay',
        content: 'modal-content',
        header: 'modal-header hidden',
        wrapper: 'modal-wrapper',
        body: 'modal-body',
        title: 'modal-title',
        description: 'modal-description',
        close: 'modal-close',
      }"
    >
       <template #header><div class="hidden"></div></template> 
      <template #content></template> 
      <template #body>
        <search-show @close="isModalOpen = !isModalOpen"></search-show>
      </template>
      <<template #footer></template> 
    </UModal> -->
</template>

<style scoped>
.search-list-item {
  .from-person {
    font-family: IRANSansX;
    font-weight: 300;
    font-size: 0.75rem; /*12px*/
    line-height: 1.125rem; /*18px*/
    letter-spacing: 0%;
    text-align: right;
    color: #00a762; /* #4be8ae 7.38%  */
    margin-bottom: 0.5em;

    &:hover,
    &:focus,
    &:active {
      cursor: pointer;
      background-color: #fafafa;
    }
  }
  .arabic-text {
    font-family: Takrim;
    font-weight: 400;
    font-size: 1.125rem; /*18px*/
    line-height: 2rem; /*23px*/
    letter-spacing: 0%;
    text-align: right;
    color: var(--ui-color-two);
    margin-bottom: 0.5em;

    &:hover,
    &:focus,
    &:active {
      cursor: pointer;
      background-color: #fafafa;
    }
  }
  .persian-text {
    font-family: Takrim;
    font-weight: 400;
    font-size: 1rem; /*16px*/
    line-height: 1.375rem; /*22px*/
    letter-spacing: 0%;
    text-align: right;
    color: #626b84;
    margin-bottom: 0.5em;
  }
  .reference {
    height: 24px;
    gap: 4px;
    padding-top: 0.25em; /*4px*/
    padding-right: 0.5em; /*8px*/
    padding-bottom: 0.25em; /*4px*/
    padding-left: 0.5em; /*8px*/
    border-radius: 6px; /*18px*/
    border-width: 0.5px;
    border: 0.5px solid #d9d9d9;

    font-family: IRANSansX;
    font-weight: 300;
    font-size: 0.625rem; /*10px*/
    line-height: 0.9rem; /*15px*/
    letter-spacing: 0%;
    text-align: right;
    color: #8a92a8;

    &:hover,
    &:focus,
    &:active {
      cursor: pointer;
      background-color: #fafafa;
    }
  }
}
</style>