From b9403d94b09826906f8df22aafd083147f685284 Mon Sep 17 00:00:00 2001
From: Hugo Zigha <hugo.zigha@al-enterprise.com>
Date: Tue, 21 Sep 2021 17:52:27 +0200
Subject: [PATCH] TT#129220 PBXSettings - CallQueue - As PBX-Attendant (Pilot,
 Seat, Group), I can change my CallQueue preferences

Change-Id: Ib062007aeaad0e9648850bce872e4ffc519d04cb
---
 src/components/CscMainMenuTop.vue          |   6 +
 src/i18n/en.json                           |   1 +
 src/pages/CscPagePbxSettingsCallQueues.vue | 221 +++++++++++++++++++++
 src/router/routes.js                       |  13 ++
 4 files changed, 241 insertions(+)
 create mode 100644 src/pages/CscPagePbxSettingsCallQueues.vue

diff --git a/src/components/CscMainMenuTop.vue b/src/components/CscMainMenuTop.vue
index 6fc21955..66c6047a 100644
--- a/src/components/CscMainMenuTop.vue
+++ b/src/components/CscMainMenuTop.vue
@@ -211,6 +211,12 @@ export default {
                             label: this.$t('General'),
                             visible: true
                         },
+                        {
+                            to: '/user/pbx-settings/call-queues',
+                            icon: 'filter_none',
+                            label: this.$t('Call Queues'),
+                            visible: true
+                        },
                         {
                             to: '/user/pbx-settings/ms-configs',
                             icon: 'arrow_forward',
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e3c7a99c..2b0c16f8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -59,6 +59,7 @@
     "Call Forwarding": "Call Forwarding",
     "Call List": "Call List",
     "Call Queue": "Call Queue",
+    "Call Queue feature": "Call Queue feature",
     "Call Queues": "Call Queues",
     "Call Settings": "Call Settings",
     "Call Through": "Call Through",
diff --git a/src/pages/CscPagePbxSettingsCallQueues.vue b/src/pages/CscPagePbxSettingsCallQueues.vue
new file mode 100644
index 00000000..1a031bdf
--- /dev/null
+++ b/src/pages/CscPagePbxSettingsCallQueues.vue
@@ -0,0 +1,221 @@
+<template>
+    <csc-page
+        id="csc-page-voicebox"
+        class="row q-pa-lg"
+    >
+        <q-list
+            class="col col-xs-12 col-md-6"
+        >
+            <q-toggle
+                v-model="cloud_pbx_callqueue"
+                :label="$t('Call Queue feature')"
+                :disable="isLoading"
+                @input="addOrRemoveCallQueue()"
+            />
+            <csc-spinner
+                v-if="isLoading || !callQueue || !changes"
+                class="q-ml-xl"
+            />
+            <div v-if="changes && callQueue">
+                <q-item>
+                    <q-item-section>
+                        <csc-input-saveable
+                            v-model="changes.max_queue_length"
+                            :label="$t('Queue Length')"
+                            :value-changed="hasMaxQueueLengthChanged"
+                            :error="$v.changes.max_queue_length.$error"
+                            :error-message="queueMaxLengthErrorMessage"
+                            :disable="isLoading || !cloud_pbx_callqueue"
+                            @undo="resetMaxQueueLength"
+                            @save="save"
+                            @input="$v.changes.max_queue_length.$touch"
+                            @keypress.space.prevent
+                            @keydown.space.prevent
+                            @keyup.space.prevent
+                        />
+                    </q-item-section>
+                </q-item>
+                <q-item>
+                    <q-item-section>
+                        <csc-input-saveable
+                            v-model="changes.queue_wrap_up_time"
+                            :label="$t('Wrap up time')"
+                            :value-changed="hasQueueWrapUpTimeChanged"
+                            :error="$v.changes.queue_wrap_up_time.$error"
+                            :error-message="queueWrapUpTimeErrorMessage"
+                            :disable="isLoading || !cloud_pbx_callqueue"
+                            @undo="resetQueueWrapUpTime"
+                            @save="save"
+                            @input="$v.changes.queue_wrap_up_time.$touch"
+                            @keypress.space.prevent
+                            @keydown.space.prevent
+                            @keyup.space.prevent
+                        />
+                    </q-item-section>
+                </q-item>
+            </div>
+        </q-list>
+    </csc-page>
+</template>
+
+<script>
+import {
+    mapGetters,
+    mapState
+} from 'vuex'
+import { mapWaitingActions } from 'vue-wait'
+import CscPage from 'components/CscPage'
+import CscInputSaveable from 'components/form/CscInputSaveable'
+import CscSpinner from 'components/CscSpinner'
+import {
+    maxValue,
+    minValue,
+    numeric
+} from 'vuelidate/lib/validators'
+import { getSubscriberId } from 'src/auth'
+import {
+    showToast
+} from 'src/helpers/ui'
+export default {
+    name: 'CscPagePbxSettingsCallQueues',
+    components: {
+        CscPage,
+        CscInputSaveable,
+        CscSpinner
+    },
+    data () {
+        return {
+            callQueue: null,
+            changes: null,
+            cloud_pbx_callqueue: false
+        }
+    },
+    validations: {
+        changes: {
+            max_queue_length: {
+                numeric,
+                minValue: minValue(1),
+                maxValue: maxValue(99999)
+            },
+            queue_wrap_up_time: {
+                numeric,
+                minValue: minValue(1),
+                maxValue: maxValue(99999)
+            }
+        }
+    },
+    computed: {
+        ...mapState('pbxCallQueues', [
+            'defaultMaxQueueLength',
+            'defaultQueueWrapUpTime'
+        ]),
+        ...mapState('callSettings', [
+            'subscriberPreferences'
+        ]),
+        ...mapGetters('user', [
+            'getUsername'
+        ]),
+        hasMaxQueueLengthChanged () {
+            return this.callQueue.max_queue_length !== this.changes.max_queue_length
+        },
+        hasQueueWrapUpTimeChanged () {
+            return this.callQueue.queue_wrap_up_time !== this.changes.queue_wrap_up_time
+        },
+        queueMaxLengthErrorMessage () {
+            if (!this.$v.changes.max_queue_length.numeric) {
+                return this.$t('{field} must consist of numeric characters only', {
+                    field: this.$t('Queue Length')
+                })
+            } else if (!this.$v.changes.max_queue_length.minValue) {
+                return this.$t('{field} must be at least {minValue} second', {
+                    field: this.$t('Queue Length'),
+                    minValue: this.$v.changes.max_queue_length.$params.minValue.min
+                })
+            } else if (!this.$v.changes.max_queue_length.maxValue) {
+                return this.$t('{field} must be maximum of {maxValue} seconds', {
+                    field: this.$t('Queue Length'),
+                    maxValue: this.$v.changes.max_queue_length.$params.maxValue.max
+                })
+            } else {
+                return ''
+            }
+        },
+        queueWrapUpTimeErrorMessage () {
+            if (!this.$v.changes.queue_wrap_up_time.numeric) {
+                return this.$t('{field} must consist of numeric characters only', {
+                    field: this.$t('Wrap Up Time')
+                })
+            } else if (!this.$v.changes.queue_wrap_up_time.minValue) {
+                return this.$t('{field} must be at least {minValue} second', {
+                    field: this.$t('Wrap Up Time'),
+                    minValue: this.$v.changes.queue_wrap_up_time.$params.minValue.min
+                })
+            } else if (!this.$v.changes.queue_wrap_up_time.maxValue) {
+                return this.$t('{field} must be maximum of {maxValue} seconds', {
+                    field: this.$t('Wrap Up Time'),
+                    maxValue: this.$v.changes.queue_wrap_up_time.$params.maxValue.max
+                })
+            } else {
+                return ''
+            }
+        },
+        isLoading () {
+            return this.$wait.is('csc-pbx-call-settings-load-preferences') ||
+                this.$wait.is('csc-pbx-call-settings-update-preferences')
+        }
+    },
+    async mounted () {
+        await this.loadSubscriberPreferencesAction()
+        this.getCallQueue()
+        this.changes = this.getDefaultData()
+    },
+    methods: {
+        ...mapWaitingActions('callSettings', {
+            loadSubscriberPreferencesAction: 'csc-pbx-call-settings-load-preferences',
+            fieldUpdateAction: 'csc-pbx-call-settings-update-preferences'
+        }),
+        resetMaxQueueLength () {
+            this.changes.max_queue_length = this.getDefaultData().max_queue_length
+        },
+        resetQueueWrapUpTime () {
+            this.changes.queue_wrap_up_time = this.getDefaultData().queue_wrap_up_time
+        },
+        getDefaultData () {
+            return {
+                max_queue_length: this.callQueue.max_queue_length.toString() || this.defaultMaxQueueLength.toString(),
+                queue_wrap_up_time: this.callQueue.queue_wrap_up_time.toString() || this.defaultQueueWrapUpTime.toString()
+            }
+        },
+        async save () {
+            if (this.hasMaxQueueLengthChanged && !this.$v.changes.max_queue_length.$error) {
+                await this.fieldUpdateAction({ field: 'max_queue_length', value: this.changes.max_queue_length || this.defaultMaxQueueLength })
+                showToast(this.$t('Updated {field} for call queue {callQueue} successfully', {
+                    callQueue: this.getUsername,
+                    field: this.$t('Queue Length')
+                }))
+            }
+            if (this.hasQueueWrapUpTimeChanged && !this.$v.changes.queue_wrap_up_time.$error) {
+                await this.fieldUpdateAction({ field: 'queue_wrap_up_time', value: this.changes.queue_wrap_up_time || this.defaultQueueWrapUpTime })
+                showToast(this.$t('Updated {field} for call queue {callQueue} successfully', {
+                    callQueue: this.getUsername,
+                    field: this.$t('Wrap up time')
+                }))
+            }
+            this.getCallQueue()
+            this.changes = this.getDefaultData()
+        },
+        getCallQueue () {
+            this.callQueue = {
+                id: this.subscriberPreferences.id,
+                max_queue_length: this.subscriberPreferences.max_queue_length || this.defaultMaxQueueLength.toString(),
+                queue_wrap_up_time: this.subscriberPreferences.queue_wrap_up_time || this.defaultQueueWrapUpTime.toString(),
+                subscriber_id: getSubscriberId()
+            }
+            this.cloud_pbx_callqueue = this.subscriberPreferences.cloud_pbx_callqueue ? this.subscriberPreferences.cloud_pbx_callqueue : this.cloud_pbx_callqueue
+        },
+        addOrRemoveCallQueue () {
+            this.fieldUpdateAction({ field: 'cloud_pbx_callqueue', value: this.cloud_pbx_callqueue })
+        }
+    }
+}
+</script>
diff --git a/src/router/routes.js b/src/router/routes.js
index 72457c2f..08b93321 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -32,6 +32,7 @@ import CscPageRegisteredDevices from 'pages/CscPageRegisteredDevices'
 import CscPagePbxSettingsAutoAttendant from 'pages/CscPagePbxSettingsAutoAttendant'
 import CscPageDashboard from 'pages/CscPageDashboard'
 import CscPagePbxSettingsMsConfigs from 'pages/CscPagePbxSettingsMsConfigs'
+import CscPagePbxSettingsCallQueues from 'pages/CscPagePbxSettingsCallQueues'
 
 const getToken = (route) => {
     return {
@@ -326,6 +327,18 @@ export default function routes (app) {
                         profileAttribute: PROFILE_ATTRIBUTE_MAP.pbxSettings
                     }
                 },
+                {
+                    path: 'pbx-settings/call-queues',
+                    component: CscPagePbxSettingsCallQueues,
+                    meta: {
+                        get title () {
+                            return i18n.t('PBX Settings')
+                        },
+                        get subtitle () {
+                            return i18n.t('Call Queues')
+                        }
+                    }
+                },
                 {
                     path: 'pbx-settings/ms-configs',
                     component: CscPagePbxSettingsMsConfigs,