haditha_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 [];
    },
  },
  requestStatus: {
    default: "pending",
  },
  total: {
    default: 0,
  },
  noDataText: {
    default: "نتیجه‌ای یافت نشد!",
  },
  noDataIcon: {
    default: "/img/haditha/no-data.png",
  },
  searchTerm: {
    default: "",
  },
});
const emit = defineEmits(["on-bookmard-removed"]);
const router = useRouter();
const route = useRoute();

const modal = useModal();
const isModalOpen = ref(false);
let selectedItem = ref(undefined);

const hadithAddress = (item) => {
  return `${item?._source?.address?.vol_title}، صفحه
   ${item?._source?.address?.page_num}`;
};

function goToSearchShowPage(item) {
  selectedItem.value = item;
  // modal.open(SearchShow, { title: item.title });
  isModalOpen.value = true;

  // const slug = selectedItem.value?._source?.content
  //   .split(" ")
  //   .filter((v, i) => i < 4)
  //   .join("-");

  // router.push({
  //   name: "hadithaSearchShow",
  //   params: {
  //     id: selectedItem.value?._source?.id,
  //     slug: slug,
  //   },
  //   query: {
  //     q: props.searchTerm,
  //   },
  // });
}
async function closeModal() {
  // await modal.close();
  isModalOpen.value = false;
}
function resetModal() {
  modal.reset();
}
function updateModalTitle() {
  modal.patch({ title: "Updated Title" });
}
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) => {
    emit("on-bookmard-removed", index);
    // this.updateListAnswer(index, "tbookmark", 0);
  });
};
// components declaration
const SearchShow = defineAsyncComponent(() =>
  import("@haditha/components/haditha/search-page/SearchShow.vue")
);
</script>

<template>
  <!-- <template v-if="props.requestStatus == 'pending'"> -->
  <!-- <div class="flex items-center gap-4 mb-4" v-for="item in props?.list?.length">
      <USkeleton class="h-12 w-12 rounded-full" />

      <div class="grid gap-2 flex-grow-1">
        <USkeleton class="h-4 " />
        <USkeleton class="h-4 " />
      </div>
    </div> -->
  <!-- </template> -->
  <!-- <template v-else-if="props.requestStatus == 'success' || props.requestStatus == 'idle'"> -->
  <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="goToSearchShowPage(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, index)"
        variant="ghost"
        color="error"
        class="copy-btn"
        label="حذف"
      />
    </div>

    <a
      @click.prevent="goToSearchShowPage(item)"
      class="arabic-text block"
      :href="`/haditha/search/${item?._source?.id}/${item?._source?.content_ar}`"
      v-html="item?._source?.content_ar"
    >
    </a>
    <a
      @click.prevent="goToSearchShowPage(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">
      <ULink
        :to="{
          name: 'hadithaLibraryShow',
          params: {
            id: item?._source?.address.vol_id,
            slug: hadithAddress(item),
          },
          query: {
            page_num: item?._source?.address?.page_num,
          },
        }"
        color="neutral"
        variant="outline"
        :ui="{
          leadingIcon: 'text-(--ui-primary)',
        }"
        class="reference"
      >
        {{ hadithAddress(item) ?? "" }}
      </ULink>

      <!-- <p class="reference">
        {{ item?._source?.address?.vol_title }}، صفحه
        {{ item?._source?.address?.page_num }}
      </p> -->
    </div>
  </div>
  <!-- </template> -->

  <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 :selectedItem="selectedItem" @close="closeModal"></search-show>
    </template>
    <!-- <<template #footer></template> -->
  </UModal>
</template>

<style scoped>
.search-list-item {
  .from-person {
    font-family: var(--font);
    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: var(--ar-font);
    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: var(--font);
    font-weight: 400;
    font-size: 0.8rem; /*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: var(--font);
    font-weight: 300;
    font-size: 0.625rem; /*10px*/
    line-height: 1.1rem; /*15px*/
    letter-spacing: 0%;
    text-align: right;
    color: #8a92a8;

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

<style>
.text__orange {
  color: orange;
}

.modal-content {
  border: 0.3px solid #e0e0e0;
  box-shadow: 0px 8px 20px 0px #0000001a;
  background: #ffffff;
  width: 100%;
  max-width: 720px;
  border-radius: 16px;
  gap: 8px;
  border-width: 0.3px;
  .modal-body {
    border-radius: 16px;

    height: 800px;
    position: relative;

    .top-left-bgi {
      position: absolute;
      top: 0;
      left: 0;
      background-image: url("../../../assets/haditha/images/modal-top-bgi.png");
      backdrop-filter: blur(54px);
      width: 447px;
      height: 447px;
      top: 0;
      left: 0;

      background-repeat: no-repeat;
      background-size: auto;
      z-index: -1;
    }

    &::before {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      background-image: url("../../../assets/haditha/images/modal-bttom-right-bgi.png");
      backdrop-filter: blur(54px);
      width: 438px;
      height: 238px;
      mix-blend-mode: Multiply;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -1;
    }

    &::after {
      content: "";

      position: absolute;
      bottom: 0;
      left: 0;

      width: 458px;
      height: 239px;
      mix-blend-mode: Multiply;
      background-image: url("../../../assets/haditha/images/modal-bottom-left-bgi.png");
      background-repeat: no-repeat;
      background-size: cover;
      backdrop-filter: blur(54px);
      z-index: -1;
    }
  }
}

.modal-overlay {
  background: #00000033;
}
</style>