422 lines
12 KiB
Vue
422 lines
12 KiB
Vue
|
<template>
|
||
|
|
<section :class="$route.name">
|
||
|
|
<div class="container-fluid mt-3">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col col-md-3 border-start right-panel" v-if="isRightPanel">
|
||
|
|
<div class="pages-content" ref="navigationFilter">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="d-flex justify-content-between w-100">
|
||
|
|
<multiselect
|
||
|
|
:allow-empty="false"
|
||
|
|
:searchable="true"
|
||
|
|
:close-on-select="true"
|
||
|
|
:show-labels="false"
|
||
|
|
label="title"
|
||
|
|
track-by="id"
|
||
|
|
placeholder="انتخاب پروژه"
|
||
|
|
:value="newProjects"
|
||
|
|
:options="projects"
|
||
|
|
@select="selectProject"
|
||
|
|
:hide-selected="false"
|
||
|
|
:max-height="200"
|
||
|
|
style="width: auto"
|
||
|
|
>
|
||
|
|
<template #singleLabel="props">
|
||
|
|
<span class="option__desc"
|
||
|
|
><span
|
||
|
|
class="option__title text-truncate"
|
||
|
|
style="display: block; max-width: 120px"
|
||
|
|
>
|
||
|
|
{{ props.option.title }}
|
||
|
|
</span></span
|
||
|
|
>
|
||
|
|
</template>
|
||
|
|
</multiselect>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="close btn-right-panel"
|
||
|
|
aria-label="Close"
|
||
|
|
@click="isRightPanel = false"
|
||
|
|
>
|
||
|
|
<span aria-hidden="true">×</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<ResearchTreeList
|
||
|
|
:treeItems="treeItems"
|
||
|
|
:newProjects="newProjects"
|
||
|
|
@on-click="clickOnTreeItem"
|
||
|
|
></ResearchTreeList>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col">
|
||
|
|
<div class="row border-bottom mx-0">
|
||
|
|
<div
|
||
|
|
class="col-12 order-1 order-lg-1 col-lg-1 d-flex justify-content-start"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="d-flex position-relative align-items-center"
|
||
|
|
style="top: -0.3em"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
class="btn btn-right-panel"
|
||
|
|
@click="isRightPanel = true"
|
||
|
|
>
|
||
|
|
<svg class="icon icon-Component-356--1">
|
||
|
|
<use xlink:href="#icon-Component-356--1"></use>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
name="button"
|
||
|
|
type="button"
|
||
|
|
class="toggle-mobile-nav dropdown-hamburger d-md-none"
|
||
|
|
@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>
|
||
|
|
<div class="col-12 order-2 order-lg-1 col-lg-10">
|
||
|
|
<div class="nav-tabs-container nav-tabs border-bottom-0">
|
||
|
|
<ul class="nav">
|
||
|
|
<li
|
||
|
|
class="nav-item desktop"
|
||
|
|
v-for="(navItem, index) in myActiveSchema?.tabs"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
:title="navItem.label"
|
||
|
|
type="button"
|
||
|
|
@click.prevent="updateCategoryList(navItem, index)"
|
||
|
|
class="btn nav-link"
|
||
|
|
:class="{ active: activeTab?.key == navItem.key }"
|
||
|
|
>
|
||
|
|
{{ navItem.title }}
|
||
|
|
</button>
|
||
|
|
</li>
|
||
|
|
<li
|
||
|
|
class="nav-item mobile tabs-more-btn d-md-none"
|
||
|
|
v-if="myActiveSchema?.tabs?.length > 2"
|
||
|
|
>
|
||
|
|
<div class="dropdown">
|
||
|
|
<button
|
||
|
|
class="btn"
|
||
|
|
type="button"
|
||
|
|
id="dropdownMenuButton"
|
||
|
|
data-bs-toggle="dropdown"
|
||
|
|
aria-haspopup="true"
|
||
|
|
aria-expanded="false"
|
||
|
|
>
|
||
|
|
<svg class="icon icon-Component-81--1">
|
||
|
|
<use xlink:href="#icon-Component-81--1"></use>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<div
|
||
|
|
class="dropdown-menu"
|
||
|
|
aria-labelledby="dropdownMenuButton"
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
class="dropdown-item"
|
||
|
|
@click.prevent="updateCategoryList(navItem, index)"
|
||
|
|
v-for="(navItem, index) in myActiveSchema?.tabs"
|
||
|
|
:key="index"
|
||
|
|
:class="{ active: activeTab?.key == navItem.key }"
|
||
|
|
>
|
||
|
|
{{ navItem.title }}</a
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12 pt-3">
|
||
|
|
<component
|
||
|
|
:is="contentComponentName(activeTab?.key)"
|
||
|
|
:listAnswer="listAnswerForTerm"
|
||
|
|
:pagination="pagination"
|
||
|
|
@changePage="changePaging"
|
||
|
|
@researchModalHandler="researchModalHandler"
|
||
|
|
></component>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<base-modal-v2
|
||
|
|
v-if="showModal"
|
||
|
|
@close="closeBaseModal"
|
||
|
|
:showHeaderCloseButton="true"
|
||
|
|
:hasFooter="false"
|
||
|
|
:modalTitle="modalTitle"
|
||
|
|
minHeight="17em"
|
||
|
|
overflow="hidden"
|
||
|
|
:showSaveButton="true"
|
||
|
|
:showCloseButton="true"
|
||
|
|
:showDeleteButton="false"
|
||
|
|
>
|
||
|
|
<slot> {{ modalTitle }}</slot>
|
||
|
|
|
||
|
|
<slot name="body">
|
||
|
|
<component
|
||
|
|
:is="slotComponentName"
|
||
|
|
:valueModal="valueModalResearch"
|
||
|
|
@closeAfterSaving="closeAfterSaving"
|
||
|
|
></component>
|
||
|
|
</slot>
|
||
|
|
</base-modal-v2>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapState, mapActions } from "pinia";
|
||
|
|
import researchApi from "~/apis/researchApi";
|
||
|
|
|
||
|
|
import { useResearchStore } from "~/stores/researchStore";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
beforeMount() {
|
||
|
|
this.httpService = new HttpService(import.meta.env.VITE_BASE_URL);
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
if (this.myActiveSchema) {
|
||
|
|
this.researchActiveSchemaSetter(this.myActiveSchema);
|
||
|
|
|
||
|
|
this.getMultiSelect(this.myActiveSchema.lists.url_GET);
|
||
|
|
this.activeTab = this.myActiveTabs;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
beforeDestroy() {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
projects: [],
|
||
|
|
showModal: false,
|
||
|
|
modalTitle: null,
|
||
|
|
slotComponentName: null,
|
||
|
|
valueModalResearch: {},
|
||
|
|
newProjects: "",
|
||
|
|
listAnswerForTerm: [],
|
||
|
|
treeItems: [],
|
||
|
|
childrenList: [],
|
||
|
|
parentList: {},
|
||
|
|
httpService: undefined,
|
||
|
|
activeTab: null,
|
||
|
|
listTypeId: 0,
|
||
|
|
firstChoiceOfTree: "",
|
||
|
|
isRightPanel: true,
|
||
|
|
pagination: {
|
||
|
|
page: 1,
|
||
|
|
pages: 0,
|
||
|
|
total: 0,
|
||
|
|
offset: 0, // page * per_page
|
||
|
|
limit: 10, //per_page
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState(useResearchStore, ["researchSchemaGetter", "researchTermsGetter"]),
|
||
|
|
|
||
|
|
repoUrl() {
|
||
|
|
return import.meta.env.VITE_REPO + "/";
|
||
|
|
},
|
||
|
|
myActiveSchema() {
|
||
|
|
return this.researchSchemaGetter.find((item) => {
|
||
|
|
return item.key == "term";
|
||
|
|
});
|
||
|
|
},
|
||
|
|
myActiveTabs() {
|
||
|
|
return this.myActiveSchema.tabs.find((item) => {
|
||
|
|
return item.key == "fish";
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions(useResearchStore, [
|
||
|
|
"researchTermsSetter",
|
||
|
|
"researchActiveSchemaSetter",
|
||
|
|
]),
|
||
|
|
closeAfterSaving() {
|
||
|
|
this.closeBaseModal();
|
||
|
|
setTimeout(() => {
|
||
|
|
this.getItemsForResearch(this.firstChoiceOfTree.id);
|
||
|
|
}, 1000);
|
||
|
|
},
|
||
|
|
// #region function all
|
||
|
|
researchModalHandler(event) {
|
||
|
|
this.openBaseModal("ResearchFishModal", event.itemSchema.title);
|
||
|
|
this.valueModalResearch = event;
|
||
|
|
},
|
||
|
|
openBaseModal(componentName, title) {
|
||
|
|
this.showModal = true;
|
||
|
|
this.slotComponentName = componentName;
|
||
|
|
this.modalTitle = title;
|
||
|
|
},
|
||
|
|
closeBaseModal() {
|
||
|
|
this.showModal = false;
|
||
|
|
},
|
||
|
|
updateCategoryList(navItem, index) {
|
||
|
|
this.activeTab = navItem;
|
||
|
|
},
|
||
|
|
contentComponentName(key) {
|
||
|
|
if (key == "fish") return "ResearchContent";
|
||
|
|
else if (key == "wiki") return "WikiPage";
|
||
|
|
else if (key == "change") return "ProcessologyPage";
|
||
|
|
else if (key == "treechart") return "Tree";
|
||
|
|
|
||
|
|
return "ResearchContent";
|
||
|
|
},
|
||
|
|
selectProject(item) {
|
||
|
|
this.researchTermsSetter(item);
|
||
|
|
this.newProjects = item;
|
||
|
|
this.getListTree();
|
||
|
|
},
|
||
|
|
// #endregion
|
||
|
|
// #region function for tree and MultiSelect
|
||
|
|
getMultiSelect(url) {
|
||
|
|
this.httpService.getRequest(url).then((res) => {
|
||
|
|
this.researchTermsSetter(res.data[0]);
|
||
|
|
|
||
|
|
this.projects = res.data;
|
||
|
|
this.newProjects = res.data[0];
|
||
|
|
this.getListTree();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getListTree(parent = 0, ischildren = false, parentItem = {}) {
|
||
|
|
const payload = {
|
||
|
|
projectid: this.newProjects?.id,
|
||
|
|
parent: parent,
|
||
|
|
sortby: "id",
|
||
|
|
offset: 0,
|
||
|
|
limit: 100,
|
||
|
|
listtype: this.listTypeId,
|
||
|
|
};
|
||
|
|
let url = researchApi.subject.list;
|
||
|
|
|
||
|
|
this.httpService.formDataRequest(url, payload).then((res) => {
|
||
|
|
if (!ischildren) {
|
||
|
|
this.treeItems = res.data;
|
||
|
|
this.firstChoiceOfTree = res.data[0];
|
||
|
|
this.getItemsForResearch(res.data[0].id);
|
||
|
|
} else {
|
||
|
|
this.childrenList = res.data;
|
||
|
|
this.parentList = parentItem;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
clickOnTreeItem(item) {
|
||
|
|
this.firstChoiceOfTree = item;
|
||
|
|
this.resetPagination();
|
||
|
|
this.getItemsForResearch(item.id);
|
||
|
|
},
|
||
|
|
// #endregion
|
||
|
|
// #region function for component
|
||
|
|
getItemsForResearch(id) {
|
||
|
|
let url = this.activeTab?.url_GET;
|
||
|
|
url = url.replace("{{offset}}", this.pagination.offset);
|
||
|
|
url = url.replace("{{limit}}", this.pagination.limit);
|
||
|
|
let filter = "";
|
||
|
|
if (id == 0)
|
||
|
|
filter = `&f_rt=${this.myActiveSchema.label}`; // برای نمایش همه
|
||
|
|
else filter = `&f_rt=${this.myActiveSchema.label}&f_sb=${id}`;
|
||
|
|
url = url.replace("{{filter}}", filter);
|
||
|
|
|
||
|
|
this.httpService.getRequest(url).then((res) => {
|
||
|
|
this.listAnswerForTerm = res.hits.hits;
|
||
|
|
const total = res.hits.total.value;
|
||
|
|
|
||
|
|
const pages = Math.ceil(total / this.pagination.limit);
|
||
|
|
const pagination = {
|
||
|
|
total: total,
|
||
|
|
pages: pages == 0 ? 1 : pages,
|
||
|
|
};
|
||
|
|
this.pagination = { ...this.pagination, ...pagination };
|
||
|
|
});
|
||
|
|
},
|
||
|
|
changePaging(item) {
|
||
|
|
this.pagination = item;
|
||
|
|
this.getItemsForResearch(this.firstChoiceOfTree.id);
|
||
|
|
},
|
||
|
|
resetPagination() {
|
||
|
|
this.pagination = {
|
||
|
|
page: 1,
|
||
|
|
pages: 0,
|
||
|
|
total: 0,
|
||
|
|
offset: 0, // page * per_page
|
||
|
|
limit: 10, //per_page
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
// #endregion
|
||
|
|
},
|
||
|
|
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.v-popper--theme-dropdown {
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.v-popper__inner {
|
||
|
|
.my-tooltip-content {
|
||
|
|
color: white;
|
||
|
|
background-color: black;
|
||
|
|
padding: 1em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.btn-right-panel {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 61.998em) {
|
||
|
|
.right-panel {
|
||
|
|
padding-top: 0.5em;
|
||
|
|
position: fixed;
|
||
|
|
z-index: 9;
|
||
|
|
width: 24em;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
right: 0;
|
||
|
|
margin-right: var(--sidebar-collapsed-width);
|
||
|
|
background: #fff;
|
||
|
|
justify-content: center;
|
||
|
|
// box-shadow: -1px 0px 7px 1px #eee;
|
||
|
|
}
|
||
|
|
.btn-right-panel {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 47.938em) {
|
||
|
|
.nav {
|
||
|
|
li {
|
||
|
|
.nav-link {
|
||
|
|
font-size: 0.8rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
li.desktop:nth-child(n + 3) {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.dropdown-menu {
|
||
|
|
a.dropdown-item:nth-child(-n + 2) {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// .combo-list {
|
||
|
|
// margin-top: 1em;
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
.right-panel {
|
||
|
|
margin-right: 0;
|
||
|
|
width: 18em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|