547 lines
19 KiB
Vue
547 lines
19 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="modal fade"
|
||
|
|
id="subject-modal"
|
||
|
|
tabindex="-1"
|
||
|
|
aria-labelledby="exampleModalLabel"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||
|
|
<div class="modal-content popUp-tab user-modal">
|
||
|
|
<div class="modal-header p-0 border-0">
|
||
|
|
<div class="popUp-tab__header">
|
||
|
|
<h1 class="popUp-tab__header-title">
|
||
|
|
{{ buttonText }} فهرست
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
@click="cancel()"
|
||
|
|
data-dismiss="modal"
|
||
|
|
class="d-none close-btn"
|
||
|
|
>
|
||
|
|
×
|
||
|
|
</button>
|
||
|
|
</h1>
|
||
|
|
<nav class="popUp-tab__menu">
|
||
|
|
<div class="nav nav-tabs" id="nav-tab" role="tablist">
|
||
|
|
<a
|
||
|
|
@click="setTab(1)"
|
||
|
|
class="nav-item nav-link active"
|
||
|
|
id="nav-myAccount-tab"
|
||
|
|
data-bs-toggle="tab"
|
||
|
|
href="#nav-myAccount"
|
||
|
|
role="tab"
|
||
|
|
aria-controls="nav-myAccount"
|
||
|
|
aria-selected="true"
|
||
|
|
>تک کلمه ای</a
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
@click="setTab(2)"
|
||
|
|
class="nav-item nav-link"
|
||
|
|
id="nav-changepass-tab"
|
||
|
|
data-bs-toggle="tab"
|
||
|
|
href="#nav-changepass"
|
||
|
|
role="tab"
|
||
|
|
aria-controls="nav-changepass"
|
||
|
|
aria-selected="false"
|
||
|
|
>دو کلمه ای</a
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
@click="setTab(3)"
|
||
|
|
class="nav-item nav-link"
|
||
|
|
id="nav-changepass-tab"
|
||
|
|
data-bs-toggle="tab"
|
||
|
|
href="#nav-changepass"
|
||
|
|
role="tab"
|
||
|
|
aria-controls="nav-changepass"
|
||
|
|
aria-selected="false"
|
||
|
|
>سه کلمه ای</a
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
@click="setTab(4)"
|
||
|
|
class="nav-item nav-link"
|
||
|
|
id="nav-changepass-tab"
|
||
|
|
data-bs-toggle="tab"
|
||
|
|
href="#nav-changepass"
|
||
|
|
role="tab"
|
||
|
|
aria-controls="nav-changepass"
|
||
|
|
aria-selected="false"
|
||
|
|
>کلمات کم وزن</a
|
||
|
|
>
|
||
|
|
<a
|
||
|
|
@click="setTab(5)"
|
||
|
|
class="nav-item nav-link"
|
||
|
|
id="nav-changepass-tab"
|
||
|
|
data-bs-toggle="tab"
|
||
|
|
href="#nav-changepass"
|
||
|
|
role="tab"
|
||
|
|
aria-controls="nav-changepass"
|
||
|
|
aria-selected="false"
|
||
|
|
>افزودن موضوع</a
|
||
|
|
>
|
||
|
|
<!-- <a
|
||
|
|
@click="mehdiTest()"
|
||
|
|
class="nav-item nav-link"
|
||
|
|
id="nav-changepass-tab"
|
||
|
|
data-bs-toggle="tab"
|
||
|
|
href="#nav-changepass"
|
||
|
|
role="tab"
|
||
|
|
aria-controls="nav-changepass"
|
||
|
|
aria-selected="false"
|
||
|
|
>mmm</a
|
||
|
|
> -->
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="popUp-tab__content tab-content">
|
||
|
|
<div
|
||
|
|
class="tab-pane fade show active"
|
||
|
|
id="nav-myAccount"
|
||
|
|
role="tabpanel"
|
||
|
|
aria-labelledby="nav-myAccount-tab"
|
||
|
|
>
|
||
|
|
<div class="my-profile__container" style="position: relative">
|
||
|
|
<div class="my-profile">
|
||
|
|
<div class="my-profile__form d-flex">
|
||
|
|
<div v-if="currentTab < 4">
|
||
|
|
<div class="flex-grow-1 ms-3">
|
||
|
|
<h6 class="mb-4">تعداد تکرار</h6>
|
||
|
|
|
||
|
|
<!-- <div
|
||
|
|
@scroll="loadMore"
|
||
|
|
class="overlay-plugin"
|
||
|
|
id="overlay-plugin2"
|
||
|
|
>
|
||
|
|
<ul
|
||
|
|
class="list-group list-group-flush-action"
|
||
|
|
id="stop-words"
|
||
|
|
>
|
||
|
|
<li
|
||
|
|
|
||
|
|
v-for="(key, text, index) of repeats[
|
||
|
|
'word' + currentTab
|
||
|
|
]"
|
||
|
|
:class="{
|
||
|
|
m1: currentTab == 1,
|
||
|
|
m2: currentTab == 2,
|
||
|
|
m3: currentTab == 3,
|
||
|
|
}"
|
||
|
|
:key="index"
|
||
|
|
:ref="'index' + index"
|
||
|
|
class="list-group-item d-flex justify-content-between align-items-center p-0 px-2"
|
||
|
|
:id="'id-' + index"
|
||
|
|
>
|
||
|
|
<div class="context-menu">
|
||
|
|
<context-menu
|
||
|
|
class="width-auto"
|
||
|
|
:parentComponent="'subject-modal'"
|
||
|
|
:contextMenu="stopWordContextMenu"
|
||
|
|
@remove-item="removeItem(text, index)"
|
||
|
|
@import="removeInStopWords(text)"
|
||
|
|
>
|
||
|
|
</context-menu>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
class="btn btn-block text-end pe-0 repeat-btn"
|
||
|
|
type="button"
|
||
|
|
:class="{ change: validationText }"
|
||
|
|
>
|
||
|
|
<span>{{ text }}</span>
|
||
|
|
<span class="badge badge-pill">
|
||
|
|
( {{ key }} )
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<span class="d-flex align-items-center">
|
||
|
|
<span
|
||
|
|
v-if="index == 0"
|
||
|
|
class="tavasi tavasi-arrow-down"
|
||
|
|
></span>
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
<div
|
||
|
|
v-if="currentTab == 1"
|
||
|
|
@scroll="loadMore1($event)"
|
||
|
|
class="overlay-plugin firefox-scrollbar"
|
||
|
|
id="overlay-plugin2"
|
||
|
|
>
|
||
|
|
<ul
|
||
|
|
class="list-group list-group-flush-action"
|
||
|
|
id="stop-words"
|
||
|
|
>
|
||
|
|
<li
|
||
|
|
v-for="(key, index) of oneWordArray1"
|
||
|
|
:class="{
|
||
|
|
m1: currentTab == 1,
|
||
|
|
}"
|
||
|
|
:key="index"
|
||
|
|
:ref="'index' + index"
|
||
|
|
class="list-group-item d-flex justify-content-between align-items-center p-0 px-2"
|
||
|
|
:id="'id-' + index"
|
||
|
|
>
|
||
|
|
<div class="context-menu">
|
||
|
|
<context-menu
|
||
|
|
class="width-auto"
|
||
|
|
:parentComponent="'subject-modal'"
|
||
|
|
:contextMenu="stopWordContextMenu"
|
||
|
|
@remove-item="removeItem(key[0], index)"
|
||
|
|
@import="removeInStopWords(key[0])"
|
||
|
|
>
|
||
|
|
</context-menu>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
class="btn btn-block text-end pe-0 repeat-btn"
|
||
|
|
type="button"
|
||
|
|
:class="{ change: validationText }"
|
||
|
|
>
|
||
|
|
<span>{{ key[0] }}</span>
|
||
|
|
<span class="badge badge-pill">
|
||
|
|
( {{ key[1] }} )
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<span class="d-flex align-items-center">
|
||
|
|
<span
|
||
|
|
v-if="index == 0"
|
||
|
|
class="tavasi tavasi-arrow-down"
|
||
|
|
></span>
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
v-if="currentTab == 2"
|
||
|
|
@scroll="loadMore2($event)"
|
||
|
|
class="overlay-plugin firefox-scrollbar"
|
||
|
|
id="overlay-plugin2"
|
||
|
|
>
|
||
|
|
<ul
|
||
|
|
class="list-group list-group-flush-action"
|
||
|
|
id="stop-words"
|
||
|
|
>
|
||
|
|
<li
|
||
|
|
v-for="(key,index) of oneWordArray2"
|
||
|
|
:class="{
|
||
|
|
m2: currentTab == 2,
|
||
|
|
}"
|
||
|
|
:key="index"
|
||
|
|
:ref="'index' + index"
|
||
|
|
class="list-group-item d-flex justify-content-between align-items-center p-0 px-2"
|
||
|
|
:id="'id-' + index"
|
||
|
|
>
|
||
|
|
<div class="context-menu">
|
||
|
|
<context-menu
|
||
|
|
class="width-auto"
|
||
|
|
:parentComponent="'subject-modal'"
|
||
|
|
:contextMenu="stopWordContextMenu"
|
||
|
|
@remove-item="removeItem(key[0], index)"
|
||
|
|
@import="removeInStopWords(key[0])"
|
||
|
|
>
|
||
|
|
</context-menu>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
class="btn btn-block text-end pe-0 repeat-btn"
|
||
|
|
type="button"
|
||
|
|
:class="{ change: validationText }"
|
||
|
|
>
|
||
|
|
<span>{{ key[0] }}</span>
|
||
|
|
<span class="badge badge-pill">
|
||
|
|
( {{ key[1] }} )
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<span class="d-flex align-items-center">
|
||
|
|
<span
|
||
|
|
v-if="index == 0"
|
||
|
|
class="tavasi tavasi-arrow-down"
|
||
|
|
></span>
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
@scroll="loadMore3($event)"
|
||
|
|
v-if="currentTab == 3"
|
||
|
|
class="overlay-plugin firefox-scrollbar"
|
||
|
|
id="overlay-plugin2"
|
||
|
|
>
|
||
|
|
<ul
|
||
|
|
class="list-group list-group-flush-action"
|
||
|
|
id="stop-words"
|
||
|
|
>
|
||
|
|
<li
|
||
|
|
v-for="(key,index) of oneWordArray3"
|
||
|
|
:class="{
|
||
|
|
m3: currentTab == 3,
|
||
|
|
}"
|
||
|
|
:key="index"
|
||
|
|
:ref="'index' + index"
|
||
|
|
class="list-group-item d-flex justify-content-between align-items-center p-0 px-2"
|
||
|
|
:id="'id-' + index"
|
||
|
|
>
|
||
|
|
<div class="context-menu">
|
||
|
|
<context-menu
|
||
|
|
class="width-auto"
|
||
|
|
:parentComponent="'subject-modal'"
|
||
|
|
:contextMenu="stopWordContextMenu"
|
||
|
|
@remove-item="removeItem(key[0], index)"
|
||
|
|
@import="removeInStopWords(key[0])"
|
||
|
|
>
|
||
|
|
</context-menu>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
class="btn btn-block text-end pe-0 repeat-btn"
|
||
|
|
type="button"
|
||
|
|
:class="{ change: validationText }"
|
||
|
|
>
|
||
|
|
<span>{{ key[0] }}</span>
|
||
|
|
<span class="badge badge-pill">
|
||
|
|
( {{ key[1] }} )
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<span class="d-flex align-items-center">
|
||
|
|
<span
|
||
|
|
v-if="index == 0"
|
||
|
|
class="tavasi tavasi-arrow-down"
|
||
|
|
></span>
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex-grow-2">
|
||
|
|
<h6 class="mb-4">
|
||
|
|
انتخاب عنوان با استفاده از موضوعات پیشنهادی
|
||
|
|
</h6>
|
||
|
|
<search-accordion></search-accordion>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="currentTab == 5">
|
||
|
|
<div class="parent_select">
|
||
|
|
<div class="selected_word_subject">
|
||
|
|
<select class="text__14 form-control">
|
||
|
|
<option
|
||
|
|
class="select_word"
|
||
|
|
v-for="(selectedWord, index) of selectedWords"
|
||
|
|
:key="index"
|
||
|
|
>
|
||
|
|
{{ selectedWord }}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="subject">
|
||
|
|
<subject-form
|
||
|
|
@update-list="updateList"
|
||
|
|
@delete-item="deleteItem"
|
||
|
|
></subject-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-if="currentTab == 4">
|
||
|
|
<div
|
||
|
|
class="overlay-plugin firefox-scrollbar"
|
||
|
|
id="overlay-plugin1"
|
||
|
|
>
|
||
|
|
<form>
|
||
|
|
<div class="form-group">
|
||
|
|
<textarea
|
||
|
|
class="form-control textarea-form"
|
||
|
|
v-model="stopWords"
|
||
|
|
id="stop-words"
|
||
|
|
rows="10"
|
||
|
|
></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <button-component
|
||
|
|
type="submit"
|
||
|
|
classes="btn-primary"
|
||
|
|
:buttonText="saveButtonText"
|
||
|
|
>
|
||
|
|
</button-component> -->
|
||
|
|
<button-component
|
||
|
|
classes="btn btn-default popUp-tab__clear button_giveup"
|
||
|
|
@click="ReturnToInitialSettings()"
|
||
|
|
buttonText="تنظیم به پیشفرض"
|
||
|
|
:buttonLoading="buttonLoading"
|
||
|
|
data-dismiss="modal"
|
||
|
|
id="button-component"
|
||
|
|
></button-component>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="popUp-tab__submit button-form"
|
||
|
|
@click="save()"
|
||
|
|
>
|
||
|
|
ذخیره
|
||
|
|
</button>
|
||
|
|
<!-- <P>{{ stopWords }}</P> -->
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<div class="popUp-tab__buttonssds">
|
||
|
|
<button-component
|
||
|
|
classes="btn btn-default popUp-tab__clear button_giveup"
|
||
|
|
@click="closeModal()"
|
||
|
|
buttonText="انصراف"
|
||
|
|
:buttonLoading="buttonLoading"
|
||
|
|
data-dismiss="modal"
|
||
|
|
id="button-component"
|
||
|
|
></button-component>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="popUp-tab__submit button-form"
|
||
|
|
@click="savedata()"
|
||
|
|
>
|
||
|
|
بازسازی
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { repetitionWordsMixin } from "~/entity/mixins/repetitionWordsMixin.js";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
mixins: [repetitionWordsMixin],
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.list-group-item {
|
||
|
|
&.active,
|
||
|
|
&:hover {
|
||
|
|
background-color: #e8fcff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// .change{
|
||
|
|
// background-color: red;
|
||
|
|
// }
|
||
|
|
|
||
|
|
.context-menu {
|
||
|
|
position: absolute;
|
||
|
|
left: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-modal {
|
||
|
|
width: 53em;
|
||
|
|
height: 30em;
|
||
|
|
// display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.repeat-btn {
|
||
|
|
color: #9f9f9f;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-control-textarea {
|
||
|
|
position: absolute;
|
||
|
|
height: 300px !important;
|
||
|
|
width: 550px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
|
||
|
|
#overlay-plugin1 {
|
||
|
|
position: absolute;
|
||
|
|
width: 560px;
|
||
|
|
height: 360px;
|
||
|
|
}
|
||
|
|
#overlay-plugin2 {
|
||
|
|
position: absolute;
|
||
|
|
width: 260px;
|
||
|
|
height: 300px;
|
||
|
|
overflow-y: scroll;
|
||
|
|
}
|
||
|
|
.button-form {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 10px;
|
||
|
|
left: 10px;
|
||
|
|
}
|
||
|
|
.modal-footer {
|
||
|
|
height: 60px;
|
||
|
|
}
|
||
|
|
.button_giveup {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 10px;
|
||
|
|
left: 70px;
|
||
|
|
}
|
||
|
|
.textarea-form {
|
||
|
|
position: relative;
|
||
|
|
width: 560px !important;
|
||
|
|
height: 310px !important;
|
||
|
|
overflow-y: scroll !important;
|
||
|
|
}
|
||
|
|
.change-active {
|
||
|
|
text-decoration: line-through;
|
||
|
|
}
|
||
|
|
.change-active span {
|
||
|
|
color: brown !important;
|
||
|
|
}
|
||
|
|
.parent_select {
|
||
|
|
position: relative;
|
||
|
|
// background-color: yellow;
|
||
|
|
width: 650px;
|
||
|
|
height: auto;
|
||
|
|
padding: 60px;
|
||
|
|
left: 50px;
|
||
|
|
top: 0px;
|
||
|
|
}
|
||
|
|
.subject {
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
// background-color: red !important;
|
||
|
|
top: -50px;
|
||
|
|
width: 650px !important;
|
||
|
|
height: auto;
|
||
|
|
// padding-right: 70px;
|
||
|
|
// padding-left: 70px;
|
||
|
|
right: -60px;
|
||
|
|
}
|
||
|
|
.selected_word_subject {
|
||
|
|
// background-color: green;
|
||
|
|
position: relative;
|
||
|
|
right: 150px;
|
||
|
|
top: -55px;
|
||
|
|
width: 150px;
|
||
|
|
}
|
||
|
|
.selected_word_subject select {
|
||
|
|
width: 150px !important;
|
||
|
|
|
||
|
|
color: #00b6e3;
|
||
|
|
}
|
||
|
|
.select_word {
|
||
|
|
border-radius: 20px;
|
||
|
|
border: 2px solid #00b6e3;
|
||
|
|
font-size: 14px;
|
||
|
|
|
||
|
|
color: #00b6e3;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.context-menu-dropdown {
|
||
|
|
&.width-auto {
|
||
|
|
.dropdown .dropdown-menu {
|
||
|
|
width: 188px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|