From 810d01130e5073fbe958040042ec8f010fde7238 Mon Sep 17 00:00:00 2001 From: wkarts <57051272+wkarts@users.noreply.github.com> Date: Sat, 5 Oct 2024 08:47:33 -0300 Subject: [PATCH] Update UnoapiConfiguration.vue --- .../settingsPage/UnoapiConfiguration.vue | 911 +++++++++++------- 1 file changed, 549 insertions(+), 362 deletions(-) diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/UnoapiConfiguration.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/UnoapiConfiguration.vue index 710e4a0d36a40..c866a937c22b3 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/UnoapiConfiguration.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/UnoapiConfiguration.vue @@ -1,298 +1,393 @@ @@ -309,7 +404,6 @@ export default { setup() { return { v$: useVuelidate() }; }, - components: {}, mixins: [inboxMixin], props: { inbox: { @@ -320,8 +414,7 @@ export default { data() { return { apiKey: '', - wavoipToken: '', - url: 'https://unoapi.cloud', + url: 'https://cloud.unoapi', ignoreGroupMessages: true, ignoreHistoryMessages: true, webhookSendNewMessages: true, @@ -334,15 +427,38 @@ export default { notifyFailedMessages: true, composingMessage: true, sendReactionAsReply: true, - sendProfilePicture: true, + sendProfilePicture: true, + useRejectCalls: false, connect: false, - disconect: false, + disconnect: false, qrcode: '', notice: '', rejectCalls: '', - messageCallsWebhook: '', + messageCallsWebhook: '', + webhooks: [], + showWebhookModal: false, + editingWebhook: false, + webhookForm: { + id: '', + urlAbsolute: '', + sendNewMessages: true, + token: '', + header: 'Authorization', + }, + activeTab: 0, }; }, + watch: { + useRejectCalls(newValue) { + if (!newValue) { + this.rejectCalls = ''; + this.messageCallsWebhook = ''; + } + }, + inbox() { + this.setDefaults(); + }, + }, computed: { ...mapGetters({ uiFlags: 'inboxes/getUIFlags' }), }, @@ -363,23 +479,20 @@ export default { composingMessage: { required }, sendReactionAsReply: { required }, sendProfilePicture: { required }, + useRejectCalls: { required }, rejectCalls: { required }, messageCallsWebhook: { required }, - wavoipToken: { required }, - }, - watch: { - inbox() { - this.setDefaults(); - }, }, mounted() { this.setDefaults(); this.listenerQrCode(); }, methods: { + onTabChange(index) { + this.activeTab = index; + }, setDefaults() { this.apiKey = this.inbox.provider_config.api_key; - this.wavoipToken = this.inbox.provider_config.wavoip_token; this.url = this.inbox.provider_config.url; this.ignoreGroupMessages = this.inbox.provider_config.ignore_group_messages; this.ignoreHistoryMessages = this.inbox.provider_config.ignore_history_messages; @@ -394,10 +507,58 @@ export default { this.composingMessage = this.inbox.provider_config.composing_message; this.sendReactionAsReply = this.inbox.provider_config.send_reaction_as_reply; this.sendProfilePicture = this.inbox.provider_config.send_profile_picture; + this.useRejectCalls = this.inbox.provider_config.use_reject_calls; this.rejectCalls = this.inbox.provider_config.reject_calls; this.messageCallsWebhook = this.inbox.provider_config.message_calls_webhook; this.connect = false; - this.disconect = false; + this.disconnect = false; + this.webhooks = this.inbox.provider_config.webhooks || []; + }, + showAddWebhookModal() { + this.showWebhookModal = true; + this.webhookForm = { + id: '', + urlAbsolute: '', + sendNewMessages: true, + token: '', + header: 'Authorization', + }; + this.editingWebhook = false; + }, + editWebhook(index) { + this.showWebhookModal = true; + this.webhookForm = { ...this.webhooks[index] }; + this.editingWebhook = true; + }, + removeWebhook(index) { + if (this.webhooks[index].id !== 'default') { + this.webhooks.splice(index, 1); + } else { + useAlert(this.$t('INBOX_MGMT.ADD.WHATSAPP.TAB_NAME.TAB_WEBHOOK.ERROR_DELETE')); + } + }, + closeWebhookModal() { + this.showWebhookModal = false; + }, + submitWebhook() { + const existingWebhook = this.webhooks.find(w => w.urlAbsolute === this.webhookForm.urlAbsolute && w.id !== this.webhookForm.id); + if (existingWebhook) { + useAlert(this.$t('INBOX_MGMT.ADD.WHATSAPP.TAB_NAME.TAB_WEBHOOK.DUPLICATE')); + return; + } + + if (this.editingWebhook) { + const index = this.webhooks.findIndex(w => w.id === this.webhookForm.id); + if (index !== -1) { + this.webhooks.splice(index, 1, this.webhookForm); + } + } else { + this.webhooks.push(this.webhookForm); + } + this.closeWebhookModal(); + }, + toggleSendNewMessages(index) { + this.webhooks[index].sendNewMessages = !this.webhooks[index].sendNewMessages; }, listenerQrCode() { const url = `${this.inbox.provider_config.url}` @@ -454,36 +615,37 @@ export default { } }, async updateInbox() { - try { - const payload = { - id: this.inbox.id, - formData: false, - channel: { - provider_config: { - ...this.inbox.provider_config, - api_key: this.apiKey, - wavoip_token: this.wavoipToken, - ignore_history_messages: this.ignoreHistoryMessages, - ignore_group_messages: this.ignoreGroupMessages, - send_agent_name: this.sendAgentName, - webhook_send_new_messages: this.webhookSendNewMessages, - url: this.url, - ignore_broadcast_statuses: this.ignoreBroadcastStatuses, - ignore_broadcast_messages: this.ignoreBroadcastMessages, - ignore_own_messages: this.ignoreOwnMessages, - ignore_yourself_messages: this.ignoreYourselfMessages, - send_connection_status: this.sendConnectionStatus, - notify_failed_messages: this.notifyFailedMessages, - composing_message: this.composingMessage, - send_reaction_as_reply: this.sendReactionAsReply, - send_profile_picture: this.sendProfilePicture, - reject_calls: this.rejectCalls, - message_calls_webhook: this.messageCallsWebhook, - connect: this.connect, - disconect: this.disconect, - }, + const payload = { + id: this.inbox.id, + formData: false, + channel: { + provider_config: { + ...this.inbox.provider_config, + api_key: this.apiKey, + ignore_history_messages: this.ignoreHistoryMessages, + ignore_group_messages: this.ignoreGroupMessages, + send_agent_name: this.sendAgentName, + webhook_send_new_messages: this.webhookSendNewMessages, + url: this.url, + ignore_broadcast_statuses: this.ignoreBroadcastStatuses, + ignore_broadcast_messages: this.ignoreBroadcastMessages, + ignore_own_messages: this.ignoreOwnMessages, + ignore_yourself_messages: this.ignoreYourselfMessages, + send_connection_status: this.sendConnectionStatus, + notify_failed_messages: this.notifyFailedMessages, + composing_message: this.composingMessage, + send_reaction_as_reply: this.sendReactionAsReply, + send_profile_picture: this.sendProfilePicture, + use_reject_calls: this.useRejectCalls, + reject_calls: this.rejectCalls, + message_calls_webhook: this.messageCallsWebhook, + connect: this.connect, + disconnect: this.disconnect, + webhooks: this.webhooks, }, - }; + }, + }; + try { await this.$store.dispatch('inboxes/updateInbox', payload); useAlert(this.$t('INBOX_MGMT.EDIT.API.SUCCESS_MESSAGE')); } catch (error) { @@ -499,6 +661,10 @@ export default { ::v-deep input { margin-bottom: 0; } + + .checkbox { + margin: 0px 4px; + } } .switch { @@ -511,50 +677,71 @@ export default { align-items: center; } -.flex-shrink div .messagingServiceHelptext{ - width:343px; - max-width:343px; - margin-bottom:8px; +.flex-shrink div .messagingServiceHelptext { + width: 343px; + max-width: 343px; + margin-bottom: 8px; } -.flex-shrink div .w-1\/4{ - min-width:700px; - height:77px; +.flex-shrink div .w-1\/4 { + min-width: 700px; + height: 77px; } -#app .flex .w-full{ - transform:translatex(0px) translatey(0px); +#app .flex .w-full { + transform: translatex(0px) translatey(0px); } -/* Config helptext */ -#app .flex-grow-0 .overflow-hidden .justify-between .flex-shrink div .text-base .flex-col .config-helptext{ - width:100% !important; +#app .flex-grow-0 .overflow-hidden .justify-between .flex-shrink div .text-base .flex-col .config-helptext { + width: 100% !important; } -.flex-shrink div .config-helptext{ - min-height:2px; - height:30px; +.flex-shrink div .config-helptext { + min-height: 2px; + height: 30px; } -.flex-shrink .messagingServiceHelptext label{ - width:204%; - transform:translatex(0px) translatey(0px); - position:relative; - top:6px; +.flex-shrink .messagingServiceHelptext label { + width: 204%; + transform: translatex(0px) translatey(0px); + position: relative; + top: 6px; +} + +.flex-shrink .config-helptext div { + margin-top: 10px; +} + +.flex-shrink div img { + transform: translatex(407px) translatey(-347px); + width: 300px; + height: 300px; +} + +.flex-shrink div .message { + margin-top: -20px; + font-size: 11px; +} + +.webhook-table { + width: 100%; + th, + td { + padding: 8px; + text-align: left; + } } -.flex-shrink .config-helptext div{ - margin-top:10px; +#app .flex-grow-0 .overflow-hidden .justify-between .flex-shrink div .text-base > div { + width: 63% !important; } -.flex-shrink div img{ - transform:translatex(407px) translatey(-347px); - width:300px; - height:300px; +.flex-shrink modal h3 { + background-color: #369eff; + color: #369eff; } -.flex-shrink div .message{ - margin-top:-20px; - font-size:11px; +#app .overflow-hidden .flex-shrink { + transform: translatex(0px) translatey(0px); }