TT#80753 Use a smaller preview version of each PBX device image in order to save bandwidth and improve render performance
Change-Id: I84b03ad7146af767ae9c6bb0e336fca2ce8f5874mr9.1.1
Hans-Peter Herzog
5 years ago
parent
b038c533d8
commit
075452c698
@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<csc-page
|
||||||
|
:style="pageStyle"
|
||||||
|
>
|
||||||
|
<q-page-sticky
|
||||||
|
ref="pageSticky"
|
||||||
|
class="bg-secondary q-pt-md"
|
||||||
|
style="z-index: 10"
|
||||||
|
expand
|
||||||
|
position="top"
|
||||||
|
>
|
||||||
|
<slot
|
||||||
|
name="header"
|
||||||
|
/>
|
||||||
|
<q-separator />
|
||||||
|
<div
|
||||||
|
class="col-12"
|
||||||
|
>
|
||||||
|
<slot
|
||||||
|
name="toolbar"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<q-resize-observer
|
||||||
|
@resize="computeTopMargin"
|
||||||
|
/>
|
||||||
|
</q-page-sticky>
|
||||||
|
<slot />
|
||||||
|
</csc-page>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import CscPage from 'components/CscPage'
|
||||||
|
export default {
|
||||||
|
name: 'CscPageSticky',
|
||||||
|
components: {
|
||||||
|
CscPage
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
topMargin: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
pageStyle () {
|
||||||
|
return {
|
||||||
|
paddingTop: this.topMargin + 'px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.computeTopMargin()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
input ($event) {
|
||||||
|
this.$emit('input', $event)
|
||||||
|
this.computeTopMargin()
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.computeTopMargin()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
computeTopMargin () {
|
||||||
|
this.topMargin = this.$refs.pageSticky.$el.offsetHeight + 36
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<csc-input
|
||||||
|
ref="input"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:type="inputType"
|
||||||
|
:value="value"
|
||||||
|
@input="$emit('input', $event)"
|
||||||
|
v-on="$listeners"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
slot="prepend"
|
||||||
|
>
|
||||||
|
<q-icon
|
||||||
|
name="lock"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template
|
||||||
|
v-slot:append
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
v-if="value !== ''"
|
||||||
|
:icon="icon"
|
||||||
|
:disable="$attrs.disable"
|
||||||
|
tabindex="-1"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
@click.stop="visible=!visible"
|
||||||
|
/>
|
||||||
|
<q-btn
|
||||||
|
v-if="generate"
|
||||||
|
icon="casino"
|
||||||
|
:disable="$attrs.disable"
|
||||||
|
tabindex="-1"
|
||||||
|
color="primary"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
@click.stop="generatePassword"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</csc-input>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import CscInput from 'components/form/CscInput'
|
||||||
|
import PasswordGenerator from 'generate-password'
|
||||||
|
export default {
|
||||||
|
name: 'CscInputPassword',
|
||||||
|
components: { CscInput },
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: undefined
|
||||||
|
},
|
||||||
|
generate: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
visible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
inputType () {
|
||||||
|
if (this.visible) {
|
||||||
|
return 'text'
|
||||||
|
} else {
|
||||||
|
return 'password'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
icon () {
|
||||||
|
if (!this.visible) {
|
||||||
|
return 'visibility_off'
|
||||||
|
} else {
|
||||||
|
return 'visibility'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
generatePassword () {
|
||||||
|
const pass = PasswordGenerator.generate({
|
||||||
|
length: 10,
|
||||||
|
numbers: true
|
||||||
|
})
|
||||||
|
this.$emit('input', pass)
|
||||||
|
this.$emit('generated', pass)
|
||||||
|
},
|
||||||
|
clear () {
|
||||||
|
this.$refs.input.clear()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@ -0,0 +1,144 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="csc-input-password-retype"
|
||||||
|
>
|
||||||
|
<csc-input-password
|
||||||
|
v-model="password"
|
||||||
|
v-bind="$attrs"
|
||||||
|
generate
|
||||||
|
clearable
|
||||||
|
:label="$t('pbxConfig.typePassword')"
|
||||||
|
@input="inputPassword"
|
||||||
|
@generated="passwordGenerated"
|
||||||
|
@clear="$refs.passwordRetype.clear()"
|
||||||
|
/>
|
||||||
|
<password-strength-meter
|
||||||
|
v-show="false"
|
||||||
|
v-model="password"
|
||||||
|
:strength-meter-only="true"
|
||||||
|
@score="strengthMeterScoreUpdate"
|
||||||
|
/>
|
||||||
|
<q-linear-progress
|
||||||
|
v-model="passwordScoreMappedValue"
|
||||||
|
:color="passwordScoreColor"
|
||||||
|
size="8px"
|
||||||
|
/>
|
||||||
|
<csc-input-password
|
||||||
|
ref="passwordRetype"
|
||||||
|
v-model="passwordRetype"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:label="$t('pbxConfig.retypePassword')"
|
||||||
|
:error="$v.passwordRetype.$error"
|
||||||
|
:error-message="errorMessagePasswordRetype"
|
||||||
|
clearable
|
||||||
|
:disable="passwordScore < 2 || $attrs.disable"
|
||||||
|
@clear="$v.passwordRetype.$reset"
|
||||||
|
@blur="blur"
|
||||||
|
@input="inputRetypePassword"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
sameAs,
|
||||||
|
required
|
||||||
|
} from 'vuelidate/lib/validators'
|
||||||
|
import CscInputPassword from 'components/form/CscInputPassword'
|
||||||
|
import PasswordStrengthMeter from 'vue-password-strength-meter'
|
||||||
|
export default {
|
||||||
|
name: 'CscInputPasswordRetype',
|
||||||
|
components: {
|
||||||
|
CscInputPassword,
|
||||||
|
PasswordStrengthMeter
|
||||||
|
},
|
||||||
|
validations: {
|
||||||
|
password: {
|
||||||
|
required
|
||||||
|
},
|
||||||
|
passwordRetype: {
|
||||||
|
sameAsPassword: sameAs('password')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: Object,
|
||||||
|
default () {
|
||||||
|
return {
|
||||||
|
password: '',
|
||||||
|
passwordRetype: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
password: this.value.password,
|
||||||
|
passwordRetype: this.value.passwordRetype,
|
||||||
|
passwordScore: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
errorMessagePasswordRetype () {
|
||||||
|
if (!this.$v.passwordRetype.sameAsPassword) {
|
||||||
|
return this.$t('pbxConfig.errorPasswordNotEqual')
|
||||||
|
} else {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
passwordScoreMappedValue () {
|
||||||
|
if (this.passwordScore === null || this.passwordScore === undefined) {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
return (this.passwordScore + 1) / 5
|
||||||
|
},
|
||||||
|
passwordScoreColor () {
|
||||||
|
if (this.passwordScore < 2) {
|
||||||
|
return 'negative'
|
||||||
|
} else if (this.passwordScore === 2) {
|
||||||
|
return 'warning'
|
||||||
|
} else {
|
||||||
|
return 'primary'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value (value) {
|
||||||
|
this.password = value.password
|
||||||
|
this.passwordRetype = value.passwordRetype
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
strengthMeterScoreUpdate (score) {
|
||||||
|
this.passwordScore = score
|
||||||
|
this.$emit('score', score)
|
||||||
|
},
|
||||||
|
inputPassword () {
|
||||||
|
this.$emit('input', {
|
||||||
|
password: this.password,
|
||||||
|
passwordRetype: this.passwordRetype
|
||||||
|
})
|
||||||
|
},
|
||||||
|
inputRetypePassword () {
|
||||||
|
this.$v.passwordRetype.$reset()
|
||||||
|
this.inputPassword()
|
||||||
|
},
|
||||||
|
passwordGenerated (password) {
|
||||||
|
this.$emit('input', {
|
||||||
|
password: password,
|
||||||
|
passwordRetype: password
|
||||||
|
})
|
||||||
|
},
|
||||||
|
blur () {
|
||||||
|
this.$v.passwordRetype.$touch()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" rel="stylesheet/stylus">
|
||||||
|
.csc-input-password-retype
|
||||||
|
.Password__strength-meter
|
||||||
|
margin 0
|
||||||
|
margin-top 16px !important
|
||||||
|
margin-bottom 16px !important
|
||||||
|
</style>
|
||||||
@ -0,0 +1,135 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
class="row justify-center full-width q-gutter-x-sm q-pt-sm"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="col-md-2"
|
||||||
|
>
|
||||||
|
<q-select
|
||||||
|
v-model="filterType"
|
||||||
|
emit-value
|
||||||
|
map-options
|
||||||
|
dense
|
||||||
|
:options="filterTypeOptions"
|
||||||
|
:label="$t('pbxConfig.seatsFiltersFilterByLabel')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-md-2"
|
||||||
|
>
|
||||||
|
<q-input
|
||||||
|
v-model="typedFilter"
|
||||||
|
type="text"
|
||||||
|
dense
|
||||||
|
:disable="filterType === null"
|
||||||
|
:label="$t('pbxConfig.seatsFilterInputLabel')"
|
||||||
|
@keypress.enter="triggerFilter"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
v-slot:append
|
||||||
|
>
|
||||||
|
<q-btn
|
||||||
|
icon="search"
|
||||||
|
color="primary"
|
||||||
|
dense
|
||||||
|
flat
|
||||||
|
@click="triggerFilter"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</q-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="row justify-center full-width q-gutter-x-sm q-pt-sm"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="col-md-4"
|
||||||
|
>
|
||||||
|
<q-chip
|
||||||
|
v-for="(filterItem, index) in filters"
|
||||||
|
:key="index"
|
||||||
|
:label="$t('pbxConfig.seatsFiltersTypes.' + filterItem.name) + ': ' + filterItem.value"
|
||||||
|
:disable="false"
|
||||||
|
icon="filter_alt"
|
||||||
|
removable
|
||||||
|
dense
|
||||||
|
color="primary"
|
||||||
|
text-color="dark"
|
||||||
|
@remove="removeFilter(filterItem.name)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import _ from 'lodash'
|
||||||
|
export default {
|
||||||
|
name: 'CscPbxSeatFilters',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
filterType: null,
|
||||||
|
typedFilter: '',
|
||||||
|
filters: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
filterTypeOptions () {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: this.$t('pbxConfig.seatsFiltersTypes.display_name'),
|
||||||
|
value: 'display_name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.$t('pbxConfig.seatsFiltersTypes.pbx_extension'),
|
||||||
|
value: 'pbx_extension'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.$t('pbxConfig.seatsFiltersTypes.primary_number'),
|
||||||
|
value: 'primary_number'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: this.$t('pbxConfig.seatsFiltersTypes.alias_number'),
|
||||||
|
value: 'alias_number'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
triggerFilter () {
|
||||||
|
this.addFilter(this.filterType, this.typedFilter)
|
||||||
|
},
|
||||||
|
removeFilter (name) {
|
||||||
|
this.filters = this.filters.filter(item => item.name !== name)
|
||||||
|
this.filter()
|
||||||
|
},
|
||||||
|
removeFilters () {
|
||||||
|
if (this.filters.length > 0) {
|
||||||
|
this.filters = []
|
||||||
|
this.filter()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addFilter (name, value) {
|
||||||
|
const valueTrimmed = _.trim(value)
|
||||||
|
if (valueTrimmed) {
|
||||||
|
this.typedFilter = ''
|
||||||
|
this.filters = this.filters.filter(item => item.name !== name)
|
||||||
|
const filter = {
|
||||||
|
name: name,
|
||||||
|
value: valueTrimmed
|
||||||
|
}
|
||||||
|
this.filters.push(filter)
|
||||||
|
this.filter()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
filter () {
|
||||||
|
const params = {}
|
||||||
|
this.filters.forEach(filter => {
|
||||||
|
params[filter.name] = filter.value
|
||||||
|
})
|
||||||
|
this.$emit('filter', params)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Loading…
Reference in new issue