From 35e13e6778566a6f5f020f9034c93aaf3c9eaf5b Mon Sep 17 00:00:00 2001
From: Hans-Peter Herzog <hherzog@sipwise.com>
Date: Wed, 11 Jul 2018 17:44:21 +0200
Subject: [PATCH] TT#40099 PBXConfig: As a Customer, I want to stay in the
 expanded seat/group after saving a single field

Change-Id: I1aae3b8afa95905ffad586d1b7308b1d1c00473f
---
 src/api/pbx-config.js                         |  8 ++
 .../pages/PbxConfiguration/CscPbxGroup.vue    | 82 +++++++++++++++----
 .../pages/PbxConfiguration/CscPbxGroups.vue   |  2 +-
 .../pages/PbxConfiguration/CscPbxSeats.vue    |  2 +-
 src/store/pbx-config/actions.js               | 71 +++++++++++++---
 src/store/pbx-config/mutations.js             | 48 +++++++++++
 src/store/pbx-config/state.js                 |  6 ++
 7 files changed, 191 insertions(+), 28 deletions(-)

diff --git a/src/api/pbx-config.js b/src/api/pbx-config.js
index 8edb2436..e53993ce 100644
--- a/src/api/pbx-config.js
+++ b/src/api/pbx-config.js
@@ -29,6 +29,10 @@ export function getGroups(options) {
     });
 }
 
+export function getGroup(groupId) {
+    return getSubscriber(groupId);
+}
+
 export function getSeats(options) {
     return new Promise((resolve, reject)=>{
         options = options || {};
@@ -46,6 +50,10 @@ export function getSeats(options) {
     });
 }
 
+export function getSeat(seatId) {
+    return getSubscriber(seatId);
+}
+
 export function getAllGroupsAndSeats(options) {
     return new Promise((resolve, reject)=>{
         options = options || {};
diff --git a/src/components/pages/PbxConfiguration/CscPbxGroup.vue b/src/components/pages/PbxConfiguration/CscPbxGroup.vue
index be4fe5a1..03ca8178 100644
--- a/src/components/pages/PbxConfiguration/CscPbxGroup.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxGroup.vue
@@ -1,17 +1,56 @@
 <template>
-    <q-card class="csc-entity csc-pbx-group shadow-1">
-        <q-card-title class="csc-entity-title">
-            <q-icon name="group" color="secondary" size="24px"/>
-            <span class="csc-entity-title-text">{{ group.display_name }}</span>
-            <q-chip v-if="!expanded" pointing="left" color="primary" class="gt-md cursor-pointer">
+    <q-card
+        class="csc-entity csc-pbx-group shadow-1"
+    >
+        <q-card-title
+            class="csc-entity-title"
+        >
+            <q-icon
+                name="group"
+                color="secondary"
+                size="24px"
+            />
+            <span
+                class="csc-entity-title-text">
+                {{ group.display_name }}
+            </span>
+            <q-chip
+                v-if="!expanded"
+                pointing="left"
+                color="primary"
+                class="gt-md cursor-pointer"
+            >
                 {{ $t('pbxConfig.extension') }}: <span class="csc-important">{{ group.pbx_extension }}</span>
             </q-chip>
-            <q-btn :icon="titleIcon" :small="isMobile" color="primary" slot="right" flat @click="toggleMain()" />
-            <q-btn icon="delete" :small="isMobile"  color="negative" slot="right" flat @click="remove()" />
+            <q-btn
+                :icon="titleIcon"
+                :small="isMobile"
+                color="primary"
+                slot="right"
+                flat
+                @click="toggleMain()"
+            />
+            <q-btn
+                icon="delete"
+                :small="isMobile"
+                color="negative"
+                slot="right"
+                flat
+                @click="remove()"
+            />
         </q-card-title>
-        <q-card-main v-if="expanded" class="transition-generic">
-            <q-field :label="$t('pbxConfig.groupName')">
-                <q-input v-model="changes.name" :after="nameButtons" @keyup.enter="saveName" />
+        <q-card-main
+            v-if="expanded"
+            class="transition-generic"
+        >
+            <q-field
+                :label="$t('pbxConfig.groupName')"
+            >
+                <q-input
+                    v-model="changes.name"
+                    :after="nameButtons"
+                    @keyup.enter="saveName"
+                />
             </q-field>
             <q-field :label="$t('pbxConfig.extension')">
                 <q-input v-model="changes.extension" type="number" :after="extensionButtons"
@@ -29,12 +68,25 @@
                 <q-input v-model="primaryNumber" readonly disabled />
             </q-field>
             <q-field :label="$t('pbxConfig.aliasNumbers')">
-                <q-select ref="aliasNumbers" v-model="changes.aliasNumbers" :options="aliasNumberOptions"
-                          multiple chips clearable :after="aliasNumberButtons" @change="aliasNumberChange"/>
+                <q-select
+                    ref="aliasNumbers"
+                    v-model="changes.aliasNumbers"
+                    :options="aliasNumberOptions"
+                    multiple
+                    chips
+                    clearable
+                    :after="aliasNumberButtons"
+                />
             </q-field>
             <q-field :label="$t('pbxConfig.seats')">
-                <q-select v-model="changes.seats" :options="seatOptions" multiple chips clearable
-                          :after="seatButtons" @change="seatChange" />
+                <q-select
+                    v-model="changes.seats"
+                    :options="seatOptions"
+                    multiple
+                    chips
+                    clearable
+                    :after="seatButtons"
+                />
             </q-field>
         </q-card-main>
         <q-inner-loading :visible="isLoading">
@@ -380,7 +432,7 @@
         },
         watch: {
             group() {
-                this.changes = this.getGroup()
+                this.changes = this.getGroup();
             }
         }
     }
diff --git a/src/components/pages/PbxConfiguration/CscPbxGroups.vue b/src/components/pages/PbxConfiguration/CscPbxGroups.vue
index 1c15d17a..55ce62af 100644
--- a/src/components/pages/PbxConfiguration/CscPbxGroups.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxGroups.vue
@@ -198,7 +198,7 @@
                 this.$store.dispatch('pbxConfig/setGroupHuntTimeout', group);
             },
             updateAliasNumbers(data) {
-                this.$store.dispatch('pbxConfig/updateAliasNumbers', data);
+                this.$store.dispatch('pbxConfig/updateGroupAliasNumbers', data);
             },
             updateSeats(data) {
                 this.$store.dispatch('pbxConfig/updateSeats', data);
diff --git a/src/components/pages/PbxConfiguration/CscPbxSeats.vue b/src/components/pages/PbxConfiguration/CscPbxSeats.vue
index b18e5c7c..2993e0dc 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSeats.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSeats.vue
@@ -168,7 +168,7 @@
                 this.$store.dispatch('pbxConfig/setSeatExtension', seat);
             },
             updateAliasNumbers(data) {
-                this.$store.dispatch('pbxConfig/updateAliasNumbers', data);
+                this.$store.dispatch('pbxConfig/updateSeatAliasNumbers', data);
             },
             updateGroups(data) {
                 this.$store.dispatch('pbxConfig/updateGroups', data);
diff --git a/src/store/pbx-config/actions.js b/src/store/pbx-config/actions.js
index ee5ab42d..a420e03a 100644
--- a/src/store/pbx-config/actions.js
+++ b/src/store/pbx-config/actions.js
@@ -28,7 +28,9 @@ import {
     getAllGroupsAndSeats,
     setStationName,
     setIdentifier,
-    setProfile
+    setProfile,
+    getGroup,
+    getSeat
 } from '../../api/pbx-config'
 
 export default {
@@ -58,11 +60,28 @@ export default {
             context.commit('addItemFailed', err.message);
         });
     },
+    reloadGroup(context, group) {
+        return new Promise((resolve, reject)=>{
+            context.commit('groupReloading', group);
+            getGroup(group.id).then(($group)=>{
+                context.commit('groupReloaded', $group);
+            }).catch((err)=>{
+                context.commit('groupReloadingFailed', {
+                    group: group,
+                    error: err.message
+                });
+            }).then(()=>{
+                resolve();
+            }).catch((err)=>{
+                reject(err);
+            });
+        });
+    },
     setGroupName(context, group) {
         context.commit('updateItemRequesting', group);
         context.commit('lastUpdatedField', {name: group.name, type: 'group name'});
         setGroupName(group.id, group.name).then(() => {
-            return context.dispatch('listGroups', true);
+            return context.dispatch('reloadGroup', group);
         }).then(()=>{
             context.commit('updateItemSucceeded');
         }).catch((err) => {
@@ -73,7 +92,7 @@ export default {
         context.commit('updateItemRequesting', group);
         context.commit('lastUpdatedField', {name: group.extension, type: 'group extension'});
         setGroupExtension(group.id, group.extension).then(()=>{
-            return context.dispatch('listGroups', true);
+            return context.dispatch('reloadGroup', group);
         }).then(() => {
             context.commit('updateItemSucceeded');
         }).catch((err) => {
@@ -84,7 +103,7 @@ export default {
         context.commit('updateItemRequesting', group);
         context.commit('lastUpdatedField', {name: group.huntPolicy + " ringing", type: 'group hunt policy'});
         setGroupHuntPolicy(group.id, group.huntPolicy).then(() => {
-            return context.dispatch('listGroups', true);
+            return context.dispatch('reloadGroup', group);
         }).then(()=>{
             context.commit('updateItemSucceeded');
         }).catch((err) => {
@@ -95,20 +114,33 @@ export default {
         context.commit('updateItemRequesting', group);
         context.commit('lastUpdatedField', {name: group.huntTimeout + " seconds", type: 'group hunt timeout'});
         setGroupHuntTimeout(group.id, group.huntTimeout).then(()=>{
-            return context.dispatch('listGroups', true);
+            return context.dispatch('reloadGroup', group);
         }).then(() => {
             context.commit('updateItemSucceeded');
         }).catch((err) => {
             context.commit('updateItemFailed', err.message);
         });
     },
-    updateAliasNumbers(context, data) {
+    updateGroupAliasNumbers(context, data) {
         context.commit('updateAliasNumbersRequesting', data.item);
         Promise.all([
             assignNumbers(data.add, data.item.id),
             assignNumbers(data.remove, context.getters.pilotId)
         ]).then(()=>{
-            return context.dispatch('listGroups', true);
+            return context.dispatch('reloadGroup', data.item);
+        }).then(()=>{
+            context.commit('updateAliasNumbersSucceeded');
+        }).catch((err)=>{
+            context.commit('updateAliasNumbersFailed', err.message);
+        });
+    },
+    updateSeatAliasNumbers(context, data) {
+        context.commit('updateAliasNumbersRequesting', data.item);
+        Promise.all([
+            assignNumbers(data.add, data.item.id),
+            assignNumbers(data.remove, context.getters.pilotId)
+        ]).then(()=>{
+            return context.dispatch('reloadSeat', data.item);
         }).then(()=>{
             context.commit('updateAliasNumbersSucceeded');
         }).catch((err)=>{
@@ -118,7 +150,7 @@ export default {
     updateSeats(context, group) {
         context.commit('updateGroupsAndSeatsRequesting', group);
         updateGroupSeats(group.id, group.seats).then(()=>{
-            return context.dispatch('listGroups', true);
+            return context.dispatch('reloadGroup', group);
         }).then(() => {
             context.commit('updateGroupsAndSeatsSucceeded');
         }).catch((err) => {
@@ -163,11 +195,28 @@ export default {
             context.commit('addItemFailed', err.message);
         });
     },
+    reloadSeat(context, seat) {
+        return new Promise((resolve, reject)=>{
+            context.commit('seatReloading', seat);
+            getSeat(seat.id).then(($seat)=>{
+                context.commit('seatReloaded', $seat);
+            }).catch((err)=>{
+                context.commit('seatReloadingFailed', {
+                    seat: seat,
+                    error: err.message
+                });
+            }).then(()=>{
+                resolve();
+            }).catch((err)=>{
+                reject(err);
+            });
+        });
+    },
     setSeatName(context, seat) {
         context.commit('updateItemRequesting', seat);
         context.commit('lastUpdatedField', {name: seat.name, type: 'seat name'});
         setSeatName(seat.id, seat.name).then(() => {
-            return context.dispatch('listSeats', true);
+            return context.dispatch('reloadSeat', seat);
         }).then(()=>{
             context.commit('updateItemSucceeded');
         }).catch((err) => {
@@ -178,7 +227,7 @@ export default {
         context.commit('updateItemRequesting', seat);
         context.commit('lastUpdatedField', {name: seat.extension, type: 'seat extension'});
         setSeatExtension(seat.id, seat.extension).then(()=>{
-            return context.dispatch('listSeats', true);
+            return context.dispatch('reloadSeat', seat);
         }).then(() => {
             context.commit('updateItemSucceeded');
         }).catch((err) => {
@@ -188,7 +237,7 @@ export default {
     updateGroups(context, seat) {
         context.commit('updateGroupsAndSeatsRequesting', seat);
         updateSeatGroups(seat.id, seat.groups).then(()=>{
-            return context.dispatch('listSeats', true);
+            return context.dispatch('reloadSeat', seat);
         }).then(() => {
             context.commit('updateGroupsAndSeatsSucceeded');
         }).catch((err) => {
diff --git a/src/store/pbx-config/mutations.js b/src/store/pbx-config/mutations.js
index 1ea51d0e..be05fad9 100644
--- a/src/store/pbx-config/mutations.js
+++ b/src/store/pbx-config/mutations.js
@@ -339,5 +339,53 @@ export default {
     },
     goToPage(state, page) {
         state.listCurrentPage = page;
+    },
+    groupReloading(state, group) {
+        state.groupReloadingState = RequestState.requesting;
+        state.groupReloadingError = null;
+        state.groupReloading = group;
+    },
+    groupReloaded(state, group) {
+        state.groupReloadingState = RequestState.succeeded;
+        state.groupReloadingError = null;
+        Vue.set(state.groups, group.id, group);
+        for(let i = 0; i < state.groupsOrdered.length; i++) {
+            if(state.groupsOrdered[i].id === group.id) {
+                state.groupsOrdered[i] = group;
+            }
+        }
+        let seatIds = _.get(group, 'pbx_groupmember_ids', []);
+        group.seats = [];
+        seatIds.forEach((seatId)=>{
+            group.seats.push(state.seats[seatId]);
+        });
+    },
+    groupReloadingFailed(state, err) {
+        state.groupReloadingState = RequestState.failed;
+        state.groupReloadingError = err;
+    },
+    seatReloading(state, seat) {
+        state.seatReloadingState = RequestState.requesting;
+        state.seatReloadingError = null;
+        state.seatReloading = seat;
+    },
+    seatReloaded(state, seat) {
+        state.seatReloadingState = RequestState.succeeded;
+        state.seatReloadingError = null;
+        Vue.set(state.seats, seat.id, seat);
+        for(let i = 0; i < state.seatsOrdered.length; i++) {
+            if(state.seatsOrdered[i].id === seat.id) {
+                state.seatsOrdered[i] = seat;
+            }
+        }
+        let groupIds = _.get(seat, 'pbx_group_ids', []);
+        seat.groups = [];
+        groupIds.forEach((groupId)=>{
+            seat.groups.push(state.groups[groupId]);
+        });
+    },
+    seatReloadingFailed(state, err) {
+        state.seatReloadingState = RequestState.failed;
+        state.seatReloadingError = err;
     }
 }
diff --git a/src/store/pbx-config/state.js b/src/store/pbx-config/state.js
index b47faed3..dce50a40 100644
--- a/src/store/pbx-config/state.js
+++ b/src/store/pbx-config/state.js
@@ -59,4 +59,10 @@ export default {
     modelImageStates: {},
     modelImageErrors: {},
     modelImages: {},
+    groupReloading: null,
+    groupReloadingState: RequestState.initiated,
+    groupReloadingError: null,
+    seatReloading: null,
+    seatReloadingState: RequestState.initiated,
+    seatReloadingError: null
 }