mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
feat:chat modules
This commit is contained in:
amazuecos
@ -8,34 +8,58 @@ class Chat {
|
||||
this.chatList = this.domItem.find("#chat-list")
|
||||
this.chatHistory = this.domItem.find("#chat-conversation")
|
||||
this.modelId = this.domItem.data("id")
|
||||
this.chatHistoryBody = document.querySelector(".chat-history-body")
|
||||
this.chatHistoryBody = this.domItem.find(".chat-history-body")
|
||||
this.sendBtnMessageDepartment = this.domItem.find("#send-msg-btn-deparment")
|
||||
this.sendBtnMessageInternal= this.domItem.find("#send-msg-btn-internal")
|
||||
|
||||
this.messageInput = this.domItem.find(".message-input")
|
||||
this.sendBtnMessageInternal = this.domItem.find("#send-msg-btn-internal")
|
||||
this.chatSidebarLeftUserAbout = this.domItem.find('.chat-sidebar-left-user-about'),
|
||||
this.messageInput = this.domItem.find(".message-input")
|
||||
this.sideBar = this.domItem.find(".sidebar-body")
|
||||
this.chatDeparmentId = undefined
|
||||
|
||||
this.searchInput = this.domItem.find(".chat-search-input")
|
||||
this.headers = {}
|
||||
|
||||
this.chatContactsBody = document.querySelector('.app-chat-contacts .sidebar-body')
|
||||
this.chatContactsBody = this.domItem.find('.app-chat-contacts .sidebar-body')
|
||||
this.chatContactListItems = [].slice.call(
|
||||
document.querySelectorAll('.chat-contact-list-item:not(.chat-contact-list-item-title)')
|
||||
)
|
||||
}
|
||||
init() {
|
||||
// Inicializar PerfectScrollbar
|
||||
|
||||
if (this.searchInput.length) {
|
||||
this.searchInput.on('keyup', () => {
|
||||
const searchValue = this.searchInput.val(),
|
||||
chatListItem0 = this.domItem.find('.chat-list-item-0'),
|
||||
contactListItem0 = this.domItem.find('.contact-list-item-0'),
|
||||
searchChatListItems = this.domItem.find('#chat-list li:not(.chat-contact-list-item-title)'),
|
||||
searchContactListItems = this.domItem.find('#contact-list li:not(.chat-contact-list-item-title)');
|
||||
|
||||
// Buscar en chats
|
||||
const chatListItemsCount = this._searchChatContacts(searchChatListItems, searchValue);
|
||||
// Mostrar u ocultar mensaje de "No se encontraron resultados" en chats
|
||||
if (chatListItem0.length) {
|
||||
chatListItem0.toggleClass('d-none', chatListItemsCount === 0);
|
||||
}
|
||||
|
||||
// Buscar en contactos
|
||||
const contactListItemsCount = this._searchChatContacts(searchContactListItems, searchValue);
|
||||
// Mostrar u ocultar mensaje de "No se encontraron resultados" en contactos
|
||||
if (contactListItem0.length) {
|
||||
contactListItem0.toggleClass('d-none', contactListItemsCount === 0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
this.sendBtnMessageDepartment.addClass("d-none")
|
||||
this.sendBtnMessageInternal.addClass("d-none")
|
||||
if (this.chatContactsBody) {
|
||||
this.scrollbarContacts = new PerfectScrollbar(this.chatContactsBody, {
|
||||
if (this.chatContactsBody[0]) {
|
||||
this.scrollbarContacts = new PerfectScrollbar(this.chatContactsBody[0], {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
}
|
||||
|
||||
if (this.chatHistoryBody) {
|
||||
this.scrollbarChatHistory = new PerfectScrollbar(this.chatHistoryBody, {
|
||||
if (this.chatHistoryBody[0]) {
|
||||
this.scrollbarChatHistory = new PerfectScrollbar(this.chatHistoryBody[0], {
|
||||
wheelPropagation: false,
|
||||
suppressScrollX: true
|
||||
});
|
||||
@ -69,13 +93,28 @@ class Chat {
|
||||
this.chatType = "internal"
|
||||
|
||||
}
|
||||
_setBtnInternal()
|
||||
{
|
||||
|
||||
_searchChatContacts(searchListItems, searchValue) {
|
||||
let searchListItemsCount = 0;
|
||||
searchListItems.each(function () {
|
||||
const searchListItemText = $(this).text().toLowerCase();
|
||||
const matchesSearch = searchListItemText.indexOf(searchValue) !== -1;
|
||||
|
||||
$(this).toggleClass('d-flex', matchesSearch);
|
||||
$(this).toggleClass('d-none', !matchesSearch);
|
||||
|
||||
if (matchesSearch) {
|
||||
searchListItemsCount++;
|
||||
}
|
||||
});
|
||||
|
||||
return searchListItemsCount;
|
||||
}
|
||||
_setBtnInternal() {
|
||||
this.sendBtnMessageInternal.removeClass("d-none")
|
||||
this.sendBtnMessageDepartment.addClass("d-none")
|
||||
}
|
||||
_setBtnDeparment()
|
||||
{
|
||||
_setBtnDeparment() {
|
||||
this.sendBtnMessageDepartment.removeClass("d-none")
|
||||
this.sendBtnMessageInternal.addClass("d-none")
|
||||
}
|
||||
@ -98,10 +137,13 @@ class Chat {
|
||||
Object.values(data).map(row => {
|
||||
this.chatList.append(this._getContact(row))
|
||||
this.chatList.find(`#chat_${row.name}`).on("click", (event) => {
|
||||
let chatDeparmentId = this.chatList.find(`#chat_${row.name}`).data("id")
|
||||
$(".chat-contact-list-item").removeClass("active")
|
||||
$(event.currentTarget).parent().addClass("active")
|
||||
this.chatDeparmentId = this.chatList.find(`#chat_${row.name}`).data("id")
|
||||
this.domItem.find(".chat-history-header div.chat-contact-info h6").text(row.display)
|
||||
this.domItem.find(".chat-history-header div.chat-contact-info small.user-status").text(row.display)
|
||||
this._getChatMessage(chatDeparmentId)
|
||||
this._getChatMessage()
|
||||
this._getChatDeparmentUsers()
|
||||
})
|
||||
|
||||
})
|
||||
@ -110,6 +152,48 @@ class Chat {
|
||||
_handleGetChatListError(error) {
|
||||
console.error(error)
|
||||
}
|
||||
_getChatDeparmentUsers() {
|
||||
this.domItem.find("#chat-header-users").empty()
|
||||
this.domItem.find("#chat-header-dropdown-users").removeClass("d-none")
|
||||
let ajax = new Ajax(
|
||||
`/chat/department/${this.chatDeparmentId}/users`,
|
||||
null,
|
||||
null,
|
||||
this._getChatDeparmentUsersSuccess.bind(this),
|
||||
this._getChatDeparmentUsersError.bind(this),
|
||||
|
||||
)
|
||||
ajax.get()
|
||||
}
|
||||
_getChatDeparmentUsersSuccess(deparmentUsers) {
|
||||
deparmentUsers.map((user) => {
|
||||
this.domItem.find("#chat-header-users").append(
|
||||
`
|
||||
<li class="chat-contact-list-item p-1">
|
||||
<a class="d-flex align-items-center py-1"
|
||||
id="chat-contact-list-item-${user.id}">
|
||||
<div class="avatar d-block flex-shrink-0">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">
|
||||
${user?.first_name?.charAt(0) ?? "?"
|
||||
+ user?.last_name?.charAt(0) ?? "?"}</span>
|
||||
|
||||
</div>
|
||||
<div class="chat-contact-info flex-grow-1 ms-2">
|
||||
<h6 class="chat-contact-name text-truncate m-0">${user?.first_name ?? "" + " " +
|
||||
user?.last_name ?? ""}</h6>
|
||||
<p class="chat-contact-status text-muted text-truncate mb-0">
|
||||
${user.username}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
`
|
||||
)
|
||||
})
|
||||
}
|
||||
_getChatDeparmentUsersError(err) { }
|
||||
|
||||
_getContact(row) {
|
||||
let chat = `
|
||||
<li class="chat-contact-list-item">
|
||||
@ -128,8 +212,7 @@ class Chat {
|
||||
`
|
||||
return chat
|
||||
}
|
||||
_getChatMessage(chatDeparmentId) {
|
||||
this.chatDeparmentId = chatDeparmentId
|
||||
_getChatMessage() {
|
||||
let ajax = new Ajax(
|
||||
`/chat/department/${this.chatType}/${this.chatDeparmentId}/${this.modelId}`,
|
||||
null,
|
||||
@ -213,7 +296,7 @@ class Chat {
|
||||
}
|
||||
_handleListContacts() {
|
||||
this.sideBar.find("#contact-list").removeClass("d-none")
|
||||
this.sendBtnMessageInternal.on("click",this._sendMessageInternal.bind(this))
|
||||
this.sendBtnMessageInternal.on("click", this._sendMessageInternal.bind(this))
|
||||
let ajax = new Ajax(
|
||||
"/chat/contacts",
|
||||
null,
|
||||
@ -234,7 +317,11 @@ class Chat {
|
||||
this.sideBar.find("#contact-list").removeClass("d-none")
|
||||
}
|
||||
this.sideBar.find(".contact-chat").on("click", (e) => {
|
||||
$(".contact-chat").parent().removeClass("active")
|
||||
$(".chat-contact-list-item").removeClass("active")
|
||||
this.domItem.find("#chat-header-dropdown-users").addClass("d-none")
|
||||
let userId = $(e.currentTarget).data("id")
|
||||
$(e.currentTarget).parent().addClass('active')
|
||||
this.receiverId = userId
|
||||
this._handleGetSingleContact(userId)
|
||||
this._setBtnInternal()
|
||||
@ -314,17 +401,18 @@ class Chat {
|
||||
<div class="avatar d-block flex-shrink-0">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">
|
||||
${contact?.first_name?.charAt(0) ?? "?"
|
||||
+ contact?.last_name?.charAt(0) ?? "?"}</span>
|
||||
+ contact?.last_name?.charAt(0) ?? "?"}</span>
|
||||
|
||||
</div>
|
||||
<div class="chat-contact-info flex-grow-1 ms-2">
|
||||
<h6 class="chat-contact-name text-truncate m-0">${contact?.first_name ?? "" + " " +
|
||||
contact?.last_name ?? ""}</h6>
|
||||
contact?.last_name ?? ""}</h6>
|
||||
<p class="chat-contact-status text-muted text-truncate mb-0">
|
||||
${contact.username}
|
||||
</p>
|
||||
</div>
|
||||
${contact.unreadMessages ? `<span class="badge badge-center rounded-pill bg-primary">${contact.unreadMessages}</span>` : ""}
|
||||
</div>
|
||||
${contact.unreadMessages ? `<span
|
||||
class="badge badge-center rounded-pill bg-primary">${contact.unreadMessages}</span>` : ""}
|
||||
</a>
|
||||
</li>
|
||||
`
|
||||
@ -339,6 +427,100 @@ class Chat {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
export const showNotificationMessages = (dom) => {
|
||||
let ajax = new Ajax(
|
||||
'/chat/notifications',
|
||||
null,
|
||||
null,
|
||||
(data) => {
|
||||
let totalMessages = 0
|
||||
data?.chatPresupuestos?.map((e) => {
|
||||
console.log(e)
|
||||
let numberOfMessages = 0
|
||||
e.messages.forEach(m => {
|
||||
|
||||
m.viewed == "1" ? numberOfMessages++ : null
|
||||
});
|
||||
totalMessages+= numberOfMessages
|
||||
if(numberOfMessages > 0){
|
||||
dom.append(
|
||||
`
|
||||
<li class="">
|
||||
<a href="/presupuestos/cosidotapablanda/edit/${e.presupuestoId}" class="d-flex align-items-center flex-grow">
|
||||
<div class="avatar d-block flex-shrink-0">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">${e.presupuestoId}</span>
|
||||
</div>
|
||||
<div class="chat-contact-info flex-grow-1 ms-2">
|
||||
<h6 class="chat-contact-name text-truncate m-0">[${e.title}] ${e.chatDisplay}</h6>
|
||||
</div>
|
||||
<span class="badge badge-center rounded-pill bg-primary">${numberOfMessages}</span>
|
||||
</a>
|
||||
</li>
|
||||
`
|
||||
)
|
||||
}
|
||||
})
|
||||
data?.chatFacturas?.map((e) => {
|
||||
console.log(e)
|
||||
let numberOfMessages = 0
|
||||
e.messages.forEach(m => {
|
||||
|
||||
m.viewed == "1" ? numberOfMessages++ : null
|
||||
});
|
||||
totalMessages+= numberOfMessages
|
||||
if(numberOfMessages > 0){
|
||||
dom.append(
|
||||
`
|
||||
<li class="">
|
||||
<a href="/presupuestos/cosidotapablanda/edit/${e.facturaId}" class="d-flex align-items-center flex-grow">
|
||||
<div class="avatar d-block flex-shrink-0">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">${e.facturaId}</span>
|
||||
</div>
|
||||
<div class="chat-contact-info flex-grow-1 ms-2">
|
||||
<h6 class="chat-contact-name text-truncate m-0">[${e.title}] ${e.chatDisplay}</h6>
|
||||
</div>
|
||||
<span class="badge badge-center rounded-pill bg-primary">${numberOfMessages}</span>
|
||||
</a>
|
||||
</li>
|
||||
`
|
||||
)
|
||||
}
|
||||
})
|
||||
data?.chatPedidos?.map((e) => {
|
||||
console.log(e)
|
||||
let numberOfMessages = 0
|
||||
e.messages.forEach(m => {
|
||||
|
||||
m.viewed == "1" ? numberOfMessages++ : null
|
||||
});
|
||||
$("#chat-notification-number").text(numberOfMessages)
|
||||
totalMessages+= numberOfMessages
|
||||
if(numberOfMessages > 0){
|
||||
dom.append(
|
||||
`
|
||||
<li class="">
|
||||
<a href="/presupuestos/cosidotapablanda/edit/${e.pedidoId}" class="d-flex align-items-center flex-grow">
|
||||
<div class="avatar d-block flex-shrink-0">
|
||||
<span class="avatar-initial rounded-circle bg-label-primary">${e.pedidoId}</span>
|
||||
</div>
|
||||
<div class="chat-contact-info flex-grow-1 ms-2">
|
||||
<h6 class="chat-contact-name text-truncate m-0">[${e.title}] ${e.chatDisplay}</h6>
|
||||
</div>
|
||||
<span class="badge badge-center rounded-pill bg-primary">${numberOfMessages}</span>
|
||||
</a>
|
||||
</li>
|
||||
`
|
||||
)
|
||||
}
|
||||
})
|
||||
$("#chat-notification-number").text(totalMessages)
|
||||
},
|
||||
(err) => { }
|
||||
)
|
||||
ajax.get()
|
||||
}
|
||||
export default Chat
|
||||
|
||||
|
||||
3
httpdocs/assets/js/safekat/pages/chatNotification.js
Normal file
3
httpdocs/assets/js/safekat/pages/chatNotification.js
Normal file
@ -0,0 +1,3 @@
|
||||
import {showNotificationMessages} from "../components/chat.js";
|
||||
|
||||
showNotificationMessages($("#chat-notification-list"))
|
||||
Reference in New Issue
Block a user