TT#81171 CF: Can see the list of sources by clicking the highlighted part in the title "call from ..."

Change-Id: I426498229368c5861cfd337943549a5034bb4d3e

src/components/pages/NewCallForward/CscCallForwardGroup.vue

@@ -37,7 +37,7 @@
                                 :groupId="group.id"
                             />
                         </q-popover>
-                        <q-popover
+                         <q-popover
                             ref="onlineSourceset"
                             class="csc-cf-number-form"
                             v-bind:class="{ 'csc-cf-popover-hide': toggleConditionFromForm }"
@@ -59,6 +59,20 @@
                     >
                         {{ $t('pages.newCallForward.fromLabelShort') +'"'+ groupSourceset +'"'}}
 
+                        <q-popover
+                            ref="sourcesList"
+                            class="csc-cf-number-form"
+                            @open="showSources()"
+                        >
+                            <csc-new-call-forward-edit-sources
+                                ref="editSources"
+                                :sources="sources"
+                                :sourceSetName="groupSourceset"
+                                :groupName="group.name"
+                                :groupId="group.id"
+                            />
+                        </q-popover>
+
                     </span>
                 </div>
                 <div class="col text-left col-xs-12 col-md-2 csc-cf-dest-number-cont">
@@ -156,6 +170,7 @@
     import CscObjectSpinner from "../../CscObjectSpinner";
     import CscNewCallForwardDestination from './CscNewCallForwardDestination'
     import CscNewCallForwardAddDestinationForm from './CscNewCallForwardAddDestinationForm'
+    import CscNewCallForwardEditSources from './CscNewCallForwardEditSources'
     import CscNewCallForwardAddSourcesetForm from './CscNewCallForwardAddSourcesetForm'
     import CscNewCallForwardConditionTypeSelect from './CscNewCallForwardConditionTypeSelect'
     import CscNewCallForwardDestinationTypeForm from './CscNewCallForwardDestinationTypeForm'
@@ -176,6 +191,7 @@
             CscObjectSpinner,
             CscNewCallForwardDestination,
             CscNewCallForwardAddDestinationForm,
+            CscNewCallForwardEditSources,
             CscNewCallForwardAddSourcesetForm,
             CscNewCallForwardConditionTypeSelect,
             CscNewCallForwardDestinationTypeForm
@@ -187,7 +203,8 @@
                 toggleNumberForm: true,
                 toggleConditionFromForm: true,
                 toggleGroupInProgress: false,
-                sourceSet: null
+                sourceSet: null,
+                sources: []
             };
         },
         async mounted(){
@@ -303,14 +320,17 @@
             },
             showConditions(){
                 this.$refs.addCondition.add();
-                this.$refs.addSourceSet.cancel();
             },
             showSourcesetForm(){
                 this.$refs.addSourceSet.add();
             },
+            showSources(){
+                this.$refs.editSources.add();
+            },
             resetToggleCondition(){
                 this.toggleConditionFromForm = true;
             },
+
             async updateSourcesetNames(){
                 const mappings = this.getMappings;
                 const groupMappingId = await this.$store.dispatch('newCallForward/getMappingIdByGroupName', this.group.name);
@@ -319,9 +339,10 @@
                     groupMapping =  mappings[groupMappingId].filter(($mapping)=>{
                         return $mapping.destinationset_id == this.group.id;
                     });
-                    sourceSet = groupMapping[0] ? await this.$store.dispatch('newCallForward/getSourcesetById', groupMapping[0].sourceset_id) :  null;
+                    sourceSet = groupMapping[0] && groupMapping[0].sourceset_id ? await this.$store.dispatch('newCallForward/getSourcesetById', groupMapping[0].sourceset_id) :  null;
                     if(sourceSet){
-                        this.sourceSet = sourceSet
+                        this.sourceSet = sourceSet;
+                        this.sources = this.sourceSet.sources;
                     }
                 }
             }

src/components/pages/NewCallForward/CscNewCallForwardEditSources.vue

@@ -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>

src/components/pages/NewCallForward/CscNewCallForwardSource.vue

@@ -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>

src/store/new-call-forward.js

@@ -384,6 +384,10 @@ export default {
                 console.log(err);
             }
         },
+        removeSourceFromSourceset(context, data){
+            // TODO
+            console.log(context, data)
+        },
         async editDestination(context, data){
             let group = context.state.forwardGroups.find((group)=>{
                 return group.id === data.forwardGroupId;