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

TT#40251 PBXConfig: As a Customer, I want to get notified about invalid input

Browse Source 
before creating a PBXSeat

Change-Id: I5699e461ee1179bbed8094cefc50e0a6e504964f
changes/62/22762/6
Hans-Peter Herzog 7 years ago
parent c3963b1f35
commit 40e15adff0
8 changed files with 483 additions and 152 deletions
Show Stats Download Patch File Download Diff File

2
src/api/pbx-config.js
Unescape View File

@ -10,7 +10,7 @@ import { getList, get, patchReplace } from './common'
var createId = uuid.v4; var createId = uuid.v4;
export const PBX_CONFIG_ORDER_BY = 'created_timestamp'; export const PBX_CONFIG_ORDER_BY = 'create_timestamp';
export const PBX_CONFIG_ORDER_DIRECTION = 'desc'; export const PBX_CONFIG_ORDER_DIRECTION = 'desc';
export function getGroups(options) { export function getGroups(options) {

8
src/components/pages/PbxConfiguration/CscPbxDevices.vue
Unescape View File

@ -32,7 +32,7 @@
:after="searchButtonStationName" :after="searchButtonStationName"
/> />
<q-chip <q-chip
class="full-width" class="full-width csc-search-criteria"
v-if="listStationNameFilter != null" v-if="listStationNameFilter != null"
color="primary" color="primary"
>{{ listStationNameFilter }} >{{ listStationNameFilter }}
@ -54,7 +54,7 @@
:after="searchButtonMacAddress" :after="searchButtonMacAddress"
/> />
<q-chip <q-chip
class="full-width" class="full-width csc-search-criteria"
v-if="listMacAddressFilter != null" v-if="listMacAddressFilter != null"
color="primary" color="primary"
>{{ listMacAddressFilter }} >{{ listMacAddressFilter }}
@ -79,7 +79,7 @@
@select="filterByProfile" @select="filterByProfile"
/> />
<q-chip <q-chip
class="full-width" class="full-width csc-search-criteria"
v-if="listProfileFilter != null" v-if="listProfileFilter != null"
:avatar="profileUrl" :avatar="profileUrl"
color="primary" color="primary"
@ -533,7 +533,7 @@
.filter-model-select .filter-model-select
margin 16px 16px 8px 16px margin 16px 16px 8px 16px
.q-chip .q-chip.csc-search-criteria
position relative position relative
.q-chip-main .q-chip-main
text-overflow ellipsis text-overflow ellipsis

307
src/components/pages/PbxConfiguration/CscPbxSeat.vue
Unescape View File

@ -1,94 +1,230 @@
<template> <template>
<q-card class="csc-entity csc-pbx-seat shadow-1">
<q-card-title class="csc-entity-title"> <q-item class="csc-list-item csc-pbx-seat">
<q-item-side
v-if="!expanded"
>
<q-icon <q-icon
size="32px"
name="person" name="person"
color="secondary" color="secondary"
size="24px"
/> />
<span class="csc-entity-title-text"> </q-item-side>
{{ entityTitle }} <q-item-main>
</span> <q-item-tile
<q-chip
v-if="!expanded" v-if="!expanded"
pointing="left" class="csc-item-title"
color="primary" label
class="gt-md"
> >
{{ $t('pbxConfig.extension') }}: <span class="csc-important">{{ seat.pbx_extension }}</span> {{ seat.display_name }}
</q-chip> </q-item-tile>
<q-btn <q-item-tile
:icon="titleIcon" v-if="!expanded"
:small="isMobile" class="csc-item-subtitle"
color="primary" sublabel
slot="right" >
flat <div>
@click="toggleMain()" <span class="csc-item-label">{{ $t('pbxConfig.extension') }}:</span>
/> <span class="csc-item-value">{{ seat.pbx_extension }}</span>
<q-btn </div>
icon="delete" </q-item-tile>
:small="isMobile" <q-item-tile
color="negative" v-if="!expanded"
slot="right" class="csc-item-subtitle"
flat sublabel
@click="remove()" >
/> <div
</q-card-title> v-if="!hasGroups"
<q-card-main class="csc-form-info"
v-if="expanded" >
class="transition-generic" <q-icon name="info" color="info" size="24px"/>
<span class="csc-info-text">{{ $t('pbxConfig.noGroupAssigned') }}</span>
</div>
<div
v-if="hasGroups">
<span
class="csc-item-label">
{{ $t('pbxConfig.groups') }}:
</span>
<span
class="csc-item-value"
v-for="group in seat.groups"
>
{{ group.display_name }}
</span>
</div>
</q-item-tile>
<q-item-tile
class="csc-list-item-main"
v-if="expanded"
>
<q-field :label="$t('pbxConfig.seatName')">
<q-input
v-model="changes.name"
:after="nameButtons"
@keyup.enter="saveName"
/>
</q-field>
<q-field :label="$t('pbxConfig.extension')">
<q-input
v-model="changes.extension"
:after="extensionButtons"
@keyup.enter="saveExtension"
/>
</q-field>
<q-field :label="$t('pbxConfig.primaryNumber')">
<q-input
v-model="primaryNumber"
readonly
disable
/>
</q-field>
<q-field :label="$t('pbxConfig.aliasNumbers')">
<q-select
ref="aliasNumbers"
v-model="changes.aliasNumbers"
:options="aliasNumberOptions"
multiple
chips
clearable
:after="aliasNumberButtons"
/>
</q-field>
<q-field :label="$t('pbxConfig.groups')">
<q-select
v-model="changes.groups"
:options="groupOptions"
multiple
chips
clearable
:after="groupButtons"
/>
</q-field>
</q-item-tile>
</q-item-main>
<q-item-side
right
class="csc-item-buttons"
> >
<q-field :label="$t('pbxConfig.seatName')"> <q-item-tile>
<q-input <div class="csc-item-button">
v-model="changes.name" <q-icon
:after="nameButtons" size="26px"
@keyup.enter="saveName" :name="titleIcon"
/> color="primary"
</q-field> slot="right"
<q-field :label="$t('pbxConfig.extension')"> @click="toggleMain()"
<q-input />
v-model="changes.extension" </div>
type="number" <div class="csc-item-button">
:after="extensionButtons" <q-icon
@keyup.enter="saveExtension" size="26px"
/> name="delete"
</q-field> color="negative"
<q-field :label="$t('pbxConfig.primaryNumber')"> slot="right"
<q-input @click="remove()"
v-model="primaryNumber" />
readonly </div>
disable </q-item-tile>
/> </q-item-side>
</q-field>
<q-field :label="$t('pbxConfig.aliasNumbers')">
<q-select
ref="aliasNumbers"
v-model="changes.aliasNumbers"
:options="aliasNumberOptions"
multiple
chips
clearable
:after="aliasNumberButtons"
/>
</q-field>
<q-field :label="$t('pbxConfig.groups')">
<q-select
v-model="changes.groups"
:options="groupOptions"
multiple
chips
clearable
:after="groupButtons"
/>
</q-field>
</q-card-main>
<q-inner-loading :visible="isLoading"> <q-inner-loading :visible="isLoading">
<q-spinner-mat <q-spinner-mat
size="60px" size="60px"
color="primary" color="primary"
/> />
</q-inner-loading> </q-inner-loading>
</q-card> </q-item>
<!--<q-card class="csc-entity csc-pbx-seat shadow-1">-->
<!--<q-card-title class="csc-entity-title">-->
<!--<q-icon-->
<!--name="person"-->
<!--color="secondary"-->
<!--size="24px"-->
<!--/>-->
<!--<span class="csc-entity-title-text">-->
<!--{{ entityTitle }}-->
<!--</span>-->
<!--<q-chip-->
<!--v-if="!expanded"-->
<!--pointing="left"-->
<!--color="primary"-->
<!--class="gt-md"-->
<!--&gt;-->
<!--{{ $t('pbxConfig.extension') }}: <span class="csc-important">{{ seat.pbx_extension }}</span>-->
<!--</q-chip>-->
<!--<q-btn-->
<!--:icon="titleIcon"-->
<!--:small="isMobile"-->
<!--color="primary"-->
<!--slot="right"-->
<!--flat-->
<!--@click="toggleMain()"-->
<!--/>-->
<!--<q-btn-->
<!--icon="delete"-->
<!--:small="isMobile"-->
<!--color="negative"-->
<!--slot="right"-->
<!--flat-->
<!--@click="remove()"-->
<!--/>-->
<!--</q-card-title>-->
<!--<q-card-main-->
<!--v-if="expanded"-->
<!--class="transition-generic"-->
<!--&gt;-->
<!--<q-field :label="$t('pbxConfig.seatName')">-->
<!--<q-input-->
<!--v-model="changes.name"-->
<!--:after="nameButtons"-->
<!--@keyup.enter="saveName"-->
<!--/>-->
<!--</q-field>-->
<!--<q-field :label="$t('pbxConfig.extension')">-->
<!--<q-input-->
<!--v-model="changes.extension"-->
<!--type="number"-->
<!--:after="extensionButtons"-->
<!--@keyup.enter="saveExtension"-->
<!--/>-->
<!--</q-field>-->
<!--<q-field :label="$t('pbxConfig.primaryNumber')">-->
<!--<q-input-->
<!--v-model="primaryNumber"-->
<!--readonly-->
<!--disable-->
<!--/>-->
<!--</q-field>-->
<!--<q-field :label="$t('pbxConfig.aliasNumbers')">-->
<!--<q-select-->
<!--ref="aliasNumbers"-->
<!--v-model="changes.aliasNumbers"-->
<!--:options="aliasNumberOptions"-->
<!--multiple-->
<!--chips-->
<!--clearable-->
<!--:after="aliasNumberButtons"-->
<!--/>-->
<!--</q-field>-->
<!--<q-field :label="$t('pbxConfig.groups')">-->
<!--<q-select-->
<!--v-model="changes.groups"-->
<!--:options="groupOptions"-->
<!--multiple-->
<!--chips-->
<!--clearable-->
<!--:after="groupButtons"-->
<!--/>-->
<!--</q-field>-->
<!--</q-card-main>-->
<!--<q-inner-loading :visible="isLoading">-->
<!--<q-spinner-mat-->
<!--size="60px"-->
<!--color="primary"-->
<!--/>-->
<!--</q-inner-loading>-->
<!--</q-card>-->
</template> </template>
<script> <script>
@ -108,7 +244,12 @@
QInnerLoading, QInnerLoading,
QSpinnerMat, QSpinnerMat,
QTransition, QTransition,
Platform Platform,
QItem,
QItemSide,
QItemMain,
QItemTile,
QAlert
} from 'quasar-framework' } from 'quasar-framework'
export default { export default {
name: 'csc-pbx-seat', name: 'csc-pbx-seat',
@ -137,7 +278,12 @@
QBtn, QBtn,
QInnerLoading, QInnerLoading,
QSpinnerMat, QSpinnerMat,
QTransition QTransition,
QItem,
QItemSide,
QItemMain,
QItemTile,
QAlert
}, },
computed: { computed: {
entityTitle() { entityTitle() {
@ -285,6 +431,9 @@
); );
} }
return buttons; return buttons;
},
hasGroups() {
return _.isArray(_.get(this.seat, 'groups')) && this.seat.groups.length > 0;
} }
}, },
methods: { methods: {

184
src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue
Unescape View File

@ -1,44 +1,100 @@
<template> <template>
<q-card class="csc-pbx-seat-add-form shadow-1"> <div class="csc-form csc-pbx-seat-add-form">
<q-card-title> <q-field :error-label="seatNameErrorMessage">
<q-icon name="add" color="primary" size="22px"/> <q-input
<span>{{ $t('pbxConfig.addSeat') }}</span> @input="$v.data.name.$touch"
</q-card-title> :error="$v.data.name.$error"
<q-card-main> :disabled="loading"
<q-field> :readonly="loading"
<q-input :disabled="loading" :readonly="loading" v-model="data.name" autofocus v-model="data.name"
:float-label="$t('pbxConfig.seatName')" clearable /> autofocus
</q-field> :float-label="$t('pbxConfig.seatName')"
<q-field> clearable
<q-input :disabled="loading" :readonly="loading" type="number" v-model="data.extension" />
clearable :min="1" :max="1000000" :float-label="$t('pbxConfig.extension')" /> </q-field>
</q-field> <q-field :error-label="extensionErrorMessage">
<q-field> <q-input
<q-select :disabled="loading" :readonly="loading" v-model="data.aliasNumbers" multiple chips clearable @input="$v.data.extension.$touch"
:float-label="$t('pbxConfig.aliasNumbers')" :options="aliasNumberOptions" /> :error="$v.data.extension.$error"
</q-field> :disabled="loading"
<q-field> :readonly="loading"
<q-select :disabled="loading" :readonly="loading" v-model="data.groups" multiple chips clearable v-model="data.extension"
:float-label="$t('pbxConfig.groups')" :options="groupOptions" /> :float-label="$t('pbxConfig.extension')"
</q-field> clearable
</q-card-main> />
<q-card-separator/> </q-field>
<q-card-actions align="center"> <q-field>
<q-btn v-if="!loading" flat color="secondary" icon="clear" <q-select
@click="cancel()">{{ $t('buttons.cancel') }}</q-btn> :disabled="loading"
<q-btn v-if="!loading" flat color="primary" icon="done" :readonly="loading"
@click="save()">{{ $t('buttons.save') }}</q-btn> v-model="data.aliasNumbers"
</q-card-actions> multiple
chips
clearable
:float-label="$t('pbxConfig.aliasNumbers')"
:options="aliasNumberOptions"
/>
</q-field>
<q-field>
<q-select
:disabled="loading"
:readonly="loading"
v-model="data.groups"
multiple
chips
clearable
:float-label="$t('pbxConfig.groups')"
:options="groupOptions"
/>
</q-field>
<div class="csc-form-actions row justify-center">
<q-btn
v-if="!loading"
flat
color="secondary"
icon="clear"
@click="cancel()"
>
{{ $t('buttons.cancel') }}
</q-btn>
<q-btn
v-if="!loading"
:disabled="$v.data.$invalid"
flat
color="primary"
icon="person"
@click="save()"
>
{{ $t('pbxConfig.createSeat') }}
</q-btn>
</div>
<q-inner-loading :visible="loading"> <q-inner-loading :visible="loading">
<q-spinner-mat size="60px" color="primary"></q-spinner-mat> <q-spinner-mat size="60px" color="primary" />
</q-inner-loading> </q-inner-loading>
</q-card> </div>
</template> </template>
<script> <script>
import { QCard, QCardTitle, QCardMain, QCardActions, QCardSeparator, QBtn, import {
QInnerLoading, QSpinnerMat, QField, QInput, QSelect, QIcon } from 'quasar-framework' required,
maxLength,
numeric
} from 'vuelidate/lib/validators'
import {
QCard,
QCardTitle,
QCardMain,
QCardActions,
QCardSeparator,
QBtn,
QInnerLoading,
QSpinnerMat,
QField,
QInput,
QSelect,
QIcon
} from 'quasar-framework'
export default { export default {
name: 'csc-pbx-seat-add-form', name: 'csc-pbx-seat-add-form',
@ -48,14 +104,62 @@
'loading' 'loading'
], ],
components: { components: {
QCard, QCardTitle, QCardMain, QCardActions, QCardSeparator, QBtn, QCard,
QInnerLoading, QSpinnerMat, QField, QInput, QSelect, QIcon QCardTitle,
QCardMain,
QCardActions,
QCardSeparator,
QBtn,
QInnerLoading,
QSpinnerMat,
QField,
QInput,
QSelect,
QIcon
},
validations: {
data: {
name: {
required,
maxLength: maxLength(64)
},
extension: {
required,
numeric,
maxLength: maxLength(64)
}
}
}, },
data () { data () {
return { return {
data: this.getDefaults() data: this.getDefaults()
} }
}, },
computed: {
seatNameErrorMessage() {
if (!this.$v.data.name.required) {
return this.$t('pbxConfig.requiredSeatName');
}
else if (!this.$v.data.name.maxLength) {
return this.$t('pbxConfig.seatNameMaxLength', {
maxLength: this.$v.data.name.$params.maxLength.max
});
}
},
extensionErrorMessage() {
if (!this.$v.data.extension.required) {
return this.$t('pbxConfig.requiredExtension');
}
else if (!this.$v.data.name.maxLength) {
return this.$t('pbxConfig.extensionMaxLength', {
maxLength: this.$v.data.extension.$params.maxLength.max
});
}
else if (!this.$v.data.name.numeric) {
return this.$t('pbxConfig.extensionAlphaNum');
}
}
},
methods: { methods: {
getDefaults() { getDefaults() {
return { return {
@ -73,16 +177,12 @@
}, },
reset() { reset() {
this.data = this.getDefaults(); this.data = this.getDefaults();
this.$v.$reset();
} }
} }
} }
</script> </script>
<style lang="stylus" rel="stylesheet/stylus"> <style lang="stylus" rel="stylesheet/stylus">
@import '../../../themes/quasar.variables.styl'; @import '../../../themes/app.common.styl';
.csc-pbx-seat-add-form
position: relative
.csc-pbx-seat-add-form
.q-field:last-child
margin-bottom: 36px
</style> </style>

72
src/components/pages/PbxConfiguration/CscPbxSeats.vue
Unescape View File

@ -1,14 +1,7 @@
<template> <template>
<csc-page :title="$t('pbxConfig.seatsTitle')"> <csc-page
<csc-pbx-seat-add-form class="csc-list-page"
v-show="addFormEnabled" >
ref="addForm"
:alias-number-options="aliasNumberOptions"
:group-options="groupOptions"
:loading="isAdding"
@save="addSeat"
@cancel="disableAddForm"
/>
<div <div
v-show="!addFormEnabled" v-show="!addFormEnabled"
class="row justify-center" class="row justify-center"
@ -22,6 +15,21 @@
{{ $t('pbxConfig.addSeat') }} {{ $t('pbxConfig.addSeat') }}
</q-btn> </q-btn>
</div> </div>
<div
class="row justify-center"
>
<csc-pbx-seat-add-form
class="col-xs-12 col-md-6"
v-show="addFormEnabled"
ref="addForm"
:alias-number-options="aliasNumberOptions"
:group-options="groupOptions"
:loading="isAdding"
@save="addSeat"
@cancel="disableAddForm"
/>
</div>
<div <div
v-if="isListLoadingVisible" v-if="isListLoadingVisible"
class="row justify-center" class="row justify-center"
@ -41,19 +49,31 @@
@change="changePage" @change="changePage"
/> />
</div> </div>
<csc-pbx-seat <div
v-for="seat in seats" class="">
:key="seat.id" <q-list
:seat="seat" class=""
:alias-number-options="aliasNumberOptions" no-border
:group-options="groupOptions" separator
@remove="removeSeat" sparse
:loading="isItemLoading(seat.id)" multiline
@save-name="setSeatName" :highlight="!isMobile"
@save-extension="setSeatExtension" >
@save-alias-numbers="updateAliasNumbers" <csc-pbx-seat
@save-groups="updateGroups" v-for="seat in seats"
/> :key="seat.id"
:seat="seat"
:alias-number-options="aliasNumberOptions"
:group-options="groupOptions"
@remove="removeSeat"
:loading="isItemLoading(seat.id)"
@save-name="setSeatName"
@save-extension="setSeatExtension"
@save-alias-numbers="updateAliasNumbers"
@save-groups="updateGroups"
/>
</q-list>
</div>
<div <div
v-if="seats.length === 0 && !isListRequesting" v-if="seats.length === 0 && !isListRequesting"
class="row justify-center csc-no-entities" class="row justify-center csc-no-entities"
@ -91,7 +111,8 @@
QSpinnerDots, QSpinnerDots,
QSpinnerMat, QSpinnerMat,
Dialog, Dialog,
QPagination QPagination,
Platform
} from 'quasar-framework' } from 'quasar-framework'
export default { export default {
@ -168,6 +189,9 @@
}); });
}); });
return groups; return groups;
},
isMobile() {
return Platform.is.mobile;
} }
}, },
watch: { watch: {

11
src/locales/en.json
Unescape View File

@ -296,7 +296,7 @@
"removeGroup": "Remove group", "removeGroup": "Remove group",
"removeGroupTitle": "Remove group", "removeGroupTitle": "Remove group",
"removeGroupText": "You are about to remove group {group}", "removeGroupText": "You are about to remove group {group}",
"seatName": "Seat Name", "seatName": "Name",
"addSeat": "Add Seat", "addSeat": "Add Seat",
"removeSeat": "Remove seat", "removeSeat": "Remove seat",
"removeSeatTitle": "Remove seat", "removeSeatTitle": "Remove seat",
@ -314,6 +314,11 @@
"noStationName": "Could not find any device with station name matching the filter criteria", "noStationName": "Could not find any device with station name matching the filter criteria",
"noGroups": "No groups created yet", "noGroups": "No groups created yet",
"noSeats": "No seats created yet", "noSeats": "No seats created yet",
"requiredSeatName": "Seat name is required",
"seatNameMaxLength": "Seat name must have at most {maxLength} letters",
"requiredExtension": "Extension is required",
"extensionMaxLength": "Extension must have at most {maxLength} letters",
"extensionAlphaNum": "Only numeric characters are allowed",
"toasts": { "toasts": {
"changedFieldToast": "Changed {type} to {name}", "changedFieldToast": "Changed {type} to {name}",
"updatedAliasNumbersToast": "Alias numbers field updated!", "updatedAliasNumbersToast": "Alias numbers field updated!",
@ -350,7 +355,9 @@
"filterDevices": "Filter devices", "filterDevices": "Filter devices",
"filterDevicesShort": "Filter", "filterDevicesShort": "Filter",
"resetFilters": "Reset filters", "resetFilters": "Reset filters",
"closeFilters": "Close filters" "closeFilters": "Close filters",
"createSeat": "Create seat",
"noGroupAssigned": "Not assigned to any group"
}, },
"callBlocking": { "callBlocking": {
"privacyEnabledToast": "Your number is hidden to the callee", "privacyEnabledToast": "Your number is hidden to the callee",

48
src/themes/app.common.styl
Unescape View File

@ -1,6 +1,53 @@
@import 'quasar.variables' @import 'quasar.variables'
.csc-list-item
position relative
.csc-list-item-main
padding-top 16px
.csc-item-button
display inline-block
padding 4px
cursor pointer
.csc-item-buttons
z-index 11
position absolute
right 16px
top 16px
margin 0
.q-icon
margin 0
.csc-item-title
text-overflow ellipsis
white-space: nowrap;
width 100%
overflow hidden
padding-right 80px
font-size: 18px;
font-weight: 400;
letter-spacing: normal;
line-height: 1.8rem;
.csc-item-label
font-weight normal
.csc-item-value
font-weight bold
.csc-form-info
display block
.csc-info-text
display inline-block
.csc-form
position relative
.csc-form-actions
margin-top 16px
.margin-xs .margin-xs
margin 8px margin 8px
@ -51,3 +98,4 @@
.q-btn .q-btn
padding-left 8px padding-left 8px
padding-right 8px padding-right 8px

3
src/themes/app.variables.styl
Unescape View File

@ -41,3 +41,6 @@ $tooltip-background = $primary
$csc-subtitle-font-size = 18px $csc-subtitle-font-size = 18px
$csc-subtitle-line-height = 2rem $csc-subtitle-line-height = 2rem
$csc-subtitle-font-weight = 400 $csc-subtitle-font-weight = 400
$item-base-color = $primary
$item-highlight-color = alpha($item-base-color, 15%)

Write Preview
Loading…
Cancel
Save