What has been done: - TT#40529, Implement API method for assigning a destination to a specific speed dial slot - TT#40630, Implement API method for fetching available slots - TT#40530, Implement reload of list after new assignment has been created successfully - TT#40527, Implement UI form and buttons (destination input field, slot selection field, and add button) - TT#40528, Implement custom phone number input field with automated formatting - TT#40531, Implement toast for successfully assigned destination - TT#40538, Implement unit test for creation of selections options for speed dial slot selection Change-Id: Ibe4937a097be0a89e677916a189a0e3fe62826dfchanges/34/22634/9
raxelsen
7 years ago
parent
6c303ccc55
commit
9823d6cc45
@ -0,0 +1,52 @@
|
||||
|
||||
<template>
|
||||
<q-input
|
||||
clearable
|
||||
type="text"
|
||||
:float-label="label"
|
||||
:value="destination"
|
||||
@input="inputDestination"
|
||||
@keyup.enter="submit"
|
||||
@keypress.space.prevent
|
||||
@keydown.space.prevent
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
normalizeNumber,
|
||||
rawNumber
|
||||
} from '../../filters/number-format'
|
||||
import {
|
||||
QInput,
|
||||
Platform
|
||||
} from 'quasar-framework'
|
||||
|
||||
export default {
|
||||
name: 'csc-destination-input',
|
||||
props: {
|
||||
loading: Boolean,
|
||||
label: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
destination: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
QInput
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$emit('submit');
|
||||
},
|
||||
inputDestination(value) {
|
||||
this.destination = normalizeNumber(value, Platform.is.mobile);
|
||||
this.$emit('input', rawNumber(this.destination));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
</style>
|
||||
@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div class="row justify-center">
|
||||
<div v-if="formEnabled" class="col col-md-6 col-sm-12">
|
||||
<q-field>
|
||||
<q-select
|
||||
:disabled="loading"
|
||||
:readonly="loading"
|
||||
v-model="slot"
|
||||
:float-label="$t('speedDial.slot')"
|
||||
:options="slotOptions"
|
||||
radio
|
||||
/>
|
||||
</q-field>
|
||||
<q-field>
|
||||
<csc-destination-input
|
||||
:loading="loading"
|
||||
:label="$t('speedDial.destination')"
|
||||
v-model="destination"
|
||||
@submit="save()"
|
||||
/>
|
||||
</q-field>
|
||||
<div
|
||||
class="row justify-center form-actions"
|
||||
>
|
||||
<q-btn
|
||||
v-if="!loading"
|
||||
flat
|
||||
color="secondary"
|
||||
icon="clear"
|
||||
@click="cancel()"
|
||||
>
|
||||
{{ $t('buttons.cancel') }}
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="!loading"
|
||||
flat
|
||||
color="primary"
|
||||
icon="done"
|
||||
@click="save()"
|
||||
>
|
||||
{{ $t('buttons.save') }}
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="row justify-center"
|
||||
>
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="add"
|
||||
flat
|
||||
@click="enableForm()"
|
||||
>
|
||||
{{ $t('speedDial.addSpeedDial') }}
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-inner-loading
|
||||
v-show="loading"
|
||||
:visible="loading"
|
||||
>
|
||||
<q-spinner-mat
|
||||
size="60px"
|
||||
color="primary"
|
||||
/>
|
||||
</q-inner-loading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'quasar-extras/animate/bounceInRight.css'
|
||||
import 'quasar-extras/animate/bounceOutRight.css'
|
||||
import CscDestinationInput from '../../form/CscDestinationInput'
|
||||
import {
|
||||
QCard,
|
||||
QCardTitle,
|
||||
QCardMain,
|
||||
QCardActions,
|
||||
QCardSeparator,
|
||||
QBtn,
|
||||
QInnerLoading,
|
||||
QSpinnerMat,
|
||||
QField,
|
||||
QInput,
|
||||
QSelect,
|
||||
QIcon,
|
||||
Alert
|
||||
} from 'quasar-framework'
|
||||
|
||||
export default {
|
||||
name: 'csc-speed-dial-add-form',
|
||||
props: [
|
||||
'slotOptions',
|
||||
'loading'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
formEnabled: false,
|
||||
destination: '',
|
||||
slot: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
CscDestinationInput,
|
||||
QCard,
|
||||
QCardTitle,
|
||||
QCardMain,
|
||||
QCardActions,
|
||||
QCardSeparator,
|
||||
QBtn,
|
||||
QInnerLoading,
|
||||
QSpinnerMat,
|
||||
QField,
|
||||
QInput,
|
||||
QSelect,
|
||||
QIcon
|
||||
},
|
||||
methods: {
|
||||
destinationInput(input) {
|
||||
this.destination = input;
|
||||
},
|
||||
enableForm(){
|
||||
if (this.slotOptions.length > 0) {
|
||||
this.reset();
|
||||
this.formEnabled = true;
|
||||
}
|
||||
else {
|
||||
Alert.create({
|
||||
enter: 'bounceInRight',
|
||||
leave: 'bounceOutRight',
|
||||
position: 'top-center',
|
||||
html: this.$t('speedDial.addNoSlotsDialogText'),
|
||||
icon: 'warning',
|
||||
dismissible: true
|
||||
});
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
this.formEnabled = false;
|
||||
},
|
||||
save() {
|
||||
this.$emit('save', {
|
||||
destination: this.destination,
|
||||
slot: this.slot
|
||||
});
|
||||
},
|
||||
reset() {
|
||||
this.destination = '';
|
||||
this.slot = this.slotOptions[0].value ? this.slotOptions[0].value : '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/quasar.variables.styl';
|
||||
.form-actions
|
||||
margin-top 16px
|
||||
margin-bottom 8px
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
import SpeedDialModule from '../../src/store/speed-dial';
|
||||
import { assert } from 'chai';
|
||||
|
||||
describe('SpeedDial', function(){
|
||||
|
||||
it('should load all assigned speed dial slots', function(){
|
||||
let state = {
|
||||
assignedSlots: []
|
||||
};
|
||||
let data = [
|
||||
{
|
||||
destination: "sip:111111@192.168.178.23",
|
||||
slot: "*1"
|
||||
},
|
||||
{
|
||||
destination: "sip:333333@192.168.178.23",
|
||||
slot: "*3"
|
||||
}
|
||||
];
|
||||
SpeedDialModule.mutations.speedDialSucceeded(state, data);
|
||||
assert.deepEqual(state.assignedSlots, data);
|
||||
});
|
||||
|
||||
});
|
||||
Loading…
Reference in new issue