Remove extra files from layout folder.
This commit is contained in:
mustafa-rezae
parent
1603a42e40
commit
f8e735f726
|
|
@ -1,183 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="jahat__sidebar scroll-needed">
|
||||
<ul class="sidebar-menu sidebar-menu--simple">
|
||||
<li>
|
||||
<router-link :to="{name:'issues'}" class="text__14">مسائل جدید</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{name:'issues'}" class="text__14">مسائل مرتبط</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{name:'issues'}" class="text__14">مسائل پیشنهادی</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{name:'issues'}" class="text__14">مسائل کلان</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{name:'issues'}" class="text__14">ایده ها</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link :to="{name:'issues'}" class="text__14">مسائل حل شده</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="jahat__content-container">
|
||||
<div class="jahat__content">
|
||||
<div class="dashboard">
|
||||
<div class="my-profile__container" style="position: relative">
|
||||
<div class="my-profile">
|
||||
<div class="my-profile__form">
|
||||
<form action="">
|
||||
<div class="form-row">
|
||||
<label for="">نام</label>
|
||||
<input type="text" placeholder="کاظم" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label for="">نام خانوادگی</label>
|
||||
<input type="text" placeholder="رحیمی" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label for="">تلفن همراه</label>
|
||||
<input type="text" placeholder="۰۹۱۹۲۵۱۳۰۱۱" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label for="">نام کاربری</label>
|
||||
<input type="text" placeholder="@rahim_arbab" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label for="">پست الکترونیک</label>
|
||||
<input type="text" placeholder="rahimearbab@gmail.com" />
|
||||
</div>
|
||||
<div class="border"></div>
|
||||
<div class="text text__gray">اطلاعات بیشتر <span>( موارد را با ویرگول «،» جدا کنید )</span></div>
|
||||
<div class="form-row form-row--text-area">
|
||||
<label for="">تخصص ها</label>
|
||||
<!-- <textarea v-model="user_properties.skills.value" cols="30" rows="10" placeholder="مهارتها و تخصصهای علمی"></textarea> -->
|
||||
<!-- <textarea v-model="userInfo.skills.value" cols="30" rows="10" placeholder="مهارتها و تخصصهای علمی"></textarea> -->
|
||||
<vue-select dir="rtl" multiple taggable v-model="userInfo.skills.value" :options="skills"></vue-select>
|
||||
</div>
|
||||
<div class="form-row form-row--text-area">
|
||||
<label for="">علاقمندی ها</label>
|
||||
<vue-select dir="rtl" multiple taggable v-model="userInfo.favorites.value" :options="favorites" ></vue-select>
|
||||
<!-- <textarea v-model="userInfo.favorites.value" cols="30" rows="10" placeholder="موضوعات مورد علاقه ( دغدغه شما )"></textarea> -->
|
||||
</div>
|
||||
|
||||
<div class="popUp-tab__buttons px-0">
|
||||
<a href="javascript:void(0)" class="popUp-tab__submit" @click="saveUserInfo()">ثبت</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { mapActions, mapState } from 'vuex';
|
||||
import {GET_PERSONAL_INFO} from "../../../store/modules/profile.module";
|
||||
export default {
|
||||
name: "Dashboard",
|
||||
|
||||
data(){
|
||||
return{
|
||||
user_properties:{
|
||||
skills:{
|
||||
id: 2,
|
||||
value: '',
|
||||
|
||||
},
|
||||
favorites:{
|
||||
id: 1,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
errors: {},
|
||||
|
||||
skills: [],
|
||||
favorites: []
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['currentUserPersonalInfo']),
|
||||
|
||||
userInfo(){
|
||||
let userInfo = this.currentUserPersonalInfo;
|
||||
let user_properties = this.user_properties;
|
||||
|
||||
if(userInfo && userInfo.properties && Object.keys(userInfo.properties).length > 0){
|
||||
let skills = [];
|
||||
let favorites = [];
|
||||
|
||||
if(userInfo.properties.skills.length > 0){
|
||||
userInfo.properties.skills.forEach((skill) => {
|
||||
skills.push({id: skill.values.id, label: skill.values.title});
|
||||
});
|
||||
}
|
||||
if(userInfo.properties.favorites.length > 0){
|
||||
userInfo.properties.favorites.forEach((favorite) => {
|
||||
favorites.push({id: favorite.values.id, label: favorite.values.title});
|
||||
});
|
||||
}
|
||||
|
||||
user_properties.skills.value = skills;
|
||||
user_properties.favorites.value = favorites;
|
||||
}
|
||||
return user_properties;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions([ 'checkPermissions', 'SAVE_USER_PROPERTIES', 'GET_PERSONAL_INFO']),
|
||||
saveUserInfo(){
|
||||
let data = {...this.user_properties};
|
||||
let self = this;
|
||||
|
||||
this.SAVE_USER_PROPERTIES(data).then(response => {
|
||||
}).catch(errors => {
|
||||
self.errors = errors.data.errors;
|
||||
});
|
||||
},
|
||||
|
||||
getProfileData(){
|
||||
let self = this;
|
||||
ApiService.get(
|
||||
null,
|
||||
"profile/skills-favorites",
|
||||
function(response) {
|
||||
response.data.favorites.forEach(item => {
|
||||
let data = {
|
||||
id: item.id,
|
||||
label: item.title
|
||||
}
|
||||
self.favorites.push(data);
|
||||
});
|
||||
response.data.skills.forEach(item => {
|
||||
let data = {
|
||||
id: item.id,
|
||||
label: item.title
|
||||
}
|
||||
self.skills.push(data);
|
||||
});
|
||||
},
|
||||
function() {
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
mounted(){
|
||||
this.GET_PERSONAL_INFO();
|
||||
this.getProfileData();
|
||||
// this.checkPermissions({ permission: "", _this: this })
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,356 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
:class="mode == 1 ? 'jahat__content_list' : 'jahat__content-container'"
|
||||
>
|
||||
<div class="jahat__content">
|
||||
<div class="search-list firefox-scrollbar">
|
||||
<filter-list
|
||||
v-if="subjectFilters.size"
|
||||
:filters="subjectFilters.values()"
|
||||
@remove-filter="removeFromFilters"
|
||||
></filter-list>
|
||||
|
||||
<filter-list
|
||||
v-if="subjectFilters.size"
|
||||
:filters="creationFilters.values()"
|
||||
@remove-filter="removeFromFilters"
|
||||
></filter-list>
|
||||
|
||||
<div
|
||||
v-for="(entity, index) in entities"
|
||||
:key="index"
|
||||
class="search-list__item"
|
||||
>
|
||||
<div class="search-list__content">
|
||||
<div class="search-list__header">
|
||||
<span
|
||||
:disabled="true"
|
||||
:to="{ name: 'issues' }"
|
||||
class="label text__14"
|
||||
>{{ getEntityName(entity._source.type_id) }}</span
|
||||
>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
@click.prevent="routeTo(entity)"
|
||||
class="search-list__title text__16"
|
||||
v-html="getTitle(entity)"
|
||||
>
|
||||
</a>
|
||||
<!-- <router-link
|
||||
:title="entity._source.title"
|
||||
:to="{
|
||||
name: 'issuesShow',
|
||||
params: { id: entity._source.id,parentRouteName:$route.name },
|
||||
}"
|
||||
class="search-list__title text__16"
|
||||
>
|
||||
{{ entity._source.title }}
|
||||
</router-link> -->
|
||||
</div>
|
||||
<div class="search-list__meta">
|
||||
<!-- <div class="search-list__sub-item text__14">با {{ entity.sub_issue_count ? entity.sub_issue_count : 0 }}
|
||||
زیر مساله، با {{ entity.responses_count ? entity.responses_count : 0 }} پاسخ
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="search-list__sub-item text__14" v-if="entity.criterions && entity.criterions.length > 0">
|
||||
<span> معیارها : </span>
|
||||
<span class="text__semibold"> {{ (entity.criterions && entity.criterions.length > 0) ? entity.criterions[0].value_json.text : '' }}</span>
|
||||
</div> -->
|
||||
</div>
|
||||
<div
|
||||
v-if="entity._source?.favorite"
|
||||
class="search-list__content text__14 text__gray"
|
||||
v-html="getText(entity).unfavoriteText"
|
||||
></div>
|
||||
<div
|
||||
v-if="entity._source?.unfavorite"
|
||||
class="search-list__content text__14 text__gray"
|
||||
v-html="getText(entity).text"
|
||||
></div>
|
||||
<div
|
||||
v-if="entity._source.subject && entity._source.subject.length"
|
||||
class="search-list__content text__14 text__gray"
|
||||
>
|
||||
<span :disabled="true" class="text__16 text__blue"
|
||||
>موضوع :
|
||||
</span>
|
||||
<a
|
||||
v-for="(subject, index) in entity._source.subject"
|
||||
:key="index"
|
||||
href="javascript:void(0)"
|
||||
@click.prevent="addToFilters(subject)"
|
||||
class="search-list__title text__16"
|
||||
>
|
||||
{{ subject.title }}،
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="search-item__actions" v-if="showActions">
|
||||
<span class="tavasi tavasi-more-vert"></span>
|
||||
<!-- v-can="$route.name + '_subject'" -->
|
||||
<button
|
||||
v-can="$route.name + '_subject'"
|
||||
@click="$emit('open-subject-modal', entity)"
|
||||
title="موضوع زنی"
|
||||
class="btn show-detail-btn px-1"
|
||||
type="button"
|
||||
>
|
||||
<span class="tavasi tavasi-doc-outline"></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-can="$route.name + '_update'"
|
||||
@click="$emit('edit-entity', entity)"
|
||||
title="ویرایش مسئله"
|
||||
class="btn show-detail-btn px-1"
|
||||
type="button"
|
||||
>
|
||||
<span class="tavasi tavasi-Component-242--1"></span>
|
||||
</button>
|
||||
<button
|
||||
v-can="$route.name + '_delete'"
|
||||
@click="$emit('delete-entity', entity)"
|
||||
title="حذف"
|
||||
class="btn show-detail-btn px-1"
|
||||
type="button"
|
||||
>
|
||||
<span class="tavasi tavasi-Component-295--1"></span>
|
||||
</button>
|
||||
<button-component
|
||||
title=" کپی لینک مساله"
|
||||
buttonText=""
|
||||
class="btn show-detail-btn px-1"
|
||||
@click="copyToClipboard(entity._source.id)"
|
||||
>
|
||||
<svg class="icon icon-copy2 fz-8">
|
||||
<use xlink:href="#icon-copy2"></use>
|
||||
</svg>
|
||||
</button-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="paginations">
|
||||
<!-- <jahat-pagination
|
||||
:paginationInfo="paginationInfo"
|
||||
@page-changed="pageChanged"
|
||||
@page-limit-changed="pageLimitChanged"
|
||||
>
|
||||
</jahat-pagination> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { commonMixin } from "~/jahat/mixins/commonMixin";
|
||||
// import { apiMixin } from "~/jahat/mixins/apiMixin";
|
||||
import { mapState } from "pinia";
|
||||
|
||||
export default {
|
||||
name: "EntityContent",
|
||||
mixins: [commonMixin],
|
||||
mounted() {
|
||||
this.pagination = this.paginationInfo;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pagination: {
|
||||
page: 1,
|
||||
pages: 0,
|
||||
total: 0,
|
||||
offset: 0, // page * per_page
|
||||
limit: 10, //per_page
|
||||
},
|
||||
maxlenText: 300,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
subjectFilters: { type: Map, default: () => new Map() },
|
||||
creationFilters: { type: Map, default: () => new Map() },
|
||||
|
||||
entities: { type: Array, default: () => [] },
|
||||
paginationInfo: { default: () => {} },
|
||||
mode: { type: Number, default: 1 },
|
||||
},
|
||||
computed: {
|
||||
...mapState(["userPermisionGetter"]),
|
||||
|
||||
showActions() {
|
||||
const canUpdate = this.userPermisionGetter?.includes(
|
||||
this.$route.name + "_update"
|
||||
);
|
||||
const canDelete = this.userPermisionGetter?.includes(
|
||||
this.$route.name + "_delete"
|
||||
);
|
||||
const canSubject = this.userPermisionGetter?.includes(
|
||||
this.$route.name + "_subject"
|
||||
);
|
||||
const canCopy = true;
|
||||
|
||||
return canUpdate || canDelete || canSubject || canCopy;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
pageLimitChanged(paging) {
|
||||
this.$emit("pageLimitChanged", paging);
|
||||
},
|
||||
pageChanged(paging) {
|
||||
this.$emit("pageChanged", paging);
|
||||
},
|
||||
sortChanged(sorting) {
|
||||
this.$emit("sortChanged", sorting);
|
||||
},
|
||||
resetPagination() {
|
||||
this.$emit("resetPagination", sorting);
|
||||
},
|
||||
addToFilters(filter) {
|
||||
this.$emit("add-filter", filter);
|
||||
},
|
||||
removeFromFilters(filter) {
|
||||
this.$emit("remove-filter", filter);
|
||||
},
|
||||
routeTo(entity) {
|
||||
this.$emit("close");
|
||||
let url = "";
|
||||
if (entity._source.type_id == this.getEntityTypeId("issue")) {
|
||||
url = "issuesShow";
|
||||
this.$router.push({
|
||||
name: url,
|
||||
params: {
|
||||
id: entity._source.id,
|
||||
parentRouteName: this.$router.name,
|
||||
},
|
||||
});
|
||||
} else if (entity._source.type_id == this.getEntityTypeId("answer")) {
|
||||
url = "answersShow";
|
||||
this.$router.push({
|
||||
name: url,
|
||||
params: {
|
||||
entityId: entity._source.entities.entity_id,
|
||||
// parentRouteName: this.$router.name,
|
||||
answerId: entity._source.id,
|
||||
},
|
||||
});
|
||||
} else if (entity._source.type_id == this.getEntityTypeId("crition")) {
|
||||
url = "critionsShow";
|
||||
this.$router.push({
|
||||
name: url,
|
||||
params: {
|
||||
id: entity._source.id,
|
||||
parentRouteName: this.$router.name,
|
||||
critionId: entity._source.id,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
getTitle(entity) {
|
||||
if (entity._source.type_id == this.getEntityTypeId("issue"))
|
||||
return entity._source.title;
|
||||
else if (
|
||||
entity._source.type_id == this.getEntityTypeId("answer") &&
|
||||
entity._source.entities
|
||||
) {
|
||||
if (Array.isArray(entity._source.entities))
|
||||
return entity._source.entities[0]?.entity_title;
|
||||
else return entity._source.entities.entity_title;
|
||||
}
|
||||
return entity._source.title;
|
||||
},
|
||||
|
||||
getText(entity) {
|
||||
let text = "";
|
||||
let unfavoriteText = "";
|
||||
if (entity._source.type_id == this.getEntityTypeId("issue")) {
|
||||
if (entity._source.summary) text = entity._source.summary;
|
||||
else text = entity._source.description;
|
||||
}
|
||||
if (entity._source.type_id == this.getEntityTypeId("crition")) {
|
||||
if (entity._source.favorite)
|
||||
text = "مطلوب : " + entity._source.favorite;
|
||||
if (entity._source.unfavorite)
|
||||
unfavoriteText = "\n" + "نامطلوب : " + entity._source.unfavorite;
|
||||
}
|
||||
if (
|
||||
(text == "" ||
|
||||
entity._source.type_id == this.getEntityTypeId("answer")) &&
|
||||
entity._source.summary
|
||||
)
|
||||
text = entity._source.summary;
|
||||
if (text == "" && entity._source.summary) text = entity._source.summary;
|
||||
if (text == "" && entity._source.description)
|
||||
text = entity._source.description;
|
||||
text =
|
||||
text?.length > this.maxlenText
|
||||
? text.substr(0, this.maxlenText) + "..."
|
||||
: text;
|
||||
return {
|
||||
text,
|
||||
unfavoriteText,
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.search-list__item {
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
overflow: hidden;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: #e8fcff;
|
||||
|
||||
.search-item__actions {
|
||||
// width: 6.5em;
|
||||
width: auto;
|
||||
|
||||
transition: width 0.5s;
|
||||
background: #fff;
|
||||
border-radius: 0 0.5em 0.5em 0;
|
||||
|
||||
.tavasi-more-vert {
|
||||
transition: all 0.2s;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-item__actions {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 1.6em;
|
||||
top: 1em;
|
||||
// overflow: hidden;
|
||||
transition: all 0.5s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
filter: brightness(0.7);
|
||||
}
|
||||
|
||||
.tavasi,
|
||||
.icon-copy2 {
|
||||
color: #adbec4;
|
||||
}
|
||||
.icon-copy2 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,656 +0,0 @@
|
|||
<template>
|
||||
<!-- <div style="height: 100vh; overflow: auto"> -->
|
||||
<div>
|
||||
<!-- <button
|
||||
class="filters__open-btn--top btn buttonshow"
|
||||
id="buttonshow"
|
||||
@click="showfilter"
|
||||
>
|
||||
<svg
|
||||
data-v-46e9fe5b=""
|
||||
data-testid="chevron-double-lg-left-icon"
|
||||
class="s12 icon-chevron-double-lg-left"
|
||||
>
|
||||
<use
|
||||
data-v-46e9fe5b=""
|
||||
href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left"
|
||||
></use>
|
||||
</svg>
|
||||
</button> -->
|
||||
<div class="button-change">
|
||||
<switch-component
|
||||
@change-mode="topRepeatInListMode = !topRepeatInListMode"
|
||||
name="top-repeat"
|
||||
></switch-component>
|
||||
<!-- "critions" -->
|
||||
<div
|
||||
v-if="entity_type != getEntityTypeId('answer')"
|
||||
class="record-problem"
|
||||
>
|
||||
<a
|
||||
v-can="'issues_create'"
|
||||
title="ثبت مساله"
|
||||
href="ثبت مساله"
|
||||
class="text__14 text__blue button"
|
||||
@click.prevent="openIssueModal"
|
||||
>ثبت {{ getEntityName(entity_type) }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="topRepeatInListMode">
|
||||
<div
|
||||
ref="filterdiv"
|
||||
class="jahat__sidebar scroll-needed hide"
|
||||
id="showDiv"
|
||||
:class="{ expanded: !isSidebarCollapsed }"
|
||||
>
|
||||
<ul class="sidebar-menu sidebar-menu--simple buttonhide">
|
||||
<li>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
@click.prevent="updateListSpecial(1)"
|
||||
class="text__14"
|
||||
>{{ entitiesTitle }} جدید</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
@click.prevent="updateListSpecial(2)"
|
||||
class="text__14"
|
||||
>{{ entitiesTitle }} ویرایشی</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
@click.prevent="updateListSpecial(3)"
|
||||
class="text__14"
|
||||
>{{ entitiesTitle }} تولیدی من</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
@click.prevent="updateListSpecial(4)"
|
||||
class="text__14"
|
||||
>{{ entitiesTitle }} مشارکتی من</a
|
||||
>
|
||||
</li>
|
||||
<button
|
||||
type="bu"
|
||||
@click.prevent="hidefilter"
|
||||
class="text__14 btn btnHide"
|
||||
id="btnHide"
|
||||
>
|
||||
<svg
|
||||
data-v-46e9fe5b=""
|
||||
data-testid="chevron-double-lg-left-icon"
|
||||
class="s12 icon-chevron-double-lg-left"
|
||||
>
|
||||
<use
|
||||
data-v-46e9fe5b=""
|
||||
href="/assets/img/icons.d6ff8c17.svg#chevron-double-lg-left"
|
||||
></use>
|
||||
</svg>
|
||||
بستن
|
||||
</button>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="jahat__content-container"
|
||||
:class="{ expanded: !isSidebarCollapsed }"
|
||||
>
|
||||
<!-- <div
|
||||
v-if="entity_type == getEntityTypeId('issue')"
|
||||
class="jahat__fixed-btn"
|
||||
>
|
||||
<a
|
||||
v-can="'issues_create'"
|
||||
title="ثبت مساله"
|
||||
href="ثبت مساله"
|
||||
class="text__14 text__blue button"
|
||||
@click.prevent="openIssueModal"
|
||||
>ثبت مساله</a
|
||||
>
|
||||
</div> -->
|
||||
|
||||
<the-content-loading v-if="fetchingData"></the-content-loading>
|
||||
|
||||
<div v-if="canView">
|
||||
<div v-if="!fetchingData">
|
||||
<EntityContent
|
||||
v-if="pagination.total"
|
||||
:creationFilters="creationFilters"
|
||||
:subjectFilters="subjectFilters"
|
||||
@add-filter="updateListAfterFilterAdded"
|
||||
@remove-filter="updateListAfterFilterRemoved"
|
||||
@delete-entity="deleteEntity"
|
||||
@edit-entity="editEntity"
|
||||
@open-subject-modal="openSubjectModal"
|
||||
:type="listType"
|
||||
:entities="listEntity"
|
||||
class="entity-content"
|
||||
:class="{ 'chart-and-list-mode': topRepeatInListMode }"
|
||||
/>
|
||||
|
||||
<no-data v-else>
|
||||
<p class="text-center p-3">مسئله ای ثبت نشده است.</p>
|
||||
</no-data>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<no-data v-else>
|
||||
<p class="text-center p-3">
|
||||
<span class="tavasi tavasi-warning-circle"></span>
|
||||
عدم دسترسی
|
||||
</p>
|
||||
</no-data>
|
||||
|
||||
<jahat-pagination
|
||||
v-if="pagination.total"
|
||||
:paginationInfo="pagination"
|
||||
@page-changed="pageChanged"
|
||||
@page-limit-changed="pageLimitChanged"
|
||||
@sort-changed="sortChanged"
|
||||
>
|
||||
</jahat-pagination>
|
||||
|
||||
<jahat-modal
|
||||
@close-modal="closeModal"
|
||||
:showHeaderCloseButton="true"
|
||||
v-if="showModal"
|
||||
title="ایجاد مسئله"
|
||||
>
|
||||
<problem-modal
|
||||
v-if="showIssueModal"
|
||||
:data="entity"
|
||||
@close-modal="closeModal"
|
||||
@problem-added="closeModal"
|
||||
>
|
||||
</problem-modal>
|
||||
|
||||
<subject-form
|
||||
v-if="showSubjectModal"
|
||||
@update-list="closeModal"
|
||||
@delete-item="updateListSpecial"
|
||||
projectTagsName="jahat"
|
||||
></subject-form>
|
||||
</jahat-modal>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<ChartContent
|
||||
:class="{ 'chart-and-list-mode': topRepeatInListMode }"
|
||||
class="ChartContent"
|
||||
></ChartContent>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { entityMixin } from "~/jahat/mixins/entityMixin";
|
||||
import { commonMixin } from "~/jahat/mixins/commonMixin";
|
||||
import repoApi from "~/apis/repoApi";
|
||||
// import { propertyModalMixin } from "~/jahat/mixins/propertyModalMixin";
|
||||
|
||||
export default {
|
||||
mixins: [entityMixin, commonMixin],
|
||||
|
||||
mounted() {
|
||||
this.checkPermissions({
|
||||
permission: `${this.$route.name}_list`,
|
||||
_this: this,
|
||||
})
|
||||
.then(() => {
|
||||
this.entity_type =
|
||||
this.$route.meta.entityType === undefined
|
||||
? 1
|
||||
: this.$route.meta.entityType;
|
||||
this.entitiesTitle = this.getEntityTitle(this.entity_type);
|
||||
|
||||
this.getList(this.entity_type);
|
||||
|
||||
this.canView = true;
|
||||
})
|
||||
.catch(() => {
|
||||
this.canView = false;
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler(newRoute, oldRoute) {
|
||||
this.checkPermissions({
|
||||
permission: `${newRoute.name}_list`,
|
||||
_this: this,
|
||||
})
|
||||
.then(() => {
|
||||
this.entity_type =
|
||||
this.$route.meta.entityType === undefined
|
||||
? 1
|
||||
: this.$route.meta.entityType;
|
||||
this.entitiesTitle = this.getEntityTitle(this.entity_type);
|
||||
|
||||
if (oldRoute.name != newRoute.name) {
|
||||
newRoute.query.page = undefined;
|
||||
history.pushState({}, document.title, newRoute.path);
|
||||
// this.$router.replace({ query: {...this.$route.query, page: undefined}})
|
||||
this.resetPagination();
|
||||
}
|
||||
this.fetchingData = false;
|
||||
this.getList(this.entity_type);
|
||||
|
||||
this.canView = true;
|
||||
})
|
||||
.catch(() => {
|
||||
this.canView = false;
|
||||
});
|
||||
},
|
||||
nested: true,
|
||||
// immediate: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
topRepeatInListMode: true,
|
||||
|
||||
subjectFilters: new Map(),
|
||||
creationFilters: new Map(),
|
||||
|
||||
showSubjectModal: false,
|
||||
showIssueModal: false,
|
||||
|
||||
canView: true,
|
||||
|
||||
// modal: "answer-modal",
|
||||
entity_type: 1,
|
||||
entitiesTitle: "مسائل",
|
||||
|
||||
listType: 1,
|
||||
listEntity: [],
|
||||
entity: {},
|
||||
|
||||
modal: undefined,
|
||||
modal_title: null,
|
||||
modal_data: {
|
||||
entity: {},
|
||||
keyName: "",
|
||||
index: -1,
|
||||
},
|
||||
showfilters: 2,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["schemasGetter", "isSidebarCollapsed"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["checkPermissions"]),
|
||||
...mapActions("list", [
|
||||
"SET_SELECTED_PROJECT",
|
||||
"SET_LIST_ID",
|
||||
"SET_LIST",
|
||||
"SET_SELECTED_ITEM",
|
||||
]),
|
||||
//mehdi
|
||||
showfilter() {
|
||||
this.$refs.filterdiv.classList.add("show");
|
||||
this.$refs.filterdiv.classList.remove("hide");
|
||||
document.getElementById("buttonshow").style.display = "none";
|
||||
document.getElementById("btnHide").style.display = "inline-block";
|
||||
// document.getElementById("showDiv").style.display = "inline-block";
|
||||
},
|
||||
hidefilter() {
|
||||
this.$refs.filterdiv.classList.remove("show");
|
||||
this.$refs.filterdiv.classList.add("hide");
|
||||
document.getElementById("buttonshow").style.display = "inline-block";
|
||||
document.getElementById("btnHide").style.display = "none";
|
||||
},
|
||||
|
||||
//mehdi
|
||||
openSubjectModal(entity) {
|
||||
this.showSubjectModal = true;
|
||||
this.entity = entity._source;
|
||||
|
||||
this.SET_SELECTED_ITEM(this.entity);
|
||||
|
||||
this.beforeShowModal();
|
||||
},
|
||||
openIssueModal() {
|
||||
this.showIssueModal = true;
|
||||
this.entity = {
|
||||
title: "",
|
||||
description: "",
|
||||
// weight: 0,
|
||||
};
|
||||
// console.log(this.entity);
|
||||
|
||||
this.beforeShowModal();
|
||||
},
|
||||
deleteEntity(entity) {
|
||||
this.mySwalConfirm({
|
||||
title: "هشدار!!!",
|
||||
html: `از حذف این مورد اطمینان دارید؟ `,
|
||||
icon: "warning",
|
||||
}).then((result) => {
|
||||
setTimeout(() => {
|
||||
this.updateListSpecial(1);
|
||||
}, 1000);
|
||||
if (result.isConfirmed) {
|
||||
let url = repoApi.entity.delete_jahat;
|
||||
url = url.replace("{{entity_id}}", entity._id);
|
||||
|
||||
this.httpService
|
||||
.postRequest(url)
|
||||
.then((res) => {
|
||||
this.getList(this.entity_type);
|
||||
this.mySwalToast({
|
||||
html: res.data.message,
|
||||
icon: "success",
|
||||
});
|
||||
|
||||
// this.getListSpecial(this.entity_type, this.listType);
|
||||
// this.updateListSpecial()
|
||||
})
|
||||
.catch((err) => {
|
||||
// this.mySwalToast({
|
||||
// title: "خطا!!!",
|
||||
// html: err.message,
|
||||
// icon: "error",
|
||||
// });
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
editEntity(entity) {
|
||||
this.showIssueModal = true;
|
||||
this.entity = entity._source;
|
||||
this.beforeShowModal();
|
||||
},
|
||||
openModal(modal, property = null, index = -1) {
|
||||
this.modal = modal;
|
||||
|
||||
// this.modal_data.entity = this.entity;
|
||||
// this.modal_data.index = index;
|
||||
// this.modal_data.keyName = property;
|
||||
// this.modal_title = ev.target?.title ?? 'بدون عنوان';
|
||||
|
||||
this.beforeShowModal();
|
||||
},
|
||||
|
||||
beforeShowModal() {
|
||||
this.showModal = true;
|
||||
|
||||
setTimeout(() => {
|
||||
$("#jahat-modal").modal(
|
||||
{ backdrop: "static", keyboard: false },
|
||||
"show"
|
||||
);
|
||||
}, 500);
|
||||
},
|
||||
closeModal() {
|
||||
$("#jahat-modal").modal("hide");
|
||||
|
||||
setTimeout(() => {
|
||||
this.showModal = false;
|
||||
this.showSubjectModal = false;
|
||||
this.showIssueModal = false;
|
||||
this.updateListSpecial(1);
|
||||
}, 500);
|
||||
},
|
||||
updateListAfterFilterAdded(filter, filterObject = "subjectFilters") {
|
||||
if (!this[filterObject].has(filter.id)) {
|
||||
this[filterObject].set(filter.id, filter);
|
||||
this.getList(this.entity_type);
|
||||
}
|
||||
this.updateListSpecial();
|
||||
},
|
||||
updateListAfterFilterRemoved(filter, filterObject = "subjectFilters") {
|
||||
if (this[filterObject].has(filter.id)) {
|
||||
this[filterObject].delete(filter.id);
|
||||
this.getList(this.entity_type);
|
||||
}
|
||||
},
|
||||
|
||||
updateListSpecial(listType = 0) {
|
||||
this.listType = listType;
|
||||
if (listType == 0) this.getList(this.entity_type);
|
||||
else this.getListSpecial(this.entity_type, listType);
|
||||
},
|
||||
|
||||
// addToList(input) {
|
||||
// let e = {};
|
||||
// e._source = { ...input.item };
|
||||
// this.listEntity.unshift(e);
|
||||
// this.paginationInfo.total += 1;
|
||||
// },
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.showBtn {
|
||||
display: none;
|
||||
}
|
||||
.btn-hide {
|
||||
display: none;
|
||||
}
|
||||
.jahat__sidebar {
|
||||
top: 55px;
|
||||
padding-right: 100px;
|
||||
}
|
||||
|
||||
.btnHide {
|
||||
display: none;
|
||||
}
|
||||
.btnHide svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.jahat__fixed-btn {
|
||||
// top: calc(var(--headerHeight) + 7px);
|
||||
// left: 8em
|
||||
}
|
||||
.button-change {
|
||||
left: 1em;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 6em;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
// margin-top: 0rem;
|
||||
// z-index: 9;
|
||||
// background-color: white;
|
||||
// padding: 2rem;
|
||||
div {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
||||
.buttonshow {
|
||||
position: fixed;
|
||||
color: inherit;
|
||||
right: 5px;
|
||||
top: 65px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
z-index: 999999;
|
||||
}
|
||||
.btnHide {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: 0px;
|
||||
}
|
||||
.btnHide svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.m1 {
|
||||
background-color: red;
|
||||
}
|
||||
.hide {
|
||||
transform: translateX(80%);
|
||||
display: none;
|
||||
}
|
||||
.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
#showDiv {
|
||||
top: 55px;
|
||||
}
|
||||
.titelAnswerText {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 576px) and (max-width: 767.98px) {
|
||||
.buttonshow {
|
||||
position: fixed;
|
||||
color: inherit;
|
||||
right: 5px;
|
||||
top: 65px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
z-index: 999999;
|
||||
}
|
||||
.btnHide {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: 0px;
|
||||
}
|
||||
.btnHide svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.hide {
|
||||
transform: translateX(80%);
|
||||
display: none;
|
||||
}
|
||||
.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
#showDiv {
|
||||
top: 55px;
|
||||
}
|
||||
.titelAnswerText {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.button-change {
|
||||
left: 0em;
|
||||
top: 8em;
|
||||
}
|
||||
.buttonshow {
|
||||
position: fixed;
|
||||
color: inherit;
|
||||
right: 5px;
|
||||
top: 95px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
z-index: 999999;
|
||||
}
|
||||
.button-change {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.btnHide {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.m1 {
|
||||
background-color: red;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
#showDiv {
|
||||
top: 95px;
|
||||
}
|
||||
.titelAnswer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jahat-header__pagination {
|
||||
top: 0px !important;
|
||||
|
||||
position: relative !important ;
|
||||
}
|
||||
.jahat__sidebar {
|
||||
top: 108px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- <style lang="scss">
|
||||
// @media only screen and (max-width: 575.98px) {
|
||||
// .jahat__content-container {
|
||||
// .problem-detail {
|
||||
// .problem-detail__section {
|
||||
// .problem-slider {
|
||||
// .flickity {
|
||||
// .flickity-viewport {
|
||||
// .flickity-slider {
|
||||
|
||||
// // .jahat-system .problem-slider__cell {
|
||||
// // width: 100% !important;
|
||||
// // }
|
||||
// // .jahat-system .problem-files--answer .problem-files__cell {
|
||||
// // width: 100% !important;
|
||||
// // }
|
||||
// // .flickity-slider .problem-files__cell .is-selected {
|
||||
// // width: 100% !important;
|
||||
// // }
|
||||
// .problem-slider__cell{
|
||||
// width: 100%;
|
||||
|
||||
// }
|
||||
// .problem-files__cell {
|
||||
// width: 100% !important;
|
||||
// // height: 170px;
|
||||
// }
|
||||
// .problem-slider__pic {
|
||||
// img {
|
||||
// width: 95%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .problem-section__content{
|
||||
// .problem-files{
|
||||
// .flickity {
|
||||
// .flickity-viewport {
|
||||
// .flickity-slider {
|
||||
|
||||
|
||||
// .problem-slider__cell{
|
||||
// width: 100%;
|
||||
|
||||
// }
|
||||
// .problem-files__cell {
|
||||
// width: 100% !important;
|
||||
// // height: 170px;
|
||||
// }
|
||||
// .problem-slider__pic {
|
||||
// img {
|
||||
// width: 95%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</style> -->
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<template>
|
||||
<div class="main-container flex-grow-1">
|
||||
404
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Error-1",
|
||||
|
||||
computed: {
|
||||
backgroundImage() {
|
||||
return import.meta.env.BASE_URL + `${fileUrl()}error/bg1.jpg`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from "pinia";
|
||||
|
||||
export default {
|
||||
name: "Layout",
|
||||
data() {
|
||||
return {
|
||||
username: "",
|
||||
password: ""
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// ...mapActions("jahat",['GET_PROBLEMS'])
|
||||
},
|
||||
computed: {
|
||||
...mapState(["layoutConfig"]),
|
||||
getFooterDesc() {
|
||||
return this.layoutConfig("footer_desc");
|
||||
},
|
||||
footerDisplay() {
|
||||
return !!this.layoutConfig("footer.display");
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
// this.$store.dispatch(ADD_BODY_CLASSNAME, "page-loading");
|
||||
// HtmlClass.init(this.layoutConfig());
|
||||
},
|
||||
mounted() {
|
||||
// this.GET_PROBLEMS({vm:this});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
class="jahat__header jahat-header"
|
||||
:class="{ expanded: !isSidebarCollapsed }"
|
||||
>
|
||||
<div
|
||||
class="jahat-header__right jahat-header__logo"
|
||||
style="padding-right: 35px"
|
||||
>
|
||||
<router-link :to="{ name: 'issues' }" class="">
|
||||
<img
|
||||
class="d-xl-inline"
|
||||
src="assets/jahat/img/jahat-logo.svg"
|
||||
alt=""
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="jahat-header__center">
|
||||
<NavbarActiveLink
|
||||
class="jahat-header__menu"
|
||||
:items="schemasGetter"
|
||||
:routeTempalte="{
|
||||
firstActive: false,
|
||||
activate: 'route',
|
||||
key: 'routename',
|
||||
template: '/{{key}}',
|
||||
}"
|
||||
@change-link="changeLink"
|
||||
/>
|
||||
<router-link :to="{ name: 'search' }" class="jahat-header__search-icon">
|
||||
<svg class="icon icon-Component-198--1">
|
||||
<use xlink:href="#icon-Component-198--1"></use>
|
||||
</svg>
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="jahat-header__left">
|
||||
<user-avatar-dropdown class="header__user" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavbarActiveLink from "../../../components/LazyNavbarActiveLink.vue";
|
||||
import { mapState } from "pinia";
|
||||
|
||||
export default {
|
||||
name: "TopHeader",
|
||||
computed: {
|
||||
...mapState([
|
||||
"userPermisionGetter",
|
||||
"schemasGetter",
|
||||
"isSidebarCollapsed",
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
canViewMenuItem(permission) {
|
||||
return this.userPermisionGetter?.includes(permission);
|
||||
},
|
||||
changeLink(key) {},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
|
@ -1,766 +0,0 @@
|
|||
<template>
|
||||
<div class="m1 main-page">
|
||||
<div v-if="showMainpag">
|
||||
<div class="home-list p-3 m2" ref="myInput3" id="main">
|
||||
<div class="row mt-1">
|
||||
<Breadcrumbs
|
||||
class="m-start mt-2 Breadcrumbs"
|
||||
style="font-size: 12px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row mt-2">
|
||||
<div
|
||||
class="col-md-12 col-sm-12 d-flex"
|
||||
style="justify-content: space-around"
|
||||
>
|
||||
<button
|
||||
v-if="listGetter && listGetter.length"
|
||||
:class="{ 'text-primary borderBottom': showNavigation }"
|
||||
type="button"
|
||||
class="popUp-tab__clear btn"
|
||||
style="font-size: 12px"
|
||||
@click.prevent="showNavigation = true"
|
||||
>
|
||||
پیمایش
|
||||
</button>
|
||||
<button
|
||||
:class="{ 'text-primary borderBottom': !showNavigation }"
|
||||
type="button"
|
||||
class="popUp-tab__clear btn"
|
||||
@click.prevent="showNavigation = false"
|
||||
style="margin-right: -20px; font-size: 12px"
|
||||
>
|
||||
فهرست
|
||||
</button>
|
||||
<button
|
||||
title="بستن"
|
||||
@click="showPanel()"
|
||||
type="button"
|
||||
class="popUp-tab__clear btn"
|
||||
style="margin-right: -20px"
|
||||
>
|
||||
<span class="tavasi tavasi-Component-21--1"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="row" style="margin-top: 1.25rem !important">
|
||||
<div class="col-md-12">
|
||||
<div v-if="listGetter && listGetter.length">
|
||||
<div v-if="showNavigation">
|
||||
<div class="navigation">
|
||||
<div
|
||||
v-if="listGetter"
|
||||
v-for="(item, key) in listGetter"
|
||||
:key="key"
|
||||
class="item"
|
||||
:class="{ Active: activeItemClass(item) }"
|
||||
>
|
||||
<div
|
||||
class="d-flex position-relative text-10 mt-2 item-navigation"
|
||||
>
|
||||
<a
|
||||
@click.prevent="showtext(item, key)"
|
||||
:href="item.branch"
|
||||
class=""
|
||||
:title="item.branch"
|
||||
style="
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
"
|
||||
>
|
||||
<i class="tavasi tavasi-Component-149--3 ml-1"></i>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
v-for="(item, index, key) in items"
|
||||
:id="item.id"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
>
|
||||
<div
|
||||
class="d-flex position-relative text-10 mt-2"
|
||||
:class="{
|
||||
'is-selected': item.active ?? false,
|
||||
}"
|
||||
>
|
||||
<a
|
||||
:class="{ active: item.active ?? false }"
|
||||
@click.prevent="showParagraphs(item, index, key)"
|
||||
:href="item.title"
|
||||
class="title"
|
||||
:title="item.title"
|
||||
style="font-size: 12px; text-decoration: none"
|
||||
>
|
||||
<i class="tavasi tavasi-Component-149--3 ml-1"></i>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="navigation mt-3" style="max-height: 230px">
|
||||
<div
|
||||
class="text-truncate"
|
||||
style="max-width: 200px; font-size: 12px"
|
||||
v-html="textlists"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="navigation mt-3" style="max-height: 230px">
|
||||
<div
|
||||
class="text-truncate"
|
||||
style="max-width: 200px; font-size: 12px"
|
||||
v-html="textlists"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div v-else>
|
||||
<button @click="showpag=true">
|
||||
<span class="tavasi tavasi-menu"></span>
|
||||
</button>
|
||||
</div> -->
|
||||
<div v-else>
|
||||
<div class="button-show">
|
||||
<div class="button-main">
|
||||
<button @click="showfilter()">
|
||||
<span class="tavasi tavasi-Component-158--5"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import apis from "~/apis/listApi";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
listPanelUrl: {
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
emits: ["show-paragraph"],
|
||||
mounted() {
|
||||
// this.getListItem();
|
||||
this.listMindex();
|
||||
this.list();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: this.$route.params.id,
|
||||
|
||||
searchText: this.$route.params.searchtext,
|
||||
statuspag: 1,
|
||||
showpag: true,
|
||||
showMainpag: true,
|
||||
showNavigation: true,
|
||||
prevActiveIndex: 0,
|
||||
loading: false,
|
||||
fetchingData: false,
|
||||
items: [],
|
||||
lists: "",
|
||||
textlists: "",
|
||||
// pagination: {
|
||||
// pages: 0,
|
||||
// total: 0,
|
||||
// page: 1,
|
||||
// offset: 0, // page * per_page
|
||||
// limit: 50, //per_page
|
||||
// },
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["isSidebarCollapsed"]),
|
||||
...mapState("list", [
|
||||
"selectedProjectGetter",
|
||||
"listIdGetter",
|
||||
"selectedItemGetter",
|
||||
"listGetter",
|
||||
]),
|
||||
},
|
||||
watch: {
|
||||
selectedItemGetter(newVal) {
|
||||
this.listMindex();
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(["sidebarCollapsedSetter"]),
|
||||
...mapActions("list", [
|
||||
"SET_IS_RETURN_FROM_ITEM_SHOW_PAGE",
|
||||
"SET_SELECTED_ITEM",
|
||||
"SET_LIST",
|
||||
]),
|
||||
activeItemClass(item) {
|
||||
if (item.id_store || item._id)
|
||||
return item.id_store == this.id || item._id == this.id;
|
||||
},
|
||||
//newMehdi
|
||||
list() {
|
||||
const storedList = localStorage.getItem("myList");
|
||||
if (storedList) {
|
||||
const myList = JSON.parse(storedList);
|
||||
this.SET_LIST(myList);
|
||||
} else {
|
||||
console.log("No list found in localStorage.");
|
||||
}
|
||||
},
|
||||
showtext(item, key) {
|
||||
// let items = this.listGetter[key].mindex;
|
||||
// let cloneItem = structuredClone(item);
|
||||
// cloneItem = { ...item,mindex:items};
|
||||
|
||||
// this.SET_SELECTED_ITEM(cloneItem);
|
||||
|
||||
this.SET_SELECTED_ITEM(item);
|
||||
this.appendclass();
|
||||
},
|
||||
appendclass() {
|
||||
const listItems = document.querySelectorAll(".item");
|
||||
|
||||
listItems.forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
// حذف کلاس "active" از همه المان‌های لیست
|
||||
listItems.forEach(function (item) {
|
||||
item.classList.remove("Active");
|
||||
});
|
||||
|
||||
// اضافه کردن کلاس "active" به المانی که کاربر بر روی آن کلیک کرده است
|
||||
this.classList.add("Active");
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
//newMehdi
|
||||
|
||||
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;
|
||||
},
|
||||
|
||||
// mehdi
|
||||
|
||||
showPanel() {
|
||||
// this.$emit("hide-panel");
|
||||
this.$emit("statusPagTest1", (this.statuspag = 2));
|
||||
this.showMainpag = false;
|
||||
|
||||
// this.showpag= false;
|
||||
},
|
||||
showfilter() {
|
||||
this.$emit("statusPagTest1", (this.statuspag = 1));
|
||||
// this.$refs.myInput3.classList.remove("d-md-none");
|
||||
// document.getElementById("main").classList.toggle("d-main-none");
|
||||
// document.getElementById("main").style.display = "inline-block";
|
||||
this.showMainpag = true;
|
||||
},
|
||||
listMindex(key) {
|
||||
if (this.selectedItemGetter !== undefined) {
|
||||
if (window.location.href.includes("search")) {
|
||||
var list = this.getHighlight(this.selectedItemGetter.mindex).split(
|
||||
"\n"
|
||||
);
|
||||
var tt = "";
|
||||
list.forEach((list) => {
|
||||
tt = tt + "<p>" + list + "</p>";
|
||||
});
|
||||
this.textlists = tt;
|
||||
} else {
|
||||
var list = this.selectedItemGetter.mindex.split("\n");
|
||||
var tt = "";
|
||||
list.forEach((list) => {
|
||||
tt = tt + "<p>" + list + "</p>";
|
||||
});
|
||||
this.textlists = tt;
|
||||
}
|
||||
}
|
||||
},
|
||||
// showfilter() {
|
||||
// this.$ref.myInput.classList.remove("hide");
|
||||
|
||||
// this.showpag1=true
|
||||
// },
|
||||
// hidefilter() {
|
||||
// this.$ref.myInput.classList.add("hide");
|
||||
|
||||
// this.showpag1=false
|
||||
// },
|
||||
|
||||
// mehdi
|
||||
showParagraphs(item, index) {
|
||||
this.$emit("show-paragraph", item);
|
||||
|
||||
this.$set(this.items[this.prevActiveIndex], "active", false);
|
||||
this.$set(this.items[index], "active", true);
|
||||
|
||||
this.prevActiveIndex = index;
|
||||
},
|
||||
showParagraphs1(item, key) {
|
||||
this.$emit("show-paragraph1", item);
|
||||
},
|
||||
|
||||
// getListItem() {
|
||||
// if (this.fetchingData) return;
|
||||
// this.fetchingData = true;
|
||||
|
||||
// const payload = {
|
||||
// projectid: this.selectedProjectGetter?.id,
|
||||
// item_state: this.selectedProjectGetter?.item_state,
|
||||
// listid: this.listIdGetter,
|
||||
// subjectid: this.listIdGetter,
|
||||
// bychilds: 0,
|
||||
|
||||
// ...this.pagination,
|
||||
// // offset: offset,
|
||||
// // limit: this.pagination.limit,
|
||||
// };
|
||||
|
||||
// let url = apis.listItem.list;
|
||||
|
||||
// if (this.$route.params.prevPage == "subjects")
|
||||
// url = apis.subjectRelation.list;
|
||||
|
||||
// ApiService.formData(url, payload)
|
||||
// .then((res) => {
|
||||
// this.items = res.data.data;
|
||||
// this.items.forEach((element, index) => {
|
||||
// if (element.id == this.selectedItemGetter.id) {
|
||||
// element["active"] = true;
|
||||
// this.prevActiveIndex = index;
|
||||
// }
|
||||
// });
|
||||
|
||||
// this.pagination = { ...this.pagination, ...res.data.pagination };
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// this.mySwalToast({
|
||||
// title: err.response.data.message,
|
||||
// html: "",
|
||||
// text: "",
|
||||
// icon: "error",
|
||||
// });
|
||||
// })
|
||||
// .finally(() => {
|
||||
// this.fetchingData = false;
|
||||
// });
|
||||
// },
|
||||
goToListPage() {
|
||||
this.SET_IS_RETURN_FROM_ITEM_SHOW_PAGE(this.listGetter.parent);
|
||||
|
||||
const routeName = this.$route.params.prevPage;
|
||||
|
||||
this.$router.push({
|
||||
name: routeName,
|
||||
});
|
||||
},
|
||||
loadMore($event) {
|
||||
// const listElm = document.querySelector("#last-search");
|
||||
const listElm = $event.target;
|
||||
|
||||
const vm = this;
|
||||
if (vm.busy) return;
|
||||
|
||||
if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
|
||||
this.busy = true;
|
||||
vm.pagination.offset = vm.pagination.offset + vm.pagination.limit;
|
||||
|
||||
if (vm.pagination.total > vm.pagination.offset) {
|
||||
setTimeout(() => {
|
||||
vm.getListOnScroll();
|
||||
}, 300);
|
||||
} else {
|
||||
vm.mySwalToast({
|
||||
title: "کاربر محترم",
|
||||
|
||||
html: "دیگر رکوردی جهت بارگزاری وجود ندارد.",
|
||||
icon: "info",
|
||||
position: "bottom-start",
|
||||
});
|
||||
vm.busy = false;
|
||||
}
|
||||
} else vm.busy = false;
|
||||
},
|
||||
getListOnScroll() {
|
||||
if (this.fetchingData) return;
|
||||
this.fetchingData = true;
|
||||
|
||||
const payload = {
|
||||
projectid: this.selectedProjectGetter?.id,
|
||||
item_state: this.selectedProjectGetter?.item_state,
|
||||
listid: this.listIdGetter,
|
||||
subjectid: this.listIdGetter,
|
||||
bychilds: 0,
|
||||
|
||||
...this.pagination,
|
||||
};
|
||||
|
||||
let url = apis.listItem.list;
|
||||
|
||||
if (this.$route.params.prevPage == "subjects")
|
||||
url = apis.subjectRelation.list;
|
||||
|
||||
ApiService.formData(url, payload)
|
||||
.then((res) => {
|
||||
this.items = [...this.items, ...res.data.data];
|
||||
|
||||
this.pagination = { ...this.pagination, ...res.data.pagination };
|
||||
})
|
||||
.finally(() => {
|
||||
this.busy = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.open-sub-folder {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bar-content {
|
||||
position: static;
|
||||
flex: 1 1 100%;
|
||||
max-width: 250px;
|
||||
width: auto;
|
||||
height: 180px;
|
||||
|
||||
&.show-list-panel {
|
||||
right: 0px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.home-list__content {
|
||||
/*max-height: calc(100vh - 12em);*/
|
||||
height: calc(100vh - 8.5em);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
padding-left: 0.3em;
|
||||
|
||||
&.loading {
|
||||
//background-image: url('./img/item-loading.svg');
|
||||
background-repeat: repeat-y;
|
||||
background-position: top right;
|
||||
background-size: 12em;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
clear: both;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 0.5em;
|
||||
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
animation-name: example;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggler {
|
||||
right: 2.6em;
|
||||
|
||||
&.expanded {
|
||||
right: 11.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-list {
|
||||
display: flex;
|
||||
align-items: ceter;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
.meta-list-item {
|
||||
}
|
||||
}
|
||||
|
||||
//mehdi
|
||||
.close {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.m2 {
|
||||
// background-color: red;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
height: 35em;
|
||||
border-left: solid #f1f1f1 1px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
.borderBottom {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
border-bottom: solid #00b6e3 2px;
|
||||
position: absolute;
|
||||
top: 31px !important;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
margin: 0px;
|
||||
}
|
||||
.navigation {
|
||||
overflow-y: scroll;
|
||||
width: 200px;
|
||||
height: 70vh;
|
||||
|
||||
max-width: 300px;
|
||||
.item {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
|
||||
.item-navigation a:hover {
|
||||
color: #00b6e3 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lists {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.borderBottom::before {
|
||||
content: "";
|
||||
border-bottom: solid #00b6e3 2px;
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
.ctive {
|
||||
position: relative;
|
||||
background-color: #d8f8fd;
|
||||
text-decoration: none;
|
||||
}
|
||||
.Active {
|
||||
//text-decoration: none;
|
||||
color: #00b6e3 !important;
|
||||
.item-navigation a {
|
||||
color: #00b6e3 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.Breadcrumbs {
|
||||
//width: 230px;
|
||||
margin: 2px auto;
|
||||
position: relative;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.btnHide svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.button-main {
|
||||
position: relative;
|
||||
|
||||
& button {
|
||||
border: 0px;
|
||||
background-color: #f8f8f8;
|
||||
text-align: center;
|
||||
& span {
|
||||
color: #333238;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.menu-bar-content {
|
||||
max-width: 220px !important;
|
||||
}
|
||||
.d-main-none {
|
||||
display: none;
|
||||
}
|
||||
.button-main {
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
||||
.Breadcrumbs {
|
||||
position: relative !important;
|
||||
top: 0px !important;
|
||||
}
|
||||
.menu-bar-content {
|
||||
max-width: 220px !important;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
.navigation {
|
||||
width: 200px !important;
|
||||
& div {
|
||||
width: 190px !important;
|
||||
}
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
.d-main-none {
|
||||
display: none;
|
||||
}
|
||||
.button-show {
|
||||
}
|
||||
.button-main {
|
||||
top: 20px;
|
||||
right: 53px;
|
||||
}
|
||||
.main-page {
|
||||
position: fixed;
|
||||
right: 0rem;
|
||||
background-color: #fff;
|
||||
z-index: 9;
|
||||
height: 39rem;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 576px) and (max-width: 766.98px) {
|
||||
.Breadcrumbs {
|
||||
position: relative !important;
|
||||
top: 0px !important;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
width: 200px !important;
|
||||
& div {
|
||||
width: 190px !important;
|
||||
}
|
||||
}
|
||||
.menu-bar-content {
|
||||
max-width: 220px !important;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px !important;
|
||||
background-color: #fff;
|
||||
z-index: 999999;
|
||||
}
|
||||
.button-main {
|
||||
display: none;
|
||||
}
|
||||
.main-page {
|
||||
position: fixed;
|
||||
right: 0rem;
|
||||
background-color: #fff;
|
||||
z-index: 9;
|
||||
height: 39rem;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
.Breadcrumbs {
|
||||
position: relative !important;
|
||||
top: 0px !important;
|
||||
}
|
||||
|
||||
.menu-bar-content {
|
||||
max-width: 220px !important;
|
||||
position: relative;
|
||||
top: 0px;
|
||||
right: 0px !important;
|
||||
background-color: #fff;
|
||||
}
|
||||
.navigation {
|
||||
width: 200px !important;
|
||||
& div {
|
||||
width: 190px !important;
|
||||
}
|
||||
}
|
||||
.menu-bar-content {
|
||||
max-width: 220px !important;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px !important;
|
||||
background-color: #fff;
|
||||
z-index: 9999999;
|
||||
}
|
||||
.button-main {
|
||||
display: none;
|
||||
}
|
||||
.main-page {
|
||||
position: fixed;
|
||||
right: 0rem;
|
||||
background-color: #fff;
|
||||
z-index: 9;
|
||||
|
||||
height: 39rem;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
//mehdi
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,293 +0,0 @@
|
|||
<template>
|
||||
<div class="menu-bar__content menu-bar-content home-list p-3">
|
||||
<!-- <button @click="toggleSidebarMenu()" type="button" class="btn sidebar-toggler"
|
||||
:class="{'expanded' : isSidebarCollapsed}">
|
||||
<img src="assets/common/img/arrow-bar-left.svg" class="img-fluid" alt="">
|
||||
</button> -->
|
||||
|
||||
<Breadcrumbs class="m-start mt-2" />
|
||||
|
||||
<div
|
||||
class="home-list__content scroll-needed mt-4"
|
||||
:class="{ loading: loading }"
|
||||
>
|
||||
<div class="last-search h-100">
|
||||
<div class="last-search-content h-100" @scroll="loadMore">
|
||||
<div v-if="items && items.length">
|
||||
<div class="meta-list mb-3 prev-level" style="background:#F6F6F6">
|
||||
<a
|
||||
@click.prevent="goToListPage()"
|
||||
:href="listGetter.title"
|
||||
class="meta-list-item text__14"
|
||||
:title="listGetter.title"
|
||||
>
|
||||
{{ listGetter.title }}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index, key) in items"
|
||||
:id="item.id"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
>
|
||||
<div
|
||||
class="d-flex position-relative"
|
||||
:class="{
|
||||
'is-selected': item.active ?? false,
|
||||
}"
|
||||
>
|
||||
<a
|
||||
:class="{ active: item.active ?? false }"
|
||||
@click.prevent="showParagraphs(item, index, key)"
|
||||
:href="item.title"
|
||||
class="title"
|
||||
:title="item.title"
|
||||
>
|
||||
<i class="tavasi tavasi-Component-149--3 ml-1"></i>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<no-data v-else />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import apis from "~/apis/listApi";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
listPanelUrl: {
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
emits: ["show-paragraph"],
|
||||
mounted() {
|
||||
this.getListItem();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
prevActiveIndex: 0,
|
||||
loading: false,
|
||||
fetchingData: false,
|
||||
items: [],
|
||||
pagination: {
|
||||
pages: 0,
|
||||
total: 0,
|
||||
page: 1,
|
||||
offset: 0, // page * per_page
|
||||
limit: 50, //per_page
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["isSidebarCollapsed"]),
|
||||
...mapState("list", [
|
||||
"selectedProjectGetter",
|
||||
"listIdGetter",
|
||||
"selectedItemGetter",
|
||||
"listGetter",
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions("list", ["SET_IS_RETURN_FROM_ITEM_SHOW_PAGE"]),
|
||||
showParagraphs(item, index) {
|
||||
this.$emit("show-paragraph", item);
|
||||
|
||||
this.$set(this.items[this.prevActiveIndex], "active", false);
|
||||
this.$set(this.items[index], "active", true);
|
||||
|
||||
this.prevActiveIndex = index;
|
||||
},
|
||||
|
||||
getListItem() {
|
||||
if (this.fetchingData) return;
|
||||
this.fetchingData = true;
|
||||
|
||||
const payload = {
|
||||
projectid: this.selectedProjectGetter?.id,
|
||||
item_state: this.selectedProjectGetter?.item_state,
|
||||
listid: this.listIdGetter,
|
||||
subjectid: this.listIdGetter,
|
||||
bychilds: 0,
|
||||
|
||||
...this.pagination,
|
||||
// offset: offset,
|
||||
// limit: this.pagination.limit,
|
||||
};
|
||||
|
||||
let url = apis.listItem.list;
|
||||
|
||||
if (this.$route.params.prevPage == "subjects")
|
||||
url = apis.subjectRelation.list;
|
||||
|
||||
ApiService.formData(url, payload)
|
||||
.then((res) => {
|
||||
this.items = res.data.data;
|
||||
|
||||
this.items.forEach((element, index) => {
|
||||
if (element.id == this.selectedItemGetter.id) {
|
||||
element["active"] = true;
|
||||
this.prevActiveIndex = index;
|
||||
}
|
||||
});
|
||||
|
||||
this.pagination = {...this.pagination,...res.data.pagination};
|
||||
|
||||
})
|
||||
.catch((err) => {
|
||||
this.mySwalToast({
|
||||
title: err.response.data.message,
|
||||
html: "",
|
||||
text: "",
|
||||
icon: "error",
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
this.fetchingData = false;
|
||||
});
|
||||
},
|
||||
goToListPage() {
|
||||
this.SET_IS_RETURN_FROM_ITEM_SHOW_PAGE(this.listGetter.parent);
|
||||
|
||||
const routeName = this.$route.params.prevPage;
|
||||
|
||||
this.$router.push({
|
||||
name: routeName,
|
||||
});
|
||||
},
|
||||
loadMore($event) {
|
||||
// const listElm = document.querySelector("#last-search");
|
||||
const listElm = $event.target;
|
||||
|
||||
const vm = this;
|
||||
if (vm.busy) return;
|
||||
|
||||
if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
|
||||
this.busy = true;
|
||||
vm.pagination.offset = vm.pagination.offset + vm.pagination.limit;
|
||||
|
||||
if (vm.pagination.total > vm.pagination.offset) {
|
||||
setTimeout(() => {
|
||||
vm.getListOnScroll();
|
||||
}, 300);
|
||||
} else {
|
||||
vm.mySwalToast({
|
||||
title: "کاربر محترم",
|
||||
|
||||
html: "دیگر رکوردی جهت بارگزاری وجود ندارد.",
|
||||
icon: "info",
|
||||
position: "bottom-start",
|
||||
});
|
||||
vm.busy = false;
|
||||
}
|
||||
} else vm.busy = false;
|
||||
},
|
||||
getListOnScroll() {
|
||||
if (this.fetchingData) return;
|
||||
this.fetchingData = true;
|
||||
|
||||
const payload = {
|
||||
projectid: this.selectedProjectGetter?.id,
|
||||
item_state: this.selectedProjectGetter?.item_state,
|
||||
listid: this.listIdGetter,
|
||||
subjectid: this.listIdGetter,
|
||||
bychilds: 0,
|
||||
|
||||
...this.pagination,
|
||||
};
|
||||
|
||||
let url = apis.listItem.list;
|
||||
|
||||
if (this.$route.params.prevPage == "subjects")
|
||||
url = apis.subjectRelation.list;
|
||||
|
||||
ApiService.formData(url, payload)
|
||||
.then((res) => {
|
||||
this.items = [...this.items, ...res.data.data];
|
||||
|
||||
this.pagination = {...this.pagination,...res.data.pagination};
|
||||
|
||||
})
|
||||
.finally(() => {
|
||||
this.busy = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.open-sub-folder {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bar__content {
|
||||
position: static;
|
||||
flex: 1 1 100%;
|
||||
max-width: 305px;
|
||||
width: auto;
|
||||
min-width: 305px;
|
||||
}
|
||||
|
||||
.home-list__content {
|
||||
/*max-height: calc(100vh - 12em);*/
|
||||
height: calc(100vh - 8.5em);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
padding-left: 0.3em;
|
||||
|
||||
&.loading {
|
||||
//background-image: url('./img/item-loading.svg');
|
||||
background-repeat: repeat-y;
|
||||
background-position: top right;
|
||||
background-size: 12em;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
clear: both;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 0.5em;
|
||||
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
animation-name: example;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggler {
|
||||
right: 2.6em;
|
||||
|
||||
&.expanded {
|
||||
right: 11.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-list {
|
||||
display: flex;
|
||||
align-items: ceter;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
.meta-list-item {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,580 +0,0 @@
|
|||
<template>
|
||||
<div class="menu-bar__content menu-bar-content home-list p-3">
|
||||
<!-- <button @click="toggleSidebarMenu()" type="button" class="btn sidebar-toggler"
|
||||
:class="{'expanded' : isSidebarCollapsed}">
|
||||
<img src="assets/common/img/arrow-bar-left.svg" class="img-fluid" alt="">
|
||||
</button> -->
|
||||
|
||||
<Breadcrumbs class="m-start mt-2" />
|
||||
|
||||
<div class="home-list__header pt-3 pb-0">
|
||||
<div class="flex-grow-1">
|
||||
<form
|
||||
class="search-form rounded-3 mx-0 w-100"
|
||||
role="search"
|
||||
@submit.prevent="sendQuery"
|
||||
>
|
||||
<div class="form-group">
|
||||
<div class="d-flex">
|
||||
<multiselect
|
||||
:allow-empty="false"
|
||||
:searchable="true"
|
||||
:close-on-select="true"
|
||||
:show-labels="false"
|
||||
label="title"
|
||||
track-by="id"
|
||||
placeholder="انتخاب پروژه"
|
||||
:value="selectedProjectGetter"
|
||||
:options="projects"
|
||||
@select="selectProject"
|
||||
:hide-selected="false"
|
||||
:limit-text="
|
||||
(count) => {
|
||||
return `و ${count} پروژه دیگر`;
|
||||
}
|
||||
"
|
||||
:max-height="200"
|
||||
>
|
||||
</multiselect>
|
||||
|
||||
<!-- <select
|
||||
v-model="projectId"
|
||||
class="form-control combo"
|
||||
@change="getList()"
|
||||
>
|
||||
<option
|
||||
v-for="project in projects"
|
||||
:key="project.id"
|
||||
:value="project.id"
|
||||
>
|
||||
{{ project.title }}
|
||||
</option>
|
||||
</select> -->
|
||||
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="btn pl-0"
|
||||
type="button"
|
||||
id="dropdownMenu2"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="tavasi tavasi-Component-281--1"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu " aria-labelledby="dropdownMenu2">
|
||||
<button
|
||||
class="dropdown-item text-right d-flex align-item-center"
|
||||
@click.prevent="showReplaceInput = !showReplaceInput"
|
||||
type="button"
|
||||
>
|
||||
<i class="tavasi tavasi-Component-78--9---2 mt-1"
|
||||
><span class="path1"></span><span class="path2"></span
|
||||
></i>
|
||||
<div class="mx-1">جستجو</div>
|
||||
</button>
|
||||
<button
|
||||
v-can="'list_new'"
|
||||
data-toggle="modal"
|
||||
data-target="#list-modal"
|
||||
@click.prevent="openModal()"
|
||||
class="dropdown-item text-right d-flex align-item-center "
|
||||
type="button"
|
||||
>
|
||||
<span class="tavasi tavasi-add-folder ml-1"
|
||||
><span class="path1"></span><span class="path2"></span
|
||||
><span class="path3"></span><span class="path4"></span
|
||||
><span class="path5"></span><span class="path6"></span
|
||||
><span class="path7"></span><span class="path8"></span
|
||||
></span>
|
||||
<!-- <span class="tavasi tavasi-Component-133--1 mt-1"></span> -->
|
||||
<!-- <span class="tavasi tavasi-add"></span> -->
|
||||
<div class="mx-1">پوشه جدید</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showReplaceInput" class="form-group">
|
||||
<div class="input-group">
|
||||
<input
|
||||
v-model="searchForm.query"
|
||||
type="search"
|
||||
required
|
||||
class="form-control"
|
||||
id="search-query"
|
||||
placeholder="جستجو..."
|
||||
name="search-query"
|
||||
aria-label="جستجو در اسناد، عناوین و واژگان"
|
||||
aria-describedby="basic-addon1"
|
||||
size="50"
|
||||
@keyup="sendQuery()"
|
||||
@keydown="onKeyDown()"
|
||||
/>
|
||||
<div class="input-group-append">
|
||||
<button
|
||||
@click="showReplaceInput = !showReplaceInput"
|
||||
type="button"
|
||||
class="input-group-text show-reset-btn"
|
||||
id="basic-addon1"
|
||||
>
|
||||
<i class="tavasi tavasi-Component-294--1"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-list__content scroll-needed" :class="{ loading: loading }">
|
||||
<div class="last-search h-100" id="last-search">
|
||||
<div class="last-search-content h-100" @scroll="loadMore">
|
||||
<div v-if="list && list.length">
|
||||
<div
|
||||
class="meta-list mb-3 prev-level"
|
||||
style="background:#F6F6F6"
|
||||
v-if="meta.length"
|
||||
>
|
||||
<div v-for="(metaItem, index) in meta">
|
||||
<a
|
||||
:key="'meta' + metaItem.id"
|
||||
@click.prevent="getParentList(metaItem.parent_id)"
|
||||
:href="metaItem.title"
|
||||
class="meta-list-item text__14"
|
||||
:title="metaItem.title"
|
||||
>
|
||||
{{ metaItem.title }}
|
||||
</a>
|
||||
<span
|
||||
:key="'id' + metaItem.id"
|
||||
style="font-size: 1.4rem; color:blue"
|
||||
v-if="index < meta.length - 1"
|
||||
class="tavasi tavasi-Component-22--1"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<draggable
|
||||
handle=".my-handle"
|
||||
group="people"
|
||||
@add="onDrop"
|
||||
@choose="handleChoose"
|
||||
@unchoose="handleUnChoose"
|
||||
@change="handleChange"
|
||||
:list="list"
|
||||
>
|
||||
<div
|
||||
:id="item.id"
|
||||
v-for="(item, index) in list"
|
||||
:key="'id' + item.id"
|
||||
class="item"
|
||||
>
|
||||
<div
|
||||
class="d-flex position-relative"
|
||||
:class="{ 'is-selected': item?.isSelected }"
|
||||
>
|
||||
<rename-form
|
||||
v-if="
|
||||
item?.editMode && item?.parentComponent === 'listPanel'
|
||||
"
|
||||
:title="item.title"
|
||||
:loading="loading"
|
||||
@closeForm="item.editMode = false"
|
||||
@saveChanges="editItem($event, item, list)"
|
||||
></rename-form>
|
||||
<div v-else>
|
||||
<a
|
||||
v-if="item.children"
|
||||
@click.prevent="getListChildren(item, index)"
|
||||
:href="item.title"
|
||||
class="open-sub-folder"
|
||||
:title="item.title"
|
||||
>
|
||||
<!-- <span
|
||||
v-if="item.children?.length"
|
||||
class="tavasi tavasi-remove"
|
||||
></span> -->
|
||||
<span
|
||||
v-if="item.children?.length"
|
||||
class="tavasi tavasi-Component-154--22 ml-1"
|
||||
></span>
|
||||
<!-- <span v-else class="tavasi tavasi-add"></span> -->
|
||||
<span
|
||||
v-else
|
||||
class="tavasi tavasi-Component-133--1 color-costom ml-1"
|
||||
></span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
:class="{ active: item?.active ?? false }"
|
||||
@click.prevent="getItems(item, index)"
|
||||
:href="item.title"
|
||||
class="title"
|
||||
:title="item.title"
|
||||
>
|
||||
<span class="my-handle">
|
||||
<!-- <i v-if="item.children === 0" class="tavasi tavasi-Component-149--3"></i>-->
|
||||
<i
|
||||
v-if="!item.children || item.children.length === 0"
|
||||
class="tavasi tavasi-Component-149--3 ml-1"
|
||||
></i>
|
||||
|
||||
<!-- <i v-else class="tavasi tavasi-Component-360--58">-->
|
||||
<!-- <span class="path1"></span>-->
|
||||
<!-- <span class="path2"></span>-->
|
||||
<!-- </i>-->
|
||||
</span>
|
||||
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<div v-if="!item?.isSelected">
|
||||
<context-menu
|
||||
v-can="'list_folder_edit'"
|
||||
:parentComponent="'listPanel'"
|
||||
:list="list"
|
||||
:clickedItem="item"
|
||||
:contextMenu="contextMenu"
|
||||
@remove-item="removeItem(item, list)"
|
||||
@update-order="updateOrder($event, item, list, index)"
|
||||
@new-sub-folder="
|
||||
openNewSubFolderModal(item, list, index)
|
||||
"
|
||||
>
|
||||
</context-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="Array.isArray(item.children)">
|
||||
<draggable
|
||||
handle=".my-handle"
|
||||
@add="onDrop"
|
||||
group="people"
|
||||
tag="ul"
|
||||
class="children list-unstyled"
|
||||
:list="item.children"
|
||||
:id="item.id"
|
||||
>
|
||||
<li
|
||||
:id="child.id"
|
||||
class="position-relative"
|
||||
v-for="(child, childIndex) in item.children"
|
||||
:key="child.title"
|
||||
>
|
||||
<rename-form
|
||||
v-if="
|
||||
child?.editMode &&
|
||||
child?.parentComponent === 'listPanel'
|
||||
"
|
||||
:title="child.title"
|
||||
:loading="loading"
|
||||
@closeForm="child.editMode = false"
|
||||
@saveChanges="editItem($event, child, item.children)"
|
||||
></rename-form>
|
||||
<div v-else>
|
||||
<a
|
||||
:class="{ active: child?.active ?? false }"
|
||||
@click.prevent="getItems(child, childIndex)"
|
||||
:href="child.title"
|
||||
class="title"
|
||||
:title="child.title"
|
||||
>
|
||||
<span class="my-handle">
|
||||
<i
|
||||
v-if="child.children === 0"
|
||||
class="tavasi tavasi-Component-149--3 ml-1"
|
||||
></i>
|
||||
|
||||
<i v-else>
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
</i>
|
||||
</span>
|
||||
|
||||
{{ child.title }}
|
||||
</a>
|
||||
<div v-if="!child?.isSelected">
|
||||
<context-menu
|
||||
v-can="'list_folder_edit'"
|
||||
:parentComponent="'listPanel'"
|
||||
:list="item.children"
|
||||
:clickedItem="child"
|
||||
:contextMenu="contextMenu"
|
||||
@remove-item="removeItem(child, item.children)"
|
||||
@new-sub-folde="openNewSubFolderModal(child)"
|
||||
@update-order="
|
||||
updateOrder(
|
||||
$event,
|
||||
child,
|
||||
item.children,
|
||||
childIndex
|
||||
)
|
||||
"
|
||||
>
|
||||
</context-menu>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
<no-data v-else />
|
||||
</div>
|
||||
|
||||
<!-- <div class="last-search-footer" v-if="list.length > 0">-->
|
||||
<!-- <button class="btn last-search-more-btn" type="button">بیشتر</button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showModal">
|
||||
<new-list-modal
|
||||
:apiName="currentPageName"
|
||||
:selectedItem="selectedItem"
|
||||
:parentId="parentId"
|
||||
@close-modal="closeModal"
|
||||
@delete-item="updateList"
|
||||
@update-list="updateList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="d-md-none hide-list-panel">
|
||||
<button
|
||||
name="button"
|
||||
type="button"
|
||||
class="toggle-mobile-nav"
|
||||
@click="$emit('hide-panel')"
|
||||
>
|
||||
<svg class="icon icon-chevron-double-right">
|
||||
<use xlink:href="#icon-chevron-double-right"></use>
|
||||
</svg>
|
||||
<span class="collapse-text mr-2">بستن</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listMixin } from "~/list/mixins/listMixin";
|
||||
import { searchMixin } from "~/list/mixins/searchMixin";
|
||||
import { dragDropMoveMixin } from "~/list/mixins/dragDropMoveMixin";
|
||||
|
||||
export default {
|
||||
props: ["items"],
|
||||
mixins: [searchMixin, listMixin, dragDropMoveMixin],
|
||||
emits: ["list-changed", "list-item-changed"],
|
||||
activated() {
|
||||
if (this.cached === false) {
|
||||
this.cached = Date.now();
|
||||
} else {
|
||||
// time diff since cache, in seconds
|
||||
const diff = (Date.now() - this.cached) / 1000;
|
||||
|
||||
// if cache is older than 30 seconds, invalidate
|
||||
if (diff > 1800) {
|
||||
this.cached = false;
|
||||
this.getProjects();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.topheader.modetab = 2;
|
||||
this.$refs.topheader.state = 2;
|
||||
if (this.tq != "") {
|
||||
var item = this.tq;
|
||||
this.checkMultiword(item);
|
||||
this.$refs.topheader.setSearchLine(this.tq);
|
||||
this.$refs.content.setTextSearch(this.tq, this.countInPage);
|
||||
this.getQuery();
|
||||
}
|
||||
},
|
||||
deactivated() {
|
||||
// console.log("deactivated");
|
||||
},
|
||||
|
||||
watch: {
|
||||
isReturnFromItemshowPageGetter(id) {
|
||||
this.getList(id);
|
||||
},
|
||||
// $route: {
|
||||
// handler(route) {
|
||||
// this.storeUserLastState(route.name);
|
||||
// },
|
||||
// nested: true,
|
||||
// immediate: true,
|
||||
// },
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
cached: false,
|
||||
currentPageName: "list",
|
||||
tq: this.q,
|
||||
filterUrl: "",
|
||||
loading: false,
|
||||
showSummary: false,
|
||||
countInPage: 10,
|
||||
currentItem: [],
|
||||
searchType: "",
|
||||
searchCode: "all",
|
||||
ismultword: false,
|
||||
iscode: false,
|
||||
page: 0,
|
||||
|
||||
cloneItems: [],
|
||||
typingTimer: 0,
|
||||
showReplaceInput: false,
|
||||
doneTypingInterval: 1000,
|
||||
searchForm: {
|
||||
query: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
sendQuery() {
|
||||
// todo: show loading.
|
||||
// todo: send query and show result.
|
||||
// todo: hide loading.
|
||||
|
||||
clearTimeout(this.typingTimer);
|
||||
this.typingTimer = setTimeout(() => {
|
||||
// request data from api
|
||||
}, this.doneTypingInterval);
|
||||
},
|
||||
onKeyDown() {
|
||||
clearTimeout(this.typingTimer);
|
||||
},
|
||||
resetForm() {
|
||||
this.searchForm.query = "";
|
||||
this.searchForm.replaceWith = "";
|
||||
this.cloneItems = structuredClone(this.items);
|
||||
},
|
||||
|
||||
searchTyping(type) {
|
||||
this.searchType = type;
|
||||
},
|
||||
searchCoding(code) {
|
||||
this.searchCode = code;
|
||||
},
|
||||
resetOptions() {
|
||||
this.page = 0;
|
||||
this.filterUrl = "";
|
||||
this.$refs.filterlist.resetFilter();
|
||||
},
|
||||
showfilter: function() {
|
||||
this.$refs.filterlist.showfilter();
|
||||
},
|
||||
checkMultiword(item) {
|
||||
this.ismultword = false;
|
||||
if (item == null || item == "") return;
|
||||
var ww = item.split(" ");
|
||||
this.iscode = /^\d+$/.test(item);
|
||||
if (this.iscode == false) this.ismultword = item.split(" ").length > 1;
|
||||
|
||||
this.$refs.topheader.setOptions(this.ismultword, this.iscode);
|
||||
},
|
||||
searchStart: function(item) {
|
||||
if (item != null) {
|
||||
item = item.trim();
|
||||
this.tq = item;
|
||||
|
||||
this.checkMultiword(item);
|
||||
this.$refs.content.setTextSearch(item, this.countInPage);
|
||||
}
|
||||
this.resetOptions();
|
||||
this.getQuery();
|
||||
},
|
||||
changePaging: function(item) {
|
||||
this.page = item;
|
||||
this.getQuery(true);
|
||||
},
|
||||
hideSummary: function() {
|
||||
this.showSummary = false;
|
||||
},
|
||||
changeCurrent: function(item) {
|
||||
if (item == this.currentItem) this.showSummary = !this.showSummary;
|
||||
else this.showSummary = true;
|
||||
this.currentItem = item;
|
||||
this.$refs.summary.setInfo(item);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.open-sub-folder {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bar__content {
|
||||
position: static;
|
||||
flex: 1 1 100%;
|
||||
max-width: 305px;
|
||||
width: auto;
|
||||
min-width: 305px;
|
||||
|
||||
&.show-list-panel {
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.home-list__content {
|
||||
/*max-height: calc(100vh - 12em);*/
|
||||
height: calc(100vh - 8.5em);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
padding-left: 0.3em;
|
||||
|
||||
&.loading {
|
||||
//background-image: url('./img/item-loading.svg');
|
||||
background-repeat: repeat-y;
|
||||
background-position: top right;
|
||||
background-size: 12em;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
clear: both;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 0.5em;
|
||||
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
animation-name: example;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggler {
|
||||
right: 2.6em;
|
||||
|
||||
&.expanded {
|
||||
right: 11.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-list {
|
||||
display: flex;
|
||||
align-items: ceter;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
.meta-list-item {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,613 +0,0 @@
|
|||
<template>
|
||||
<div class="menu-bar__content menu-bar-content home-list p-3">
|
||||
<Breadcrumbs />
|
||||
|
||||
<div class="home-list__header pt-3 pb-0">
|
||||
<div class="flex-grow-1">
|
||||
<form
|
||||
class="search-form mx-0 w-100"
|
||||
role="search"
|
||||
@submit.prevent="sendQuery"
|
||||
>
|
||||
<div class="form-group">
|
||||
<div class="d-flex">
|
||||
<select
|
||||
v-model="listTypeId"
|
||||
class="form-control"
|
||||
@change="getList()"
|
||||
>
|
||||
<option
|
||||
v-for="subject in subjects"
|
||||
:key="subject.id"
|
||||
:value="subject.id"
|
||||
>
|
||||
{{ subject.title }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<div class="context-menu-dropdown">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="btn pl-0"
|
||||
type="button"
|
||||
id="dropdownMenu2"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="tavasi tavasi-Component-281--1"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
||||
<button
|
||||
class="dropdown-item text-right"
|
||||
@click.prevent="showReplaceInput = !showReplaceInput"
|
||||
type="button"
|
||||
>
|
||||
<i class="tavasi tavasi-Component-78--9---2"
|
||||
><span class="path1"></span><span class="path2"></span
|
||||
></i>
|
||||
جستجو
|
||||
</button>
|
||||
<button
|
||||
data-toggle="modal"
|
||||
data-target="#new-item-modal"
|
||||
@click.prevent="openModal()"
|
||||
class="dropdown-item text-right"
|
||||
type="button"
|
||||
>
|
||||
<span class="tavasi tavasi-Component-133--1"></span>
|
||||
<!-- <span class="tavasi tavasi-add"></span> -->
|
||||
پوشه جدید
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showReplaceInput" class="form-group">
|
||||
<div class="input-group">
|
||||
<input
|
||||
v-model="searchForm.query"
|
||||
type="search"
|
||||
required
|
||||
class="form-control"
|
||||
id="search-query"
|
||||
placeholder="جستجو..."
|
||||
name="search-query"
|
||||
aria-label="جستجو در اسناد، عناوین و واژگان"
|
||||
aria-describedby="basic-addon1"
|
||||
size="50"
|
||||
@keyup="sendQuery()"
|
||||
@keydown="onKeyDown()"
|
||||
/>
|
||||
<div class="input-group-append">
|
||||
<button
|
||||
@click="showReplaceInput = !showReplaceInput"
|
||||
type="button"
|
||||
class="input-group-text show-reset-btn"
|
||||
id="basic-addon1"
|
||||
>
|
||||
<i class="tavasi tavasi-Component-294--1"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-list__content scroll-needed" :class="{ loading: loading }">
|
||||
<div class="last-search h-100">
|
||||
<div class="last-search-content h-100">
|
||||
<div v-if="list.length">
|
||||
<div class="item mb-3 prev-level" v-if="meta.length">
|
||||
<!-- <span style="font-size: 1.1rem;" class="tavasi tavasi-Component-71--1 ml-2"></span>-->
|
||||
<div v-for="(metaItem, index) in meta">
|
||||
<a
|
||||
:key="metaItem.id"
|
||||
@click.prevent="getList(metaItem.parent)"
|
||||
:href="metaItem.title"
|
||||
class="title d-flex "
|
||||
:title="metaItem.title"
|
||||
>
|
||||
{{ metaItem.title }}
|
||||
</a>
|
||||
|
||||
<span
|
||||
style="font-size: 1.4rem;"
|
||||
v-if="index < meta.length - 1"
|
||||
class="tavasi tavasi-arrow-down"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="(item, index) in list" :key="item.title" class="item">
|
||||
<draggable
|
||||
:sort="false"
|
||||
:disabled="false"
|
||||
group="people"
|
||||
@add="onDrop($event, item)"
|
||||
>
|
||||
<div
|
||||
class="d-flex position-relative"
|
||||
:class="{ 'is-selected': item?.isSelected }"
|
||||
>
|
||||
<rename-form
|
||||
v-if="
|
||||
item?.editMode && item?.parentComponent === 'subjectPanel'
|
||||
"
|
||||
:title="item.title"
|
||||
:loading="loading"
|
||||
@closeForm="item.editMode = false"
|
||||
@saveChanges="editItem($event, item, list)"
|
||||
></rename-form>
|
||||
|
||||
<div v-else>
|
||||
<a
|
||||
v-if="item.children"
|
||||
@click.prevent="getListChildren(item, index)"
|
||||
:href="item.title"
|
||||
class="title"
|
||||
:title="item.title"
|
||||
>
|
||||
<span
|
||||
v-if="item.children?.length"
|
||||
class="tavasi tavasi-remove"
|
||||
></span>
|
||||
<!-- <span v-else class="tavasi tavasi-add"></span> -->
|
||||
<span
|
||||
v-else
|
||||
class="tavasi tavasi-Component-133--1"
|
||||
></span>
|
||||
</a>
|
||||
<a
|
||||
:class="{ active: item?.active ?? false }"
|
||||
@click.prevent="getItems(item, index)"
|
||||
:href="item.title"
|
||||
class="title"
|
||||
:title="item.title"
|
||||
>
|
||||
<i
|
||||
v-if="!item.children || item.children.length === 0"
|
||||
class="tavasi tavasi-Component-149--3"
|
||||
></i>
|
||||
<!-- <i v-if="item.children === 0" class="tavasi tavasi-Component-149--3"></i>-->
|
||||
<!-- <i v-else class="tavasi tavasi-Component-360--58">-->
|
||||
<!-- <span class="path1"></span>-->
|
||||
<!-- <span class="path2"></span>-->
|
||||
<!-- </i>-->
|
||||
{{ item.title }}
|
||||
</a>
|
||||
|
||||
<div v-if="!item?.isSelected">
|
||||
<context-menu
|
||||
:parentComponent="'subjectPanel'"
|
||||
:list="list"
|
||||
:clickedItem="item"
|
||||
:contextMenu="contextMenu"
|
||||
@remove-item="removeItem(item, list)"
|
||||
>
|
||||
</context-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-if="Array.isArray(item.children)" class="children">
|
||||
<li
|
||||
class="position-relative"
|
||||
v-for="(child, childIndex) in item.children"
|
||||
:key="child.title"
|
||||
>
|
||||
<rename-form
|
||||
v-if="
|
||||
child?.editMode &&
|
||||
child?.parentComponent === 'subjectPanel'
|
||||
"
|
||||
:title="child.title"
|
||||
:loading="loading"
|
||||
@closeForm="child.editMode = false"
|
||||
@saveChanges="editItem($event, child, item.children)"
|
||||
></rename-form>
|
||||
<div v-else>
|
||||
<a
|
||||
@click.prevent="getItems(child, childIndex)"
|
||||
:href="child.title"
|
||||
class="title"
|
||||
:title="child.title"
|
||||
>
|
||||
<i
|
||||
v-if="child.children === 0"
|
||||
class="tavasi tavasi-Component-149--3"
|
||||
></i>
|
||||
|
||||
<i v-else class="tavasi tavasi-Component-360--58">
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
</i>
|
||||
{{ child.title }}
|
||||
</a>
|
||||
<div v-if="!child?.isSelected">
|
||||
<context-menu
|
||||
:parentComponent="'subjectPanel'"
|
||||
:list="item.children"
|
||||
:clickedItem="child"
|
||||
:contextMenu="contextMenu"
|
||||
@remove-item="removeItem(child, item.children)"
|
||||
>
|
||||
</context-menu>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
<no-data v-else />
|
||||
</div>
|
||||
|
||||
<!-- <div class="last-search-footer" v-if="list.length > 0">-->
|
||||
<!-- <button class="btn last-search-more-btn" type="button">بیشتر</button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showModal">
|
||||
<NewListModal
|
||||
:listTypeId="listTypeId"
|
||||
:selectedItem="selectedItem"
|
||||
:parentId="parentId"
|
||||
@close-modal="closeModal"
|
||||
@delete-item="updateList"
|
||||
@update-list="updateList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import apis from "~/apis/listApi";
|
||||
|
||||
export default {
|
||||
props: ["items", "subjectId", "index"],
|
||||
emits: ["list-changed", "list-item-changed"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
contextMenu: [],
|
||||
|
||||
subjects: [
|
||||
{
|
||||
id: 0,
|
||||
title: "موضوعات",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "نمایه",
|
||||
disabled: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "برچسب",
|
||||
disabled: true,
|
||||
},
|
||||
],
|
||||
showModal: false,
|
||||
prevSelectedItemIndex: undefined,
|
||||
prevItem: undefined,
|
||||
|
||||
meta: [],
|
||||
projects: [],
|
||||
list: [],
|
||||
listItem: [],
|
||||
listTypeId: 0,
|
||||
parentId: undefined,
|
||||
selectedItem: {},
|
||||
|
||||
typingTimer: 0,
|
||||
doneTypingInterval: 1000,
|
||||
|
||||
cloneItems: [],
|
||||
loading: false,
|
||||
searchForm: {
|
||||
query: "",
|
||||
},
|
||||
editMode: false,
|
||||
showReplaceInput: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getListItem(subjectId, index) {
|
||||
this.markActive(index);
|
||||
if (this.fetchingData) return;
|
||||
this.fetchingData = true;
|
||||
|
||||
const payload = {
|
||||
// projectid: this.listTypeId,
|
||||
bychilds: 0,
|
||||
projectid: 1,
|
||||
subjectid: this.subjectId,
|
||||
|
||||
...this.pagination,
|
||||
};
|
||||
|
||||
ApiService.formData(apis.subjectRelation.list, payload)
|
||||
.then((res) => {
|
||||
this.listItem = res.data.data;
|
||||
this.listItem.forEach((item, index) => {
|
||||
Object.keys(item).forEach((value, key) => {
|
||||
if (value === "resource") {
|
||||
item[value] = this.getProjectTitle(item[value]);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.pagination = {...this.pagination,...res.data.pagination};
|
||||
|
||||
})
|
||||
|
||||
.finally(() => {
|
||||
this.fetchingData = false;
|
||||
});
|
||||
},
|
||||
|
||||
addItemToList(itemId, listId) {
|
||||
const payload = {
|
||||
itemid: itemId,
|
||||
listid: listId,
|
||||
listtype: this.listTypeId,
|
||||
projectid: 1,
|
||||
};
|
||||
|
||||
ApiService.formData(apis.subject.add, payload).then((res) => {
|
||||
this.mySwalToast({
|
||||
title: "تبریک",
|
||||
html: res.data.message,
|
||||
icon: "success",
|
||||
});
|
||||
});
|
||||
},
|
||||
removeItem(listItem, listArray) {
|
||||
this.mySwalConfirm({
|
||||
title: "هشدار!!!",
|
||||
html: `از حذف <b>${listItem.title}</b> اطمینان دارید؟ `,
|
||||
icon: "warning",
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
const payload = {
|
||||
subjectid: listItem.id,
|
||||
};
|
||||
|
||||
ApiService.formData(apis.subject.delete, payload)
|
||||
.then((res) => {
|
||||
this.mySwalToast({
|
||||
html: res.data.message,
|
||||
icon: "success",
|
||||
});
|
||||
|
||||
const indexOfList = listArray.findIndex(
|
||||
(item) => item.id === listItem.id
|
||||
);
|
||||
listArray.splice(indexOfList, 1);
|
||||
})
|
||||
.catch((err) => {
|
||||
this.mySwalToast({
|
||||
title: "خطا!!!",
|
||||
html: err.message,
|
||||
icon: "error",
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
editItem(newTitle, subject, subjectArray) {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
|
||||
const model = {
|
||||
title: newTitle,
|
||||
subjectid: subject.id,
|
||||
newparent: subject.parent ? subject.parent : 0,
|
||||
};
|
||||
|
||||
ApiService.formData(apis.subject.edit, model)
|
||||
.then((res) => {
|
||||
list.editMode = false;
|
||||
|
||||
const resultIndex = subjectArray.findIndex(
|
||||
(item) => subject.id === item.id
|
||||
);
|
||||
|
||||
if (resultIndex > -1) {
|
||||
this.$set(subjectArray[resultIndex], "title", newTitle);
|
||||
}
|
||||
|
||||
this.mySwalToast({
|
||||
title: "تبریک",
|
||||
|
||||
html: res.data.message,
|
||||
icon: "success",
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
this.mySwalToast({
|
||||
title: "خطا!!!",
|
||||
html: err?.message,
|
||||
icon: "error",
|
||||
});
|
||||
})
|
||||
.finally(() => (this.loading = false));
|
||||
},
|
||||
|
||||
getListChildren(item, index) {
|
||||
if (Array.isArray(item.children)) {
|
||||
item = { ...item, ...{ children: item.children.length } };
|
||||
this.$set(this.list, index, item);
|
||||
} else {
|
||||
const payload = {
|
||||
parent: item.id,
|
||||
sortby: "id",
|
||||
offset: 0,
|
||||
limit: 100,
|
||||
listtype: this.listTypeId,
|
||||
projectid: 1,
|
||||
};
|
||||
|
||||
ApiService.formData(apis.subject.list, payload).then((res) => {
|
||||
item = { ...item, ...{ children: res.data.data } };
|
||||
this.$set(this.list, index, item);
|
||||
});
|
||||
}
|
||||
},
|
||||
getItems(item, index) {
|
||||
if (Array.isArray(item.children)) {
|
||||
this.$emit("set-selected-list", item.children[0]);
|
||||
this.getListItem(item.children[0].id, index);
|
||||
} else if (item.children > 0) {
|
||||
this.parentId = item.id;
|
||||
this.$emit("set-selected-list", item);
|
||||
this.getList(item.id);
|
||||
} else {
|
||||
this.$emit("set-selected-list", item);
|
||||
|
||||
this.getListItem(item.id, index);
|
||||
}
|
||||
},
|
||||
getList(parent = 0) {
|
||||
const payload = {
|
||||
parent: parent,
|
||||
sortby: "id",
|
||||
offset: 0,
|
||||
limit: 100,
|
||||
listtype: this.listTypeId,
|
||||
projectid: 1,
|
||||
};
|
||||
|
||||
ApiService.formData(apis.subject.list, payload).then((res) => {
|
||||
this.list = res.data.data;
|
||||
this.meta = res.data?.meta ?? [];
|
||||
|
||||
this.$emit("list-changed", {
|
||||
subjectId: parent,
|
||||
listTypeId: this.listTypeId,
|
||||
});
|
||||
// if (res.data.meta)
|
||||
// this.meta = res.data.meta.filter((item, index) => index > 0);
|
||||
});
|
||||
},
|
||||
|
||||
updateList() {
|
||||
this.resetPagination();
|
||||
this.closeModal();
|
||||
this.getList(this.parentId);
|
||||
},
|
||||
resetPagination() {
|
||||
this.pagination = {
|
||||
pages: 0,
|
||||
total: 0,
|
||||
page: 1,
|
||||
offset: 0,// page * per_page
|
||||
limit: 50//per_page
|
||||
}
|
||||
},
|
||||
markActive(index) {
|
||||
if (this.prevSelectedItemIndex !== undefined) {
|
||||
this.$set(this.list[this.prevSelectedItemIndex], "active", false);
|
||||
}
|
||||
|
||||
this.prevSelectedItemIndex = index;
|
||||
this.$set(this.list[index], "active", true);
|
||||
},
|
||||
|
||||
sendQuery() {
|
||||
// todo: show loading.
|
||||
// todo: send query and show result.
|
||||
// todo: hide loading.
|
||||
|
||||
clearTimeout(this.typingTimer);
|
||||
this.typingTimer = setTimeout(() => {
|
||||
// request data from api
|
||||
}, this.doneTypingInterval);
|
||||
},
|
||||
onKeyDown() {
|
||||
clearTimeout(this.typingTimer);
|
||||
},
|
||||
resetForm() {
|
||||
this.searchForm.query = "";
|
||||
this.searchForm.replaceWith = "";
|
||||
this.cloneItems = structuredClone(this.items);
|
||||
},
|
||||
|
||||
onDrop(ev, list) {
|
||||
const itemId = ev.item["_underlying_vm_"]["id"];
|
||||
const listId = list.id;
|
||||
|
||||
this.addItemToList(itemId, listId);
|
||||
},
|
||||
closeModal() {
|
||||
$("#new-item-modal").modal("hide");
|
||||
|
||||
setTimeout(() => {
|
||||
this.showModal = false;
|
||||
}, 500);
|
||||
},
|
||||
openModal() {
|
||||
this.showModal = true;
|
||||
|
||||
setTimeout(() => {
|
||||
$("#new-item-modal").modal(
|
||||
{ backdrop: "static", keyboard: false },
|
||||
"show"
|
||||
);
|
||||
}, 500);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.this.contextMenu = require(`~/json//subjectContextMenu.json`).filter(
|
||||
(item) => item.show
|
||||
);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.menu-bar__content {
|
||||
position: static;
|
||||
flex: 1 1 100%;
|
||||
max-width: 305px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.home-list__content {
|
||||
/*max-height: calc(100vh - 12em);*/
|
||||
height: calc(100vh - 8em);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
padding-left: 0.3em;
|
||||
|
||||
&.loading {
|
||||
//background-image: url('./img/item-loading.svg');
|
||||
background-repeat: repeat-y;
|
||||
background-position: top right;
|
||||
background-size: 12em;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
clear: both;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 0.5em;
|
||||
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
animation-name: example;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,676 +0,0 @@
|
|||
<template>
|
||||
<div class="menu-bar__content menu-bar-content home-list p-3">
|
||||
<!-- <button @click="toggleSidebarMenu()" type="button" class="btn sidebar-toggler"
|
||||
:class="{'expanded' : isSidebarCollapsed}">
|
||||
<img src="assets/common/img/arrow-bar-left.svg" class="img-fluid" alt="">
|
||||
</button> -->
|
||||
<Breadcrumbs />
|
||||
|
||||
<div class="home-list__header pt-3 pb-0">
|
||||
<div class="flex-grow-1">
|
||||
<form
|
||||
class="search-form mx-0 w-100"
|
||||
role="search"
|
||||
@submit.prevent="sendQuery"
|
||||
>
|
||||
<div class="form-group">
|
||||
<div class="d-flex">
|
||||
<multiselect
|
||||
:allow-empty="false"
|
||||
:searchable="true"
|
||||
:close-on-select="true"
|
||||
:show-labels="false"
|
||||
label="title"
|
||||
track-by="id"
|
||||
placeholder="انتخاب پروژه"
|
||||
:value="selectedProjectGetter"
|
||||
:options="projects"
|
||||
@select="selectProject"
|
||||
:hide-selected="false"
|
||||
:limit-text="
|
||||
(count) => {
|
||||
return `و ${count} پروژه دیگر`;
|
||||
}
|
||||
"
|
||||
:max-height="200"
|
||||
>
|
||||
</multiselect>
|
||||
<!-- <select-->
|
||||
<!-- v-model="projectId"-->
|
||||
<!-- class="form-control mr-1"-->
|
||||
<!-- @change="getList()"-->
|
||||
<!-- >-->
|
||||
<!-- <option-->
|
||||
<!-- v-can="'subject_view'"-->
|
||||
<!-- v-for="project in projects"-->
|
||||
<!-- :key="project.id"-->
|
||||
<!-- :value="project.id"-->
|
||||
<!-- >-->
|
||||
<!-- {{ project.title }}-->
|
||||
<!-- </option>-->
|
||||
<!-- </select>-->
|
||||
|
||||
<div class="context-menu-dropdown">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="btn pl-0"
|
||||
type="button"
|
||||
id="dropdownMenu2"
|
||||
data-toggle="dropdown"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<i class="tavasi tavasi-Component-281--1"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
|
||||
<button
|
||||
class="dropdown-item text-right"
|
||||
@click.prevent="showReplaceInput = !showReplaceInput"
|
||||
type="button"
|
||||
>
|
||||
<i class="tavasi tavasi-Component-78--9---2"
|
||||
><span class="path1"></span><span class="path2"></span
|
||||
></i>
|
||||
جستجو
|
||||
</button>
|
||||
<button
|
||||
v-can="'subject_new'"
|
||||
data-toggle="modal"
|
||||
data-target="#list-modal"
|
||||
@click.prevent="openModal()"
|
||||
class="dropdown-item text-right"
|
||||
type="button"
|
||||
>
|
||||
<!-- <span class="tavasi tavasi-add"></span> -->
|
||||
<span class="tavasi tavasi-Component-133--1"></span>
|
||||
پوشه جدید
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showReplaceInput" class="form-group">
|
||||
<div class="input-group">
|
||||
<input
|
||||
v-model="searchForm.query"
|
||||
type="search"
|
||||
required
|
||||
class="form-control"
|
||||
id="search-query"
|
||||
placeholder="جستجو..."
|
||||
name="search-query"
|
||||
aria-label="جستجو در اسناد، عناوین و واژگان"
|
||||
aria-describedby="basic-addon1"
|
||||
size="50"
|
||||
@keyup="sendQuery()"
|
||||
@keydown="onKeyDown()"
|
||||
/>
|
||||
<div class="input-group-append">
|
||||
<button
|
||||
@click="showReplaceInput = !showReplaceInput"
|
||||
type="button"
|
||||
class="input-group-text show-reset-btn"
|
||||
id="basic-addon1"
|
||||
>
|
||||
<i class="tavasi tavasi-Component-294--1"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-list__content scroll-needed" :class="{ loading: loading }">
|
||||
<div class="last-search h-100">
|
||||
<div class="last-search-content h-100" @scroll="loadMore">
|
||||
<div v-if="list.length">
|
||||
<div class="meta-list mb-3 prev-level" v-if="meta.length">
|
||||
<!-- <span style="font-size: 1.1rem;" class="tavasi tavasi-Component-71--1 ml-2"></span>-->
|
||||
<div v-for="(metaItem, index) in meta">
|
||||
<a
|
||||
:key="'meta' + metaItem.id"
|
||||
@click.prevent="getParentList(metaItem.parent_id)"
|
||||
:href="metaItem.title"
|
||||
class="meta-list-item text__14"
|
||||
:title="metaItem.title"
|
||||
>
|
||||
{{ metaItem.title }}
|
||||
</a>
|
||||
<span
|
||||
:key="'id' + metaItem.id"
|
||||
style="font-size: 1.4rem; color: blue"
|
||||
v-if="index < meta.length - 1"
|
||||
class="tavasi tavasi-Component-22--1"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- mehdi -->
|
||||
<div class="select-export-container" v-if="list?.length">
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="btn btn-outline-light border-0 dropdown-toggle"
|
||||
type="button"
|
||||
data-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
>
|
||||
<span class="tavasi tavasi-excel-file-2 ml-1"></span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<button
|
||||
class="dropdown-item"
|
||||
type="button"
|
||||
:disabled="fetchingDataForExport"
|
||||
@click="exportJsonToExcel('current')"
|
||||
value="current"
|
||||
>
|
||||
جاری
|
||||
</button>
|
||||
<button
|
||||
class="dropdown-item"
|
||||
type="button"
|
||||
:disabled="fetchingDataForExport"
|
||||
@click="exportJsonToExcel('all')"
|
||||
value="all"
|
||||
>
|
||||
همه
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- mehdi -->
|
||||
<div
|
||||
:id="item.id"
|
||||
v-for="(item, index) in list"
|
||||
:key="item.title"
|
||||
class="item"
|
||||
>
|
||||
<draggable
|
||||
handle=".my-handle"
|
||||
group="people"
|
||||
@add="onDrop"
|
||||
@choose="handleChoose"
|
||||
@unchoose="handleUnChoose"
|
||||
@change="handleChange"
|
||||
:list="list"
|
||||
>
|
||||
<div
|
||||
class="d-flex position-relative"
|
||||
:class="{ 'is-selected': item?.isSelected }"
|
||||
>
|
||||
<rename-form
|
||||
v-if="
|
||||
item?.editMode &&
|
||||
item?.parentComponent === 'subjectPanel' &&
|
||||
!isGuest
|
||||
"
|
||||
:title="item.title"
|
||||
:loading="loading"
|
||||
@closeForm="item.editMode = false"
|
||||
@saveChanges="editItem($event, item, list)"
|
||||
></rename-form>
|
||||
|
||||
<div v-else>
|
||||
<a
|
||||
v-if="item.children"
|
||||
@click.prevent="getListChildren(item, index)"
|
||||
:href="item.title"
|
||||
class="open-sub-folder"
|
||||
:title="item.title"
|
||||
>
|
||||
<span class="my-handle">
|
||||
<svg
|
||||
v-if="item.children?.length"
|
||||
class="icon icon-Component-154--22 color-costom ml-1"
|
||||
>
|
||||
<use xlink:href="#icon-Component-154--22"></use>
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
class="icon icon-Component-133--1 color-costom ml-1"
|
||||
>
|
||||
<use xlink:href="#icon-Component-133--1"></use>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
:class="{ active: item?.active ?? false }"
|
||||
@click.prevent="getItems(item, index)"
|
||||
:href="item.title"
|
||||
class="title"
|
||||
:title="item.title"
|
||||
>
|
||||
<span class="my-handle">
|
||||
<i
|
||||
v-if="!item.children || item.children.length === 0"
|
||||
class="tavasi tavasi-Component-149--3 ml-1"
|
||||
></i>
|
||||
<!-- <i v-if="item.children === 0" class="tavasi tavasi-Component-149--3"></i>-->
|
||||
<!-- <i v-else class="tavasi tavasi-Component-360--58">-->
|
||||
<!-- <span class="path1"></span>-->
|
||||
<!-- <span class="path2"></span>-->
|
||||
<!-- </i>-->
|
||||
</span>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
|
||||
<div v-if="!item?.isSelected && !isGuest">
|
||||
<!-- v-can="'list_edit'" -->
|
||||
<context-menu
|
||||
:parentComponent="'subjectPanel'"
|
||||
:list="list"
|
||||
:clickedItem="item"
|
||||
:contextMenu="contextMenu"
|
||||
@remove-item="removeItem(item, list)"
|
||||
@update-order="updateOrder($event, item, list, index)"
|
||||
@new-sub-folder="
|
||||
openNewSubFolderModal(item, list, index)
|
||||
"
|
||||
>
|
||||
</context-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-if="Array.isArray(item.children)" class="children">
|
||||
<li
|
||||
class="position-relative"
|
||||
v-for="(child, childIndex) in item.children"
|
||||
:key="child.title"
|
||||
>
|
||||
<rename-form
|
||||
v-if="
|
||||
child?.editMode &&
|
||||
child?.parentComponent === 'subjectPanel' &&
|
||||
!isGuest
|
||||
"
|
||||
:title="child.title"
|
||||
:loading="loading"
|
||||
@closeForm="child.editMode = false"
|
||||
@saveChanges="editItem($event, child, item.children)"
|
||||
></rename-form>
|
||||
<div v-else>
|
||||
<a
|
||||
@click.prevent="getItems(child, childIndex)"
|
||||
:href="child.title"
|
||||
class="title"
|
||||
:title="child.title"
|
||||
>
|
||||
<span class="my-handle">
|
||||
<svg
|
||||
v-if="child.children === 0"
|
||||
class="icon icon-Component-149--3 ml-1"
|
||||
>
|
||||
<use xlink:href="#icon-Component-149--3"></use>
|
||||
</svg>
|
||||
|
||||
<!-- <i
|
||||
v-if="child.children === 0"
|
||||
class="tavasi tavasi-Component-149--3 ml-1"
|
||||
></i> -->
|
||||
|
||||
<svg
|
||||
v-else
|
||||
class="icon icon-Component-360--2 text__14 ml-1"
|
||||
>
|
||||
<use xlink:href="#icon-Component-360--2"></use>
|
||||
</svg>
|
||||
<!-- <i
|
||||
v-else
|
||||
class="tavasi tavasi-Component-360--58 text__14 ml-1"
|
||||
>
|
||||
<span class="path1"></span>
|
||||
<span class="path2"></span>
|
||||
</i> -->
|
||||
</span>
|
||||
{{ child.title }}
|
||||
</a>
|
||||
<div v-if="!child?.isSelected && !isGuest">
|
||||
<context-menu
|
||||
:parentComponent="'subjectPanel'"
|
||||
:list="item.children"
|
||||
:clickedItem="child"
|
||||
:contextMenu="contextMenu"
|
||||
@remove-item="removeItem(child, item.children)"
|
||||
@new-sub-folde="openNewSubFolderModal(child)"
|
||||
@update-order="
|
||||
updateOrder(
|
||||
$event,
|
||||
child,
|
||||
item.children,
|
||||
childIndex
|
||||
)
|
||||
"
|
||||
>
|
||||
</context-menu>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
<no-data v-else />
|
||||
</div>
|
||||
|
||||
<!-- <div class="last-search-footer" v-if="list.length > 0">-->
|
||||
<!-- <button class="btn last-search-more-btn" type="button">بیشتر</button>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showModal && !isGuest">
|
||||
<new-list-modal
|
||||
:apiName="currentPageName"
|
||||
:selectedItem="selectedItem"
|
||||
:parentId="parentId"
|
||||
@close-modal="closeModal"
|
||||
@delete-item="updateList"
|
||||
@update-list="updateList"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="d-md-none hide-list-panel">
|
||||
<button
|
||||
name="button"
|
||||
type="button"
|
||||
class="toggle-mobile-nav"
|
||||
@click="$emit('hide-panel')"
|
||||
>
|
||||
<svg class="s12 icon-chevron-double-lg-right">
|
||||
<use
|
||||
href="assets/common/img/icons.svg#chevron-double-lg-right"
|
||||
></use>
|
||||
</svg>
|
||||
<span class="collapse-text mr-2">بستن</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import apis from "~/apis/listApi";
|
||||
|
||||
import { listMixin } from "~/list/mixins/listMixin";
|
||||
import { searchMixin } from "~/list/mixins/searchMixin";
|
||||
import { dragDropMoveMixin } from "~/list/mixins/dragDropMoveMixin";
|
||||
import { mapState } from "pinia";
|
||||
|
||||
export default {
|
||||
props: ["items"],
|
||||
mixins: [searchMixin, listMixin, dragDropMoveMixin],
|
||||
emits: ["list-changed", "list-item-changed"],
|
||||
activated() {
|
||||
if (this.cached === false) {
|
||||
this.cached = Date.now();
|
||||
} else {
|
||||
// time diff since cache, in seconds
|
||||
const diff = (Date.now() - this.cached) / 1000;
|
||||
|
||||
// if cache is older than 30 seconds, invalidate
|
||||
if (diff > 1800) {
|
||||
this.cached = false;
|
||||
this.getProjects();
|
||||
}
|
||||
}
|
||||
},
|
||||
deactivated() {
|
||||
// console.log("deactivated");
|
||||
},
|
||||
computed: {
|
||||
...mapState(["isGuest"]),
|
||||
},
|
||||
watch: {
|
||||
isReturnFromItemshowPageGetter(id) {
|
||||
this.getList(id);
|
||||
},
|
||||
// $route: {
|
||||
// handler(route) {
|
||||
// this.storeUserLastState(route.name);
|
||||
// },
|
||||
// nested: true,
|
||||
// immediate: true,
|
||||
// },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cached: false,
|
||||
|
||||
subjects: [],
|
||||
listTypeId: 0,
|
||||
currentPageName: "subject",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async storeUserLastState(route) {
|
||||
let payLoad = {
|
||||
lastRouteName: route,
|
||||
lastRouteUrl: route,
|
||||
list: {
|
||||
subjects: {
|
||||
sorting: this.sorting,
|
||||
pagination: this.pagination,
|
||||
project: this.selectedProjectGetter,
|
||||
item: this.selectedItemGetter,
|
||||
listId: this.listIdGetter,
|
||||
list: this.listGetter,
|
||||
},
|
||||
},
|
||||
};
|
||||
return await this.storeState(payLoad);
|
||||
},
|
||||
getProjects() {
|
||||
this.checkPermissions({ permission: "subject_view", _this: this })
|
||||
.then(() => {
|
||||
const payload = {
|
||||
isown: 3,
|
||||
sortby: "created",
|
||||
offset: 0,
|
||||
limit: 100,
|
||||
type: 3, // موضوع
|
||||
};
|
||||
|
||||
ApiService.formData(apis.projects.list, payload).then((res) => {
|
||||
const firstProject = res.data.data[0];
|
||||
firstProject.meta = JSON.parse(firstProject.meta);
|
||||
// console.log(firstProject.table_columns);
|
||||
firstProject.table_columns = JSON.parse(firstProject.table_columns);
|
||||
|
||||
this.SET_SELECTED_PROJECT(firstProject);
|
||||
|
||||
this.$emit("list-changed", {
|
||||
// listId: undefined,
|
||||
// projectId: this.subjectProject.id,
|
||||
});
|
||||
|
||||
this.projects = res.data.data;
|
||||
|
||||
this.getList();
|
||||
this.$emit("can-view", true);
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$emit("can-view", false);
|
||||
});
|
||||
},
|
||||
getList(parent = 0) {
|
||||
const payload = {
|
||||
projectid: this.selectedProjectGetter?.id,
|
||||
parent: parent,
|
||||
sortby: "id",
|
||||
offset: 0,
|
||||
limit: 100,
|
||||
listtype: this.listTypeId,
|
||||
};
|
||||
|
||||
let self = this;
|
||||
|
||||
ApiService.formData(apis.subject.list, payload).then((res) => {
|
||||
self.list = res.data.data;
|
||||
self.meta = res.data?.meta ?? [];
|
||||
|
||||
self.$emit("list-changed", {
|
||||
subjectId: parent,
|
||||
listTypeId: self.listTypeId,
|
||||
});
|
||||
|
||||
if (parent == 0) {
|
||||
self.SET_LIST_ID(self.list[0].id);
|
||||
} else {
|
||||
self.SET_LIST_ID(parent);
|
||||
}
|
||||
|
||||
self.SET_LIST(self.list[0]);
|
||||
self.getListItem(self.list[0].id, 0);
|
||||
self.switchActive(self.list[0]);
|
||||
|
||||
// if (res.data.meta)
|
||||
// this.meta = res.data.meta.filter((item, index) => index > 0);
|
||||
});
|
||||
},
|
||||
addItemToList(itemId, listId) {
|
||||
const payload = {
|
||||
itemid: itemId,
|
||||
listid: listId,
|
||||
listtype: this.listTypeId,
|
||||
projectid: this.selectedProjectGetter?.id,
|
||||
};
|
||||
|
||||
ApiService.formData(apis.subject.add, payload).then((res) => {
|
||||
// this.getList()
|
||||
|
||||
this.mySwalToast({
|
||||
title: "تبریک",
|
||||
html: res.data.message,
|
||||
icon: "success",
|
||||
});
|
||||
});
|
||||
},
|
||||
editItem(newTitle, subject, subjectArray) {
|
||||
if (this.loading) return;
|
||||
this.loading = true;
|
||||
|
||||
const model = {
|
||||
title: newTitle,
|
||||
subjectid: subject.id,
|
||||
projectid: this.selectedProjectGetter?.id,
|
||||
// ,newparent: subject.parent ? subject.parent : 0, // نیاز نیست
|
||||
};
|
||||
|
||||
ApiService.formData(apis.subject.edit, model)
|
||||
.then((res) => {
|
||||
subject.editMode = false;
|
||||
|
||||
const resultIndex = subjectArray.findIndex(
|
||||
(item) => subject.id === item.id
|
||||
);
|
||||
|
||||
if (resultIndex > -1) {
|
||||
this.$set(subjectArray[resultIndex], "title", newTitle);
|
||||
}
|
||||
|
||||
this.mySwalToast({
|
||||
title: "موفق",
|
||||
html: res.data.message,
|
||||
icon: "success",
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
this.mySwalToast({
|
||||
title: "خطا!!!",
|
||||
html: err?.message,
|
||||
icon: "error",
|
||||
});
|
||||
})
|
||||
.finally(() => (this.loading = false));
|
||||
},
|
||||
|
||||
// onDrop(ev, list) {
|
||||
// const itemId = ev.item["_underlying_vm_"]["id"];
|
||||
// const listId = list.id;
|
||||
|
||||
// this.addItemToList(itemId, listId);
|
||||
// },
|
||||
// onEnd(ev) {
|
||||
// },
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.my-handle {
|
||||
color: #ccc;
|
||||
}
|
||||
.menu-bar__content {
|
||||
position: static;
|
||||
flex: 1 1 100%;
|
||||
max-width: 305px;
|
||||
width: auto;
|
||||
&.show-list-panel {
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.home-list__content {
|
||||
/*max-height: calc(100vh - 12em);*/
|
||||
height: calc(100vh - 8em);
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
padding-left: 0.3em;
|
||||
|
||||
&.loading {
|
||||
//background-image: url('./img/item-loading.svg');
|
||||
background-repeat: repeat-y;
|
||||
background-position: top right;
|
||||
background-size: 12em;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
clear: both;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 0.5em;
|
||||
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
animation-name: example;
|
||||
animation-duration: 2s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggler {
|
||||
right: 2.6em;
|
||||
|
||||
&.expanded {
|
||||
right: 11.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.meta-list {
|
||||
display: flex;
|
||||
align-items: ceter;
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
.meta-list-item {
|
||||
}
|
||||
}
|
||||
|
||||
//mehdi
|
||||
.select-export-container {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
left: 12rem;
|
||||
//lefr: 0px;
|
||||
}
|
||||
//mehdi
|
||||
</style>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<template>
|
||||
<div class="menu-bar__container">
|
||||
<ul class="menu-bar__link link-bar">
|
||||
<li class="link-bar__item">
|
||||
<a @click.prevent="redirectToRouteName()" href="/" class="btn dashboard-btn">
|
||||
<img style="width: 1em;height: 1em;" src="assets/list/img/hamburger-menu.svg" class="img-fluid" alt="سامانه ها">
|
||||
<span class="mx-1">سامانه ها</span>
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
v-for="(item, i) in menu"
|
||||
:key="i"
|
||||
:class="
|
||||
item.actionMode == currentMode
|
||||
? 'link-bar__item color-' + item.color + ' active'
|
||||
: 'link-bar__item color-' + item.color
|
||||
"
|
||||
>
|
||||
<router-link
|
||||
:to="item.link" :title="item.title">
|
||||
<i :class="item.icon">
|
||||
<span class="path1"></span><span class="path2"></span
|
||||
></i>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import menu from "~/json/list/json/sidebar.json"
|
||||
|
||||
export default {
|
||||
props: ["currentMode"],
|
||||
|
||||
data() {
|
||||
return {
|
||||
menu: menu
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user