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

[Enhancement] Add ApiClient, refactor CannedResponse (#183)

Browse Source
This commit is contained in:
Pranav Raj S
2019-10-27 10:48:26 +05:30
committed by GitHub
parent 50fc06681c
commit 6c60b60240
10 changed files with 311 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
View File

@@ -6,24 +6,38 @@
:header-title="$t('CANNED_MGMT.ADD.TITLE')"
:header-content="$t('CANNED_MGMT.ADD.DESC')"
/>
<form class="row" v-on:submit.prevent="addAgent()">
<form class="row" @submit.prevent="addAgent()">
<div class="medium-12 columns">
<label :class="{ 'error': $v.shortCode.$error }">
<label :class="{ error: $v.shortCode.$error }">
{{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
<input type="text" v-model.trim="shortCode" @input="$v.shortCode.$touch" :placeholder="$t('CANNED_MGMT.ADD.FORM.SHORT_CODE.PLACEHOLDER')">
<input
v-model.trim="shortCode"
type="text"
:placeholder="$t('CANNED_MGMT.ADD.FORM.SHORT_CODE.PLACEHOLDER')"
@input="$v.shortCode.$touch"
/>
</label>
</div>
<div class="medium-12 columns">
<label :class="{ 'error': $v.content.$error }">
<label :class="{ error: $v.content.$error }">
{{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
<input type="text" v-model.trim="content" @input="$v.content.$touch" :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')">
<input
v-model.trim="content"
type="text"
:placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
@input="$v.content.$touch"
/>
</label>
</div>
<div class="modal-footer">
<div class="medium-12 columns">
<woot-submit-button
:disabled="$v.content.$invalid || $v.shortCode.$invalid || addCanned.showLoading"
:disabled="
$v.content.$invalid ||
$v.shortCode.$invalid ||
addCanned.showLoading
"
:button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
:loading="addCanned.showLoading"
/>
@@ -40,20 +54,17 @@
/* eslint no-console: 0 */
import { required, minLength } from 'vuelidate/lib/validators';
import PageHeader from '../SettingsSubPageHeader';
import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
import Modal from '../../../../components/Modal';
const cannedImg = require('assets/images/canned.svg');
export default {
props: ['onClose'],
components: {
PageHeader,
WootSubmitButton,
Modal,
},
props: ['onClose'],
data() {
return {
shortCode: '',
@@ -97,7 +108,8 @@ export default {
bus.$emit('newToastMessage', this.addCanned.message);
},
resetForm() {
this.shortCode = this.content = '';
this.shortCode = '';
this.content = '';
this.$v.shortCode.$reset();
this.$v.content.$reset();
},
@@ -105,23 +117,26 @@ export default {
// Show loading on button
this.addCanned.showLoading = true;
// Make API Calls
this.$store.dispatch('addCannedResponse', {
short_code: this.shortCode,
content: this.content,
})
.then(() => {
// Reset Form, Show success message
this.addCanned.showLoading = false;
this.addCanned.message = this.$t('CANNED_MGMT.ADD.API.SUCCESS_MESSAGE');
this.showAlert();
this.resetForm();
this.onClose();
})
.catch(() => {
this.addCanned.showLoading = false;
this.addCanned.message = this.$t('CANNED_MGMT.ADD.API.ERROR_MESSAGE');
this.showAlert();
});
this.$store
.dispatch('createCannedResponse', {
short_code: this.shortCode,
content: this.content,
})
.then(() => {
// Reset Form, Show success message
this.addCanned.showLoading = false;
this.addCanned.message = this.$t(
'CANNED_MGMT.ADD.API.SUCCESS_MESSAGE'
);
this.showAlert();
this.resetForm();
this.onClose();
})
.catch(() => {
this.addCanned.showLoading = false;
this.addCanned.message = this.$t('CANNED_MGMT.ADD.API.ERROR_MESSAGE');
this.showAlert();
});
},
},
};

13
app/javascript/dashboard/routes/dashboard/settings/canned/DeleteCanned.vue
View File

@@ -1,13 +1,6 @@
<template>
<modal
:show.sync="show"
:on-close="onClose"
>
<woot-modal-header
:header-title="title"
:header-content="message"
/>
<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 }}
@@ -20,13 +13,11 @@
</template>
<script>
import PageHeader from '../SettingsSubPageHeader';
import Modal from '../../../../components/Modal';
export default {
components: {
Modal,
PageHeader,
},
props: {
show: Boolean,

80
app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
View File

@@ -1,27 +1,39 @@
<template>
<modal :show.sync="show" :on-close="onClose">
<div class="column content-box">
<woot-modal-header
:header-title="pageTitle"
/>
<form class="row medium-8" v-on:submit.prevent="editCannedResponse()">
<woot-modal-header :header-title="pageTitle" />
<form class="row medium-8" @submit.prevent="editCannedResponse()">
<div class="medium-12 columns">
<label :class="{ 'error': $v.shortCode.$error }">
<label :class="{ error: $v.shortCode.$error }">
{{ $t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.LABEL') }}
<input type="text" v-model.trim="shortCode" @input="$v.shortCode.$touch" :placeholder="$t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.PLACEHOLDER')">
<input
v-model.trim="shortCode"
type="text"
:placeholder="$t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.PLACEHOLDER')"
@input="$v.shortCode.$touch"
/>
</label>
</div>
<div class="medium-12 columns">
<label :class="{ 'error': $v.content.$error }">
<label :class="{ error: $v.content.$error }">
{{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
<input type="text" v-model.trim="content" @input="$v.content.$touch" :placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')">
<input
v-model.trim="content"
type="text"
:placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
@input="$v.content.$touch"
/>
</label>
</div>
<div class="modal-footer">
<div class="medium-12 columns">
<woot-submit-button
:disabled="$v.content.$invalid || $v.shortCode.$invalid || editCanned.showLoading"
:disabled="
$v.content.$invalid ||
$v.shortCode.$invalid ||
editCanned.showLoading
"
:button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
:loading="editCanned.showLoading"
/>
@@ -38,13 +50,11 @@
/* eslint no-console: 0 */
import { required, minLength } from 'vuelidate/lib/validators';
import PageHeader from '../SettingsSubPageHeader';
import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
import Modal from '../../../../components/Modal';
export default {
components: {
PageHeader,
WootSubmitButton,
Modal,
},
@@ -89,7 +99,8 @@ export default {
bus.$emit('newToastMessage', this.editCanned.message);
},
resetForm() {
this.shortCode = this.content = '';
this.shortCode = '';
this.content = '';
this.$v.shortCode.$reset();
this.$v.content.$reset();
},
@@ -97,26 +108,31 @@ export default {
// Show loading on button
this.editCanned.showLoading = true;
// Make API Calls
this.$store.dispatch('editCannedResponse', {
id: this.id,
name: this.shortCode,
content: this.content,
})
.then(() => {
// Reset Form, Show success message
this.editCanned.showLoading = false;
this.editCanned.message = this.$t('CANNED_MGMT.EDIT.API.SUCCESS_MESSAGE');
this.showAlert();
this.resetForm();
setTimeout(() => {
this.onClose();
}, 10);
})
.catch(() => {
this.editCanned.showLoading = false;
this.editCanned.message = this.$t('CANNED_MGMT.EDIT.API.ERROR_MESSAGE');
this.showAlert();
});
this.$store
.dispatch('updateCannedResponse', {
id: this.id,
name: this.shortCode,
content: this.content,
})
.then(() => {
// Reset Form, Show success message
this.editCanned.showLoading = false;
this.editCanned.message = this.$t(
'CANNED_MGMT.EDIT.API.SUCCESS_MESSAGE'
);
this.showAlert();
this.resetForm();
setTimeout(() => {
this.onClose();
}, 10);
})
.catch(() => {
this.editCanned.showLoading = false;
this.editCanned.message = this.$t(
'CANNED_MGMT.EDIT.API.ERROR_MESSAGE'
);
this.showAlert();
});
},
},
};

18
app/javascript/dashboard/routes/dashboard/settings/canned/Index.vue
View File

@@ -11,18 +11,18 @@
<div class="row">
<div class="small-8 columns">
<p
v-if="!fetchStatus && !cannedResponseList.length"
v-if="!uiFlags.fetchingList && !records.length"
class="no-items-error-message"
>
{{ $t('CANNED_MGMT.LIST.404') }}
</p>
<woot-loading-state
v-if="fetchStatus"
v-if="uiFlags.fetchingList"
:message="$t('CANNED_MGMT.LOADING')"
/>
<table
v-if="!fetchStatus && cannedResponseList.length"
v-if="!uiFlags.fetchingList && records.length"
class="woot-table"
>
<thead>
@@ -36,7 +36,7 @@
</thead>
<tbody>
<tr
v-for="(cannedItem, index) in cannedResponseList"
v-for="(cannedItem, index) in records"
:key="cannedItem.short_code"
>
<!-- Short Code -->
@@ -126,8 +126,8 @@ export default {
},
computed: {
...mapGetters({
cannedResponseList: 'getCannedResponses',
fetchStatus: 'getCannedFetchStatus',
records: 'getCannedResponses',
uiFlags: 'getUIFlags',
}),
// Delete Modal
deleteConfirmText() {
@@ -148,7 +148,7 @@ export default {
},
mounted() {
// Fetch API Call
this.$store.dispatch('fetchCannedResponse');
this.$store.dispatch('getCannedResponse');
},
methods: {
showAlert(message) {
@@ -192,9 +192,7 @@ export default {
},
deleteCannedResponse(id) {
this.$store
.dispatch('deleteCannedResponse', {
id,
})
.dispatch('deleteCannedResponse', id)
.then(() => {
this.showAlert(this.$t('CANNED_MGMT.DELETE.API.SUCCESS_MESSAGE'));
})