search_ui/components/search/SearchItemShow.vue
2025-02-01 14:36:10 +03:30

1040 lines
26 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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