LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Feature: As a admin, I should be able to add webhooks to account (#572)

Browse Source 
Co-authored-by: Pranav Raj S <pranavrajs@gmail.com>
This commit is contained in:
Nithin David Thomas
2020-02-29 17:43:49 +05:30
committed by GitHub
parent e8cf59c661
commit c119c6577b
36 changed files with 845 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
View File

@@ -2,12 +2,12 @@
<div class="settings-header">
<h1 class="page-title">
<woot-sidemenu-icon></woot-sidemenu-icon>
<back-button v-if="!showButton"></back-button>
<back-button v-if="showBackButton"></back-button>
<i :class="iconClass"></i>
<span>{{ headerTitle }}</span>
</h1>
<router-link
v-if="showNewButton && showButton && isAdmin"
v-if="showNewButton && isAdmin"
:to="buttonRoute"
class="button icon success nice button--fixed-right-top"
>
@@ -41,14 +41,8 @@ export default {
default: '',
type: String,
},
showButton: Boolean,
showNewButton: Boolean,
hideButtonRoutes: {
type: Array,
default() {
return ['agent_list', 'settings_inbox_list'];
},
},
showBackButton: { type: Boolean, default: false },
showNewButton: { type: Boolean, default: false },
},
computed: {
...mapGetters({

23
app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
View File

@@ -5,8 +5,8 @@
:icon="icon"
:header-title="$t(headerTitle)"
:button-text="$t(headerButtonText)"
:show-button="showButton()"
:show-new-button="showNewButton()"
:show-back-button="showBackButton"
:show-new-button="showNewButton"
/>
<keep-alive>
<router-view></router-view>
@@ -26,7 +26,14 @@ export default {
headerTitle: String,
headerButtonText: String,
icon: String,
newButtonRoutes: Array,
newButtonRoutes: {
type: Array,
default: () => [],
},
showBackButton: {
type: Boolean,
default: false,
},
},
data() {
return {};
@@ -35,16 +42,8 @@ export default {
currentPage() {
return this.$store.state.route.name;
},
},
methods: {
showButton() {
/* eslint-disable no-unneeded-ternary */
return this.newButtonRoutes
? this.newButtonRoutes.indexOf(this.currentPage) > -1
: true;
},
showNewButton() {
return this.newButtonRoutes ? true : false;
return this.newButtonRoutes.length !== 0 && !this.showBackButton;
},
},
};

14
app/javascript/dashboard/routes/dashboard/settings/inbox/inbox.routes.js
View File

@@ -14,11 +14,15 @@ export default {
{
path: frontendURL('settings/inboxes'),
component: SettingsContent,
props: {
headerTitle: 'INBOX_MGMT.HEADER',
headerButtonText: 'SETTINGS.INBOXES.NEW_INBOX',
icon: 'ion-archive',
newButtonRoutes: ['settings_inbox_list'],
props: params => {
const showBackButton = params.name !== 'settings_inbox_list';
return {
headerTitle: 'INBOX_MGMT.HEADER',
headerButtonText: 'SETTINGS.INBOXES.NEW_INBOX',
icon: 'ion-archive',
newButtonRoutes: ['settings_inbox_list'],
showBackButton,
};
},
children: [
{

32
app/javascript/dashboard/routes/dashboard/settings/integrations/Delete.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<modal :show.sync="show" :on-close="onClose">
<woot-modal-header :header-title="title" :header-content="message" />
<div class="modal-footer delete-item">
<button class="button" @click="onClose">
{{ rejectText }}
</button>
<button class="alert button" @click="onConfirm">
{{ confirmText }}
</button>
</div>
</modal>
</template>
<script>
import Modal from '../../../../components/Modal';
export default {
components: {
Modal,
},
props: {
show: Boolean,
onClose: Function,
onConfirm: Function,
title: String,
message: String,
confirmText: String,
rejectText: String,
},
};
</script>

44
app/javascript/dashboard/routes/dashboard/settings/integrations/Index.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<div class="column content-box">
<div class="row">
<div class="small-8 columns integrations-wrap">
<div class="row integrations">
<div class="small-12 columns integration">
<div class="row">
<div class="integration--image">
<img src="~dashboard/assets/images/integrations/cable.svg" />
</div>
<div class="column">
<h3 class="integration--title">
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.TITLE') }}
</h3>
<p class="integration--description">
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.INTEGRATION_TXT') }}
</p>
</div>
<div class="small-2 column button-wrap">
<router-link :to="frontendURL('settings/integrations/webhook')">
<button class="button success nice">
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.CONFIGURE') }}
</button>
</router-link>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="small-4 columns help-wrap">
<span v-html="$t('INTEGRATION_SETTINGS.SIDEBAR_TXT')"></span>
</div> -->
</div>
</div>
</template>
<script>
import { frontendURL } from '../../../../helper/URLHelper';
export default {
methods: {
frontendURL,
},
};
</script>

114
app/javascript/dashboard/routes/dashboard/settings/integrations/New.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<modal :show.sync="show" :on-close="onClose" :close-on-backdrop-click="false">
<div class="column content-box">
<woot-modal-header
:header-title="$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.TITLE')"
:header-content="$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.DESC')"
/>
<form class="row" @submit.prevent="addWebhook()">
<div class="medium-12 columns">
<label :class="{ error: $v.endPoint.$error }">
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.ADD.FORM.END_POINT.LABEL') }}
<input
v-model.trim="endPoint"
type="text"
name="endPoint"
:placeholder="
$t(
'INTEGRATION_SETTINGS.WEBHOOK.ADD.FORM.END_POINT.PLACEHOLDER'
)
"
@input="$v.endPoint.$touch"
/>
<span v-if="$v.endPoint.$error" class="message">
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.ADD.FORM.END_POINT.ERROR') }}
</span>
</label>
</div>
<div class="modal-footer">
<div class="medium-12 columns">
<woot-submit-button
:disabled="$v.endPoint.$invalid || addWebHook.showLoading"
:button-text="$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.FORM.SUBMIT')"
:loading="addWebHook.showLoading"
/>
<a @click="onClose">
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.ADD.CANCEL') }}
</a>
</div>
</div>
</form>
</div>
</modal>
</template>
<script>
/* global bus */
import { required, url, minLength } from 'vuelidate/lib/validators';
import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
import Modal from '../../../../components/Modal';
export default {
components: {
WootSubmitButton,
Modal,
},
props: {
onClose: {
type: Function,
required: true,
},
},
data() {
return {
endPoint: '',
addWebHook: {
showAlert: false,
showLoading: false,
message: '',
},
show: true,
};
},
validations: {
endPoint: {
required,
minLength: minLength(7),
url,
},
},
methods: {
showAlert() {
bus.$emit('newToastMessage', this.addWebHook.message);
},
resetForm() {
this.endPoint = '';
this.$v.endPoint.$reset();
},
async addWebhook() {
this.addWebHook.showLoading = true;
try {
await this.$store.dispatch('webhooks/create', {
webhook: { url: this.endPoint },
});
this.addWebHook.showLoading = false;
this.addWebHook.message = this.$t(
'INTEGRATION_SETTINGS.WEBHOOK.ADD.API.SUCCESS_MESSAGE'
);
this.showAlert();
this.resetForm();
this.onClose();
} catch (error) {
this.addWebHook.showLoading = false;
this.addWebHook.message =
error.response.data.message ||
this.$t('INTEGRATION_SETTINGS.WEBHOOK.ADD.API.ERROR_MESSAGE');
this.showAlert();
}
},
},
};
</script>

141
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhook.vue Normal file
View File

@@ -0,0 +1,141 @@
<template>
<div class="row content-box full-height">
<button
class="button nice icon success button--fixed-right-top"
@click="openAddPopup()"
>
<i class="icon ion-android-add-circle"></i>
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.HEADER_BTN_TXT') }}
</button>
<div class="row">
<div class="small-8 columns">
<p
v-if="!uiFlags.fetchingList && !records.length"
class="no-items-error-message"
>
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.LIST.404') }}
</p>
<woot-loading-state
v-if="uiFlags.fetchingList"
:message="$t('INTEGRATION_SETTINGS.WEBHOOK.LOADING')"
/>
<table
v-if="!uiFlags.fetchingList && records.length"
class="woot-table"
>
<thead>
<th
v-for="thHeader in $t(
'INTEGRATION_SETTINGS.WEBHOOK.LIST.TABLE_HEADER'
)"
:key="thHeader"
>
{{ thHeader }}
</th>
</thead>
<tbody>
<tr v-for="(webHookItem, index) in records" :key="webHookItem.id">
<td>{{ webHookItem.url }}</td>
<td class="button-wrapper">
<div @click="openDeletePopup(webHookItem, index)">
<woot-submit-button
:button-text="
$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.BUTTON_TEXT')
"
:loading="loading[webHookItem.id]"
icon-class="ion-close-circled"
button-class="link hollow grey-btn"
/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="small-4 columns">
<span v-html="$t('INTEGRATION_SETTINGS.WEBHOOK.SIDEBAR_TXT')"></span>
</div>
</div>
<woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
<new-webhook :on-close="hideAddPopup" />
</woot-modal>
<delete-webhook
:show.sync="showDeleteConfirmationPopup"
:on-close="closeDeletePopup"
:on-confirm="confirmDeletion"
:title="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.TITLE')"
:message="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.MESSAGE')"
:confirm-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.YES')"
:reject-text="$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.CONFIRM.NO')"
/>
</div>
</template>
<script>
/* global bus */
import { mapGetters } from 'vuex';
import NewWebhook from './New';
import DeleteWebhook from './Delete';
export default {
components: {
NewWebhook,
DeleteWebhook,
},
data() {
return {
loading: {},
showAddPopup: false,
showDeleteConfirmationPopup: false,
selectedWebHook: {},
};
},
computed: {
...mapGetters({
records: 'webhooks/getWebhooks',
uiFlags: 'webhooks/getUIFlags',
}),
},
mounted() {
this.$store.dispatch('webhooks/get');
},
methods: {
showAlert(message) {
bus.$emit('newToastMessage', message);
},
openAddPopup() {
this.showAddPopup = true;
},
hideAddPopup() {
this.showAddPopup = false;
},
openDeletePopup(response) {
this.showDeleteConfirmationPopup = true;
this.selectedWebHook = response;
},
closeDeletePopup() {
this.showDeleteConfirmationPopup = false;
},
confirmDeletion() {
this.loading[this.selectedWebHook.id] = true;
this.closeDeletePopup();
this.deleteWebhook(this.selectedWebHook.id);
},
async deleteWebhook(id) {
try {
await this.$store.dispatch('webhooks/delete', id);
this.showAlert(
this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.SUCCESS_MESSAGE')
);
} catch (error) {
this.showAlert(
this.$t('INTEGRATION_SETTINGS.WEBHOOK.DELETE.API.ERROR_MESSAGE')
);
}
},
},
};
</script>

35
app/javascript/dashboard/routes/dashboard/settings/integrations/integrations.routes.js Normal file
View File

@@ -0,0 +1,35 @@
import Index from './Index';
import SettingsContent from '../Wrapper';
import Webhook from './Webhook';
import { frontendURL } from '../../../../helper/URLHelper';
export default {
routes: [
{
path: frontendURL('settings/integrations'),
component: SettingsContent,
props: params => {
const showBackButton = params.name !== 'settings_integrations';
return {
headerTitle: 'INTEGRATION_SETTINGS.HEADER',
icon: 'ion-flash',
showBackButton,
};
},
children: [
{
path: '',
name: 'settings_integrations',
component: Index,
roles: ['administrator'],
},
{
path: 'webhook',
component: Webhook,
name: 'settings_integrations_webhook',
roles: ['administrator'],
},
],
},
],
};

2
app/javascript/dashboard/routes/dashboard/settings/settings.routes.js
View File

@@ -6,6 +6,7 @@ import canned from './canned/canned.routes';
import inbox from './inbox/inbox.routes';
import profile from './profile/profile.routes';
import reports from './reports/reports.routes';
import integrations from './integrations/integrations.routes';
export default {
routes: [
@@ -26,5 +27,6 @@ export default {
...inbox.routes,
...profile.routes,
...reports.routes,
...integrations.routes,
],
};