base_ui/components/dashboard/default/SearchDashboard.vue

<template>
  <div class="search-section mt-5">
    <div class="hamfahmi-title mt-3">
      <img :src="logo" alt="هم فهمی" class="img-img" />

      <h2>هم فهمی - زیست بوم پژوهشگران</h2>
    </div>
    <form class="ms-search-form px-3" role="search">
      <div class="input-group mb-5" dir="ltr">
        <div class="input-group-prepend">
          <button
            @click.prevent="searchNavigateList"
            dir="rtl"
            class="btn btn-primary"
            type="button"
            id="button-addon2"
          >
            جستجو
            <span class="tavasi tavasi-Component-198--1"></span>
          </button>
        </div>
        <input
          v-focus
          class="form-control"
          ref="search-input"
          dir="rtl"
          v-model.trim="searchText"
          type="search"
          id="search-query"
          placeholder="جستجو در متن، قوانین و مقررات ..."
          name="search-query"
          size="60"
          @keyup.enter="searchNavigateList"
        />
      </div>
    </form>
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
import { useCommonStore } from "~/stores/commonStore";
import { useStorage } from "@vueuse/core";

export default {
  beforeMount() {
    // this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
  },
  mounted() {
    let localStoageSearchSchema = useStorage("searchSchema",undefined).value;

    if (localStoageSearchSchema) {
      let searchSchema = JSON.parse(localStoageSearchSchema);
      this.schemasSetter(searchSchema);

      this.searchType = this.schemasGetter[0];
    }
    // else this.getSchemas();

    // this.logo = logoPhoto();
    // logoPhoto().then((img) => {
    //   this.logo = img;
    // });
  },
  data() {
    return {
      searchText: "",
      searchType: "",
      logo:''
    };
  },
  computed: {
    ...mapState(useCommonStore, [
      "getPanelStatus",
      "getRefreshForm",
      "organNameGetter",
      "activeSchemaGetter",
      "schemasGetter",
      "isSidebarCollapsed",
    ]),
  },

  methods: {
    ...mapActions(useCommonStore, ["schemasSetter", "SELECTED_LISTS"]),

    searchNavigateList() {
      // if (this.searchText == undefined || this.searchText == "") return;
      this.$router.push({
        name: "search",
        query: {
          q: this.searchText ?? undefined,
          key: this.searchType.key,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.hamfahmi-title {
  text-align: center;
}
.ms-search-form {
  .input-group {
    background-color: #fff;
    margin-top: 3em;
    margin-bottom: 3.5em;
    overflow: hidden;
    // border-radius: 5px;
    border-radius: 0.35em;
    box-shadow: 0 0.4688rem 2.1875rem rgba(4, 9, 20, 0.03),
      0 0.9375rem 1.4063rem rgba(4, 9, 20, 0.03),
      0 0.25rem 0.5313rem rgba(4, 9, 20, 0.03),
      0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);

    &-prepend {
      align-items: center;
      padding: 0 0.5em;
    }
  }
  .form-control {
    height: 4.3em;
    height: 4em;
    // border-radius: 5px;
    border-radius: 0.35em;
    border: 0;

    &::-webkit-input-placeholder {
      color: #b7b7b7;
      // font-family: var(--font-family);
      // font-size: 14px;
      font-size: 1rem;
      font-weight: 400;
      // line-height: 22px;
      line-height: 1.57;
      letter-spacing: 0em;
    }
    &:-ms-input-placeholder {
      color: #b7b7b7;
      // font-family: var(--font-family);
      // font-size: 14px;
      font-size: 1rem;
      font-weight: 400;
      // line-height: 22px;
      line-height: 1.57;
      letter-spacing: 0em;
    }
    &::-ms-input-placeholder {
      color: #b7b7b7;
      // font-family: var(--font-family);
      // font-size: 14px;
      font-size: 1rem;
      font-weight: 400;
      // line-height: 22px;
      line-height: 1.57;
      letter-spacing: 0em;
    }
    &::placeholder {
      color: #b7b7b7;
      // font-family: var(--font-family);
      // font-size: 14px;
      font-size: 1rem;
      font-weight: 400;
      // line-height: 22px;
      line-height: 1.57;
      letter-spacing: 0em;
    }
  }
  .btn {
    display: flex;
    align-items: center;

    // background: linear-gradient(180deg, #199C9C 0%, #106262 100%);
    // width: 106px;
    // height: 45px;
    height: 3.21em;
    // border-radius: 5px;
    border-radius: 0.35em;

    // font-family: var(--font-family);
    // font-size: 14px;
    font-size: 1rem;
    font-weight: 700;
    // line-height: 22px;
    line-height: 1.57;
    letter-spacing: 0em;
    // color: #000000;
    text-align: center;

    .tavasi {
      margin-right: 1em;
      // width: 20.04px;
      // width: 1.42em;
      // height: 20px;
      // height: 1.42em;
      color: inherit;
    }
  }
}
</style>