Change-Id: Iec58f7aba74658ef8d65f1022b66f41b98bd56a2changes/34/40134/2
Carlo Venusino
5 years ago
parent
79110246e1
commit
0d7427f907
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="enabled"
|
||||
class="csc-form"
|
||||
>
|
||||
<csc-new-call-forward-input-text
|
||||
:label="$t('pages.newCallForward.sourcesetName')"
|
||||
v-model="name"
|
||||
@submit="save"
|
||||
@error="errorName"
|
||||
/>
|
||||
|
||||
<csc-new-call-forward-input
|
||||
:label="$t('callBlocking.number')"
|
||||
v-model="number"
|
||||
@submit="save"
|
||||
@error="errorNumber"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="csc-form-actions row justify-center"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
color="default"
|
||||
icon="clear"
|
||||
@mousedown.native="cancel()"
|
||||
>
|
||||
{{ $t('buttons.cancel') }}
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="!loading"
|
||||
flat
|
||||
color="primary"
|
||||
icon="done"
|
||||
@click="save(); close()"
|
||||
:disable="saveDisabled"
|
||||
>
|
||||
{{ $t('buttons.save') }}
|
||||
</q-btn>
|
||||
<div
|
||||
v-if="loading"
|
||||
class="csc-form-actions-spinner"
|
||||
>
|
||||
<csc-spinner />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters,
|
||||
} from 'vuex'
|
||||
import CscNewCallForwardInput from './CscNewCallForwardInput'
|
||||
import CscNewCallForwardInputText from './CscNewCallForwardInputText'
|
||||
import CscSpinner from '../../CscSpinner'
|
||||
import {
|
||||
showGlobalError
|
||||
} from '../../../helpers/ui'
|
||||
import {
|
||||
maxLength
|
||||
} from 'vuelidate/lib/validators'
|
||||
import {
|
||||
QField,
|
||||
QInput,
|
||||
QBtn
|
||||
} from 'quasar-framework'
|
||||
|
||||
export default {
|
||||
name: 'csc-new-call-forward-add-sourceset-form',
|
||||
components: {
|
||||
CscNewCallForwardInput,
|
||||
CscNewCallForwardInputText,
|
||||
CscSpinner,
|
||||
QField,
|
||||
QInput,
|
||||
QBtn
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
mode: 'create',
|
||||
loading: false,
|
||||
enabled: false,
|
||||
number: '',
|
||||
name: '',
|
||||
nameError: false,
|
||||
numberError: false,
|
||||
destinationIndex: null
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'groupName',
|
||||
'groupId'
|
||||
],
|
||||
validations: {
|
||||
number: {
|
||||
minLength: 1,
|
||||
maxLength: maxLength(64)
|
||||
},
|
||||
name: {
|
||||
minLength: 1
|
||||
}
|
||||
},
|
||||
updated(){
|
||||
if(Number.isInteger(this.index)){
|
||||
this.destinationIndex = this.index;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('newCallForward', [
|
||||
'destinationInCreation'
|
||||
]),
|
||||
saveDisabled() {
|
||||
return this.number.length < 1 || this.name.length < 1 || this.numberError|| this.nameError || this.disable || this.loading;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async save() {
|
||||
let sourceSetId;
|
||||
const forwardGroupId = this.groupId;
|
||||
const forwardGroupName = this.groupName;
|
||||
const forwardGroup = await this.$store.dispatch('newCallForward/getForwardGroupById', forwardGroupId);
|
||||
if (this.numberError || this.nameError || this.saveDisabled) {
|
||||
showGlobalError(this.$t('validationErrors.generic'));
|
||||
}
|
||||
switch(this.mode){
|
||||
case 'create':
|
||||
// 1. create sourceset adding name , source and mode: "whitelist"
|
||||
sourceSetId = await this.$store.dispatch('newCallForward/createSourceSet', {
|
||||
name: this.name,
|
||||
source: this.number
|
||||
});
|
||||
await this.$store.dispatch('newCallForward/addSourcesetToGroup', {
|
||||
name: forwardGroupName,
|
||||
id: forwardGroupId,
|
||||
sourceSetId: sourceSetId
|
||||
});
|
||||
|
||||
break;
|
||||
case 'edit':
|
||||
break;
|
||||
}
|
||||
console.log(forwardGroupId, forwardGroupName, forwardGroup)
|
||||
},
|
||||
cancel() {
|
||||
this.number = '';
|
||||
this.enabled = false;
|
||||
},
|
||||
add() {
|
||||
this.number = '';
|
||||
this.enabled = true;
|
||||
},
|
||||
close() {
|
||||
this.enabled = false;
|
||||
},
|
||||
reset() {
|
||||
this.cancel();
|
||||
},
|
||||
errorName(state) {
|
||||
this.nameError = state;
|
||||
},
|
||||
errorNumber(state) {
|
||||
this.numberError = state;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/app.common.styl'
|
||||
</style>
|
||||
@ -0,0 +1,111 @@
|
||||
|
||||
<template>
|
||||
<q-field
|
||||
:error-label="errorMessage"
|
||||
>
|
||||
<q-input
|
||||
dark
|
||||
clearable
|
||||
type="text"
|
||||
:float-label="label"
|
||||
v-model="inputValue"
|
||||
@keyup.enter="submit"
|
||||
@keypress.space.prevent
|
||||
@keydown.space.prevent
|
||||
@keyup.space.prevent
|
||||
@input="input"
|
||||
@blur="blur"
|
||||
:error="$v.inputValue.$error"
|
||||
:before="beforeButtons"
|
||||
/>
|
||||
</q-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
QField,
|
||||
QInput
|
||||
} from 'quasar-framework'
|
||||
import {
|
||||
userInfoAndEmpty
|
||||
} from '../../../helpers/validation'
|
||||
import {
|
||||
maxLength,
|
||||
required
|
||||
} from 'vuelidate/lib/validators'
|
||||
|
||||
export default {
|
||||
name: 'csc-new-call-forward-input-text',
|
||||
props: {
|
||||
label: String,
|
||||
prefilled: String,
|
||||
before: Array
|
||||
},
|
||||
mounted(){
|
||||
if(this.prefilled){
|
||||
this.inputValue = this.prefilled === " " ? "" : this.prefilled;
|
||||
}
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
inputValue: '',
|
||||
error: ''
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
inputValue: {
|
||||
userInfoAndEmpty,
|
||||
maxLength: maxLength(64),
|
||||
required
|
||||
}
|
||||
},
|
||||
components: {
|
||||
QField,
|
||||
QInput
|
||||
},
|
||||
computed: {
|
||||
errorMessage() {
|
||||
if (!this.$v.inputValue.required) {
|
||||
return this.$t('validationErrors.fieldRequired', {
|
||||
field: this.label
|
||||
});
|
||||
}
|
||||
else if (!this.$v.inputValue.maxLength) {
|
||||
return this.$t('validationErrors.maxLength', {
|
||||
field: this.label,
|
||||
maxLength: this.$v.inputValue.$params.maxLength.max
|
||||
});
|
||||
}
|
||||
else if (!this.$v.inputValue.userInfoAndEmpty) {
|
||||
return this.$t('validationErrors.inputValidNumber');
|
||||
}
|
||||
},
|
||||
beforeButtons() {
|
||||
return this.before ? this.before : [];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$emit('submit');
|
||||
},
|
||||
input() {
|
||||
this.$v.inputValue.$touch();
|
||||
this.error = this.$v.inputValue.$error;
|
||||
this.$emit('input', this.inputValue);
|
||||
},
|
||||
blur() {
|
||||
this.$v.inputValue.$touch();
|
||||
this.error = this.$v.inputValue.$error;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
error(state) {
|
||||
this.$emit('error', state);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
</style>
|
||||
Loading…
Reference in new issue