sipwise
/
ngcp-csc-ui
mirror of https://github.com/sipwise/ngcp-csc-ui.git
1
0
Fork 0
Code Issues Releases Wiki Activity

MT#65163 Improve device page performance and handle missing preferences

Browse Source 
* Fix device detail form not rendering on page 2+ by
  adding a watcher for reactive data updates
* Add loading spinner while device preferences are loading
* Remove unused loadDevicePreferencesList call from list page mount

Change-Id: Icc0318126303763d5eab3a39568817a2c41e88e8
(cherry picked from commit 554466657a)
mr12.5
Debora Crescenzo 1 week ago committed by Crescenzo Debora
parent fb1136c5ba
commit a5687fc461
2 changed files with 154 additions and 137 deletions
Show Stats Download Patch File Download Diff File

283
src/pages/CscPagePbxDeviceDetails.vue
Unescape View File

@ -42,132 +42,136 @@
v-if="selectedTab === 'preferences'"
class="col-12 column"
>
<div
v-if="changes"
class="col-12 col-md-6 q-pa-lg"
side
top
>
<q-input
v-model="changes.station_name"
:label="$t('Station name')"
:disable="isLoading"
@keyup.enter="save"
<div class="col-12 col-md-6 q-pa-lg">
<csc-list-spinner
v-if="!deviceSelected || !changes"
/>
<div
v-else
side
top
>
<template
v-if="hasStationNameChanged"
#append
<q-input
v-model="changes.station_name"
:label="$t('Station name')"
:disable="isLoading"
@keyup.enter="save"
>
<csc-input-button-save
@click.stop="save"
/>
<csc-input-button-reset
@click.stop="resetStationName"
/>
</template>
</q-input>
<q-input
v-model="changes.identifier"
:disable="isLoading"
:label="$t('MAC address')"
@keyup.enter="save"
>
<template
v-if="hasIdentifierChanged"
#append
<template
v-if="hasStationNameChanged"
#append
>
<csc-input-button-save
@click.stop="save"
/>
<csc-input-button-reset
@click.stop="resetStationName"
/>
</template>
</q-input>
<q-input
v-model="changes.identifier"
:disable="isLoading"
:label="$t('MAC address')"
@keyup.enter="save"
>
<csc-input-button-save
@click.stop="save"
/>
<csc-input-button-reset
@click.stop="resetIdentifier"
/>
</template>
</q-input>
<csc-pbx-model-select
v-model="changes.profile_id"
:profiles="deviceProfileList"
:profile-map="deviceProfileMap"
:has-reset-button="false"
@opened="$emit('model-select-opened')"
@input="selectedProfile"
>
<template
v-if="hasProfileChanged"
#append
<template
v-if="hasIdentifierChanged"
#append
>
<csc-input-button-save
@click.stop="save"
/>
<csc-input-button-reset
@click.stop="resetIdentifier"
/>
</template>
</q-input>
<csc-pbx-model-select
v-model="changes.profile_id"
:profiles="deviceProfileList"
:profile-map="deviceProfileMap"
:has-reset-button="false"
@opened="$emit('model-select-opened')"
@input="selectedProfile"
>
<csc-input-button-save
@click.stop="save"
/>
<csc-input-button-reset
@click.stop="resetProfile"
/>
</template>
</csc-pbx-model-select>
<q-input
v-model="changes.admin_name"
:label="$t('Admin name')"
:disable="isLoadingPreferences"
@keyup.enter="save"
>
<template
v-if="hasAdminNameChanged"
#append
<template
v-if="hasProfileChanged"
#append
>
<csc-input-button-save
@click.stop="save"
/>
<csc-input-button-reset
@click.stop="resetProfile"
/>
</template>
</csc-pbx-model-select>
<q-input
v-model="changes.admin_name"
:label="$t('Admin name')"
:disable="isLoadingPreferences"
@keyup.enter="save"
>
<csc-input-button-save
@click.stop="save"
/>
<csc-input-button-reset
@click.stop="resetAdminName"
/>
</template>
</q-input>
<template
v-if="hasAdminNameChanged"
#append
>
<csc-input-button-save
@click.stop="save"
/>
<csc-input-button-reset
@click.stop="resetAdminName"
/>
</template>
</q-input>
<q-input
v-model="changes.admin_pass"
:label="$t('Admin password')"
:disable="isLoadingPreferences"
@keyup.enter="save"
>
<template
v-if="hasAdminPasswordChanged"
#append
<q-input
v-model="changes.admin_pass"
:label="$t('Admin password')"
:disable="isLoadingPreferences"
@keyup.enter="save"
>
<csc-input-button-save
@click.stop="save"
/>
<csc-input-button-reset
@click.stop="resetAdminPassword"
/>
</template>
</q-input>
<template
v-if="hasAdminPasswordChanged"
#append
>
<csc-input-button-save
@click.stop="save"
/>
<csc-input-button-reset
@click.stop="resetAdminPassword"
/>
</template>
</q-input>
<q-list>
<q-item class="q-pb-sm q-mt-md">
<q-toggle
v-model="changes.web_gui_dis"
:label="$t('Disable phone web interface')"
:disable="isLoadingPreferences"
@update:model-value="changeGui"
/>
</q-item>
<q-item class="q-pb-sm">
<q-toggle
v-model="changes.user_conf_priority"
:label="$t('User config priority over provisioning')"
:disable="isLoadingPreferences"
@update:model-value="changeUserConfig"
/>
</q-item>
<q-item class="q-pb-sm">
<q-toggle
v-model="changes.FW_upg_dis"
:label="$t('Firmware Upgrade disable')"
:disable="isLoadingPreferences"
@update:model-value="changeFW"
/>
</q-item>
</q-list>
<q-list>
<q-item class="q-pb-sm q-mt-md">
<q-toggle
v-model="changes.web_gui_dis"
:label="$t('Disable phone web interface')"
:disable="isLoadingPreferences"
@update:model-value="changeGui"
/>
</q-item>
<q-item class="q-pb-sm">
<q-toggle
v-model="changes.user_conf_priority"
:label="$t('User config priority over provisioning')"
:disable="isLoadingPreferences"
@update:model-value="changeUserConfig"
/>
</q-item>
<q-item class="q-pb-sm">
<q-toggle
v-model="changes.FW_upg_dis"
:label="$t('Firmware Upgrade disable')"
:disable="isLoadingPreferences"
@update:model-value="changeFW"
/>
</q-item>
</q-list>
</div>
</div>
<div class="col-12 col-md-6 q-pa-lg">
@ -377,12 +381,17 @@ export default {
$route: {
async handler (to) {
this.id = to.params.id
this.changes = null
this.collapseDevice()
await this.getData(this.id)
}
},
deviceSelected () {
this.changes = this.getDeviceData()
},
devicePreferencesSelected () {
this.changes = this.getDeviceData()
},
deviceUpdateState (state) {
if (state === RequestState.succeeded) {
showToast(this.getDeviceUpdateToastMessage)
@ -419,7 +428,8 @@ export default {
methods: {
...mapMutations('pbxDevices', [
'expandDevice',
'expandDevicePreferences'
'expandDevicePreferences',
'collapseDevice'
]),
...mapActions('pbxDevices', [
'setDeviceKeys',
@ -446,10 +456,15 @@ export default {
await this.loadDevice(deviceId)
}
const deviceProfileId = this.deviceMapById[deviceId].profile_id
const device = this.deviceMapById[deviceId]
if (!device) {
return
}
const deviceProfileId = device.profile_id
const deviceProfile = this.deviceProfileMap[deviceProfileId]
if (deviceProfile.device_id) {
if (deviceProfile && deviceProfile.device_id) {
await this.loadDeviceModel({
type: 'all',
deviceId: deviceProfile.device_id
@ -465,18 +480,20 @@ export default {
this.loadSubscribers()
},
getDeviceData () {
return (this.deviceSelected && this.devicePreferencesSelected)
? {
station_name: this.deviceSelected.station_name,
identifier: this.deviceSelected.identifier,
profile_id: this.deviceSelected.profile_id,
admin_name: this.devicePreferencesSelected.admin_name ? this.devicePreferencesSelected.admin_name : undefined,
admin_pass: this.devicePreferencesSelected.admin_pass ? this.devicePreferencesSelected.admin_pass : undefined,
web_gui_dis: this.devicePreferencesSelected.web_gui_dis ? this.devicePreferencesSelected.web_gui_dis : false,
user_conf_priority: this.devicePreferencesSelected.user_conf_priority ? this.devicePreferencesSelected.user_conf_priority : false,
FW_upg_dis: this.devicePreferencesSelected.FW_upg_dis ? this.devicePreferencesSelected.FW_upg_dis : false
}
: null
if (!this.deviceSelected) {
return null
}
return {
station_name: this.deviceSelected.station_name,
identifier: this.deviceSelected.identifier,
profile_id: this.deviceSelected.profile_id,
admin_name: this.devicePreferencesSelected?.admin_name || undefined,
admin_pass: this.devicePreferencesSelected?.admin_pass || undefined,
web_gui_dis: this.devicePreferencesSelected?.web_gui_dis || false,
user_conf_priority: this.devicePreferencesSelected?.user_conf_priority || false,
FW_upg_dis: this.devicePreferencesSelected?.FW_upg_dis || false
}
},
resetStationName () {
this.changes.station_name = this.deviceSelected?.station_name

8
src/pages/CscPagePbxDevices.vue
Unescape View File

@ -308,12 +308,13 @@ export default {
}
},
async created () {
await this.loadProfiles()
if (this.deviceProfileList.length === 0) {
await this.loadProfiles()
}
},
mounted () {
this.$scrollTo(this.$parent.$el)
this.loadDeviceListFiltered()
this.loadDevicePreferencesList()
this.loadDeviceListFiltered(this.deviceListCurrentPage || 1)
},
methods: {
...mapActions('pbx', [
@ -329,7 +330,6 @@ export default {
]),
...mapActions('pbxDevices', [
'loadDeviceList',
'loadDevicePreferencesList',
'createDevice',
'removeDevice'
]),

Write Preview
Loading…
Cancel
Save