MT#54861 Configure sip username, display-names and web username independently in CSC

Change-Id: I7f0b8543a610c930f55b18a4ce3c96d136c3f49a

src/api/pbx-seats.js

@@ -5,6 +5,7 @@ import {
     getSubscriberAndPreferences,
     getSubscribers,
     setDisplayName,
+    setWebUsername,
     setPbxExtension,
     setPbxWebPassword,
     setPbxGroupIds,
@@ -134,9 +135,10 @@ export function createSeat (seat) {
         let subscriberId
         Promise.resolve().then(() => {
             return createSubscriber({
-                username: seat.name.trim().toLowerCase().replace(/\s+/g, '-'),
+                username: seat.sipUsername.trim(),
+                display_name: seat.displayName.trim(),
+                webusername: seat.webUsername.trim(),
                 password: seat.sipPassword ? seat.sipPassword : createId(),
-                display_name: seat.name,
                 webpassword: seat.webPassword.length > 0 ? seat.webPassword : null,
                 is_pbx_group: false,
                 pbx_extension: seat.extension,
@@ -173,12 +175,34 @@ export function removeSeat (id) {
 /**
  * @param options
  * @param options.seatId
- * @param options.seatName
+ * @param options.displayName
  */
-export function setSeatName (options) {
+export function setSeatDisplayName (options) {
     return new Promise((resolve, reject) => {
         Promise.resolve().then(() => {
-            return setDisplayName(options.seatId, options.seatName)
+            return setDisplayName(options.seatId, options.displayName)
+        }).then(() => {
+            return getSubscriberAndPreferences(options.seatId)
+        }).then((result) => {
+            resolve({
+                seat: result.subscriber,
+                preferences: result.preferences
+            })
+        }).catch((err) => {
+            reject(err)
+        })
+    })
+}
+
+/**
+ * @param options
+ * @param options.seatId
+ * @param options.webUsername
+ */
+export function setSeatWebUsername (options) {
+    return new Promise((resolve, reject) => {
+        Promise.resolve().then(() => {
+            return setWebUsername(options.seatId, options.webUsername)
         }).then(() => {
             return getSubscriberAndPreferences(options.seatId)
         }).then((result) => {

src/api/subscriber.js

@@ -297,6 +297,10 @@ export function setDisplayName (id, displayName) {
     return setField(id, 'display_name', displayName)
 }
 
+export function setWebUsername (id, webUsername) {
+    return setField(id, 'webusername', webUsername)
+}
+
 export function setPbxExtension (id, pbxExtension) {
     return setField(id, 'pbx_extension', pbxExtension)
 }

src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue

@@ -7,17 +7,17 @@
                 class="col-xs-12 col-lg-3"
             >
                 <csc-input
-                    v-model="data.name"
+                    v-model="data.displayName"
                     clearable
                     autofocus
                     dense
                     hide-bottom-space
-                    :error="$v.data.name.$error"
+                    :error="$v.data.displayName.$error"
-                    :error-message="seatNameErrorMessage"
+                    :error-message="seatDisplayNameErrorMessage"
                     :disable="loading"
                     :readonly="loading"
-                    :label="$t('Name')"
+                    :label="$t('Display Name')"
-                    @input="$v.data.name.$touch"
+                    @input="$v.data.displayName.$touch"
                 >
                     <template
                         v-slot:prepend
@@ -49,25 +49,6 @@
                         />
                     </template>
                 </csc-input>
-                <csc-input-password-retype
-                    v-model="data.password"
-                    :password-label="$t('Web Password')"
-                    :password-confirm-label="$t('Web Password confirm')"
-                    :disable="loading"
-                    hide-bottom-space
-                    dense
-                />
-                <csc-input-password-retype
-                    v-model="data.sipPassword"
-                    :password-label="$t('SIP Password')"
-                    :password-confirm-label="$t('SIP Password confirm')"
-                    :disable="loading"
-                    dense
-                />
-            </div>
-            <div
-                class="col-xs-12 col-lg-3"
-            >
                 <q-select
                     v-model="data.aliasNumbers"
                     clearable
@@ -129,6 +110,65 @@
                     dense
                 />
             </div>
+            <div
+                class="col-xs-12 col-lg-3"
+            >
+                <csc-input
+                    v-model="data.webUsername"
+                    clearable
+                    dense
+                    hide-bottom-space
+                    :error="$v.data.webUsername.$error"
+                    :error-message="seatWebUsernameErrorMessage"
+                    :disable="loading"
+                    :readonly="loading"
+                    :label="$t('Web Username')"
+                    @input="$v.data.webUsername.$touch"
+                >
+                    <template
+                        v-slot:prepend
+                    >
+                        <q-icon
+                            name="person"
+                        />
+                    </template>
+                </csc-input>
+                <csc-input-password-retype
+                    v-model="data.password"
+                    :password-label="$t('Web Password')"
+                    :password-confirm-label="$t('Web Password confirm')"
+                    :disable="loading"
+                    hide-bottom-space
+                    dense
+                />
+                <csc-input
+                    v-model="data.sipUsername"
+                    clearable
+                    dense
+                    hide-bottom-space
+                    :error="$v.data.sipUsername.$error"
+                    :error-message="seatSipUsernameErrorMessage"
+                    :disable="loading"
+                    :readonly="loading"
+                    :label="$t('SIP Username')"
+                    @input="$v.data.sipUsername.$touch"
+                >
+                    <template
+                        v-slot:prepend
+                    >
+                        <q-icon
+                            name="person"
+                        />
+                    </template>
+                </csc-input>
+                <csc-input-password-retype
+                    v-model="data.sipPassword"
+                    :password-label="$t('SIP Password')"
+                    :password-confirm-label="$t('SIP Password confirm')"
+                    :disable="loading"
+                    dense
+                />
+            </div>
         </div>
         <div
             class="row justify-center"
@@ -193,7 +233,18 @@ export default {
     },
     validations: {
         data: {
-            name: {
+            displayName: {
+                required,
+                maxLength: maxLength(64)
+            },
+            sipUsername: {
+                required,
+                maxLength: maxLength(64),
+                noWhiteSpace: (value) => {
+                    return new RegExp(/\s/).test(value) === false
+                }
+            },
+            webUsername: {
                 required,
                 maxLength: maxLength(64)
             },
@@ -234,15 +285,48 @@ export default {
             'getMinAllowedExtension',
             'getMaxAllowedExtension'
         ]),
-        seatNameErrorMessage () {
+        seatDisplayNameErrorMessage () {
-            if (!this.$v.data.name.required) {
+            if (!this.$v.data.displayName.required) {
+                return this.$t('{field} is required', {
+                    field: this.$t('Seat Display Name')
+                })
+            } else if (!this.$v.data.displayName.maxLength) {
+                return this.$t('{field} must have at most {maxLength} letters', {
+                    field: this.$t('Seat Display Name'),
+                    maxLength: this.$v.data.displayName.$params.maxLength.max
+                })
+            } else {
+                return ''
+            }
+        },
+        seatWebUsernameErrorMessage () {
+            if (!this.$v.data.webUsername.required) {
                 return this.$t('{field} is required', {
-                    field: this.$t('Seat name')
+                    field: this.$t('Seat Web Username')
                 })
-            } else if (!this.$v.data.name.maxLength) {
+            } else if (!this.$v.data.webUsername.maxLength) {
                 return this.$t('{field} must have at most {maxLength} letters', {
-                    field: this.$t('Seat name'),
+                    field: this.$t('Seat Web Username'),
-                    maxLength: this.$v.data.name.$params.maxLength.max
+                    maxLength: this.$v.data.webUsername.$params.maxLength.max
+                })
+            } else {
+                return ''
+            }
+        },
+        seatSipUsernameErrorMessage () {
+            if (!this.$v.data.sipUsername.required) {
+                return this.$t('SIP Username is required', {
+                    field: this.$t('Seat SIP Username')
+                })
+            } else if (!this.$v.data.sipUsername.maxLength) {
+                return this.$t('SIP Username must have at most {maxLength} letters', {
+                    field: this.$t('Seat SIP Username'),
+                    maxLength: this.$v.data.sipUsername.$params.maxLength.max
+                })
+            } else if (!this.$v.data.sipUsername.noWhiteSpace) {
+                return this.$t('SIP Username must not contain any space character', {
+                    field: this.$t('Seat SIP Username'),
+                    maxLength: this.$v.data.sipUsername.$params.maxLength.max
                 })
             } else {
                 return ''
@@ -291,7 +375,9 @@ export default {
     methods: {
         getDefaults () {
             return {
-                name: '',
+                displayName: '',
+                sipUsername: '',
+                webUsername: '',
                 extension: '',
                 password: {
                     password: '',
@@ -312,7 +398,9 @@ export default {
         },
         save () {
             this.$emit('save', {
-                name: this.data.name,
+                displayName: this.data.displayName,
+                sipUsername: this.data.sipUsername,
+                webUsername: this.data.webUsername,
                 extension: this.data.extension,
                 webPassword: this.data.password.password,
                 sipPassword: this.data.sipPassword.password,

src/i18n/en.json

@@ -53,6 +53,7 @@
     "Block outgoing": "Block outgoing",
     "Busy Greeting": "Busy Greeting",
     "Busy Lamp Field": "Busy Lamp Field",
+    "CLI": "CLI",
     "Call": "Call",
     "Call Blocking": "Call Blocking",
     "Call Forwarding": "Call Forwarding",
@@ -138,6 +139,7 @@
     "Destinations": "Destinations",
     "Devices": "Devices",
     "Disable": "Disable",
+    "Display Name": "Display Name",
     "Do not ring primary number": "Do not ring primary number",
     "Download fax": "Download fax",
     "Download voicemail": "Download voicemail",
@@ -362,6 +364,10 @@
     "SIP Password": "SIP Password",
     "SIP Password confirm": "SIP Password confirm",
     "SIP URI": "SIP URI",
+    "SIP Username": "SIP Username",
+    "SIP Username is required": "SIP Username is required",
+    "SIP Username must have at most {maxLength} letters": "SIP Username must have at most {maxLength} letters",
+    "SIP Username must not contain any space character": "SIP Username must not contain any space character",
     "Sa": "Sa",
     "Same time for selected days": "Same time for selected days",
     "Saturday": "Saturday",
@@ -369,6 +375,10 @@
     "Save new password": "Save new password",
     "Scan to login sip:phone": "Scan to login sip:phone",
     "Seat": "Seat",
+    "Seat Display Name": "Seat Display Name",
+    "Seat SIP Username": "Seat SIP Username",
+    "Seat Web Username": "Seat Web Username",
+    "Seat displayName": "Seat displayName",
     "Seat name": "Seat name",
     "Seats": "Seats",
     "Secret Key (empty=disabled)": "Secret Key (empty=disabled)",
@@ -463,6 +473,7 @@
     "We": "We",
     "Web Password": "Web Password",
     "Web Password confirm": "Web Password confirm",
+    "Web Username": "Web Username",
     "WebSocket connection to kamailio lb failed with code {code}": "WebSocket connection to kamailio lb failed with code {code}",
     "Wednesday": "Wednesday",
     "Weekly": "Weekly",
@@ -506,6 +517,7 @@
     "busy": "busy",
     "call from ...": "call from ...",
     "call not from ...": "call not from ...",
+    "cli of the seat": "cli of the seat",
     "condition": "condition",
     "data error": "data error",
     "date is": "date is",

src/pages/CscPagePbxSeatDetails.vue

@@ -42,21 +42,52 @@
                     @change-password="changeWebPassword({ password: $event.password })"
                 />
                 <q-input
-                    v-model="changes.name"
+                    v-model="changes.displayName"
-                    :label="$t('Name')"
+                    :label="$t('Display Name')"
                     :disable="isLoading"
+                    :error="$v.changes.displayName.$error"
+                    :error-message="seatDisplayNameErrorMessage"
+                    @input="$v.changes.displayName.$touch"
                     @keyup.enter="save"
                 >
                     <template
+                        v-if="hasDisplayNameChanged"
                         v-slot:append
                     >
                         <csc-input-button-save
-                            v-if="hasNameChanged"
+                            v-if="!$v.changes.displayName.$error"
                             @click.stop="save"
                         />
                         <csc-input-button-reset
-                            v-if="hasNameChanged"
+                            @click.stop="resetDisplayName"
-                            @click.stop="resetName"
+                        />
+                    </template>
+                </q-input>
+                <q-input
+                    readonly
+                    disable
+                    :label="$t('SIP Username')"
+                    :value="changes.sipUsername"
+                />
+                <q-input
+                    v-model="changes.webUsername"
+                    :label="$t('Web Username')"
+                    :disable="isLoading"
+                    :error="$v.changes.webUsername.$error"
+                    :error-message="seatWebUsernameErrorMessage"
+                    @input="$v.changes.webUsername.$touch"
+                    @keyup.enter="save"
+                >
+                    <template
+                        v-if="hasWebUsernameChanged"
+                        v-slot:append
+                    >
+                        <csc-input-button-save
+                            v-if="!$v.changes.webUsername.$error"
+                            @click.stop="save"
+                        />
+                        <csc-input-button-reset
+                            @click.stop="resetWebUsername"
                         />
                     </template>
                 </q-input>
@@ -72,14 +103,14 @@
                     @input="$v.changes.extension.$touch"
                 >
                     <template
+                        v-if="hasExtensionChanged"
                         v-slot:append
                     >
                         <csc-input-button-save
-                            v-if="hasExtensionChanged"
+                            v-if="!$v.changes.webUsername.$error"
                             @click.stop="save"
                         />
                         <csc-input-button-reset
-                            v-if="hasExtensionChanged"
                             @click.stop="resetExtension"
                         />
                     </template>
@@ -227,9 +258,13 @@ import CscInputButtonSave from 'components/form/CscInputButtonSave'
 import CscInputButtonReset from 'components/form/CscInputButtonReset'
 import CscChangePasswordDialog from 'src/components/CscChangePasswordDialog'
 import CscPageSticky from 'src/components/CscPageSticky'
-import { between } from 'vuelidate/lib/validators'
 import { inRange } from 'src/helpers/validation'
 import numberFilter from '../filters/number'
+import {
+    required,
+    maxLength,
+    between
+} from 'vuelidate/lib/validators'
 export default {
     name: 'CscPagePbxSeatDetails',
     components: {
@@ -254,6 +289,14 @@ export default {
                 isInRange: function (value) {
                     return inRange(value, this.getMinAllowedExtension, this.getMaxAllowedExtension, between)
                 }
+            },
+            displayName: {
+                required,
+                maxLength: maxLength(64)
+            },
+            webUsername: {
+                required,
+                maxLength: maxLength(64)
             }
         }
     },
@@ -283,8 +326,11 @@ export default {
         getPrimaryNumber () {
             return numberFilter(this.seatSelected.primary_number)
         },
-        hasNameChanged () {
+        hasDisplayNameChanged () {
-            return this.changes.name !== this.seatSelected.display_name
+            return this.changes.displayName !== this.seatSelected.display_name
+        },
+        hasWebUsernameChanged () {
+            return this.changes.webUsername !== this.seatSelected.webusername
         },
         hasExtensionChanged () {
             return this.changes.extension !== this.seatSelected.pbx_extension
@@ -308,6 +354,34 @@ export default {
                 return ''
             }
         },
+        seatDisplayNameErrorMessage () {
+            if (!this.$v.changes.displayName.required) {
+                return this.$t('{field} is required', {
+                    field: this.$t('Seat Display Name')
+                })
+            } else if (!this.$v.changes.displayName.maxLength) {
+                return this.$t('{field} must have at most {maxLength} letters', {
+                    field: this.$t('Seat Display Name'),
+                    maxLength: this.$v.changes.displayName.$params.maxLength.max
+                })
+            } else {
+                return ''
+            }
+        },
+        seatWebUsernameErrorMessage () {
+            if (!this.$v.changes.webUsername.required) {
+                return this.$t('{field} is required', {
+                    field: this.$t('Seat Web Username')
+                })
+            } else if (!this.$v.changes.webUsername.maxLength) {
+                return this.$t('{field} must have at most {maxLength} letters', {
+                    field: this.$t('Seat Web Username'),
+                    maxLength: this.$v.changes.webUsername.$params.maxLength.max
+                })
+            } else {
+                return ''
+            }
+        },
         internalSoundSetOptions () {
             const items = []
             if (this.soundSet) {
@@ -375,7 +449,8 @@ export default {
     },
     methods: {
         ...mapActions('pbxSeats', [
-            'setSeatName',
+            'setSeatDisplayName',
+            'setSeatWebUsername',
             'setSeatExtension',
             'setSeatNumbers',
             'setSeatGroups',
@@ -418,7 +493,9 @@ export default {
         },
         getSeatData () {
             return (this.seatSelected) ? {
-                name: this.seatSelected.display_name,
+                displayName: this.seatSelected.display_name,
+                sipUsername: this.seatSelected.username,
+                webUsername: this.seatSelected.webusername,
                 extension: this.seatSelected.pbx_extension,
                 aliasNumbers: this.getAliasNumberIds(),
                 webPassword: this.seatSelected.webpassword,
@@ -429,8 +506,11 @@ export default {
                 cliNumber: this.getCliNumberId()
             } : null
         },
-        resetName () {
+        resetDisplayName () {
-            this.changes.name = this.seatSelected.display_name
+            this.changes.displayName = this.seatSelected.display_name
+        },
+        resetWebUsername () {
+            this.changes.webUsername = this.seatSelected.webusername
         },
         resetExtension () {
             this.changes.extension = this.seatSelected.pbx_extension
@@ -448,10 +528,16 @@ export default {
             this.changes.soundSet = this.getSoundSetId()
         },
         save () {
-            if (this.hasNameChanged) {
+            if (this.hasDisplayNameChanged) {
-                this.setSeatName({
+                this.setSeatDisplayName({
+                    seatId: this.seatSelected.id,
+                    displayName: this.changes.displayName
+                })
+            }
+            if (this.hasWebUsernameChanged) {
+                this.setSeatWebUsername({
                     seatId: this.seatSelected.id,
-                    seatName: this.changes.name
+                    webUsername: this.changes.webUsername
                 })
             }
             if (this.hasExtensionChanged) {

src/store/pbx-seats.js

@@ -13,7 +13,8 @@ import {
     getSeatList,
     createSeat,
     removeSeat,
-    setSeatName,
+    setSeatDisplayName,
+    setSeatWebUsername,
     setSeatExtension,
     setSeatGroups,
     setSeatNumbers,
@@ -319,14 +320,28 @@ export default {
                 context.commit('seatRemovalFailed', err.message)
             })
         },
-        setSeatName (context, options) {
+        setSeatDisplayName (context, options) {
             context.commit('seatUpdateRequesting', {
                 seatId: options.seatId,
-                seatField: i18n.t('Seat name')
+                seatField: i18n.t('Seat displayName')
             })
-            setSeatName({
+            setSeatDisplayName({
                 seatId: options.seatId,
-                seatName: options.seatName
+                displayName: options.displayName
+            }).then((result) => {
+                context.commit('seatUpdateSucceeded', result)
+            }).catch((err) => {
+                context.commit('seatUpdateFailed', err.message)
+            })
+        },
+        setSeatWebUsername (context, options) {
+            context.commit('seatUpdateRequesting', {
+                seatId: options.seatId,
+                seatField: i18n.t('Seat Web Username')
+            })
+            setSeatWebUsername({
+                seatId: options.seatId,
+                webUsername: options.webUsername
             }).then((result) => {
                 context.commit('seatUpdateSucceeded', result)
             }).catch((err) => {