From 3463789805fe240e7e36bfcf326275754912ab0b Mon Sep 17 00:00:00 2001
From: Hans-Peter Herzog <hherzog@sipwise.com>
Date: Wed, 31 Jan 2018 16:35:53 +0100
Subject: [PATCH] TT#20511 PBXConfig: As a Customer, I want to remove PBX
 Groups

Change-Id: Iaaab318c929ba8e1177a36b8e54e490ac34d292f
---
 src/api/pbx-config.js                         |  10 +-
 src/api/subscriber.js                         |  27 ++--
 src/api/user.js                               |   2 +-
 .../pages/PbxConfiguration/CscPbxGroup.vue    |  51 ++++++-
 .../PbxConfiguration/CscPbxGroupAddForm.vue   | 131 ++++++++++++++++++
 .../pages/PbxConfiguration/Groups.vue         |  59 ++++++--
 src/locales/en.json                           |   5 +-
 src/store/pbx-config.js                       |  37 ++++-
 8 files changed, 286 insertions(+), 36 deletions(-)
 create mode 100644 src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue

diff --git a/src/api/pbx-config.js b/src/api/pbx-config.js
index 6c0182ac..bb5f35b8 100644
--- a/src/api/pbx-config.js
+++ b/src/api/pbx-config.js
@@ -2,7 +2,7 @@
 import Vue from 'vue';
 import { getJsonBody } from './utils';
 import { getNumbers, assignNumber, assignNumbers } from './user';
-import { createSubscriber } from './subscriber';
+import { createSubscriber, deleteSubscriber } from './subscriber';
 
 var assumedRows = 1000;
 
@@ -88,7 +88,7 @@ export function addGroup(group) {
                 pbx_groupmember_ids: group.seats
             });
         }).then((subscriberId)=>{
-            return assignNumbers(group.aliasNumbers, subscriberId);
+            assignNumbers(group.aliasNumbers, subscriberId);
         }).then(()=>{
             resolve();
         }).catch((err)=>{
@@ -97,8 +97,6 @@ export function addGroup(group) {
     });
 }
 
-export function deleteGroup(id) {
-    return new Promise((resolve, reject)=>{
-
-    });
+export function removeGroup(id) {
+    return deleteSubscriber(id);
 }
diff --git a/src/api/subscriber.js b/src/api/subscriber.js
index 861f4d80..54e311d2 100644
--- a/src/api/subscriber.js
+++ b/src/api/subscriber.js
@@ -198,17 +198,16 @@ export function createSubscriber(subscriber) {
     });
 }
 
-// export function deleteSubscriber(id) {
-//     return new Promise((resolve, reject)=>{
-//         Vue.http.delete('/api/subscribers/', null, {
-//         }).then((res)=>{
-//             resolve(_.last(_.split(res.headers.get('Location'), '/')));
-//         }).catch((err)=>{
-//             if(err.status === 422) {
-//                 reject(new Error(err.body.message));
-//             } else {
-//                 reject(err);
-//             }
-//         });
-//     });
-// }
+export function deleteSubscriber(id) {
+    return new Promise((resolve, reject)=>{
+        Vue.http.delete('/api/subscribers/' + id).then((res)=>{
+            resolve();
+        }).catch((err)=>{
+            if(err.status === 422) {
+                reject(new Error(err.body.message));
+            } else {
+                reject(err);
+            }
+        });
+    });
+}
diff --git a/src/api/user.js b/src/api/user.js
index 7c0e11bd..4a6ecc2c 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -101,7 +101,7 @@ export function assignNumbers(numberIds, subscriberId) {
                 reject(err);
             });
         } else {
-            reject(new Error('No numberIds given'));
+            resolve();
         }
     });
 }
diff --git a/src/components/pages/PbxConfiguration/CscPbxGroup.vue b/src/components/pages/PbxConfiguration/CscPbxGroup.vue
index ff76f380..bde8c202 100644
--- a/src/components/pages/PbxConfiguration/CscPbxGroup.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxGroup.vue
@@ -30,8 +30,13 @@
                 <q-select v-model="seats" :options="seatOptions" multiple chips readonly clearable />
             </q-field>
         </q-card-main>
-        <q-card-actions>
+        <q-card-actions align="center">
+            <q-btn :loader="isLoading" v-model="isLoading" flat round
+                   color="negative" icon="delete" @click="remove()">Delete</q-btn>
         </q-card-actions>
+        <q-inner-loading :visible="isLoading">
+            <q-spinner-mat size="60px" color="primary"></q-spinner-mat>
+        </q-inner-loading>
     </q-card>
 </template>
 
@@ -47,7 +52,10 @@
         QInput,
         QIcon,
         QSelect,
-        QChip
+        QChip,
+        QBtn,
+        QInnerLoading,
+        QSpinnerMat
     } from 'quasar-framework'
     export default {
         name: 'csc-pbx-group',
@@ -55,6 +63,7 @@
             'huntPolicyOptions',
             'aliasNumberOptions',
             'seatOptions',
+            'loading'
         ],
         data () {
             return {}
@@ -68,9 +77,15 @@
             QInput,
             QIcon,
             QSelect,
-            QChip
+            QChip,
+            QBtn,
+            QInnerLoading,
+            QSpinnerMat
         },
         computed: {
+            id() {
+                return this.group.id;
+            },
             name() {
                 return this.group.display_name;
             },
@@ -103,12 +118,42 @@
                     });
                 }
                 return seats;
+            },
+            groupModel() {
+                return {
+                    id: this.id,
+                    name: this.name,
+                    extension: this.extension,
+                    huntPolicy: this.huntPolicy,
+                    huntTimeout: this.huntTimeout,
+                    primaryNumber: this.primaryNumber,
+                    aliasNumbers: this.aliasNumbers,
+                    seats: this.seats
+                }
+            },
+            isLoading() {
+                return this.loading;
+            },
+            cardClasses() {
+                var cardClasses = ['csc-pbx-group'];
+                if(this.isLoading) {
+                    cardClasses.push('light-dimmed');
+                }
+                return cardClasses;
+            }
+        },
+        methods: {
+            remove() {
+                this.$emit('remove', this.groupModel);
             }
         }
     }
 </script>
 
 <style>
+    .csc-pbx-group {
+        position: relative;
+    }
     .csc-pbx-group .csc-pbx-group-title {
         padding-left: 8px;
     }
diff --git a/src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue b/src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue
new file mode 100644
index 00000000..ba236c8e
--- /dev/null
+++ b/src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue
@@ -0,0 +1,131 @@
+<template>
+    <q-card class="csc-pbx-group-add-form">
+        <q-card-title>
+            <q-icon name="add" color="primary" size="22px"/>
+            <span>Add Group</span>
+        </q-card-title>
+        <q-card-main>
+            <q-field>
+                <q-input :disabled="addGroupIsRequesting" ref="groupName" v-model="groupForm.name" autofocus
+                         :float-label="$t('pbxConfig.groupName')"  clearable />
+            </q-field>
+            <q-field>
+                <q-input :disabled="addGroupIsRequesting" type="number" v-model="groupForm.extension" clearable min="1" max="1000000"
+                         :float-label="$t('pbxConfig.extension')"  />
+            </q-field>
+            <q-field>
+                <q-select :disabled="addGroupIsRequesting" v-model="groupForm.huntPolicy" :float-label="$t('pbxConfig.huntPolicy')"
+                          :options="huntPolicyOptions" radio />
+            </q-field>
+            <q-field >
+                <q-input :disabled="addGroupIsRequesting" type="number" v-model="groupForm.huntTimeout" :float-label="$t('pbxConfig.huntTimeout')"
+                         suffix="seconds" min="1" max="3600" clearable />
+            </q-field>
+            <q-field>
+                <q-select :disabled="addGroupIsRequesting" v-model="groupForm.aliasNumbers" :float-label="$t('pbxConfig.aliasNumbers')"
+                          :options="aliasNumberOptions" multiple chips readonly clearable />
+            </q-field>
+            <q-field>
+                <q-select :disabled="addGroupIsRequesting" v-model="groupForm.seats" :float-label="$t('pbxConfig.seats')"
+                          :options="seatOptions" multiple chips readonly clearable />
+            </q-field>
+        </q-card-main>
+        <q-card-separator/>
+        <q-card-actions align="center">
+            <q-btn v-if="!addGroupIsRequesting" flat color="secondary" icon="clear" @click="disableGroupForm()">{{ $t('buttons.cancel') }}</q-btn>
+            <q-btn loader v-model="addGroupIsRequesting" flat color="primary" icon="done" @click="addGroup()">{{ $t('buttons.save') }}</q-btn>
+        </q-card-actions>
+        <q-inner-loading :visible="addGroupIsRequesting">
+            <q-spinner-mat size="60px" color="primary"></q-spinner-mat>
+        </q-inner-loading>
+    </q-card>
+</template>
+
+<script>
+
+    import { startLoading, stopLoading, showGlobalError, showToast } from '../../../helpers/ui'
+    import CscPage  from '../../CscPage'
+    import CscPbxGroup  from './CscPbxGroup'
+    import {
+        QChip,
+        QCard,
+        QCardSeparator,
+        QCardTitle,
+        QCardMain,
+        QCardActions,
+        QIcon,
+        QPopover,
+        QList,
+        QItem,
+        QItemMain,
+        QField,
+        QInput,
+        QBtn,
+        QSelect,
+        QInnerLoading,
+        QSpinnerDots,
+        QSpinnerMat,
+        Dialog
+    } from 'quasar-framework'
+    import { mapState } from 'vuex'
+    import numberFilter from '../../../filters/number'
+
+    export default {
+        components: {
+            CscPage,
+            QChip,
+            QCard,
+            QCardSeparator,
+            QCardTitle,
+            QCardMain,
+            QCardActions,
+            QIcon,
+            QPopover,
+            QList,
+            QItem,
+            QItemMain,
+            QField,
+            QInput,
+            CscPbxGroup,
+            QBtn,
+            QSelect,
+            QInnerLoading,
+            QSpinnerDots,
+            QSpinnerMat,
+            Dialog
+        },
+        data () {
+            return {
+                group: {
+                    name: '',
+                    extension: '',
+                    huntPolicy: 'serial',
+                    huntTimeout: 10,
+                    aliasNumbers: [],
+                    seats: []
+                },
+            }
+        },
+        computed: {
+
+        },
+        methods: {
+            save() {
+
+            },
+            cancel() {
+
+            }
+        }
+    }
+</script>
+
+<style lang="stylus">
+    @import '../../../../src/themes/app.variables.styl';
+    .add-form {
+        position: relative;
+    }
+    .add-form .q-field:last-child {
+        margin-bottom: 36px;
+    }
+</style>
diff --git a/src/components/pages/PbxConfiguration/Groups.vue b/src/components/pages/PbxConfiguration/Groups.vue
index ec1c5d69..92013fa5 100644
--- a/src/components/pages/PbxConfiguration/Groups.vue
+++ b/src/components/pages/PbxConfiguration/Groups.vue
@@ -36,21 +36,23 @@
                 <q-btn v-if="!addGroupIsRequesting" flat color="secondary" icon="clear" @click="disableGroupForm()">{{ $t('buttons.cancel') }}</q-btn>
                 <q-btn loader v-model="addGroupIsRequesting" flat color="primary" icon="done" @click="addGroup()">{{ $t('buttons.save') }}</q-btn>
             </q-card-actions>
+            <q-inner-loading :visible="addGroupIsRequesting">
+                <q-spinner-mat size="60px" color="primary"></q-spinner-mat>
+            </q-inner-loading>
         </q-card>
         <q-card v-else flat>
             <q-card-actions align="center">
                 <q-btn color="primary" icon="add" flat @click="enableGroupForm">{{ $t('pbxConfig.addGroup') }}</q-btn>
             </q-card-actions>
         </q-card>
-        <q-card v-if="listIsRequesting" flat>
+        <q-card v-if="listIsRequesting && !removeGroupIsRequesting && !addGroupIsRequesting" flat>
             <q-card-actions align="center">
                 <q-spinner-dots  color="primary" :size="40"/>
             </q-card-actions>
         </q-card>
-        <csc-pbx-group v-for="group in groups" :group="group" :all-seats="seats"
-                       :all-alias-numbers="aliasNumbers" :all-primary-numbers="primaryNumbers"
-                        :alias-number-options="aliasNumberOptions" :seat-options="seatOptions"
-                        :hunt-policy-options="huntPolicyOptions"/>
+        <csc-pbx-group v-for="group in groups" :group="group" :alias-number-options="aliasNumberOptions"
+                       :seat-options="seatOptions" :hunt-policy-options="huntPolicyOptions" @remove="removeGroup"
+                       :loading="removeGroupIsRequesting && group.id == removeGroupId" />
     </csc-page>
 </template>
 
@@ -76,8 +78,9 @@
         QBtn,
         QSelect,
         QInnerLoading,
-        QSpinnerGears,
-        QSpinnerDots
+        QSpinnerDots,
+        QSpinnerMat,
+        Dialog
     } from 'quasar-framework'
     import { mapState } from 'vuex'
     import numberFilter from '../../../filters/number'
@@ -102,8 +105,9 @@
             QBtn,
             QSelect,
             QInnerLoading,
-            QSpinnerGears,
-            QSpinnerDots
+            QSpinnerDots,
+            QSpinnerMat,
+            Dialog
         },
         mounted() {
             this.$store.dispatch('pbxConfig/listGroups');
@@ -203,6 +207,16 @@
             },
             addGroupError() {
                 return this.$store.state.pbxConfig.addGroupError;
+            },
+            removeGroupState() {
+                return this.$store.state.pbxConfig.removeGroupState;
+            },
+            removeGroupIsRequesting() {
+                return this.removeGroupState === 'requesting' ||
+                    this.removeGroupState === 'succeeded';
+            },
+            removeGroupId() {
+                return this.$store.state.pbxConfig.removeGroupItem.id;
             }
         },
         watch: {
@@ -213,6 +227,11 @@
                 if(state === 'succeeded') {
                     this.disableGroupForm();
                 }
+            },
+            removeGroupState(state) {
+                if(state === 'failed') {
+                    showGlobalError(this.removeGroupError);
+                }
             }
         },
         methods: {
@@ -236,6 +255,25 @@
             },
             addGroup() {
                 this.$store.dispatch('pbxConfig/addGroup', this.groupForm);
+            },
+            removeGroup(group) {
+                var store = this.$store;
+                var state = this;
+                var i18n = this.$i18n;
+                Dialog.create({
+                    title: i18n.t('pbxConfig.removeGroupTitle'),
+                    message: i18n.t('pbxConfig.removeGroupText', { group: group.name }),
+                    buttons: [
+                        'Cancel',
+                        {
+                            label: i18n.t('pbxConfig.removeGroup'),
+                            color: 'negative',
+                            handler () {
+                                store.dispatch('pbxConfig/removeGroup', group);
+                            }
+                        }
+                    ]
+                });
             }
         }
     }
@@ -243,6 +281,9 @@
 
 <style lang="stylus">
     @import '../../../../src/themes/app.variables.styl';
+    .add-form {
+        position: relative;
+    }
     .add-form .q-field:last-child {
         margin-bottom: 36px;
     }
diff --git a/src/locales/en.json b/src/locales/en.json
index cdbfac00..bd5da5fb 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -177,6 +177,9 @@
         "circularRinging": "Circular Ringing",
         "allocatedByNobody": "Free",
         "allocatedBy": "Allocated by {type} {name}",
-        "addGroup": "Add Group"
+        "addGroup": "Add Group",
+        "removeGroup": "Remove",
+        "removeGroupTitle": "Remove group",
+        "removeGroupText": "You are about to remove group \"{group}\""
     }
 }
diff --git a/src/store/pbx-config.js b/src/store/pbx-config.js
index f97e71d7..5bdcdf05 100644
--- a/src/store/pbx-config.js
+++ b/src/store/pbx-config.js
@@ -1,6 +1,6 @@
 
 import _ from 'lodash';
-import { getPbxConfiguration, addGroup } from '../api/pbx-config'
+import { getPbxConfiguration, addGroup, removeGroup } from '../api/pbx-config'
 
 const ListState = {
     initiated: 'initiated',
@@ -17,6 +17,13 @@ const AddGroupState = {
     failed: 'failed'
 };
 
+const RemoveGroupState = {
+    initiated: 'initiated',
+    requesting: 'requesting',
+    succeeded: 'succeeded',
+    failed: 'failed'
+};
+
 export default {
     namespaced: true,
     state: {
@@ -30,7 +37,10 @@ export default {
         listAllState: ListState.initiated,
         listAllError: null,
         addGroupState: AddGroupState.button,
-        addGroupError: null
+        addGroupError: null,
+        removeGroupState: RemoveGroupState.initiated,
+        removeGroupError: null,
+        removeGroupItem: null
     },
     getters: {
         groups(state, getters) {
@@ -72,6 +82,7 @@ export default {
             state.listAllState = ListState.requesting;
         },
         listAllSucceeded(state, all) {
+            state.removeGroupState = RemoveGroupState.initiated;
             state.listAllState = ListState.succeeded;
             state.listAllError = null;
             state.pilot = all.pilot;
@@ -130,6 +141,19 @@ export default {
         addGroupFailed(state, error) {
             state.addGroupState = AddGroupState.failed;
             state.addGroupError = error;
+        },
+        removeGroupRequesting(state, group) {
+            state.removeGroupState = RemoveGroupState.requesting;
+            state.removeGroupError = null;
+            state.removeGroupItem = group;
+        },
+        removeGroupSucceeded(state) {
+            state.removeGroupState = RemoveGroupState.succeeded;
+            state.removeGroupError = null;
+        },
+        removeGroupFailed(state, message) {
+            state.removeGroupState = RemoveGroupState.failed;
+            state.removeGroupError = message;
         }
     },
     actions: {
@@ -154,6 +178,15 @@ export default {
             }).catch((err)=>{
                 context.commit('addGroupFailed', err.message);
             });
+        },
+        removeGroup(context, group) {
+            context.commit('removeGroupRequesting', group);
+            removeGroup(group.id).then(()=>{
+                context.commit('removeGroupSucceeded');
+                context.dispatch('listGroups');
+            }).catch((err)=>{
+                context.commit('removeGroupFailed', err.message);
+            });
         }
     }
 };