- Changing list view to 8 rows with 3 columns. - Preferences/Edit are now open in a separate page. - Adding the new 4 preferences ( - Admin Name/ Disable web GUI/ User config priority over-provisioning/FW upgrade disable) together with the existing parameters. Change-Id: Iae92c3313c592f7662587f52d0d4c9293ba41a97mr13.0
Nouhaila Idrissi Zouggari
11 months ago
committed by
Nouhaila Idrissi-Zouggari
parent
35a4b263ea
commit
f11e89813e
@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<csc-page-sticky-tabs
|
||||
id="csc-page-pbx-devices-details"
|
||||
ref="pageSticky"
|
||||
:value="selectedTab"
|
||||
>
|
||||
<template
|
||||
#tabs
|
||||
>
|
||||
<q-breadcrumbs
|
||||
class="q-item absolute absolute-left text-weight-light"
|
||||
active-color="primary"
|
||||
separator-color="primary"
|
||||
>
|
||||
<q-breadcrumbs-el
|
||||
key="devices"
|
||||
class="cursor-pointer"
|
||||
to="/user/pbx-configuration/devices"
|
||||
:label="$t('Devices')"
|
||||
icon="fas fa-fax"
|
||||
/>
|
||||
<q-breadcrumbs-el
|
||||
v-if="deviceSelected"
|
||||
key="device"
|
||||
:label="deviceSelected.station_name"
|
||||
/>
|
||||
</q-breadcrumbs>
|
||||
|
||||
<q-tab
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
class="d-flex justify-content-center"
|
||||
:name="tab.value"
|
||||
:icon="tab.icon"
|
||||
:label="tab.label"
|
||||
:default="tab.value === selectedTab"
|
||||
@click="selectTab(tab.value)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<q-item
|
||||
v-if="selectedTab === 'preferences'"
|
||||
class="col col-xs-12 col-md-6"
|
||||
>
|
||||
<q-list
|
||||
v-if="changes"
|
||||
class="col-xs-12 col-md-6 q-mr-xl"
|
||||
side
|
||||
top
|
||||
>
|
||||
<q-input
|
||||
v-model="changes.station_name"
|
||||
:label="$t('Station name')"
|
||||
:disable="isLoading"
|
||||
@keyup.enter="save"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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-list>
|
||||
<q-list
|
||||
v-if="changes"
|
||||
class="col-xs-12 col-md-5 q-mr-xl"
|
||||
side
|
||||
top
|
||||
>
|
||||
<q-input
|
||||
v-model="changes.admin_name"
|
||||
:label="$t('Admin name')"
|
||||
:disable="isLoadingPreferences"
|
||||
@keyup.enter="save"
|
||||
>
|
||||
<template
|
||||
v-if="hasAdminNameChanged"
|
||||
#append
|
||||
>
|
||||
<csc-input-button-save
|
||||
@click.stop="save"
|
||||
/>
|
||||
<csc-input-button-reset
|
||||
@click.stop="resetAdminName"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-toggle
|
||||
v-model="changes.web_gui_dis"
|
||||
class="q-pa-sm"
|
||||
:label="$t('Disable phone web interface')"
|
||||
:disable="isLoadingPreferences"
|
||||
@update:model-value="changeGui"
|
||||
/>
|
||||
<q-toggle
|
||||
v-model="changes.user_conf_priority"
|
||||
class="q-pa-sm"
|
||||
:label="$t('User config priority over provisioning')"
|
||||
:disable="isLoadingPreferences"
|
||||
@update:model-value="changeUserConfig"
|
||||
/>
|
||||
<q-toggle
|
||||
v-model="changes.FW_upg_dis"
|
||||
class="q-pa-sm"
|
||||
:label="$t('FW Upgrade disable')"
|
||||
:disable="isLoadingPreferences"
|
||||
@update:model-value="changeFW"
|
||||
/>
|
||||
</q-list>
|
||||
<q-list
|
||||
v-if="changes"
|
||||
class="col-xs-12 col-md-16 q-mr-xl"
|
||||
>
|
||||
<csc-pbx-device-config
|
||||
v-if="deviceModelImageMap[deviceProfileMap[deviceSelected.profile_id].device_id]"
|
||||
:device="deviceSelected"
|
||||
:model="deviceModelMap[deviceProfileMap[deviceSelected.profile_id].device_id]"
|
||||
:model-image="deviceModelImageMap[deviceProfileMap[deviceSelected.profile_id].device_id]"
|
||||
:loading="isSubscribersRequesting"
|
||||
:subscribers="subscriberList"
|
||||
:subscriber-map="subscriberMap"
|
||||
:device-preferences="true"
|
||||
@keysChanged="keysSave"
|
||||
/>
|
||||
</q-list>
|
||||
</q-item>
|
||||
</csc-page-sticky-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CscInputButtonReset from 'components/form/CscInputButtonReset'
|
||||
import CscInputButtonSave from 'components/form/CscInputButtonSave'
|
||||
import CscPageStickyTabs from 'components/CscPageStickyTabs'
|
||||
import CscPbxDeviceConfig from 'components/pages/PbxConfiguration/CscPbxDeviceConfig'
|
||||
import CscPbxModelSelect from 'components/pages/PbxConfiguration/CscPbxModelSelect'
|
||||
import useValidate from '@vuelidate/core'
|
||||
import {
|
||||
mapActions,
|
||||
mapGetters,
|
||||
mapMutations,
|
||||
mapState
|
||||
} from 'vuex'
|
||||
import { RequestState } from 'src/store/common'
|
||||
import {
|
||||
showGlobalError,
|
||||
showToast
|
||||
} from 'src/helpers/ui'
|
||||
export default {
|
||||
name: 'CscPagePbxDeviceDetails',
|
||||
components: {
|
||||
CscPageStickyTabs,
|
||||
CscInputButtonSave,
|
||||
CscInputButtonReset,
|
||||
CscPbxModelSelect,
|
||||
CscPbxDeviceConfig
|
||||
},
|
||||
props: {
|
||||
initialTab: {
|
||||
type: String,
|
||||
default: 'preferences'
|
||||
},
|
||||
device: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
changes: null,
|
||||
id: this.$route.params.id,
|
||||
selectedTab: this.initialTab,
|
||||
v$: useValidate()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('pbxDevices', [
|
||||
'deviceSelected',
|
||||
'deviceUpdateError',
|
||||
'devicePreferencesUpdateError',
|
||||
'deviceUpdateState',
|
||||
'devicePreferencesUpdateState',
|
||||
'devicePreferencesSelected'
|
||||
]),
|
||||
...mapState('pbx', [
|
||||
'deviceProfileList',
|
||||
'deviceProfileMap',
|
||||
'deviceModelImageMap',
|
||||
'deviceModelMap',
|
||||
'subscriberList',
|
||||
'subscriberMap'
|
||||
]),
|
||||
...mapGetters('pbx', [
|
||||
'getSubscriberOptions',
|
||||
'isSubscribersRequesting'
|
||||
]),
|
||||
...mapGetters('pbxDevices', [
|
||||
'getDeviceUpdateToastMessage',
|
||||
'getDevicePreferencesUpdateToastMessage',
|
||||
'isDeviceLoading',
|
||||
'isDevicePreferencesLoading'
|
||||
]),
|
||||
tabs () {
|
||||
return [
|
||||
{
|
||||
label: this.$t('Preferences'),
|
||||
value: 'preferences',
|
||||
icon: 'perm_phone_msg'
|
||||
}
|
||||
]
|
||||
},
|
||||
isLoading () {
|
||||
return this.isDeviceLoading(this.deviceSelected.id)
|
||||
},
|
||||
isLoadingPreferences () {
|
||||
return this.isDevicePreferencesLoading(this.devicePreferencesSelected.id)
|
||||
},
|
||||
hasStationNameChanged () {
|
||||
return this.changes.station_name !== this.deviceSelected.station_name
|
||||
},
|
||||
hasIdentifierChanged () {
|
||||
return this.changes.identifier !== this.deviceSelected.identifier
|
||||
},
|
||||
hasProfileChanged () {
|
||||
return this.changes.profile_id !== this.deviceSelected.profile_id
|
||||
},
|
||||
imageUrl () {
|
||||
if (this.modelImage && this.modelImage.url) {
|
||||
return this.modelImage.url
|
||||
}
|
||||
return null
|
||||
},
|
||||
hasAdminNameChanged () {
|
||||
return this.changes.admin_name !== this.devicePreferencesSelected.admin_name
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
deviceSelected () {
|
||||
this.changes = this.getDeviceData()
|
||||
},
|
||||
deviceUpdateState (state) {
|
||||
if (state === RequestState.succeeded) {
|
||||
showToast(this.getDeviceUpdateToastMessage)
|
||||
} else if (state === RequestState.failed) {
|
||||
showGlobalError(this.deviceUpdateError)
|
||||
}
|
||||
},
|
||||
devicePreferencesUpdateState (state) {
|
||||
if (state === RequestState.succeeded) {
|
||||
showToast(this.getDevicePreferencesUpdateToastMessage)
|
||||
} else if (state === RequestState.failed) {
|
||||
showGlobalError(this.devicePreferencesUpdateError)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.expandDevice(this.id)
|
||||
this.expandDevicePreferences(this.id)
|
||||
this.loadSubscribers()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('pbxDevices', [
|
||||
'expandDevice',
|
||||
'expandDevicePreferences'
|
||||
]),
|
||||
...mapActions('pbxDevices', [
|
||||
'setDeviceKeys',
|
||||
'setDeviceStationName',
|
||||
'setDeviceIdentifier',
|
||||
'setDeviceProfile',
|
||||
'setAdminName',
|
||||
'setGui',
|
||||
'setUserConfig',
|
||||
'setFW'
|
||||
]),
|
||||
...mapActions('pbx', [
|
||||
'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,
|
||||
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
|
||||
},
|
||||
resetStationName () {
|
||||
this.changes.station_name = this.deviceSelected.station_name
|
||||
},
|
||||
resetIdentifier () {
|
||||
this.changes.identifier = this.deviceSelected.identifier
|
||||
},
|
||||
resetAdminName () {
|
||||
this.changes.admin_name = this.devicePreferencesSelected.admin_name
|
||||
},
|
||||
selectedProfile (profileId) {
|
||||
this.changes.profile_id = profileId
|
||||
},
|
||||
resetProfile () {
|
||||
this.changes.profile_id = this.deviceSelected.profile_id
|
||||
},
|
||||
selectTab (tabName) {
|
||||
if (this.selectedTab !== tabName) {
|
||||
this.forceTabReload(tabName)
|
||||
}
|
||||
},
|
||||
forceTabReload (tabName) {
|
||||
this.selectedTab = tabName
|
||||
},
|
||||
keysSave (keys) {
|
||||
this.setDeviceKeys({
|
||||
deviceId: this.deviceSelected.id,
|
||||
keys: keys
|
||||
})
|
||||
},
|
||||
save () {
|
||||
if (this.hasStationNameChanged) {
|
||||
this.setDeviceStationName({
|
||||
deviceId: this.deviceSelected.id,
|
||||
stationName: this.changes.station_name
|
||||
})
|
||||
}
|
||||
if (this.hasIdentifierChanged) {
|
||||
this.setDeviceIdentifier({
|
||||
deviceId: this.deviceSelected.id,
|
||||
identifier: this.changes.identifier
|
||||
})
|
||||
}
|
||||
if (this.hasProfileChanged) {
|
||||
this.setDeviceProfile({
|
||||
deviceId: this.deviceSelected.id,
|
||||
profileId: this.changes.profile_id
|
||||
})
|
||||
}
|
||||
if (this.hasAdminNameChanged) {
|
||||
this.setAdminName({
|
||||
deviceId: this.devicePreferencesSelected.id,
|
||||
adminName: this.changes.admin_name
|
||||
})
|
||||
}
|
||||
},
|
||||
changeGui () {
|
||||
this.setGui({
|
||||
deviceId: this.devicePreferencesSelected.id,
|
||||
webGui: this.changes.web_gui_dis
|
||||
})
|
||||
},
|
||||
changeUserConfig () {
|
||||
this.setUserConfig({
|
||||
deviceId: this.devicePreferencesSelected.id,
|
||||
userConf: this.changes.user_conf_priority
|
||||
})
|
||||
},
|
||||
changeFW () {
|
||||
this.setFW({
|
||||
deviceId: this.devicePreferencesSelected.id,
|
||||
FWupg: this.changes.FW_upg_dis
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.no-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue