feat: chat module

2025-07-25 22:52:08 +00:00 · 2024-09-23 09:19:45 +02:00
parent bfea4aa67c
commit 766347ad81
28 changed files with 1598 additions and 801 deletions
--- a/httpdocs/assets/js/safekat/components/ajax.js
+++ b/httpdocs/assets/js/safekat/components/ajax.js
@ -0,0 +1,46 @@
+class Ajax{
+    constructor(url, data, headers, success, error, type='default'){
+       this.url = url;
+       this.data = data;
+       this.headers = headers;
+       this.success = success;
+       this.error = error;
+       this.type = type;
+    } 
+    post(){
+        (this.type == 'default') ? this.ajax('POST'): this.ajaxForm('POST');
+    }
+    get(){
+        this.ajax('GET');
+    }
+    put(){
+        (this.type == 'default') ? this.ajax('PUT'): this.ajaxForm('PUT');
+    }
+    delete(){
+        (this.type == 'default') ? this.ajax('DELETE'): this.ajaxForm('DELETE');
+    }
+    ajax(method){
+        $.ajax({
+            url : this.url,
+            type : method,
+            data: this.data,
+            headers: this.headers,
+            success: this.success,
+            error: this.error
+        })
+    }
+    ajaxForm(method){
+        $.ajax({
+            url : this.url,
+            type : method,
+            data: this.data,
+            processData: false,
+            contentType: false,
+            headers: this.headers,
+            success: this.success,
+            error: this.error
+        })
+    }
+}
+
+export default Ajax
--- a/httpdocs/assets/js/safekat/components/chat.js
+++ b/httpdocs/assets/js/safekat/components/chat.js
@ -0,0 +1,446 @@
+import Ajax from '../components/ajax.js'
+
+
+
+class Chat {
+    constructor(domItem) {
+        this.domItem = domItem
+        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.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.sideBar = this.domItem.find(".sidebar-body")
+        this.chatDeparmentId = undefined
+
+        this.headers = {}
+
+        this.chatContactsBody = document.querySelector('.app-chat-contacts .sidebar-body')
+        this.chatContactListItems = [].slice.call(
+            document.querySelectorAll('.chat-contact-list-item:not(.chat-contact-list-item-title)')
+        )
+    }
+    init() {
+        // Inicializar PerfectScrollbar
+        this.sendBtnMessageDepartment.addClass("d-none")
+        this.sendBtnMessageInternal.addClass("d-none")
+        if (this.chatContactsBody) {
+            this.scrollbarContacts = new PerfectScrollbar(this.chatContactsBody, {
+                wheelPropagation: false,
+                suppressScrollX: true
+            });
+        }
+
+        if (this.chatHistoryBody) {
+            this.scrollbarChatHistory = new PerfectScrollbar(this.chatHistoryBody, {
+                wheelPropagation: false,
+                suppressScrollX: true
+            });
+        }
+    }
+    initGeneral() {
+        this.chatType = "general"
+        this._handleGetChatList()
+        this.sendBtnMessageDepartment.on("click", this._sendMessage.bind(this))
+
+    }
+    initPresupuesto() {
+        this.chatType = "presupuesto"
+        this._handleGetChatList()
+        this.sendBtnMessageDepartment.on("click", this._sendMessage.bind(this))
+
+    }
+    initPedido() {
+        this.chatType = "pedido"
+        this._handleGetChatList()
+        this.sendBtnMessageDepartment.on("click", this._sendMessage.bind(this))
+
+    }
+    initFactura() {
+        this.chatType = "factura"
+        this._handleGetChatList()
+        this.sendBtnMessageDepartment.on("click", this._sendMessage.bind(this))
+
+    }
+    initContacts() {
+        this.chatType = "internal"
+
+    }
+    _setBtnInternal()
+    {
+        this.sendBtnMessageInternal.removeClass("d-none")
+        this.sendBtnMessageDepartment.addClass("d-none")
+    }
+    _setBtnDeparment()
+    {
+        this.sendBtnMessageDepartment.removeClass("d-none")
+        this.sendBtnMessageInternal.addClass("d-none")
+    }
+    /**============================================
+     *               PRESUPUESTOS
+     *=============================================**/
+    _handleGetChatList(event) {
+        let ajax = new Ajax(
+            "/chat/departments",
+            null,
+            null,
+            this._handleGetChatListSuccess.bind(this),
+            this._handleGetChatListError.bind(this),
+
+
+        );
+        ajax.get();
+    }
+    _handleGetChatListSuccess(data) {
+        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")
+                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.chatList.find(`#chat__produccion`).trigger("click");
+    }
+    _handleGetChatListError(error) {
+        console.error(error)
+    }
+    _getContact(row) {
+        let chat = `
+                <li class="chat-contact-list-item">
+                    <a class="d-flex align-items-center" id="chat_${row.name}" data-id="${row.id}">
+                        <div class="flex-shrink-0 avatar">
+                            <span class="avatar-initial rounded-circle bg-label-success">${row.display.charAt(0)}</span>
+                        </div>
+                        <div class="chat-contact-info flex-grow-1 ms-2">
+                            <h6 class="chat-contact-name text-truncate m-0">${row.display}</h6>
+                            <p class="chat-contact-status text-muted text-truncate mb-0">
+                                ${row.display}
+                            </p>
+                        </div>
+                    </a>
+                </li>
+        `
+        return chat
+    }
+    _getChatMessage(chatDeparmentId) {
+        this.chatDeparmentId = chatDeparmentId
+        let ajax = new Ajax(
+            `/chat/department/${this.chatType}/${this.chatDeparmentId}/${this.modelId}`,
+            null,
+            null,
+            this._getChatMessageSuccess.bind(this),
+            this._getChatMessageError.bind(this),
+
+
+        );
+        ajax.get();
+    }
+    _getChatMessageSuccess(data) {
+        this.chatHistory.empty()
+        this._setBtnDeparment()
+        if (data.messages) {
+            data.messages.map((m) => {
+                this._addChatMessage(m)
+            })
+        }
+    }
+    _getChatMessageError(err) {
+        console.log(err)
+
+    }
+    _addChatMessage(chatMessage, pos = "left") {
+        let chatItem = `
+    <li class="chat-message chat-message-${chatMessage.pos}">
+        <div class="d-flex overflow-hidden">
+            <div class="chat-message-wrapper flex-grow-1">
+
+                <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">
+                        <i class="ti me-1"></i>
+                        <small>${chatMessage?.user?.first_name + " " + chatMessage?.user?.last_name}</small>
+                    </div>
+                    <i class="ti ti-checks ti-xs me-1 text-success"></i>
+                    <small>${chatMessage.created_at}</small>
+                </div>
+
+            </div>
+            <div class="user-avatar flex-shrink-0 ms-3">
+                <div class="avatar avatar-sm">
+                    <span class="avatar-initial rounded-circle bg-label-primary">${chatMessage?.user?.first_name.charAt(0) + chatMessage?.user?.last_name.charAt(0)}</span>
+                </div>
+            </div>
+        </div>
+    </li>
+        `
+        this.chatHistory.append(chatItem)
+        return chatItem
+    }
+    _sendMessage() {
+        let messageText = this.messageInput.val()
+        const body = {
+            message: messageText,
+            chat_department_id: this.chatDeparmentId,
+            user: this.userId,
+            model_id: this.modelId
+        }
+        if (messageText) {
+            let ajax = new Ajax(
+                `/chat/message/${this.chatType}`,
+                body,
+                null,
+                this._sendMessageSuccess.bind(this),
+                this._sendMessageError.bind(this),
+
+            );
+            ajax.post();
+        }
+    }
+    _sendMessageSuccess(data) {
+        this.messageInput.val("")
+        this._getChatMessage(this.chatDeparmentId)
+    }
+    _sendMessageError(err) {
+        console.error(err)
+    }
+    _handleListContacts() {
+        this.sideBar.find("#contact-list").removeClass("d-none")
+        this.sendBtnMessageInternal.on("click",this._sendMessageInternal.bind(this))
+        let ajax = new Ajax(
+            "/chat/contacts",
+            null,
+            null,
+            this._handleListContactsSuccess.bind(this),
+            this._handleListContactsError.bind(this)
+
+        )
+        ajax.get()
+
+    }
+    _handleListContactsSuccess(contacts) {
+        if (contacts) {
+            contacts.map((c) => {
+                this._addContactToList(c)
+            });
+        } else {
+            this.sideBar.find("#contact-list").removeClass("d-none")
+        }
+        this.sideBar.find(".contact-chat").on("click", (e) => {
+            let userId = $(e.currentTarget).data("id")
+            this.receiverId = userId
+            this._handleGetSingleContact(userId)
+            this._setBtnInternal()
+            this.chatHistory.empty()
+        })
+    }
+    _handleListContactsError(err) {
+        console.error(err)
+    }
+    _handleGetSingleContact(userId) {
+        let ajax = new Ajax(
+            `/chat/contacts/${userId}`,
+            null,
+            null,
+            this._handleGetSingleContactSuccess.bind(this),
+            this._handleGetSingleContactError.bind(this),
+        )
+        ajax.get()
+    }
+
+    _handleGetSingleContactSuccess(contact) {
+        this.domItem.find(".chat-history-header div.chat-contact-info h6").text([contact.first_name, contact.last_name].join(" "))
+        this.domItem.find(".chat-history-header div.chat-contact-info small.user-status").text(contact.username)
+        let ajax = new Ajax(
+            `/chat/contact/${contact.id}/messages`,
+            null,
+            null,
+            this._handleGetSingleContactMessagesSuccess.bind(this),
+            this._handleGetSingleContactMessagesError.bind(this)
+        )
+        ajax.get()
+    }
+    _handleGetSingleContactMessagesSuccess(data) {
+        if (data) {
+            data.map((m) => {
+                this._addChatMessage(m)
+            })
+        }
+    }
+    _handleGetSingleContactMessagesError(err) { }
+
+    _handleGetSingleContactError(err) {
+
+    }
+    _sendMessageInternal() {
+        let messageText = this.messageInput.val()
+        const body = {
+            message: messageText,
+            receiver_id: this.receiverId,
+        }
+        if (messageText) {
+            let ajax = new Ajax(
+                `/chat/message/internal`,
+                body,
+                null,
+                this._sendMessageInternalSuccess.bind(this),
+                this._sendMessageInternalError.bind(this),
+
+            );
+            ajax.post();
+        }
+    }
+    _sendMessageInternalSuccess(message) {
+        this.messageInput.val("")
+        this._handleGetSingleContact(this.receiverId)
+    }
+    _sendMessageInternalError(err) {
+        console.error(err)
+    }
+    _addContactToList(contact) {
+
+        let contactItem =
+            `
+        <li class="chat-contact-list-item">
+            <a 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">
+                        ${contact?.first_name?.charAt(0) ?? "?"
+                        + 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>
+                    <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>` : ""}
+            </a>
+        </li>
+        `
+
+        if (contact.first_name || contact.last_name) {
+            this.sideBar.find("#contact-list").append(contactItem)
+        }
+    }
+
+
+
+
+
+
+}
+export default Chat
+
+
+// // Seleccionar elementos del DOM
+// const chatContactsBody = document.querySelector('.app-chat-contacts .sidebar-body'),
+//       chatContactListItems = [].slice.call(
+//         document.querySelectorAll('.chat-contact-list-item:not(.chat-contact-list-item-title)')
+//       ),
+//       chatHistoryBody = document.querySelector('.chat-history-body'),
+//       chatSidebarLeftUserAbout = document.querySelector('.chat-sidebar-left-user-about'),
+//       messageInput = document.querySelector('.message-input'),
+//       searchInput = document.querySelector('.chat-search-input'),
+//       sendMsgBtn = document.querySelector('.send-msg-btn'); // Seleccionar el botón de envío de mensaje
+
+// // Inicializar PerfectScrollbar
+// if (chatContactsBody) {
+//   new PerfectScrollbar(chatContactsBody, {
+//     wheelPropagation: false,
+//     suppressScrollX: true
+//   });
+// }
+
+// if (chatHistoryBody) {
+//   new PerfectScrollbar(chatHistoryBody, {
+//     wheelPropagation: false,
+//     suppressScrollX: true
+//   });
+// }
+
+// // Función para desplazar el scroll al final
+// function scrollToBottom() {
+//   if (chatHistoryBody) {
+//     chatHistoryBody.scrollTo(0, chatHistoryBody.scrollHeight);
+//   }
+// }
+// scrollToBottom();
+
+// // Seleccionar chat o contacto
+
+
+// // Filtrar chats
+// if (searchInput) {
+//   searchInput.addEventListener('keyup', e => {
+//     const searchValue = e.currentTarget.value.toLowerCase(),
+//           chatListItem0 = document.querySelector('.chat-list-item-0'),
+//           contactListItem0 = document.querySelector('.contact-list-item-0'),
+//           searchChatListItems = [].slice.call(
+//             document.querySelectorAll('#chat-list li:not(.chat-contact-list-item-title)')
+//           ),
+//           searchContactListItems = [].slice.call(
+//             document.querySelectorAll('#contact-list li:not(.chat-contact-list-item-title)')
+//           );
+
+//     // Buscar en chats
+//     const chatListItemsCount = searchChatContacts(searchChatListItems, searchValue);
+//     // Mostrar u ocultar mensaje de "No se encontraron resultados" en chats
+//     if (chatListItem0) {
+//       chatListItem0.classList.toggle('d-none', chatListItemsCount !== 0);
+//     }
+
+//     // Buscar en contactos
+//     const contactListItemsCount = searchChatContacts(searchContactListItems, searchValue);
+//     // Mostrar u ocultar mensaje de "No se encontraron resultados" en contactos
+//     if (contactListItem0) {
+//       contactListItem0.classList.toggle('d-none', contactListItemsCount !== 0);
+//     }
+//   });
+// }
+
+// // Función para buscar en chats y contactos
+// function searchChatContacts(searchListItems, searchValue) {
+//   let searchListItemsCount = 0;
+//   searchListItems.forEach(searchListItem => {
+//     const searchListItemText = searchListItem.textContent.toLowerCase();
+//     const matchesSearch = searchListItemText.indexOf(searchValue) !== -1;
+
+//     searchListItem.classList.toggle('d-flex', matchesSearch);
+//     searchListItem.classList.toggle('d-none', !matchesSearch);
+
+//     if (matchesSearch) {
+//       searchListItemsCount++;
+//     }
+//   });
+
+//   return searchListItemsCount;
+// }
+
+// // // Enviar mensaje
+// // if (sendMsgBtn) {
+// //   sendMsgBtn.addEventListener('click', e => {
+// //     e.preventDefault();
+// //     if (messageInput.value) {
+// //       const renderMsg = document.createElement('div');
+// //       renderMsg.className = 'chat-message-text mt-2';
+// //       renderMsg.innerHTML = `<p class="mb-0">${messageInput.value}</p>`;
+// //       const lastChatMessageWrapper = document.querySelector('li:last-child .chat-message-wrapper');
+// //       if (lastChatMessageWrapper) {
+// //         lastChatMessageWrapper.appendChild(renderMsg);
+// //       }
+// //       messageInput.value = '';
+// //       scrollToBottom();
+// //     }
+// //   });
+// // }
--- a/httpdocs/assets/js/safekat/pages/chatFactura.js
+++ b/httpdocs/assets/js/safekat/pages/chatFactura.js
@ -0,0 +1,4 @@
+import Chat from '../components/chat.js'
+
+let chat = new Chat($("#chat-factura"))
+chat.initFactura()
--- a/httpdocs/assets/js/safekat/pages/chatPedido.js
+++ b/httpdocs/assets/js/safekat/pages/chatPedido.js
@ -0,0 +1,5 @@
+import Chat from '../components/chat.js'
+
+let chat = new Chat($("#chat-pedido"))
+chat.init()
+chat.initPedido()
--- a/httpdocs/assets/js/safekat/pages/chatPresupuesto.js
+++ b/httpdocs/assets/js/safekat/pages/chatPresupuesto.js
@ -0,0 +1,6 @@
+import Chat from '../components/chat.js'
+
+let chat = new Chat($("#chat-presupuesto"))
+chat.init()
+chat.initPresupuesto()
+chat._handleListContacts()
--- a/httpdocs/themes/vuexy/img/avatars/user.png
+++ b/httpdocs/themes/vuexy/img/avatars/user.png
--- a/httpdocs/themes/vuexy/vendor/css/pages/app-chat.css
+++ b/httpdocs/themes/vuexy/vendor/css/pages/app-chat.css
@ -57,6 +57,7 @@
    height: calc(calc(100vh - 11.5rem) - 5rem - 2.2rem);
  }
 }
+
 .app-chat .app-chat-contacts .sidebar-body .chat-contact-list li.chat-contact-list-item {
  display: flex;
  justify-content: space-between;