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

TT#39618 Alternative pbx seats/groups entity title

Browse Source 
Change-Id: Idf5bd30aa3e572b07db99fe7be5e97e18e44cfff
changes/41/22541/2
raxelsen 8 years ago
parent 5a104b445c
commit bb39aa1e4c
4 changed files with 228 additions and 63 deletions
Show Stats Download Patch File Download Diff File

54
src/components/pages/PbxConfiguration/CscPbxGroup.vue
Unescape View File

@ -2,17 +2,14 @@
<q-card
class="csc-entity csc-pbx-group shadow-1"
>
<q-card-title
class="csc-entity-title"
>
<q-card-title class="csc-entity-title">
<q-icon
name="group"
color="secondary"
size="24px"
/>
<span
class="csc-entity-title-text">
{{ group.display_name }}
<span class="csc-entity-title-text">
{{ entityTitle }}
</span>
<q-chip
v-if="!expanded"
@ -43,9 +40,7 @@
v-if="expanded"
class="transition-generic"
>
<q-field
:label="$t('pbxConfig.groupName')"
>
<q-field :label="$t('pbxConfig.groupName')">
<q-input
v-model="changes.name"
:after="nameButtons"
@ -53,19 +48,37 @@
/>
</q-field>
<q-field :label="$t('pbxConfig.extension')">
<q-input v-model="changes.extension" type="number" :after="extensionButtons"
@keyup.enter="saveExtension" />
<q-input
v-model="changes.extension"
type="number"
:after="extensionButtons"
@keyup.enter="saveExtension"
/>
</q-field>
<q-field :label="$t('pbxConfig.huntPolicy')">
<q-select v-model="changes.huntPolicy" :options="huntPolicyOptions"
radio @change="huntPolicyChanged"/>
<q-select
v-model="changes.huntPolicy"
:options="huntPolicyOptions"
radio
@change="huntPolicyChanged"
/>
</q-field>
<q-field :label="$t('pbxConfig.huntTimeout')">
<q-input v-model="changes.huntTimeout" type="number" suffix="seconds"
:after="huntTimeoutButtons" :min="0" @keyup.enter="saveHuntTimeout" />
<q-input
v-model="changes.huntTimeout"
type="number"
suffix="seconds"
:after="huntTimeoutButtons"
:min="0"
@keyup.enter="saveHuntTimeout"
/>
</q-field>
<q-field :label="$t('pbxConfig.primaryNumber')">
<q-input v-model="primaryNumber" readonly disabled />
<q-input
v-model="primaryNumber"
readonly
disable
/>
</q-field>
<q-field :label="$t('pbxConfig.aliasNumbers')">
<q-select
@ -90,7 +103,10 @@
</q-field>
</q-card-main>
<q-inner-loading :visible="isLoading">
<q-spinner-mat size="60px" color="primary"></q-spinner-mat>
<q-spinner-mat
size="60px"
color="primary"
/>
</q-inner-loading>
</q-card>
</template>
@ -145,6 +161,10 @@
QTransition
},
computed: {
entityTitle() {
return this.group.display_name ?
this.group.display_name : this.group.username;
},
id() {
return this.group.id;
},

76
src/components/pages/PbxConfiguration/CscPbxGroups.vue
Unescape View File

@ -1,23 +1,67 @@
<template>
<csc-page :title="$t('pbxConfig.groupsTitle')">
<csc-pbx-group-add-form v-show="addFormEnabled" ref="addForm" @save="addGroup" @cancel="disableAddForm"
:loading="isAdding" :alias-number-options="aliasNumberOptions"
:seat-options="seatOptions" :hunt-policy-options="huntPolicyOptions"/>
<div v-show="!addFormEnabled" class="row justify-center ">
<q-btn color="primary" icon="add" flat @click="enableAddForm">{{ $t('pbxConfig.addGroup') }}</q-btn>
<csc-pbx-group-add-form
v-show="addFormEnabled"
ref="addForm"
@save="addGroup"
@cancel="disableAddForm"
:loading="isAdding"
:alias-number-options="aliasNumberOptions"
:seat-options="seatOptions"
:hunt-policy-options="huntPolicyOptions"
/>
<div
v-show="!addFormEnabled"
class="row justify-center"
>
<q-btn
color="primary"
icon="add"
flat
@click="enableAddForm"
>
{{ $t('pbxConfig.addGroup') }}
</q-btn>
</div>
<div v-if="isListLoadingVisible" class="row justify-center">
<q-spinner-dots color="primary" :size="40" />
<div
v-if="isListLoadingVisible"
class="row justify-center"
>
<q-spinner-dots
color="primary"
:size="40"
/>
</div>
<div v-if="groups.length > 0 && !isListRequesting && listLastPage > 1" class="row justify-center">
<q-pagination :value="listCurrentPage" :max="listLastPage" @change="changePage" />
<div
v-if="groups.length > 0 && !isListRequesting && listLastPage > 1"
class="row justify-center"
>
<q-pagination
:value="listCurrentPage"
:max="listLastPage"
@change="changePage"
/>
</div>
<csc-pbx-group v-for="group in groups" :key="group.id" :group="group" :alias-number-options="aliasNumberOptions"
:seat-options="seatOptions" :hunt-policy-options="huntPolicyOptions" @remove="removeGroup"
:loading="isItemLoading(group.id)" @save-name="setGroupName" @save-extension="setGroupExtension"
@save-hunt-policy="setGroupHuntPolicy" @save-hunt-timeout="setGroupHuntTimeout"
@save-alias-numbers="updateAliasNumbers" @save-seats="updateSeats" />
<div v-if="groups.length === 0 && !isListRequesting" class="row justify-center csc-no-entities">
<csc-pbx-group
v-for="group in groups"
:key="group.id"
:group="group"
:alias-number-options="aliasNumberOptions"
:seat-options="seatOptions"
:hunt-policy-options="huntPolicyOptions"
@remove="removeGroup"
:loading="isItemLoading(group.id)"
@save-name="setGroupName"
@save-extension="setGroupExtension"
@save-hunt-policy="setGroupHuntPolicy"
@save-hunt-timeout="setGroupHuntTimeout"
@save-alias-numbers="updateAliasNumbers"
@save-seats="updateSeats"
/>
<div
v-if="groups.length === 0 && !isListRequesting"
class="row justify-center csc-no-entities"
>
{{ $t('pbxConfig.noGroups') }}
</div>
</csc-page>
@ -116,7 +160,7 @@
let seats = [];
this.seats.forEach((seat)=>{
seats.push({
label: seat.display_name,
label: seat.display_name ? seat.display_name : seat.username,
sublabel: this.$t('pbxConfig.extension') + ': ' + seat.pbx_extension,
value: seat.id
});

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

@ -1,36 +1,92 @@
<template>
<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">{{ seat.display_name }}</span>
<q-chip v-if="!expanded" pointing="left" color="primary" class="gt-md">
<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"
>
{{ $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-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">
<q-card-main
v-if="expanded"
class="transition-generic"
>
<q-field :label="$t('pbxConfig.seatName')">
<q-input v-model="changes.name" :after="nameButtons" @keyup.enter="saveName" />
<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-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 disabled />
<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-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-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-spinner-mat>
<q-spinner-mat
size="60px"
color="primary"
/>
</q-inner-loading>
</q-card>
</template>
@ -84,6 +140,10 @@
QTransition
},
computed: {
entityTitle() {
return this.seat.display_name ?
this.seat.display_name : this.seat.username;
},
id() {
return this.seat.id;
},

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

@ -1,22 +1,63 @@
<template>
<csc-page :title="$t('pbxConfig.seatsTitle')">
<csc-pbx-seat-add-form v-show="addFormEnabled" ref="addForm" :alias-number-options="aliasNumberOptions"
:group-options="groupOptions" :loading="isAdding" @save="addSeat"
@cancel="disableAddForm" />
<div v-show="!addFormEnabled" class="row justify-center">
<q-btn color="primary" icon="add" flat @click="enableAddForm">{{ $t('pbxConfig.addSeat') }}</q-btn>
<csc-pbx-seat-add-form
v-show="addFormEnabled"
ref="addForm"
:alias-number-options="aliasNumberOptions"
:group-options="groupOptions"
:loading="isAdding"
@save="addSeat"
@cancel="disableAddForm"
/>
<div
v-show="!addFormEnabled"
class="row justify-center"
>
<q-btn
color="primary"
icon="add"
flat
@click="enableAddForm"
>
{{ $t('pbxConfig.addSeat') }}
</q-btn>
</div>
<div v-if="isListLoadingVisible" class="row justify-center">
<q-spinner-dots color="primary" :size="40" />
<div
v-if="isListLoadingVisible"
class="row justify-center"
>
<q-spinner-dots
color="primary"
:size="40"
/>
</div>
<div v-if="seats.length > 0 && !isListRequesting && listLastPage > 1" class="row justify-center">
<q-pagination :value="listCurrentPage" :max="listLastPage" @change="changePage" />
<div
v-if="seats.length > 0 && !isListRequesting && listLastPage > 1"
class="row justify-center"
>
<q-pagination
:value="listCurrentPage"
:max="listLastPage"
@change="changePage"
/>
</div>
<csc-pbx-seat 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" />
<div v-if="seats.length === 0 && !isListRequesting" class="row justify-center csc-no-entities">
<csc-pbx-seat
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"
/>
<div
v-if="seats.length === 0 && !isListRequesting"
class="row justify-center csc-no-entities"
>
{{ $t('pbxConfig.noSeats') }}
</div>
</csc-page>
@ -121,7 +162,7 @@
let groups = [];
this.groups.forEach((group)=>{
groups.push({
label: group.display_name,
label: group.display_name ? group.display_name : group.username,
sublabel: this.$t('pbxConfig.extension') + ': ' + group.pbx_extension,
value: group.id
});

Write Preview
Loading…
Cancel
Save