From 46aad5d56176951f40510c09bb4d45df7cb279ac Mon Sep 17 00:00:00 2001
From: Hans-Peter Herzog <hherzog@sipwise.com>
Date: Wed, 11 Apr 2018 12:52:24 +0200
Subject: [PATCH] TT#20517 PBXConfig: As a Customer, I want to edit PBX Seats

Change-Id: I48808fdb6931a4bf2737d9f3a2a23503b24353fd
---
 README.md                                     |  10 +
 src/api/pbx-config.js                         |  14 +-
 src/api/subscriber.js                         |   3 +
 .../pages/PbxConfiguration/CscPbxGroup.vue    |  22 +-
 .../PbxConfiguration/CscPbxGroupAddForm.vue   | 128 ++++-----
 .../pages/PbxConfiguration/CscPbxSeat.vue     | 257 +++++++++++++-----
 .../PbxConfiguration/CscPbxSeatAddForm.vue    | 169 ++++--------
 .../pages/PbxConfiguration/CscPbxSeatList.vue |  53 ----
 .../pages/PbxConfiguration/Groups.vue         | 247 ++++-------------
 .../pages/PbxConfiguration/Seats.vue          | 162 ++++++-----
 src/mixins/item-error.js                      |  34 +++
 src/store/common.js                           |  16 --
 src/store/pbx-config/actions.js               | 153 +++++++----
 src/store/pbx-config/getters.js               |  61 ++++-
 src/store/pbx-config/mutations.js             | 103 ++++---
 src/store/pbx-config/state.js                 |  25 +-
 16 files changed, 720 insertions(+), 737 deletions(-)
 delete mode 100644 src/components/pages/PbxConfiguration/CscPbxSeatList.vue
 create mode 100644 src/mixins/item-error.js

diff --git a/README.md b/README.md
index ef9427c2..91826803 100644
--- a/README.md
+++ b/README.md
@@ -76,6 +76,16 @@ You need a pbx subscriber to be able to access the pbx config specific modules i
 
     `enable: yes`
 
+1. Enable write access for subscriberadmins by adding "write" to subscriber privileges as in the following example
+
+    ```
+        www_admin
+          privileges:
+            subscriberadmin:
+              subscribers:
+              - write
+    ```
+
 1. Run ngcpcfg apply
 
     `ngcpcfg apply 'Enable pbx'`
diff --git a/src/api/pbx-config.js b/src/api/pbx-config.js
index 4704a8c2..bb521ffb 100644
--- a/src/api/pbx-config.js
+++ b/src/api/pbx-config.js
@@ -5,7 +5,7 @@ import { getJsonBody } from './utils';
 import { getNumbers, assignNumbers } from './user';
 import { createSubscriber, deleteSubscriber, setDisplayName,
     setPbxExtension, setPbxHuntPolicy, setPbxHuntTimeout,
-    setPbxGroupMemberIds } from './subscriber';
+    setPbxGroupMemberIds, setPbxGroupIds } from './subscriber';
 import uuid from 'uuid';
 
 var createId = uuid.v4;
@@ -154,3 +154,15 @@ export function setGroupHuntTimeout(id, huntTimeout) {
 export function updateGroupSeats(id, seatIds) {
     return setPbxGroupMemberIds(id, seatIds);
 }
+
+export function setSeatName(id, seatName) {
+    return setDisplayName(id, seatName);
+}
+
+export function setSeatExtension(id, seatExtension) {
+    return setPbxExtension(id, seatExtension);
+}
+
+export function updateSeatGroups(id, seatIds) {
+    return setPbxGroupIds(id, seatIds);
+}
diff --git a/src/api/subscriber.js b/src/api/subscriber.js
index 9552d506..185c1dbc 100644
--- a/src/api/subscriber.js
+++ b/src/api/subscriber.js
@@ -260,3 +260,6 @@ export function setPbxGroupMemberIds(id, ids) {
     return setField(id, 'pbx_groupmember_ids', ids);
 }
 
+export function setPbxGroupIds(id, ids) {
+    return setField(id, 'pbx_group_ids', ids);
+}
diff --git a/src/components/pages/PbxConfiguration/CscPbxGroup.vue b/src/components/pages/PbxConfiguration/CscPbxGroup.vue
index 197d6da1..c0ea34d1 100644
--- a/src/components/pages/PbxConfiguration/CscPbxGroup.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxGroup.vue
@@ -10,16 +10,19 @@
         </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" />
+                <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" />
+                <q-input v-model="changes.extension" type="number" :after="extensionButtons"
+                         @keyup.enter="saveExtension" />
             </q-field>
             <q-field :label="$t('pbxConfig.huntPolicy')">
-                <q-select v-model="changes.huntPolicy" :options="huntPolicyOptions" radio @change="huntPolicyChanged"/>
+                <q-select v-model="changes.huntPolicy" :options="huntPolicyOptions"
+                          radio @change="huntPolicyChanged"/>
             </q-field>
             <q-field :label="$t('pbxConfig.huntTimeout')">
-                <q-input v-model="changes.huntTimeout" type="number" suffix="seconds" :after="huntTimeoutButtons" min="0" />
+                <q-input v-model="changes.huntTimeout" type="number" suffix="seconds"
+                         :after="huntTimeoutButtons" min="0" @keyup.enter="saveHuntTimeout" />
             </q-field>
             <q-field :label="$t('pbxConfig.primaryNumber')">
                 <q-input v-model="primaryNumber" readonly disabled />
@@ -126,13 +129,6 @@
             isLoading() {
                 return this.loading;
             },
-            cardClasses() {
-                var cardClasses = ['csc-pbx-group'];
-                if(this.isLoading) {
-                    cardClasses.push('light-dimmed');
-                }
-                return cardClasses;
-            },
             titleIcon() {
                 if(this.expanded) {
                     return 'keyboard arrow down';
@@ -277,7 +273,7 @@
             },
             seatChanges() {
                 return !_.isEqual(this.changes.seats.sort(),
-                    this.numbersToIds(this.group.seats).sort());
+                    this.seatsToIds(this.group.seats).sort());
             },
             seatButtons() {
                 let buttons = [];
@@ -359,7 +355,7 @@
                 var numbersToAdd = _.difference(this.changes.aliasNumbers, oldNumbers);
                 var numbersToRemove = _.difference(oldNumbers, this.changes.aliasNumbers);
                 this.$emit('save-alias-numbers', {
-                    group: this.groupModel,
+                    item: this.groupModel,
                     add: numbersToAdd,
                     remove: numbersToRemove
                 });
diff --git a/src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue b/src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue
index 9f649993..447b5b6a 100644
--- a/src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue
@@ -2,40 +2,42 @@
     <q-card class="csc-pbx-group-add-form">
         <q-card-title>
             <q-icon name="add" color="primary" size="22px"/>
-            <span>Add Group</span>
+            <span>{{ $t('pbxConfig.addGroup') }}</span>
         </q-card-title>
         <q-card-main>
             <q-field>
-                <q-input :disabled="addGroupIsRequesting" ref="groupName" v-model="groupForm.name" autofocus
+                <q-input :disabled="loading" :readonly="loading" v-model="data.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-input :disabled="loading" :readonly="loading" type="number" v-model="data.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-select :disabled="loading" :readonly="loading" v-model="data.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-input :disabled="loading" :readonly="loading" type="number" v-model="data.huntTimeout" clearable
+                         :float-label="$t('pbxConfig.huntTimeout')" suffix="seconds" min="1" max="3600" />
             </q-field>
             <q-field>
-                <q-select :disabled="addGroupIsRequesting" v-model="groupForm.aliasNumbers" :float-label="$t('pbxConfig.aliasNumbers')"
-                          :options="aliasNumberOptions" multiple chips readonly clearable />
+                <q-select :disabled="loading" :readonly="loading" v-model="data.aliasNumbers" multiple chips clearable
+                          :float-label="$t('pbxConfig.aliasNumbers')" :options="aliasNumberOptions" />
             </q-field>
             <q-field>
-                <q-select :disabled="addGroupIsRequesting" v-model="groupForm.seats" :float-label="$t('pbxConfig.seats')"
-                          :options="seatOptions" multiple chips readonly clearable />
+                <q-select :disabled="loading" :readonly="loading" v-model="data.seats" multiple chips clearable
+                          :float-label="$t('pbxConfig.seats')" :options="seatOptions" />
             </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-btn v-if="!loading" flat color="secondary" icon="clear"
+                   @click="cancel()">{{ $t('buttons.cancel') }}</q-btn>
+            <q-btn v-if="!loading" flat color="primary" icon="done"
+                   @click="save()">{{ $t('buttons.save') }}</q-btn>
         </q-card-actions>
-        <q-inner-loading :visible="addGroupIsRequesting">
+        <q-inner-loading :visible="loading">
             <q-spinner-mat size="60px" color="primary"></q-spinner-mat>
         </q-inner-loading>
     </q-card>
@@ -43,78 +45,45 @@
 
 <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'
+    import { QCard, QCardTitle, QCardMain, QCardActions, QCardSeparator, QBtn,
+        QInnerLoading, QSpinnerMat, QField, QInput, QSelect, QIcon } from 'quasar-framework'
 
     export default {
+        name: 'csc-pbx-group-add-form',
+        props: [
+            'huntPolicyOptions',
+            'aliasNumberOptions',
+            'seatOptions',
+            'loading',
+        ],
         components: {
-            CscPage,
-            QChip,
-            QCard,
-            QCardSeparator,
-            QCardTitle,
-            QCardMain,
-            QCardActions,
-            QIcon,
-            QPopover,
-            QList,
-            QItem,
-            QItemMain,
-            QField,
-            QInput,
-            CscPbxGroup,
-            QBtn,
-            QSelect,
-            QInnerLoading,
-            QSpinnerDots,
-            QSpinnerMat,
-            Dialog
+            QCard, QCardTitle, QCardMain, QCardActions, QCardSeparator, QBtn,
+            QInnerLoading, QSpinnerMat, QField, QInput, QSelect, QIcon
         },
         data () {
             return {
-                group: {
+                data: this.getDefaults()
+            }
+        },
+        methods: {
+            getDefaults() {
+                return {
                     name: '',
                     extension: '',
                     huntPolicy: 'serial',
                     huntTimeout: 10,
                     aliasNumbers: [],
                     seats: []
-                },
-            }
-        },
-        computed: {
-
-        },
-        methods: {
-            save() {
-
+                }
             },
             cancel() {
-
+                this.$emit('cancel');
+            },
+            save() {
+                this.$emit('save', this.data);
+            },
+            reset() {
+                this.data = this.getDefaults();
             }
         }
     }
@@ -122,10 +91,9 @@
 
 <style lang="stylus" rel="stylesheet/stylus">
     @import '../../../themes/quasar.variables.styl';
-    .add-form {
-        position: relative;
-    }
-    .add-form .q-field:last-child {
-        margin-bottom: 36px;
-    }
+    .csc-pbx-group-add-form
+        position: relative
+    .csc-pbx-group-add-form
+        .q-field:last-child
+            margin-bottom: 36px
 </style>
diff --git a/src/components/pages/PbxConfiguration/CscPbxSeat.vue b/src/components/pages/PbxConfiguration/CscPbxSeat.vue
index cb17f062..c4fe0404 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSeat.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSeat.vue
@@ -2,32 +2,35 @@
     <q-card class="csc-pbx-seat">
         <q-card-title class="cursor-pointer" @click="toggleMain()">
             <q-icon name="person" color="primary" size="24px"/>
-            <span v-if="!expanded" class="csc-pbx-seat-title">{{ name }}</span>
-            <q-chip v-if="!expanded" pointing="left" color="primary">
-                {{ $t('pbxConfig.extension') }}: <span class="csc-important">{{ extension }}</span>
+            <span v-if="!expanded" class="csc-pbx-seat-title">{{ seat.display_name }}</span>
+            <q-chip v-if="!expanded" pointing="left" color="primary" class="gt-md">
+                {{ $t('pbxConfig.extension') }}: <span class="csc-important">{{ seat.pbx_extension }}</span>
             </q-chip>
             <q-icon :name="titleIcon" color="primary" size="22px" slot="right"/>
         </q-card-title>
-        <q-card-main v-if="expanded">
+        <q-card-main v-if="expanded" class="transition-generic">
             <q-field :label="$t('pbxConfig.seatName')">
-                <q-input v-model="name" readonly />
+                <q-input v-model="changes.name" :after="nameButtons" @keyup.enter="saveName" />
             </q-field>
             <q-field :label="$t('pbxConfig.extension')">
-                <q-input v-model="extension" readonly />
+                <q-input v-model="changes.extension" type="number"
+                         :after="extensionButtons" @keyup.enter="saveExtension" />
             </q-field>
             <q-field :label="$t('pbxConfig.primaryNumber')">
                 <q-input v-model="primaryNumber" readonly disabled />
             </q-field>
             <q-field :label="$t('pbxConfig.aliasNumbers')">
-                <q-select v-model="aliasNumbers" :options="aliasNumberOptions" multiple chips readonly clearable />
+                <q-select ref="aliasNumbers" v-model="changes.aliasNumbers" :options="aliasNumberOptions"
+                          multiple chips clearable :after="aliasNumberButtons" @change="aliasNumberChange"/>
             </q-field>
             <q-field :label="$t('pbxConfig.groups')">
-                <q-select v-model="groups" :options="groupOptions" multiple chips readonly clearable />
+                <q-select v-model="changes.groups" :options="groupOptions" multiple chips clearable
+                          :after="groupButtons" @change="groupChange" />
             </q-field>
         </q-card-main>
         <q-card-actions align="center">
-            <q-btn flat :small="isMobile" :round="isMobile" color="negative"
-                   icon="delete" @click="remove()">Delete</q-btn>
+            <q-btn flat :small="isMobile" :round="isMobile"
+                   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>
@@ -52,8 +55,7 @@
         QInnerLoading,
         QSpinnerMat,
         QTransition,
-        Platform,
-        Dialog
+        Platform
     } from 'quasar-framework'
     export default {
         name: 'csc-pbx-seat',
@@ -61,11 +63,12 @@
             'seat',
             'aliasNumberOptions',
             'groupOptions',
-            'deleting'
+            'loading'
         ],
         data () {
             return {
-                expanded: false
+                expanded: false,
+                changes: this.getSeat()
             }
         },
         components: {
@@ -96,43 +99,18 @@
             primaryNumber() {
                 return numberFilter(this.seat.primary_number);
             },
-            aliasNumbers() {
-                let numbers = [];
-                if(_.isArray(this.seat.alias_numbers)) {
-                    this.seat.alias_numbers.forEach((number)=>{
-                        numbers.push(number.number_id);
-                    });
-                }
-                return numbers;
-            },
-            groups() {
-                let groups = [];
-                if(_.isArray(this.seat.groups)) {
-                    this.seat.groups.forEach((group)=>{
-                        groups.push(group.id);
-                    });
-                }
-                return groups;
-            },
             seatModel() {
                 return {
                     id: this.id,
-                    name: this.name,
-                    extension: this.extension,
+                    name: this.changes.name,
+                    extension: this.changes.extension,
                     primaryNumber: this.primaryNumber,
-                    aliasNumbers: this.aliasNumbers,
-                    groups: this.groups
+                    aliasNumbers: this.changes.aliasNumbers,
+                    groups: this.changes.groups
                 }
             },
             isLoading() {
-                return this.deleting;
-            },
-            cardClasses() {
-                var cardClasses = ['csc-pbx-seat'];
-                if(this.isLoading) {
-                    cardClasses.push('light-dimmed');
-                }
-                return cardClasses;
+                return this.loading;
             },
             titleIcon() {
                 if(this.expanded) {
@@ -144,30 +122,187 @@
             },
             isMobile() {
                 return Platform.is.mobile;
+            },
+            nameHasChanges() {
+                return this.name !== this.changes.name;
+            },
+            nameButtons() {
+                let buttons = [];
+                let self = this;
+                if(this.nameHasChanges) {
+                    buttons.push({
+                            icon: 'check',
+                            error: false,
+                            handler (event) {
+                                event.stopPropagation();
+                                self.saveName();
+                            }
+                        }, {
+                            icon: 'clear',
+                            error: false,
+                            handler (event) {
+                                event.stopPropagation();
+                                self.resetName();
+                            }
+                        }
+                    );
+                }
+                return buttons;
+            },
+            extensionHasChanges() {
+                return this.extension + "" !== this.changes.extension + "";
+            },
+            extensionButtons() {
+                let buttons = [];
+                let self = this;
+                if(this.extensionHasChanges) {
+                    buttons.push({
+                            icon: 'check',
+                            error: false,
+                            handler (event) {
+                                event.stopPropagation();
+                                self.saveExtension();
+                            }
+                        }, {
+                            icon: 'clear',
+                            error: false,
+                            handler (event) {
+                                event.stopPropagation();
+                                self.resetExtension();
+                            }
+                        }
+                    );
+                }
+                return buttons;
+            },
+            aliasNumbersChanges() {
+                return !_.isEqual(this.changes.aliasNumbers.sort(),
+                    this.numbersToIds(this.seat.alias_numbers).sort());
+            },
+            aliasNumberButtons() {
+                let buttons = [];
+                let self = this;
+                if(this.aliasNumbersChanges) {
+                    buttons.push({
+                            icon: 'check',
+                            error: false,
+                            handler (event) {
+                                event.stopPropagation();
+                                self.saveAliasNumbers();
+                            }
+                        }, {
+                            icon: 'clear',
+                            error: false,
+                            handler (event) {
+                                event.stopPropagation();
+                                self.resetAliasNumbers();
+                            }
+                        }
+                    );
+                }
+                return buttons;
+            },
+            groupChanges() {
+                return !_.isEqual(this.changes.groups.sort(),
+                    this.groupsToIds(this.seat.groups).sort());
+            },
+            groupButtons() {
+                let buttons = [];
+                let self = this;
+                if(this.groupChanges) {
+                    buttons.push({
+                            icon: 'check',
+                            error: false,
+                            handler (event) {
+                                event.stopPropagation();
+                                self.saveGroups();
+                            }
+                        }, {
+                            icon: 'clear',
+                            error: false,
+                            handler (event) {
+                                event.stopPropagation();
+                                self.resetGroups();
+                            }
+                        }
+                    );
+                }
+                return buttons;
             }
         },
         methods: {
             toggleMain() {
-                this.expanded = !this.expanded
+                if(this.expanded) {
+                    this.expanded = false;
+                }
+                else {
+                    this.expanded = true;
+                }
             },
             remove() {
-                var state = this;
-                var i18n = this.$i18n;
-                Dialog.create({
-                    title: i18n.t('pbxConfig.removeSeatTitle'),
-                    message: i18n.t('pbxConfig.removeSeatText', { seat: this.name }),
-                    buttons: [
-                        'Cancel',
-                        {
-                            label: i18n.t('pbxConfig.removeSeat'),
-                            color: 'negative',
-                            handler () {
-                                state.loading = true;
-                                state.$emit('remove', state.seatModel);
-                            }
-                        }
-                    ]
+                this.$emit('remove', this.seatModel);
+            },
+            resetName() {
+                this.changes.name = this.seat.display_name;
+            },
+            saveName() {
+                this.$emit('save-name', this.seatModel);
+            },
+            resetExtension() {
+                this.changes.extension = this.seat.pbx_extension;
+            },
+            saveExtension() {
+                this.$emit('save-extension', this.seatModel);
+            },
+            numbersToIds(aliasNumbers) {
+                let numbers = [];
+                if(_.isArray(aliasNumbers)) {
+                    aliasNumbers.forEach((number) => {
+                        numbers.push(number.number_id);
+                    });
+                }
+                return numbers;
+            },
+            resetAliasNumbers() {
+                this.changes.aliasNumbers = this.numbersToIds(this.seat.alias_numbers);
+            },
+            saveAliasNumbers() {
+                var oldNumbers = this.numbersToIds(this.seat.alias_numbers);
+                var numbersToAdd = _.difference(this.changes.aliasNumbers, oldNumbers);
+                var numbersToRemove = _.difference(oldNumbers, this.changes.aliasNumbers);
+                this.$emit('save-alias-numbers', {
+                    item: this.seatModel,
+                    add: numbersToAdd,
+                    remove: numbersToRemove
                 });
+            },
+            getSeat() {
+                return {
+                    name: this.seat.display_name,
+                    extension: this.seat.pbx_extension,
+                    aliasNumbers: this.numbersToIds(this.seat.alias_numbers),
+                    groups: this.groupsToIds(this.seat.groups)
+                }
+            },
+            groupsToIds(groups) {
+                let groupIds = [];
+                if(_.isArray(groups)) {
+                    groups.forEach((group) => {
+                        groupIds.push(group.id);
+                    });
+                }
+                return groupIds;
+            },
+            resetGroups() {
+                this.changes.groups = this.groupsToIds(this.seat.groups);
+            },
+            saveGroups() {
+                this.$emit('save-groups', this.seatModel);
+            },
+        },
+        watch: {
+            seat() {
+                this.changes = this.getSeat()
             }
         }
     }
diff --git a/src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue b/src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue
index 7412116b..30d0e6a5 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue
@@ -1,111 +1,63 @@
 <template>
-    <div class="csc-add-form csc-pbx-seat-add-form">
-        <q-card v-if="enabled">
-            <q-card-title>
-                <q-icon name="add" color="primary" size="24px"/>
-                <span>{{ $t('pbxConfig.addSeat') }}</span>
-            </q-card-title>
-            <q-card-main>
-                <q-field>
-                    <q-input :disabled="isRequesting" ref="name" v-model="form.name" autofocus
-                             :float-label="$t('pbxConfig.seatName')" clearable />
-                </q-field>
-                <q-field>
-                    <q-input :disabled="isRequesting" type="number" v-model="form.extension" clearable
-                             min="1" max="1000000" :float-label="$t('pbxConfig.extension')"  />
-                </q-field>
-                <q-field>
-                    <q-select :disabled="isRequesting" v-model="form.aliasNumbers" multiple chips readonly clearable
-                              :float-label="$t('pbxConfig.aliasNumbers')" :options="aliasNumberOptions" />
-                </q-field>
-                <q-field>
-                    <q-select :disabled="isRequesting" v-model="form.groups" multiple chips readonly clearable
-                              :float-label="$t('pbxConfig.groups')" :options="groupOptions" />
-                </q-field>
-            </q-card-main>
-            <q-card-separator/>
-            <q-card-actions align="center">
-                <q-btn v-if="!isRequesting" flat color="secondary" icon="clear"
-                       @click="cancel()">{{ $t('buttons.cancel') }}</q-btn>
-                <q-btn loader v-model="isRequesting" flat color="primary" icon="done"
-                       @click="save()">{{ $t('buttons.save') }}</q-btn>
-            </q-card-actions>
-            <q-inner-loading :visible="isRequesting">
-                <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="add()">{{ $t('pbxConfig.addSeat') }}</q-btn>
-            </q-card-actions>
-        </q-card>
-    </div>
+    <q-card class="csc-pbx-seat-add-form">
+        <q-card-title>
+            <q-icon name="add" color="primary" size="22px"/>
+            <span>{{ $t('pbxConfig.addSeat') }}</span>
+        </q-card-title>
+        <q-card-main>
+            <q-field>
+                <q-input :disabled="loading" :readonly="loading" v-model="data.name" autofocus
+                         :float-label="$t('pbxConfig.seatName')"  clearable />
+            </q-field>
+            <q-field>
+                <q-input :disabled="loading" :readonly="loading" type="number" v-model="data.extension"
+                         clearable min="1" max="1000000" :float-label="$t('pbxConfig.extension')"  />
+            </q-field>
+            <q-field>
+                <q-select :disabled="loading" :readonly="loading" v-model="data.aliasNumbers" multiple chips clearable
+                          :float-label="$t('pbxConfig.aliasNumbers')" :options="aliasNumberOptions" />
+            </q-field>
+            <q-field>
+                <q-select :disabled="loading" :readonly="loading" v-model="data.groups" multiple chips clearable
+                          :float-label="$t('pbxConfig.groups')" :options="groupOptions" />
+            </q-field>
+        </q-card-main>
+        <q-card-separator/>
+        <q-card-actions align="center">
+            <q-btn v-if="!loading" flat color="secondary" icon="clear"
+                   @click="cancel()">{{ $t('buttons.cancel') }}</q-btn>
+            <q-btn v-if="!loading" flat color="primary" icon="done"
+                   @click="save()">{{ $t('buttons.save') }}</q-btn>
+        </q-card-actions>
+        <q-inner-loading :visible="loading">
+            <q-spinner-mat size="60px" color="primary"></q-spinner-mat>
+        </q-inner-loading>
+    </q-card>
 </template>
 
 <script>
-    import {
-        QChip,
-        QCard,
-        QCardSeparator,
-        QCardTitle,
-        QCardMain,
-        QCardActions,
-        QIcon,
-        QPopover,
-        QList,
-        QItem,
-        QItemMain,
-        QField,
-        QInput,
-        QBtn,
-        QSelect,
-        QInnerLoading,
-        QSpinnerDots,
-        QSpinnerMat,
-        Dialog
-    } from 'quasar-framework'
+
+    import { QCard, QCardTitle, QCardMain, QCardActions, QCardSeparator, QBtn,
+        QInnerLoading, QSpinnerMat, QField, QInput, QSelect, QIcon } from 'quasar-framework'
 
     export default {
         name: 'csc-pbx-seat-add-form',
         props: [
             'aliasNumberOptions',
-            'groupOptions'
+            'groupOptions',
+            'loading'
         ],
         components: {
-            QChip,
-            QCard,
-            QCardSeparator,
-            QCardTitle,
-            QCardMain,
-            QCardActions,
-            QIcon,
-            QPopover,
-            QList,
-            QItem,
-            QItemMain,
-            QField,
-            QInput,
-            QBtn,
-            QSelect,
-            QInnerLoading,
-            QSpinnerDots,
-            QSpinnerMat,
-            Dialog
+            QCard, QCardTitle, QCardMain, QCardActions, QCardSeparator, QBtn,
+            QInnerLoading, QSpinnerMat, QField, QInput, QSelect, QIcon
         },
         data () {
             return {
-                form: this.getDefaultData(),
-                enabled: false,
-                loading: false
-            }
-        },
-        computed: {
-            isRequesting() {
-                return this.loading;
+                data: this.getDefaults()
             }
         },
         methods: {
-            getDefaultData() {
+            getDefaults() {
                 return {
                     name: '',
                     extension: '',
@@ -114,28 +66,13 @@
                 }
             },
             cancel() {
-                this.enabled = false;
-            },
-            add() {
-                this.enabled = true;
-                this.form =  this.getDefaultData();
+                this.$emit('cancel');
             },
             save() {
-                this.loading = true;
-                this.$emit('save', {
-                    name: this.form.name,
-                    extension: this.form.extension,
-                    aliasNumbers: this.form.aliasNumbers,
-                    groups: this.form.groups
-                });
+                this.$emit('save', this.data);
             },
-            succeeded() {
-                this.loading = false;
-                this.enabled = false;
-            },
-            failed() {
-                this.loading = false;
-                this.enabled = true;
+            reset() {
+                this.data = this.getDefaults();
             }
         }
     }
@@ -143,11 +80,9 @@
 
 <style lang="stylus" rel="stylesheet/stylus">
     @import '../../../themes/quasar.variables.styl';
-
-    .csc-pbx-seat-add-form .q-card {
-        position: relative;
-    }
-    .csc-pbx-seat-add-form .q-card .q-field:last-child {
-        margin-bottom: 36px;
-    }
+    .csc-pbx-seat-add-form
+        position: relative
+    .csc-pbx-seat-add-form
+        .q-field:last-child
+            margin-bottom: 36px
 </style>
diff --git a/src/components/pages/PbxConfiguration/CscPbxSeatList.vue b/src/components/pages/PbxConfiguration/CscPbxSeatList.vue
deleted file mode 100644
index 15ed2ba1..00000000
--- a/src/components/pages/PbxConfiguration/CscPbxSeatList.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
-    <div class="csc-pbx-seat-list">
-        <q-card v-if="loading" flat>
-            <q-card-actions align="center">
-                <q-spinner-dots  color="primary" :size="40"/>
-            </q-card-actions>
-        </q-card>
-        <csc-pbx-seat v-for="seat in seats" :seat="seat" @remove="remove" :deleting="isDeleting(seat)"
-                      :alias-number-options="aliasNumberOptions" :group-options="groupOptions" />
-    </div>
-</template>
-
-<script>
-    import {
-        QCard,
-        QCardActions,
-        QSpinnerDots
-    } from 'quasar-framework'
-    import CscPbxSeat from './CscPbxSeat'
-
-    export default {
-        name: 'csc-pbx-seat-list',
-        components: {
-            QCard,
-            QCardActions,
-            QSpinnerDots,
-            CscPbxSeat
-        },
-        props: [
-            'seats',
-            'loading',
-            'aliasNumberOptions',
-            'groupOptions',
-            'deletingSeat'
-        ],
-        data () {
-            return {
-
-            }
-        },
-        methods: {
-            remove(seat) {
-                this.$emit('remove', seat);
-            },
-            isDeleting(seat) {
-                return this.deletingSeat !== null && seat.id === this.deletingSeat.id;
-            }
-        }
-    }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-</style>
diff --git a/src/components/pages/PbxConfiguration/Groups.vue b/src/components/pages/PbxConfiguration/Groups.vue
index ed09be8d..1d234045 100644
--- a/src/components/pages/PbxConfiguration/Groups.vue
+++ b/src/components/pages/PbxConfiguration/Groups.vue
@@ -1,58 +1,23 @@
 <template>
     <csc-page id="csc-page-pbx-groups" title="Groups">
-        <q-card v-if="groupFormEnabled" class="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/>
+        <csc-pbx-group-add-form v-show="addFormEnabled" ref="addForm" @save="addGroup" @cancel="disableAddForm"
+                                :loading="isAdding" :alias-number-options="aliasNumberOptions"
+                                :seat-options="seatOptions" :hunt-policy-options="huntPolicyOptions"/>
+        <q-card v-show="!addFormEnabled" flat>
             <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-btn color="primary" icon="add" flat @click="enableAddForm">
+                    {{ $t('pbxConfig.addGroup') }}
+                </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 && !listLoadingSilently" flat>
+        <q-card v-if="isListRequesting && !listLoadingSilently" 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" :key="group.id" :group="group" :alias-number-options="aliasNumberOptions"
                        :seat-options="seatOptions" :hunt-policy-options="huntPolicyOptions" @remove="removeGroup"
-                       :loading="isGroupUpdating(group.id)" @save-name="setGroupName" @save-extension="setGroupExtension"
+                       :loading="isItemLoading(group.id)" @save-name="setGroupName" @save-extension="setGroupExtension"
                         @save-hunt-policy="setGroupHuntPolicy" @save-hunt-timeout="setGroupHuntTimeout"
                         @save-alias-numbers="updateAliasNumbers" @save-seats="updateSeats" />
     </csc-page>
@@ -60,82 +25,35 @@
 
 <script>
     import { mapGetters } from 'vuex'
-    import { showGlobalError } 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
+    import CscPbxGroupAddForm  from './CscPbxGroupAddForm'
+    import { QChip, QCard, QCardSeparator, QCardTitle, QCardMain,
+        QCardActions, QIcon, QPopover, QList, QItem, QItemMain,
+        QField, QInput, QBtn, QSelect, QInnerLoading, QSpinnerDots,
+        QSpinnerMat, Dialog
     } from 'quasar-framework'
-    import numberFilter from '../../../filters/number'
+    import aliasNumberOptions from '../../../mixins/alias-number-options'
+    import itemError from '../../../mixins/item-error'
 
     export default {
+        mixins: [aliasNumberOptions, itemError],
         components: {
-            CscPage,
-            QChip,
-            QCard,
-            QCardSeparator,
-            QCardTitle,
-            QCardMain,
-            QCardActions,
-            QIcon,
-            QPopover,
-            QList,
-            QItem,
-            QItemMain,
-            QField,
-            QInput,
-            CscPbxGroup,
-            QBtn,
-            QSelect,
-            QInnerLoading,
-            QSpinnerDots,
-            QSpinnerMat,
-            Dialog
+            CscPage, CscPbxGroup, CscPbxGroupAddForm,
+            QChip, QCard, QCardSeparator, QCardTitle, QCardMain,
+            QCardActions, QIcon, QPopover, QList, QItem, QItemMain,
+            QField, QInput, QBtn, QSelect, QInnerLoading, QSpinnerDots,
+            QSpinnerMat, Dialog
         },
         mounted() {
             this.$store.dispatch('pbxConfig/listGroups');
         },
         data () {
             return {
-                groupForm: {
-                    name: '',
-                    extension: '',
-                    huntPolicy: 'serial',
-                    huntTimeout: 10,
-                    aliasNumbers: [],
-                    seats: []
-                },
-                groupFormEnabled: false,
+                addFormEnabled: false
             }
         },
         computed: {
-            groups() {
-                return this.$store.getters['pbxConfig/groups'];
-            },
-            seats() {
-                return this.$store.getters['pbxConfig/seats'];
-            },
-            aliasNumbers() {
-                return this.$store.getters['pbxConfig/aliasNumbers'];
-            },
             huntPolicyOptions() {
                 return [
                     {
@@ -156,31 +74,6 @@
                     }
                 ];
             },
-            aliasNumberOptions() {
-                let aliasNumber = [];
-                this.aliasNumbers.forEach((number)=>{
-                    let owner = this.$t('pbxConfig.allocatedByNobody');
-                    if(number.subscriber !== null && number.subscriber.display_name !== null &&
-                        number.subscriber.is_pbx_group) {
-                        owner = this.$t('pbxConfig.allocatedBy', {
-                            type: this.$t('pbxConfig.group'),
-                            name:  number.subscriber.display_name
-                        });
-                    }
-                    else if (number.subscriber !== null && number.subscriber.display_name !== null) {
-                        owner = this.$t('pbxConfig.allocatedBy', {
-                            type: this.$t('pbxConfig.seat'),
-                            name:  number.subscriber.display_name
-                        });
-                    }
-                    aliasNumber.push({
-                        label: numberFilter(number),
-                        sublabel: owner,
-                        value: number.id
-                    });
-                });
-                return aliasNumber;
-            },
             seatOptions() {
                 let seats = [];
                 this.seats.forEach((seat)=>{
@@ -192,87 +85,47 @@
                 });
                 return seats;
             },
-            listIsRequesting() {
-                return this.listState === 'requesting';
-            },
-            listState() {
-                return this.$store.state.pbxConfig.listAllState;
-            },
-            listError() {
-                return this.$store.state.pbxConfig.listAllError;
-            },
-            addGroupIsRequesting() {
-                return this.addGroupState === 'requesting';
-            },
-            addGroupState() {
-                return this.$store.state.pbxConfig.addGroupState;
-            },
-            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;
-            },
             ...mapGetters('pbxConfig', [
-                'listItemUpdating',
-                'listItemUpdateState',
-                'listItemUpdateError',
+                'groups',
+                'seats',
+                'aliasNumbers',
+                'addState',
+                'isAdding',
+                'isUpdating',
+                'updateItemId',
+                'isRemoving',
+                'removeItemId',
+                'isListRequesting',
+                'listState',
+                'listError',
                 'listLoadingSilently'
             ])
         },
         watch: {
-            addGroupState(state) {
-                if(state === 'failed') {
-                    showGlobalError(this.addGroupError);
-                }
+            addState(state) {
                 if(state === 'succeeded') {
-                    this.disableGroupForm();
-                }
-            },
-            removeGroupState(state) {
-                if(state === 'failed') {
-                    showGlobalError(this.removeGroupError);
-                }
-            },
-            listItemUpdateState(state) {
-                if(state === 'failed') {
-                    showGlobalError(this.listItemUpdateError);
+                    this.disableAddForm();
                 }
             }
         },
         methods: {
-            isGroupUpdating(groupId) {
-                return this.listItemUpdateState === 'requesting' &&
-                    this.listItemUpdating !== null &&
-                    this.listItemUpdating.id === groupId;
+            isItemLoading(groupId) {
+                return (this.isUpdating && this.updateItemId + "" === groupId + "") ||
+                    (this.isRemoving && this.removeItemId + "" === groupId + "");
             },
-            resetGroupForm() {
-                this.groupForm = {
-                    name: '',
-                    extension: '',
-                    huntPolicy: 'serial',
-                    huntTimeout: 10,
-                    aliasNumbers: [],
-                    seats: []
-                }
+            resetAddForm() {
+                this.$refs.addForm.reset();
             },
-            enableGroupForm() {
-                this.resetGroupForm();
-                this.groupFormEnabled = true;
+            enableAddForm() {
+                this.resetAddForm();
+                this.addFormEnabled = true;
             },
-            disableGroupForm() {
-                this.resetGroupForm();
-                this.groupFormEnabled = false;
+            disableAddForm() {
+                this.resetAddForm();
+                this.addFormEnabled = false;
             },
-            addGroup() {
-                this.$store.dispatch('pbxConfig/addGroup', this.groupForm);
+            addGroup(group) {
+                this.$store.dispatch('pbxConfig/addGroup', group);
             },
             removeGroup(group) {
                 var store = this.$store;
diff --git a/src/components/pages/PbxConfiguration/Seats.vue b/src/components/pages/PbxConfiguration/Seats.vue
index 94178d55..b85c6efc 100644
--- a/src/components/pages/PbxConfiguration/Seats.vue
+++ b/src/components/pages/PbxConfiguration/Seats.vue
@@ -1,60 +1,72 @@
 <template>
     <csc-page title="Seats">
-        <csc-pbx-seat-add-form ref="addForm" :alias-number-options="aliasNumberOptions"
-                               :group-options="groupOptions" @save="save" />
-        <csc-pbx-seat-list :alias-number-options="aliasNumberOptions" :group-options="groupOptions"
-                           :seats="seats" :loading="isListLoading" @remove="remove" :deleting-seat="deletingSeat" />
+        <csc-pbx-seat-add-form v-show="addFormEnabled" ref="addForm" :alias-number-options="aliasNumberOptions"
+                               :group-options="groupOptions" :loading="isAdding" @save="addSeat"
+                               @cancel="disableAddForm" />
+        <q-card v-show="!addFormEnabled" flat>
+            <q-card-actions align="center">
+                <q-btn color="primary" icon="add" flat @click="enableAddForm">
+                    {{ $t('pbxConfig.addSeat') }}
+                </q-btn>
+            </q-card-actions>
+        </q-card>
+        <q-card v-if="isListRequesting && !listLoadingSilently" flat>
+            <q-card-actions align="center">
+                <q-spinner-dots  color="primary" :size="40"/>
+            </q-card-actions>
+        </q-card>
+        <csc-pbx-seat v-for="seat in seats" :key="seat.id" :seat="seat" :alias-number-options="aliasNumberOptions"
+                      :group-options="groupOptions" @remove="removeSeat" :loading="isItemLoading(seat.id)"
+                      @save-name="setSeatName" @save-extension="setSeatExtension"
+                      @save-alias-numbers="updateAliasNumbers" @save-groups="updateGroups" />
     </csc-page>
 </template>
 
 <script>
     import CscPage  from '../../CscPage'
     import CscPbxSeatAddForm  from './CscPbxSeatAddForm'
-    import CscPbxSeatList  from './CscPbxSeatList'
+    import CscPbxSeat  from './CscPbxSeat'
     import { QChip, QCard, QCardSeparator, QCardTitle, QCardMain,
-        QIcon, QPopover, QList, QItem, QItemMain } from 'quasar-framework'
+        QCardActions, QIcon, QPopover, QList, QItem, QItemMain,
+        QField, QInput, QBtn, QSelect, QInnerLoading, QSpinnerDots,
+        QSpinnerMat, Dialog } from 'quasar-framework'
     import aliasNumberOptions from '../../../mixins/alias-number-options'
-    import { showGlobalError } from '../../../helpers/ui'
+    import itemError from '../../../mixins/item-error'
+//    import { showGlobalError } from '../../../helpers/ui'
+    import { mapGetters } from 'vuex'
 
     export default {
-        mixins: [aliasNumberOptions],
+        mixins: [aliasNumberOptions, itemError],
         mounted() {
             this.$store.dispatch('pbxConfig/listSeats');
         },
         data () {
-            return {}
+            return {
+                addFormEnabled: false
+            }
         },
         components: {
-            CscPage,
-            QChip,
-            QCard,
-            QCardSeparator,
-            QCardTitle,
-            QCardMain,
-            QIcon,
-            QPopover,
-            QList,
-            QItem,
-            QItemMain,
-            CscPbxSeatAddForm,
-            CscPbxSeatList
+            CscPage, CscPbxSeat, CscPbxSeatAddForm,
+            QChip, QCard, QCardSeparator, QCardTitle, QCardMain,
+            QCardActions, QIcon, QPopover, QList, QItem, QItemMain,
+            QField, QInput, QBtn, QSelect, QInnerLoading, QSpinnerDots,
+            QSpinnerMat, Dialog
         },
         computed: {
-            addFormSucceeded() {
-                return this.$store.state.pbxConfig.addSeatState === 'succeeded';
-            },
-            addFormFailed() {
-                return this.$store.state.pbxConfig.addSeatState === 'failed';
-            },
-            addFormError() {
-                return this.$store.state.pbxConfig.addSeatError;
-            },
-            isListLoading() {
-                return this.$store.state.pbxConfig.listAllState === 'requesting';
-            },
-            removeError() {
-                return this.$store.state.pbxConfig.removeSeatError;
-            },
+            ...mapGetters('pbxConfig', [
+                'seats',
+                'groups',
+                'addState',
+                'isAdding',
+                'isUpdating',
+                'updateItemId',
+                'isRemoving',
+                'removeItemId',
+                'isListRequesting',
+                'listState',
+                'listError',
+                'listLoadingSilently'
+            ]),
             groupOptions() {
                 let groups = [];
                 this.groups.forEach((group)=>{
@@ -65,39 +77,63 @@
                     });
                 });
                 return groups;
-            },
-            seats() {
-                return this.$store.getters['pbxConfig/seats'];
-            },
-            groups() {
-                return this.$store.getters['pbxConfig/groups'];
-            },
-            deletingSeat() {
-                return this.$store.state.pbxConfig.removeSeatItem;
+            }
+        },
+        watch: {
+            addState(state) {
+                if(state === 'succeeded') {
+                    this.disableAddForm();
+                }
             }
         },
         methods: {
-            save(seat) {
+            isItemLoading(seatId) {
+                return (this.isUpdating && this.updateItemId + "" === seatId + "") ||
+                    (this.isRemoving && this.removeItemId + "" === seatId + "");
+            },
+            resetAddForm() {
+                this.$refs.addForm.reset();
+            },
+            enableAddForm() {
+                this.resetAddForm();
+                this.addFormEnabled = true;
+            },
+            disableAddForm() {
+                this.resetAddForm();
+                this.addFormEnabled = false;
+            },
+            addSeat(seat) {
                 this.$store.dispatch('pbxConfig/addSeat', seat);
             },
-            remove(seat) {
-                this.$store.dispatch('pbxConfig/removeSeat', seat);
-            }
-        },
-        watch: {
-            addFormSucceeded() {
-                this.$refs.addForm.succeeded();
+            removeSeat(seat) {
+                var store = this.$store;
+                var i18n = this.$i18n;
+                Dialog.create({
+                    title: i18n.t('pbxConfig.removeSeatTitle'),
+                    message: i18n.t('pbxConfig.removeSeatText', { seat: seat.name }),
+                    buttons: [
+                        'Cancel',
+                        {
+                            label: i18n.t('pbxConfig.removeSeat'),
+                            color: 'negative',
+                            handler () {
+                                store.dispatch('pbxConfig/removeSeat', seat);
+                            }
+                        }
+                    ]
+                });
             },
-            addFormFailed() {
-                if(this.addFormError !== null) {
-                    this.$refs.addForm.failed();
-                    showGlobalError(this.addFormError);
-                }
+            setSeatName(seat) {
+                this.$store.dispatch('pbxConfig/setSeatName', seat);
             },
-            removeError() {
-                if(this.removeError !== null) {
-                    showGlobalError(this.removeError);
-                }
+            setSeatExtension(seat) {
+                this.$store.dispatch('pbxConfig/setSeatExtension', seat);
+            },
+            updateAliasNumbers(data) {
+                this.$store.dispatch('pbxConfig/updateAliasNumbers', data);
+            },
+            updateGroups(data) {
+                this.$store.dispatch('pbxConfig/updateGroups', data);
             }
         }
     }
diff --git a/src/mixins/item-error.js b/src/mixins/item-error.js
new file mode 100644
index 00000000..3e2372b9
--- /dev/null
+++ b/src/mixins/item-error.js
@@ -0,0 +1,34 @@
+'use strict';
+
+import { showGlobalError } from '../helpers/ui';
+import { mapGetters } from 'vuex'
+
+export default {
+    computed: {
+        ...mapGetters('pbxConfig', [
+            'addState',
+            'updateState',
+            'removeState',
+            'addError',
+            'updateError',
+            'removeError'
+        ]),
+    },
+    watch: {
+        addState(state) {
+            if(state === 'failed') {
+                showGlobalError(this.addError);
+            }
+        },
+        updateState(state) {
+            if(state === 'failed') {
+                showGlobalError(this.updateError);
+            }
+        },
+        removeState(state) {
+            if(state === 'failed') {
+                showGlobalError(this.removeError);
+            }
+        }
+    }
+};
diff --git a/src/store/common.js b/src/store/common.js
index 59cd5461..c465b84f 100644
--- a/src/store/common.js
+++ b/src/store/common.js
@@ -1,24 +1,8 @@
 'use strict';
 
 export const RequestState = {
-    requesting: 'requesting',
-    succeeded: 'succeeded',
-    failed: 'failed'
-};
-
-export const ListState = {
     initiated: 'initiated',
     requesting: 'requesting',
     succeeded: 'succeeded',
     failed: 'failed'
 };
-
-export const AddState = {
-    button: 'button',
-    input: 'input',
-    requesting: 'requesting',
-    succeeded: 'succeeded',
-    failed: 'failed'
-};
-
-export const RemoveState = ListState;
diff --git a/src/store/pbx-config/actions.js b/src/store/pbx-config/actions.js
index bf890d8b..8cfecbc3 100644
--- a/src/store/pbx-config/actions.js
+++ b/src/store/pbx-config/actions.js
@@ -3,128 +3,161 @@
 import { assignNumbers } from '../../api/user';
 import { getPbxConfiguration, addGroup,
     removeGroup, addSeat, removeSeat, setGroupName,
-    setGroupExtension, setGroupHuntPolicy, setGroupHuntTimeout, updateGroupSeats } from '../../api/pbx-config'
+    setGroupExtension, setGroupHuntPolicy, setGroupHuntTimeout,
+    updateGroupSeats, setSeatName, setSeatExtension, updateSeatGroups } from '../../api/pbx-config'
 
 export default {
-    listSeats(context, silent) {
-        return context.dispatch('listGroups', silent);
-    },
     listGroups(context, silent) {
         return new Promise((resolve, reject)=>{
-            context.commit('listAllRequesting', silent);
+            context.commit('listRequesting', silent);
             getPbxConfiguration().then((config)=>{
-                context.commit('listAllSucceeded', config);
+                context.commit('listSucceeded', config);
                 resolve();
             }).catch((err)=>{
-                context.commit('listAllFailed', err.message);
+                context.commit('listFailed', err.message);
                 reject(err);
             });
         });
     },
     addGroup(context, group) {
-        context.commit('addGroupRequesting');
         group.customerId = context.state.pilot.customer_id;
         group.domainId = context.state.pilot.domain_id;
+        context.commit('addItemRequesting', group);
         addGroup(group).then(()=>{
             return context.dispatch('listGroups', true);
         }).then(()=>{
-            context.commit('addGroupSucceeded');
+            context.commit('addItemSucceeded');
         }).catch((err)=>{
-            context.commit('addGroupFailed', err.message);
-        });
-    },
-    removeGroup(context, group) {
-        context.commit('updateListItemStarted', group);
-        removeGroup(group.id).then(()=>{
-            return context.dispatch('listGroups', true);
-        }).then(()=>{
-            context.commit('removeGroup', group);
-            context.commit('updateListItemSucceeded');
-        }).catch((err)=>{
-            context.commit('updateListItemFailed', err.message);
-        });
-    },
-    addSeat(context, seat) {
-        seat.customerId = context.state.pilot.customer_id;
-        seat.domainId = context.state.pilot.domain_id;
-        context.commit('addSeatRequesting', seat);
-        addSeat(seat).then(()=>{
-            context.commit('addSeatSucceeded', seat);
-            context.dispatch('listSeats', true);
-        }).catch((err)=>{
-            context.commit('addSeatFailed', err.message);
-        });
-    },
-    removeSeat(context, seat) {
-        context.commit('removeSeatRequesting', seat);
-        removeSeat(seat.id).then(()=>{
-            context.commit('removeSeatSucceeded');
-            context.dispatch('listSeats', true);
-        }).catch((err)=>{
-            context.commit('removeSeatFailed', err.message);
+            context.commit('addItemFailed', err.message);
         });
     },
     setGroupName(context, group) {
-        context.commit('updateListItemStarted', group);
+        context.commit('updateItemRequesting', group);
         setGroupName(group.id, group.name).then(() => {
             return context.dispatch('listGroups', true);
         }).then(()=>{
-            context.commit('updateListItemSucceeded');
+            context.commit('updateItemSucceeded');
         }).catch((err) => {
-            context.commit('updateListItemFailed', err.message);
+            context.commit('updateItemFailed', err.message);
         });
     },
     setGroupExtension(context, group) {
-        context.commit('updateListItemStarted', group);
+        context.commit('updateItemRequesting', group);
         setGroupExtension(group.id, group.extension).then(()=>{
             return context.dispatch('listGroups', true);
         }).then(() => {
-            context.commit('updateListItemSucceeded');
+            context.commit('updateItemSucceeded');
         }).catch((err) => {
-            context.commit('updateListItemFailed', err.message);
+            context.commit('updateItemFailed', err.message);
         });
     },
     setGroupHuntPolicy(context, group) {
-        context.commit('updateListItemStarted', group);
+        context.commit('updateItemRequesting', group);
         setGroupHuntPolicy(group.id, group.huntPolicy).then(() => {
             return context.dispatch('listGroups', true);
         }).then(()=>{
-            context.commit('updateListItemSucceeded');
+            context.commit('updateItemSucceeded');
         }).catch((err) => {
-            context.commit('updateListItemFailed', err.message);
+            context.commit('updateItemFailed', err.message);
         });
     },
     setGroupHuntTimeout(context, group) {
-        context.commit('updateListItemStarted', group);
+        context.commit('updateItemRequesting', group);
         setGroupHuntTimeout(group.id, group.huntTimeout).then(()=>{
             return context.dispatch('listGroups', true);
         }).then(() => {
-            context.commit('updateListItemSucceeded');
+            context.commit('updateItemSucceeded');
         }).catch((err) => {
-            context.commit('updateListItemFailed', err.message);
+            context.commit('updateItemFailed', err.message);
         });
     },
     updateAliasNumbers(context, data) {
-        context.commit('updateListItemStarted', data.group);
+        context.commit('updateItemRequesting', data.item);
         Promise.all([
-            assignNumbers(data.add, data.group.id),
+            assignNumbers(data.add, data.item.id),
             assignNumbers(data.remove, context.getters.pilotId)
         ]).then(()=>{
             return context.dispatch('listGroups', true);
         }).then(()=>{
-            context.commit('updateListItemSucceeded');
+            context.commit('updateItemSucceeded');
         }).catch((err)=>{
-            context.commit('updateListItemFailed', err.message);
+            context.commit('updateItemFailed', err.message);
         });
     },
     updateSeats(context, group) {
-        context.commit('updateListItemStarted', group);
+        context.commit('updateItemRequesting', group);
         updateGroupSeats(group.id, group.seats).then(()=>{
             return context.dispatch('listGroups', true);
         }).then(() => {
-            context.commit('updateListItemSucceeded');
+            context.commit('updateItemSucceeded');
         }).catch((err) => {
-            context.commit('updateListItemFailed', err.message);
+            context.commit('updateItemFailed', err.message);
+        });
+    },
+    removeGroup(context, group) {
+        context.commit('removeItemRequesting', group);
+        removeGroup(group.id).then(()=>{
+            return context.dispatch('listGroups', true);
+        }).then(()=>{
+            context.commit('removeGroup', group);
+            context.commit('removeItemSucceeded');
+        }).catch((err)=>{
+            context.commit('removeItemFailed', err.message);
+        });
+    },
+    listSeats(context, silent) {
+        return context.dispatch('listGroups', silent);
+    },
+    addSeat(context, seat) {
+        seat.customerId = context.state.pilot.customer_id;
+        seat.domainId = context.state.pilot.domain_id;
+        context.commit('addItemRequesting', seat);
+        addSeat(seat).then(()=>{
+            return context.dispatch('listGroups', true);
+        }).then(()=>{
+            context.commit('addItemSucceeded');
+        }).catch((err)=>{
+            context.commit('addItemFailed', err.message);
+        });
+    },
+    setSeatName(context, seat) {
+        context.commit('updateItemRequesting', seat);
+        setSeatName(seat.id, seat.name).then(() => {
+            return context.dispatch('listGroups', true);
+        }).then(()=>{
+            context.commit('updateItemSucceeded');
+        }).catch((err) => {
+            context.commit('updateItemFailed', err.message);
+        });
+    },
+    setSeatExtension(context, seat) {
+        context.commit('updateItemRequesting', seat);
+        setSeatExtension(seat.id, seat.extension).then(()=>{
+            return context.dispatch('listGroups', true);
+        }).then(() => {
+            context.commit('updateItemSucceeded');
+        }).catch((err) => {
+            context.commit('updateItemFailed', err.message);
+        });
+    },
+    updateGroups(context, seat) {
+        context.commit('updateItemRequesting', seat);
+        updateSeatGroups(seat.id, seat.groups).then(()=>{
+            return context.dispatch('listGroups', true);
+        }).then(() => {
+            context.commit('updateItemSucceeded');
+        }).catch((err) => {
+            context.commit('updateItemFailed', err.message);
+        });
+    },
+    removeSeat(context, seat) {
+        context.commit('removeItemRequesting', seat);
+        removeSeat(seat.id).then(()=>{
+            return context.dispatch('listGroups', true);
+        }).then(()=>{
+            context.commit('removeItemSucceeded');
+        }).catch((err)=>{
+            context.commit('removeItemFailed', err.message);
         });
     }
 }
diff --git a/src/store/pbx-config/getters.js b/src/store/pbx-config/getters.js
index f5bf7e42..b6c8996b 100644
--- a/src/store/pbx-config/getters.js
+++ b/src/store/pbx-config/getters.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import _ from 'lodash'
+import { RequestState } from '../common'
 
 export default {
     groups(state) {
@@ -36,19 +37,67 @@ export default {
         }
         return aliasNumbers;
     },
-    listItemUpdating(state) {
-        return state.listItemUpdating;
+    isListRequesting(state) {
+        return state.listState === RequestState.requesting;
     },
-    listItemUpdateState(state) {
-        return state.listItemUpdateState;
+    listState(state) {
+        return state.listState;
     },
-    listItemUpdateError(state) {
-        return state.listItemUpdateError;
+    listError(state) {
+        return state.listError;
     },
     listLoadingSilently(state) {
         return (state.listLoadingSilently === true);
     },
     pilotId(state) {
         return state.pilot.id;
+    },
+    isAdding(state) {
+        return state.addState === RequestState.requesting;
+    },
+    addState(state) {
+        return state.addState;
+    },
+    addItem(state) {
+        return state.addItem;
+    },
+    addError(state) {
+        return state.addError;
+    },
+    isUpdating(state) {
+        return state.updateState === RequestState.requesting;
+    },
+    updateState(state) {
+        return state.updateState;
+    },
+    updateItem(state) {
+        return state.updateItem;
+    },
+    updateItemId(state, getters) {
+        if(_.isObject(getters.updateItem)) {
+            return getters.updateItem.id;
+        }
+        return null;
+    },
+    updateError(state) {
+        return state.updateError;
+    },
+    isRemoving(state) {
+        return state.removeState === RequestState.requesting;
+    },
+    removeState(state) {
+        return state.removeState;
+    },
+    removeItem(state) {
+        return state.removeItem;
+    },
+    removeItemId(state, getters) {
+        if(_.isObject(getters.removeItem)) {
+            return getters.removeItem.id;
+        }
+        return null;
+    },
+    removeError(state) {
+        return state.removeError;
     }
 }
diff --git a/src/store/pbx-config/mutations.js b/src/store/pbx-config/mutations.js
index 4d150d18..bbe66711 100644
--- a/src/store/pbx-config/mutations.js
+++ b/src/store/pbx-config/mutations.js
@@ -1,16 +1,17 @@
 'use strict';
 
 import _ from 'lodash'
-import { ListState, AddState, RemoveState } from '../common'
+import { RequestState } from '../common'
 
 export default {
-    listAllRequesting(state, silent) {
-        state.listAllState = ListState.requesting;
+    listRequesting(state, silent) {
+        state.listState = RequestState.requesting;
+        state.listError = null;
         state.listLoadingSilently = silent;
     },
-    listAllSucceeded(state, all) {
-        state.listAllState = ListState.succeeded;
-        state.listAllError = null;
+    listSucceeded(state, all) {
+        state.listState = RequestState.succeeded;
+        state.listError = null;
         state.pilot = all.pilot;
         state.groups = {};
         state.groupsOrdered = [];
@@ -55,21 +56,48 @@ export default {
         _.reverse(state.groupsOrdered);
         _.reverse(state.seatsOrdered);
     },
-    listAllFailed(state, error) {
-        state.listAllState = ListState.failed;
-        state.listAllError = error;
+    listFailed(state, error) {
+        state.listState = RequestState.failed;
+        state.listError = error;
     },
-    addGroupRequesting(state){
-        state.addGroupState = AddState.requesting;
-        state.addGroupError = null;
+    addItemRequesting(state, item) {
+        state.addState = RequestState.requesting;
+        state.addError = null;
+        state.addItem = item;
     },
-    addGroupSucceeded(state){
-        state.addGroupState = AddState.succeeded;
-        state.addGroupError = null;
+    addItemSucceeded(state) {
+        state.addState = RequestState.succeeded;
+        state.addError = null;
     },
-    addGroupFailed(state, error) {
-        state.addGroupState = AddState.failed;
-        state.addGroupError = error;
+    addItemFailed(state, error) {
+        state.addState = RequestState.failed;
+        state.addError = error;
+    },
+    updateItemRequesting(state, item) {
+        state.updateState = RequestState.requesting;
+        state.updateError = null;
+        state.updateItem = item;
+    },
+    updateItemSucceeded(state) {
+        state.updateState = RequestState.succeeded;
+        state.updateError = null;
+    },
+    updateItemFailed(state, error) {
+        state.updateState = RequestState.failed;
+        state.updateError = error;
+    },
+    removeItemRequesting(state, item) {
+        state.removeState = RequestState.requesting;
+        state.removeError = null;
+        state.removeItem = item;
+    },
+    removeItemSucceeded(state) {
+        state.removeState = RequestState.succeeded;
+        state.removeError = null;
+    },
+    removeItemFailed(state, error) {
+        state.removeState = RequestState.failed;
+        state.removeError = error;
     },
     removeGroup(state, group) {
         delete state.groups[group.id];
@@ -78,44 +106,5 @@ export default {
                 delete state.groupsOrdered[index];
             }
         });
-    },
-    addSeatRequesting(state){
-        state.addSeatState = AddState.requesting;
-        state.addSeatError = null;
-    },
-    addSeatSucceeded(state){
-        state.addSeatState = AddState.succeeded;
-        state.addSeatError = null;
-    },
-    addSeatFailed(state, error) {
-        state.addSeatState = AddState.failed;
-        state.addSeatError = error;
-    },
-    removeSeatRequesting(state, seat) {
-        state.removeSeatState = RemoveState.requesting;
-        state.removeSeatError = null;
-        state.removeSeatItem = seat;
-    },
-    removeSeatSucceeded(state) {
-        state.removeSeatState = RemoveState.succeeded;
-        state.removeSeatError = null;
-    },
-    removeSeatFailed(state, message) {
-        state.removeSeatState = RemoveState.failed;
-        state.removeSeatError = message;
-        state.removeSeatItem = null;
-    },
-    updateListItemStarted(state, item) {
-        state.listItemUpdateState = 'requesting';
-        state.listItemUpdating = item;
-    },
-    updateListItemSucceeded(state) {
-        state.listItemUpdateState = 'succeeded';
-        state.listItemUpdating = null;
-    },
-    updateListItemFailed(state, error) {
-        state.listItemUpdateState = 'failed';
-        state.listItemUpdating = null;
-        state.listItemUpdateError = error;
     }
 }
diff --git a/src/store/pbx-config/state.js b/src/store/pbx-config/state.js
index 60f94688..a865fca5 100644
--- a/src/store/pbx-config/state.js
+++ b/src/store/pbx-config/state.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import { ListState, AddState, RemoveState } from '../common'
+import { RequestState } from '../common'
 
 export default {
     pilot: null,
@@ -10,17 +10,16 @@ export default {
     seatsOrdered: [],
     numbers: [],
     numbersMap : {},
-    listAllState: ListState.initiated,
-    listAllError: null,
+    listState: RequestState.initiated,
+    listError: null,
     listLoadingSilently: false,
-    addGroupState: AddState.button,
-    addGroupError: null,
-    addSeatState: AddState.button,
-    addSeatError: null,
-    removeSeatState: RemoveState.initiated,
-    removeSeatError: null,
-    removeSeatItem: null,
-    listItemUpdating: null,
-    listItemUpdateState: null,
-    listItemUpdateError: null
+    addState: RequestState.initiated,
+    addError: null,
+    addItem: null,
+    updateState: RequestState.initiated,
+    updateError: null,
+    updateItem: null,
+    removeState: RequestState.initiated,
+    removeError: null,
+    removeItem: null
 }