2347 lines
65 KiB
Vue
2347 lines
65 KiB
Vue
<template>
|
||
<div
|
||
class="menu-bar__content menu-bar-content home-list p-3"
|
||
:class="{ 'hidden-heder': !showMainpag }"
|
||
>
|
||
<!-- <div class="menu-bar__content menu-bar-content home-list p-3"
|
||
v-if="showMainpag"
|
||
> -->
|
||
<Breadcrumbs class="m-0" />
|
||
<div class="home-list__header pb-0">
|
||
<div class="flex-grow-1 search-main hidean-search" ref="search">
|
||
<button class="button-search open" @click="showSearchs()">
|
||
<span class="tavasi tavasi-Component-21--1"></span>
|
||
</button>
|
||
<form class="search-filter" role="search" @submit.prevent="sendQuery">
|
||
<div class="input-group mb-3">
|
||
<div class="input-group-append">
|
||
<button
|
||
class="input-group-text"
|
||
type="button"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true"
|
||
aria-expanded="false"
|
||
>
|
||
<!-- settings icon -->
|
||
<svg class="icon icon-settings">
|
||
<use xlink:href="#icon-settings"></use>
|
||
</svg>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<button
|
||
@click.prevent="setSearchType('all')"
|
||
class="btn dropdown-item new-message"
|
||
:class="{ active: serachType == 'all' }"
|
||
type="button"
|
||
>
|
||
<svg class="icon icon-all">
|
||
<use xlink:href="#icon-all"></use>
|
||
</svg>
|
||
همه
|
||
</button>
|
||
<button
|
||
@click.prevent="setSearchType('personal')"
|
||
class="btn dropdown-item new-group"
|
||
:class="{ active: serachType == 'personal' }"
|
||
type="button"
|
||
>
|
||
<svg class="icon icon-personal">
|
||
<use xlink:href="#icon-personal"></use>
|
||
</svg>
|
||
شخصی
|
||
</button>
|
||
<button
|
||
@click.prevent="setSearchType('groups')"
|
||
class="btn dropdown-item new-group"
|
||
:class="{ active: serachType == 'groups' }"
|
||
type="button"
|
||
>
|
||
<svg class="icon icon-groups">
|
||
<use xlink:href="#icon-groups"></use>
|
||
</svg>
|
||
گروه ها
|
||
</button>
|
||
<button
|
||
@click.prevent="setSearchType('my-messages')"
|
||
class="btn dropdown-item new-group"
|
||
:class="{ active: serachType == 'my-messages' }"
|
||
type="button"
|
||
>
|
||
<svg class="icon icon-my-messages">
|
||
<use xlink:href="#icon-my-messages"></use>
|
||
</svg>
|
||
خوانده نشده ها
|
||
</button>
|
||
<button
|
||
@click.prevent="setSearchType('unread')"
|
||
class="btn dropdown-item new-group"
|
||
:class="{ active: serachType == 'unread' }"
|
||
type="button"
|
||
>
|
||
<svg class="icon icon-unread">
|
||
<use xlink:href="#icon-unread"></use>
|
||
</svg>
|
||
پیام های من
|
||
</button>
|
||
<button
|
||
@click.prevent="setSearchType('lobby')"
|
||
class="btn dropdown-item new-group"
|
||
:class="{ active: serachType == 'lobby' }"
|
||
type="button"
|
||
>
|
||
<svg class="icon icon-lobby">
|
||
<use xlink:href="#icon-lobby"></use>
|
||
</svg>
|
||
تالارها
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<input
|
||
dir="rtl"
|
||
v-model.trim="searchText"
|
||
type="search"
|
||
required
|
||
class="form-control"
|
||
id="search-query"
|
||
placeholder="جستجو..."
|
||
name="search-query"
|
||
aria-label="جستجو در اسناد، عناوین و واژگان"
|
||
aria-describedby="basic-addon1"
|
||
size="50"
|
||
@keyup="sendQuery()"
|
||
@keydown="onKeyDown()"
|
||
/>
|
||
|
||
<div class="input-group-prepend">
|
||
<button
|
||
@click="clearSearchAndGetList"
|
||
type="button"
|
||
class="input-group-text"
|
||
id="basic-addon1"
|
||
>
|
||
<i v-if="searchText" class="tavasi tavasi-Component-294--1"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="navbar open">
|
||
<div class="navbar-grow">
|
||
<div
|
||
v-for="(item, index) in menu.chats"
|
||
:key="index"
|
||
class="hover-border"
|
||
>
|
||
<RouterLink
|
||
:to="{ name: item.link }"
|
||
class="has-sub-items gl-link"
|
||
>
|
||
<svg class="nav-icon-container" :class="'icon icon-' + item.icon">
|
||
<use :xlink:href="'#icon-' + item.icon"></use>
|
||
</svg>
|
||
</RouterLink>
|
||
</div>
|
||
<div class="hover-border1" @click="showSearchs()">
|
||
<span class="tavasi tavasi-Component-198--1"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="home-list__content scroll-needed"
|
||
:class="{ loading: fetchingData }"
|
||
>
|
||
<div class="last-search h-100" id="last-search">
|
||
<div class="last-search-content h-100" @scroll="loadMore">
|
||
<div class="content">
|
||
<div v-if="$route.name == 'privates'">
|
||
<div
|
||
class="group-item"
|
||
v-for="(groupItem, index) in groups"
|
||
:key="index"
|
||
>
|
||
<div class="group-row enable-hover">
|
||
<div class="group-picture-container">
|
||
<context-menu
|
||
dataOffset="0,0"
|
||
style="position:static;"
|
||
:list="groups"
|
||
:clickedItem="groupItem"
|
||
:contextMenu="commonContextMenu"
|
||
:parentComponent="'groups-panel'"
|
||
@remove-item="removeItem(groups, groupItem, index)"
|
||
>
|
||
<!-- @generate-invite-post="openCreateForm('privates', groupItem)" -->
|
||
</context-menu>
|
||
|
||
<img
|
||
class="group-picture"
|
||
@error="handleImageSrcOnError($event, false)"
|
||
:src="getGroupAvatar(groupItem)"
|
||
:alt="groupItem.title"
|
||
/>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
@click.prevent="showMessages(groups, groupItem, index)"
|
||
@click="showfilter()"
|
||
:title="groupItem.unread ?? 0"
|
||
class="btn group-content"
|
||
:class="{ active: groupItem.active ?? false }"
|
||
>
|
||
<div class="group-title-container">
|
||
<h4 class="group-title">
|
||
<!-- <span class="tavasi tavasi-personal"></span> -->
|
||
<svg class="icon icon-personal">
|
||
<use xlink:href="#icon-personal"></use>
|
||
</svg>
|
||
{{ groupItem.title }}
|
||
</h4>
|
||
|
||
<span class="group-time">
|
||
{{ convertUnixToPersianDateTime(groupItem.created_at) }}
|
||
</span>
|
||
</div>
|
||
<div class="group-description-container">
|
||
<p class="group-description">
|
||
{{ groupItem.desc }}
|
||
</p>
|
||
<span
|
||
v-if="groupItem?.seen_messages?.count > 0"
|
||
class="group-unread-indicator badge badge-info"
|
||
>
|
||
{{ groupItem?.seen_messages?.count ?? 0 }}
|
||
</span>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="$route.name == 'groups'">
|
||
<div
|
||
class="group-item"
|
||
v-for="(groupItem, index) in groups"
|
||
:key="index"
|
||
>
|
||
<div
|
||
class="group-row "
|
||
:class="{ 'enable-hover': isGroupAdmin(groupItem) }"
|
||
>
|
||
<div class="group-picture-container">
|
||
<context-menu
|
||
v-if="isGroupAdmin(groupItem)"
|
||
dataOffset="0,0"
|
||
style="position:static;"
|
||
:list="groups"
|
||
:clickedItem="groupItem"
|
||
:contextMenu="commonContextMenu"
|
||
:parentComponent="'groups-panel'"
|
||
@remove-item="removeItem(groups, groupItem, index)"
|
||
@edit-item="editItem(groups, groupItem, index)"
|
||
@join-to-group="openGroupSearchForm('groups', groupItem)"
|
||
>
|
||
</context-menu>
|
||
|
||
<img
|
||
class="group-picture"
|
||
@error="handleImageSrcOnError($event, false)"
|
||
:src="getGroupAvatar(groupItem)"
|
||
:alt="groupItem.title"
|
||
/>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
@click.prevent="showMessages(groups, groupItem, index)"
|
||
@click="showfilter()"
|
||
:title="groupItem.unread ?? 0"
|
||
class="btn group-content"
|
||
:class="{ active: groupItem.active ?? false }"
|
||
>
|
||
<div class="group-title-container">
|
||
<h4 class="group-title">
|
||
<!-- <span class="tavasi tavasi-groups"></span> -->
|
||
<svg class="icon icon-groups">
|
||
<use xlink:href="#icon-groups"></use>
|
||
</svg>
|
||
{{ groupItem.title }}
|
||
</h4>
|
||
|
||
<span class="group-time">
|
||
{{ convertUnixToPersianDateTime(groupItem.created_at) }}
|
||
</span>
|
||
</div>
|
||
<div class="group-description-container">
|
||
<p class="group-description">
|
||
{{ groupItem.desc }}
|
||
</p>
|
||
<span
|
||
v-if="groupItem?.seen_messages?.count > 0"
|
||
class="group-unread-indicator badge badge-info"
|
||
>
|
||
{{ groupItem?.seen_messages?.count ?? 0 }}
|
||
</span>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="$route.name == 'unReads'">
|
||
<div
|
||
class="group-item unReads"
|
||
v-for="(groupItem, index) in groups"
|
||
:key="index"
|
||
>
|
||
<div class="group-row ">
|
||
<div class="group-picture-container">
|
||
<context-menu
|
||
dataOffset="0,0"
|
||
style="position:static;"
|
||
:list="groups"
|
||
:clickedItem="groupItem"
|
||
:contextMenu="commonContextMenu"
|
||
:parentComponent="'groups-panel'"
|
||
@remove-item="removeItem(groups, groupItem, index)"
|
||
@edit-item="editItem(groups, groupItem, index)"
|
||
>
|
||
</context-menu>
|
||
|
||
<img
|
||
class="group-picture"
|
||
@error="handleImageSrcOnError($event, false)"
|
||
:src="getGroupAvatar(groupItem)"
|
||
:alt="groupItem.title"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="group-content p-2"
|
||
:class="{ active: groupItem.active ?? false }"
|
||
>
|
||
<div class="group-title-container">
|
||
<h4 class="group-title">
|
||
<!-- <span class="tavasi tavasi-personal"></span> -->
|
||
{{ groupItem.title }}
|
||
</h4>
|
||
|
||
<div class="unreads-box">
|
||
<!-- message info -->
|
||
<button
|
||
type="button"
|
||
@click.prevent="
|
||
showMessages(groups, groupItem, index)
|
||
"
|
||
:title="groupItem.unread ?? 0"
|
||
class="btn unread-button"
|
||
>
|
||
<!-- <span class="unread-message-label">
|
||
پیام ها :
|
||
</span> -->
|
||
<svg class="icon icon-Component-112--1">
|
||
<use xlink:href="#icon-Component-112--1"></use>
|
||
</svg>
|
||
{{ groupItem.seen_messages.count }}
|
||
</button>
|
||
|
||
<!-- replay info -->
|
||
<button
|
||
type="button"
|
||
@click.prevent="
|
||
showMessages(groups, groupItem, index)
|
||
"
|
||
:title="groupItem.unread ?? 0"
|
||
class="btn unread-button"
|
||
@click="showfilter()"
|
||
>
|
||
<!-- <span class="unread-message-label">
|
||
پاسخ ها :
|
||
</span> -->
|
||
<svg class="icon icon-reply">
|
||
<use xlink:href="#icon-reply"></use>
|
||
</svg>
|
||
{{ replayCount(groupItem.seen_replys) }}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- <span class="group-time">
|
||
{{ convertUnixToPersianDateTime(groupItem.date_c) }}
|
||
</span> -->
|
||
</div>
|
||
<div class="group-description-container">
|
||
<p class="group-description">
|
||
{{ groupItem.last_message.text }}
|
||
</p>
|
||
<!-- <span class="group-unread-indicator badge badge-info">
|
||
{{ groupItem.seen.count }}
|
||
</span> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="$route.name == 'lobbies'">
|
||
<div class="accordion" id="lobby-accordion">
|
||
<div
|
||
v-for="(lobby, key) in groups"
|
||
:key="key"
|
||
class="card border-0 group-item"
|
||
>
|
||
<div
|
||
class="card-header border-bottom-0 p-0"
|
||
:id="'heading' + key"
|
||
>
|
||
<button
|
||
type="button"
|
||
class="btn has-indicator group-row"
|
||
:title="lobby.title"
|
||
data-toggle="collapse"
|
||
:data-target="'#collapse' + key"
|
||
:aria-expanded="!collapseAll"
|
||
:class="[
|
||
{ collapsed: collapseAll },
|
||
{ ' enable-hover': isGroupAdmin(lobby) },
|
||
]"
|
||
:aria-controls="'collapse' + key"
|
||
>
|
||
<div class="group-picture-container">
|
||
<context-menu
|
||
v-if="isGroupAdmin(lobby)"
|
||
dataOffset="0,0"
|
||
style="position:static;"
|
||
:list="groups"
|
||
:clickedItem="lobby"
|
||
:contextMenu="commonContextMenu"
|
||
:parentComponent="'groups-panel'"
|
||
@remove-item="removeItem(groups, lobby, key)"
|
||
@edit-item="editItem(groups, lobby, key)"
|
||
>
|
||
</context-menu>
|
||
|
||
<img
|
||
class="group-picture"
|
||
@error="handleImageSrcOnError($event, false)"
|
||
:src="getGroupAvatar(lobby)"
|
||
:alt="lobby.title"
|
||
/>
|
||
</div>
|
||
<div class="group-content" @click="showfilter()">
|
||
<div class="group-title-container">
|
||
<h4 class="group-title">
|
||
<svg class="icon icon-lobby">
|
||
<use xlink:href="#icon-lobby"></use>
|
||
</svg>
|
||
|
||
<!-- <img
|
||
width="1em"
|
||
height="1em"
|
||
class=""
|
||
src="assets/common/img/lobby.svg"
|
||
alt="لابی"
|
||
/> -->
|
||
{{ lobby.title }}
|
||
</h4>
|
||
</div>
|
||
<div class="group-description-container">
|
||
<p class="group-description">
|
||
{{ lobby.desc }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
<div
|
||
:id="'collapse' + key"
|
||
class="collapse"
|
||
:class="{ show: !collapseAll }"
|
||
:aria-labelledby="'heading' + key"
|
||
data-parent="#lobby-accordion"
|
||
>
|
||
<div class="card-body p-0">
|
||
<ul class="list-group list-group-flush">
|
||
<li
|
||
:key="j"
|
||
v-for="(group, j) in lobby.sub_groups"
|
||
class="list-group-item p-0"
|
||
>
|
||
<button
|
||
type="button"
|
||
@click.prevent="
|
||
lobbyShowMessages(groups, key, group, j)
|
||
"
|
||
class="btn group-row"
|
||
:title="group.title"
|
||
:class="{ 'enable-hover': isGroupAdmin(group) }"
|
||
>
|
||
<div class="group-picture-container">
|
||
<context-menu
|
||
v-if="isGroupAdmin(group)"
|
||
dataOffset="0,0"
|
||
style="position:static;"
|
||
:list="groups"
|
||
:clickedItem="group"
|
||
:contextMenu="commonContextMenu"
|
||
:parentComponent="'groups-panel'"
|
||
@edit-item="editItem(groups, group, j)"
|
||
@remove-from-lobby="removeGroupFromLobby(group)"
|
||
>
|
||
</context-menu>
|
||
|
||
<img
|
||
class="group-picture"
|
||
@error="handleImageSrcOnError($event, false)"
|
||
:src="getGroupAvatar(group)"
|
||
:alt="group.title"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="group-content"
|
||
:class="{ active: group.active ?? false }"
|
||
>
|
||
<div class="group-title-container">
|
||
<h4 class="group-title">
|
||
<img
|
||
width="1em"
|
||
height="1em"
|
||
class=""
|
||
:src="group.avatar"
|
||
:alt="group.title"
|
||
/>
|
||
{{ group.title }}
|
||
</h4>
|
||
|
||
<span class="group-time">
|
||
{{ group.created_at }}
|
||
</span>
|
||
</div>
|
||
<div class="group-description-container">
|
||
<p class="group-description">
|
||
{{
|
||
convertUnixToPersianDateTime(
|
||
group.created_at
|
||
)
|
||
}}
|
||
</p>
|
||
<span
|
||
v-if="group?.seen_messages?.count > 0"
|
||
class="group-unread-indicator badge badge-secondary"
|
||
>
|
||
{{ group?.seen_messages?.count ?? 0 }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- sidebar toggle button -->
|
||
<!-- <div class="d-md-none hide-list-panel">
|
||
<button
|
||
name="button"
|
||
type="button"
|
||
class="toggle-mobile-nav"
|
||
@click="$emit('hide-panel')"
|
||
>
|
||
<svg class="s12 icon-chevron-double-lg-right">
|
||
<use
|
||
href="assets/common/img/icons.svg#chevron-double-lg-right"
|
||
></use>
|
||
</svg>
|
||
<span class="collapse-text mr-2">بستن</span>
|
||
</button>
|
||
</div> -->
|
||
|
||
<!-- create new message button -->
|
||
<div class="btn-group dropup actions-button" data-offset="10,10">
|
||
<button
|
||
type="button"
|
||
class="btn"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true"
|
||
aria-expanded="false"
|
||
>
|
||
<!-- plus icon -->
|
||
<span class="tavasi tavasi-Component-133--1 plus-icon"></span>
|
||
<!-- muliply icon -->
|
||
<span class="tavasi tavasi-Component-294--1 multiply-icon"></span>
|
||
</button>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<!-- Dropdown menu links -->
|
||
<button
|
||
@click.prevent="openUserSearchForm()"
|
||
class="btn dropdown-item new-message"
|
||
type="button"
|
||
>
|
||
<span class="tavasi tavasi-personal"></span>
|
||
پیام جدید
|
||
</button>
|
||
<button
|
||
@click.prevent="openCreateForm('groups')"
|
||
class="btn dropdown-item new-group"
|
||
type="button"
|
||
>
|
||
<span class="tavasi tavasi-groups"></span>
|
||
گروه جدید
|
||
</button>
|
||
<!-- <button
|
||
@click.prevent="openCreateForm('lobbies')"
|
||
class="btn dropdown-item new-lobby"
|
||
type="button"
|
||
>
|
||
<span class="tavasi tavasi-channel"></span>
|
||
تالار جدید
|
||
</button> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="create-forms" v-if="showForm">
|
||
<div class="close-form mb-5">
|
||
<button
|
||
@click.prevent="closeCreateForm()"
|
||
type="button"
|
||
class="btn d-flex align-items-center pr-0"
|
||
>
|
||
<span class="tavasi tavasi-Component-71--1 ml-2"></span>
|
||
بازگشت
|
||
</button>
|
||
</div>
|
||
|
||
<!-- private chat -->
|
||
<div v-if="showUserSearchForm">
|
||
<div class="form-group">
|
||
<label for="users">انتخاب کاربر: </label>
|
||
<multiselect
|
||
id="users"
|
||
track-by="user_id"
|
||
placeholder="جستجوی..."
|
||
:show-labels="false"
|
||
:options="foundUsers"
|
||
:searchable="true"
|
||
:loading="isLoading"
|
||
:internal-search="false"
|
||
:clear-on-select="false"
|
||
:close-on-select="true"
|
||
:options-limit="300"
|
||
:limit="3"
|
||
:limit-text="limitText"
|
||
:max-height="600"
|
||
:customLabel="
|
||
(item) => {
|
||
return `${item.first_name} ${item.last_name}`;
|
||
}
|
||
"
|
||
@search-change="asyncFind"
|
||
@select="showUserPrivateMessages"
|
||
@close="isLoading = false"
|
||
>
|
||
<!-- <div slot="tag" slot-scope="{ option, remove }"
|
||
><span class="custom__tag"
|
||
><span>{{ option.name }}</span
|
||
><span class="custom__remove" @click="remove(option)"
|
||
>❌</span
|
||
></span
|
||
></div
|
||
> -->
|
||
<!-- <div slot="clear" slot-scope="props">
|
||
<div
|
||
class="multiselect__clear"
|
||
v-if="selectedCountries.length"
|
||
@mousedown.prevent.stop="clearAll(props.search)"
|
||
></div> </div
|
||
><span slot="noResult"
|
||
>Oops! No elements found. Consider changing the search
|
||
query.</span
|
||
> -->
|
||
</multiselect>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- finding group -->
|
||
<div v-if="showGroupSearchForm">
|
||
<div class="form-group">
|
||
<label for="add-member-group">جستجوی گروه: </label>
|
||
<multiselect
|
||
id="add-member-group"
|
||
track-by="id"
|
||
label="title"
|
||
placeholder="جستجوی..."
|
||
:options="foundGroups"
|
||
:searchable="true"
|
||
:loading="isLoading"
|
||
:internal-search="false"
|
||
:clear-on-select="false"
|
||
:close-on-select="true"
|
||
:options-limit="300"
|
||
:limit="3"
|
||
:limit-text="limitText"
|
||
:max-height="600"
|
||
@search-change="asyncFindGroup"
|
||
@select="addGroupToSelectedGroup"
|
||
@close="isLoading = false"
|
||
>
|
||
</multiselect>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- group/lobby create/edit form -->
|
||
<form v-if="showNewGroupForm" @submit.prevent="createItem">
|
||
<div class="form-group">
|
||
<h6>
|
||
فرم ایجاد گروه
|
||
</h6>
|
||
</div>
|
||
<div v-if="formType == 'lobbies'" class="form-group">
|
||
<label for="exampleFormControlTextarea1">انتخاب گروه: </label>
|
||
<div class="d-flex align-items-center">
|
||
<multiselect
|
||
:allow-empty="true"
|
||
:searchable="true"
|
||
:close-on-select="true"
|
||
:show-labels="false"
|
||
label="title"
|
||
track-by="id"
|
||
placeholder="انتخاب تالار"
|
||
v-model="form.parent"
|
||
:options="groups"
|
||
:hide-selected="false"
|
||
:limit-text="
|
||
(count) => {
|
||
return `و ${count} تالار دیگر`;
|
||
}
|
||
"
|
||
:max-height="200"
|
||
>
|
||
</multiselect>
|
||
<div class="dropdown create-group-inner-form">
|
||
<button
|
||
type="button"
|
||
class="btn"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true"
|
||
aria-expanded="false"
|
||
>
|
||
<!-- plus icon -->
|
||
<span class="tavasi tavasi-Component-133--1 plus-icon"></span>
|
||
<!-- muliply icon -->
|
||
<span
|
||
class="tavasi tavasi-Component-294--1 multiply-icon"
|
||
></span>
|
||
</button>
|
||
|
||
<div class="dropdown-menu ">
|
||
<div class="form-group">
|
||
<label for="form-title">عنوان: </label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
id="form-title"
|
||
aria-describedby="title"
|
||
v-model.trim="form.title"
|
||
/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="form-desc">توضیحات: </label>
|
||
<textarea
|
||
class="form-control"
|
||
id="form-desc"
|
||
rows="3"
|
||
v-model.trim="form.desc"
|
||
></textarea>
|
||
</div>
|
||
<div class="dropdown-divider"></div>
|
||
<div class="d-flex justify-content-between text-center">
|
||
<a
|
||
@click.prevent="createNewGroup"
|
||
class=" btn btn-primary "
|
||
href="#"
|
||
>ذخیره</a
|
||
>
|
||
|
||
<a
|
||
@click.prevent="createNewGroup"
|
||
class=" btn btn-danger "
|
||
href="#"
|
||
>انصراف</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleInputEmail1">عنوان: </label>
|
||
<input
|
||
type="text"
|
||
class="form-control"
|
||
id="exampleInputEmail1"
|
||
aria-describedby="title"
|
||
v-model.trim="form.title"
|
||
/>
|
||
<small id="emailHelp" class="form-text text-muted">
|
||
این متن فقط جنبه نمایشی دارد.
|
||
</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleFormControlTextarea1">توضیحات: </label>
|
||
<textarea
|
||
class="form-control"
|
||
id="exampleFormControlTextarea1"
|
||
rows="3"
|
||
v-model.trim="form.desc"
|
||
></textarea>
|
||
</div>
|
||
|
||
<div class="form-group " v-if="form.id">
|
||
<div class="custom-checkbox-container position-static">
|
||
<div class="custom-control custom-checkbox">
|
||
<input
|
||
type="checkbox"
|
||
class="custom-control-input"
|
||
id="enable-add-user-to-group"
|
||
v-model="showAddUserForm"
|
||
/>
|
||
<label
|
||
class="custom-control-label"
|
||
for="enable-add-user-to-group"
|
||
>
|
||
افزودن کاربر به گروه
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- private chat -->
|
||
<div v-if="showAddUserForm">
|
||
<div class="form-group">
|
||
<label for="users">جستجوی کاربر: </label>
|
||
<multiselect
|
||
id="users"
|
||
track-by="user_id"
|
||
placeholder="جستجوی..."
|
||
:show-labels="false"
|
||
:options="foundUsers"
|
||
:searchable="true"
|
||
:internal-search="false"
|
||
:clear-on-select="false"
|
||
:close-on-select="true"
|
||
:options-limit="300"
|
||
:limit="3"
|
||
:limit-text="limitText"
|
||
:max-height="600"
|
||
:customLabel="
|
||
(item) => {
|
||
return `${item.first_name} ${item.last_name}`;
|
||
}
|
||
"
|
||
@search-change="asyncFind"
|
||
@select="addUserToGroup"
|
||
>
|
||
</multiselect>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary">
|
||
{{ form.id ? "بروزرسانی" : "ایجاد" }}
|
||
</button>
|
||
</form>
|
||
|
||
<!-- upload group/lobby avatar -->
|
||
<form v-if="showUploadAvatarForm" @submit.prevent="uploadAvatar">
|
||
<div class="form-group">
|
||
<h5>
|
||
بارگزاری آواتار
|
||
</h5>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<div
|
||
class="image-uploader-container"
|
||
:class="{ 'hide-preview': hasImage }"
|
||
>
|
||
<image-uploader
|
||
ref="file-uploader"
|
||
:preview="true"
|
||
:debug="1"
|
||
:maxWidth="300"
|
||
:maxHeight="300"
|
||
:maxSize="2"
|
||
:quality="1"
|
||
:autoRotate="true"
|
||
outputFormat="file"
|
||
accept="image/*"
|
||
:className="['fileinput', { 'fileinput--loaded': hasImage }]"
|
||
:capture="false"
|
||
@input="setImage"
|
||
>
|
||
<label class="upload-label" for="fileInput" slot="upload-label">
|
||
<img
|
||
v-if="
|
||
form.avatar?.length &&
|
||
(getFileExtension(form.avatar) == 'png' ||
|
||
getFileExtension(form.avatar) == 'jpg' ||
|
||
getFileExtension(form.avatar) == 'jpeg')
|
||
"
|
||
:src="form.avatar"
|
||
class="img-fluid"
|
||
:alt="form.avatar"
|
||
/>
|
||
|
||
<span
|
||
v-else-if="form.avatar?.length"
|
||
class="tavasi "
|
||
:class="`tavasi-${getFileExtension(form.avatar)}-file`"
|
||
></span>
|
||
|
||
<!-- replace image src with incoming src -->
|
||
|
||
<span v-else class="tavasi tavasi-cloud-upload"></span>
|
||
</label>
|
||
</image-uploader>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import { dragDropMoveMixin } from "~/borhan/mixins/dragDropMoveMixin";
|
||
// import { searchMixin } from "~/borhan/mixins/searchMixin";
|
||
import ImageUploader from "vue-image-upload-resize";
|
||
import chatApi from "~/apis/chatApi";
|
||
import { mapActions, mapState } from "pinia";
|
||
|
||
import privatesContextMenu from "~/json/chat/json/privatesContextMenu.json";
|
||
import groupsContextMenu from "~/json/chat/json/groupsContextMenu.json";
|
||
import lobbiesContextMenu from "~/json/chat/json/lobbiesContextMenu.json";
|
||
import menu from "~/json/chat/json/menu.json";
|
||
import { useCommonStore } from "~/stores/commonStore";
|
||
import { useAuthStore } from "~/stores/authStore";
|
||
export default {
|
||
// mixins: [dragDropMoveMixin],
|
||
emits: ["list-changed", "list-item-changed"],
|
||
props: {
|
||
statusPagHedear: {
|
||
default: 1,
|
||
type: Number,
|
||
},
|
||
},
|
||
watch: {
|
||
$route: {
|
||
handler: function(to) {
|
||
this.isRedirectedFromOtherSystems = false;
|
||
this.getAll(to.name);
|
||
},
|
||
deep: true,
|
||
// immediate: true,
|
||
},
|
||
},
|
||
beforeMount() {
|
||
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.httpService = new HttpService(
|
||
import.meta.env.VITE_MESSAGE_BASE_URL,
|
||
headers
|
||
);
|
||
this.authHttpService = new HttpService(import.meta.env.VITE_AUTH_BASE_URL);
|
||
|
||
if (this.$route.name == "privates")
|
||
this.commonContextMenu = privatesContextMenu;
|
||
|
||
if (this.$route.name == "groups")
|
||
this.commonContextMenu = groupsContextMenu;
|
||
|
||
if (this.$route.name == "lobbies")
|
||
this.commonContextMenu = lobbiesContextMenu;
|
||
if (this.$route.name == "unReads")
|
||
this.commonContextMenu = groupsContextMenu;
|
||
|
||
this.SET_LIST(undefined);
|
||
},
|
||
mounted() {
|
||
// check if redirected from other systems.
|
||
// or clicked on a copy link.
|
||
if (this.$route.query["group-id"]) {
|
||
this.groupId = this.$route.query["group-id"];
|
||
this.isRedirectedFromOtherSystems = true;
|
||
}
|
||
|
||
this.getAll(this.$route.name);
|
||
if (this.statusPagHedear == 1) {
|
||
}
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
// #region mehdi
|
||
|
||
showMainpag: true,
|
||
menu: menu,
|
||
|
||
// #endregion
|
||
|
||
typingTimer: 0,
|
||
doneTypingInterval: 500,
|
||
searchText: "",
|
||
|
||
serachType: "all",
|
||
showAddUserForm: false,
|
||
busy: false,
|
||
foundGroups: [],
|
||
showUploadAvatarForm: false,
|
||
showGroupSearchForm: false,
|
||
|
||
groupsExpanded: false,
|
||
showNewGroupForm: false,
|
||
hasImage: false,
|
||
imageUrl: undefined,
|
||
uploading: false,
|
||
|
||
selectedUser: {},
|
||
foundUsers: [],
|
||
isLoading: false,
|
||
showUserSearchForm: false,
|
||
|
||
selectedGroup: undefined,
|
||
commonContextMenu: [],
|
||
|
||
fetchingData: false,
|
||
users: [],
|
||
prevSelectedItemIndex: 0,
|
||
prevParentSelectedItemIndex: 0,
|
||
|
||
convertGroupIntegerToString: {
|
||
groups: 1,
|
||
lobbies: 2,
|
||
privates: 3,
|
||
},
|
||
convertGroupStringToInteger: {
|
||
1: "groups",
|
||
2: "lobbies",
|
||
3: "privates",
|
||
},
|
||
showForm: false,
|
||
formType: 1,
|
||
form: {
|
||
id: undefined,
|
||
title: null,
|
||
desc: null,
|
||
type: 1,
|
||
message_state: 1,
|
||
members: [],
|
||
parent_id: undefined,
|
||
},
|
||
collapseAll: false,
|
||
groups: [],
|
||
showReplaceInput: true,
|
||
httpService: undefined,
|
||
authHttpService: undefined,
|
||
list: [],
|
||
|
||
pagination: {
|
||
pages: 0,
|
||
total: 0,
|
||
page: 1,
|
||
offset: 0, // page * per_page
|
||
limit: 50, //per_page
|
||
},
|
||
isRedirectedFromOtherSystems: false,
|
||
groupId: undefined,
|
||
messageId: undefined,
|
||
};
|
||
},
|
||
|
||
computed: {
|
||
...mapState(useCommonStore,["isSidebarCollapsed"]),
|
||
},
|
||
methods: {
|
||
...mapActions(useCommonStore, ["TOGGLE_PANEL", "checkPermissions"]),
|
||
...mapActions("list", ["SET_LIST"]),
|
||
sendQuery() {
|
||
// todo: show loading.
|
||
// todo: send query and show result.
|
||
// todo: hide loading.
|
||
|
||
clearTimeout(this.typingTimer);
|
||
this.typingTimer = setTimeout(() => {
|
||
this.getAll();
|
||
}, this.doneTypingInterval);
|
||
},
|
||
onKeyDown() {
|
||
clearTimeout(this.typingTimer);
|
||
},
|
||
setSearchType(type) {
|
||
this.serachType = type;
|
||
},
|
||
clearSearchAndGetList() {
|
||
this.searchText = null;
|
||
this.getAll();
|
||
},
|
||
|
||
async getAll(listType = "all") {
|
||
if (this.fetchingData) return;
|
||
this.fetchingData = true;
|
||
|
||
let url = chatApi[listType].list;
|
||
|
||
// let urlPrefix = chatApi.groups.list;
|
||
if (!(listType == "lobbies" || listType == "unReads"))
|
||
url += `${this.pagination.offset}/${this.pagination.limit}`;
|
||
// else if (listType == "lobbies") urlPrefix = chatApi.lobbies.list
|
||
// else if (listType == "privates") url += `${this.pagination.offset}/${this.pagination.limit}`;
|
||
// let url = urlPrefix + `${this.pagination.offset}/${this.pagination.limit}`
|
||
// const methodType = listType == "unReads" ? 'postRequest' : 'getRequest'
|
||
|
||
return await this.httpService
|
||
.getRequest(url)
|
||
.then((response) => {
|
||
this.groups = response.data;
|
||
this.users = response.users;
|
||
this.pagination = { ...this.pagination, ...response.pagination };
|
||
|
||
// when redirecting from other pages(jahat).
|
||
if (this.isRedirectedFromOtherSystems) {
|
||
this.groups.forEach((group) => {
|
||
if (group.id == this.groupId) {
|
||
group.active = true;
|
||
this.SET_LIST(group);
|
||
}
|
||
});
|
||
}
|
||
return response;
|
||
})
|
||
.catch((error) => {
|
||
})
|
||
.finally(() => {
|
||
this.fetchingData = false;
|
||
this.busy = false;
|
||
|
||
this.showMainpag = true;
|
||
});
|
||
},
|
||
setUser(list, responseUsers) {
|
||
list.forEach((listItem) => {
|
||
listItem.user = responseUsers.find(
|
||
(user) => user.user_id == listItem.user
|
||
);
|
||
});
|
||
},
|
||
|
||
createItem(group_id = undefined) {
|
||
if (this.fetchingData) return;
|
||
this.fetchingData = true;
|
||
|
||
let url = chatApi[this.$route.name].create;
|
||
|
||
// if (formType == "groups") urlPrefix =
|
||
// else if (formType == "lobbies") urlPrefix = chatApi.lobbies.create
|
||
// else if (formType == "privates") urlPrefix = chatApi.privates.create
|
||
// const payload = structuredClone(this.form);
|
||
|
||
this.form.members = JSON.stringify(this.form.members);
|
||
this.form.admins = undefined;
|
||
this.form.group_id = group_id;
|
||
|
||
this.httpService
|
||
.formDataRequest(url, this.form)
|
||
.then((res) => {
|
||
this.fetchingData = false;
|
||
|
||
// this.getAll(this.formType);
|
||
// this.form = res.data;
|
||
// this.mySwalToast({
|
||
// title: "",
|
||
// html: res.message,
|
||
// });
|
||
|
||
this.showNewGroupForm = false;
|
||
this.showUploadAvatarForm = true;
|
||
})
|
||
|
||
|
||
},
|
||
// remove group/remove lobby group
|
||
removeItem(groups, groupItem, index) {
|
||
this.mySwalConfirm({
|
||
title: "هشدار!!!",
|
||
html: `از حذف <b>${groupItem.title}</b> اطمینان دارید؟ `,
|
||
icon: "warning",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
const payload = {
|
||
group_id: groupItem.id,
|
||
};
|
||
|
||
this.httpService
|
||
.postRequest(chatApi.groups.delete, payload)
|
||
.then((res) => {
|
||
// this.mySwalToast({
|
||
// html: res.message,
|
||
// icon: "success",
|
||
// });
|
||
this.getAll();
|
||
|
||
// groups.splice(index, 1);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
editItem(groups, groupItem, index) {
|
||
this.form = structuredClone(groupItem);
|
||
this.markActive(groups, index);
|
||
this.openGroupCreateForm(this.convertGroupIntegerToString[this.formType]);
|
||
},
|
||
resetForm() {
|
||
this.form = {
|
||
id: undefined,
|
||
title: null,
|
||
desc: null,
|
||
type: 1,
|
||
message_state: 1,
|
||
members: [],
|
||
};
|
||
},
|
||
|
||
loadMore($event) {
|
||
// const listElm = document.querySelector("#last-search");
|
||
const listElm = $event.target;
|
||
|
||
const vm = this;
|
||
if (vm.busy) return;
|
||
|
||
if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
|
||
this.busy = true;
|
||
vm.pagination.offset = vm.pagination.offset + vm.pagination.limit;
|
||
|
||
if (vm.pagination.total > vm.pagination.offset) {
|
||
setTimeout(() => {
|
||
vm.getListOnScroll();
|
||
}, 300);
|
||
} else {
|
||
vm.mySwalToast({
|
||
title: "کاربر محترم",
|
||
|
||
html: "دیگر رکوردی جهت بارگزاری وجود ندارد.",
|
||
icon: "info",
|
||
position: "bottom-start",
|
||
});
|
||
vm.busy = false;
|
||
}
|
||
} else vm.busy = false;
|
||
},
|
||
getListOnScroll() {
|
||
const listType = this.$route.name;
|
||
let url = chatApi[listType].list;
|
||
|
||
// let urlPrefix = chatApi.groups.list;
|
||
if (!(listType == "lobbies" || listType == "unReads"))
|
||
url += `${this.pagination.offset}/${this.pagination.limit}`;
|
||
// else if (listType == "lobbies") urlPrefix = chatApi.lobbies.list
|
||
// else if (listType == "privates") url += `${this.pagination.offset}/${this.pagination.limit}`;
|
||
// let url = urlPrefix + `${this.pagination.offset}/${this.pagination.limit}`
|
||
|
||
// const methodType = listType == "unReads" ? 'postRequest' : 'getRequest'
|
||
|
||
this.httpService
|
||
.getRequest(url)
|
||
.then((response) => {
|
||
this.pagination = { ...this.pagination, ...response.pagination };
|
||
this.groups = [...this.groups, ...response.data];
|
||
})
|
||
.finally(() => {
|
||
this.busy = false;
|
||
});
|
||
},
|
||
|
||
openUserSearchForm() {
|
||
this.showForm = true;
|
||
this.showUserSearchForm = true;
|
||
this.formType = "privates";
|
||
// this.loading = false;
|
||
// this.groupCreated = false;
|
||
},
|
||
openGroupSearchForm(formType, groupItem = undefined) {
|
||
this.showForm = true;
|
||
this.showGroupSearchForm = true;
|
||
this.formType = formType;
|
||
this.selectedGroup = groupItem;
|
||
},
|
||
|
||
openGroupCreateForm() {
|
||
this.showForm = true;
|
||
this.showNewGroupForm = true;
|
||
this.formType = "groups";
|
||
},
|
||
|
||
openCreateForm(formType, groupItem = undefined) {
|
||
// if (formType == 'privates')
|
||
// this.showUserSearchForm = true;
|
||
// else if (formType == 'groups')
|
||
this.showNewGroupForm = true;
|
||
|
||
this.selectedGroup = groupItem;
|
||
this.showForm = true;
|
||
this.formType = "groups";
|
||
this.loading = false;
|
||
},
|
||
|
||
closeCreateForm() {
|
||
this.showForm = false;
|
||
this.showNewGroupForm = false;
|
||
this.showGroupSearchForm = false;
|
||
this.showUserSearchForm = false;
|
||
this.showUploadAvatarForm = false;
|
||
this.loading = false;
|
||
this.resetForm();
|
||
|
||
this.$router
|
||
.push({
|
||
name: this.formType,
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
|
||
closeCreateFormWithoutRedirect() {
|
||
this.showForm = false;
|
||
this.showNewGroupForm = false;
|
||
this.showGroupSearchForm = false;
|
||
this.showUserSearchForm = false;
|
||
this.showUploadAvatarForm = false;
|
||
this.loading = false;
|
||
},
|
||
|
||
resetPagination() {
|
||
this.pagination = {
|
||
pages: 0,
|
||
total: 0,
|
||
page: 1,
|
||
offset: 0, // page * per_page
|
||
limit: 50, //per_page
|
||
};
|
||
},
|
||
toggleSidebarMenu() {
|
||
this.$store.commit("TOGGLE_SIDEBAR_MENU");
|
||
},
|
||
markActive(groups, index) {
|
||
if (this.prevSelectedItemIndex != index) {
|
||
this.$set(groups[this.prevSelectedItemIndex], "active", false);
|
||
}
|
||
|
||
this.prevSelectedItemIndex = index;
|
||
this.$set(groups[index], "active", true);
|
||
},
|
||
|
||
showMessages(groups, groupItem, index) {
|
||
this.markActive(groups, index);
|
||
this.SET_LIST(groupItem);
|
||
|
||
history.pushState({}, document.title, this.$route.path);
|
||
this.isRedirectedFromOtherSystems = false;
|
||
this.$route.query["group-id"] = undefined;
|
||
this.$route.query["message-id"] = undefined;
|
||
|
||
this.$emit("update-messages");
|
||
},
|
||
// lobby,lobbyIndex.sub_groups_item, childIndex
|
||
lobbyShowMessages(lobby, parentIndex, groupItem, index) {
|
||
// اگر تالارثابت باشه و کاربر بر روی گروه های تالار کلیک کند.
|
||
if (
|
||
this.prevParentSelectedItemIndex == parentIndex &&
|
||
this.prevSelectedItemIndex != index
|
||
) {
|
||
this.$set(
|
||
lobby[this.prevParentSelectedItemIndex].sub_groups[
|
||
this.prevSelectedItemIndex
|
||
],
|
||
"active",
|
||
false
|
||
);
|
||
}
|
||
// کاربر بر روی تالار دیگری کلیک کرده است.
|
||
else if (this.prevParentSelectedItemIndex != parentIndex) {
|
||
this.$set(
|
||
lobby[this.prevParentSelectedItemIndex].sub_groups[
|
||
this.prevSelectedItemIndex
|
||
],
|
||
"active",
|
||
false
|
||
);
|
||
}
|
||
|
||
this.prevSelectedItemIndex = index;
|
||
this.prevParentSelectedItemIndex = parentIndex;
|
||
|
||
this.$set(lobby[parentIndex].sub_groups[index], "active", true);
|
||
|
||
this.SET_LIST(groupItem);
|
||
this.$emit("update-messages");
|
||
},
|
||
// after finding the user, on select user event, show the user's messages
|
||
showUserPrivateMessages(user) {
|
||
user.user = user.user_id;
|
||
// user.id = user.user_id;
|
||
user.title = userFullname(user);
|
||
user.desc = null;
|
||
|
||
this.SET_LIST(user);
|
||
this.groups.forEach((groupItem) => {
|
||
groupItem.active = false;
|
||
|
||
if (groupItem.user == user.id) groupItem.active = true;
|
||
});
|
||
|
||
this.closeCreateFormWithoutRedirect();
|
||
this.$emit("update-messages");
|
||
},
|
||
asyncFindGroup(query) {
|
||
if (this.isLoading) return;
|
||
this.isLoading = true;
|
||
|
||
if (query.trim().length) {
|
||
this.httpService
|
||
.getRequest("group/ve/search/1/" + query)
|
||
.then((response) => {
|
||
this.foundGroups = response.data ?? [];
|
||
})
|
||
.catch((err) => {
|
||
})
|
||
.finally(() => {
|
||
this.isLoading = false;
|
||
});
|
||
}
|
||
},
|
||
// add group to a group(making a lobby)
|
||
addGroupToSelectedGroup(comboSelectedGroup) {
|
||
if (this.fetchingData) return;
|
||
this.fetchingData = true;
|
||
|
||
let url = chatApi[this.$route.name].parent;
|
||
|
||
const payload = {
|
||
parent_id: comboSelectedGroup.id,
|
||
group_id: this.selectedGroup.id,
|
||
};
|
||
|
||
this.httpService
|
||
.formDataRequest(url, payload)
|
||
.then((res) => {
|
||
// this.mySwalToast({
|
||
// title: "",
|
||
// html: res.message,
|
||
// });
|
||
this.closeCreateForm();
|
||
})
|
||
|
||
.finally(() => {
|
||
this.fetchingData = false;
|
||
});
|
||
},
|
||
// remove from lobby
|
||
removeGroupFromLobby(group) {
|
||
this.mySwalConfirm({
|
||
title: "هشدار!!!",
|
||
html: ` حذف <b>${group.title}</b> ?`,
|
||
icon: "warning",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
if (this.fetchingData) return;
|
||
this.fetchingData = true;
|
||
|
||
let url = chatApi[this.$route.name].delete;
|
||
|
||
const payload = {
|
||
group_id: group.id,
|
||
parent_id: 0,
|
||
};
|
||
|
||
this.httpService
|
||
.formDataRequest(url, payload)
|
||
.then((res) => {
|
||
this.fetchingData = false;
|
||
|
||
// this.mySwalToast({
|
||
// html: res.message,
|
||
// });
|
||
|
||
this.getAll("lobbies");
|
||
})
|
||
|
||
}
|
||
});
|
||
},
|
||
|
||
replayCount(replays) {
|
||
let sum = 0;
|
||
replays.forEach((item) => {
|
||
sum += item.count;
|
||
});
|
||
return sum;
|
||
},
|
||
limitText(count) {
|
||
return `و ${count} کاربر دیگر`;
|
||
},
|
||
asyncFind(query) {
|
||
if (this.isLoading) return;
|
||
this.isLoading = true;
|
||
|
||
if (query.trim().length) {
|
||
this.authHttpService
|
||
.postRequest("user/suggestion", { query })
|
||
.then((response) => {
|
||
this.isLoading = false;
|
||
this.foundUsers = response.data ?? [];
|
||
})
|
||
.catch((err) => {
|
||
})
|
||
|
||
}
|
||
},
|
||
|
||
isGroupAdmin(comment) {
|
||
const isAdmin =
|
||
comment.admins.findIndex((user) => user == this.currentUser.user_id) >
|
||
-1;
|
||
return isAdmin;
|
||
},
|
||
getFileExtension(filename) {
|
||
const validtypes = [
|
||
"xlsx",
|
||
"xls",
|
||
"doc",
|
||
"docx",
|
||
"ppt",
|
||
"pptx",
|
||
"txt",
|
||
"pdf",
|
||
"jpg",
|
||
"png",
|
||
"jpeg",
|
||
];
|
||
const fileExtension = filename?.split(".").pop();
|
||
return validtypes.includes(fileExtension) ? fileExtension : "other";
|
||
},
|
||
setImage(file) {
|
||
this.hasImage = true;
|
||
this.imageUrl = file;
|
||
this.form.avatar = file.name;
|
||
this.saveFile(file);
|
||
},
|
||
saveFile() {
|
||
if (this.uploading) return;
|
||
this.uploading = true;
|
||
|
||
let url = chatApi.groups.updateAvatar + this.form.id;
|
||
const formData = new FormData();
|
||
formData.append("file", this.$refs["file-uploader"].currentFile);
|
||
|
||
this.httpService
|
||
.postRequest(url, formData, {
|
||
headers: {
|
||
"Content-Type": "multipart/form-data",
|
||
},
|
||
})
|
||
.then((res) => {
|
||
// this.mySwalToast({
|
||
// title: res.message,
|
||
// html: "",
|
||
// });
|
||
|
||
this.closeCreateForm();
|
||
// this.getAll();
|
||
})
|
||
.catch((err) => {
|
||
})
|
||
.finally(() => {
|
||
this.uploading = false;
|
||
});
|
||
},
|
||
addUserToGroup(selectedUser) {
|
||
if (this.fetchingData) return;
|
||
this.fetchingData = true;
|
||
|
||
let url = chatApi.groups.addMember;
|
||
const payload = {
|
||
group_id: this.form.id,
|
||
members: [selectedUser.id],
|
||
};
|
||
|
||
this.httpService
|
||
.postRequest(url, payload)
|
||
.then((res) => {
|
||
// this.mySwalToast({
|
||
// title: "",
|
||
// html: res.message,
|
||
// });
|
||
// this.closeCreateForm();
|
||
// this.getAll();
|
||
})
|
||
.catch((err) => {
|
||
})
|
||
.finally(() => {
|
||
this.isLoading = false;
|
||
this.fetchingData = false;
|
||
});
|
||
},
|
||
|
||
// #region mehdi
|
||
showfilter() {
|
||
this.showMainpag = !this.showMainpag;
|
||
},
|
||
showSearchs() {
|
||
this.showSearch = false;
|
||
this.$refs.search.classList.toggle("hidean-search");
|
||
},
|
||
// #endregion
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "../../../../assets/common/scss/mixin.scss";
|
||
|
||
.group-item {
|
||
.group-row {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
margin-bottom: 0.3em;
|
||
|
||
&.enable-hover:hover {
|
||
.group-picture-container {
|
||
.context-menu-dropdown {
|
||
display: flex;
|
||
}
|
||
.group-picture {
|
||
display: none;
|
||
}
|
||
}
|
||
.group-content {
|
||
background-color: #f0f0f0;
|
||
}
|
||
}
|
||
|
||
.group-picture-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
|
||
// margin-left: 0.5em;
|
||
|
||
border: 1px solid #ccc;
|
||
width: 2.3em;
|
||
height: 2.3em;
|
||
position: relative;
|
||
background-color: #fff;
|
||
|
||
.context-menu-dropdown {
|
||
display: none;
|
||
}
|
||
.group-picture {
|
||
object-fit: cover;
|
||
object-position: center;
|
||
overflow: hidden;
|
||
border-radius: 50%;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.group-content {
|
||
flex: 1;
|
||
border-radius: 0;
|
||
position: relative;
|
||
padding: 0.3em;
|
||
|
||
&:active,
|
||
&.active {
|
||
background-color: #d8f8fd;
|
||
}
|
||
|
||
.group-title-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.group-title {
|
||
// display: flex;
|
||
flex: 1;
|
||
text-align: right;
|
||
// align-items: center;
|
||
// font-size: 0.7rem;
|
||
font-size: 0.8rem;
|
||
margin-bottom: 0.3em;
|
||
// font-family: "sahel-bold";
|
||
font-family: "sahel-semi-bold";
|
||
color: #444;
|
||
@include textOverflow(13em);
|
||
|
||
.tavasi {
|
||
font-size: 0.8rem;
|
||
margin-left: 0.3em;
|
||
}
|
||
}
|
||
.group-time {
|
||
font-size: 0.7rem;
|
||
font-family: "sahel-light";
|
||
}
|
||
|
||
.unreads-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.btn {
|
||
padding: 0;
|
||
margin: 0;
|
||
margin-right: 0.5em;
|
||
color: #888;
|
||
|
||
svg {
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.group-description-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.group-unread-indicator {
|
||
font-size: 0.7rem;
|
||
background-color: #00b6e3;
|
||
font-family: "sahel-light";
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding-top: 0.4em;
|
||
}
|
||
.group-description {
|
||
color: #6f6f6f;
|
||
font-size: 0.8em;
|
||
margin: 0;
|
||
flex: 1;
|
||
text-align: right;
|
||
@include textOverflow(15em);
|
||
}
|
||
}
|
||
|
||
.unread-button {
|
||
.unread-message-label {
|
||
font-size: 0.7rem;
|
||
color: #6f6f6f;
|
||
margin-left: 0.3em;
|
||
line-height: 1;
|
||
}
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
margin-bottom: 0.2em;
|
||
font-size: 0.9rem;
|
||
line-height: 1.2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#lobby-accordion {
|
||
& > .card {
|
||
overflow: visible;
|
||
}
|
||
|
||
.list-group-item {
|
||
border-radius: 0;
|
||
|
||
&:not(:last-child) {
|
||
border-bottom: 1px dashed #ddd;
|
||
}
|
||
|
||
// &:last-child {
|
||
// .group-content {
|
||
// &::before{
|
||
// content:none;
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
.card-header {
|
||
.group-row:hover {
|
||
.group-content {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
.card-body {
|
||
.group-row {
|
||
&:hover {
|
||
}
|
||
|
||
&:active,
|
||
&.active {
|
||
}
|
||
|
||
.group-picture-container {
|
||
.group-picture {
|
||
// width: 3em;
|
||
// height: 3em;
|
||
}
|
||
}
|
||
|
||
.group-content {
|
||
.group-title-container {
|
||
.group-title {
|
||
font-size: 0.8rem;
|
||
.tavasi {
|
||
font-size: 0.7rem;
|
||
// margin-left: 0.3em;
|
||
}
|
||
}
|
||
.group-time {
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
|
||
.group-description-container {
|
||
.group-unread-indicator {
|
||
font-size: 0.7rem;
|
||
}
|
||
.group-description {
|
||
font-size: 0.7rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.menu-bar__content {
|
||
position: static;
|
||
flex: 1 1 100%;
|
||
max-width: 25em;
|
||
max-width: 20em;
|
||
width: auto;
|
||
min-width: 20em;
|
||
|
||
&.show-list-panel {
|
||
right: 0 !important;
|
||
}
|
||
}
|
||
|
||
.home-list__content {
|
||
/*max-height: calc(100vh - 12em);*/
|
||
height: calc(100vh - 8.5em);
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
padding-left: 0.3em;
|
||
|
||
&.loading {
|
||
//background-image: url('./img/item-loading.svg');
|
||
background-repeat: repeat-y;
|
||
background-position: top right;
|
||
background-size: 12em;
|
||
|
||
&::before {
|
||
content: "";
|
||
clear: both;
|
||
|
||
position: absolute;
|
||
right: 0;
|
||
width: 0.5em;
|
||
|
||
height: 100%;
|
||
background-color: #fff;
|
||
|
||
animation-name: example;
|
||
animation-duration: 2s;
|
||
animation-fill-mode: forwards;
|
||
animation-iteration-count: infinite;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
}
|
||
|
||
&:hover .actions-button {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transition: all 0.2s;
|
||
}
|
||
}
|
||
|
||
.actions-button {
|
||
position: absolute;
|
||
bottom: 1em;
|
||
left: 1em;
|
||
z-index: 1;
|
||
width: 2.3em;
|
||
height: 2.3em;
|
||
background-color: #00b6e3;
|
||
border-radius: 50%;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: all 0.2s;
|
||
|
||
& > .btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
}
|
||
|
||
.plus-icon {
|
||
display: inline;
|
||
}
|
||
.multiply-icon {
|
||
display: none;
|
||
}
|
||
|
||
&.show {
|
||
.plus-icon {
|
||
display: none;
|
||
}
|
||
.multiply-icon {
|
||
display: inline;
|
||
}
|
||
}
|
||
|
||
.btn[data-toggle="dropdown"] {
|
||
.tavasi::before {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.dropdown-menu.show {
|
||
// top: -10px !important;
|
||
// padding-top: 1.5em;
|
||
// padding-bottom: 1.5em;
|
||
}
|
||
.dropdown-item {
|
||
text-align: right;
|
||
font-family: "sahel-semi-bold";
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 0.7em;
|
||
font-size: 0.8rem;
|
||
|
||
color: #666;
|
||
|
||
.tavasi {
|
||
margin-left: 0.5em;
|
||
}
|
||
}
|
||
}
|
||
|
||
.search-filter {
|
||
.input-group-text {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.8rem;
|
||
// border: 1px solid #ddd;
|
||
}
|
||
|
||
.input-group-append {
|
||
.input-group-text {
|
||
border-top-right-radius: 0.5em;
|
||
border-bottom-right-radius: 0.5em;
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
.input-group-prepend {
|
||
.input-group-text {
|
||
background-color: transparent;
|
||
border-top-left-radius: 0.5em;
|
||
border-bottom-left-radius: 0.5em;
|
||
}
|
||
}
|
||
|
||
.form-control {
|
||
border-left: 0;
|
||
|
||
border-top: 1px solid #ddd;
|
||
border-bottom: 1px solid #ddd;
|
||
|
||
&::-webkit-search-decoration,
|
||
&::-webkit-search-cancel-button,
|
||
&::-webkit-search-results-button,
|
||
&::-webkit-search-results-decoration {
|
||
-webkit-appearance: none;
|
||
}
|
||
}
|
||
.dropdown-item {
|
||
text-align: right;
|
||
font-family: "sahel-semi-bold";
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 0.7em;
|
||
font-size: 0.8rem;
|
||
|
||
.icon {
|
||
margin-left: 0.2em;
|
||
}
|
||
}
|
||
}
|
||
|
||
.create-forms {
|
||
position: fixed;
|
||
right: 3.5em;
|
||
top: 0;
|
||
bottom: 0;
|
||
min-width: 20em;
|
||
background-color: #fff;
|
||
width: 0;
|
||
width: 100%;
|
||
max-width: 20em;
|
||
z-index: 2;
|
||
overflow: hidden;
|
||
padding: 1em 2em;
|
||
|
||
.form-control,
|
||
label,
|
||
.btn {
|
||
font-size: 0.8rem;
|
||
}
|
||
}
|
||
|
||
.create-group-inner-form {
|
||
& > .btn {
|
||
margin-right: 0.2em;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0;
|
||
|
||
width: 2em;
|
||
height: 2em;
|
||
background-color: #00b6e3;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.plus-icon {
|
||
display: inline;
|
||
}
|
||
.multiply-icon {
|
||
display: none;
|
||
}
|
||
|
||
&.show {
|
||
.plus-icon {
|
||
display: none;
|
||
}
|
||
.multiply-icon {
|
||
display: inline;
|
||
}
|
||
}
|
||
|
||
.btn[data-toggle="dropdown"] {
|
||
.tavasi::before {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.dropdown-menu.show {
|
||
width: 17em;
|
||
text-align: right;
|
||
padding: 1.5em 1em;
|
||
}
|
||
.dropdown-item {
|
||
text-align: right;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 0.7em;
|
||
color: #666;
|
||
.tavasi {
|
||
margin-left: 0.5em;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss">
|
||
.picture-input input[type="file"],
|
||
#fileInput {
|
||
display: none !important;
|
||
}
|
||
|
||
.image-uploader-container {
|
||
position: relative;
|
||
// border: 2px dashed #eee;
|
||
padding: 0.2em;
|
||
|
||
&.hide-preview {
|
||
.upload-label {
|
||
position: absolute;
|
||
right: 0;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: auto !important;
|
||
overflow: hidden;
|
||
.tavasi,
|
||
img {
|
||
visibility: hidden;
|
||
}
|
||
}
|
||
}
|
||
|
||
.upload-label {
|
||
.tavasi {
|
||
font-size: 4rem;
|
||
}
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.img-preview {
|
||
width: 300px;
|
||
max-width: 100%;
|
||
height: auto;
|
||
max-height: 200px;
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- start: mehdi -->
|
||
<style scoped lang="scss">
|
||
.input-group {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-evenly;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.nav-icon-container {
|
||
font-size: 0.875rem;
|
||
color: #a0acb8;
|
||
}
|
||
|
||
//mehdi
|
||
|
||
@media (min-width: 992px) {
|
||
.open {
|
||
display: none;
|
||
}
|
||
.home-list__header {
|
||
padding-top: 1em;
|
||
}
|
||
}
|
||
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
|
||
.hidden-heder {
|
||
display: none;
|
||
}
|
||
.menu-bar__content {
|
||
position: fixed;
|
||
top: 0rem !important;
|
||
right: 3rem !important;
|
||
right: 2rem;
|
||
background-color: #fff;
|
||
z-index: 9;
|
||
}
|
||
.open {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width: 576px) and (max-width: 766.98px) {
|
||
.hidden-heder {
|
||
display: none;
|
||
}
|
||
.menu-bar__content {
|
||
position: fixed;
|
||
|
||
right: 0rem !important;
|
||
background-color: #fff;
|
||
z-index: 9;
|
||
// max-width: 25em;
|
||
// max-width: 20em;
|
||
width: auto;
|
||
min-width: 100% !important;
|
||
}
|
||
|
||
.navbar {
|
||
width: 100%;
|
||
height: 4.1rem;
|
||
position: relative;
|
||
left: 0.3rem;
|
||
display: flex;
|
||
align-items: center;
|
||
//background-color: red;
|
||
.navbar-grow {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
div {
|
||
margin-left: 1.2rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.hover-border {
|
||
position: relative;
|
||
border: 2px solid transparent;
|
||
border-radius: 5px;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.hover-border:hover {
|
||
transform: translateY(-5px);
|
||
.nav-icon-container {
|
||
color: black !important;
|
||
}
|
||
}
|
||
.search-main {
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
position: absolute;
|
||
z-index: 999;
|
||
top: 24px;
|
||
background-color: #fff;
|
||
width: 100%;
|
||
justify-content: center;
|
||
// background-color: red;
|
||
.button-search {
|
||
position: relative;
|
||
width: 35px;
|
||
height: 31px;
|
||
margin-right: 5px;
|
||
margin-left: 5px;
|
||
margin-top: 2px;
|
||
border: none;
|
||
background-color: #fff;
|
||
|
||
&:hover {
|
||
border-radius: 5px;
|
||
border: 1px solid #a0acb8;
|
||
background-color: #a0acb8;
|
||
color: #fff;
|
||
}
|
||
span {
|
||
position: absolute;
|
||
top: 3px;
|
||
right: 0px;
|
||
}
|
||
}
|
||
}
|
||
.hidean-search {
|
||
display: none !important;
|
||
}
|
||
.hover-border1 {
|
||
position: relative;
|
||
top: 7px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 575.98px) {
|
||
.hidden-heder {
|
||
display: none;
|
||
}
|
||
.menu-bar__content {
|
||
position: fixed;
|
||
|
||
right: 0rem !important;
|
||
background-color: #fff;
|
||
z-index: 9;
|
||
// max-width: 25em;
|
||
// max-width: 20em;
|
||
width: auto;
|
||
min-width: 100% !important;
|
||
}
|
||
|
||
.navbar {
|
||
width: 100%;
|
||
height: 4.1rem;
|
||
position: relative;
|
||
left: 0.3rem;
|
||
display: flex;
|
||
align-items: center;
|
||
//background-color: red;
|
||
.navbar-grow {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
div {
|
||
margin-left: 1.2rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
.hover-border {
|
||
position: relative;
|
||
border: 2px solid transparent;
|
||
border-radius: 5px;
|
||
}
|
||
.hover-border:hover {
|
||
.nav-icon-container {
|
||
color: black !important;
|
||
}
|
||
}
|
||
.hover-border1 {
|
||
position: relative;
|
||
top: 6px;
|
||
right: 6px;
|
||
}
|
||
.search-main {
|
||
display: flex;
|
||
flex-direction: row-reverse;
|
||
position: absolute;
|
||
z-index: 999;
|
||
top: 24px;
|
||
background-color: #fff;
|
||
// background-color: red;
|
||
.button-search {
|
||
position: relative;
|
||
width: 35px;
|
||
height: 31px;
|
||
margin-right: 5px;
|
||
margin-left: 5px;
|
||
margin-top: 2px;
|
||
border: none;
|
||
background-color: #fff;
|
||
|
||
&:hover {
|
||
border-radius: 5px;
|
||
border: 1px solid #a0acb8;
|
||
background-color: #a0acb8;
|
||
color: #fff;
|
||
}
|
||
span {
|
||
position: absolute;
|
||
top: 3px;
|
||
right: 0px;
|
||
}
|
||
}
|
||
}
|
||
.hidean-search {
|
||
display: none !important;
|
||
}
|
||
.home-list__content {
|
||
top: -14px;
|
||
}
|
||
.navbar {
|
||
top: -14px;
|
||
}
|
||
}
|
||
|
||
//mehdi
|
||
</style>
|