Merge branch 'main' into 'mod/tarifas_clientes'

Main

See merge request jjimenez/safekat!415
This commit is contained in:
2024-11-30 12:59:44 +00:00
40 changed files with 2144 additions and 358 deletions

View File

@ -0,0 +1,53 @@
class Alert {
constructor(domItem) {
this.item = domItem
this.headingTitle = this.item.find(".alert-heading")
this.body = this.item.find(".alert-body")
this.icon = this.item.find(".icon-alert")
this.iconSuccess = "ti-circle-check"
this.iconError = "ti-exclamation-mark"
}
setIcon(iconClass){
this.icon.removeClass(this.iconSuccess)
this.icon.removeClass(this.iconError)
this.icon.addClass(iconClass)
}
setAsError() {
this.item.removeClass("alert-success")
this.item.addClass("alert-danger")
this.setIcon(this.iconError)
}
setAsSuccess() {
this.item.removeClass("alert-danger")
this.item.addClass("alert-success")
this.setIcon(this.iconSuccess)
}
setAsWarning() {
this.item.removeClass("alert-success")
this.item.addClass("alert-warning")
}
setAsInfo() {
this.item.removeClass("alert-*")
this.item.addClass("alert-info")
}
show() {
this.item.removeClass("d-none")
}
hide() {
this.item.addClass("d-none")
}
setHeadingTitle(title) {
this.headingTitle.text(title)
}
setContent(content) {
this.body.append(content)
}
setErrors() { }
}
export default Alert;

View File

@ -1,4 +1,6 @@
import Ajax from '../components/ajax.js'
import Modal from './modal.js'
import ClassSelect from './select2.js'
@ -66,12 +68,43 @@ class Chat {
});
}
}
initDirectMessage() {
this.chatType = "direct"
this.modalNewParticipant = new Modal(this.domItem.find("#modalAddNewChatParticipant"))
this.selectPlaceholder = {
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")
this.btnAddParticipantSubmit.on("click", this._handleStoreChatDirectUsers.bind(this))
this.btnAddParticipant.on("click", () => {
this.selectParticipants.init()
this.modalNewParticipant.toggle()
})
this.selectParticipants.item.on("change", () => {
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"
this._handleGetChatList()
this.sendBtnMessageDepartment.on("click", this._sendMessage.bind(this))
}
initPresupuesto() {
this.chatType = "presupuesto"
@ -128,18 +161,18 @@ class Chat {
* PRESUPUESTOS
*=============================================**/
_handleGetChatList(event) {
this.domItem.find(".chat-loader").removeClass("d-none")
let ajax = new Ajax(
"/chat/departments",
null,
null,
this._handleGetChatListSuccess.bind(this),
this._handleGetChatListError.bind(this),
);
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
@ -147,6 +180,7 @@ class Chat {
this.chatList.find(`#chat_${row.name}`).on("click", (event) => {
$(".chat-contact-list-item").removeClass("active")
$(event.currentTarget).parent().addClass("active")
this.chatHistory.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)
@ -216,7 +250,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>
`
@ -236,8 +270,7 @@ class Chat {
);
ajax.get();
}
_getChatDepartmentMessageCount()
{
_getChatDepartmentMessageCount() {
let ajax = new Ajax(
`/chat/department/count/${this.chatType}/${this.chatDeparmentId}/${this.modelId}`,
null,
@ -249,12 +282,14 @@ class Chat {
);
ajax.get();
}
_getChatDepartmentMessageCountSuccess(data){
_getChatDepartmentMessageCountSuccess(data) {
this.domItem.find(`chat_${data.name}`).find(".messages-unread-contact").text(data.count)
}
_getChatDepartmentMessageCountError(){}
_getChatDepartmentMessageCountError() { }
_getChatMessage() {
this.chatHistory.empty()
this.domItem.find(".chat-loader").removeClass("d-none")
let ajax = new Ajax(
`/chat/department/${this.chatType}/${this.chatDeparmentId}/${this.modelId}`,
null,
@ -267,7 +302,7 @@ class Chat {
ajax.get();
}
_getChatMessageSuccess(data) {
this.chatHistory.empty()
this.domItem.find(".chat-loader").addClass("d-none")
this._setBtnDeparment()
if (data.messages) {
data.messages.map((m) => {
@ -288,12 +323,12 @@ 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>
<i class="ti ti-checks ti-xs me-1 text-success"></i>
<i class="ti ${chatMessage?.viewed ? "ti-checks" : "ti-check"} ti-xs me-1 text-success"></i>
<small>${chatMessage.created_at}</small>
</div>
@ -309,6 +344,36 @@ class Chat {
this.chatHistory.append(chatItem)
return chatItem
}
_addChatDirectMessages(chatMessage) {
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-${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>
<i class="ti ${chatMessage?.viewed == "1" ? "ti-checks" : "ti-check"} 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?.sender_first_name.charAt(0) + chatMessage?.sender_last_name.charAt(0)}</span>
</div>
</div>
</div>
</li>
`
this.chatHistory.append(chatItem)
return chatItem
}
_sendMessagePressKey(e) {
if (e.which == 13) {
e.preventDefault();
@ -491,7 +556,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>
`
@ -500,6 +565,145 @@ class Chat {
this.sideBar.find("#contact-list").append(contactItem)
}
}
_addParticipantToList(contact) {
let contactItem =
`
<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">
${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?.cliente_id ? "[CLIENTE]" : ""}${contact.username}
</p>
</div>
</div>
</li>
`
if (contact.first_name || contact.last_name) {
this.sideBar.find("#contact-list").append(contactItem)
}
}
_handleGetChatDirect() {
const ajax = new Ajax(
`/chat/${this.chatType}/conversation/${this.modelId}`,
null,
null,
this._handleGetChatDirectSuccess.bind(this),
this._handleGetChatDirectError.bind(this)
)
ajax.get()
}
_handleGetChatDirectSuccess(response) {
const { chat, users, messages } = response
if (users.length > 0) {
users.map(c => this._addParticipantToList(c))
}
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")
}
_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() ,"notification" : this.checkboxNotificationMessage.prop("checked")}
this.domItem.find(".chat-loader").removeClass("d-none")
const ajax = new Ajax(
`/chat/${this.chatType}/users/${this.modelId}`,
data,
null,
this._handleStoreChatDirectUsersSuccess.bind(this),
this._handleStoreChatDirectUsersError.bind(this)
)
ajax.post()
}
_handleStoreChatDirectUsersSuccess(response) {
this.domItem.find(".chat-loader").removeClass("d-none")
this.chatHistory.empty()
this.sideBar.find("#contact-list").empty()
this.modalNewParticipant.toggle()
this._handleGetChatDirect()
this.selectParticipants.reset()
}
_handleStoreChatDirectUsersError() {
this.domItem.find(".chat-loader").removeClass("d-none")
}
_handleStoreChatDirectMessage() {
const data = { "message": this.messageInput.val(), "chat_id": this.modelId }
if (data.message) {
const ajax = new Ajax(
`/chat/${this.chatType}/messages/${this.modelId}`,
data,
null,
this._handleStoreChatDirectMessageSuccess.bind(this),
this._handleStoreChatDirectMessageError.bind(this)
)
ajax.post()
}
}
_handleStoreChatDirectMessageSuccess(response) {
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(){}
@ -537,7 +741,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>
`

View File

@ -0,0 +1,107 @@
import Ajax from "../ajax.js";
class MessagesDatatable {
constructor(domItem) {
this.item = domItem
this.datatableItem = this.item.find("#tableMessages")
this.datatablePresupuestoMessageItem = this.item.find("#tablePresupuestoMessages")
this.datatablePedidoMessageItem = this.item.find("#tablePedidoMessages")
this.datatableFacturaMessageItem = this.item.find("#tableFacturaMessages")
this.datatableColumns = [
{ data: 'created_at', searchable: true, sortable: true },
{ data: 'updated_at', searchable: true, sortable: true },
{ data: 'title', searchable: true, sortable: true },
{ data: 'creator', searchable: false, sortable: false },
{
data: 'viewed', searchable: false, sortable: false,
render: (d, t) => {
const iconClass = d == true ? "ti ti-sm ti-check" : "ti ti-sm ti-x"
return `<span class="${iconClass}"</span>`
}
},
{
data: 'action', searchable: false, sortable: false,
render: (d, t) => {
return `<div class="btn-group btn-group-sm">
<a href="/chat/${d.type}/${d.modelId}" class="message-edit"><i class="ti ti-eye ti-sm mx-2"></i></a>
</div>`
}
}
]
}
init() {
this.datatable = this.datatableItem.DataTable({
processing: true,
layout: {
topStart: 'pageLength',
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
serverSide: true,
pageLength: 10,
language: {
url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
},
columns: this.datatableColumns,
ajax: '/messages/datatable'
});
this.datatablePresupuestoMessage = this.datatablePresupuestoMessageItem.DataTable({
processing: true,
layout: {
topStart: 'pageLength',
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
serverSide: true,
pageLength: 10,
language: {
url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
},
columns: this.datatableColumns,
ajax: '/messages/datatable/presupuesto'
});
this.datatablePedidoMessage = this.datatablePedidoMessageItem.DataTable({
processing: true,
layout: {
topStart: 'pageLength',
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
serverSide: true,
pageLength: 10,
language: {
url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
},
columns: this.datatableColumns,
ajax: '/messages/datatable/pedido'
});
this.datatableFacturaMessage = this.datatableFacturaMessageItem.DataTable({
processing: true,
layout: {
topStart: 'pageLength',
topEnd: 'search',
bottomStart: 'info',
bottomEnd: 'paging'
},
serverSide: true,
pageLength: 10,
language: {
url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
},
columns: this.datatableColumns,
ajax: '/messages/datatable/factura'
});
}
}
export default MessagesDatatable;

View File

@ -13,6 +13,7 @@ let ClassSelect = function (domItem, url, placeholder, allowClear = false, param
placeholder: placeholder,
allowClear: allowClear,
dropdownParent: domItem.parent(),
language: "es",
ajax: {
url: () => {
return this.url;
@ -47,7 +48,7 @@ let ClassSelect = function (domItem, url, placeholder, allowClear = false, param
this.init = function () {
if (this.item.length) {
this.item = this.item.select2(this.config);
$.fn.modal.Constructor.prototype.enforceFocus = function () {};
// $.fn.modal.Constructor.prototype.enforceFocus = function () {};
}
};
this.setOption = function (id, nombre) {

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"))
})

View File

@ -0,0 +1,5 @@
import MessagePage from "./messagePage.js";
const messagePage = new MessagePage()
messagePage.init()

View File

@ -0,0 +1,132 @@
import MessagesDatatable from "../../../components/datatables/MessagesDatatable.js";
import Modal from "../../../components/modal.js";
import Ajax from "../../../components/ajax.js";
import ClassSelect from "../../../components/select2.js";
import Alert from "../../../components/alerts/alert.js";
class MessagePage {
constructor() {
this.messageDatatable = new MessagesDatatable($("#message-datatables-container")) // mensajesView.php
this.modalNewMessage = new Modal($("#modalNewDirectMessage"))
this.btnNewMessage = $("#btn-new-message")
this.btnSubmitNewDirectMessage = this.modalNewMessage.item.find("#submit-new-direct-message")
this.btnSubmitNewDirectMessageCliente = this.modalNewMessage.item.find("#submit-new-direct-message-client")
this.formNewDirectMessage = this.modalNewMessage.item.find("#formNewDirectMessage")
this.alert = new Alert($("#alertDirectMessage"))
this.selectUsers = $("#select-users")
this.selectUsers = $("#select-departments")
this.selectPlaceholder = {
id: '0',
text: "Seleccione un usuario"
}
this.selectDepartmentPlaceholder = {
id: '0',
text: "Seleccione un departamento"
}
this.selectMessageUsers = new ClassSelect(this.selectUsers, '/chat/users/all', this.selectPlaceholder, true)
this.selectChatDepartment = new ClassSelect(this.selectUsers, '/chat/department/select', this.selectDepartmentPlaceholder, true)
}
init() {
this.events()
this.messageDatatable.init()
}
events() {
// Open new message when click in btn-new-message
this.btnNewMessage.on("click", this.openNewMessageModal.bind(this))
this.btnSubmitNewDirectMessage.on("click", this.handleSubmitNewMessage.bind(this))
this.btnSubmitNewDirectMessageCliente.on("click", this.handleSubmitNewMessageClient.bind(this))
$("#navs-top-align-directos-tab").on("click",()=>{
this.messageDatatable.datatable.ajax.reload()
})
$("#navs-top-align-presupuestos-tab").on("click",()=>{
this.messageDatatable.datatablePresupuestoMessage.ajax.reload()
})
$("#navs-top-align-pedidos-tab").on("click",()=>{
this.messageDatatable.datatablePedidoMessage.ajax.reload()
})
$("#navs-top-align-facturas-tab").on("click",()=>{
this.messageDatatable.datatableFacturaMessage.ajax.reload()
})
}
openNewMessageModal() {
this.formNewDirectMessage.trigger("reset")
this.selectMessageUsers.init()
this.alert.hide()
this.showForm()
this.modalNewMessage.toggle()
}
handleSubmitNewMessage() {
this.btnNewMessage.addClass("loading")
const ajax = new Ajax("/messages/direct",
this.getNewMessageDataForm(),
null,
this.handleSubmitNewMessageSuccess.bind(this),
this.handleSubmitNewMessageError.bind(this))
ajax.post()
}
handleSubmitNewMessageSuccess(response) {
this.btnNewMessage.removeClass("loading")
this.alert.setAsSuccess()
this.alert.setHeadingTitle(response.message)
this.alert.show()
this.hideForm()
this.messageDatatable.datatable.ajax.reload()
}
handleSubmitNewMessageError(response) {
const error = response.responseJSON
this.btnNewMessage.removeClass("loading")
this.alert.show()
this.alert.setAsError()
this.alert.setHeadingTitle(error.message)
}
handleSubmitNewMessageClient(){
this.btnNewMessage.addClass("loading")
const ajax = new Ajax("/messages/direct/client",
this.getNewMessageDataFormClient(),
null,
this.handleSubmitNewMessageSuccess.bind(this),
this.handleSubmitNewMessageError.bind(this))
ajax.post()
}
handleSubmitNewMessageClientSuccess(){
}
handleSubmitNewMessageClientError(){
}
getNewMessageDataForm() {
return {
"title": this.formNewDirectMessage.find("#new-direct-message-title").val(),
"message": this.formNewDirectMessage.find("#new-direct-message-text").val(),
"users": this.selectMessageUsers.getVal()
}
}
getNewMessageDataFormClient() {
return {
"title": this.formNewDirectMessage.find("#new-direct-message-title").val(),
"message": this.formNewDirectMessage.find("#new-direct-message-text").val(),
"chat_department_id": this.selectChatDepartment.getVal()
}
}
hideForm() {
this.formNewDirectMessage.addClass("d-none")
this.btnSubmitNewDirectMessage.addClass("d-none")
this.btnSubmitNewDirectMessageCliente.addClass("d-none")
}
showForm() {
this.formNewDirectMessage.removeClass("d-none")
this.btnSubmitNewDirectMessage.removeClass("d-none")
this.btnSubmitNewDirectMessageCliente.addClass("d-none")
}
}
export default MessagePage;

View File

@ -0,0 +1,9 @@
import Chat from "../../components/chat.js";
$(function(){
const chatDirectMessage = new Chat($("#chat-direct-message"))
chatDirectMessage.init()
chatDirectMessage.initDirectMessage()
}
)

View File

@ -0,0 +1,9 @@
import Chat from "../../components/chat.js";
$(function(){
const chatDirectMessage = new Chat($("#chat-factura"))
chatDirectMessage.init()
chatDirectMessage.initFactura()
}
)

View File

@ -0,0 +1,10 @@
import InternalMessages from "../../components/internalMessagesSection.js";
$(function () {
if ($("#internal_messages_chat").length > 0) {
const internalMessages = new InternalMessages($("#internal_messages_chat"))
internalMessages.init()
}
}
)

View File

@ -0,0 +1,9 @@
import Chat from "../../components/chat.js";
$(function(){
const chatDirectMessage = new Chat($("#chat-pedido"))
chatDirectMessage.init()
chatDirectMessage.initPedido()
}
)

View File

@ -0,0 +1,18 @@
import Chat from "../../components/chat.js";
import InternalMessages from "../../components/internalMessagesSection.js";
$(function () {
if ($("#chat-presupuesto").length > 0) {
const chatDirectMessage = new Chat($("#chat-presupuesto"))
chatDirectMessage.init()
chatDirectMessage.initPresupuesto()
}
if ($("#internal_messages_chat").length > 0) {
const internalMessages = new InternalMessages($("#internal_messages_chat"))
internalMessages.init()
}
}
)

View File

@ -0,0 +1,21 @@
export const newDirectMessageValidation =
{
fields:{
title:{
notEmpty:{
message : "Título no puede estar vacío"
},
},
message:{
notEmpty:{
message : "Mensaje no puede estar vacío"
},
},
users:{
notEmpty:{
message : "Debe seleccionar al menos a un participante"
},
}
},
}