From bb39aa1e4cfbdf4f42754a7909f5ed319571ca19 Mon Sep 17 00:00:00 2001
From: raxelsen <raxelsen@sipwise.com>
Date: Tue, 17 Jul 2018 13:45:55 +0200
Subject: [PATCH] TT#39618 Alternative pbx seats/groups entity title

Change-Id: Idf5bd30aa3e572b07db99fe7be5e97e18e44cfff
---
 .../pages/PbxConfiguration/CscPbxGroup.vue    | 54 +++++++----
 .../pages/PbxConfiguration/CscPbxGroups.vue   | 76 ++++++++++++----
 .../pages/PbxConfiguration/CscPbxSeat.vue     | 90 +++++++++++++++----
 .../pages/PbxConfiguration/CscPbxSeats.vue    | 71 +++++++++++----
 4 files changed, 228 insertions(+), 63 deletions(-)

diff --git a/src/components/pages/PbxConfiguration/CscPbxGroup.vue b/src/components/pages/PbxConfiguration/CscPbxGroup.vue
index 03ca8178..92d2d527 100644
--- a/src/components/pages/PbxConfiguration/CscPbxGroup.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxGroup.vue
@@ -2,17 +2,14 @@
     <q-card
         class="csc-entity csc-pbx-group shadow-1"
     >
-        <q-card-title
-            class="csc-entity-title"
-        >
+        <q-card-title class="csc-entity-title">
             <q-icon
                 name="group"
                 color="secondary"
                 size="24px"
             />
-            <span
-                class="csc-entity-title-text">
-                {{ group.display_name }}
+            <span class="csc-entity-title-text">
+                {{ entityTitle }}
             </span>
             <q-chip
                 v-if="!expanded"
@@ -43,9 +40,7 @@
             v-if="expanded"
             class="transition-generic"
         >
-            <q-field
-                :label="$t('pbxConfig.groupName')"
-            >
+            <q-field :label="$t('pbxConfig.groupName')">
                 <q-input
                     v-model="changes.name"
                     :after="nameButtons"
@@ -53,19 +48,37 @@
                 />
             </q-field>
             <q-field :label="$t('pbxConfig.extension')">
-                <q-input v-model="changes.extension" type="number" :after="extensionButtons"
-                         @keyup.enter="saveExtension" />
+                <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" @keyup.enter="saveHuntTimeout" />
+                <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 />
+                <q-input
+                    v-model="primaryNumber"
+                    readonly
+                    disable
+                />
             </q-field>
             <q-field :label="$t('pbxConfig.aliasNumbers')">
                 <q-select
@@ -90,7 +103,10 @@
             </q-field>
         </q-card-main>
         <q-inner-loading :visible="isLoading">
-            <q-spinner-mat size="60px" color="primary"></q-spinner-mat>
+            <q-spinner-mat
+                size="60px"
+                color="primary"
+            />
         </q-inner-loading>
     </q-card>
 </template>
@@ -145,6 +161,10 @@
             QTransition
         },
         computed: {
+            entityTitle() {
+                return this.group.display_name ?
+                    this.group.display_name : this.group.username;
+            },
             id() {
                 return this.group.id;
             },
diff --git a/src/components/pages/PbxConfiguration/CscPbxGroups.vue b/src/components/pages/PbxConfiguration/CscPbxGroups.vue
index 5e761eb9..679950f7 100644
--- a/src/components/pages/PbxConfiguration/CscPbxGroups.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxGroups.vue
@@ -1,23 +1,67 @@
 <template>
     <csc-page :title="$t('pbxConfig.groupsTitle')">
-        <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"/>
-        <div v-show="!addFormEnabled" class="row justify-center ">
-            <q-btn color="primary" icon="add" flat @click="enableAddForm">{{ $t('pbxConfig.addGroup') }}</q-btn>
+        <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"
+        />
+        <div
+            v-show="!addFormEnabled"
+            class="row justify-center"
+        >
+            <q-btn
+                color="primary"
+                icon="add"
+                flat
+                @click="enableAddForm"
+            >
+                {{ $t('pbxConfig.addGroup') }}
+            </q-btn>
         </div>
-        <div v-if="isListLoadingVisible" class="row justify-center">
-            <q-spinner-dots color="primary" :size="40" />
+        <div
+            v-if="isListLoadingVisible"
+            class="row justify-center"
+        >
+            <q-spinner-dots
+                color="primary"
+                :size="40"
+            />
         </div>
-        <div v-if="groups.length > 0 && !isListRequesting && listLastPage > 1" class="row justify-center">
-            <q-pagination :value="listCurrentPage" :max="listLastPage" @change="changePage" />
+        <div
+            v-if="groups.length > 0 && !isListRequesting && listLastPage > 1"
+            class="row justify-center"
+        >
+            <q-pagination
+                :value="listCurrentPage"
+                :max="listLastPage"
+                @change="changePage"
+            />
         </div>
-        <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="isItemLoading(group.id)" @save-name="setGroupName" @save-extension="setGroupExtension"
-                        @save-hunt-policy="setGroupHuntPolicy" @save-hunt-timeout="setGroupHuntTimeout"
-                        @save-alias-numbers="updateAliasNumbers" @save-seats="updateSeats" />
-        <div v-if="groups.length === 0 && !isListRequesting" class="row justify-center csc-no-entities">
+        <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="isItemLoading(group.id)"
+            @save-name="setGroupName"
+            @save-extension="setGroupExtension"
+            @save-hunt-policy="setGroupHuntPolicy"
+            @save-hunt-timeout="setGroupHuntTimeout"
+            @save-alias-numbers="updateAliasNumbers"
+            @save-seats="updateSeats"
+        />
+        <div
+            v-if="groups.length === 0 && !isListRequesting"
+            class="row justify-center csc-no-entities"
+        >
             {{ $t('pbxConfig.noGroups') }}
         </div>
     </csc-page>
@@ -116,7 +160,7 @@
                 let seats = [];
                 this.seats.forEach((seat)=>{
                     seats.push({
-                        label: seat.display_name,
+                        label: seat.display_name ? seat.display_name : seat.username,
                         sublabel: this.$t('pbxConfig.extension') + ': ' + seat.pbx_extension,
                         value: seat.id
                     });
diff --git a/src/components/pages/PbxConfiguration/CscPbxSeat.vue b/src/components/pages/PbxConfiguration/CscPbxSeat.vue
index d5ab60e3..c47da199 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSeat.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSeat.vue
@@ -1,36 +1,92 @@
 <template>
     <q-card class="csc-entity csc-pbx-seat shadow-1">
         <q-card-title class="csc-entity-title">
-            <q-icon name="person" color="secondary" size="24px"/>
-            <span class="csc-entity-title-text">{{ seat.display_name }}</span>
-            <q-chip v-if="!expanded" pointing="left" color="primary" class="gt-md">
+            <q-icon
+                name="person"
+                color="secondary"
+                size="24px"
+            />
+            <span class="csc-entity-title-text">
+                {{ entityTitle }}
+            </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-btn :icon="titleIcon" :small="isMobile" color="primary" slot="right" flat @click="toggleMain()" />
-            <q-btn icon="delete" :small="isMobile"  color="negative" slot="right" flat @click="remove()" />
+            <q-btn
+                :icon="titleIcon"
+                :small="isMobile"
+                color="primary"
+                slot="right"
+                flat
+                @click="toggleMain()"
+            />
+            <q-btn
+                icon="delete"
+                :small="isMobile"
+                color="negative"
+                slot="right"
+                flat
+                @click="remove()"
+            />
         </q-card-title>
-        <q-card-main v-if="expanded" class="transition-generic">
+        <q-card-main
+            v-if="expanded"
+            class="transition-generic"
+        >
             <q-field :label="$t('pbxConfig.seatName')">
-                <q-input v-model="changes.name" :after="nameButtons" @keyup.enter="saveName" />
+                <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" @keyup.enter="saveExtension" />
+                <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-input
+                    v-model="primaryNumber"
+                    readonly
+                    disable
+                />
             </q-field>
             <q-field :label="$t('pbxConfig.aliasNumbers')">
-                <q-select ref="aliasNumbers" v-model="changes.aliasNumbers" :options="aliasNumberOptions"
-                          multiple chips clearable :after="aliasNumberButtons" />
+                <q-select
+                    ref="aliasNumbers"
+                    v-model="changes.aliasNumbers"
+                    :options="aliasNumberOptions"
+                    multiple
+                    chips
+                    clearable
+                    :after="aliasNumberButtons"
+                />
             </q-field>
             <q-field :label="$t('pbxConfig.groups')">
-                <q-select v-model="changes.groups" :options="groupOptions" multiple chips clearable
-                          :after="groupButtons" />
+                <q-select
+                    v-model="changes.groups"
+                    :options="groupOptions"
+                    multiple
+                    chips
+                    clearable
+                    :after="groupButtons"
+                />
             </q-field>
         </q-card-main>
         <q-inner-loading :visible="isLoading">
-            <q-spinner-mat size="60px" color="primary"></q-spinner-mat>
+            <q-spinner-mat
+                size="60px"
+                color="primary"
+            />
         </q-inner-loading>
     </q-card>
 </template>
@@ -84,6 +140,10 @@
             QTransition
         },
         computed: {
+            entityTitle() {
+                return this.seat.display_name ?
+                    this.seat.display_name : this.seat.username;
+            },
             id() {
                 return this.seat.id;
             },
diff --git a/src/components/pages/PbxConfiguration/CscPbxSeats.vue b/src/components/pages/PbxConfiguration/CscPbxSeats.vue
index f80aca60..1339e0fb 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSeats.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSeats.vue
@@ -1,22 +1,63 @@
 <template>
     <csc-page :title="$t('pbxConfig.seatsTitle')">
-        <csc-pbx-seat-add-form v-show="addFormEnabled" ref="addForm" :alias-number-options="aliasNumberOptions"
-                               :group-options="groupOptions" :loading="isAdding" @save="addSeat"
-                               @cancel="disableAddForm" />
-        <div v-show="!addFormEnabled" class="row justify-center">
-            <q-btn color="primary" icon="add" flat @click="enableAddForm">{{ $t('pbxConfig.addSeat') }}</q-btn>
+        <csc-pbx-seat-add-form
+            v-show="addFormEnabled"
+            ref="addForm"
+            :alias-number-options="aliasNumberOptions"
+            :group-options="groupOptions"
+            :loading="isAdding"
+            @save="addSeat"
+            @cancel="disableAddForm"
+        />
+        <div
+            v-show="!addFormEnabled"
+            class="row justify-center"
+        >
+            <q-btn
+                color="primary"
+                icon="add"
+                flat
+                @click="enableAddForm"
+            >
+                {{ $t('pbxConfig.addSeat') }}
+            </q-btn>
         </div>
-        <div v-if="isListLoadingVisible" class="row justify-center">
-            <q-spinner-dots color="primary" :size="40" />
+        <div
+            v-if="isListLoadingVisible"
+            class="row justify-center"
+        >
+            <q-spinner-dots
+                color="primary"
+                :size="40"
+            />
         </div>
-        <div v-if="seats.length > 0 && !isListRequesting && listLastPage > 1" class="row justify-center">
-            <q-pagination :value="listCurrentPage" :max="listLastPage" @change="changePage" />
+        <div
+            v-if="seats.length > 0 && !isListRequesting && listLastPage > 1"
+            class="row justify-center"
+        >
+            <q-pagination
+                :value="listCurrentPage"
+                :max="listLastPage"
+                @change="changePage"
+            />
         </div>
-        <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" />
-        <div v-if="seats.length === 0 && !isListRequesting" class="row justify-center csc-no-entities">
+        <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"
+        />
+        <div
+            v-if="seats.length === 0 && !isListRequesting"
+            class="row justify-center csc-no-entities"
+        >
             {{ $t('pbxConfig.noSeats') }}
         </div>
     </csc-page>
@@ -121,7 +162,7 @@
                 let groups = [];
                 this.groups.forEach((group)=>{
                     groups.push({
-                        label: group.display_name,
+                        label: group.display_name ? group.display_name : group.username,
                         sublabel: this.$t('pbxConfig.extension') + ': ' + group.pbx_extension,
                         value: group.id
                     });