search_ui/components/search/SearchItemShow.vue

<template>
  <div class="main" id="top">
    <!-- <the-sidebar :menu="menu"></the-sidebar> -->
    <div class="d-flex">
      <div class="d-md-none dropdown-hamburger">
        <button
          name="button"
          type="button"
          class="toggle-mobile-nav button-hamburger"
          @click.prevent="toggleSidebarMenu()"
        >
          <span class="sr-only">باز کردن منوی کنار</span>
          <svg class="s18" data-testid="sidebar-icon">
            <use href="assets/common/img/icons.svg#sidebar"></use>
          </svg>
        </button>
      </div>
      <div class="d-md-none show-toggle-list-panel">
        <button
          name="button"
          type="button"
          class="toggle-mobile-nav"
          @click.prevent="showToggleListPanelRight()"
        >
          <span class="sr-only">باز کردن منوی کنار</span>
          <span class="tavasi tavasi-Component-160--1"></span>
        </button>
      </div>
      <div class="d-md-none show-toggle-list-panel">
        <button
          name="button"
          type="button"
          class="toggle-mobile-nav"
          @click.prevent="showToggleListPanelLeft()"
        >
          <span class="sr-only">باز کردن منوی کنار</span>
          <span class="tavasi tavasi-Component-158--5"></span>
        </button>
      </div>
    </div>

    <div class="d-grid position1" ref="pags">
      <!-- @hide-panel="showToggleListPanel" -->
      <div class="" ref="pagr">
        <ItemPanel
          :class="{ 'show-list-panel': showListPanel }"
          @show-paragraph="showParagraph"
          ref="showPanelRight"
        ></ItemPanel>
      </div>

      <div class="header__main" ref="pagm">
        <div v-if="showtextpag">
          <div class="d-flex flex-column text-pag pagm" ref="textPag">
            <div class="row" style="justify-content: space-between">
              <div class="col-md-12">
                <div class="d-flex flex-column">
                  <div class="header-text">
                    <div class="d-flex me-4 mt-3">
                      <p class="titel">عنوان:</p>
                      <p class="titel me-2">
                        {{ selectedItemGetter?.title }}
                      </p>
                    </div>

                    <div class="d-flex me-3 mt-3 remove-text">
                      <p class="titel">دوره:</p>
                      <p class="titel me-2">
                        {{ selectedItemGetter?.branch }}
                      </p>
                    </div>

                    <div class="header-text-button">
                      <select
                        @change="chengTextMain($event)"
                        v-model="selected"
                        class="form-select select-text"
                        aria-label="Default select example"
                      >
                        <option selected value="content">متن اصلی</option>
                        <!-- <option value="sanad_data2">متن پژوهشی</option> -->
                      </select>
                      <!-- <button class="form-select select-text"
                      @click.prevent="mehdi()">
                        سلام
                      </button> -->
                    </div>

                    <!-- #region button chang meeting  -->
                    <div class="button-chang">
                      <div
                        title=" جلسه بعدی "
                        @click.prevent="goToTheNextMeeting()"
                      >
                        <span>
                          <svg
                            style="transform: rotate(180deg)"
                            data-testid="chevron-double-lg-left-icon"
                            class="s12 icon-chevron-double-lg-right span1"
                          >
                            <use
                              data-v-46e9fe5b=""
                              href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left"
                            ></use>
                          </svg>
                        </span>
                      </div>

                      <p style="display: flex">
                        جلسه {{ this.selectedItemGetter?.meet_no }}
                      </p>

                      <div
                        title=" جلسه قبلی"
                        @click.prevent="goToThePreviousMeeting()"
                      >
                        <span>
                          <svg
                            data-testid="chevron-double-lg-left-icon"
                            class="s12 icon-chevron-double-lg-right"
                          >
                            <use
                              data-v-46e9fe5b=""
                              href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left"
                            ></use>
                          </svg>
                        </span>
                      </div>
                    </div>

                    <!--#endregion -->
                  </div>

                  <div class="header-main me-3 mt-3">
                    <div class="d-flex justify-content-start remove-text">
                      <p class="text-muted titel-text">صاحب اثر:</p>
                      <p class="me-2 text-muted titel-text">
                        {{ selectedItemGetter?.author }}
                      </p>
                    </div>
                    <div class="d-flex justify-content-start me-3">
                      <p class="text-muted titel-text">تاریخ:</p>
                      <p class="me-2 text-muted titel-text">
                        {{ datefa() }}
                      </p>
                    </div>
                    <div class="d-flex justify-content-start me-3">
                      <p class="text-muted titel-text">کد داخلی:</p>
                      <p class="me-1 text-muted titel-text">
                        {{ selectedItemGetter?.meet_lid }}
                      </p>
                    </div>
                    <div class="d-flex justify-content-start me-3 remove-text">
                      <p class="text-muted titel-text">نوع:</p>
                      <p class="me-2 text-muted titel-text">
                        {{ selectedItemGetter?.format }}
                      </p>
                    </div>
                  </div>
                  <div class="progress-main" style="">
                    <div class="progress-div">
                      <input
                        class="progress"
                        type="range"
                        min="13"
                        max="21"
                        step="1"
                        v-model="progress"
                      />
                      <label>اندازه متن:</label>
                    </div>
                  </div>
                  <hr />
                </div>
              </div>
            </div>

            <div class="text-main">
              <!-- <div v-if="selected === 'option1'"> -->
              <div class="tab-content py-2 px-3" id="myTabContent">
                <div
                  class="tab-pane fade show active main-text"
                  id="home"
                  role="tabpanel"
                  aria-labelledby="home-tab"
                >
                  <div
                    v-if="selectedItemGetter"
                    class="doc-text m-1 text-justify"
                    :style="{ fontSize: progress + 'px' }"
                    v-html="textMain"
                  ></div>
                </div>
              </div>
              <!-- </div> -->
            </div>
          </div>
        </div>
        <!-- <div v-else>
          <div class="h-100 ">
            <div class="button-main">
              <button @click="showfilter()">
                <span class="tavasi tavasi-doc-outline"></span>
              </button>
            </div>
          </div>
        </div> -->
      </div>

      <div class="" ref="pagl">
        <ItemShowForm
          :class="{ 'show-list-panel': showListPanel }"
          @statusPag="statusPag2"
          @show-paragraph="showParagraph"
          ref="showPanelLeft"
        ></ItemShowForm>
      </div>
    </div>
  </div>
</template>

<script>
// import { itemMixin } from "~/search/mixins/itemMixin";
import menu from "~/json/search/json/sidebar.json";
import { mapState, mapActions } from "pinia";
import apis from "~/apis/searchApi.js";


export default {
  mounted() {
    this.item();

    this.httpService = new HttpService(import.meta.env.VITE_REPO_BASE_URL);

    if (this.selectedItemGetter == undefined) {
      this.showitems();
    }

    // this.makeText(sanadData);
    // this.chengTextMain();
    // this.addToTextMainPag();
    this.checkWindowSize();
  },
  watch: {
    selectedItemGetter(newVal) {
      this.chengText(this.selectedItemGetter[this.selected]);
    },
  },

  // beforeMount() {
  //   this.chengTextMain();
  // },
  data() {
    return {
      progress: 15,

      httpService: undefined,
      statusPag: "1",
      statusPag1: "1",
      showtextpag: true,
      showListPanel: false,
      // text: "",
      InputOfMainWords: "",
      // textMainPag: {
      //   title: "", //عنوان
      //   branch: "", //دوره
      //   author: "", //صاحب اثر
      //   begin_date: "", //تاریخ
      //   meet_lid:"", //کد داخلی
      //   format:"", //نوع
      //   textMain: "", //متن اصلی
      //   content:"",

      // },
      searchText: this.$route.params.searchtext,
      id: this.$route.params.id,
      textMain: "",
      textlists: "",
      selected: "content",
      componentName: "ItemList",
      openSubjectForm: false,
      metaItems: [],
      canView: true,
      currentPanelList: {},
      tableTitle: "",
      rowItem: undefined,
      showDetailsPanel: false,
      viewMode: "table",
      selectedFilter: "properties",
      menu: menu,
      showModal: false,
      listId: undefined,
      listItem: [],
      fetchingData: false,
      roles: [],
      selectedItemClone: {
        title: "",
        id: undefined,
        project_id: this.projectGetter?.id,
      },
      prevSelectedItemIndex: undefined,
      showPanel: false,
      projects: [],
      list: [],
      loading: false,
      currentItem: {},
      listChilds: [],
      paragraphs: [],
      breadcrumb: [],
      selectedItem: {},
      paperPropertyes: {},
      prevActivePaperIndex: 0,
      FILTER_BY_ENUM: {
        1: "دفترهای من",
        2: "اشتراکی",
        3: "همه اسناد",
      },
      selectedFilterNumber: 3,
      items: [],
      editMode: false,

      contextMenu: [],
      newItemType: 0,
      childs: [
        {
          title: "یادداشت",
          users: {
            name: "حسن",
            avatar: "",
          },
        },
        {
          title: "2یادداشت",
        },
      ],
      currentItem: null,
    };
  },

  computed: {
    ...mapState(["getPanelStatus", "isSidebarCollapsed"]),
    ...mapState("list", ["listGetter", "selectedItemGetter", "listIdGetter"]),
    //mehdinew

    fontSize() {
      if (this.progress < 30) {
        return "16px";
      } else if (this.progress < 70) {
        return "24px";
      } else {
        return "32px";
      }
    },
  },

  methods: {
    ...mapActions("list", ["SET_SELECTED_ITEM", "SET_LIST"]),

    //#region button chang meeting
    goToTheNextMeeting() {
      // let author = this.listGetter.author;
      // let branch = this.listGetter.branch;
      // let meet_no = this.listGetter.meet_no;
      // meet_no = +1;
      let url = `monir/search/item/&f_au=${
        this.selectedItemGetter.author
      }&f_br=${this.selectedItemGetter.branch}&f_mn=${
        this.selectedItemGetter.meet_no + 1
      }`;
      this.httpService.getRequest(url).then((res) => {
        let text = res.hits.hits[0]._source;
        this.SET_SELECTED_ITEM(text);
      });
      // 
    },
    goToThePreviousMeeting() {
      let url = `monir/search/item/&f_au=${
        this.selectedItemGetter.author
      }&f_br=${this.selectedItemGetter.branch}&f_mn=${
        this.selectedItemGetter.meet_no - 1
      }`;
      this.httpService.getRequest(url).then((res) => {
        let text = res.hits.hits[0]._source;
        this.SET_SELECTED_ITEM(text);
      });
      // 
    },

    //#endregion

    mehdi() {
      // let cloneList = structuredClone(this.listGetter);
      // cloneList.forEach((item,index) =>
      // {
      //   cloneList[index] = {...item,...item._id };
      // })
      //  let id = this.selectedItemGetter._id;
      //  let index = this.listGetter.indexOf(id);
    },

    item() {
      const storedItem = localStorage.getItem("myItem");
      if (storedItem) {
        const myItem = JSON.parse(storedItem);
        this.SET_SELECTED_ITEM(myItem);
        this.chengText(myItem[this.selected]);
      } else {
        console.log("No list found in localStorage.");
      }
    },

    showitems() {
      if (window.location.href.includes("search")) {
        if (this.selectedItemGetter == undefined) {
          let url = apis.items.get + this.id;

          this.httpService
            .getRequest(url)
            .then((res) => {
              // let text = res._source;
              this.SET_SELECTED_ITEM(res._source);
        this.chengText(res._source[this.selected]);

            })
            .catch((err) => {
              this.mySwalToast({
                title: err.response.data.message,
                html: "",
                text: "",
                icon: "error",
              });
            })
            .finally(() => {
            });
        } else {
        }
      } else {
        if (this.selectedItemGetter == undefined) {
          let url = apis.items.get + this.id;

          this.httpService
            .getRequest(url)
            .then((res) => {
              // let text = res._source;
              this.SET_SELECTED_ITEM(res._source);
             
        this.chengText(res._source[this.selected]);

            })
            .catch((err) => {
              this.mySwalToast({
                title: err.response.data.message,
                html: "",
                text: "",
                icon: "error",
              });
            })
            .finally(() => {
            });
        } else {
        }
      }
    },
    getHighlight(text) {
      if (window.location.href.includes("search")) {
        var words = this.searchText.split(" ");

        var index = 1;
        words.forEach((w) => {
          if (w == "" || w == " ") {
            return;
          }
          let classname = `searchHilight${index}`;
          text = text.replaceAll(
            w,
            "<span class='" + classname + "'>" + w + "</span>"
          );
          var w1 = this.normalize(w);
          if (w1 != w) {
            text = text.replaceAll(
              w1,
              "<span class='" + classname + "'>" + w1 + "</span>"
            );
          }
          index = index + 1;
          if (index > 5) index = 1;
        });
        return text;
      } else {
        return;
      }
    },
    normalize(item) {
      item = item.replaceAll("،", "");
      item = item.replaceAll(":", "");
      item = item.replaceAll(".", "");

      item = item.replaceAll("ک", "ك");
      item = item.replaceAll("ی", "ي");
      item = item.replaceAll("إ", "ا");
      item = item.replaceAll("أ", "ا");
      item = item.replaceAll("آ", "ا");
      item = item.replaceAll("ة", "ت");
      return item;
    },
    chengText(mytext) {
      if (mytext !== "") {
        let text = this.getHighlight(mytext).split("\n");
        var tt = "";
        text.forEach((text) => {
          tt = tt + "<p>" + text + "</p>";
        });
        this.textMain = tt;
      } else {
        this.textMain = "<p>" + "متنی وجود ندارد" + "</p>";
      }
    },

    chengTextMain(event) {
      this.chengText(this.selectedItemGetter[event.target.value]);
      // var selectedValue = event;
      // if (selectedValue === undefined) {
      //   selectedValue = "option1";
      // } else {
      //   selectedValue = event.target.value;
      // }

      // const selectedValue = event.target.value;
      //  if(event==""){
      //   const selectedValue ="option2";
      //  }else{
      //   const selectedValue = event.target.value;
      //  }
      // if (this.selectedItemGetter !== undefined) {
      //   if (window.location.href.includes("search")) {
      //     if (selectedValue === "option1") {
      //this.chengText(this.selectedItemGetter[event.target.value]);
      //     }
      //     else if (selectedValue === "option2") {
      //       this.chengText(this.selectedItemGetter.content);
      //     }
      //   }
      //   else {
      //     if (selectedValue === "option1") {
      //      this.chengText(this.selectedItemGetter.sanad_data2);
      //     }
      //     else if (selectedValue === "option2") {
      //       this.chengText(this.selectedItemGetter.content);
      //     }
      //   }
      // }
      // else {
      //   this.showitems();
      // }
    },

    checkWindowSize() {
      if (window?.innerWidth < 992) {
        this.$refs.showPanelRight.showMainpag = false;
        this.$refs.showPanelLeft.showMainpag = false;
      }
    },

    statusPag2($event) {
      this.statusPag = $event;
      // if(this.statusPag=3){
      //   this.showtextpag=false;
      // }else if (this.statusPag=2){
      //   this.showtextpag=true;
      // }
      switch (this.statusPag) {
        case (this.statusPag = 0):
          this.showtextpag = true;
          this.$refs.pags.classList.add("position0");
          this.$refs.pags.classList.remove(
            "position2",
            "position3",
            "position1"
          );
          break;
        case (this.statusPag = 1):
          this.showtextpag = true;
          this.$refs.pags.classList.add("position1");
          this.$refs.pags.classList.remove(
            "position2",
            "position3",
            "position0"
          );
          break;
        case (this.statusPag = 2):
          this.showtextpag = true;
          this.$refs.pags.classList.add("position2");
          this.$refs.pags.classList.remove(
            "position1",
            "position3",
            "position0"
          );
          break;
        case (this.statusPag = 3):
          this.showtextpag = false;
          this.$refs.pags.classList.add("position3");
          this.$refs.pags.classList.remove(
            "position1",
            "position2",
            "position0"
          );

          break;
      }
    },
    // statusPagTest1($event){
    //   this.statusPag1= $event;
    //   switch(this.statusPag1){
    //     case this.statusPag1=1 :

    //     switch(this.statusPag){
    //     case this.statusPag=1 :
    //     this.showtextpag=true;
    //     this.$refs.pags.classList.add("position1");
    //     this.$refs.pags.classList.remove("position2","position3");
    //     break;
    //     case this.statusPag=2 :
    //     this.showtextpag=true;
    //     this.$refs.pags.classList.add("position2");
    //     this.$refs.pags.classList.remove("position1" , "position3");
    //     break;
    //     case this.statusPag=3 :
    //     this.showtextpag=false;
    //     this.$refs.pags.classList.add("position3");
    //     this.$refs.pags.classList.remove("position1", "position2");

    //     break;
    //     }

    //     break;
    //     case this.statusPag1=2 :
    //     // this.$refs.pagr.classList.add("close");

    //     break;
    //   };
    // },

    showfilter() {
      this.showtextpag = true;
    },
    hidenpag() {
      this.showtextpag = false;
    },
    toggleSidebarMenu() {
      this.$store.commit("TOGGLE_SIDEBAR_MENU");
    },
    showToggleListPanelRight() {
      // this.showListPanel = !this.showListPanel;
      this.$refs.showPanelRight.showMainpag = true;
    },
    showToggleListPanelLeft() {
      // this.showListPanel = !this.showListPanel;
      this.$refs.showPanelLeft.showMainpag = true;
    },
    datefa(item) {
      var m = this.selectedItemGetter?.begin_date;
      var d = new Date(m).toLocaleDateString("fa-IR");
      return d;
    },

    // makeText(sanadData) {
    //   if (sanadData?.length) {
    //     // this.text = sanadData.replaceAll("\n", "<p><p/>");
    //       this.text= sanadData.split("\n");
    //       var tt = "";
    //       this.text.forEach((text) => {
    //     tt = tt + "<p>" + text + "</p>";
    //   });
    //   this.text = tt;

    //   } else {
    //     this.text = "اطلاعاتی ثبت نشده است.";
    //   }
    // },
    // listMindex() {
    //   if (sanadData?.length) {
    //     this.lists = sanadData.split("\n");
    //     var tt = "";
    //     this.lists.forEach((list) => {
    //       tt = tt + "<p>" + list + "</p>";
    //     });
    //     this.textlists = tt;
    //   }
    // },

    showParagraph($event) {
      // currentItem = $event;

      let sanadData = $event?.content;

      this.makeText(sanadData);
    },
  },
};
</script>

<style lang="scss">
//mehdi
.pags {
  display: grid;
  grid-template-columns: 0fr 2fr 0fr;
}
.position0 {
  display: grid;
  grid-template-columns: 0fr auto 0fr;
}
.position1 {
  display: grid;
  grid-template-columns: 0fr auto 1fr;
}
.position2 {
  display: grid;
  grid-template-columns: 0fr 1fr 1fr;
}
.position3 {
  display: grid;
  grid-template-columns: 0fr 0fr 2fr;
}
.pagm {
  margin-right: 0.3em;
  display: grid;
  justify-content: space-between;
}

.header-text {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  justify-content: space-between;
  align-items: center;

  .header-text-button {
    width: 20px;
    height: 40px;
    position: relative;
    top: 10px;
    margin-right: 2rem;
  }
}

.header-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  justify-content: space-between;
}
.widthPag {
  width: 830px !important;
}

.text-main {
  height: 70vh !important;
  position: relative;
  top: -20px;
}
.text-pag {
  //background-color: green;
  height: 100% !important;
  //padding-left: 60px;
  overflow: hidden;
}
.main-text {
  position: relative;

  height: 78vh !important;
  //background-color: #1b2733;
  //top:60px !important;

  overflow: hidden;
  overflow-y: scroll;
}
.titel {
  font-size: 14px;
}
.titel-text {
  font-size: 12px;
}
.button-main {
  position: relative;
  top: 5px;
  & button {
    border: 0px;
    background-color: #f8f8f8;
    text-align: center;
    & span {
      color: #333238;
    }
  }
}

.progress-main {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  left: 33px;
  margin-top: 10px;
  label {
    font-size: 13px;
    margin: 5px;
  }
  .progress-div {
    display: flex;
    flex-direction: row-reverse;
  }
  .progress {
    margin: 5px;
    height: 20px;
    width: 60px;
  }
}

//mehdi

.select-text {
  text-align: center;
  background-color: #fff;
  font-size: 14px;
  border-radius: 8px;
  border-color: #f1f1f1;
  padding: 6px;
  &:hover {
    border-color: #afbac6;
  }
}

.doc-text {
  // margin: 0;
  margin-left: 300px;
  margin-right: 50px;
  font-family: sahel, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  font-weight: 400;
  line-height: 2;
  color: #212529;
  text-align: right;
  background-color: #fff;

  p {
    text-align: justify !important;
    display: block;
  }
}

.detail-page {
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 47px;
    padding-right: 47px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 10px;
    height: 64px;

    .document-list__star {
      opacity: 1 !important;
    }
  }

  &__head {
    display: flex;
    flex-direction: column;
  }

  &__title {
    font-size: 14px;
    display: flex;
    align-items: center;

    i {
      margin-right: 3px;
      font-size: 26px !important;
      background: -webkit-linear-gradient(#c1d4da 0%, #e2e8ef 100%);
      // -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  &__breadcrumb {
    ul {
      display: flex;
      align-items: center;
      list-style: none;
    }

    li {
      display: flex;
      align-items: center;

      &:not(:last-child):after {
        content: ">";
        padding-right: 8px;
        padding-left: 8px;
        padding-top: 4px;
        font-size: 10px;
        font-weight: bold;
        color: #bac4ce;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      &:last-child {
        flex: 1;
      }
    }

    a {
      display: block;
      font-size: 12px;
      color: #92a2b2;
    }
  }

  &__meta {
    ul {
      display: flex;
      align-items: center;
    }
  }

  &__content {
    max-height: calc(100vh - 151px);
    padding-right: 40px;
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: 696px;
    margin-right: auto;
    margin-left: auto;

    h1 {
      font-size: 24px;
      color: #444444;
      margin-top: 8px;
      margin-bottom: 8px;
    }

    p {
      font-size: 16px;
      font-weight: lighter;
      line-height: 30px;
      margin-bottom: 8px;
    }
  }

  &__edit-btn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);

    a {
      min-width: 88px;
      height: 40px;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      border-radius: 20px;
      background: #1b2733;

      &:hover {
        color: white;
        opacity: 0.8;
      }
    }
  }
}

.list-system {
  .list-page {
    .pages-content {
      padding: 0;
    }

    .nav-tabs {
      .nav-link {
        color: #92a2b2;
        border: 0;
        border-bottom: 1px solid transparent;

        &.active {
          color: #00b6e3;
          border-bottom: 1px solid #00b6e3;
        }
      }
    }
  }
}

@media (min-width: 992px) {
  .button-chang {
    display: flex;
    position: relative;
    top: 10px;
    right: 3rem;
    div {
      margin: 2px;
    }
    p {
      width: 33px;
      text-align: center;
      font-size: 11px;
      position: relative;
      top: 7px;
    }
    svg {
      font-size: 11px;
      &:hover {
        fill: #00b6e3;
      }
    }
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .remove-text {
    display: none !important;
  }
  .pagm {
    margin-right: 4rem;
  }
}
@media only screen and (min-width: 576px) and (max-width: 766.98px) {
  .remove-text {
    display: none !important;
  }
}
@media (max-width: 575.98px) {
  .remove-text {
    display: none !important;
  }
}
</style>