TT#81171 CF: Can see the list of sources by clicking the highlighted part in the title "call from ..."
Change-Id: I426498229368c5861cfd337943549a5034bb4d3echanges/12/40212/2
Carlo Venusino
5 years ago
parent
7cf5a51dad
commit
7e9388242e
@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="enabled"
|
||||
class="csc-form"
|
||||
>
|
||||
<div
|
||||
class="csc-cf-row row"
|
||||
v-for="(source, item) in sources"
|
||||
:key="source + '_' + item"
|
||||
>
|
||||
<csc-new-call-forward-source
|
||||
:groupId="groupId"
|
||||
:groupName="groupName"
|
||||
:source="source.source"
|
||||
:sourceSetName="sourceSetName"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="csc-cf-row row"
|
||||
>
|
||||
<csc-new-call-forward-input
|
||||
:label="$t('callBlocking.number')"
|
||||
v-model="number"
|
||||
@submit="save"
|
||||
@error="errorNumber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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 CscNewCallForwardSource from './CscNewCallForwardSource'
|
||||
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-edit-sources',
|
||||
components: {
|
||||
CscNewCallForwardInput,
|
||||
CscNewCallForwardSource,
|
||||
CscSpinner,
|
||||
QField,
|
||||
QInput,
|
||||
QBtn
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
mode: 'create',
|
||||
loading: false,
|
||||
enabled: false,
|
||||
number: '',
|
||||
numberError: false,
|
||||
destinationIndex: null
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'groupName',
|
||||
'groupId',
|
||||
'sourceSetName',
|
||||
'sources'
|
||||
],
|
||||
validations: {
|
||||
number: {
|
||||
minLength: 1,
|
||||
maxLength: maxLength(64)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('newCallForward', [
|
||||
'destinationInCreation'
|
||||
]),
|
||||
saveDisabled() {
|
||||
return this.number.length < 1 || this.numberError || this.disable || this.loading;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async save() {
|
||||
//const forwardGroupId = this.groupId;
|
||||
// const forwardGroupName = this.groupName;
|
||||
//const forwardGroup = await this.$store.dispatch('newCallForward/getForwardGroupById', forwardGroupId);
|
||||
|
||||
if (this.numberError || this.saveDisabled) {
|
||||
showGlobalError(this.$t('validationErrors.generic'));
|
||||
}
|
||||
// TODO save source
|
||||
},
|
||||
cancel() {
|
||||
this.number = '';
|
||||
this.enabled = false;
|
||||
},
|
||||
add() {
|
||||
this.number = '';
|
||||
this.enabled = true;
|
||||
},
|
||||
close() {
|
||||
this.enabled = false;
|
||||
},
|
||||
reset() {
|
||||
this.cancel();
|
||||
},
|
||||
errorNumber(state) {
|
||||
this.numberError = state;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/app.common.styl'
|
||||
</style>
|
||||
@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div
|
||||
class="row csc-cf-source-cont"
|
||||
v-bind:class="{ 'csc-cf-removed-source': removeInProgress }"
|
||||
>
|
||||
<div class="col text-left col-xs-12 col-md-12 ">
|
||||
|
||||
<div
|
||||
class='csc-cf-sourceset-name'
|
||||
>
|
||||
{{ sourceSetName }}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col text-left col-xs-12 col-md-6 ">
|
||||
|
||||
<div
|
||||
class='csc-cf-source'
|
||||
>
|
||||
{{ source }}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col col-xs-12 col-md-6 csc-cf-source-actions">
|
||||
<q-icon
|
||||
name="delete"
|
||||
color="negative"
|
||||
size="24px"
|
||||
@click="showConfirmDialog"
|
||||
/>
|
||||
<csc-confirm-dialog
|
||||
ref="confirmDialog"
|
||||
title-icon="delete"
|
||||
:title="$t('pages.newCallForward.cancelDialogTitle', {sourceSetName: this.sourceSetName})"
|
||||
:message="$t('pages.newCallForward.cancelDialogText', {sourceSetName: this.sourceSetName, source: this.source})"
|
||||
@confirm="confirmDeleteSource"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters,
|
||||
} from 'vuex'
|
||||
import {
|
||||
QIcon,
|
||||
QBtn,
|
||||
QPopover,
|
||||
QSlider,
|
||||
QList,
|
||||
QItem,
|
||||
QItemMain,
|
||||
QSpinnerDots
|
||||
} from 'quasar-framework'
|
||||
import CscConfirmDialog from "../../CscConfirmationDialog";
|
||||
export default {
|
||||
name: 'csc-new-call-forward-source',
|
||||
components: {
|
||||
QIcon,
|
||||
QBtn,
|
||||
QPopover,
|
||||
QSlider,
|
||||
QList,
|
||||
QItem,
|
||||
QItemMain,
|
||||
QSpinnerDots,
|
||||
CscConfirmDialog
|
||||
},
|
||||
props: [
|
||||
'groupId',
|
||||
'groupName',
|
||||
'source',
|
||||
'sourceSetName'
|
||||
],
|
||||
// mounted(){
|
||||
// this.updateValues(this.destination)
|
||||
// },
|
||||
data(){
|
||||
return {
|
||||
removeInProgress: false,
|
||||
toggleNumberForm: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('newCallForward', []),
|
||||
},
|
||||
methods: {
|
||||
showConfirmDialog(){
|
||||
this.$refs.confirmDialog.open();
|
||||
},
|
||||
async confirmDeleteSource(){
|
||||
this.removeInProgress = true;
|
||||
await this.$store.dispatch('newCallForward/removeSourceFromSourceset', {
|
||||
source: this.source,
|
||||
forwardGroupId: this.groupId,
|
||||
sourceSetId: this.sourceSetId
|
||||
});
|
||||
this.removeInProgress = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" rel="stylesheet/stylus">
|
||||
@import '../../../themes/app.common.styl'
|
||||
.csc-cf-source-cont
|
||||
width 100%
|
||||
padding 5px
|
||||
.csc-cf-source
|
||||
width 100px
|
||||
white-space nowrap
|
||||
overflow hidden
|
||||
text-overflow ellipsis
|
||||
.csc-cf-number-form
|
||||
padding 0 20px 0 20px
|
||||
min-width 120px
|
||||
.csc-cf-source-actions
|
||||
text-align left
|
||||
cursor pointer
|
||||
.csc-cf-popover-hide
|
||||
display none
|
||||
.csc-cf-sourceset-name
|
||||
font-weight bold
|
||||
margin-bottom 15px
|
||||
.csc-cf-removed-source
|
||||
visibility hidden
|
||||
opacity 0
|
||||
transition visibility 0s 1s, opacity 1s linear
|
||||
</style>
|
||||
Loading…
Reference in new issue