From 8030e05ed1f262a4d011802bc7c18daf30a5a95d Mon Sep 17 00:00:00 2001
From: "CORP\\franci11" <georges.francisco@al-enterprise.com>
Date: Wed, 30 Nov 2022 18:25:08 +0100
Subject: [PATCH] MT#56083 [CSC] PBX Configuration > Groups configuration
 should be displayed like Seats

Change-Id: I19324c34d904b48c823de9689bb6ea93df701335
---
 src/api/pbx-groups.js                         |  10 +-
 .../pages/PbxConfiguration/CscPbxGroup.vue    | 412 ++--------------
 .../pages/PbxConfiguration/CscPbxSeat.vue     |   2 +-
 src/pages/CscPagePbxGroupDetails.vue          | 441 ++++++++++++++++++
 src/pages/CscPagePbxGroups.vue                |  60 +--
 src/router/routes.js                          |  13 +
 src/store/pbx-groups.js                       |  17 +-
 7 files changed, 511 insertions(+), 444 deletions(-)
 create mode 100644 src/pages/CscPagePbxGroupDetails.vue

diff --git a/src/api/pbx-groups.js b/src/api/pbx-groups.js
index 4e7d69f9..b5f44175 100644
--- a/src/api/pbx-groups.js
+++ b/src/api/pbx-groups.js
@@ -232,7 +232,15 @@ export function setGroupNumbers (options) {
             assignedNumbers: options.assignedNumbers,
             unassignedNumbers: options.unassignedNumbers
         }).then((result) => {
-            resolve(result)
+            if (result.subscriber !== null && result.preferences !== null) {
+                return result
+            }
+            return getSubscriberAndPreferences(options.groupId)
+        }).then((result) => {
+            resolve({
+                group: result.subscriber,
+                preferences: result.preferences
+            })
         }).catch((err) => {
             reject(err)
         })
diff --git a/src/components/pages/PbxConfiguration/CscPbxGroup.vue b/src/components/pages/PbxConfiguration/CscPbxGroup.vue
index 352c9ff2..2a2b985f 100644
--- a/src/components/pages/PbxConfiguration/CscPbxGroup.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxGroup.vue
@@ -1,28 +1,30 @@
 <template>
-    <csc-list-item
-        ref="listItem"
-        icon="group"
-        :expanded="expanded"
-        :odd="odd"
-        :loading="loading"
-        @toggle="toggle"
+    <q-item
+        class="cursor-pointer"
+        @click.native="showGroupDetails"
     >
-        <template
-            slot="title"
+        <q-item-section
+                side
+                center
+                no-wrap
         >
+            <q-icon
+                name="group"
+                color="white"
+            /> 
+        </q-item-section>
+        <q-item-section>
             <csc-list-item-title>
                 {{ group | groupName }}
             </csc-list-item-title>
             <q-slide-transition>
                 <csc-list-item-subtitle
-                    v-if="!expanded"
                 >
                     {{ $t('Extension') }}: {{ group.pbx_extension }}
                 </csc-list-item-subtitle>
             </q-slide-transition>
             <q-slide-transition>
                 <csc-list-item-subtitle
-                    v-if="!expanded"
                 >
                     <span
                         v-if="group.pbx_groupmember_ids.length > 0"
@@ -52,196 +54,40 @@
                     </span>
                 </csc-list-item-subtitle>
             </q-slide-transition>
-        </template>
-        <template
-            slot="menu"
+        </q-item-section>
+        <q-item-section
+            side
+            top
         >
-            <csc-list-menu-item
-                icon="delete"
-                icon-color="negative"
-                @click="deleteSeat"
-            >
-                {{ $t('Remove') }}
-            </csc-list-menu-item>
-        </template>
-        <template slot="body">
-            <q-input
-                v-model="changes.name"
-                :label="$t('Name')"
-                @keyup.enter="save"
-            >
-                <template
-                    v-if="hasNameChanged"
-                    v-slot:append
-                >
-                    <csc-input-button-save
-                        @click.stop="save"
-                    />
-                    <csc-input-button-reset
-                        @click.stop="resetName"
-                    />
-                </template>
-            </q-input>
-            <q-input
-                v-model="changes.extension"
-                hide-hint
-                :error="$v.changes.extension.$error"
-                :error-message="extensionErrorMessage"
-                :label="$t('Extension')"
-                :hint="getExtensionHint"
-                @keyup.enter="save"
-                @input="$v.changes.extension.$touch"
-            >
-                <template
-                    v-if="hasExtensionChanged"
-                    v-slot:append
-                >
-                    <csc-input-button-save
-                        @click.stop="save"
-                    />
-                    <csc-input-button-reset
-                        @click.stop="resetExtension"
-                    />
-                </template>
-            </q-input>
-            <q-input
-                readonly
-                disable
-                :value="getPrimaryNumber"
-                :label="$t('Primary Number')"
-            />
-            <q-select
-                v-model="changes.huntPolicy"
-                emit-value
-                map-options
-                radio
-                :label="$t('Hunt Policy')"
-                :options="huntPolicyOptions"
-            >
-                <template
-                    v-if="hasHuntPolicyChanged"
-                    v-slot:append
-                >
-                    <csc-input-button-save
-                        @click.stop="save"
-                    />
-                    <csc-input-button-reset
-                        @click.stop="resetHuntPolicy"
-                    />
-                </template>
-            </q-select>
-            <q-input
-                v-model="changes.huntTimeout"
-                :label="$t('Hunt Timeout')"
-                @keyup.enter="save"
-            >
-                <template
-                    v-if="hasHuntTimeoutChanged"
-                    v-slot:append
-                >
-                    <csc-input-button-save
-                        @click.stop="save"
-                    />
-                    <csc-input-button-reset
-                        @click.stop="resetHuntTimeout"
-                    />
-                </template>
-            </q-input>
-            <q-select
-                v-model="changes.aliasNumbers"
-                emit-value
-                map-options
-                use-chips
-                multiple
-                :label="$t('Alias Numbers')"
-                :options="aliasNumberOptions"
-            >
-                <template
-                    v-if="hasAliasNumbersChanged"
-                    v-slot:append
-                >
-                    <csc-input-button-save
-                        @click.stop="save"
-                    />
-                    <csc-input-button-reset
-                        @click.stop="resetAliasNumbers"
-                    />
-                </template>
-            </q-select>
-            <q-select
-                v-model="changes.seats"
-                emit-value
-                map-options
-                use-chips
-                multiple
-                :label="$t('Seats')"
-                :options="seatOptions"
-            >
-                <template
-                    v-if="hasSeatsChanged"
-                    v-slot:append
-                >
-                    <csc-input-button-save
-                        @click.stop="save"
-                    />
-                    <csc-input-button-reset
-                        @click.stop="resetSeats"
-                    />
-                </template>
-            </q-select>
-            <q-select
-                v-model="changes.soundSet"
-                emit-value
-                map-options
-                radio
-                :label="$t('Sound Set')"
-                :options="soundSetOptions"
-            >
-                <template
-                    v-if="hasSoundSetChanged"
-                    v-slot:append
-                >
-                    <csc-input-button-save
-                        @click.stop="save"
-                    />
-                    <csc-input-button-reset
-                        @click.stop="resetSoundSet"
-                    />
-                </template>
-            </q-select>
-            <q-btn
-                v-if="hasCallQueue"
-                icon="filter_none"
-                flat
-                color="primary"
-                :label="$t('Call Queue')"
-                @click="jumpToCallQueue"
-            />
-        </template>
-    </csc-list-item>
+            <csc-more-menu>
+                <csc-popup-menu-item
+                    icon="delete"
+                    color="negative"
+                    :label="$t('Remove')"
+                    @click="deleteGroup"
+                />
+            </csc-more-menu>
+        </q-item-section>
+    </q-item>
 </template>
 
 <script>
 import _ from 'lodash'
-import { mapGetters } from 'vuex'
-import { between } from 'vuelidate/lib/validators'
-import { inRange } from 'src/helpers/validation'
 import CscListItem from '../../CscListItem'
 import CscListItemTitle from '../../CscListItemTitle'
 import CscListItemSubtitle from '../../CscListItemSubtitle'
 import CscListMenuItem from '../../CscListMenuItem'
-import numberFilter from '../../../filters/number'
-import CscInputButtonSave from 'components/form/CscInputButtonSave'
-import CscInputButtonReset from 'components/form/CscInputButtonReset'
+import CscMoreMenu from 'components/CscMoreMenu'
+import CscPopupMenuItem from 'components/CscPopupMenuItem'
 export default {
     name: 'CscPbxGroup',
     components: {
-        CscInputButtonReset,
-        CscInputButtonSave,
         CscListMenuItem,
         CscListItem,
         CscListItemTitle,
-        CscListItemSubtitle
+        CscListItemSubtitle,
+        CscPopupMenuItem,
+        CscMoreMenu,
     },
     props: {
         group: {
@@ -252,34 +98,10 @@ export default {
             type: Object,
             default: null
         },
-        soundSet: {
-            type: Object,
-            default: null
-        },
-        expanded: {
-            type: Boolean,
-            default: false
-        },
         loading: {
             type: Boolean,
             default: false
         },
-        aliasNumberOptions: {
-            type: Array,
-            default: () => []
-        },
-        seatOptions: {
-            type: Array,
-            default: () => []
-        },
-        soundSetOptions: {
-            type: Array,
-            default: () => []
-        },
-        huntPolicyOptions: {
-            type: Array,
-            default: () => []
-        },
         odd: {
             type: Boolean,
             default: false
@@ -287,181 +109,17 @@ export default {
         labelWidth: {
             type: Number,
             default: null
-        },
-        hasCallQueue: {
-            type: Boolean,
-            default: false
-        }
-    },
-    validations: {
-        changes: {
-            extension: {
-                isInRange: function (value) {
-                    return inRange(value, this.getMinAllowedExtension, this.getMaxAllowedExtension, between)
-                }
-            }
-        }
-    },
-    data () {
-        return {
-            changes: this.getGroupData()
-        }
-    },
-    computed: {
-        ...mapGetters('pbx', [
-            'getExtensionHint',
-            'getMinAllowedExtension',
-            'getMaxAllowedExtension'
-        ]),
-        getPrimaryNumber () {
-            return numberFilter(this.group.primary_number)
-        },
-        hasNameChanged () {
-            return this.changes.name !== this.group.display_name
-        },
-        hasExtensionChanged () {
-            return this.changes.extension !== this.group.pbx_extension
-        },
-        hasHuntPolicyChanged () {
-            return this.changes.huntPolicy !== this.group.pbx_hunt_policy
-        },
-        hasHuntTimeoutChanged () {
-            return this.changes.huntTimeout !== this.group.pbx_hunt_timeout
-        },
-        hasAliasNumbersChanged () {
-            const aliasNumbers = _.clone(this.changes.aliasNumbers)
-            return !_.isEqual(aliasNumbers.sort(), this.getAliasNumberIds().sort())
-        },
-        hasSeatsChanged () {
-            const seatIds1 = _.clone(this.changes.seats)
-            const seatIds2 = _.clone(this.group.pbx_groupmember_ids)
-            return !_.isEqual(seatIds1.sort(), seatIds2.sort())
-        },
-        hasSoundSetChanged () {
-            return this.changes.soundSet !== this.getSoundSetId()
-        },
-        extensionErrorMessage () {
-            if (!this.$v.changes.extension.isInRange) {
-                return this.getExtensionHint
-            } else {
-                return ''
-            }
-        }
-    },
-    watch: {
-        group () {
-            this.changes = this.getGroupData()
         }
     },
     methods: {
-        getAliasNumberIds () {
-            const numberIds = []
-            this.group.alias_numbers.forEach((number) => {
-                numberIds.push(number.number_id)
-            })
-            return numberIds
-        },
-        getSeatIds () {
-            return _.clone(this.group.pbx_groupmember_ids)
-        },
-        getSoundSetId () {
-            if (this.soundSet !== null) {
-                return this.soundSet.id
-            }
-            return null
-        },
-        getGroupData () {
-            return {
-                name: this.group.display_name,
-                extension: this.group.pbx_extension,
-                huntPolicy: this.group.pbx_hunt_policy,
-                huntTimeout: this.group.pbx_hunt_timeout,
-                aliasNumbers: this.getAliasNumberIds(),
-                seats: this.getSeatIds(),
-                soundSet: this.getSoundSetId()
-            }
-        },
-        toggle () {
-            if (this.expanded) {
-                this.$emit('collapse')
-            } else {
-                this.$emit('expand')
-            }
-        },
-        resetName () {
-            this.changes.name = this.group.display_name
-        },
-        resetExtension () {
-            this.changes.extension = this.group.pbx_extension
-        },
-        resetHuntPolicy () {
-            this.changes.huntPolicy = this.group.pbx_hunt_policy
-        },
-        resetHuntTimeout () {
-            this.changes.huntTimeout = this.group.pbx_hunt_timeout
-        },
-        resetAliasNumbers () {
-            this.changes.aliasNumbers = this.getAliasNumberIds()
-        },
-        resetSeats () {
-            this.changes.seats = this.getSeatIds()
-        },
-        resetSoundSet () {
-            this.changes.soundSet = this.getSoundSetId()
-        },
-        deleteSeat () {
+        deleteGroup () {
             if (this.$refs.listItem) {
                 this.$refs.listItem.closePopoverMenu()
             }
             this.$emit('remove')
         },
-        jumpToCallQueue () {
-            this.$emit('jump-to-call-queue', this.group)
-        },
-        save () {
-            if (this.hasNameChanged) {
-                this.$emit('save-name', {
-                    groupId: this.group.id,
-                    groupName: this.changes.name
-                })
-            }
-            if (this.hasExtensionChanged) {
-                this.$emit('save-extension', {
-                    groupId: this.group.id,
-                    groupExtension: this.changes.extension
-                })
-            }
-            if (this.hasHuntPolicyChanged) {
-                this.$emit('save-hunt-policy', {
-                    groupId: this.group.id,
-                    groupHuntPolicy: this.changes.huntPolicy
-                })
-            }
-            if (this.hasHuntTimeoutChanged) {
-                this.$emit('save-hunt-timeout', {
-                    groupId: this.group.id,
-                    groupHuntTimeout: this.changes.huntTimeout
-                })
-            }
-            if (this.hasAliasNumbersChanged) {
-                this.$emit('save-alias-numbers', {
-                    groupId: this.group.id,
-                    assignedNumbers: _.difference(this.changes.aliasNumbers, this.getAliasNumberIds()),
-                    unassignedNumbers: _.difference(this.getAliasNumberIds(), this.changes.aliasNumbers)
-                })
-            }
-            if (this.hasSeatsChanged) {
-                this.$emit('save-seats', {
-                    groupId: this.group.id,
-                    seatIds: this.changes.seats
-                })
-            }
-            if (this.hasSoundSetChanged) {
-                this.$emit('save-sound-set', {
-                    groupId: this.group.id,
-                    soundSetId: this.changes.soundSet
-                })
-            }
+        showGroupDetails () {
+            this.$router.push('/user/pbx-configuration/group/'+this.group.id)
         }
     }
 }
diff --git a/src/components/pages/PbxConfiguration/CscPbxSeat.vue b/src/components/pages/PbxConfiguration/CscPbxSeat.vue
index 30379c49..55e5902c 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSeat.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSeat.vue
@@ -12,7 +12,7 @@
             <q-icon
                 name="person"
                 color="white"
-            />
+            /> 
         </q-item-section>
         <q-item-section>
             <q-item-label
diff --git a/src/pages/CscPagePbxGroupDetails.vue b/src/pages/CscPagePbxGroupDetails.vue
new file mode 100644
index 00000000..55d99cc2
--- /dev/null
+++ b/src/pages/CscPagePbxGroupDetails.vue
@@ -0,0 +1,441 @@
+<template>
+    <csc-page-sticky
+        v-if="groupSelected"
+        id="csc-page-pbx-group-details"
+        class="row q-pa-lg"
+    >
+        <template
+            v-slot:header-align-left
+        >
+            <q-breadcrumbs
+                class="text-weight-light q-mr-md"
+                active-color="primary"
+                separator-color="primary"
+            >
+                <q-breadcrumbs-el
+                    key="groups"
+                    class="cursor-pointer"
+                    to="/user/pbx-configuration/groups"
+                    :label="$t('Groups')"
+                    icon="group"
+                />
+                <q-breadcrumbs-el
+                    key="group"
+                    :label="groupSelected.display_name"
+                />
+            </q-breadcrumbs>
+        </template>
+        <q-item
+            class="col col-xs-12 col-md-6"
+        >
+            <q-list
+                v-if="changes"
+                class="col"
+                side
+                top
+                no-wrap
+            >
+                <q-input
+                    v-model="changes.name"
+                    :label="$t('Name')"
+                    :disable="isLoading"
+                    @keyup.enter="save"
+                >
+                    <template
+                        v-if="hasNameChanged"
+                        v-slot:append
+                    >
+                        <csc-input-button-save
+                            @click.stop="save"
+                        />
+                        <csc-input-button-reset
+                            @click.stop="resetName"
+                        />
+                    </template>
+                </q-input>
+                <q-input
+                    v-model="changes.extension"
+                    hide-hint
+                    :error="$v.changes.extension.$error"
+                    :error-message="extensionErrorMessage"
+                    :label="$t('Extension')"
+                    :hint="getExtensionHint"
+                    :disable="isLoading"
+                    @keyup.enter="save"
+                    @input="$v.changes.extension.$touch"
+                >
+                    <template
+                        v-if="hasExtensionChanged"
+                        v-slot:append
+                    >
+                        <csc-input-button-save
+                            @click.stop="save"
+                        />
+                        <csc-input-button-reset
+                            @click.stop="resetExtension"
+                        />
+                    </template>
+                </q-input>
+                <q-input
+                    readonly
+                    disable
+                    :value="getPrimaryNumber"
+                    :label="$t('Primary Number')"
+                />
+                <q-select
+                    v-model="changes.huntPolicy"
+                    emit-value
+                    map-options
+                    radio
+                    :label="$t('Hunt Policy')"
+                    :disable="isLoading"
+                    :options="getHuntPolicyOptions"
+                >
+                    <template
+                        v-if="hasHuntPolicyChanged"
+                        v-slot:append
+                    >
+                        <csc-input-button-save
+                            @click.stop="save"
+                        />
+                        <csc-input-button-reset
+                            @click.stop="resetHuntPolicy"
+                        />
+                    </template>
+                </q-select>
+                <q-input
+                    v-model="changes.huntTimeout"
+                    :label="$t('Hunt Timeout')"
+                    :disable="isLoading"
+                    @keyup.enter="save"
+                >
+                    <template
+                        v-if="hasHuntTimeoutChanged"
+                        v-slot:append
+                    >
+                        <csc-input-button-save
+                            @click.stop="save"
+                        />
+                        <csc-input-button-reset
+                            @click.stop="resetHuntTimeout"
+                        />
+                    </template>
+                </q-input>
+                <q-select
+                    v-model="changes.aliasNumbers"
+                    emit-value
+                    map-options
+                    use-chips
+                    multiple
+                    :disable="isLoading"
+                    :label="$t('Alias Numbers')"
+                    :options="getNumberOptions"
+                >
+                    <template
+                        v-if="hasAliasNumbersChanged"
+                        v-slot:append
+                    >
+                        <csc-input-button-save
+                            @click.stop="save"
+                        />
+                        <csc-input-button-reset
+                            @click.stop="resetAliasNumbers"
+                        />
+                    </template>
+                </q-select>
+                <q-select
+                    v-model="changes.seats"
+                    emit-value
+                    map-options
+                    use-chips
+                    multiple
+                    :disable="isLoading"
+                    :label="$t('Seats')"
+                    :options="getSeatOptions"
+                >
+                    <template
+                        v-if="hasSeatsChanged"
+                        v-slot:append
+                    >
+                        <csc-input-button-save
+                            @click.stop="save"
+                        />
+                        <csc-input-button-reset
+                            @click.stop="resetSeats"
+                        />
+                    </template>
+                </q-select>
+                <q-select
+                    v-model="changes.soundSet"
+                    emit-value
+                    map-options
+                    radio
+                    :disable="isLoading"
+                    :label="$t('Sound Set')"
+                    :options="getSoundSetOptions"
+                >
+                    <template
+                        v-if="hasSoundSetChanged"
+                        v-slot:append
+                    >
+                        <csc-input-button-save
+                            @click.stop="save"
+                        />
+                        <csc-input-button-reset
+                            @click.stop="resetSoundSet"
+                        />
+                    </template>
+                </q-select>
+                <q-btn
+                    v-if="hasCallQueue(id)"
+                    icon="filter_none"
+                    flat
+                    color="primary"
+                    :label="$t('Call Queue')"
+                    :disable="isLoading"
+                    @click="jumpToCallQueueInternal"
+                />
+            </q-list>
+        </q-item>
+    </csc-page-sticky>
+</template>
+
+<script>
+import _ from 'lodash'
+import { between } from 'vuelidate/lib/validators'
+import { inRange } from 'src/helpers/validation'
+import {
+    mapState,
+    mapMutations,
+    mapGetters,
+    mapActions
+} from 'vuex'
+import {
+    RequestState
+} from 'src/store/common'
+import {
+    showGlobalError,
+    showToast
+} from 'src/helpers/ui'
+import numberFilter from 'src/filters/number'
+import CscPageSticky from 'src/components/CscPageSticky'
+import CscInputButtonSave from 'components/form/CscInputButtonSave'
+import CscInputButtonReset from 'components/form/CscInputButtonReset'
+export default {
+    name: 'CscPbxGroupDetails',
+    components: {
+        CscInputButtonReset,
+        CscInputButtonSave,
+        CscPageSticky
+    },
+    data () {
+        return {
+            changes: null,
+            id: this.$route.params.id,
+            soundSet: null
+        }
+    },
+    computed: {
+        ...mapState('pbxGroups', [
+            'groupSelected',
+            'groupUpdateState',
+            'groupUpdateError'
+        ]),
+        ...mapGetters('pbx', [
+            'getSeatOptions',
+            'getExtensionHint',
+            'getMinAllowedExtension',
+            'getMaxAllowedExtension',
+            'getNumberOptions',
+            'getSoundSetOptions'
+        ]),
+        ...mapGetters('pbxGroups', [
+            'getHuntPolicyOptions',
+            'hasCallQueue',
+            'getGroupUpdateToastMessage',
+            'getSoundSetByGroupId',
+            'isGroupLoading'
+        ]),
+        hasNameChanged () {
+            return this.changes.name !== this.groupSelected.display_name
+        },
+        hasExtensionChanged () {
+            return this.changes.extension !== this.groupSelected.pbx_extension
+        },
+        hasHuntPolicyChanged () {
+            return this.changes.huntPolicy !== this.groupSelected.pbx_hunt_policy
+        },
+        hasHuntTimeoutChanged () {
+            return this.changes.huntTimeout !== this.groupSelected.pbx_hunt_timeout
+        },
+        hasAliasNumbersChanged () {
+            const aliasNumbers = _.clone(this.changes.aliasNumbers)
+            return !_.isEqual(aliasNumbers.sort(), this.getAliasNumberIds().sort())
+        },
+        hasSeatsChanged () {
+            const seatIds1 = _.clone(this.changes.seats)
+            const seatIds2 = _.clone(this.groupSelected.pbx_groupmember_ids)
+            return !_.isEqual(seatIds1.sort(), seatIds2.sort())
+        },
+        hasSoundSetChanged () {
+            return this.changes.soundSet !== this.getSoundSetId()
+        },
+        getPrimaryNumber () {
+            return numberFilter(this.groupSelected.primary_number)
+        },
+        extensionErrorMessage () {
+            if (!this.$v.changes.extension.isInRange) {
+                return this.getExtensionHint
+            } else {
+                return ''
+            }
+        },
+        isLoading () {
+            return this.isGroupLoading(this.groupSelected.id)
+        }
+    },
+    watch: {
+        groupSelected () {
+            this.changes = this.getGroupData()
+            this.soundSet = this.getSoundSetByGroupId(this.groupSelected.id)
+        },
+        groupUpdateState (state) {
+            if (state === RequestState.succeeded) {
+                showToast(this.getGroupUpdateToastMessage)
+            } else if (state === RequestState.failed) {
+                showGlobalError(this.groupUpdateError)
+            }
+        }
+    },
+    mounted () {
+        this.selectGroup(this.id)
+    },
+    beforeDestroy () {
+        this.resetSelectedGroup()
+    },
+    validations: {
+        changes: {
+            extension: {
+                isInRange: function (value) {
+                    return inRange(value, this.getMinAllowedExtension, this.getMaxAllowedExtension, between)
+                }
+            }
+        }
+    },
+    methods: {
+        ...mapActions('pbxGroups', [
+            'setGroupName',
+            'setGroupExtension',
+            'setGroupHuntPolicy',
+            'setGroupHuntTimeout',
+            'setGroupSeats',
+            'setGroupNumbers',
+            'setGroupSoundSet'
+        ]),
+        ...mapActions('pbxCallQueues', [
+            'jumpToCallQueue'
+        ]),
+        ...mapMutations('pbxGroups', [
+            'selectGroup',
+            'resetSelectedGroup'
+        ]),
+        getGroupData () {
+            return (this.groupSelected) ? {
+                name: this.groupSelected.display_name,
+                extension: this.groupSelected.pbx_extension,
+                huntPolicy: this.groupSelected.pbx_hunt_policy,
+                huntTimeout: this.groupSelected.pbx_hunt_timeout,
+                aliasNumbers: this.getAliasNumberIds(),
+                seats: this.getSeatIds(),
+                soundSet: this.getSoundSetId()
+            } : null
+        },
+        getAliasNumberIds () {
+            const numberIds = []
+            this.groupSelected.alias_numbers.forEach((number) => {
+                numberIds.push(number.number_id)
+            })
+            return numberIds
+        },
+        getSeatIds () {
+            return _.clone(this.groupSelected.pbx_groupmember_ids)
+        },
+        getSoundSetId () {
+            const soundSet = this.getSoundSetByGroupId(this.groupSelected.id)
+            if (soundSet !== null) {
+                return soundSet.id
+            }
+            return null
+        },
+        resetName () {
+            this.changes.name = this.groupSelected.display_name
+        },
+        resetExtension () {
+            this.changes.extension = this.groupSelected.pbx_extension
+        },
+        resetHuntPolicy () {
+            this.changes.huntPolicy = this.groupSelected.pbx_hunt_policy
+        },
+        resetHuntTimeout () {
+            this.changes.huntTimeout = this.groupSelected.pbx_hunt_timeout
+        },
+        resetAliasNumbers () {
+            this.changes.aliasNumbers = this.getAliasNumberIds()
+        },
+        resetSeats () {
+            this.changes.seats = this.getSeatIds()
+        },
+        resetSoundSet () {
+            this.changes.soundSet = this.getSoundSetId()
+        },
+        jumpToCallQueueInternal () {
+            this.jumpToCallQueue(this.groupSelected)
+        },
+        save () {
+            if (this.hasNameChanged) {
+                this.setGroupName({
+                    groupId: this.groupSelected.id,
+                    groupName: this.changes.name
+                })
+            }
+            if (this.hasExtensionChanged) {
+                this.setGroupExtension({
+                    groupId: this.groupSelected.id,
+                    groupExtension: this.changes.extension
+                })
+            }
+            if (this.hasHuntPolicyChanged) {
+                this.setGroupHuntPolicy({
+                    groupId: this.groupSelected.id,
+                    groupHuntPolicy: this.changes.huntPolicy
+                })
+            }
+            if (this.hasHuntTimeoutChanged) {
+                this.setGroupHuntTimeout({
+                    groupId: this.groupSelected.id,
+                    groupHuntTimeout: this.changes.huntTimeout
+                })
+            }
+            if (this.hasAliasNumbersChanged) {
+                this.setGroupNumbers({
+                    groupId: this.groupSelected.id,
+                    assignedNumbers: _.difference(this.changes.aliasNumbers, this.getAliasNumberIds()),
+                    unassignedNumbers: _.difference(this.getAliasNumberIds(), this.changes.aliasNumbers)
+                })
+            }
+            if (this.hasSeatsChanged) {
+                this.setGroupSeats({
+                    groupId: this.groupSelected.id,
+                    seatIds: this.changes.seats
+                })
+            }
+            if (this.hasSoundSetChanged) {
+                this.setGroupSoundSet({
+                    groupId: this.groupSelected.id,
+                    soundSetId: this.changes.soundSet
+                })
+            }
+        }
+    }
+}
+</script>
diff --git a/src/pages/CscPagePbxGroups.vue b/src/pages/CscPagePbxGroups.vue
index 78a48b9e..96df5dc4 100644
--- a/src/pages/CscPagePbxGroups.vue
+++ b/src/pages/CscPagePbxGroups.vue
@@ -75,41 +75,31 @@
         <csc-list-spinner
             v-if="isGroupListRequesting && !(isGroupCreating || isGroupRemoving || isGroupUpdating)"
         />
-        <csc-list
+        <!-- <csc-list
             v-if="!isGroupListEmpty && groupListVisibility === 'visible'"
+        > -->
+        <q-list
+            v-if="!isGroupListEmpty && groupListVisibility === 'visible'"
+            class="row justify-start items-start"
         >
             <csc-fade
                 v-for="(group, index) in groupListItems"
                 :key="'csc-fade-' + group.id"
             >
                 <csc-pbx-group
+                    :class="'col-xs-12 col-md-6 col-lg-4 csc-item-' + ((index % 2 === 0)?'odd':'even')"
                     :key="group.id"
                     :odd="(index % 2) === 0"
                     :group="group"
                     :seats="seatMapById"
-                    :expanded="isGroupExpanded(group.id)"
                     :loading="isGroupLoading(group.id)"
-                    :alias-number-options="getNumberOptions"
-                    :seat-options="getSeatOptions"
-                    :sound-set-options="getSoundSetOptions"
                     :hunt-policy-options="getHuntPolicyOptions"
-                    :sound-set="getSoundSetByGroupId(group.id)"
                     :label-width="4"
-                    :has-call-queue="hasCallQueue(group.id)"
-                    @expand="expandGroup(group.id)"
-                    @collapse="collapseGroup(group.id)"
                     @remove="openGroupRemovalDialog(group.id)"
-                    @save-name="setGroupName"
-                    @save-extension="setGroupExtension"
-                    @save-hunt-policy="setGroupHuntPolicy"
-                    @save-hunt-timeout="setGroupHuntTimeout"
-                    @save-alias-numbers="setGroupNumbers"
-                    @save-seats="setGroupSeats"
-                    @save-sound-set="setGroupSoundSet"
-                    @jump-to-call-queue="jumpToCallQueue"
                 />
             </csc-fade>
-        </csc-list>
+        <!-- </csc-list> -->
+        </q-list>
         <div
             v-if="isGroupListEmpty && !isGroupListRequesting && hasFilters"
             class="row justify-center csc-no-entities"
@@ -189,13 +179,9 @@ export default {
             'groupListItems',
             'groupListCurrentPage',
             'groupListLastPage',
-            'groupSelected',
             'groupCreating',
             'groupCreationState',
             'groupCreationError',
-            'groupUpdating',
-            'groupUpdateState',
-            'groupUpdateError',
             'groupRemoving',
             'groupRemovalState',
             'groupRemovalError',
@@ -214,18 +200,11 @@ export default {
             'isGroupCreating',
             'isGroupUpdating',
             'isGroupRemoving',
-            'isGroupExpanded',
             'isGroupLoading',
-            'getSoundSetByGroupId',
-            'getGroupCreatingName',
-            'getGroupUpdatingField',
-            'getGroupRemovingName',
             'getGroupRemoveDialogMessage',
             'getGroupCreationToastMessage',
-            'getGroupUpdateToastMessage',
             'getGroupRemovalToastMessage',
-            'getHuntPolicyOptions',
-            'hasCallQueue'
+            'getHuntPolicyOptions'
         ]),
         hasFilters () {
             return Object.keys(this.filters).length > 0
@@ -242,13 +221,6 @@ export default {
                 showGlobalError(this.groupCreationError)
             }
         },
-        groupUpdateState (state) {
-            if (state === RequestState.succeeded) {
-                showToast(this.getGroupUpdateToastMessage)
-            } else if (state === RequestState.failed) {
-                showGlobalError(this.groupUpdateError)
-            }
-        },
         groupRemovalState (state) {
             if (state === RequestState.succeeded) {
                 this.$scrollTo(this.$parent.$el)
@@ -267,26 +239,14 @@ export default {
         ...mapActions('pbxGroups', [
             'loadGroupListItems',
             'createGroup',
-            'removeGroup',
-            'setGroupName',
-            'setGroupExtension',
-            'setGroupHuntPolicy',
-            'setGroupHuntTimeout',
-            'setGroupSeats',
-            'setGroupNumbers',
-            'setGroupSoundSet'
+            'removeGroup'
         ]),
         ...mapMutations('pbxGroups', [
             'enableGroupAddForm',
             'disableGroupAddForm',
-            'expandGroup',
-            'collapseGroup',
             'groupRemovalRequesting',
             'groupRemovalCanceled'
         ]),
-        ...mapActions('pbxCallQueues', [
-            'jumpToCallQueue'
-        ]),
         loadGroups (page) {
             this.loadGroupListItems({
                 page: page,
diff --git a/src/router/routes.js b/src/router/routes.js
index 1f858858..7283e035 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -13,6 +13,7 @@ import CscPageCallRecording from 'src/pages/CscPageCallRecording'
 import CscPageReminder from 'src/pages/CscPageReminder'
 import CscPageSpeedDial from 'src/pages/CscPageSpeedDial'
 import CscPagePbxGroups from 'src/pages/CscPagePbxGroups'
+import CscPagePbxGroupDetails from 'src/pages/CscPagePbxGroupDetails'
 import CscPagePbxSeats from 'src/pages/CscPagePbxSeats'
 import CscPagePbxSeatDetails from 'src/pages/CscPagePbxSeatDetails'
 import CscPagePbxDevices from 'src/pages/CscPagePbxDevices'
@@ -178,6 +179,18 @@ export default function routes (app) {
                         }
                     }
                 },
+                {
+                    path: 'pbx-configuration/group/:id',
+                    component: CscPagePbxGroupDetails,
+                    meta: {
+                        get title () {
+                            return i18n.t('PBX Configuration')
+                        },
+                        get subtitle () {
+                            return i18n.t('Groups')
+                        }
+                    }
+                },
                 {
                     path: 'pbx-configuration/seats',
                     component: CscPagePbxSeats,
diff --git a/src/store/pbx-groups.js b/src/store/pbx-groups.js
index 300f3f04..266da2c1 100644
--- a/src/store/pbx-groups.js
+++ b/src/store/pbx-groups.js
@@ -68,11 +68,6 @@ export default {
         isGroupUpdating (state) {
             return state.groupUpdateState === RequestState.requesting
         },
-        isGroupExpanded (state) {
-            return (groupId) => {
-                return state.groupSelected !== null && state.groupSelected.id === groupId
-            }
-        },
         isGroupLoading (state, getters) {
             return (groupId) => {
                 return (getters.isGroupRemoving && state.groupRemoving.id === groupId) ||
@@ -245,10 +240,10 @@ export default {
             state.groupRemovalState = RequestState.failed
             state.groupRemovalError = err
         },
-        expandGroup (state, groupId) {
+        selectGroup (state, groupId) {
             state.groupSelected = state.groupMapById[groupId]
         },
-        collapseGroup (state) {
+        resetSelectedGroup (state) {
             state.groupSelected = null
         },
         enableGroupAddForm (state) {
@@ -380,14 +375,6 @@ export default {
                 pilotId: context.rootGetters['pbx/pilot'].id,
                 assignedNumbers: options.assignedNumbers,
                 unassignedNumbers: options.unassignedNumbers
-            }).then((result) => {
-                if (options.assignedNumbers.length > 0) {
-                    return context.dispatch('loadGroupListItems', {
-                        clearList: false
-                    })
-                } else {
-                    return Promise.resolve(result)
-                }
             }).then((result) => {
                 context.commit('groupUpdateSucceeded', result)
             }).catch((err) => {