haditha_ui/pages/hadith/index.vue

<template>
  <HadithLayout :menu="sidbarMenu">
    <section class="section-one flex flex-col justify-center">
      <div class="bg-container h-full">
        <navigation-menu></navigation-menu>

        <div class="text-logo flex justify-center flex-col items-center">
          <NuxtImg fit="auto" quality="80" placeholder src="/img/logo.svg" />
          <div class="title">
            کاوش با
            <span class="badge-style"> هوش مصنوعی </span>
            در احادیث اسلامی
          </div>
        </div>
      </div>
      <div class="search-box-container flex justify-center">
        <auto-complation></auto-complation>
      </div>
    </section>

    <section class="section-two">
      <div class="bg-container h-full">
        <div class="flex flex-col items-center py-6">
          <div>قابلیت ها</div>
          <div>
            <NuxtImg
              width="32"
              height="32"
              fit="auto"
              quality="80"
              placeholder
              src="/img/chevron-down.svg"
            />
          </div>
        </div>
      </div>
    </section>
  </HadithLayout>
</template>
<script>
import { useStorage } from "@vueuse/core";
import { mapActions, mapState } from "pinia";

import { useHadithStore } from "@hadith/stores/hadithStore";
import { useCommonStore } from "~/stores/commonStore";
import hadithApi from "@hadith/apis/hadithApi.js";
import navbarMenu from "@hadith/json/hadith/menu.json";

export default {
  name: "hadith",
  setup() {
    useHead({
      title: import.meta.env.VITE_HADITH_PAGE_TITLE,
      meta: [
        { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
      ],
      bodyAttrs: {
        class: import.meta.env.VITE_HADITH_SYSTEM,
      },
    });

    definePageMeta({
      layout: false,
      name: "hadith",
    });
  },

  created() {
    this.httpService = useNuxtApp()["$http"];
  },

  async mounted() {
    let schemaExist = this.searchActiveTabGetter && this.searchSchemaGetter;

    if (!schemaExist) this.getSchemas();
    else this.setSearchDomain(this.searchActiveTabGetter);

    if (window.outerWidth < 992) {
      this.$store.commit("TOGGLE_SIDEBAR_MENU");
      this.showMobileFilterList = true;
    }
  },

  data() {
    return {
      httpService: {},
      logo: "",
      sidbarMenuDefault: navbarMenu,
    };
  },

  computed: {
    // ...mapState(useHadithStore, [
    //   "domainActiveGetter",
    //   "searchActiveTabGetter",
    //   "searchSchemaGetter",
    //   "searchSynonymTitleGetter",
    // ]),
    ...mapState(useCommonStore, [
      "currentUser",
      "organNameGetter",
      "isSidebarCollapsed",
      "userPermisionGetter",
    ]),

    sidbarMenu() {
      return this.sidbarMenuDefault;
    },
  },
  methods: {
    ...mapActions(useCommonStore, [
      "TOGGLE_SIDEBAR_MENU",
      "sidebarCollapsedSetter",
    ]),

    // ...mapActions(useHadithStore, [
    //   "searchActiveTabSetter",
    //   "searchSchemaSetter",
    //   "domainActiveSetter",
    //   "searchSynonymTitleSetter",
    // ]),

    async getSchemas() {
      let localStoageSearchSchema = useStorage("searchSchema", undefined).value;

      if (localStoageSearchSchema) {
        let searchSchema = JSON.parse(localStoageSearchSchema);
        this.searchSchemaSetter(searchSchema);
        this.searchActiveTabSetter(searchSchema[0]);
      } else {
        const payload = {
          organ: this.organNameGetter,
          system: "search",
          build_state: buildState(),
        };
        const url = repoUrl() + hadithApi.schema.list;

        this.httpService
          .postRequest(url, payload)
          .then((res) => {
            this.searchSchemaSetter(res.data.search);
            this.searchActiveTabSetter(res.data.search[0]);
            this.fetchingData = false;

            const toast = useToast();
            toast.add({
              title: "Success",
              description: "Your action was completed successfully.",
              color: "success",
            });
          })
          .catch((err) => {
            this.fetchingData = false;
          });
      }
    },
  },
  components: {
    AutoComplation: defineAsyncComponent(() =>
      import("@hadith/components/hadith/AutoComplation.vue")
    ),
    NavigationMenu: defineAsyncComponent(() =>
      import("@hadith/components/hadith/NavigationMenu.vue")
    ),
    AutoComplation: defineAsyncComponent(() =>
      import("@hadith/components/hadith/AutoComplation.vue")
    ),
    HadithLayout: defineAsyncComponent(() =>
      import("@hadith/layouts/HadithLayout.vue")
    ),
  },
};
</script>
<style scoped>
.section-one {
  .bg-container {
    height: 521px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("/img/background.svg"),
      linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%);
  }

  .text-logo {
    padding-top: 10em;
    position: relative;

    .title {
      margin-top: 3.5em;
      font-family: IRANSansX;
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0%;
      text-align: center;
      color: #1b2132;
    }
    .badge-style {
      width: 100;
      height: 23;
      border-radius: 40px;
      padding-right: 8px;
      padding-bottom: 2px;
      padding-left: 8px;
      gap: 10px;
      color: #fff;

      background: linear-gradient(270.29deg, #d284ff 8.12%, #4d00ff 109.58%);
    }
  }

  .search-box-container {
    padding-top: 1em;
    padding-bottom: 4em; /*64px */
   }
}

.section-two {
  font-weight: 200;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0%;
  text-align: center;
}
</style>