تغییرات گفت گو
This commit is contained in:
Mehdi104797
parent
2a5f878608
commit
815f61b76f
|
|
@ -49,6 +49,9 @@ export default {
|
||||||
updateAvatar: 'group/ed/avatar/',
|
updateAvatar: 'group/ed/avatar/',
|
||||||
|
|
||||||
},
|
},
|
||||||
|
entity:{
|
||||||
|
get: "get",
|
||||||
|
},
|
||||||
// myMessages: {
|
// myMessages: {
|
||||||
// list: "message/get/ext/",
|
// list: "message/get/ext/",
|
||||||
// create: 'message/set',
|
// create: 'message/set',
|
||||||
|
|
|
||||||
|
|
@ -1459,25 +1459,26 @@
|
||||||
// import Vue from "vue";
|
// import Vue from "vue";
|
||||||
// import VueRecord from "@codekraft-studio/vue-record";
|
// import VueRecord from "@codekraft-studio/vue-record";
|
||||||
import { mapState, mapActions } from "pinia";
|
import { mapState, mapActions } from "pinia";
|
||||||
|
import { useChatStore } from "@chat/stores/chatStore";
|
||||||
|
import { useCommonStore } from "@stores/commonStore";
|
||||||
|
import chatApi from "@chat/apis/chatApi";
|
||||||
|
|
||||||
import chatApi from "~/apis/chatApi";
|
import replayMixin from "@chat/mixins/replayMixin";
|
||||||
|
import createdMixin from "@chat/mixins/createdMixin";
|
||||||
import replayMixin from "~/chat/mixins/replayMixin";
|
import mountedMixin from "@chat/mixins/mountedMixin";
|
||||||
import createdMixin from "~/chat/mixins/createdMixin";
|
import fileMixin from "@chat/mixins/fileMixin";
|
||||||
import mountedMixin from "~/chat/mixins/mountedMixin";
|
import virtialListMixin from "@chat/mixins/virtialListMixin";
|
||||||
import fileMixin from "~/chat/mixins/fileMixin";
|
import headerMixin from "@chat/mixins/headerMixin";
|
||||||
import virtialListMixin from "~/chat/mixins/virtialListMixin";
|
import jahatMixin from "@chat/mixins/jahatMixin";
|
||||||
import headerMixin from "~/chat/mixins/headerMixin";
|
import forwardMixin from "@chat/mixins/forwardMixin";
|
||||||
import jahatMixin from "~/chat/mixins/jahatMixin";
|
import commonMixin from "@chat/mixins/commonMixin";
|
||||||
import forwardMixin from "~/chat/mixins/forwardMixin";
|
import messageMixin from "@chat/mixins/messageMixin";
|
||||||
import commonMixin from "~/chat/mixins/commonMixin";
|
|
||||||
import messageMixin from "~/chat/mixins/messageMixin";
|
|
||||||
|
|
||||||
// import lobbiesContextMenu from "~/json/chat/json/lobbiesContextMenu.json";
|
// import lobbiesContextMenu from "~/json/chat/json/lobbiesContextMenu.json";
|
||||||
import VirtualList from "vue-virtual-scroll-list";
|
// import VirtualList from "vue-virtual-scroll-list";
|
||||||
import ChatListItem from "~/chat/components/ChatListItem";
|
import ChatListItem from "@chat/components/chat/components/ChatListItem";
|
||||||
|
|
||||||
import entityFields from "~/json/chat/json/entityFields.json";
|
import entityFields from "@chat/json/entityFields.json";
|
||||||
|
|
||||||
// Vue.use(VueRecord);
|
// Vue.use(VueRecord);
|
||||||
|
|
||||||
|
|
@ -1684,7 +1685,7 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState([
|
...mapState(useCommonStore, [
|
||||||
"getPanelStatus",
|
"getPanelStatus",
|
||||||
"isSidebarCollapsed",
|
"isSidebarCollapsed",
|
||||||
"sectionsGetter",
|
"sectionsGetter",
|
||||||
|
|
@ -1693,7 +1694,7 @@ export default {
|
||||||
"isGuest",
|
"isGuest",
|
||||||
"sidebarListStatusGetter",
|
"sidebarListStatusGetter",
|
||||||
]),
|
]),
|
||||||
...mapState("list", ["listGetter"]),
|
...mapState(useChatStore, ["listGetter"]),
|
||||||
|
|
||||||
amIGroupAdmin() {
|
amIGroupAdmin() {
|
||||||
if (this.listGetter?.admins)
|
if (this.listGetter?.admins)
|
||||||
|
|
@ -1725,8 +1726,11 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(["checkPermissions", "getUserPermissionTags"]),
|
...mapActions(useCommonStore, [
|
||||||
...mapActions([
|
"checkPermissions",
|
||||||
|
"getUserPermissionTags",
|
||||||
|
]),
|
||||||
|
...mapActions(useChatStore, [
|
||||||
"SET_SECTIONS",
|
"SET_SECTIONS",
|
||||||
"SET_FORWARD_ITEM",
|
"SET_FORWARD_ITEM",
|
||||||
"SET_AUTHORIZED_PAGES",
|
"SET_AUTHORIZED_PAGES",
|
||||||
|
|
|
||||||
804
components/chat/components/ChatListItem.vue
Normal file
804
components/chat/components/ChatListItem.vue
Normal file
|
|
@ -0,0 +1,804 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:id="'chat-item-' + source?.id"
|
||||||
|
class="comment-container chat-list-item-component"
|
||||||
|
:class="[
|
||||||
|
{ replayer: source?.user?.user_id != currentUser.user_id },
|
||||||
|
{ subjecting: source?.subjecting ?? false },
|
||||||
|
{ active: source?.active },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="comment"
|
||||||
|
:style="{ 'margin-bottom': commentMarginBoxForSubjecting + 'em' }"
|
||||||
|
>
|
||||||
|
<div class="comment-header">
|
||||||
|
<div v-if="showSelectionActionBar" class="custom-checkbox-container">
|
||||||
|
<div class="custom-control custom-checkbox">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
class="custom-control-input"
|
||||||
|
:id="'comment-' + source.id"
|
||||||
|
:value="source.id"
|
||||||
|
v-model="updateSelectListAfterCheck"
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
class="custom-control-label"
|
||||||
|
:for="'comment-' + source.id"
|
||||||
|
></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="commentor-avatar">
|
||||||
|
<img
|
||||||
|
:src="userAvatar(source?.user)"
|
||||||
|
:alt="userFullname(source?.user)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="commentor-name">
|
||||||
|
{{ userFullname(source.user) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="comment-body">
|
||||||
|
<!-- <div class="commentor-name">
|
||||||
|
{{ userFullname(source.user) }}
|
||||||
|
</div> -->
|
||||||
|
<!-- v-if="source?.label_key && source.label_key.length" -->
|
||||||
|
<div
|
||||||
|
class="comment-labels"
|
||||||
|
v-if="sectionItem?.lable && sectionItem?.lable?.length"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
@click.prevent="getSectionFromJahat()"
|
||||||
|
type="button"
|
||||||
|
class="btn ms-1"
|
||||||
|
:class="'label-' + sectionItem?.entity_field_id"
|
||||||
|
>
|
||||||
|
{{ sectionItem?.lable }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- <button
|
||||||
|
disabled
|
||||||
|
type="button"
|
||||||
|
class="btn ms-1"
|
||||||
|
v-for="label in source.label_key.split(',')"
|
||||||
|
:class="sectionTitle"
|
||||||
|
>
|
||||||
|
{{ label }}
|
||||||
|
</button> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 1 : image -->
|
||||||
|
<div v-if="source.file_type == 1" class="commentor-text">
|
||||||
|
<p v-html="parseText(source.text)"></p>
|
||||||
|
<a
|
||||||
|
@click.prevent="showLightBox(source.attachment)"
|
||||||
|
:href="source.attachment.name"
|
||||||
|
class=""
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="img-fluid max-height"
|
||||||
|
:src="getFilePath(source.attachment.url)"
|
||||||
|
:alt="source.attachment.name"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 4: file -->
|
||||||
|
<div v-else-if="source.file_type == 4" class="commentor-text">
|
||||||
|
<p v-html="parseText(source.text)"></p>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-center py-3 px-1">
|
||||||
|
<span class="file-icon-container">
|
||||||
|
<svg :class="'icon icon-' + source.attachment.ext + '-file'">
|
||||||
|
<use
|
||||||
|
:xlink:href="'#icon-' + source.attachment.ext + '-file'"
|
||||||
|
></use>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div class="me-3 flex-grow-1">
|
||||||
|
<h6>
|
||||||
|
{{ source.attachment.name }}
|
||||||
|
</h6>
|
||||||
|
<p class="m-0">
|
||||||
|
{{ formatBytes(source.attachment.size) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a
|
||||||
|
:href="getFilePath(source.attachment.url)"
|
||||||
|
target="_blank"
|
||||||
|
class="btn btn-outline-dark download-btn"
|
||||||
|
>
|
||||||
|
<svg class="icon icon-download">
|
||||||
|
<use xlink:href="#icon-download"></use>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2: audio -->
|
||||||
|
<div v-else-if="source.file_type == 2" class="commentor-text">
|
||||||
|
<p v-html="parseText(source.text)"></p>
|
||||||
|
<my-vue-plyr :file="source" :type="'audio'"></my-vue-plyr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 3: video -->
|
||||||
|
<div v-else-if="source.file_type == 3" class="commentor-text">
|
||||||
|
<p v-html="parseText(source.text)"></p>
|
||||||
|
<my-vue-plyr :file="source" :type="'video'"></my-vue-plyr>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 0: text -->
|
||||||
|
<div
|
||||||
|
v-else-if="source.file_type == 0"
|
||||||
|
class="commentor-text"
|
||||||
|
v-html="parseText(source.text)"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div class="comment-tags" v-if="source.tags && source.tags.length">
|
||||||
|
<a
|
||||||
|
:href="'tags/' + tag"
|
||||||
|
type="button"
|
||||||
|
class="btn ms-1"
|
||||||
|
v-for="tag in source.tags"
|
||||||
|
>
|
||||||
|
#{{ tag }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="comment-footer">
|
||||||
|
<div
|
||||||
|
v-if="showCardReplays"
|
||||||
|
class="replayers"
|
||||||
|
@click.prevent="openReplays()"
|
||||||
|
>
|
||||||
|
<button type="button" class="btn">{{ replaysCount }} پاسخ</button>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="replayer-avatar"
|
||||||
|
v-for="(user, index) in source?.replys?.users"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="userAvatar(user)"
|
||||||
|
:alt="user.first_name + ' ' + user.last_name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="replayer-avatar all-replays-number"
|
||||||
|
v-if="userCommentedCount > 3"
|
||||||
|
>
|
||||||
|
{{ userCommentedCount }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="comment-date">
|
||||||
|
{{ convertUnixToPersianDateTime(source.created_at) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="subject-box" v-if="source.showSubjectBox ?? false">
|
||||||
|
<div class="subject-list">
|
||||||
|
<button type="button" class="btn subject-list-item">
|
||||||
|
{{ subjectInput }}
|
||||||
|
|
||||||
|
<!-- edit remove -->
|
||||||
|
<button type="button" class="btn remove-subject">
|
||||||
|
<!-- bin icon -->
|
||||||
|
<svg class="icon icon-Component-295--1">
|
||||||
|
<use xlink:href="#icon-Component-295--1"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<!-- edit item -->
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn edit-subject"
|
||||||
|
@click.prevent="showSubjectForm()"
|
||||||
|
>
|
||||||
|
<!-- pen icon -->
|
||||||
|
<svg class="icon icon-Component-242--1">
|
||||||
|
<use xlink:href="#icon-Component-242--1"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn close-subject-box"
|
||||||
|
@click.prevent="closeSubjectBox"
|
||||||
|
>
|
||||||
|
<!-- close icon -->
|
||||||
|
<svg class="icon icon-Component-294--1">
|
||||||
|
<use xlink:href="#icon-Component-294--1"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="subject p-3" v-if="showSubjectInput">
|
||||||
|
<form class="search-form rounded-3 mx-0 w-100" role="search">
|
||||||
|
<div class="form-group m-0">
|
||||||
|
<div class="input-group">
|
||||||
|
<input
|
||||||
|
v-model="subjectInput"
|
||||||
|
type="search"
|
||||||
|
required
|
||||||
|
class="form-control"
|
||||||
|
id="subject-form"
|
||||||
|
placeholder="موضوع را تایپ نمایید."
|
||||||
|
name="subject-form"
|
||||||
|
aria-label="ایجاد موضوع جدید"
|
||||||
|
aria-describedby="basic-addon1"
|
||||||
|
size="50"
|
||||||
|
@keyup.exact.enter="saveSubject"
|
||||||
|
@keyup.exact.escape="hideSubjectForm"
|
||||||
|
/>
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button
|
||||||
|
@click.prevent="saveSubject"
|
||||||
|
type="button"
|
||||||
|
class="input-group-text show-reset-btn"
|
||||||
|
id="basic-addon1"
|
||||||
|
>
|
||||||
|
<!-- tick icon -->
|
||||||
|
<svg class="icon icon-Component-233--1">
|
||||||
|
<use xlink:href="#icon-Component-233--1"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="input-group-append">
|
||||||
|
<button
|
||||||
|
@click.prevent="hideSubjectForm"
|
||||||
|
type="button"
|
||||||
|
class="input-group-text show-reset-btn"
|
||||||
|
id="basic-addon1"
|
||||||
|
>
|
||||||
|
<!-- check icon -->
|
||||||
|
<i class="tavasi tavasi-Component-294--1"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="comment-actions">
|
||||||
|
<div class="btn-group labeling-dropdown">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
aria-haspopup="true"
|
||||||
|
aria-expanded="false"
|
||||||
|
title="برچسب زدن"
|
||||||
|
>
|
||||||
|
<!-- <svg class="icon icon-title"><use xlink:href="#icon-title"></use></svg> -->
|
||||||
|
<!-- <svg class="icon icon-label"><use xlink:href="#icon-label"></use></svg> -->
|
||||||
|
<span class="tavasi tavasi-label"></span>
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu dropdown-menu-right p-3">
|
||||||
|
<!-- :class="{ active: source.label_key.includes(label.id) }" -->
|
||||||
|
|
||||||
|
<button
|
||||||
|
v-for="(labelItem, key) in listGetter?.entity_labels"
|
||||||
|
class="dropdown-item text-end"
|
||||||
|
type="button"
|
||||||
|
:key="key"
|
||||||
|
@click.prevent="filterMessagesByLabel(labelItem)"
|
||||||
|
>
|
||||||
|
{{ labelItem.lable }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
title="پاسخ"
|
||||||
|
@click.prevent="openReplays()"
|
||||||
|
type="button"
|
||||||
|
class="btn outer-replay-btn"
|
||||||
|
>
|
||||||
|
<span class="tavasi tavasi-reply"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<context-menu
|
||||||
|
style="position: static"
|
||||||
|
:parentComponent="'comments'"
|
||||||
|
:contextMenu="contextMenu"
|
||||||
|
@remove-item="deleteItem(source.id)"
|
||||||
|
@reply-to="openReplays()"
|
||||||
|
@edit-item="editComment(source)"
|
||||||
|
@subjecting="openSubjectBox()"
|
||||||
|
@copy-text="copyText()"
|
||||||
|
@other="catchAllEvent"
|
||||||
|
width="12em"
|
||||||
|
maxHeight="20em"
|
||||||
|
></context-menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<vue-easy-lightbox
|
||||||
|
escDisabled
|
||||||
|
moveDisabled
|
||||||
|
:visible="visible"
|
||||||
|
:imgs="imgs"
|
||||||
|
:index="index"
|
||||||
|
@hide="handleHide"
|
||||||
|
></vue-easy-lightbox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import { mapGetters } from "vuex";
|
||||||
|
import { mapState, mapActions } from "pinia";
|
||||||
|
import { useChatStore } from "@chat/stores/chatStore";
|
||||||
|
import { useCommonStore } from "@stores/commonStore";
|
||||||
|
import privateMessagesContextMenu from "@chat/json/privateMessagesContextMenu.json";
|
||||||
|
import groupMessagesContextMenu from "@chat/json/groupMessagesContextMenu.json";
|
||||||
|
import lobbyMessagesContextMenu from "@chat/json/lobbyMessagesContextMenu.json";
|
||||||
|
// import groupsContextMenu from "@chat/json/groupsContextMenu.json";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mounted() {
|
||||||
|
if (this.$route.name == "privates")
|
||||||
|
this.contextMenu = privateMessagesContextMenu;
|
||||||
|
if (this.$route.name == "groups")
|
||||||
|
this.contextMenu = groupMessagesContextMenu;
|
||||||
|
if (this.$route.name == "lobbies")
|
||||||
|
this.contextMenu = lobbyMessagesContextMenu;
|
||||||
|
if (this.$route.name == "unReads") {
|
||||||
|
if (this.listGetter.icon_type == 1)
|
||||||
|
this.contextMenu = privateMessagesContextMenu;
|
||||||
|
else if (this.listGetter.icon_type == 2)
|
||||||
|
this.contextMenu = groupMessagesContextMenu;
|
||||||
|
}
|
||||||
|
|
||||||
|
// dynamic import : method two
|
||||||
|
// import(`@chat/json/messagesContextMenu.json`)
|
||||||
|
// .then((obj) => {
|
||||||
|
// this.contextMenu = obj.default;
|
||||||
|
// })
|
||||||
|
// ;
|
||||||
|
// this.localComment = structuredClone(this.comment);
|
||||||
|
},
|
||||||
|
// watch: {
|
||||||
|
// comment(newVal) {
|
||||||
|
// this.localComment = newVal;
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
|
||||||
|
props: {
|
||||||
|
index: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
source: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
showSelectionActionBar: {
|
||||||
|
default: false,
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
|
showCardReplays: {
|
||||||
|
default: false,
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
|
// comment: {
|
||||||
|
// default() {
|
||||||
|
// return {};
|
||||||
|
// },
|
||||||
|
// type: Object,
|
||||||
|
// },
|
||||||
|
selectedCommentsId: {
|
||||||
|
default() {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
type: Array,
|
||||||
|
},
|
||||||
|
replayFrom: {
|
||||||
|
default: "messages",
|
||||||
|
},
|
||||||
|
editFrom: {
|
||||||
|
default: "isMainEditMode",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// emits: ["replay-comment", "delete-replay", "edit", "open-replay"],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
contextMenu: undefined,
|
||||||
|
showSubjectBox: false,
|
||||||
|
showSubjectInput: false,
|
||||||
|
subjectInput: "موضوع زنی",
|
||||||
|
activeLabel: undefined,
|
||||||
|
commentMarginBoxForSubjecting: 0.5,
|
||||||
|
|
||||||
|
imgs: "", // Img Url , string or Array of string
|
||||||
|
visible: false,
|
||||||
|
// index: 0, // default: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(useCommonStore, ["currentUser", "sectionsGetter"]),
|
||||||
|
...mapState(useChatStore, ["listGetter"]),
|
||||||
|
|
||||||
|
updateSelectListAfterCheck: {
|
||||||
|
get() {
|
||||||
|
return this.selectedCommentsId;
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
this.dispatch("chat-list", "update-selected-comments-id", val);
|
||||||
|
|
||||||
|
// this.$emit("update-selected-comments-id", val);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
sectionItem() {
|
||||||
|
const section = this.listGetter?.entity_labels?.find(
|
||||||
|
(item) => item.entity_field_id == this.source.entity_field_id
|
||||||
|
);
|
||||||
|
return section;
|
||||||
|
},
|
||||||
|
replaysCount() {
|
||||||
|
if (this.source?.replys) return this.source?.replys?.count;
|
||||||
|
return 0;
|
||||||
|
},
|
||||||
|
userCommentedCount() {
|
||||||
|
const len = this.source?.replys?.users.length;
|
||||||
|
return len > 3 ? len - 3 : len;
|
||||||
|
},
|
||||||
|
// allReplayers() {
|
||||||
|
// let newUsers = [];
|
||||||
|
|
||||||
|
// if (this.source.replys)
|
||||||
|
// this.source.replys.users.forEach((user) => {
|
||||||
|
// this.replayUsers.forEach((item) => {
|
||||||
|
// if (user == item.user_id) newUsers.push(item);
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// return newUsers;
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getFilePath(url) {
|
||||||
|
return (
|
||||||
|
process.env.VUE_APP_BASE_URL +
|
||||||
|
process.env.VUE_APP_API_NAME +
|
||||||
|
this.fileMicroServiceName +
|
||||||
|
url
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
dispatch(componentName, eventName, ...rest) {
|
||||||
|
try {
|
||||||
|
let parent = this.$parent || this.$root;
|
||||||
|
let name = parent.$options.name;
|
||||||
|
|
||||||
|
while (parent && (!name || name !== componentName)) {
|
||||||
|
parent = parent.$parent;
|
||||||
|
if (parent) {
|
||||||
|
name = parent.$options.name;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (parent) {
|
||||||
|
parent.$emit.apply(parent, [eventName].concat(rest));
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.info(err);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// start: light box methods.
|
||||||
|
showLightBox(file) {
|
||||||
|
if (this.isImage(file.ext)) {
|
||||||
|
// this.imgs = item.url;
|
||||||
|
// or
|
||||||
|
this.imgs = [{ title: file.name, src: this.getFilePath(file.url) }];
|
||||||
|
this.show();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show() {
|
||||||
|
this.visible = true;
|
||||||
|
},
|
||||||
|
handleHide() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
// end: light box methods.
|
||||||
|
getFileExtension(filename) {
|
||||||
|
return filename?.split(".").pop();
|
||||||
|
},
|
||||||
|
isImage(fileName) {
|
||||||
|
return ["jpg", "jpeg", "png", "webp"].includes(fileName);
|
||||||
|
},
|
||||||
|
|
||||||
|
formatBytes(bytes, decimals = 2) {
|
||||||
|
if (!+bytes) return "0 Bytes";
|
||||||
|
|
||||||
|
const k = 1024;
|
||||||
|
const dm = decimals < 0 ? 0 : decimals;
|
||||||
|
const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
||||||
|
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
|
||||||
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
||||||
|
},
|
||||||
|
|
||||||
|
getSectionFromJahat() {
|
||||||
|
// this.$emit("get-section", this.source.entity_field_id);
|
||||||
|
this.dispatch("chat-list", "get-section", this.source.entity_field_id);
|
||||||
|
},
|
||||||
|
|
||||||
|
showSubjectForm() {
|
||||||
|
this.commentMarginBoxForSubjecting = 7.5;
|
||||||
|
this.showSubjectInput = true;
|
||||||
|
},
|
||||||
|
hideSubjectForm() {
|
||||||
|
this.showSubjectInput = false;
|
||||||
|
this.commentMarginBoxForSubjecting = 3;
|
||||||
|
},
|
||||||
|
|
||||||
|
openSubjectBox() {
|
||||||
|
this.commentMarginBoxForSubjecting = 3;
|
||||||
|
this.$set(this.source, "showSubjectBox", true);
|
||||||
|
},
|
||||||
|
closeSubjectBox() {
|
||||||
|
this.commentMarginBoxForSubjecting = 0.5;
|
||||||
|
this.$set(this.source, "showSubjectBox", false);
|
||||||
|
},
|
||||||
|
saveSubject() {},
|
||||||
|
filterMessagesByLabel(selectedLabel) {
|
||||||
|
// this.activeLabel = selectedLabel.id;
|
||||||
|
// this.$emit("save-label", selectedLabel ? selectedLabel.entity_field_id : null);
|
||||||
|
this.dispatch("chat-list", "save-label", {
|
||||||
|
selectedLabel: selectedLabel ? selectedLabel.entity_field_id : null,
|
||||||
|
comment: this.source,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
parseText(text) {
|
||||||
|
try {
|
||||||
|
let html = text; //JSON.parse(text);
|
||||||
|
html = html.replaceAll("\\n", "<br>").replace(/^"*|"*$/g, "");
|
||||||
|
return html;
|
||||||
|
} catch (err) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
replyComments() {
|
||||||
|
// this.$emit("replay-comment");
|
||||||
|
this.dispatch(
|
||||||
|
"chat-list",
|
||||||
|
"replay-comment",
|
||||||
|
this.source,
|
||||||
|
this.replayFrom,
|
||||||
|
this.editFrom
|
||||||
|
);
|
||||||
|
},
|
||||||
|
deleteItem() {
|
||||||
|
const vm = this;
|
||||||
|
// this.$emit("delete-replay");
|
||||||
|
this.dispatch(
|
||||||
|
"chat-list",
|
||||||
|
"delete-item",
|
||||||
|
this.source,
|
||||||
|
this.index,
|
||||||
|
this.editFrom,
|
||||||
|
this.replayFrom
|
||||||
|
);
|
||||||
|
},
|
||||||
|
editComment() {
|
||||||
|
const vm = this;
|
||||||
|
this.dispatch(
|
||||||
|
"chat-list",
|
||||||
|
"edit-item",
|
||||||
|
this.source,
|
||||||
|
vm.replayFrom,
|
||||||
|
vm.editFrom
|
||||||
|
);
|
||||||
|
},
|
||||||
|
openReplays() {
|
||||||
|
const vm = this;
|
||||||
|
// if (this.replayFrom == "replays") this.replyComments();
|
||||||
|
if (this.replayFrom == "replays") return;
|
||||||
|
else this.dispatch("chat-list", "open-replays", vm.source, vm.index);
|
||||||
|
},
|
||||||
|
async copyText() {
|
||||||
|
let text = null;
|
||||||
|
try {
|
||||||
|
text = JSON.parse(this.source.text);
|
||||||
|
} catch (error) {
|
||||||
|
text = this.source.text;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
// await navigator.clipboard.writeText(
|
||||||
|
// location.origin + location.pathname + text
|
||||||
|
// );
|
||||||
|
this.mySwalToast({
|
||||||
|
html: "پیام در کلیپ بورد کپی شد",
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.info(err);
|
||||||
|
|
||||||
|
this.mySwalToast({
|
||||||
|
html: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
catchAllEvent(action) {
|
||||||
|
this.dispatch(
|
||||||
|
"chat-list",
|
||||||
|
action,
|
||||||
|
this.source,
|
||||||
|
this.replayFrom,
|
||||||
|
this.editFrom
|
||||||
|
);
|
||||||
|
// this.$emit(action);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
ContextMenu: () => import("~/components/global/ContextMenu"),
|
||||||
|
MyVuePlyr: () => import("@chat/components/chat/components/MyVuePlyr"),
|
||||||
|
// VueEasyLightbox: () => import("vue-easy-lightbox"),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.file-icon-container {
|
||||||
|
.icon {
|
||||||
|
font-size: 1.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.download-btn {
|
||||||
|
min-width: 3em;
|
||||||
|
min-height: 3em;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
}
|
||||||
|
.labeling-dropdown {
|
||||||
|
.dropdown-item {
|
||||||
|
&.active {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.comment-container {
|
||||||
|
&.subjecting {
|
||||||
|
margin-bottom: 5em;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.subject-box {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
|
background-color: #f0f0f0;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
|
||||||
|
.subject-list {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.subject-list-item {
|
||||||
|
position: relative;
|
||||||
|
padding-right: 1.5em;
|
||||||
|
padding-left: 1.5em;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.edit-subject,
|
||||||
|
.remove-subject {
|
||||||
|
visibility: visible;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.edit-subject {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0.2em;
|
||||||
|
// opacity: 0.5;
|
||||||
|
// background-color: #fff;
|
||||||
|
// border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: auto;
|
||||||
|
transition: all 0.2s;
|
||||||
|
visibility: hidden;
|
||||||
|
color: #17a2b8;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #d8e7e9;
|
||||||
|
color: #17a2b8;
|
||||||
|
width: 70%;
|
||||||
|
border-radius: 0 0.5em 0.5em 0;
|
||||||
|
transition: all 0.2s;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-subject {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: auto;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
padding: 0.2em;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
// opacity: 0.5;
|
||||||
|
// background-color: #fff;
|
||||||
|
// border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
transition: all 0.2s;
|
||||||
|
visibility: hidden;
|
||||||
|
color: #dc3545;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #ecd9db;
|
||||||
|
color: #dc3545;
|
||||||
|
width: 70%;
|
||||||
|
border-radius: 0.5em 0 0 0.5em;
|
||||||
|
transition: all 0.2s;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-subject-box {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.subject {
|
||||||
|
.search-form {
|
||||||
|
border-radius: 0.5em;
|
||||||
|
* {
|
||||||
|
font-size: 0.8rem !important;
|
||||||
|
}
|
||||||
|
.input-group-append {
|
||||||
|
.input-group-text {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.chat-list-item-component {
|
||||||
|
.dropdown-menu {
|
||||||
|
max-width: 12m;
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0.2em 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#replays {
|
||||||
|
.comment-actions {
|
||||||
|
.outer-replay-btn {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -331,14 +331,14 @@
|
||||||
<img
|
<img
|
||||||
class="group-picture"
|
class="group-picture"
|
||||||
@error="handleImageSrcOnError($event, false)"
|
@error="handleImageSrcOnError($event, false)"
|
||||||
:src="getGroupAvatar(groupItem)"
|
src="~/assets/common/img/icomoon/PNG/eye.png"
|
||||||
:alt="groupItem.title"
|
:alt="groupItem.title"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
class="group-picture mini-mode"
|
class="group-picture mini-mode"
|
||||||
@error="handleImageSrcOnError($event, false)"
|
@error="handleImageSrcOnError($event, false)"
|
||||||
@click.prevent="showMessages(groups, groupItem, index)"
|
@click.prevent="showMessages(groups, groupItem, index)"
|
||||||
:src="getGroupAvatar(groupItem)"
|
src="~/assets/common/img/icomoon/PNG/eye.png"
|
||||||
:alt="groupItem.title"
|
:alt="groupItem.title"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -411,14 +411,14 @@
|
||||||
<img
|
<img
|
||||||
class="group-picture"
|
class="group-picture"
|
||||||
@error="handleImageSrcOnError($event, false)"
|
@error="handleImageSrcOnError($event, false)"
|
||||||
:src="getGroupAvatar(groupItem)"
|
src="~/assets/common/img/icomoon/PNG/eye.png"
|
||||||
:alt="groupItem.title"
|
:alt="groupItem.title"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
class="group-picture mini-mode"
|
class="group-picture mini-mode"
|
||||||
@error="handleImageSrcOnError($event, false)"
|
@error="handleImageSrcOnError($event, false)"
|
||||||
@click.prevent="showMessages(groups, groupItem, index)"
|
@click.prevent="showMessages(groups, groupItem, index)"
|
||||||
:src="getGroupAvatar(groupItem)"
|
src="~/assets/common/img/icomoon/PNG/eye.png"
|
||||||
:alt="groupItem.title"
|
:alt="groupItem.title"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -492,14 +492,14 @@
|
||||||
<img
|
<img
|
||||||
class="group-picture"
|
class="group-picture"
|
||||||
@error="handleImageSrcOnError($event, false)"
|
@error="handleImageSrcOnError($event, false)"
|
||||||
:src="getGroupAvatar(groupItem)"
|
src="~/assets/common/img/icomoon/PNG/eye.png"
|
||||||
:alt="groupItem.title"
|
:alt="groupItem.title"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
class="group-picture mini-mode"
|
class="group-picture mini-mode"
|
||||||
@error="handleImageSrcOnError($event, false)"
|
@error="handleImageSrcOnError($event, false)"
|
||||||
@click.prevent="showMessages(groups, groupItem, index)"
|
@click.prevent="showMessages(groups, groupItem, index)"
|
||||||
:src="getGroupAvatar(groupItem)"
|
src="~/assets/common/img/icomoon/PNG/eye.png"
|
||||||
:alt="groupItem.title"
|
:alt="groupItem.title"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1279,13 +1279,13 @@
|
||||||
import chatApi from "@chat/apis/chatApi";
|
import chatApi from "@chat/apis/chatApi";
|
||||||
import { mapState, mapActions } from "pinia";
|
import { mapState, mapActions } from "pinia";
|
||||||
|
|
||||||
import privatesContextMenu from "@chat/json/chat/json/privatesContextMenu.json";
|
import privatesContextMenu from "@chat/json/privatesContextMenu.json";
|
||||||
import groupsContextMenu from "@chat/json/chat/json/groupsContextMenu.json";
|
import groupsContextMenu from "@chat/json/groupsContextMenu.json";
|
||||||
|
|
||||||
import lobbiesChildContextMenu from "@chat/json/chat/json/lobbiesChildContextMenu.json";
|
import lobbiesChildContextMenu from "@chat/json/lobbiesChildContextMenu.json";
|
||||||
import lobbiesParentContextMenu from "@chat/json/chat/json/lobbiesParentContextMenu.json";
|
import lobbiesParentContextMenu from "@chat/json/lobbiesParentContextMenu.json";
|
||||||
|
|
||||||
import menu from "@chat/json/chat/json/menu.json";
|
import menu from "@chat/json/menu.json";
|
||||||
import { useCommonStore } from "@stores/commonStore";
|
import { useCommonStore } from "@stores/commonStore";
|
||||||
import { useChatStore } from "@chat/stores/chatStore";
|
import { useChatStore } from "@chat/stores/chatStore";
|
||||||
|
|
||||||
|
|
@ -1308,7 +1308,7 @@ export default {
|
||||||
$route: {
|
$route: {
|
||||||
handler: function (to) {
|
handler: function (to) {
|
||||||
if (this.getForwardItem) {
|
if (this.getForwardItem) {
|
||||||
this.groupId = this.getForwardItem?.to.id;
|
this.groupId = this.getForwardItem?.to?.id;
|
||||||
}
|
}
|
||||||
this.isRedirectedFromOtherSystems = false;
|
this.isRedirectedFromOtherSystems = false;
|
||||||
this.resetPagination();
|
this.resetPagination();
|
||||||
|
|
@ -1590,6 +1590,33 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(useChatStore, ["SET_LIST", "SET_SIDEBAR_LIST_STATUS"]),
|
...mapActions(useChatStore, ["SET_LIST", "SET_SIDEBAR_LIST_STATUS"]),
|
||||||
|
async getGroupAvatar(user = undefined) {
|
||||||
|
const res = (await import("~/assets/common/img/icomoon/PNG/eye.png"))
|
||||||
|
.default;
|
||||||
|
console.info(res);
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (user) {
|
||||||
|
if (isValidHttpUrl(user.avatar)) return user.avatar;
|
||||||
|
else {
|
||||||
|
if ("title" in user) {
|
||||||
|
const nameArray = user.title?.split(" ");
|
||||||
|
if (nameArray?.length > 1) {
|
||||||
|
const initials =
|
||||||
|
nameArray[0].charAt(0) + nameArray[1].charAt(0);
|
||||||
|
return generateAvatarFromChars(initials);
|
||||||
|
} else {
|
||||||
|
const initials = nameArray[0].charAt(0);
|
||||||
|
return generateAvatarFromChars(initials);
|
||||||
|
}
|
||||||
|
} else
|
||||||
|
return (await import("~/assets/common/img/default.svg")).default;
|
||||||
|
}
|
||||||
|
} else return (await import("~/assets/common/img/default.svg")).default;
|
||||||
|
} catch (err) {
|
||||||
|
return (await import("~/assets/common/img/default.svg")).default;
|
||||||
|
}
|
||||||
|
},
|
||||||
handleImageSrcOnError({ target }, isUserAvatar = true) {
|
handleImageSrcOnError({ target }, isUserAvatar = true) {
|
||||||
if (isUserAvatar) target.classList.add("human-avatar");
|
if (isUserAvatar) target.classList.add("human-avatar");
|
||||||
target.classList.add("error");
|
target.classList.add("error");
|
||||||
|
|
@ -2030,11 +2057,11 @@ export default {
|
||||||
markActive(groups, index) {
|
markActive(groups, index) {
|
||||||
try {
|
try {
|
||||||
if (this.prevSelectedItemIndex != index) {
|
if (this.prevSelectedItemIndex != index) {
|
||||||
this.$set(groups[this.prevSelectedItemIndex], "active", false);
|
groups[this.prevSelectedItemIndex], "active", false;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.prevSelectedItemIndex = index;
|
this.prevSelectedItemIndex = index;
|
||||||
this.$set(groups[index], "active", true);
|
groups[index], "active", true;
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
this.prevSelectedItemIndex = undefined;
|
this.prevSelectedItemIndex = undefined;
|
||||||
}
|
}
|
||||||
|
|
@ -2060,8 +2087,8 @@ export default {
|
||||||
// برای دریافت درست پاسخ ها بایستی invite-id
|
// برای دریافت درست پاسخ ها بایستی invite-id
|
||||||
// در روت رو اصلاح کرد
|
// در روت رو اصلاح کرد
|
||||||
if (groupItem.redirectViaInviteLink)
|
if (groupItem.redirectViaInviteLink)
|
||||||
this.$set(this.$route.query, "invite-id", this.listGetter?.invite_id);
|
this.$route.query, "invite-id", this.listGetter?.invite_id;
|
||||||
else this.$set(this.$route.query, "invite-id", undefined);
|
else this.$route.query, "invite-id", undefined;
|
||||||
|
|
||||||
if (!this.redirectViaInviteLink)
|
if (!this.redirectViaInviteLink)
|
||||||
history.pushState(
|
history.pushState(
|
||||||
|
|
@ -2072,8 +2099,8 @@ export default {
|
||||||
|
|
||||||
this.isRedirectedFromOtherSystems = false;
|
this.isRedirectedFromOtherSystems = false;
|
||||||
this.redirectViaInviteLink = false;
|
this.redirectViaInviteLink = false;
|
||||||
this.$set(this.$route.query, "group-id", undefined);
|
this.$route.query, "group-id", undefined;
|
||||||
this.$set(this.$route.query, "message-id", undefined);
|
this.$route.query, "message-id", undefined;
|
||||||
// this.$route.query["group-id"] = undefined;
|
// this.$route.query["group-id"] = undefined;
|
||||||
// this.$route.query["message-id"] = undefined;
|
// this.$route.query["message-id"] = undefined;
|
||||||
if (groupItem.type == 0)
|
if (groupItem.type == 0)
|
||||||
|
|
@ -2089,28 +2116,24 @@ export default {
|
||||||
lobbyParentShowMessages(lobby, parentIndex, groupItem) {
|
lobbyParentShowMessages(lobby, parentIndex, groupItem) {
|
||||||
// اگر تالارثابت باشه و کاربر بر روی گروه های تالار کلیک کند.
|
// اگر تالارثابت باشه و کاربر بر روی گروه های تالار کلیک کند.
|
||||||
if (this.prevParentSelectedItemIndex == parentIndex) {
|
if (this.prevParentSelectedItemIndex == parentIndex) {
|
||||||
this.$set(
|
lobby[this.prevParentSelectedItemIndex].sub_groups[
|
||||||
lobby[this.prevParentSelectedItemIndex].sub_groups[
|
this.prevSelectedItemIndex
|
||||||
this.prevSelectedItemIndex
|
],
|
||||||
],
|
|
||||||
"active",
|
"active",
|
||||||
false
|
false;
|
||||||
);
|
|
||||||
}
|
}
|
||||||
// کاربر بر روی تالار دیگری کلیک کرده است.
|
// کاربر بر روی تالار دیگری کلیک کرده است.
|
||||||
else if (this.prevParentSelectedItemIndex != parentIndex) {
|
else if (this.prevParentSelectedItemIndex != parentIndex) {
|
||||||
this.$set(
|
lobby[this.prevParentSelectedItemIndex].sub_groups[
|
||||||
lobby[this.prevParentSelectedItemIndex].sub_groups[
|
this.prevSelectedItemIndex
|
||||||
this.prevSelectedItemIndex
|
],
|
||||||
],
|
|
||||||
"active",
|
"active",
|
||||||
false
|
false;
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.prevParentSelectedItemIndex = parentIndex;
|
this.prevParentSelectedItemIndex = parentIndex;
|
||||||
|
|
||||||
this.$set(lobby[parentIndex], "active", true);
|
lobby[parentIndex], "active", true;
|
||||||
|
|
||||||
this.SET_LIST(groupItem);
|
this.SET_LIST(groupItem);
|
||||||
this.$emit("update-messages");
|
this.$emit("update-messages");
|
||||||
|
|
@ -2123,29 +2146,25 @@ export default {
|
||||||
this.prevParentSelectedItemIndex == parentIndex &&
|
this.prevParentSelectedItemIndex == parentIndex &&
|
||||||
this.prevSelectedItemIndex != index
|
this.prevSelectedItemIndex != index
|
||||||
) {
|
) {
|
||||||
this.$set(
|
lobby[this.prevParentSelectedItemIndex].sub_groups[
|
||||||
lobby[this.prevParentSelectedItemIndex].sub_groups[
|
this.prevSelectedItemIndex
|
||||||
this.prevSelectedItemIndex
|
],
|
||||||
],
|
|
||||||
"active",
|
"active",
|
||||||
false
|
false;
|
||||||
);
|
|
||||||
}
|
}
|
||||||
// کاربر بر روی تالار دیگری کلیک کرده است.
|
// کاربر بر روی تالار دیگری کلیک کرده است.
|
||||||
else if (this.prevParentSelectedItemIndex != parentIndex) {
|
else if (this.prevParentSelectedItemIndex != parentIndex) {
|
||||||
this.$set(
|
lobby[this.prevParentSelectedItemIndex].sub_groups[
|
||||||
lobby[this.prevParentSelectedItemIndex].sub_groups[
|
this.prevSelectedItemIndex
|
||||||
this.prevSelectedItemIndex
|
],
|
||||||
],
|
|
||||||
"active",
|
"active",
|
||||||
false
|
false;
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.prevSelectedItemIndex = index;
|
this.prevSelectedItemIndex = index;
|
||||||
this.prevParentSelectedItemIndex = parentIndex;
|
this.prevParentSelectedItemIndex = parentIndex;
|
||||||
|
|
||||||
this.$set(lobby[parentIndex].sub_groups[index], "active", true);
|
lobby[parentIndex].sub_groups[index], "active", true;
|
||||||
|
|
||||||
this.SET_LIST(groupItem);
|
this.SET_LIST(groupItem);
|
||||||
this.$emit("update-messages");
|
this.$emit("update-messages");
|
||||||
|
|
@ -2437,7 +2456,7 @@ export default {
|
||||||
.postRequest(url, payload)
|
.postRequest(url, payload)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
// this.$route.query["invite-id"] = undefined;
|
// this.$route.query["invite-id"] = undefined;
|
||||||
this.$set(this.$route.query, "invite-id", undefined);
|
this.$route.query, "invite-id", undefined;
|
||||||
this.groupId = res.data.id;
|
this.groupId = res.data.id;
|
||||||
this.resetPagination();
|
this.resetPagination();
|
||||||
|
|
||||||
|
|
|
||||||
159
components/chat/components/MyVuePlyr.vue
Normal file
159
components/chat/components/MyVuePlyr.vue
Normal file
|
|
@ -0,0 +1,159 @@
|
||||||
|
<template>
|
||||||
|
<div class="mt-2" id="myVid">
|
||||||
|
<!-- video element -->
|
||||||
|
<!-- <vue-plyr :options="options">
|
||||||
|
<video controls crossorigin playsinline data-poster="poster.jpg">
|
||||||
|
<source size="720" src="/path/to/video-720p.mp4" type="video/mp4" />
|
||||||
|
<source size="1080" src="/path/to/video-1080p.mp4" type="video/mp4" />
|
||||||
|
<track
|
||||||
|
default
|
||||||
|
kind="captions"
|
||||||
|
label="English captions"
|
||||||
|
src="/path/to/english.vtt"
|
||||||
|
srclang="en"
|
||||||
|
/>
|
||||||
|
</video>
|
||||||
|
</vue-plyr> -->
|
||||||
|
|
||||||
|
<!-- audio element -->
|
||||||
|
<vue-plyr ref="plyr" :options="options">
|
||||||
|
<video v-if="type == 'video'" controls crossorigin playsinline>
|
||||||
|
<source
|
||||||
|
size="720"
|
||||||
|
:src="file.attachment.url"
|
||||||
|
:type="'video/' + file.attachment.ext"
|
||||||
|
/>
|
||||||
|
</video>
|
||||||
|
|
||||||
|
<audio v-else controls crossorigin playsinline data-poster="poster.jpg">
|
||||||
|
<source
|
||||||
|
:src="file.attachment.url"
|
||||||
|
:type="'audio/' + file.attachment.ext"
|
||||||
|
/>
|
||||||
|
</audio>
|
||||||
|
</vue-plyr>
|
||||||
|
<p class="my-2">
|
||||||
|
{{ file.attachment.name }}
|
||||||
|
</p>
|
||||||
|
<p class="my-2">
|
||||||
|
{{ formatBytes(file.attachment.length) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* @vue-prop {String} [type] - نوع فایل
|
||||||
|
* @vue-prop {Object} [file] - فایل
|
||||||
|
*
|
||||||
|
* @vue-data {undefined} [canvas=undefined] - یک محیط توسعه وب برای رسم شکلها، تصاویر، ویدیوها و سایر عناصر گرافیکی است.
|
||||||
|
* @vue-data {Object} [options] - گزینههای ویدیو پلیر
|
||||||
|
* @vue-data {Array} [options.controls] - کنترلهای ویدیو پلیر
|
||||||
|
* @vue-data {Array} [options.controls=["play", "progress", "current-time", "mute", "volume", "settings", "download"]] - کنترلهای ویدیو پلیر (پخش، پیشرفت، زمان فعلی، بیصدا، میزان صدا، تنظیمات، دانلود)
|
||||||
|
* @vue-data {Object} [options.speed] - سرعت پخش ویدیو
|
||||||
|
* @vue-data {Number} [options.speed.selected=1] - سرعت پخش انتخاب شده
|
||||||
|
* @vue-data {Array} [options.speed.options=[0.75, 1, 1.5, 2]] - گزینههای سرعت پخش ویدیو
|
||||||
|
*/
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: ["type", "file"],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
canvas: undefined,
|
||||||
|
options: {
|
||||||
|
controls: [
|
||||||
|
// "play-large", // The large play button in the center
|
||||||
|
//'restart', // Restart playback
|
||||||
|
// "rewind", // Rewind by the seek time (default 10 seconds)
|
||||||
|
"play", // Play/pause playback
|
||||||
|
// "fast-forward", // Fast forward by the seek time (default 10 seconds)
|
||||||
|
"progress", // The progress bar and scrubber for playback and buffering
|
||||||
|
"current-time", // The current time of playback
|
||||||
|
// "duration", // The full duration of the media
|
||||||
|
"mute", // Toggle mute
|
||||||
|
"volume", // Volume control
|
||||||
|
// "captions", // Toggle captions
|
||||||
|
"settings", // Settings menu
|
||||||
|
// "pip", // Picture-in-picture (currently Safari only)
|
||||||
|
// "airplay", // Airplay (currently Safari only)
|
||||||
|
"download", // Show a download button with a link to either the current source or a custom URL you specify in your options
|
||||||
|
// "fullscreen", // Toggle fullscreen
|
||||||
|
],
|
||||||
|
speed: { selected: 1, options: [0.75, 1, 1.5, 2] },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* گرفتن عکس از ویدیو.
|
||||||
|
* این متد یک عکس از ویدیویی که در آن زمان مشخص شده است، گرفته و آن را به عنوان پوستر ویدیو تنظیم میکند.
|
||||||
|
*/
|
||||||
|
captureSnapshot() {
|
||||||
|
// var video = this.$refs.mediaPlayer;
|
||||||
|
// this.canvas = document.getElementById("snapshotCanvas");
|
||||||
|
// var context = canvas.getContext("2d");
|
||||||
|
|
||||||
|
// canvas.width = video.videoWidth;
|
||||||
|
// canvas.height = video.videoHeight;
|
||||||
|
|
||||||
|
// video.currentTime = 10;
|
||||||
|
|
||||||
|
// context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
var container = document.getElementById("myVid"),
|
||||||
|
video = document.createElement("video"),
|
||||||
|
canCapture = true;
|
||||||
|
if (!video.canPlayType("video/wmv")) {
|
||||||
|
/* If you don't have multiple sources, you can load up a Flash fallback here
|
||||||
|
(like jPlayer), but you won't be able to capture frames */
|
||||||
|
canCapture = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
video.src = this.file.attachment.url;
|
||||||
|
video.currentTime = "10.0";
|
||||||
|
|
||||||
|
container.appendChild(video);
|
||||||
|
video.play(); //or put this in a button click handler if you want your own controls
|
||||||
|
|
||||||
|
var canvas = document.createElement("canvas");
|
||||||
|
canvas.width = 640;
|
||||||
|
canvas.height = 480;
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
// if you want to preview the captured image,
|
||||||
|
// attach the canvas to the DOM somewhere you can see it.
|
||||||
|
|
||||||
|
//draw image to canvas. scale to target dimensions
|
||||||
|
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
//convert to desired file format
|
||||||
|
this.$refs.plyr.player.poster = canvas.toDataURL("image/jpeg"); // can also use 'image/png'
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* فرمت کردن حجم فایل.
|
||||||
|
* این متد حجم فایل را به صورت خوانا و فرمتداده شده با واحدهای مناسب برمیگرداند.
|
||||||
|
*
|
||||||
|
* @param {number} bytes - حجم فایل به بایت
|
||||||
|
* @param {number} [decimals=2] - تعداد اعشار برای نمایش
|
||||||
|
* @returns {string} - حجم فایل به صورت فرمتداده شده
|
||||||
|
*/
|
||||||
|
formatBytes(bytes, decimals = 2) {
|
||||||
|
if (!+bytes) return "0 Bytes";
|
||||||
|
|
||||||
|
const k = 1024;
|
||||||
|
const dm = decimals < 0 ? 0 : decimals;
|
||||||
|
const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
||||||
|
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
|
||||||
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.captureSnapshot()
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -125,8 +125,8 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from "pinia";
|
import { mapState } from "pinia";
|
||||||
import { entityMixin } from "~/chat/mixins/entityMixin";
|
import { entityMixin } from "@chat/mixins/entityMixin";
|
||||||
import { commonMixin } from "~/chat/mixins/commonMixin";
|
import commonMixin from "@chat/mixins/commonMixin";
|
||||||
import repoApi from "~/apis/repoApi";
|
import repoApi from "~/apis/repoApi";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -149,8 +149,8 @@
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from "pinia";
|
import { mapState } from "pinia";
|
||||||
import { propertyMixin } from "~/chat/mixins/propertyMixin";
|
import { propertyMixin } from "~/chat/mixins/propertyMixin";
|
||||||
import { commonMixin } from "~/chat/mixins/commonMixin";
|
import commonMixin from "@chat/mixins/commonMixin";
|
||||||
import { entityMixin } from "~/chat/mixins/entityMixin";
|
import { entityMixin } from "@chat/mixins/entityMixin";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [propertyMixin, commonMixin, entityMixin],
|
mixins: [propertyMixin, commonMixin, entityMixin],
|
||||||
|
|
|
||||||
|
|
@ -76,8 +76,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { propertyMixin } from "~/chat/mixins/propertyMixin";
|
import { propertyMixin } from "@chat/mixins/propertyMixin";
|
||||||
import { commonMixin } from "~/chat/mixins/commonMixin";
|
import commonMixin from "@chat/mixins/commonMixin";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [propertyMixin, commonMixin],
|
mixins: [propertyMixin, commonMixin],
|
||||||
|
|
|
||||||
|
|
@ -117,8 +117,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { propertyMixin } from "~/chat/mixins/propertyMixin";
|
import { propertyMixin } from "@chat/chat/mixins/propertyMixin";
|
||||||
import { commonMixin } from "~/chat/mixins/commonMixin";
|
import commonMixin from "@chat/mixins/commonMixin";
|
||||||
|
|
||||||
import { mapState } from "pinia";
|
import { mapState } from "pinia";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -115,8 +115,8 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { entityMixin } from "~/chat/mixins/entityMixin";
|
import { entityMixin } from "@chat/mixins/entityMixin";
|
||||||
import { commonMixin } from "~/chat/mixins/commonMixin";
|
import commonMixin from "@chat/mixins/commonMixin";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
|
|
||||||
|
|
@ -63,8 +63,8 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { propertyMixin } from "~/chat/mixins/propertyMixin";
|
import { propertyMixin } from "@chat/mixins/propertyMixin";
|
||||||
import { commonMixin } from "~/chat/mixins/commonMixin";
|
import commonMixin from "@chat/mixins/commonMixin";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [propertyMixin, commonMixin],
|
mixins: [propertyMixin, commonMixin],
|
||||||
|
|
|
||||||
377
mixins/commonMixin.js
Normal file
377
mixins/commonMixin.js
Normal file
|
|
@ -0,0 +1,377 @@
|
||||||
|
// import HttpService from "~/services/httpService";
|
||||||
|
import chatApi from "@chat/apis/chatApi";
|
||||||
|
// import repoApi from "~/apis/repoApi";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
beforeMount() {
|
||||||
|
this.httpService = useNuxtApp()["$http"];
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
closeList() {
|
||||||
|
this.SET_SIDEBAR_LIST_STATUS();
|
||||||
|
// this.footerAction = actionName;
|
||||||
|
this.menubarStatus = !this.menubarStatus;
|
||||||
|
|
||||||
|
// this.$root.$emit("show-search", this.menubarStatus);
|
||||||
|
},
|
||||||
|
initServices() {
|
||||||
|
// const headers = {
|
||||||
|
// "app-id": import.meta.env.VITE_APP_ID,
|
||||||
|
// lang: import.meta.env.VITE_LANG,
|
||||||
|
// "app-version-code": import.meta.env.VITE_APP_VERSION,
|
||||||
|
// };
|
||||||
|
|
||||||
|
this.fileUploadHttpService = new HttpService(
|
||||||
|
import.meta.env.VITE_MESSAGE_BASE_URL,
|
||||||
|
{
|
||||||
|
"Content-Type": "multipart/form-data",
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// this.issueHttpService = new HttpService(
|
||||||
|
// import.meta.env.VITE_REPO_BASE_URL + "jahat/"
|
||||||
|
// );
|
||||||
|
|
||||||
|
this.httpService = new HttpService(
|
||||||
|
import.meta.env.VITE_BASE_URL
|
||||||
|
// headers
|
||||||
|
);
|
||||||
|
|
||||||
|
// this.keyValueHttpService = new HttpService(
|
||||||
|
// import.meta.env.VITE_KEY_VALUE_BASE_URL
|
||||||
|
// );
|
||||||
|
|
||||||
|
// this.messageHttpService = new HttpService(
|
||||||
|
// import.meta.env.VITE_MESSAGE_BASE_URL
|
||||||
|
// );
|
||||||
|
},
|
||||||
|
openAuthModal() {
|
||||||
|
if (!this.isGuest && this.listGetter?.show_joined) {
|
||||||
|
this.$root.$emit(
|
||||||
|
"authenticated-by-modal",
|
||||||
|
this.$route.query["invite-id"]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// fired event cached in the Group.vue and ChatList.vue
|
||||||
|
else this.showAuthModal = true;
|
||||||
|
},
|
||||||
|
closeAuthModal() {
|
||||||
|
this.showAuthModal = false;
|
||||||
|
},
|
||||||
|
getFileExtension(filename) {
|
||||||
|
return filename?.split("/").pop();
|
||||||
|
},
|
||||||
|
formatBytes(bytes, decimals = 2) {
|
||||||
|
if (!+bytes) return "0 Bytes";
|
||||||
|
|
||||||
|
const k = 1024;
|
||||||
|
const dm = decimals < 0 ? 0 : decimals;
|
||||||
|
const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
||||||
|
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
|
||||||
|
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
|
||||||
|
},
|
||||||
|
async handlePasteEvent(e) {
|
||||||
|
this.uploadDescription = null;
|
||||||
|
|
||||||
|
// navigator is not supported in the firefox.
|
||||||
|
if (!navigator.userAgent.includes("Firefox/")) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// catching the pasted text and place it into the comment form.
|
||||||
|
navigator.clipboard
|
||||||
|
.readText()
|
||||||
|
.then((text) => {
|
||||||
|
if (this.showReplays) {
|
||||||
|
this.mySwalConfirm({
|
||||||
|
icon: "info",
|
||||||
|
title: "جایگزاری در فرم پیام ها؟",
|
||||||
|
html: "",
|
||||||
|
text: "متن کپی شده در فرم اصلی جایگزاری شود یا فرم پاسخ ها؟",
|
||||||
|
confirmButtonText: "بله",
|
||||||
|
cancelButtonText: "خیر",
|
||||||
|
didOpen: (toast) => {},
|
||||||
|
showCloseButton: true,
|
||||||
|
willClose: () => {
|
||||||
|
},
|
||||||
|
didClose() {
|
||||||
|
},
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
if (this.userMessage?.length) {
|
||||||
|
this.userMessage += " " + text;
|
||||||
|
} else {
|
||||||
|
this.userMessage = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
// this.userMessage = this.userMessage
|
||||||
|
// ? this.userMessage + text
|
||||||
|
// : text;
|
||||||
|
} else if (result.isDismissed && result.dismiss == "cancel") {
|
||||||
|
if (this.replayText?.length) {
|
||||||
|
this.replayText += " " + text;
|
||||||
|
} else {
|
||||||
|
this.replayText = text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// this.replayText = this.replayText
|
||||||
|
// ? this.replayText + text
|
||||||
|
// : text;
|
||||||
|
});
|
||||||
|
|
||||||
|
// const res = confirm("جایگزاری در فرم پیام ها؟");
|
||||||
|
// if (res) this.userMessage = text;
|
||||||
|
// else this.replayText = text;
|
||||||
|
} else {
|
||||||
|
if (this.userMessage?.length) {
|
||||||
|
this.userMessage += " " + text;
|
||||||
|
} else {
|
||||||
|
this.userMessage = text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// this.userMessage = this.userMessage
|
||||||
|
// ? this.userMessage + text
|
||||||
|
// : text;
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.error("Failed to read clipboard contents: ", err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const clipboardItems =
|
||||||
|
typeof navigator?.clipboard?.read === "function"
|
||||||
|
? await navigator.clipboard.read()
|
||||||
|
: e.clipboardData.files;
|
||||||
|
|
||||||
|
for (const clipboardItem of clipboardItems) {
|
||||||
|
let blob;
|
||||||
|
|
||||||
|
if (clipboardItem.type?.startsWith("image/")) {
|
||||||
|
let fileType = clipboardItem?.type?.split("/")[1];
|
||||||
|
|
||||||
|
// For files from `e.clipboardData.files`.
|
||||||
|
blob = clipboardItem;
|
||||||
|
|
||||||
|
this.files = [];
|
||||||
|
this.files.push(new File([blob], fileType));
|
||||||
|
// this.files.push(blob);
|
||||||
|
this.showDroppedList = true;
|
||||||
|
this.dropBoxClass = "messages";
|
||||||
|
} else {
|
||||||
|
// For files from `navigator.clipboard.read()`.
|
||||||
|
const imageTypes = clipboardItem.types?.filter((type) =>
|
||||||
|
type.startsWith("image/")
|
||||||
|
);
|
||||||
|
for (const imageType of imageTypes) {
|
||||||
|
let fileType = imageType.split("/")[1];
|
||||||
|
|
||||||
|
blob = await clipboardItem.getType(imageType);
|
||||||
|
|
||||||
|
this.files = [];
|
||||||
|
this.files.push(new File([blob], fileType));
|
||||||
|
this.showDroppedList = true;
|
||||||
|
this.dropBoxClass = "messages";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 0: "image/png"
|
||||||
|
|
||||||
|
// 0: "text/plain"
|
||||||
|
// 1: "text/html"
|
||||||
|
},
|
||||||
|
checkPermisionBeforGetList() {
|
||||||
|
this.checkPermissions({
|
||||||
|
permission: `${this.$route.name}_list`,
|
||||||
|
_this: this,
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.toLastItem();
|
||||||
|
this.canView = true;
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.canView = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
replaceTextWithLink(text) {
|
||||||
|
const clonedText = text;
|
||||||
|
try {
|
||||||
|
const Rexp =
|
||||||
|
/((http|https|ftp):\/\/[\w?=&.\/-;#~%-]+(?![\w\s?&.\/;#~%"=-]*>))/g;
|
||||||
|
|
||||||
|
// Replace the RegExp content by HTML element
|
||||||
|
return text.replace(
|
||||||
|
Rexp,
|
||||||
|
`<a href="${clonedText}" title="${clonedText}" target='_blank'>${clonedText}</a>`
|
||||||
|
);
|
||||||
|
} catch (err) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
saveLabel(selectedLabel, comment) {
|
||||||
|
if (this.savingComment) return;
|
||||||
|
this.savingComment = true;
|
||||||
|
|
||||||
|
let payload = {
|
||||||
|
group_id: this.listGetter.id,
|
||||||
|
id: comment.id,
|
||||||
|
entity_field_id: selectedLabel,
|
||||||
|
};
|
||||||
|
|
||||||
|
let url = "message/" + chatApi.messages.create;
|
||||||
|
|
||||||
|
this.httpService
|
||||||
|
.formDataRequest(url, payload)
|
||||||
|
.then((res) => {
|
||||||
|
comment.entity_field_id = selectedLabel;
|
||||||
|
// this.getMessages();
|
||||||
|
})
|
||||||
|
|
||||||
|
.catch((err) => {})
|
||||||
|
.finally(() => {
|
||||||
|
this.savingComment = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getMids(messages) {
|
||||||
|
return messages.map((message) => message.id);
|
||||||
|
},
|
||||||
|
showfilters() {
|
||||||
|
this.$emit("my-event", (this.statusPage = 1));
|
||||||
|
},
|
||||||
|
closefilter() {
|
||||||
|
this.showFilter = false;
|
||||||
|
},
|
||||||
|
groupDescription(text) {
|
||||||
|
let res = "";
|
||||||
|
try {
|
||||||
|
res = JSON.parse(text);
|
||||||
|
} catch (err) {
|
||||||
|
res = text;
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
showMessageSearch() {
|
||||||
|
// this.SET_SIDEBAR_LIST_STATUS(false);
|
||||||
|
this.$root.$emit("show-search", true);
|
||||||
|
// this.$emit("show-search");
|
||||||
|
},
|
||||||
|
async onResult(data) {
|
||||||
|
// در صورت استفاده از پلاگین ،برای متوقف کردن
|
||||||
|
// علامت ضبط صدا از روی تب، بایستی از این کدها استفاده شود.
|
||||||
|
// const audioTracks = this.mediaStream.getAudioTracks();
|
||||||
|
// audioTracks.forEach((element) => {
|
||||||
|
// element.stop();
|
||||||
|
// });
|
||||||
|
|
||||||
|
this.files = [];
|
||||||
|
this.files.push(new File([data], "mp3"));
|
||||||
|
|
||||||
|
// if (this.abortRecord) return;
|
||||||
|
// this.abortRecord = true;
|
||||||
|
|
||||||
|
this.mainSaveFiles().then(() => {
|
||||||
|
// this.recording = false;
|
||||||
|
// this.abortRecord = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async makeLink(comment) {
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
["group-id"]: this.listGetter.id,
|
||||||
|
["message-id"]: comment.id,
|
||||||
|
});
|
||||||
|
let link = location.origin + location.pathname + "?" + params.toString();
|
||||||
|
|
||||||
|
link += "#chat-item-" + comment.id;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(link);
|
||||||
|
this.mySwalToast({
|
||||||
|
html: "لینک کپی شد.",
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
|
||||||
|
|
||||||
|
this.mySwalToast({
|
||||||
|
html: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateMessageCount() {
|
||||||
|
const currentUserModel = {
|
||||||
|
avatar: this.currentUser.user_data.avatar,
|
||||||
|
color: 40080,
|
||||||
|
first_name: this.currentUser.user_data.avatar,
|
||||||
|
full_name: this.currentUser.user_data.avatar,
|
||||||
|
id: this.currentUser.user_id,
|
||||||
|
last_name: this.currentUser.user_data.last_name,
|
||||||
|
user_id: this.currentUser.user_id,
|
||||||
|
username: this.currentUser.user_data.username,
|
||||||
|
};
|
||||||
|
// finding the target comment by id.
|
||||||
|
this.localComments.forEach((com) => {
|
||||||
|
// if comment id is equal to the comment user want to replay.
|
||||||
|
if (com.id == this.replayTo.id) {
|
||||||
|
// increment the comment count.
|
||||||
|
this.$set(com.replys, "count", ++com.replys.count);
|
||||||
|
|
||||||
|
// if comment has users, then
|
||||||
|
if (com.replys.users.length) {
|
||||||
|
// finding the index of the user by current user id.
|
||||||
|
const index = com.replys.users.find(
|
||||||
|
(user) => user.user_id == this.currentUser.user_id
|
||||||
|
);
|
||||||
|
|
||||||
|
// if current user didn't exist, then push it to comments users array.
|
||||||
|
if (index == -1) com.replys.users.push(currentUserModel);
|
||||||
|
} else com.replys.users.push(currentUserModel);
|
||||||
|
}
|
||||||
|
// com.replys.count++;
|
||||||
|
});
|
||||||
|
|
||||||
|
// let payload = {
|
||||||
|
// group_id: this.listGetter.id,
|
||||||
|
// contact_id:
|
||||||
|
// this.$route.name == "privates" ? this.listGetter.user : undefined,
|
||||||
|
// ...this.pagination,
|
||||||
|
// };
|
||||||
|
|
||||||
|
// this.httpService
|
||||||
|
// .postRequest(chatApi.messages.virtualList, payload)
|
||||||
|
// .then((response) => {
|
||||||
|
// if (response.data && response.data.length) {
|
||||||
|
// // this.replayUsers = structuredClone(response.users);
|
||||||
|
// this.localComments = response.data;
|
||||||
|
// this.setUsers(this.localComments, response.users);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
setUsers(list, responseUsers) {
|
||||||
|
list.forEach((listItem) => {
|
||||||
|
listItem.user = responseUsers.find(
|
||||||
|
(user) => user.user_id == listItem.user
|
||||||
|
);
|
||||||
|
if (listItem.replys)
|
||||||
|
listItem.replys.users = this.allReplayers(listItem, responseUsers);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
limitText(count) {
|
||||||
|
return `و ${count} کاربر دیگر`;
|
||||||
|
},
|
||||||
|
parseText(text) {
|
||||||
|
try {
|
||||||
|
return JSON.parse(text);
|
||||||
|
} catch (err) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resetPagination() {
|
||||||
|
this.pagination = {
|
||||||
|
page: 0,
|
||||||
|
total: 0,
|
||||||
|
pageTop: 0,
|
||||||
|
pageBottom: 1,
|
||||||
|
seenDate: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
54
mixins/createdMixin.js
Normal file
54
mixins/createdMixin.js
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
export default {
|
||||||
|
created() {
|
||||||
|
const { $eventBus } = useNuxtApp();
|
||||||
|
|
||||||
|
$eventBus.on("replay-comment", (comment, editFrom, replayFrom) => {
|
||||||
|
this.replyComments(comment, editFrom, replayFrom);
|
||||||
|
});
|
||||||
|
// detecting change checked value from item component event.
|
||||||
|
$eventBus.on("open-replays", (comment, index) => {
|
||||||
|
this.openReplays(comment, index);
|
||||||
|
});
|
||||||
|
// detecting change checked value from item component event.
|
||||||
|
$eventBus.on("edit-item", (comment, editFrom, replayFrom) => {
|
||||||
|
this.editComment(comment, editFrom, replayFrom);
|
||||||
|
});
|
||||||
|
// detecting change checked value from item component event.
|
||||||
|
$eventBus.on("delete-item", (comment, index, editFrom, replayFrom) => {
|
||||||
|
this.deleteItem(comment, index, editFrom, replayFrom);
|
||||||
|
});
|
||||||
|
// detecting change checked value from item component event.
|
||||||
|
$eventBus.on("update-selected-comments-id", ($event) => {
|
||||||
|
this.selectedCommentsId = $event;
|
||||||
|
});
|
||||||
|
// detecting change checked value from item component event.
|
||||||
|
$eventBus.on("select-many", () => {
|
||||||
|
this.showSelectionActionBar = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
// detecting change checked value from item component event.
|
||||||
|
$eventBus.on("save-label", (data) => {
|
||||||
|
this.saveLabel(data.selectedLabel, data.comment);
|
||||||
|
});
|
||||||
|
// detecting change checked value from item component event.
|
||||||
|
$eventBus.on("get-section", ($event, comment) => {
|
||||||
|
this.getSectionDetails($event, comment);
|
||||||
|
});
|
||||||
|
// detecting change checked value from item component event.
|
||||||
|
$eventBus.on("make-message-link", (comment) => {
|
||||||
|
this.makeLink(comment);
|
||||||
|
});
|
||||||
|
// detecting change checked value from item component event.
|
||||||
|
$eventBus.on("forward-to", (comment) => {
|
||||||
|
this.openForwardModal(comment);
|
||||||
|
});
|
||||||
|
// fired from group.vue ->addItem()
|
||||||
|
$eventBus.on("show-auth-modal", () => {
|
||||||
|
this.openAuthModal();
|
||||||
|
});
|
||||||
|
// // fired from chat MobileFooter.vue.
|
||||||
|
$eventBus.on("open-message-actions-list", (value) => {
|
||||||
|
this.showMobileActions = !this.showMobileActions;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
146
mixins/fileMixin.js
Normal file
146
mixins/fileMixin.js
Normal file
|
|
@ -0,0 +1,146 @@
|
||||||
|
import chatApi from "~/apis/chatApi";
|
||||||
|
import repoApi from "~/apis/repoApi";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
removeFile(file, index) {
|
||||||
|
this.files.splice(index, 1);
|
||||||
|
this.filenames.splice(index, 1);
|
||||||
|
|
||||||
|
if (this.files.length == 0) this.showDroppedList = false;
|
||||||
|
},
|
||||||
|
async mainSaveFiles() {
|
||||||
|
if (this.uploading) return;
|
||||||
|
this.uploading = true;
|
||||||
|
|
||||||
|
if (this.saveAs == "replay") {
|
||||||
|
this.replaySaveFiles();
|
||||||
|
} else {
|
||||||
|
let payload = {
|
||||||
|
text: this.uploadDescription,
|
||||||
|
group_id: this.listGetter.id,
|
||||||
|
id: this.mainCommentor?.id ?? undefined,
|
||||||
|
contact_id: undefined,
|
||||||
|
replyto: undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.$route.name == "privates") {
|
||||||
|
payload = {
|
||||||
|
text: this.uploadDescription,
|
||||||
|
id: this.mainCommentor?.id ?? undefined,
|
||||||
|
contact_id: this.listGetter.user,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let url = chatApi.messages.create;
|
||||||
|
|
||||||
|
if (this.files.length > 1) {
|
||||||
|
this.files.forEach((fileItem) => {
|
||||||
|
payload.file = fileItem;
|
||||||
|
payload.length = fileItem.size;
|
||||||
|
|
||||||
|
this.fileUploadHttpService
|
||||||
|
.formDataRequest(url, payload)
|
||||||
|
.then((res) => {
|
||||||
|
// this.closeDroppedList();
|
||||||
|
// this.toLastItem();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
this.mySwalToast({
|
||||||
|
html: "حداکثر حجم فایل برای ارسال 50 مگابایت می باشد.",
|
||||||
|
icon: "error",
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.uploading = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.userMessage = null;
|
||||||
|
this.uploadDescription = null;
|
||||||
|
this.closeDroppedList();
|
||||||
|
this.toLastItem();
|
||||||
|
} else {
|
||||||
|
// 0: files, 1: image, 2:audio 3:video
|
||||||
|
// payload.file_type = this.getFileType(this.files[0].name);
|
||||||
|
payload.file = this.files[0];
|
||||||
|
payload.length = this.files[0].size;
|
||||||
|
|
||||||
|
return await this.fileUploadHttpService
|
||||||
|
.formDataRequest(url, payload)
|
||||||
|
.then((res) => {
|
||||||
|
this.closeDroppedList();
|
||||||
|
|
||||||
|
// when clicking on the attach file btn.
|
||||||
|
this.userMessage = null;
|
||||||
|
this.uploadDescription = null;
|
||||||
|
this.closeDroppedList();
|
||||||
|
this.toLastItem();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
this.mySwalToast({
|
||||||
|
html: "حداکثر حجم فایل برای ارسال 50 مگابایت می باشد.",
|
||||||
|
icon: "error",
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.uploading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
endOfUploading() {
|
||||||
|
},
|
||||||
|
startUploading() {
|
||||||
|
},
|
||||||
|
openUploadForm(dropBoxClass) {
|
||||||
|
this.files = [];
|
||||||
|
this.uploadDescription = null;
|
||||||
|
this.showDroppedList = true;
|
||||||
|
this.dropBoxClass = dropBoxClass;
|
||||||
|
this.showMobileUploadButton = true;
|
||||||
|
},
|
||||||
|
setImage(file) {
|
||||||
|
this.hasImage = true;
|
||||||
|
this.files.push(file);
|
||||||
|
},
|
||||||
|
getFileType(fileName) {
|
||||||
|
if (
|
||||||
|
["jpg", "jpeg", "png", "webp"].includes(this.getFileExtension(fileName))
|
||||||
|
)
|
||||||
|
return 1;
|
||||||
|
if (
|
||||||
|
["mp3", "wav", "png", "webp"].includes(this.getFileExtension(fileName))
|
||||||
|
)
|
||||||
|
return 2;
|
||||||
|
if (["mp4", "mpeg", "mkv"].includes(this.getFileExtension(fileName)))
|
||||||
|
return 3;
|
||||||
|
|
||||||
|
return 0;
|
||||||
|
},
|
||||||
|
fileIcon(type) {
|
||||||
|
if (type == "text/plain") return "txt-file";
|
||||||
|
else if (type == "pdf-file") return "pdf-file";
|
||||||
|
else if (type == "doc-file") return "doc-file";
|
||||||
|
else if (type == "docx-file") return "docx-file";
|
||||||
|
else if (type == "excel-file") return "excel-file";
|
||||||
|
else if (type == "csv-file") return "csv-file";
|
||||||
|
else if (type == "word-file") return "word-file";
|
||||||
|
else if (type == "ppt-file") return "ppt-file";
|
||||||
|
else if (type == "mp3-file") return "mp3-file";
|
||||||
|
else if (type == "jpg-file") return "jpg-file";
|
||||||
|
else if (type == "png-file") return "png-file";
|
||||||
|
else if (type == "mov-file") return "mov-file";
|
||||||
|
else if (type == "rar-file") return "rar-file";
|
||||||
|
else if (type == "zip-file") return "zip-file";
|
||||||
|
else return "other-file";
|
||||||
|
},
|
||||||
|
closeDroppedList() {
|
||||||
|
this.files = [];
|
||||||
|
this.showDroppedList = false;
|
||||||
|
this.pasting = false;
|
||||||
|
this.showMobileUploadButton = false;
|
||||||
|
this.uploadDescription = null;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
98
mixins/forwardMixin.js
Normal file
98
mixins/forwardMixin.js
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
import chatApi from "~/apis/chatApi";
|
||||||
|
import repoApi from "~/apis/repoApi";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
async saveForward() {
|
||||||
|
let payload = {
|
||||||
|
group_id: this.getForwardItem.to.id,
|
||||||
|
forward_from: this.getForwardItem?.message.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
// private route condition
|
||||||
|
if (this.$route.name == "privates") {
|
||||||
|
payload = {
|
||||||
|
// contact_id: this.getForwardItem.user.user_id,
|
||||||
|
contact_id: this.getForwardItem.to.user_id,
|
||||||
|
forward_from: this.getForwardItem?.message.id,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let url = "message/" + chatApi.messages.create;
|
||||||
|
|
||||||
|
return await this.httpService.formDataRequest(url, payload);
|
||||||
|
},
|
||||||
|
|
||||||
|
forwardTo(user) {
|
||||||
|
this.save(user);
|
||||||
|
},
|
||||||
|
openForwardModal(comment) {
|
||||||
|
const forwardItem = {
|
||||||
|
from: this.listGetter,
|
||||||
|
to: {},
|
||||||
|
message: comment,
|
||||||
|
};
|
||||||
|
|
||||||
|
// comment.group_forward_from_id = this.listGetter.id;
|
||||||
|
// comment.group_forward_from_title = this.listGetter.title;
|
||||||
|
|
||||||
|
this.SET_FORWARD_ITEM(forwardItem);
|
||||||
|
this.showForwardModal = true;
|
||||||
|
this.modalComponentName = "user-search";
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
$("#base-modal").modal({
|
||||||
|
backdrop: "static",
|
||||||
|
keyboard: false,
|
||||||
|
show: true,
|
||||||
|
});
|
||||||
|
}, 200);
|
||||||
|
},
|
||||||
|
redirectToPrivates(routeName) {
|
||||||
|
this.closeForwardModal();
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$router
|
||||||
|
.push({
|
||||||
|
name: routeName,
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
|
||||||
|
});
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
// if (this.getForwardItem.type == 'Private') {
|
||||||
|
// this.$router
|
||||||
|
// .push({
|
||||||
|
// name: routeName,
|
||||||
|
// meta: {
|
||||||
|
// "user-id": this.getForwardItem?.message.user.id,
|
||||||
|
// "message-id": this.getForwardItem?.message.id,
|
||||||
|
// },
|
||||||
|
// })
|
||||||
|
// .then(() => {}).catch(()=>{})
|
||||||
|
// } else if (this.getForwardItem.type == "Group") {
|
||||||
|
|
||||||
|
// this.$router
|
||||||
|
// .push({
|
||||||
|
// name: routeName,
|
||||||
|
// })
|
||||||
|
// .then(() => {}).catch(()=>{})
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
closeForwardModal() {
|
||||||
|
$("#base-modal").modal("hide");
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showForwardModal = false;
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
closeAndResetForwardModal() {
|
||||||
|
this.SET_FORWARD_ITEM();
|
||||||
|
$("#base-modal").modal("hide");
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showForwardModal = false;
|
||||||
|
}, 500);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
119
mixins/headerMixin.js
Normal file
119
mixins/headerMixin.js
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
import chatApi from "@chat/apis/chatApi";
|
||||||
|
// import repoApi from "~/apis/repoApi";
|
||||||
|
// import HttpService from "~/services/httpService";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
beforeMount() {
|
||||||
|
this.httpService = useNuxtApp()["$http"];
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectAllCheckbox(val) {
|
||||||
|
if (this.checked)
|
||||||
|
this.selectedCommentsId = this.localComments.map((item) => item.id);
|
||||||
|
else this.selectedCommentsId = [];
|
||||||
|
},
|
||||||
|
removeFromLabelFilter() {
|
||||||
|
// array(multiple) mode
|
||||||
|
// const index = this.labelFilter.findIndex(item=>item.id = selectedItem.id)
|
||||||
|
// this.labelFilter.splice(index,1)
|
||||||
|
|
||||||
|
// single mode
|
||||||
|
this.selectedLabel = null;
|
||||||
|
this.selectedMember = null;
|
||||||
|
this.selectedMessageLabel = [];
|
||||||
|
this.localComments = [];
|
||||||
|
this.showMobileActions = false;
|
||||||
|
this.selectedGroupMember = [];
|
||||||
|
this.selectedMessageLabel = [];
|
||||||
|
|
||||||
|
this.toLastItem();
|
||||||
|
},
|
||||||
|
removeFromUserFilter() {
|
||||||
|
// array(multiple) mode
|
||||||
|
// const index = this.userFilter.findIndex(item=>item.id = selectedItem.id)
|
||||||
|
// this.userFilter.splice(index,1)
|
||||||
|
|
||||||
|
// single mode
|
||||||
|
this.selectedMember = null;
|
||||||
|
this.selectedLabel = null;
|
||||||
|
this.selectedMessageLabel = [];
|
||||||
|
this.localComments = [];
|
||||||
|
this.showMobileActions = false;
|
||||||
|
this.selectedGroupMember = [];
|
||||||
|
this.selectedMessageLabel = [];
|
||||||
|
|
||||||
|
this.toLastItem();
|
||||||
|
},
|
||||||
|
getGroupMembers() {
|
||||||
|
if (
|
||||||
|
this.$route.name !== "privates" &&
|
||||||
|
(this.listGetter?.group_id || this.listGetter?.id)
|
||||||
|
)
|
||||||
|
this.httpService
|
||||||
|
.getRequest(
|
||||||
|
"message/" +
|
||||||
|
chatApi.groups.groupMembers +
|
||||||
|
(this.listGetter?.group_id || this.listGetter?.id)
|
||||||
|
)
|
||||||
|
.then((response) => (this.groupMember = response.data));
|
||||||
|
},
|
||||||
|
filterMessagesBySection(selectedLabel) {
|
||||||
|
// this.resetPagination();
|
||||||
|
// this.userFilter = [];
|
||||||
|
this.selectedMember = null;
|
||||||
|
this.showMobileActions = false;
|
||||||
|
this.selectedGroupMember = [];
|
||||||
|
this.selectedMessageLabel = [];
|
||||||
|
|
||||||
|
if (selectedLabel) {
|
||||||
|
this.selectedMessageLabel = [selectedLabel.entity_field_id];
|
||||||
|
selectedLabel["title"] = selectedLabel?.lable;
|
||||||
|
selectedLabel["keyName"] = "label";
|
||||||
|
}
|
||||||
|
// this.selectedMessageLabel = this.selectedLabel.map(
|
||||||
|
// (item) => item.entity_field_id
|
||||||
|
// );
|
||||||
|
|
||||||
|
let entityId = this.listGetter?.reference_id;
|
||||||
|
|
||||||
|
if (entityId) {
|
||||||
|
this.getIssue(entityId).then(() => {
|
||||||
|
this.getSections().then(() => {
|
||||||
|
if (selectedLabel) this.showIssueProperties = true;
|
||||||
|
else this.closeIssueProperties();
|
||||||
|
|
||||||
|
this.localComments = [];
|
||||||
|
this.toLastItem();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.localComments = [];
|
||||||
|
this.closeIssueProperties();
|
||||||
|
this.toLastItem();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
filterMessagesByUser(selectedUser) {
|
||||||
|
// this.resetPagination();
|
||||||
|
// labelFilter.length || userFilter.length"
|
||||||
|
// this.labelFilter = [];
|
||||||
|
this.selectedLabel = null;
|
||||||
|
this.selectedMessageLabel = [];
|
||||||
|
|
||||||
|
selectedUser["title"] = selectedUser?.full_name ?? '';
|
||||||
|
selectedUser["keyName"] = "user";
|
||||||
|
|
||||||
|
this.selectedGroupMember = selectedUser ? [selectedUser?.user_id] : [];
|
||||||
|
this.localComments = [];
|
||||||
|
this.showMobileActions = false;
|
||||||
|
|
||||||
|
this.toLastItem();
|
||||||
|
},
|
||||||
|
getSectionDetails() {
|
||||||
|
let url =
|
||||||
|
"message/" + chatApi.entity.get + "/" + this.listGetter.reference_id;
|
||||||
|
this.httpService.getRequest(url).then((res) => {
|
||||||
|
this.issue = res._source;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
77
mixins/jahatMixin.js
Normal file
77
mixins/jahatMixin.js
Normal file
|
|
@ -0,0 +1,77 @@
|
||||||
|
// import { getLsItem, setLsItem } from "~/services/localStorage.service.js";
|
||||||
|
// import chatApi from "~/apis/chatApi";
|
||||||
|
import { useStorage } from "@vueuse/core";
|
||||||
|
import repoApi from "~/apis/repoApi";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
entityFieldsGetter(entity_field_id) {
|
||||||
|
return this.entityFields[entity_field_id][2];
|
||||||
|
},
|
||||||
|
async getSections() {
|
||||||
|
// let localStoageSections = getLsItem("sections_" + 2);
|
||||||
|
let localStorageSections = useStorage("sections_" + 2, []);
|
||||||
|
if (localStoageSections) {
|
||||||
|
this.issueSections = JSON.parse(localStoageSections);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let payload = {
|
||||||
|
// entity_id: 2, // 2 : means issues
|
||||||
|
type_id: 2,
|
||||||
|
};
|
||||||
|
|
||||||
|
// let url = repoApi.entityFields.list;
|
||||||
|
let url = "keyvalue/" + repoApi.entityFields.list;
|
||||||
|
|
||||||
|
return await this.httpService
|
||||||
|
.postRequest(url, payload)
|
||||||
|
.then((res) => {
|
||||||
|
this.issueSections = res.data;
|
||||||
|
// save res to local storage.
|
||||||
|
const sections = useStorage("sections_" + 2, []);
|
||||||
|
sections.value = JSON.stringify(res.data);
|
||||||
|
// setLsItem("sections_" + 2, JSON.stringify(res.data));
|
||||||
|
})
|
||||||
|
.catch((err) => {})
|
||||||
|
.finally(() => {});
|
||||||
|
},
|
||||||
|
|
||||||
|
async getIssue(entityId) {
|
||||||
|
let url = "repo/jahat/get/" + entityId;
|
||||||
|
return await this.httpService.getRequest(url).then((res) => {
|
||||||
|
this.issue = res._source;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
closeIssueProperties() {
|
||||||
|
this.showIssueProperties = false;
|
||||||
|
},
|
||||||
|
goToJahat() {
|
||||||
|
this.SET_USER_PERMISSIONS();
|
||||||
|
this.SET_AUTHORIZED_PAGES();
|
||||||
|
|
||||||
|
if (this.listGetter.type == 2) {
|
||||||
|
this.$router
|
||||||
|
.push({
|
||||||
|
name: "issuesShow",
|
||||||
|
params: {
|
||||||
|
id: this.listGetter?.reference_id ?? null,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(() => {});
|
||||||
|
} else if (this.listGetter.type == 3) {
|
||||||
|
this.$router
|
||||||
|
.push({
|
||||||
|
name: "answersShow",
|
||||||
|
params: {
|
||||||
|
answerId: this.listGetter?.reference_id,
|
||||||
|
entityId: this.listGetter?.parent_reference,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
// :href="'/jahat/' + buttonName + '/' + listGetter?.reference_id"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
463
mixins/messageMixin.js
Normal file
463
mixins/messageMixin.js
Normal file
|
|
@ -0,0 +1,463 @@
|
||||||
|
import chatApi from "~/apis/chatApi";
|
||||||
|
// import repoApi from "~/apis/repoApi";
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
beforeMount() {
|
||||||
|
this.httpService = useNuxtApp()["$http"];
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getMessages(
|
||||||
|
fill_limit = false,
|
||||||
|
by_first_message = false,
|
||||||
|
seen_date = undefined,
|
||||||
|
page = undefined,
|
||||||
|
message_id = undefined
|
||||||
|
) {
|
||||||
|
// if (this.fetchingData) return;
|
||||||
|
// this.fetchingData = true;
|
||||||
|
|
||||||
|
let group_id = undefined;
|
||||||
|
let contact_id = undefined;
|
||||||
|
let filter_users = this.selectedGroupMember ?? [];
|
||||||
|
let filter_labels = this.selectedMessageLabel ?? [];
|
||||||
|
|
||||||
|
group_id = this.listGetter.group_id ?? this.listGetter.id;
|
||||||
|
|
||||||
|
if (this.isRedirectedFromOtherSystems && this.groupId)
|
||||||
|
group_id = this.listGetter.group_id ?? this.groupId;
|
||||||
|
else if (this.$route.name == "privates") {
|
||||||
|
group_id = undefined;
|
||||||
|
contact_id = this.listGetter?.user;
|
||||||
|
} else if (this.$route.name == "unReads") {
|
||||||
|
if (this.listGetter.icon_type == 1)
|
||||||
|
contact_id = this.listGetter.user_seen;
|
||||||
|
else group_id = this.listGetter.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (seen_date == undefined) seen_date = this.pagination.seen_date;
|
||||||
|
|
||||||
|
//پیام منطبق با تاریخ درخواستی نیاید
|
||||||
|
if (!by_first_message && seen_date > 0) seen_date++;
|
||||||
|
if (page == undefined) page = this.pagination.page;
|
||||||
|
|
||||||
|
let payload = {
|
||||||
|
group_id: group_id,
|
||||||
|
contact_id: contact_id,
|
||||||
|
offset: 0,
|
||||||
|
limit: this.limit,
|
||||||
|
filter_users: filter_users,
|
||||||
|
filter_labels: filter_labels,
|
||||||
|
seen_date: seen_date,
|
||||||
|
page: page,
|
||||||
|
message_id: message_id,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.$route.query["invite-id"])
|
||||||
|
payload["invite_id"] = this.$route.query["invite-id"];
|
||||||
|
if (fill_limit) payload.fill_limit = 1;
|
||||||
|
if (message_id != undefined) payload.seen_date = 0;
|
||||||
|
|
||||||
|
return await this.httpService
|
||||||
|
.postRequest("message/" + chatApi.messages.virtualList, payload)
|
||||||
|
.then((response) => {
|
||||||
|
if (response.data.length) {
|
||||||
|
response.data.forEach((item, index) => {
|
||||||
|
if (this.isRedirectedFromOtherSystems && this.messageId) {
|
||||||
|
item.active = item.id == this.messageId;
|
||||||
|
this.prevSelectedItemIndex = index;
|
||||||
|
}
|
||||||
|
if (this.isRedirectedFromOtherSystems && this.userId) {
|
||||||
|
item.active = item.id == this.userId;
|
||||||
|
this.prevSelectedItemIndex = index;
|
||||||
|
}
|
||||||
|
item.user = response.users.find(
|
||||||
|
(user) => user.user_id == item.user
|
||||||
|
);
|
||||||
|
if (item.replys)
|
||||||
|
item.replys.users = this.allReplayers(item, response.users);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.pagination.total = response.pagination.total;
|
||||||
|
|
||||||
|
// this.showList = true;
|
||||||
|
// this.busy = false;
|
||||||
|
|
||||||
|
return response;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
// this.fetchingData = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
save(ev, textAreaName, container) {
|
||||||
|
// disable scroll when saving data.
|
||||||
|
this.busy = true;
|
||||||
|
|
||||||
|
if (this.savingComment) return;
|
||||||
|
this.savingComment = true;
|
||||||
|
|
||||||
|
// اگر پیام هدایت شده باشد و کاربر پیامی نوشته نباشد.
|
||||||
|
if (
|
||||||
|
this.isForward &&
|
||||||
|
(this.userMessage == null || this.userMessage == "")
|
||||||
|
) {
|
||||||
|
this.saveForward()
|
||||||
|
.then((res) => {
|
||||||
|
this.pagination.offset = 0;
|
||||||
|
this.seenDate = -1;
|
||||||
|
this.onSendMessage(res.data);
|
||||||
|
|
||||||
|
// this.localComments.push(res.data);
|
||||||
|
// this.setVirtualListToBottom();
|
||||||
|
// this.toLastItem();
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
if (
|
||||||
|
response.status == 403 &&
|
||||||
|
response.data?.meta &&
|
||||||
|
response.data?.meta[0]?.is_guest
|
||||||
|
) {
|
||||||
|
this.openAuthModal();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.mainCommentor = undefined;
|
||||||
|
this.userMessage = null;
|
||||||
|
this.savingComment = false;
|
||||||
|
this.replyComment = false;
|
||||||
|
this.isMainEditMode = false;
|
||||||
|
this.isForward = false;
|
||||||
|
this.SET_FORWARD_ITEM();
|
||||||
|
});
|
||||||
|
// اگر پیام هدایت شده باشد و کاربر پیامی نوشته باشد.
|
||||||
|
} else if (
|
||||||
|
this.isForward &&
|
||||||
|
(this.userMessage != null || this.userMessage != "")
|
||||||
|
) {
|
||||||
|
this.saveForward().then(() => {
|
||||||
|
let payload = {
|
||||||
|
text: this.userMessage,
|
||||||
|
group_id: this.listGetter.id,
|
||||||
|
id: this.mainCommentor?.id ?? undefined,
|
||||||
|
contact_id: undefined,
|
||||||
|
replyto: this.replayTo?.id ?? undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
// private route condition
|
||||||
|
if (this.$route.name == "privates") {
|
||||||
|
payload = {
|
||||||
|
text: this.userMessage,
|
||||||
|
contact_id: this.listGetter.user,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// if user pressed save from right form(main), empty the replayto field.
|
||||||
|
if (container === "messages") {
|
||||||
|
payload.replyto = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
let url = "message/" + chatApi.messages.create;
|
||||||
|
|
||||||
|
payload.text = this.replaceTextWithLink(payload.text);
|
||||||
|
|
||||||
|
this.httpService
|
||||||
|
.formDataRequest(url, payload)
|
||||||
|
.then((res) => {
|
||||||
|
// this.mySwalToast({
|
||||||
|
// html: res?.message ?? "",
|
||||||
|
// });
|
||||||
|
|
||||||
|
// if (this.isMainEditMode) {
|
||||||
|
// this.mainCommentor = undefined;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// this.userMessage = null;
|
||||||
|
|
||||||
|
this.pagination.offset = 0;
|
||||||
|
this.seenDate = -1;
|
||||||
|
this.onSendMessage(res.data);
|
||||||
|
})
|
||||||
|
|
||||||
|
.catch((err) => {
|
||||||
|
if (
|
||||||
|
response.status == 403 &&
|
||||||
|
response.data?.meta &&
|
||||||
|
response.data?.meta[0]?.is_guest
|
||||||
|
) {
|
||||||
|
this.openAuthModal();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.mainCommentor = undefined;
|
||||||
|
this.userMessage = null;
|
||||||
|
this.savingComment = false;
|
||||||
|
this.replyComment = false;
|
||||||
|
this.isMainEditMode = false;
|
||||||
|
this.isForward = false;
|
||||||
|
this.SET_FORWARD_ITEM();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// حالت معمولی(هدایت نشده باشد.)
|
||||||
|
} else {
|
||||||
|
let payload = {
|
||||||
|
text: this.userMessage,
|
||||||
|
group_id: this.listGetter.id,
|
||||||
|
id: this.mainCommentor?.id ?? undefined,
|
||||||
|
contact_id: undefined,
|
||||||
|
replyto: this.replayTo?.id ?? undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
// private route condition
|
||||||
|
if (this.$route.name == "privates") {
|
||||||
|
payload = {
|
||||||
|
text: this.userMessage,
|
||||||
|
id: this.mainCommentor?.id ?? undefined,
|
||||||
|
contact_id: this.listGetter.user,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// if user pressed save from right form(main), empty the replayto field.
|
||||||
|
if (container === "messages") {
|
||||||
|
payload.replyto = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
let url = "message/" + chatApi.messages.create;
|
||||||
|
|
||||||
|
payload.text = this.replaceTextWithLink(payload.text);
|
||||||
|
|
||||||
|
this.httpService
|
||||||
|
.formDataRequest(url, payload)
|
||||||
|
.then((res) => {
|
||||||
|
// this.mySwalToast({
|
||||||
|
// html: res?.message ?? "",
|
||||||
|
// });
|
||||||
|
|
||||||
|
if (this.isMainEditMode) {
|
||||||
|
this.mainCommentor = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
// this.$root.emit('update-group-list')
|
||||||
|
|
||||||
|
this.userMessage = null;
|
||||||
|
|
||||||
|
this.toLastItem();
|
||||||
|
})
|
||||||
|
|
||||||
|
.catch(({ response }) => {
|
||||||
|
if (
|
||||||
|
response.status == 403 &&
|
||||||
|
response.data?.meta &&
|
||||||
|
response.data?.meta[0]?.is_guest
|
||||||
|
) {
|
||||||
|
this.openAuthModal();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
this.savingComment = false;
|
||||||
|
this.replyComment = false;
|
||||||
|
this.isMainEditMode = false;
|
||||||
|
this.SET_FORWARD_ITEM();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.closeReplays();
|
||||||
|
},
|
||||||
|
deleteItem(comment, index, editFrom, replayFrom) {
|
||||||
|
if (this.buttonLoading) return;
|
||||||
|
this.buttonLoading = true;
|
||||||
|
|
||||||
|
let html = `آیا مطمئن هستید که میخواهید این پیام را حذف کنید؟`;
|
||||||
|
|
||||||
|
if (comment?.replys?.count > 0)
|
||||||
|
html = `آیا مطمئن هستید که میخواهید این پیام را حذف کنید؟<br/>
|
||||||
|
با حذف این پیام، رشتهٔ پاسخ آن (شامل ${comment.replys.count} پاسخ) نیز حذف خواهد شد.
|
||||||
|
`;
|
||||||
|
|
||||||
|
this.mySwalConfirm({
|
||||||
|
title: "هشدار!!!",
|
||||||
|
html,
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
let payload = {
|
||||||
|
group_id: this.listGetter.id,
|
||||||
|
contact_id: undefined,
|
||||||
|
messages_id: [comment.id],
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.$route.name == "privates") {
|
||||||
|
payload = {
|
||||||
|
group_id: undefined,
|
||||||
|
contact_id: this.listGetter.user,
|
||||||
|
messages_id: [comment.id],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let url = "message/" + chatApi.privates.delete;
|
||||||
|
|
||||||
|
this.httpService
|
||||||
|
.postRequest(url, payload)
|
||||||
|
.then((res) => {
|
||||||
|
// this.mySwalToast({
|
||||||
|
// title: "",
|
||||||
|
// html: res.message,
|
||||||
|
// });
|
||||||
|
|
||||||
|
// this.updateMessageCount();
|
||||||
|
if (replayFrom == "replays") this.replays.splice(index, 1);
|
||||||
|
else {
|
||||||
|
this.localComments.splice(index, 1);
|
||||||
|
this.closeReplays();
|
||||||
|
}
|
||||||
|
|
||||||
|
// this.getMessages();
|
||||||
|
})
|
||||||
|
.catch((err) => {})
|
||||||
|
.finally(() => {
|
||||||
|
this.buttonLoading = false;
|
||||||
|
// this.showList = !this.showList;
|
||||||
|
});
|
||||||
|
} else this.buttonLoading = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
deleteMany() {
|
||||||
|
if (this.buttonLoading) return;
|
||||||
|
this.buttonLoading = true;
|
||||||
|
|
||||||
|
this.mySwalConfirm({
|
||||||
|
title: "هشدار!!!",
|
||||||
|
html: "آیا مطمئن هستید که میخواهید این پیام را حذف کنید؟",
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
let payload = {
|
||||||
|
group_id: this.listGetter.id,
|
||||||
|
contact_id: undefined,
|
||||||
|
messages_id: this.selectedCommentsId,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.$route.name == "privates") {
|
||||||
|
payload = {
|
||||||
|
group_id: undefined,
|
||||||
|
contact_id: this.listGetter.user,
|
||||||
|
messages_id: this.selectedCommentsId,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let url = "message/" + chatApi.privates.delete;
|
||||||
|
|
||||||
|
this.httpService
|
||||||
|
.postRequest(url, payload)
|
||||||
|
.then((res) => {
|
||||||
|
this.mySwalToast({
|
||||||
|
title: "",
|
||||||
|
html: res.message,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.selectedCommentsId.forEach((id) => {
|
||||||
|
this.localComments = this.localComments.filter(
|
||||||
|
(fi) => fi.id != id
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.selectedCommentsId = [];
|
||||||
|
this.showSelectionActionBar = false;
|
||||||
|
|
||||||
|
// this.pagination.offset = 0;
|
||||||
|
|
||||||
|
// this.pagination.seenDate = -1;
|
||||||
|
// this.pagination.page = -1;
|
||||||
|
// this.pagination.pageBottom = 0;
|
||||||
|
// this.pagination.pageTop = -1;
|
||||||
|
|
||||||
|
// this.toLastItem();
|
||||||
|
})
|
||||||
|
.catch((err) => {})
|
||||||
|
.finally(() => {
|
||||||
|
this.buttonLoading = false;
|
||||||
|
// this.showList = !this.showList;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onSendMessage(message) {
|
||||||
|
this.localComments.push(message);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setVirtualListToBottom();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
editComment(comment, listRefName, editModeName) {
|
||||||
|
try {
|
||||||
|
this.$refs[listRefName].style.removeProperty("height");
|
||||||
|
} catch (err) {
|
||||||
|
this.$refs[listRefName].style.height = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (editModeName == "isMainEditMode") {
|
||||||
|
this.mainCommentor = comment;
|
||||||
|
|
||||||
|
this.isMainEditMode = true;
|
||||||
|
this.userMessage = this.parseText(comment.text);
|
||||||
|
} else {
|
||||||
|
this.replayCommentor = comment;
|
||||||
|
|
||||||
|
this.isReplayEditMode = true;
|
||||||
|
this.replayText = this.parseText(comment.text);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
replyComments(comment, listRefName) {
|
||||||
|
try {
|
||||||
|
this.$refs[listRefName].style.removeProperty("height");
|
||||||
|
} catch (err) {
|
||||||
|
this.$refs[listRefName].style.height = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.replayText = null;
|
||||||
|
this.replayCommentor = comment;
|
||||||
|
this.isReplayEditMode = true;
|
||||||
|
// this.commentor = comment;
|
||||||
|
},
|
||||||
|
openReplays(comment, index) {
|
||||||
|
this.replayFirstLoad = true;
|
||||||
|
// this.replayPagination.seen_date =-1;
|
||||||
|
|
||||||
|
// this.SET_SELECTED_ITEM(comment);
|
||||||
|
this.replayTo = comment;
|
||||||
|
this.markActive(this.localComments, index);
|
||||||
|
|
||||||
|
// fill_limit = false,
|
||||||
|
// by_first_message = false,
|
||||||
|
// seen_date = undefined,
|
||||||
|
// page = undefined,
|
||||||
|
// message_id = undefined
|
||||||
|
|
||||||
|
this.getReplays(false, false, comment.created_at, 0).then((response) => {
|
||||||
|
this.replays = response?.data ?? [];
|
||||||
|
this.replayPagination.seen_date = response?.pagination.new_seen_date;
|
||||||
|
|
||||||
|
this.showReplays = true;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
closeComments(isEditModeName) {
|
||||||
|
this.isForward = false;
|
||||||
|
this.replyComment = false;
|
||||||
|
this[isEditModeName] = false;
|
||||||
|
this.userMessage = null;
|
||||||
|
|
||||||
|
// try {
|
||||||
|
// this.$refs.messages.style.removeProperty("height");
|
||||||
|
// this.$refs.mainTextAreaInput.style.removeProperty("height");
|
||||||
|
// } catch (err) {
|
||||||
|
// this.$refs.messages.style.height = null;
|
||||||
|
// this.$refs.mainTextAreaInput.style.height = null;
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
markActive(comments, index) {
|
||||||
|
if (this.prevSelectedItemIndex != index) {
|
||||||
|
this.$set(comments[this.prevSelectedItemIndex], "active", false);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.prevSelectedItemIndex = index;
|
||||||
|
this.$set(comments[index], "active", true);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
196
mixins/mountedMixin.js
Normal file
196
mixins/mountedMixin.js
Normal file
|
|
@ -0,0 +1,196 @@
|
||||||
|
import privatesContextMenu from "@chat/json/privatesContextMenu.json";
|
||||||
|
import groupsContextMenu from "@chat/json/groupsContextMenu.json";
|
||||||
|
import lobbiesChildContextMenu from "@chat/json/lobbiesChildContextMenu.json";
|
||||||
|
import lobbiesParentContextMenu from "@chat/json/lobbiesParentContextMenu.json";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mounted() {
|
||||||
|
const vm = this;
|
||||||
|
this.closeForwardModal();
|
||||||
|
|
||||||
|
// dynamic import : method two
|
||||||
|
// import(`~/chat/json/messagesContextMenu.json`)
|
||||||
|
// .then((obj) => {
|
||||||
|
// this.contextMenu = obj.default;
|
||||||
|
// })
|
||||||
|
// .catch((err) => {});
|
||||||
|
if (this.$route.name == "privates")
|
||||||
|
this.commonContextMenu = privatesContextMenu;
|
||||||
|
|
||||||
|
if (this.$route.name == "groups")
|
||||||
|
this.commonContextMenu = groupsContextMenu;
|
||||||
|
|
||||||
|
if (this.$route.name == "lobbies") {
|
||||||
|
if (this.listGetter?.parent_id)
|
||||||
|
this.commonContextMenu = lobbiesChildContextMenu;
|
||||||
|
else this.commonContextMenu = lobbiesParentContextMenu;
|
||||||
|
}
|
||||||
|
if (this.$route.name == "unReads")
|
||||||
|
this.commonContextMenu = groupsContextMenu;
|
||||||
|
|
||||||
|
this.pagination.offset = 0;
|
||||||
|
this.pagination.pageBottom = 1;
|
||||||
|
this.pagination.pageTop = 0;
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.pagination.seen_date = 0;
|
||||||
|
|
||||||
|
// check if redirected from other systems.
|
||||||
|
// or clicked on a copy link.
|
||||||
|
if (this.$route.query["group-id"] && this.$route.query["message-id"]) {
|
||||||
|
this.groupId = this.$route.query["group-id"];
|
||||||
|
this.messageId = this.$route.query["message-id"];
|
||||||
|
this.isRedirectedFromOtherSystems = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// when user forward a message from the search-modal component.
|
||||||
|
if (this.getForwardItem) {
|
||||||
|
this.userId = this.getForwardItem?.message.user.id;
|
||||||
|
// this.messageId = this.getForwardItem.forwardFrom.id;
|
||||||
|
this.isRedirectedFromOtherSystems = false;
|
||||||
|
this.isForward = true;
|
||||||
|
this.mainCommentor = this.getForwardItem?.message;
|
||||||
|
this.isMainEditMode = true;
|
||||||
|
this.pagination.offset = 0;
|
||||||
|
this.direction = -1;
|
||||||
|
this.seenDate = -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.listGetter) {
|
||||||
|
// this.pagination.offset = 0;
|
||||||
|
this.pagination.seen_date = this.listGetter?.seen_messages?.seen_date;
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.pagination.pageBottom = 1;
|
||||||
|
this.pagination.pageTop = 0;
|
||||||
|
|
||||||
|
if (
|
||||||
|
this.pagination.seen_date == undefined ||
|
||||||
|
this.pagination.seen_date == ""
|
||||||
|
) {
|
||||||
|
this.pagination.seen_date = -1;
|
||||||
|
this.pagination.page = -1;
|
||||||
|
this.pagination.pageBottom = 0;
|
||||||
|
this.pagination.pageTop = -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.listGetter?.is_group == 0) {
|
||||||
|
this.limit = 100;
|
||||||
|
if (this.listGetter.replyto) {
|
||||||
|
this.pagination.seen_date = this.listGetter.p_date_c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// first page request
|
||||||
|
this.getMessages(true, true).then((response) => {
|
||||||
|
this.localComments = response.data; //this.localComments.concat(response.data);
|
||||||
|
this.pagination.seen_date = response.pagination.new_seen_date;
|
||||||
|
|
||||||
|
// when user searching.
|
||||||
|
setTimeout(() => {
|
||||||
|
this.jumpSpecialMessage();
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
// if user is not joined, dont get members.
|
||||||
|
// if (!this.listGetter?.show_joined) {
|
||||||
|
this.getGroupMembers();
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
document
|
||||||
|
.getElementById("paste-section")
|
||||||
|
.addEventListener("paste", async (e) => {
|
||||||
|
vm.pasting = true;
|
||||||
|
vm.handlePasteEvent(e);
|
||||||
|
});
|
||||||
|
if (this.isIssueGroup() || this.isAnswerGroup()) {
|
||||||
|
if (this.isIssueGroup()) {
|
||||||
|
this.buttonTitle = "مشاهده مساله";
|
||||||
|
this.buttonName = "issues";
|
||||||
|
} else if (this.isAnswerGroup()) {
|
||||||
|
this.buttonTitle = "مشاهده پاسخ";
|
||||||
|
this.buttonName = "answers";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// events fired from Auth.vue and authMixin.js
|
||||||
|
// event fired from authMixin.js
|
||||||
|
this.$root.$on("authenticated-by-modal", () => {
|
||||||
|
// this.$route.query["invite-id"] = undefined;
|
||||||
|
this.$set(this.$route.query, "invite-id", undefined);
|
||||||
|
this.getUserPermissionTags();
|
||||||
|
|
||||||
|
this.initServices();
|
||||||
|
this.closeAuthModal();
|
||||||
|
this.getGroupMembers();
|
||||||
|
this.toLastItem();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
jumpSpecialMessage(){
|
||||||
|
|
||||||
|
let jumpMessageId = 0;
|
||||||
|
let jumpMessageIndex = 0;
|
||||||
|
|
||||||
|
// if listgetter contains a message or replay item.
|
||||||
|
if (this.listGetter?.is_group == 0) {
|
||||||
|
|
||||||
|
if (this.listGetter.replyto) {
|
||||||
|
const index = this.localComments.findIndex(
|
||||||
|
(item) => item.id == this.listGetter.replyto
|
||||||
|
);
|
||||||
|
const res = this.localComments.find(
|
||||||
|
(item) => item.id == this.listGetter.replyto
|
||||||
|
);
|
||||||
|
this.openReplays(res, index);
|
||||||
|
|
||||||
|
jumpMessageId = res.id;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
const index = this.localComments.findIndex(
|
||||||
|
(item) => item.id == this.listGetter.id
|
||||||
|
);
|
||||||
|
jumpMessageIndex = index;
|
||||||
|
jumpMessageId = this.listGetter?.id;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// if listgetter contains group item
|
||||||
|
else {
|
||||||
|
if (this.$route.query["message-id"]) {
|
||||||
|
|
||||||
|
const index = this.localComments.findIndex(
|
||||||
|
(item) => item.id == this.$route.query["message-id"]
|
||||||
|
);
|
||||||
|
const res = this.localComments.find(
|
||||||
|
(item) => item.id == this.$route.query["message-id"]
|
||||||
|
);
|
||||||
|
|
||||||
|
jumpMessageIndex = index;
|
||||||
|
jumpMessageId = res.id;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if(jumpMessageId)
|
||||||
|
document.getElementById("chat-item-" + jumpMessageId).scrollIntoView({
|
||||||
|
top: 100,
|
||||||
|
behavior: "smooth",
|
||||||
|
block: "center",
|
||||||
|
});
|
||||||
|
|
||||||
|
if(jumpMessageIndex)
|
||||||
|
this.markActive(this.localComments, jumpMessageIndex);
|
||||||
|
},
|
||||||
|
|
||||||
|
isIssueGroup() {
|
||||||
|
return this.listGetter?.type == 2;
|
||||||
|
},
|
||||||
|
isAnswerGroup() {
|
||||||
|
return this.listGetter?.type == 3;
|
||||||
|
},
|
||||||
|
isPrivate() {
|
||||||
|
return this.listGetter?.type == 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
362
mixins/replayMixin.js
Normal file
362
mixins/replayMixin.js
Normal file
|
|
@ -0,0 +1,362 @@
|
||||||
|
import chatApi from "~/apis/chatApi";
|
||||||
|
import repoApi from "~/apis/repoApi";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
// #region replays methods
|
||||||
|
closeReplays() {
|
||||||
|
this.showReplays = false;
|
||||||
|
this.resetReplayPagination();
|
||||||
|
this.replays = [];
|
||||||
|
this.replayFinishedTop = false;
|
||||||
|
this.replayFinishedBottom = false;
|
||||||
|
this.replayOverflow = false;
|
||||||
|
},
|
||||||
|
allReplayers(comment, replayUsers) {
|
||||||
|
let newUsers = [];
|
||||||
|
|
||||||
|
if (comment.replys)
|
||||||
|
comment.replys.users.forEach((user) => {
|
||||||
|
replayUsers.forEach((item) => {
|
||||||
|
if (user == item.user_id) newUsers.push(item);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return newUsers;
|
||||||
|
},
|
||||||
|
async getReplays(
|
||||||
|
fill_limit = false,
|
||||||
|
by_first_message = false,
|
||||||
|
seen_date = undefined,
|
||||||
|
page = undefined,
|
||||||
|
message_id = undefined
|
||||||
|
) {
|
||||||
|
// if (this.fetchinReplaygData) return;
|
||||||
|
// this.fetchinReplaygData = true;
|
||||||
|
|
||||||
|
let group_id = this.listGetter.id;
|
||||||
|
// groups,lobbies
|
||||||
|
let payload = {
|
||||||
|
group_id: group_id,
|
||||||
|
contact_id: undefined,
|
||||||
|
replyto: this.replayTo.id,
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
if (this.listGetter && this.listGetter?.is_group == 0){
|
||||||
|
payload.group_id = undefined
|
||||||
|
payload.contact_id = this.listGetter?.user;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (seen_date == undefined) seen_date = this.replayPagination.seen_date;
|
||||||
|
|
||||||
|
//پیام منطبق با تاریخ درخواستی نیاید
|
||||||
|
if (!by_first_message && seen_date > 0) seen_date++;
|
||||||
|
if (page == undefined) page = this.replayPagination.page;
|
||||||
|
|
||||||
|
payload = {
|
||||||
|
...payload,
|
||||||
|
offset: 0,
|
||||||
|
limit: this.replayLimit,
|
||||||
|
seen_date: seen_date,
|
||||||
|
page: page,
|
||||||
|
message_id: message_id,
|
||||||
|
};
|
||||||
|
|
||||||
|
return await this.httpService
|
||||||
|
.postRequest("message/" + chatApi.messages.virtualList, payload)
|
||||||
|
.then((response) => {
|
||||||
|
// set replays for render on the left side.
|
||||||
|
let replays = undefined;
|
||||||
|
|
||||||
|
if (response.data && response.data.length) {
|
||||||
|
replays = structuredClone(response);
|
||||||
|
|
||||||
|
this.setUsers(replays.data, response.users);
|
||||||
|
}
|
||||||
|
|
||||||
|
// this.localComments = response.data;
|
||||||
|
// this.replays.forEach((item) => {
|
||||||
|
// item.user = response.users.find(
|
||||||
|
// (user) => user.user_id == item.user
|
||||||
|
// );
|
||||||
|
// if (item.replys)
|
||||||
|
// item.replys.users = this.allReplayers(item, response.users);
|
||||||
|
// });
|
||||||
|
|
||||||
|
this.replayPagination.total = response.pagination.total;
|
||||||
|
|
||||||
|
// this.replayPagination = {
|
||||||
|
// ...this.replayPagination,
|
||||||
|
// ...response.pagination,
|
||||||
|
// };
|
||||||
|
|
||||||
|
return replays;
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
// this.fetchinReplaygData = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveReplay() {
|
||||||
|
if (this.savingReplay) return;
|
||||||
|
this.savingReplay = true;
|
||||||
|
|
||||||
|
let payload = {
|
||||||
|
text: this.replayText,
|
||||||
|
group_id: this.listGetter.id,
|
||||||
|
id: this.replayCommentor?.id ?? undefined,
|
||||||
|
contact_id: undefined,
|
||||||
|
replyto: this.replayTo?.id ?? undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.$route.name == "privates") {
|
||||||
|
payload = {
|
||||||
|
text: this.replayText,
|
||||||
|
id: this.replayCommentor?.id ?? undefined,
|
||||||
|
group_id: undefined,
|
||||||
|
contact_id: this.listGetter.user,
|
||||||
|
replyto: this.replayTo?.id ?? undefined,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let url = "message/" + chatApi.messages.create;
|
||||||
|
payload.text = this.replaceTextWithLink(payload.text);
|
||||||
|
|
||||||
|
this.httpService
|
||||||
|
.formDataRequest(url, payload)
|
||||||
|
.then((res) => {
|
||||||
|
// this.mySwalToast({
|
||||||
|
// html: res?.message ?? "",
|
||||||
|
// });
|
||||||
|
|
||||||
|
if (this.isReplayEditMode) {
|
||||||
|
this.replayCommentor = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
this.replayText = null;
|
||||||
|
this.toReplayLastItem();
|
||||||
|
this.updateMessageCount(res);
|
||||||
|
|
||||||
|
// this.getReplays(
|
||||||
|
|
||||||
|
// ).then(() => {
|
||||||
|
// this.updateMessageCount();
|
||||||
|
// });
|
||||||
|
})
|
||||||
|
|
||||||
|
.finally(() => {
|
||||||
|
this.savingReplay = false;
|
||||||
|
this.isReplayEditMode = false;
|
||||||
|
this.replyComment = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// #endregion
|
||||||
|
|
||||||
|
async replaySaveFiles() {
|
||||||
|
let payload = {
|
||||||
|
text: this.uploadDescription,
|
||||||
|
group_id: this.listGetter.id,
|
||||||
|
id: this.mainCommentor?.id ?? undefined,
|
||||||
|
contact_id: undefined,
|
||||||
|
replyto: this.replayTo?.id ?? undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (this.$route.name == "privates") {
|
||||||
|
payload = {
|
||||||
|
text: this.uploadDescription,
|
||||||
|
id: this.replayTo?.id ?? undefined,
|
||||||
|
contact_id: this.listGetter.user,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
let url = chatApi.messages.create;
|
||||||
|
// when screen shot paste, decide where to save it.(replay or message)
|
||||||
|
|
||||||
|
// if (
|
||||||
|
// payload.file.type == "" &&
|
||||||
|
// payload.file.name == "mp3" &&
|
||||||
|
// payload.file.size <= 20000
|
||||||
|
// ) {
|
||||||
|
// // 20KB
|
||||||
|
// this.mySwalToast({
|
||||||
|
// icon: "warn",
|
||||||
|
// text: "حداقل صوت قابل آپلود 20 کیلو بایت می باشد.",
|
||||||
|
// });
|
||||||
|
// } else
|
||||||
|
// 'Content-Type': 'application/x-www-form-urlencoded'
|
||||||
|
|
||||||
|
if (this.files.length > 1) {
|
||||||
|
this.files.forEach((fileItem) => {
|
||||||
|
payload.file = fileItem;
|
||||||
|
payload.length = fileItem.size;
|
||||||
|
|
||||||
|
this.fileUploadHttpService
|
||||||
|
.formDataRequest(url, payload)
|
||||||
|
.then((res) => {
|
||||||
|
this.replayText = null;
|
||||||
|
this.uploadDescription = null;
|
||||||
|
this.toReplayLastItem();
|
||||||
|
this.updateMessageCount(res);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.mySwalToast({
|
||||||
|
html: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 0: files, 1: image, 2:audio 3:video
|
||||||
|
// payload.file_type = this.getFileType(this.files[0].name);
|
||||||
|
payload.file = this.files[0];
|
||||||
|
payload.length = this.files[0].size;
|
||||||
|
|
||||||
|
return await this.fileUploadHttpService
|
||||||
|
.formDataRequest(url, payload)
|
||||||
|
.then((res) => {
|
||||||
|
this.closeDroppedList();
|
||||||
|
this.replayText = null;
|
||||||
|
this.uploadDescription = null;
|
||||||
|
this.toReplayLastItem();
|
||||||
|
this.updateMessageCount(res);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
this.mySwalToast({
|
||||||
|
html: "خطایی رخ داد.لطفا دوباره امتحان کنید.",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
replayToTop() {
|
||||||
|
if (this.replayFinishedTop) return;
|
||||||
|
|
||||||
|
--this.replayPagination.pageTop;
|
||||||
|
this.replayPagination.page = this.replayPagination.pageTop;
|
||||||
|
const vm = this;
|
||||||
|
|
||||||
|
this.getReplays().then((response) => {
|
||||||
|
if (!response?.data?.length) {
|
||||||
|
vm.replayFinishedTop = true;
|
||||||
|
vm.replayPagination.pageTop++;
|
||||||
|
vm.replayPagination.page = vm.replayPagination.pageTop;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const vsl = vm.$refs.replayVsl;
|
||||||
|
let prev_size = vsl.getScrollSize();
|
||||||
|
vm.replays = response.data.concat(vm.replays);
|
||||||
|
|
||||||
|
vm.$nextTick(() => {
|
||||||
|
const offset = vsl.getScrollSize() - prev_size;
|
||||||
|
vm.replaySetVirtualListToOffset(offset);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
replayToBottom() {
|
||||||
|
if (this.replayFirstLoad) {
|
||||||
|
this.replayFirstLoad = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.replayFinishedBottom) return;
|
||||||
|
|
||||||
|
++this.replayPagination.pageBottom;
|
||||||
|
this.replayPagination.page = this.replayPagination.pageBottom;
|
||||||
|
|
||||||
|
this.getReplays().then((response) => {
|
||||||
|
if (!response?.data?.length) {
|
||||||
|
this.replayFinishedBottom = true;
|
||||||
|
this.replayPagination.pageBottom--;
|
||||||
|
this.replayPagination.page = this.replayPagination.pageBottom;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.replays = [...this.replays, ...response.data];
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const vsl = this.$refs.replayVsl;
|
||||||
|
const offset = vsl.getScrollSize();
|
||||||
|
this.replaySetVirtualListToOffset(offset);
|
||||||
|
this.fetchingData = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toReplayFirstItem() {
|
||||||
|
this.replayPagination.pageBottom = 1;
|
||||||
|
this.replayPagination.pageTop = 0;
|
||||||
|
this.replayPagination.page = 1;
|
||||||
|
this.replayPagination.seen_date = 0;
|
||||||
|
this.getReplays().then((response) => {
|
||||||
|
if (!response.data.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.replays = response.data;
|
||||||
|
|
||||||
|
// const mids = this.getMids(response.data)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.replayOffset = 0;
|
||||||
|
this.replaySetVirtualListToOffset(this.replayOffset);
|
||||||
|
this.fetchingData = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toReplayLastItem() {
|
||||||
|
this.replayPagination.pageBottom = 0;
|
||||||
|
this.replayPagination.pageTop = -1;
|
||||||
|
this.replayPagination.page = -1;
|
||||||
|
this.replayPagination.seen_date = -1;
|
||||||
|
|
||||||
|
this.getReplays().then((response) => {
|
||||||
|
if (!response.data.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.replays = response.data;
|
||||||
|
|
||||||
|
// const mids = this.getMids(response.data)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const vsl = this.$refs.replayVsl;
|
||||||
|
this.offset = vsl.getScrollSize();
|
||||||
|
this.replaySetVirtualListToOffset(this.replayOffset);
|
||||||
|
this.fetchingData = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async replayOnResult(data) {
|
||||||
|
this.files = [];
|
||||||
|
this.files.push(new File([data], "mp3"));
|
||||||
|
|
||||||
|
// if (this.replayAbortRecord) return;
|
||||||
|
// this.replayAbortRecord = true;
|
||||||
|
|
||||||
|
this.replaySaveFiles().then(() => {
|
||||||
|
// this.replayRecording = false;
|
||||||
|
// this.replayAbortRecord = false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
showReplyComment() {
|
||||||
|
const myReply = document.getElementById("show_reply");
|
||||||
|
myReply.style.display = "none";
|
||||||
|
},
|
||||||
|
closeReplyComment(isEditModeName) {
|
||||||
|
this.replyComment = false;
|
||||||
|
this[isEditModeName] = false;
|
||||||
|
this.replayText = null;
|
||||||
|
// try {
|
||||||
|
// this.$refs.replays.style.removeProperty("height");
|
||||||
|
// this.$refs.replayTextRef.style.removeProperty("height");
|
||||||
|
// } catch (err) {
|
||||||
|
// this.$refs.replays.style.height = null;
|
||||||
|
// this.$refs.replayTextRef.style.height = null;
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
resetReplayPagination() {
|
||||||
|
this.replayPagination = {
|
||||||
|
page: 0,
|
||||||
|
total: 0,
|
||||||
|
pageTop: 0,
|
||||||
|
pageBottom: 1,
|
||||||
|
seenDate: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
220
mixins/virtialListMixin.js
Normal file
220
mixins/virtialListMixin.js
Normal file
|
|
@ -0,0 +1,220 @@
|
||||||
|
import chatApi from "~/apis/chatApi";
|
||||||
|
import repoApi from "~/apis/repoApi";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
tofirstItem() {
|
||||||
|
this.pagination.pageBottom = 1;
|
||||||
|
this.pagination.pageTop = 0;
|
||||||
|
this.pagination.page = 1;
|
||||||
|
this.pagination.seen_date = 0;
|
||||||
|
this.getMessages().then((response) => {
|
||||||
|
if (!response.data.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.localComments = response.data;
|
||||||
|
this.finished_top = false;
|
||||||
|
this.finished_bottom = false;
|
||||||
|
|
||||||
|
// const mids = this.getMids(response.data)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
const vsl = this.$refs.vsl;
|
||||||
|
this.offset = 0;
|
||||||
|
this.setVirtualListToOffset(this.offset);
|
||||||
|
this.fetchingData = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toLastItem() {
|
||||||
|
this.pagination.pageBottom = 0;
|
||||||
|
this.pagination.pageTop = -1;
|
||||||
|
this.pagination.page = -1;
|
||||||
|
this.pagination.seen_date = -1;
|
||||||
|
|
||||||
|
this.getMessages().then((response) => {
|
||||||
|
if (!response.data.length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.localComments = response.data;
|
||||||
|
|
||||||
|
this.finished_top = false;
|
||||||
|
this.finished_bottom = true;
|
||||||
|
|
||||||
|
// const mids = this.getMids(response.data)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
try {
|
||||||
|
const vsl = this.$refs.vsl;
|
||||||
|
this.offset = vsl?.getScrollSize();
|
||||||
|
this.setVirtualListToOffset(this.offset);
|
||||||
|
this.fetchingData = false;
|
||||||
|
} catch (err) {
|
||||||
|
setTimeout(() => {
|
||||||
|
const vsl = this.$refs.vsl;
|
||||||
|
this.offset = vsl?.getScrollSize();
|
||||||
|
this.setVirtualListToOffset(this.offset);
|
||||||
|
this.fetchingData = false;
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toTop() {
|
||||||
|
if (this.finished_top) return;
|
||||||
|
|
||||||
|
// if (this.fetchingData) return;
|
||||||
|
// this.fetchingData = true;
|
||||||
|
|
||||||
|
// if (this.pagination.current_row >= this.pagination.total) {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
--this.pagination.pageTop;
|
||||||
|
this.pagination.page = this.pagination.pageTop;
|
||||||
|
const vm = this;
|
||||||
|
this.getMessages().then((response) => {
|
||||||
|
if (!response.data.length) {
|
||||||
|
vm.finished_top = true;
|
||||||
|
vm.pagination.pageTop++;
|
||||||
|
vm.pagination.page = vm.pagination.pageTop;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const vsl = vm.$refs.vsl;
|
||||||
|
let prev_size = vsl.getScrollSize();
|
||||||
|
vm.localComments = response.data.concat(vm.localComments);
|
||||||
|
|
||||||
|
// const mids = vm.getMids(response.data)
|
||||||
|
vm.$nextTick(() => {
|
||||||
|
// // this.offset = vsl.getOffset();
|
||||||
|
// const offset = mids.reduce((previousValue, currentSid) => {
|
||||||
|
// const previousSize = typeof previousValue === 'string' && previousValue !== 0 ? vsl.getSize(previousValue) : previousValue
|
||||||
|
// return previousSize + vsl.getSize(currentSid)
|
||||||
|
// }, 0)
|
||||||
|
|
||||||
|
const offset = vsl.getScrollSize() - prev_size;
|
||||||
|
vm.setVirtualListToOffset(offset);
|
||||||
|
|
||||||
|
// this.pagination.current_row = response.pagination.current_row;
|
||||||
|
|
||||||
|
// vm.fetchingData = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toBottom() {
|
||||||
|
if (this.finished_bottom) return;
|
||||||
|
|
||||||
|
++this.pagination.pageBottom;
|
||||||
|
this.pagination.page = this.pagination.pageBottom;
|
||||||
|
|
||||||
|
this.getMessages().then((response) => {
|
||||||
|
if (!response.data.length) {
|
||||||
|
this.finished_bottom = true;
|
||||||
|
this.finished_top = false;
|
||||||
|
|
||||||
|
this.pagination.pageBottom--;
|
||||||
|
this.pagination.page = this.pagination.pageBottom;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.localComments = [...this.localComments, ...response.data];
|
||||||
|
const vsl = this.$refs.vsl;
|
||||||
|
this.offset = vsl.getScrollSize();
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setVirtualListToOffset(this.offset);
|
||||||
|
this.fetchingData = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
checkOverFlow() {
|
||||||
|
const vsl = this.$refs.vsl;
|
||||||
|
if (vsl) {
|
||||||
|
this.overflow = vsl.getScrollSize() > vsl.getClientSize();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setVirtualListToIndex(index) {
|
||||||
|
if (this.$refs.vsl) {
|
||||||
|
this.$refs.vsl.scrollToIndex(index);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setVirtualListToOffset(offset) {
|
||||||
|
if (this.$refs.vsl) {
|
||||||
|
this.$refs.vsl.scrollToOffset(offset);
|
||||||
|
// this.$refs.vsl.scrollToIndex(offset);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
replaySetVirtualListToOffset(offset) {
|
||||||
|
if (this.$refs.replayVsl) {
|
||||||
|
this.$refs.replayVsl.scrollToOffset(offset);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setVirtualListToBottom() {
|
||||||
|
if (this.$refs.vsl) {
|
||||||
|
this.$refs.vsl.scrollToBottom();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleDrop(data, event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
this.files = Array.from(event.dataTransfer.files);
|
||||||
|
|
||||||
|
this.dragStarted = false;
|
||||||
|
this.showDroppedList = true;
|
||||||
|
this.uploadDescription = null;
|
||||||
|
},
|
||||||
|
handleDragEnter(event, dropContainer) {
|
||||||
|
this.dragStarted = true;
|
||||||
|
this.dropBoxClass = dropContainer;
|
||||||
|
},
|
||||||
|
handleDragLeave(event) {
|
||||||
|
this.dragStarted = false;
|
||||||
|
},
|
||||||
|
// // $event, 'replayTextRef', 'replays'
|
||||||
|
// resizeIt(ev, textAreaName, container) {
|
||||||
|
// return;
|
||||||
|
// // do nothing.
|
||||||
|
|
||||||
|
// ev.target.style.height = "auto";
|
||||||
|
// var newHeight = ev.target.scrollHeight > 37 ? ev.target.scrollHeight : 37;
|
||||||
|
|
||||||
|
// if (ev.which == 13) {
|
||||||
|
// return;
|
||||||
|
// } else {
|
||||||
|
// // escape key pressed
|
||||||
|
// if (ev.which == 27) {
|
||||||
|
// newHeight = 37;
|
||||||
|
// }
|
||||||
|
// // const fz= parseFloat(getComputedStyle(ev.target).getPropertyValue("font-size"));
|
||||||
|
// // increase/decrease height of the form(textarea), if textarea height changed(2 < lines < 5).
|
||||||
|
// ev.target.style.height = newHeight.toString() + "px";
|
||||||
|
|
||||||
|
// if (newHeight < 115) {
|
||||||
|
// this.$refs[container].style.height = `calc(100vh - ${
|
||||||
|
// newHeight + "px"
|
||||||
|
// } - 6em)`;
|
||||||
|
|
||||||
|
// let replyCommentBoxHeight = "0px";
|
||||||
|
// if (this.isReplayEditMode || this.isMainEditMode) {
|
||||||
|
// replyCommentBoxHeight = "4em";
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // just for the left sidebar(replays) form
|
||||||
|
// if (textAreaName == "replayTextRef") {
|
||||||
|
// // decrease height of the comment list, if textarea height changed.
|
||||||
|
// this.$refs[container].style.height = `calc(100vh - ${
|
||||||
|
// newHeight + "px"
|
||||||
|
// } - 10.7em - ${replyCommentBoxHeight} )`;
|
||||||
|
// } else if (textAreaName == "mainTextAreaInput") {
|
||||||
|
// this.$refs[container].style.height = `calc(100vh - ${
|
||||||
|
// newHeight + "px"
|
||||||
|
// } - 6.2em - ${replyCommentBoxHeight})`;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="d-flex w-100">
|
||||||
<group
|
<group
|
||||||
ref="chat-list-panel"
|
ref="chat-list-panel"
|
||||||
@update-messages="rerenderChatList++"
|
@update-messages="rerenderChatList++"
|
||||||
|
|
@ -10,12 +10,12 @@
|
||||||
<div class="flex-grow-1">
|
<div class="flex-grow-1">
|
||||||
<div class="position-relative d-flex justify-content-center"></div>
|
<div class="position-relative d-flex justify-content-center"></div>
|
||||||
<div v-if="listGetter">
|
<div v-if="listGetter">
|
||||||
<!-- <chat-list
|
<chat-list
|
||||||
ref="chat-content"
|
ref="chat-content"
|
||||||
:key="rerenderChatList"
|
:key="rerenderChatList"
|
||||||
@show="statusPage"
|
@show="statusPage"
|
||||||
@my-event="openPagGrup"
|
@my-event="openPagGrup"
|
||||||
></chat-list> -->
|
></chat-list>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else class="no-group-selected" :class="$route.name">
|
<div v-else class="no-group-selected" :class="$route.name">
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { clearBodyClass } from "@manuals/utilities";
|
import { clearBodyClass } from "@manuals/utilities";
|
||||||
import menu from "@chat/json/chat/json/menu.json";
|
import menu from "@chat/json/menu.json";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "chatRouterView",
|
name: "chatRouterView",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user