jjimenez/safekat
1
0
Fork 0
mirror of https://git.imnavajas.es/jjimenez/safekat.git synced 2025-07-25 22:52:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

messages chat view

Browse Source
This commit is contained in:
amazuecos
2024-11-28 16:07:11 +01:00
parent 093aa42e67
commit c1aecb43f2
16 changed files with 661 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
httpdocs/assets/js/safekat/components/chat.js
View File

@ -75,9 +75,12 @@ class Chat {
id: '0',
text: "Seleccione un usuario"
}
this.btnUpdateMessagesUnviewed = this.domItem.find("#update-message-unviewed")
this.btnDirectMessageSubmit = this.domItem.find("#send-msg-btn-direct")
this.btnDirectMessageSubmit.on("click", this._handleStoreChatDirectMessage.bind(this))
this.selectParticipants = new ClassSelect(this.modalNewParticipant.item.find("#select-users"), `/chat/direct/users/select/${this.modelId}`, this.selectPlaceholder, true)
this.authUserId = this.domItem.data("user-id")
this.checkboxNotificationMessage = this.modalNewParticipant.item.find("#checkbox-notification-chat")
this.btnAddParticipant = this.domItem.find("#btn-chat-add-participant")
this.btnAddParticipantSubmit = this.domItem.find("#btn-chat-add-participant-submit")
@ -86,15 +89,17 @@ class Chat {
this.selectParticipants.init()
this.modalNewParticipant.toggle()
})
this.selectParticipants.item.on("change", () => {
console.log(this.selectParticipants.getVal())
if (this.selectParticipants.getVal().length > 0) {
this.btnAddParticipantSubmit.removeClass("d-none")
} else {
this.btnAddParticipantSubmit.addClass("d-none")
}
})
this.btnUpdateMessagesUnviewed.on("click",this._handleUpdateChatMessagesUnread.bind(this))
this._handleGetChatDirect()
setInterval(this._handleReloadChatDirectMessages.bind(this),10000)
}
initGeneral() {
this.chatType = "general"
@ -156,6 +161,7 @@ class Chat {
* PRESUPUESTOS
*=============================================**/
_handleGetChatList(event) {
this.domItem.find(".chat-loader").removeClass("d-none")
let ajax = new Ajax(
"/chat/departments",
null,
@ -168,6 +174,7 @@ class Chat {
ajax.get();
}
_handleGetChatListSuccess(data) {
this.domItem.find(".chat-loader").addClass("d-none")
Object.values(data).map(row => {
this.chatList.append(this._getContact(row))
this.chatDeparmentId = row.id
@ -175,6 +182,7 @@ class Chat {
this.chatList.find(`#chat_${row.name}`).on("click", (event) => {
$(".chat-contact-list-item").removeClass("active")
$(event.currentTarget).parent().addClass("active")
this.chatHistoryBody.empty()
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)
@ -244,7 +252,7 @@ class Chat {
${row.display}
</p>
</div>
<span class="badge badge-center rounded-pill bg-danger messages-unread-contact">${row.totalMessages ?? 0}</span>
<span class="badge badge-center rounded-pill bg-secondary messages-unread-contact">${row.totalMessages ?? 0}</span>
</a>
</li>
`
@ -282,6 +290,8 @@ class Chat {
_getChatDepartmentMessageCountError() { }
_getChatMessage() {
this.domItem.find(".chat-loader").removeClass("d-none")
let ajax = new Ajax(
`/chat/department/${this.chatType}/${this.chatDeparmentId}/${this.modelId}`,
null,
@ -294,6 +304,7 @@ class Chat {
ajax.get();
}
_getChatMessageSuccess(data) {
this.domItem.find(".chat-loader").addClass("d-none")
this.chatHistory.empty()
this._setBtnDeparment()
if (data.messages) {
@ -315,8 +326,8 @@ class Chat {
<div class="chat-message-text">
<p class="mb-0">${chatMessage?.message}</p>
</div>
<div class="text-end text-muted mt-1">
<div class="text-start text-muted mt-1">
<div class="text-${chatMessage?.pos == "left" ? "start" : "end"} text-muted mt-1">
<div class="text-${chatMessage?.pos == "left" ? "start" : "end"} text-muted mt-1">
<i class="ti me-1"></i>
<small>${chatMessage?.user?.first_name + " " + chatMessage?.user?.last_name}</small>
</div>
@ -337,7 +348,6 @@ class Chat {
return chatItem
}
_addChatDirectMessages(chatMessage) {
console.log(chatMessage)
let chatItem = `
<li class="chat-message chat-message-${chatMessage.pos}">
<div class="d-flex overflow-hidden">
@ -346,8 +356,8 @@ class Chat {
<div class="chat-message-text">
<p class="mb-0">${chatMessage?.message}</p>
</div>
<div class="text-end text-muted mt-1">
<div class="text-start text-muted mt-1">
<div class="text-${chatMessage?.pos == "left" ? "start" : "end"} text-muted mt-1">
<div class="text-${chatMessage?.pos == "left" ? "start" : "end"} text-muted mt-1">
<i class="ti me-1"></i>
<small>${chatMessage?.sender_first_name + " " + chatMessage?.sender_last_name}</small>
</div>
@ -549,7 +559,7 @@ class Chat {
</p>
</div>
${contact.unreadMessages ? `<span
class="badge badge-center rounded-pill bg-danger messages-unread-contact">${contact.unreadMessages}</span>` : ""}
class="badge badge-center rounded-pill bg-secondary messages-unread-contact">${contact.unreadMessages}</span>` : ""}
</a>
</li>
`
@ -559,11 +569,10 @@ class Chat {
}
}
_addParticipantToList(contact) {
let contactItem =
`
<li class="chat-contact-list-item">
<a class="d-flex align-items-center contact-chat" data-id="${contact.id}"
<li class="chat-contact-list-item ${this.authUserId == contact.id ? "active" : ""}">
<div class="d-flex align-items-center contact-chat" data-id="${contact.id}"
id="chat-contact-list-item-${contact.id}">
<div class="avatar d-block flex-shrink-0">
<span class="avatar-initial rounded-circle bg-label-primary">
@ -578,7 +587,7 @@ class Chat {
${contact?.cliente_id ? "[CLIENTE]" : ""}${contact.username}
</p>
</div>
</a>
</div>
</li>
`
@ -587,7 +596,6 @@ class Chat {
}
}
_handleGetChatDirect() {
const ajax = new Ajax(
`/chat/${this.chatType}/conversation/${this.modelId}`,
null,
@ -597,10 +605,11 @@ class Chat {
)
ajax.get()
}
_handleGetChatDirectSuccess(response) {
const { chat, users, messages } = response
if (users.length > 0) {
users.map(c => this._addContactToList(c))
users.map(c => this._addParticipantToList(c))
}
if (messages.length > 0) {
messages.map(m => this._addChatDirectMessages(m))
@ -609,9 +618,29 @@ class Chat {
this.domItem.find(".chat-loader").addClass("d-none")
}
_handleGetChatDirectError(error) { }
_handleReloadChatDirectMessages() {
const ajax = new Ajax(
`/chat/${this.chatType}/conversation/${this.modelId}`,
null,
null,
this._handleReloadChatDirectMessagesSuccess.bind(this),
this._handleReloadChatDirectMessagesError.bind(this)
)
ajax.get()
}
_handleReloadChatDirectMessagesSuccess(response) {
const { chat, users, messages } = response
this.chatHistory.empty()
if (messages.length > 0) {
messages.map(m => this._addChatDirectMessages(m))
}
this.domItem.find("#chat-direct-title").text(chat.title)
this.domItem.find(".chat-loader").addClass("d-none")
}
_handleReloadChatDirectMessagesError(error) { }
_handleStoreChatDirectUsers() {
const data = { "users": this.selectParticipants.getVal() }
const data = { "users": this.selectParticipants.getVal() ,"notification" : this.checkboxNotificationMessage.prop("checked")}
this.domItem.find(".chat-loader").removeClass("d-none")
const ajax = new Ajax(
@ -648,12 +677,34 @@ class Chat {
}
}
_handleStoreChatDirectMessageSuccess(response) {
let message = response
this._addChatDirectMessages(message)
this.messageInput.val("")
try {
let message = response
this._addChatDirectMessages(message)
this.messageInput.val("")
} catch (error) {
} finally {
this.scrollbarChatHistory.update()
this.chatHistoryBody[0].scrollTop = this.scrollbarChatHistory.containerHeight
}
}
_handleStoreChatDirectMessageError(error) { }
_handleUpdateChatMessagesUnread() {
const ajax = new Ajax(
`/chat/${this.chatType}/messages/unread/${this.modelId}`,
null,
null,
this._handleUpdateChatMessagesUnreadSuccess.bind(this),
this._handleUpdateChatMessagesUnreadError.bind(this)
)
ajax.post()
}
_handleUpdateChatMessagesUnreadSuccess(){
this._handleReloadChatDirectMessages();
}
_handleUpdateChatMessagesUnreadError(){}
@ -693,7 +744,7 @@ export const showNotificationMessages = (dom) => {
<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 p-1">${numberOfMessages}</span>
<span class="badge badge-center rounded-pill bg-primary p-1 m-2">${numberOfMessages}</span>
</a>
</li>
`

4
httpdocs/assets/js/safekat/pages/chatNotification.js
View File

@ -1,6 +1,10 @@
import {showNotificationMessages} from "../components/chat.js";
showNotificationMessages($("#chat-notification-list"))
setInterval(() => {
showNotificationMessages($("#chat-notification-list"))
},10000)
$("#message-notification-dropdown").on("click",(e) => {
showNotificationMessages($("#chat-notification-list"))
})

3
httpdocs/assets/js/safekat/pages/configuracion/messages/messagePage.js
View File

@ -16,7 +16,7 @@ class MessagePage {
id: '0',
text: "Seleccione un usuario"
}
this.selectMessageUsers = new ClassSelect(this.selectUsers, '/chat/users/internal', this.selectPlaceholder, true)
this.selectMessageUsers = new ClassSelect(this.selectUsers, '/chat/users/all', this.selectPlaceholder, true)
}
init() {
@ -52,6 +52,7 @@ class MessagePage {
this.alert.setHeadingTitle(response.message)
this.alert.show()
this.hideForm()
this.messageDatatable.datatable.ajax.reload()
}
handleSubmitNewMessageError(response) {
const error = response.responseJSON