nouhaila
2 years ago
committed by
Nouhaila Idrissi-Zouggari
parent
a72696e878
commit
37a807dd0f
@ -0,0 +1,193 @@
|
||||
|
||||
<template>
|
||||
<csc-page-sticky
|
||||
id="csc-page-subscriber-phonebook"
|
||||
>
|
||||
<template
|
||||
v-slot:header
|
||||
>
|
||||
<q-btn
|
||||
icon="add"
|
||||
color="primary"
|
||||
flat
|
||||
:label="$t('Add Phonebook')"
|
||||
@click="openAddPhonebook()"
|
||||
/>
|
||||
</template>
|
||||
<csc-page
|
||||
class="q-pa-lg"
|
||||
>
|
||||
<q-table
|
||||
class="no-shadow"
|
||||
:columns="columns"
|
||||
:data="subscriberPhonebook"
|
||||
:loading="$wait.is('loadSubscriberPhonebook')"
|
||||
row-key="id"
|
||||
:pagination.sync="pagination"
|
||||
@request="fetchPaginatedRegistrations"
|
||||
>
|
||||
<template v-slot:loading>
|
||||
<q-inner-loading
|
||||
showing
|
||||
color="primary"
|
||||
>
|
||||
<csc-spinner />
|
||||
</q-inner-loading>
|
||||
</template>
|
||||
|
||||
<template v-slot:top-left>
|
||||
<q-btn
|
||||
icon="refresh"
|
||||
size="sm"
|
||||
flat
|
||||
@click="refresh"
|
||||
>
|
||||
{{ $t('Refresh') }}
|
||||
</q-btn>
|
||||
</template>
|
||||
<template v-slot:body-cell-shared="{ row }">
|
||||
<td>
|
||||
<q-toggle
|
||||
:value=row.shared
|
||||
/>
|
||||
</td>
|
||||
</template>
|
||||
<template v-slot: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>
|
||||
<csc-popup-menu-item
|
||||
icon="fas fa-pen"
|
||||
color="primary"
|
||||
:label="$t('Edit')"
|
||||
@click="showPhonebookDetails(row)">
|
||||
</csc-popup-menu-item>
|
||||
</csc-more-menu>
|
||||
</td>
|
||||
</template>
|
||||
</q-table>
|
||||
</csc-page>
|
||||
</csc-page-sticky>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } 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: 'CscPageSubscriberPhonebook',
|
||||
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', [
|
||||
'subscriberPhonebook'
|
||||
]),
|
||||
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: 'shared',
|
||||
required: true,
|
||||
align: 'left',
|
||||
label: this.$t('Shared'),
|
||||
field: row => row.shared,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'menu',
|
||||
required: true,
|
||||
align: 'left',
|
||||
label: '',
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
await this.refresh()
|
||||
},
|
||||
methods: {
|
||||
...mapWaitingActions('user', {
|
||||
loadSubscriberPhonebook: 'loadSubscriberPhonebook'
|
||||
}),
|
||||
async refresh () {
|
||||
await this.fetchPaginatedRegistrations({
|
||||
pagination: this.pagination
|
||||
})
|
||||
},
|
||||
async fetchPaginatedRegistrations (props) {
|
||||
const { page, rowsPerPage, sortBy, descending } = props.pagination
|
||||
const count = await this.loadSubscriberPhonebook({
|
||||
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/subscriber-phonebook/'+ row.id)
|
||||
},
|
||||
async openAddPhonebook () {
|
||||
this.$router.push('/user/subscriber-phonebook/create')
|
||||
},
|
||||
async homePageCall (row) {
|
||||
this.$router.push({
|
||||
path: '/user/home',
|
||||
query: { number: row.number } })
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<csc-page-sticky
|
||||
id="csc-page-subscriber-phonebook-add"
|
||||
ref="pageSticky"
|
||||
>
|
||||
<template
|
||||
v-slot: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/subscriber-phonebook"
|
||||
:label="$t('Subscriber 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.$error"
|
||||
:error-message="nameErrorMessage"
|
||||
@input="$v.formData.name.$touch"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formData.number"
|
||||
:label="$t('Number')"
|
||||
:error="$v.formData.number.$error"
|
||||
:error-message="numberErrorMessage"
|
||||
@input="$v.formData.number.$touch"
|
||||
/>
|
||||
|
||||
<q-toggle
|
||||
:label="$t('Shared')"
|
||||
v-model="formData.shared"
|
||||
@input="$v.formData.shared"
|
||||
/>
|
||||
</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'
|
||||
export default {
|
||||
name: 'CscPageSubscriberPhonebookAdd',
|
||||
components: {
|
||||
CscPageSticky,
|
||||
},
|
||||
validations: {
|
||||
formData: {
|
||||
name: {
|
||||
required
|
||||
},
|
||||
number: {
|
||||
required
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
formData: this.getDefaultFormData()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
nameErrorMessage () {
|
||||
if (!this.$v.formData.name.required) {
|
||||
return this.$t('{field} is required', {
|
||||
field: this.$t('Name')
|
||||
})
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
numberErrorMessage () {
|
||||
if (!this.$v.formData.number.required) {
|
||||
return this.$t('{field} is required', {
|
||||
field: this.$t('Number')
|
||||
})
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapWaitingActions('user', {
|
||||
createPhonebookSubscriber: 'createPhonebookSubscriber',
|
||||
}),
|
||||
getDefaultFormData () {
|
||||
return {
|
||||
name: '',
|
||||
number: '',
|
||||
shared: false
|
||||
}
|
||||
},
|
||||
cancel () {
|
||||
this.$router.push('/user/subscriber-phonebook/')
|
||||
this.$emit('cancel')
|
||||
},
|
||||
async confirm () {
|
||||
await this.createPhonebookSubscriber(this.formData)
|
||||
await this.$router.push('/user/subscriber-phonebook/')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<csc-page-sticky
|
||||
id="csc-page-subscriber-phonebook-details"
|
||||
ref="pageSticky"
|
||||
>
|
||||
<template
|
||||
v-slot: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/subscriber-phonebook"
|
||||
:label="$t('Subscriber 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
|
||||
:label="$t('Name')"
|
||||
v-model="name"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
:required="true"
|
||||
:label="$t('Number')"
|
||||
v-model="number"
|
||||
/>
|
||||
|
||||
<q-toggle
|
||||
:label="$t('Shared')"
|
||||
v-model=shared
|
||||
/>
|
||||
</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 CscPageSticky from 'components/CscPageSticky'
|
||||
export default {
|
||||
name: 'CscPageSubscriberPhonebookDetails',
|
||||
components: {
|
||||
CscPageSticky,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
id: this.$route.params.id,
|
||||
name: '',
|
||||
number: '',
|
||||
shared: false,
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
await this.getPhonebook(this.id);
|
||||
},
|
||||
methods: {
|
||||
...mapWaitingActions('user', {
|
||||
getPhonebookDetails: 'getPhonebookDetails',
|
||||
getValueShared: 'getValueShared',
|
||||
getValueName: 'getValueName',
|
||||
getValueNumber: 'getValueNumber'
|
||||
}),
|
||||
async getPhonebook (id) {
|
||||
const response = await this.getPhonebookDetails(id)
|
||||
this.name = response.body.name
|
||||
this.number = response.body.number
|
||||
this.shared = response.body.shared;
|
||||
},
|
||||
cancel () {
|
||||
this.$router.push('/user/subscriber-phonebook/')
|
||||
this.$emit('cancel')
|
||||
},
|
||||
async changeValueName() {
|
||||
await this.getValueName( {
|
||||
phonebookId: this.id,
|
||||
name: this.name
|
||||
})
|
||||
},
|
||||
changeValueShared() {
|
||||
this.getValueShared( {
|
||||
phonebookId: this.id,
|
||||
shared: this.shared
|
||||
})
|
||||
},
|
||||
changeValueNumber() {
|
||||
this.getValueNumber( {
|
||||
phonebookId: this.id,
|
||||
number: this.number
|
||||
})
|
||||
},
|
||||
async confirm () {
|
||||
await this.changeValueName()
|
||||
await this.changeValueShared()
|
||||
await this.changeValueNumber()
|
||||
await this.$router.push('/user/subscriber-phonebook/')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in new issue