<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/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>