TT#84210 As a Customer, I want to see my assigned numbers

Change-Id: I26dd2f81a2a1ebd8574e1219640d61753bc68b9f

src/components/layouts/CscUserMenu.vue

@@ -1,42 +1,91 @@
 <template>
-    <q-list
-        class="no-padding"
-        no-border
-        link
-    >
-        <q-item @click="logout">
-            <q-item-side
-                icon="exit_to_app"
-                color="primary"
-            />
-            <q-item-main
-                :label="$t('userMenu.logout')"
-                :sublabel="username"
+    <div>
+        <q-list
+            no-border
+            dense
+        >
+            <q-item
+                class="items-start"
+                dense
             >
-            </q-item-main>
-        </q-item>
-        <q-item
-            @click="settings">
-            <q-item-side
-                icon="settings_applications"
-                color="primary"
-            />
-            <q-item-main
-                :label="$t('userMenu.settings')"
+                <q-item-side
+                    style="min-width: auto"
+                    icon="contact_phone"
+                    color="white"
+                />
+                <q-item-main
+                    :label="$t('numbers')"
+                >
+                    <q-item-tile
+                        sublabel
+                    >
+                        <div>
+                            {{ primaryNumberFormatted }}
+                        </div>
+                        <template
+                            v-if="aliasNumbersFormatted.length > 0"
+                        >
+                            <div
+                                v-for="(aliasNumber, index) in aliasNumbersFormatted"
+                                :key="index"
+                            >
+                                {{ aliasNumber }}
+                            </div>
+                        </template>
+                    </q-item-tile>
+                </q-item-main>
+            </q-item>
+        </q-list>
+        <q-list
+            class="no-margin"
+            no-border
+            link
+        >
+            <q-item @click="logout">
+                <q-item-side
+                    icon="exit_to_app"
+                    color="primary"
+                    style="min-width: auto"
+                />
+                <q-item-main
+                    :label="$t('userMenu.logout')"
+                    :sublabel="username"
+                >
+                </q-item-main>
+            </q-item>
+            <q-item
+                @click="settings"
             >
-            </q-item-main>
-        </q-item>
-    </q-list>
+                <q-item-side
+                    style="min-width: auto"
+                    icon="settings_applications"
+                    color="primary"
+                />
+                <q-item-main
+                    :label="$t('userMenu.settings')"
+                >
+                </q-item-main>
+            </q-item>
+        </q-list>
+    </div>
 </template>
 
 <script>
+    import numberFilter from '../../filters/number'
+    import {
+        mapState
+    } from 'vuex'
     import {
         QList,
         QItem,
         QItemMain,
         QCollapsible,
         QItemSide,
-        QSideLink
+        QSideLink,
+        QListHeader,
+        QItemSeparator,
+        QItemTile,
+        QIcon
     } from 'quasar-framework'
     export default {
         name: 'csc-user-menu',
@@ -52,7 +101,33 @@
             QItemMain,
             QCollapsible,
             QItemSide,
-            QSideLink
+            QSideLink,
+            QListHeader,
+            QItemSeparator,
+            QItemTile,
+            QIcon
+        },
+        computed: {
+            primaryNumberFormatted() {
+                if(this.subscriber) {
+                    return numberFilter(this.subscriber.primary_number)
+                }
+                else {
+                    return ''
+                }
+            },
+            aliasNumbersFormatted() {
+                const numbers = []
+                if(this.subscriber) {
+                    this.subscriber.alias_numbers.forEach((number)=>{
+                        numbers.push(numberFilter(number))
+                    })
+                }
+                return numbers
+            },
+            ...mapState('user', [
+                'subscriber'
+            ])
         },
         methods: {
             logout() {

src/filters/number.js

@@ -1,10 +1,13 @@
 
 export default function(number, extension) {
     let constructedNumber = "";
-    if(number !== null && number.is_devid && number.is_devid === true) {
+    if(number === null || number === undefined) {
+        return ''
+    }
+    if(number.is_devid && number.is_devid === true) {
         constructedNumber = "" + number.devid_alias;
     }
-    else if (number !== null) {
+    else {
         constructedNumber = "" + number.cc + number.ac + number.sn;
     }
     if (extension) {

src/locales/en.json

@@ -11,6 +11,7 @@
     "notFound" : "404 Not Found",
     "language": "Language ({language})",
     "languageLabel": "English",
+    "numbers": "Numbers",
     "buttons": {
         "cancel": "Cancel",
         "save": "Save",

src/store/user.js

@@ -149,6 +149,18 @@ export default {
         },
         isPasswordChanging(state) {
             return state.changePasswordState === RequestState.requesting;
+        },
+        primaryNumber(state) {
+            if (state.subscriber === null) {
+                return null
+            }
+            return state.subscriber.primaryNumber;
+        },
+        aliasNumbers(state) {
+            if (state.subscriber === null) {
+                return []
+            }
+            return state.subscriber.aliasNumbers;
         }
     },
     mutations: {