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)
(cherry picked from commit f830334c5d)
mr13.5.1
Debora Crescenzo 1 week ago committed by Crescenzo Debora
parent 52262c503e
commit e2d8087213
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'" v-if="selectedTab === 'preferences'"
class="col-12 column" class="col-12 column"
> >
<div <div class="col-12 col-md-6 q-pa-lg">
v-if="changes" <csc-list-spinner
class="col-12 col-md-6 q-pa-lg" v-if="!deviceSelected || !changes"
side />
top <div
> v-else
<q-input side
v-model="changes.station_name" top
:label="$t('Station name')"
:disable="isLoading"
@keyup.enter="save"
> >
<template <q-input
v-if="hasStationNameChanged" v-model="changes.station_name"
#append :label="$t('Station name')"
:disable="isLoading"
@keyup.enter="save"
> >
<csc-input-button-save <template
@click.stop="save" v-if="hasStationNameChanged"
/> #append
<csc-input-button-reset >
@click.stop="resetStationName" <csc-input-button-save
/> @click.stop="save"
</template> />
</q-input> <csc-input-button-reset
<q-input @click.stop="resetStationName"
v-model="changes.identifier" />
:disable="isLoading" </template>
:label="$t('MAC address')" </q-input>
@keyup.enter="save" <q-input
> v-model="changes.identifier"
<template :disable="isLoading"
v-if="hasIdentifierChanged" :label="$t('MAC address')"
#append @keyup.enter="save"
> >
<csc-input-button-save <template
@click.stop="save" v-if="hasIdentifierChanged"
/> #append
<csc-input-button-reset >
@click.stop="resetIdentifier" <csc-input-button-save
/> @click.stop="save"
</template> />
</q-input> <csc-input-button-reset
<csc-pbx-model-select @click.stop="resetIdentifier"
v-model="changes.profile_id" />
:profiles="deviceProfileList" </template>
:profile-map="deviceProfileMap" </q-input>
:has-reset-button="false" <csc-pbx-model-select
@opened="$emit('model-select-opened')" v-model="changes.profile_id"
@input="selectedProfile" :profiles="deviceProfileList"
> :profile-map="deviceProfileMap"
<template :has-reset-button="false"
v-if="hasProfileChanged" @opened="$emit('model-select-opened')"
#append @input="selectedProfile"
> >
<csc-input-button-save <template
@click.stop="save" v-if="hasProfileChanged"
/> #append
<csc-input-button-reset >
@click.stop="resetProfile" <csc-input-button-save
/> @click.stop="save"
</template> />
</csc-pbx-model-select> <csc-input-button-reset
<q-input @click.stop="resetProfile"
v-model="changes.admin_name" />
:label="$t('Admin name')" </template>
:disable="isLoadingPreferences" </csc-pbx-model-select>
@keyup.enter="save" <q-input
> v-model="changes.admin_name"
<template :label="$t('Admin name')"
v-if="hasAdminNameChanged" :disable="isLoadingPreferences"
#append @keyup.enter="save"
> >
<csc-input-button-save <template
@click.stop="save" v-if="hasAdminNameChanged"
/> #append
<csc-input-button-reset >
@click.stop="resetAdminName" <csc-input-button-save
/> @click.stop="save"
</template> />
</q-input> <csc-input-button-reset
@click.stop="resetAdminName"
/>
</template>
</q-input>
<q-input <q-input
v-model="changes.admin_pass" v-model="changes.admin_pass"
:label="$t('Admin password')" :label="$t('Admin password')"
:disable="isLoadingPreferences" :disable="isLoadingPreferences"
@keyup.enter="save" @keyup.enter="save"
>
<template
v-if="hasAdminPasswordChanged"
#append
> >
<csc-input-button-save <template
@click.stop="save" v-if="hasAdminPasswordChanged"
/> #append
<csc-input-button-reset >
@click.stop="resetAdminPassword" <csc-input-button-save
/> @click.stop="save"
</template> />
</q-input> <csc-input-button-reset
@click.stop="resetAdminPassword"
/>
</template>
</q-input>
<q-list> <q-list>
<q-item class="q-pb-sm q-mt-md"> <q-item class="q-pb-sm q-mt-md">
<q-toggle <q-toggle
v-model="changes.web_gui_dis" v-model="changes.web_gui_dis"
:label="$t('Disable phone web interface')" :label="$t('Disable phone web interface')"
:disable="isLoadingPreferences" :disable="isLoadingPreferences"
@update:model-value="changeGui" @update:model-value="changeGui"
/> />
</q-item> </q-item>
<q-item class="q-pb-sm"> <q-item class="q-pb-sm">
<q-toggle <q-toggle
v-model="changes.user_conf_priority" v-model="changes.user_conf_priority"
:label="$t('User config priority over provisioning')" :label="$t('User config priority over provisioning')"
:disable="isLoadingPreferences" :disable="isLoadingPreferences"
@update:model-value="changeUserConfig" @update:model-value="changeUserConfig"
/> />
</q-item> </q-item>
<q-item class="q-pb-sm"> <q-item class="q-pb-sm">
<q-toggle <q-toggle
v-model="changes.FW_upg_dis" v-model="changes.FW_upg_dis"
:label="$t('Firmware Upgrade disable')" :label="$t('Firmware Upgrade disable')"
:disable="isLoadingPreferences" :disable="isLoadingPreferences"
@update:model-value="changeFW" @update:model-value="changeFW"
/> />
</q-item> </q-item>
</q-list> </q-list>
</div>
</div> </div>
<div class="col-12 col-md-6 q-pa-lg"> <div class="col-12 col-md-6 q-pa-lg">
@ -374,12 +378,17 @@ export default {
$route: { $route: {
async handler (to) { async handler (to) {
this.id = to.params.id this.id = to.params.id
this.changes = null
this.collapseDevice()
await this.getData(this.id) await this.getData(this.id)
} }
}, },
deviceSelected () { deviceSelected () {
this.changes = this.getDeviceData() this.changes = this.getDeviceData()
}, },
devicePreferencesSelected () {
this.changes = this.getDeviceData()
},
deviceUpdateState (state) { deviceUpdateState (state) {
if (state === RequestState.succeeded) { if (state === RequestState.succeeded) {
showToast(this.getDeviceUpdateToastMessage) showToast(this.getDeviceUpdateToastMessage)
@ -416,7 +425,8 @@ export default {
methods: { methods: {
...mapMutations('pbxDevices', [ ...mapMutations('pbxDevices', [
'expandDevice', 'expandDevice',
'expandDevicePreferences' 'expandDevicePreferences',
'collapseDevice'
]), ]),
...mapActions('pbxDevices', [ ...mapActions('pbxDevices', [
'setDeviceKeys', 'setDeviceKeys',
@ -443,10 +453,15 @@ export default {
await this.loadDevice(deviceId) 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] const deviceProfile = this.deviceProfileMap[deviceProfileId]
if (deviceProfile.device_id) { if (deviceProfile && deviceProfile.device_id) {
await this.loadDeviceModel({ await this.loadDeviceModel({
type: 'all', type: 'all',
deviceId: deviceProfile.device_id deviceId: deviceProfile.device_id
@ -462,18 +477,20 @@ export default {
this.loadSubscribers() this.loadSubscribers()
}, },
getDeviceData () { getDeviceData () {
return (this.deviceSelected && this.devicePreferencesSelected) if (!this.deviceSelected) {
? { return null
station_name: this.deviceSelected.station_name, }
identifier: this.deviceSelected.identifier,
profile_id: this.deviceSelected.profile_id, return {
admin_name: this.devicePreferencesSelected.admin_name ? this.devicePreferencesSelected.admin_name : undefined, station_name: this.deviceSelected.station_name,
admin_pass: this.devicePreferencesSelected.admin_pass ? this.devicePreferencesSelected.admin_pass : undefined, identifier: this.deviceSelected.identifier,
web_gui_dis: this.devicePreferencesSelected.web_gui_dis ? this.devicePreferencesSelected.web_gui_dis : false, profile_id: this.deviceSelected.profile_id,
user_conf_priority: this.devicePreferencesSelected.user_conf_priority ? this.devicePreferencesSelected.user_conf_priority : false, admin_name: this.devicePreferencesSelected?.admin_name || undefined,
FW_upg_dis: this.devicePreferencesSelected.FW_upg_dis ? this.devicePreferencesSelected.FW_upg_dis : false admin_pass: this.devicePreferencesSelected?.admin_pass || undefined,
} web_gui_dis: this.devicePreferencesSelected?.web_gui_dis || false,
: null user_conf_priority: this.devicePreferencesSelected?.user_conf_priority || false,
FW_upg_dis: this.devicePreferencesSelected?.FW_upg_dis || false
}
}, },
resetStationName () { resetStationName () {
this.changes.station_name = this.deviceSelected?.station_name this.changes.station_name = this.deviceSelected?.station_name

8
src/pages/CscPagePbxDevices.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save