- remove some spaces and some code in comment - change icon for upload - adding an error for the number when it is duplicated in add/edit pages Change-Id: I3f1ca01e70a1b3bcf068bdea3c5cc98668f74c9fmr12.4
Nouhaila Idrissi Zouggari
1 year ago
parent
dac59416dc
commit
89507f5f61
@ -0,0 +1,228 @@
|
||||
<!-- eslint-disable vue/no-v-model-argument -->
|
||||
|
||||
<template>
|
||||
<csc-page-sticky
|
||||
id="csc-page-customer-phonebook"
|
||||
>
|
||||
<template
|
||||
#header
|
||||
>
|
||||
<q-btn
|
||||
icon="add"
|
||||
color="primary"
|
||||
flat
|
||||
:label="$t('Add Phonebook')"
|
||||
@click="openAddPhonebook()"
|
||||
/>
|
||||
<q-btn
|
||||
icon="fas fa-download"
|
||||
color="primary"
|
||||
flat
|
||||
:label="$t('Download CSV')"
|
||||
@click="downloadCSV()"
|
||||
/>
|
||||
<q-btn
|
||||
icon="fas fa-upload"
|
||||
color="primary"
|
||||
flat
|
||||
:label="$t('Upload CSV')"
|
||||
@click="openUploadPhonebook()"
|
||||
/>
|
||||
</template>
|
||||
<csc-page
|
||||
class="q-pa-lg"
|
||||
>
|
||||
<q-table
|
||||
v-model:pagination="pagination"
|
||||
class="no-shadow"
|
||||
:columns="columns"
|
||||
:rows="customerPhonebook"
|
||||
:loading="$wait.is('loadCustomerPhonebook')"
|
||||
row-key="id"
|
||||
@request="fetchPaginatedRegistrations"
|
||||
>
|
||||
<template #loading>
|
||||
<q-inner-loading
|
||||
showing
|
||||
color="primary"
|
||||
>
|
||||
<csc-spinner />
|
||||
</q-inner-loading>
|
||||
</template>
|
||||
|
||||
<template #top-left>
|
||||
<q-btn
|
||||
icon="refresh"
|
||||
size="sm"
|
||||
flat
|
||||
@click="refresh"
|
||||
>
|
||||
{{ $t('Refresh') }}
|
||||
</q-btn>
|
||||
</template>
|
||||
<template #body-cell-menu="{ row }">
|
||||
<td>
|
||||
<csc-more-menu>
|
||||
<csc-popup-menu-item
|
||||
icon="fas fa-phone-alt"
|
||||
color="primary"
|
||||
:label="$t('Call back')"
|
||||
@click="homePageCall(row)"
|
||||
/>
|
||||
<csc-popup-menu-item
|
||||
icon="fas fa-pen"
|
||||
color="primary"
|
||||
:label="$t('Edit')"
|
||||
@click="showPhonebookDetails(row)"
|
||||
/>
|
||||
<csc-popup-menu-item
|
||||
icon="delete"
|
||||
color="negative"
|
||||
:label="$t('Delete')"
|
||||
@click="deleteRow(row)"
|
||||
/>
|
||||
</csc-more-menu>
|
||||
</td>
|
||||
</template>
|
||||
</q-table>
|
||||
</csc-page>
|
||||
</csc-page-sticky>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import CscPage from 'components/CscPage'
|
||||
import CscMoreMenu from 'components/CscMoreMenu'
|
||||
import CscPopupMenuItem from 'components/CscPopupMenuItem'
|
||||
import { mapWaitingActions } from 'vue-wait'
|
||||
import CscSpinner from 'components/CscSpinner'
|
||||
import { LIST_DEFAULT_ROWS } from 'src/api/common'
|
||||
import CscPageSticky from 'components/CscPageSticky'
|
||||
export default {
|
||||
name: 'CscPageCustomerPhonebook',
|
||||
components: {
|
||||
CscSpinner,
|
||||
CscPage,
|
||||
CscMoreMenu,
|
||||
CscPopupMenuItem,
|
||||
CscPageSticky
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [],
|
||||
pagination: {
|
||||
sortBy: 'id',
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: LIST_DEFAULT_ROWS,
|
||||
rowsNumber: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('user', [
|
||||
'customerPhonebook'
|
||||
]),
|
||||
...mapGetters('user', [
|
||||
'getCustomerId'
|
||||
]),
|
||||
columns () {
|
||||
return [
|
||||
{
|
||||
name: 'id',
|
||||
required: true,
|
||||
label: this.$t('Id'),
|
||||
align: 'left',
|
||||
field: row => row.id,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
name: 'name',
|
||||
required: true,
|
||||
align: 'left',
|
||||
label: this.$t('Name'),
|
||||
field: row => row.name,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
name: 'number',
|
||||
required: true,
|
||||
align: 'left',
|
||||
label: this.$t('Number'),
|
||||
field: row => row.number,
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
name: 'menu',
|
||||
required: true,
|
||||
align: 'left',
|
||||
label: '',
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
await this.refresh()
|
||||
},
|
||||
methods: {
|
||||
...mapWaitingActions('user', {
|
||||
loadCustomerPhonebook: 'loadCustomerPhonebook',
|
||||
removeCustomerPhonebook: 'removeCustomerPhonebook',
|
||||
ajaxDownloadPhonebookCSV: 'ajaxDownloadPhonebookCSV'
|
||||
}),
|
||||
async refresh () {
|
||||
await this.fetchPaginatedRegistrations({
|
||||
pagination: this.pagination
|
||||
})
|
||||
},
|
||||
async fetchPaginatedRegistrations (props) {
|
||||
const { page, rowsPerPage, sortBy, descending } = props.pagination
|
||||
const count = await this.loadCustomerPhonebook({
|
||||
page,
|
||||
rows: rowsPerPage,
|
||||
order_by: sortBy,
|
||||
order_by_direction: descending ? 'desc' : 'asc'
|
||||
})
|
||||
this.pagination = { ...props.pagination }
|
||||
this.pagination.rowsNumber = count
|
||||
},
|
||||
async showPhonebookDetails (row) {
|
||||
this.$router.push('/user/pbx-configuration/customer-phonebook/' + row.id)
|
||||
},
|
||||
async openAddPhonebook () {
|
||||
this.$router.push('/user/pbx-configuration/customer-phonebook/create')
|
||||
},
|
||||
async openUploadPhonebook () {
|
||||
this.$router.push('/user/pbx-configuration/customer-phonebook/upload')
|
||||
},
|
||||
async homePageCall (row) {
|
||||
let newnumber = ''
|
||||
if (row.number.includes('@')) {
|
||||
newnumber = row.number.split('@')[0]
|
||||
} else {
|
||||
newnumber = row.number
|
||||
}
|
||||
this.$router.push({
|
||||
path: '/user/home',
|
||||
query: { number: newnumber }
|
||||
})
|
||||
},
|
||||
async deleteRow (row) {
|
||||
this.$q.dialog({
|
||||
title: this.$t('Delete customer phonebook'),
|
||||
message: this.$t('You are about to delete this phonebook'),
|
||||
color: 'negative',
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(async data => {
|
||||
await this.removeCustomerPhonebook(row)
|
||||
await this.refresh()
|
||||
})
|
||||
},
|
||||
async downloadCSV () {
|
||||
await this.ajaxDownloadPhonebookCSV(this.getCustomerId)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<csc-page-sticky
|
||||
id="csc-page-customer-phonebook-add"
|
||||
ref="pageSticky"
|
||||
>
|
||||
<template
|
||||
#header
|
||||
>
|
||||
<q-breadcrumbs
|
||||
class="absolute-left q-ml-md text-weight-light"
|
||||
active-color="primary"
|
||||
separator-color="primary"
|
||||
>
|
||||
<q-breadcrumbs-el
|
||||
class="cursor-pointer"
|
||||
to="/user/pbx-configuration/customer-phonebook"
|
||||
:label="$t('Customer Phonebook')"
|
||||
icon="fas fa-user"
|
||||
/>
|
||||
<q-breadcrumbs-el
|
||||
:label="$t('Add')"
|
||||
/>
|
||||
</q-breadcrumbs>
|
||||
</template>
|
||||
<q-item
|
||||
class="col col-xs-12"
|
||||
>
|
||||
<q-list
|
||||
class="col col-xs-12"
|
||||
side
|
||||
top
|
||||
no-wrap
|
||||
>
|
||||
<q-input
|
||||
v-model="formData.name"
|
||||
:label="$t('Name')"
|
||||
:error="v$.formData.name.$errors.length > 0"
|
||||
:error-message="nameErrorMessage"
|
||||
@update:model-value="v$.formData.name.$touch()"
|
||||
/>
|
||||
<q-input
|
||||
v-model="formData.number"
|
||||
:label="$t('Number')"
|
||||
:error="numberError"
|
||||
:error-message="numberErrorMessage"
|
||||
@update:model-value="v$.formData.number.$touch()"
|
||||
/>
|
||||
</q-list>
|
||||
</q-item>
|
||||
<div class="text-center">
|
||||
<q-btn
|
||||
icon="clear"
|
||||
color="white"
|
||||
flat
|
||||
:label="$t('Cancel')"
|
||||
@click="cancel"
|
||||
/>
|
||||
<q-btn
|
||||
icon="check"
|
||||
:label="$t('Confirm')"
|
||||
unelevated
|
||||
text-color="primary"
|
||||
@click="confirm"
|
||||
/>
|
||||
</div>
|
||||
</csc-page-sticky>
|
||||
</template>
|
||||
<script>
|
||||
import { required } from 'vuelidate/lib/validators'
|
||||
import { mapWaitingActions } from 'vue-wait'
|
||||
import CscPageSticky from 'components/CscPageSticky'
|
||||
import useValidate from '@vuelidate/core'
|
||||
export default {
|
||||
name: 'CscPageCustomerPhonebookAdd',
|
||||
components: {
|
||||
CscPageSticky
|
||||
},
|
||||
validations: {
|
||||
formData: {
|
||||
name: {
|
||||
required
|
||||
},
|
||||
number: {
|
||||
required
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
formData: this.getDefaultFormData(),
|
||||
v$: useValidate(),
|
||||
numberErrorMessage: '',
|
||||
numberError: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nameErrorMessage () {
|
||||
const errorsTab = this.v$.formData.name.$errors
|
||||
if (errorsTab && errorsTab.length > 0 && errorsTab[0].$validator === 'required') {
|
||||
return this.$t('{field} is required', {
|
||||
field: this.$t('Name')
|
||||
})
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapWaitingActions('user', {
|
||||
createPhonebookCustomer: 'createPhonebookCustomer'
|
||||
}),
|
||||
getDefaultFormData () {
|
||||
return {
|
||||
name: '',
|
||||
number: ''
|
||||
}
|
||||
},
|
||||
cancel () {
|
||||
this.$router.push('/user/pbx-configuration/customer-phonebook/')
|
||||
this.$emit('cancel')
|
||||
},
|
||||
async confirm () {
|
||||
try {
|
||||
await this.createPhonebookCustomer(this.formData)
|
||||
this.$router.push('/user/pbx-configuration/customer-phonebook/')
|
||||
} catch (error) {
|
||||
if (error.response && error.response.status === 422) {
|
||||
this.numberError = true
|
||||
this.numberErrorMessage = this.$t('This number is already in use.')
|
||||
} else {
|
||||
console.error('An error occurred:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<csc-page-sticky
|
||||
id="csc-page-customer-phonebook-details"
|
||||
ref="pageSticky"
|
||||
>
|
||||
<template
|
||||
#header
|
||||
>
|
||||
<q-breadcrumbs
|
||||
class="absolute-left q-ml-md text-weight-light"
|
||||
active-color="primary"
|
||||
separator-color="primary"
|
||||
>
|
||||
<q-breadcrumbs-el
|
||||
class="cursor-pointer"
|
||||
to="/user/pbx-configuration/customer-phonebook"
|
||||
:label="$t('Customer Phonebook')"
|
||||
icon="fas fa-user"
|
||||
/>
|
||||
<q-breadcrumbs-el
|
||||
:label="name"
|
||||
/>
|
||||
</q-breadcrumbs>
|
||||
</template>
|
||||
<q-item
|
||||
class="col col-xs-12"
|
||||
>
|
||||
<q-list
|
||||
class="col col-xs-12"
|
||||
side
|
||||
top
|
||||
no-wrap
|
||||
>
|
||||
<q-input
|
||||
v-model="formData.name"
|
||||
:label="$t('Name')"
|
||||
@update:model-value="v$.formData.name.$touch()"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.number"
|
||||
:label="$t('Number')"
|
||||
:error="numberError"
|
||||
:error-message="numberErrorMessage"
|
||||
@update:model-value="v$.formData.number.$touch()"
|
||||
/>
|
||||
</q-list>
|
||||
</q-item>
|
||||
<div class="text-center">
|
||||
<q-btn
|
||||
icon="clear"
|
||||
color="white"
|
||||
flat
|
||||
:label="$t('Cancel')"
|
||||
@click="cancel"
|
||||
/>
|
||||
<q-btn
|
||||
icon="check"
|
||||
:label="$t('Confirm')"
|
||||
unelevated
|
||||
text-color="primary"
|
||||
@click="confirm"
|
||||
/>
|
||||
</div>
|
||||
</csc-page-sticky>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapWaitingActions } from 'vue-wait'
|
||||
import { required } from 'vuelidate/lib/validators'
|
||||
import CscPageSticky from 'components/CscPageSticky'
|
||||
import useValidate from '@vuelidate/core'
|
||||
export default {
|
||||
name: 'CscPageCustomerPhonebookDetails',
|
||||
components: {
|
||||
CscPageSticky
|
||||
},
|
||||
validations: {
|
||||
formData: {
|
||||
name: {
|
||||
required
|
||||
},
|
||||
number: {
|
||||
required
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
id: this.$route.params.id,
|
||||
formData: this.getDefaultFormData(),
|
||||
v$: useValidate(),
|
||||
numberErrorMessage: '',
|
||||
numberError: false
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
await this.getPhonebook(this.id)
|
||||
},
|
||||
methods: {
|
||||
...mapWaitingActions('user', {
|
||||
getPhonebookCustomerDetails: 'getPhonebookCustomerDetails',
|
||||
getValueNameCustomer: 'getValueNameCustomer',
|
||||
getValueNumberCustomer: 'getValueNumberCustomer'
|
||||
}),
|
||||
async getPhonebook (id) {
|
||||
const response = await this.getPhonebookCustomerDetails(id)
|
||||
this.formData.name = response.data.name
|
||||
this.formData.number = response.data.number
|
||||
},
|
||||
getDefaultFormData () {
|
||||
return {
|
||||
name: '',
|
||||
number: ''
|
||||
}
|
||||
},
|
||||
cancel () {
|
||||
this.$router.push('/user/pbx-configuration/customer-phonebook/')
|
||||
this.$emit('cancel')
|
||||
},
|
||||
async changeValueName () {
|
||||
await this.getValueNameCustomer({
|
||||
phonebookId: this.id,
|
||||
name: this.formData.name
|
||||
})
|
||||
},
|
||||
async changeValueNumber () {
|
||||
await this.getValueNumberCustomer({
|
||||
phonebookId: this.id,
|
||||
number: this.formData.number
|
||||
})
|
||||
},
|
||||
async confirm () {
|
||||
try {
|
||||
await this.changeValueNumber()
|
||||
await this.changeValueName()
|
||||
await this.$router.push('/user/pbx-configuration/customer-phonebook/')
|
||||
} catch (error) {
|
||||
this.numberError = true
|
||||
this.numberErrorMessage = this.$t('This number is already in use.')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<csc-page-sticky
|
||||
id="csc-page-customer-phonebook-add"
|
||||
ref="pageSticky"
|
||||
>
|
||||
<template
|
||||
#header
|
||||
>
|
||||
<q-breadcrumbs
|
||||
class="absolute-left q-ml-md text-weight-light"
|
||||
active-color="primary"
|
||||
separator-color="primary"
|
||||
>
|
||||
<q-breadcrumbs-el
|
||||
class="cursor-pointer"
|
||||
to="/user/pbx-configuration/customer-phonebook"
|
||||
:label="$t('Upload CSV')"
|
||||
icon="fas fa-upload"
|
||||
/>
|
||||
</q-breadcrumbs>
|
||||
</template>
|
||||
<q-item
|
||||
class="col col-xs-12"
|
||||
>
|
||||
<q-list
|
||||
class="col col-xs-12"
|
||||
side
|
||||
top
|
||||
no-wrap
|
||||
>
|
||||
<csc-input-file
|
||||
accept=".csv"
|
||||
data-cy="sendfax-fileinput"
|
||||
@file-selected="toggleFileSelected"
|
||||
/>
|
||||
<br>
|
||||
<q-toggle
|
||||
v-model="formData.purge_existing"
|
||||
dense
|
||||
:label="$t('Purge existing')"
|
||||
data-cy="phonebook-purge"
|
||||
:disable="loading"
|
||||
/>
|
||||
</q-list>
|
||||
</q-item>
|
||||
<div class="text-center">
|
||||
<q-btn
|
||||
icon="clear"
|
||||
color="white"
|
||||
flat
|
||||
:label="$t('Cancel')"
|
||||
@click="cancel"
|
||||
/>
|
||||
<q-btn
|
||||
icon="check"
|
||||
:label="$t('Confirm')"
|
||||
unelevated
|
||||
text-color="primary"
|
||||
@click="confirm"
|
||||
/>
|
||||
</div>
|
||||
</csc-page-sticky>
|
||||
</template>
|
||||
<script>
|
||||
import { required } from 'vuelidate/lib/validators'
|
||||
import { mapWaitingActions } from 'vue-wait'
|
||||
import CscPageSticky from 'components/CscPageSticky'
|
||||
import useValidate from '@vuelidate/core'
|
||||
import CscInputFile from 'components/form/CscInputFile'
|
||||
import { mapGetters } from 'vuex'
|
||||
export default {
|
||||
name: 'CscPageCustomerPhonebookUpload',
|
||||
components: {
|
||||
CscPageSticky,
|
||||
CscInputFile
|
||||
},
|
||||
validations: {
|
||||
formData: {
|
||||
file: {
|
||||
required
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
formData: this.getDefaultFormData(),
|
||||
v$: useValidate()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapWaitingActions('user', {
|
||||
uploadPhonebookCustomer: 'uploadPhonebookCustomer'
|
||||
}),
|
||||
...mapGetters('user', [
|
||||
'getCustomerId'
|
||||
]),
|
||||
getDefaultFormData () {
|
||||
return {
|
||||
file: null,
|
||||
purge_existing: false,
|
||||
customer_id: this.getCustomerId()
|
||||
}
|
||||
},
|
||||
cancel () {
|
||||
this.$router.push('/user/pbx-configuration/customer-phonebook/')
|
||||
this.$emit('cancel')
|
||||
},
|
||||
async confirm () {
|
||||
await this.uploadPhonebookCustomer(this.formData)
|
||||
await this.$router.push('/user/pbx-configuration/customer-phonebook/')
|
||||
},
|
||||
toggleFileSelected (value) {
|
||||
this.formData.file = value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue