TT#81173 CF: Can input a name to identify the source list, add a first number and save it

Change-Id: Iec58f7aba74658ef8d65f1022b66f41b98bd56a2

src/api/call-forward.js

@@ -856,8 +856,9 @@ export function createSourcesetWithSource(options) {
                 sources: [{
                     source: options.source
                 }]
-            }).then(() => {
+            }).then((data) => {
-                resolve();
+                let id = data.headers.map.location[0].split('cfsourcesets/')[1];
+                resolve(id);
             }).catch((err) => {
                 reject(err);
             });

src/components/pages/NewCallForward/CscCallForwardGroup.vue

@@ -13,17 +13,19 @@
                     <span
                         v-if="isOnlineFromGroup"
                         class="csc-cf-from-link"
-                        @click="showOnlineSourcesets"
                     >
                         {{$t('pages.newCallForward.titles.timeoutGroupFromPost')}}
                         <q-popover
                             ref="onlineSourcest"
-                            @open="createOnlineSourceset()"
+                            class="csc-cf-number-form"
+                            @open="showSourcesetForm()"
                         >
-                            TODO
+                            <csc-new-call-forward-add-sourceset-form
-                            <!-- <csc-new-call-forward-destination-type-form
+                                ref="addSourceSet"
-                                ref="selectDestinationType"
+                                :enabled="true"
-                            /> -->
+                                :groupName="group.name"
+                                :groupId="group.id"
+                            />
                         </q-popover>
                     </span>
                     <span
@@ -136,6 +138,7 @@
     import CscObjectSpinner from "../../CscObjectSpinner";
     import CscNewCallForwardDestination from './CscNewCallForwardDestination'
     import CscNewCallForwardAddDestinationForm from './CscNewCallForwardAddDestinationForm'
+    import CscNewCallForwardAddSourcesetForm from './CscNewCallForwardAddSourcesetForm'
     import CscNewCallForwardDestinationTypeForm from './CscNewCallForwardDestinationTypeForm'
     export default {
         name: 'csc-cf-group',
@@ -154,6 +157,7 @@
             CscObjectSpinner,
             CscNewCallForwardDestination,
             CscNewCallForwardAddDestinationForm,
+            CscNewCallForwardAddSourcesetForm,
             CscNewCallForwardDestinationTypeForm
         },
         data () {
@@ -267,8 +271,9 @@
                 });
                 this.toggleGroupInProgress = false;
             },
-            createOnlineSourceset(){
 
+            showSourcesetForm(){
+                this.$refs.addSourceSet.add();
             }
         }
     }

src/components/pages/NewCallForward/CscNewCallForwardAddSourcesetForm.vue

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

src/components/pages/NewCallForward/CscNewCallForwardInputText.vue

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

src/locales/en.json

@@ -234,7 +234,8 @@
             "unconditionalLabel": "If online",
             "unconditionalFromLabel": "If online and call from ...",
             "offlineLabel": "If offline",
-            "busyLabel": "If busy"
+            "busyLabel": "If busy",
+            "sourcesetName": "List name"
         },
         "callForward": {
             "titles": {

src/store/new-call-forward.js

@@ -8,7 +8,8 @@ import {
     addDestinationToDestinationset,
     addNewMapping,
     updateOwnPhoneTimeout,
-    updateDestinationsetName
+    updateDestinationsetName,
+    createSourcesetWithSource
 } from '../api/call-forward';
 
 const ForwardGroup = {
@@ -191,7 +192,7 @@ export default {
 
                 groupMappings.push({
                     "destinationset_id": data.groupId,
-                    "sourceset_id":null,
+                    "sourceset_id": data.sourceSetId || null,
                     "timeset_id":null
                 });
 
@@ -547,6 +548,22 @@ export default {
         },
         setSelectedDestType(context, destType){
             context.commit('setSelectedDestType', destType);
+        },
+        async createSourceSet(context, data){
+            const sourceSetId = await createSourcesetWithSource({
+                sourcesetName: data.name,
+                subscriberId: localStorage.getItem('subscriberId'),
+                mode: "whitelist", // TODO maybe get rid?
+                source: data.source
+            });
+            return sourceSetId;
+        },
+    async addSourcesetToGroup(context, data){
+            await context.dispatch('editMapping', {
+                name: data.name,
+                groupId: data.id,
+                sourceSetId: data.sourceSetId
+            });
         }
     }
 };