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

TT#95950 Introduce a basic pattern to create and handle Dialogs

Browse Source 
Change-Id: I23fa5786ced7cf66ba59256c356b7b556387388f
mr9.1.1
Hans-Peter Herzog 5 years ago
parent 17594233fa
commit b47c7e6061
8 changed files with 108 additions and 173 deletions
Show Stats Download Patch File Download Diff File

24
README.md
Unescape View File

@ -67,6 +67,30 @@ In order to add a new page you need to go along the following steps:
}
```
### Dialogs
![Example dialog](doc/images/dialog.png)
The basic dialog component is `src/components/CscDialog.vue`.
#### How to create a new custom dialog
Check the example implementation in `src/components/CscDialogChangePassword.vue`.
#### How to call custom dialogs from within a Vue.js Component method
To reduce the boilerplate code of dialog components, we call Dialogs
via [Quasar Dialog Plugin](https://quasar.dev/quasar-plugins/dialog).
```javascript
this.$q.dialog({
component: CscDialogChangePassword,
parent: this
}).onOk((password) => {
this.changeWebPassword(password)
})
```
### NGCP API
All API functions are located in `src/api`. The file `src/api/common.js`

BIN
doc/images/dialog.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

115
src/components/CscDialog.vue
Unescape View File

@ -1,46 +1,58 @@
<template>
<q-dialog
ref="modal"
minimized
ref="dialog"
v-bind="$attrs"
v-on="$listeners"
>
<div
class="csc-dialog csc-share-dialog"
<q-card
class="bg-dark q-dialog-plugin"
>
<div
class="csc-dialog-title"
>
<q-icon
v-if="titleIcon"
:name="titleIcon"
size="24px"
/>
<span
class="csc-dialog-title-text"
>{{ title }}</span>
</div>
<div
class="csc-dialog-content"
<q-card-section
class="no-padding"
>
<q-item>
<q-item-section
v-if="titleIcon !== undefined && titleIcon !== null && titleIcon !== ''"
side
no-wrap
>
<q-icon
:name="titleIcon"
:color="titleIconColor"
/>
</q-item-section>
<q-item-section
class="text-subtitle1"
no-wrap
>
{{ title }}
</q-item-section>
</q-item>
</q-card-section>
<q-separator />
<q-card-section>
<slot
name="content"
/>
</div>
<div
class="csc-dialog-actions row justify-end no-wrap"
<slot
name="default"
/>
</q-card-section>
<q-card-actions
align="right"
>
<q-btn
icon="clear"
color="default"
color="white"
flat
:label="$t('buttons.cancel')"
@click="cancel"
>
{{ $t('buttons.cancel') }}
</q-btn>
/>
<slot
name="actions"
/>
</div>
</div>
</q-card-actions>
</q-card>
</q-dialog>
</template>
@ -50,25 +62,25 @@ export default {
props: {
title: {
type: String,
default: ''
default: undefined,
required: true
},
titleIcon: {
type: String,
default: ''
default: undefined
},
titleIconColor: {
type: String,
default: 'primary'
},
opened: {
type: Boolean,
default: false
}
},
data () {
return {
}
},
watch: {
opened (opened) {
if (opened) {
if (opened === true) {
this.open()
} else {
this.close()
@ -82,12 +94,20 @@ export default {
},
methods: {
open () {
this.$refs.modal.show()
this.show()
},
show () {
this.$refs.dialog.show()
this.$emit('show')
},
close () {
this.$refs.modal.hide()
this.hide()
this.$emit('close')
},
hide () {
this.$refs.dialog.hide()
this.$emit('hide')
},
cancel () {
this.close()
this.$emit('cancel')
@ -95,24 +115,3 @@ export default {
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.csc-dialog
max-width 480px
background-color $body-background
.csc-dialog-title
text-transform uppercase
font-size 14px
line-height 14px
padding $flex-gutter-sm
background-color $item-highlight-color
.csc-dialog-title-text
vertical-align middle
i
margin-right $flex-gutter-xs
vertical-align middle
.csc-dialog-content
padding $flex-gutter-md
.csc-dialog-actions
padding $flex-gutter-sm
</style>

91
src/components/CscDialogBase.vue
Unescape View File

@ -1,91 +0,0 @@
<template>
<q-dialog
ref="dialog"
v-bind="$attrs"
v-on="$listeners"
@hide="$emit('hide', $event)"
>
<q-card
class="bg-main-menu q-dialog-plugin"
>
<q-card-section
class="text-h6"
>
<q-icon
v-if="icon !== undefined"
:name="icon"
size="24px"
class="self-center"
/>
{{ title }}
</q-card-section>
<q-card-section>
<slot />
</q-card-section>
<q-card-actions
align="right"
>
<q-btn
icon="clear"
:label="$t('buttons.cancel')"
flat
@click="hide"
/>
<q-btn
icon="check"
:label="$t('buttons.confirm')"
unelevated
text-color="dark"
color="primary"
:disable="!ready"
@click="okEvent"
/>
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script>
export default {
name: 'CscDialogBase',
components: {
},
props: {
icon: {
type: String,
default: undefined
},
title: {
type: String,
default: undefined
},
ready: {
type: Boolean,
default: true
}
},
data () {
return {
passwordRetype: {
password: '',
passwordRetype: ''
}
}
},
methods: {
show () {
this.$refs.dialog.show()
},
hide () {
this.$refs.dialog.hide()
},
okEvent ($event) {
this.$emit('ok', $event)
this.hide()
},
cancelEvent ($event) {
this.hide()
}
}
}
</script>

34
src/components/CscDialogChangePassword.vue
Unescape View File

@ -1,18 +1,21 @@
<template>
<csc-dialog-base
<csc-dialog
ref="dialog"
icon="vpn_key"
title="Change Password"
:ready="ready"
v-bind="$attrs"
v-on="$listeners"
@hide="$emit('hide', $event)"
@ok="ok"
title-icon="vpn_key"
:title="$t('userSettings.changePasswordDialogTitle')"
>
<template
v-slot:title
v-slot:actions
>
Change Password
<q-btn
icon="check"
:label="$t('buttons.confirm')"
:disable="!ready"
unelevated
text-color="dark"
color="primary"
@click="okEvent"
/>
</template>
<csc-input-password-retype
v-model="passwordRetype"
@ -20,16 +23,16 @@
@validation-failed="ready=false"
@validation-succeeded="ready=true"
/>
</csc-dialog-base>
</csc-dialog>
</template>
<script>
import CscInputPasswordRetype from 'components/form/CscInputPasswordRetype'
import CscDialogBase from 'components/CscDialogBase'
import CscDialog from 'components/CscDialog'
export default {
name: 'CscDialogChangePassword',
components: {
CscDialogBase,
CscDialog,
CscInputPasswordRetype
},
data () {
@ -48,9 +51,10 @@ export default {
hide () {
this.$refs.dialog.hide()
},
ok () {
okEvent () {
if (this.ready) {
this.$emit('confirmed', this.passwordRetype.password)
this.$emit('ok', this.passwordRetype.password)
this.hide()
}
}
}

2
src/components/CscPopupMenu.vue
Unescape View File

@ -2,7 +2,7 @@
<q-popup-proxy>
<q-list
v-bind="$attrs"
class="bg-main-menu"
class="bg-dark"
v-on="$listeners"
>
<slot />

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

@ -233,10 +233,6 @@
@click="jumpToCallQueue"
/>
</div>
<csc-dialog-change-password
ref="dialogChangePassword"
@confirmed="changeWebPassword"
/>
</q-expansion-item>
</template>
@ -253,7 +249,6 @@ import CscDialogChangePassword from 'components/CscDialogChangePassword'
export default {
name: 'CscPbxSeat',
components: {
CscDialogChangePassword,
CscPopupMenuItem,
CscPopupMenuItemDelete,
CscMoreMenu,
@ -446,14 +441,18 @@ export default {
}
},
showPasswordDialog () {
this.$refs.dialogChangePassword.show()
this.$q.dialog({
component: CscDialogChangePassword,
parent: this
}).onOk((password) => {
this.changeWebPassword(password)
})
},
async changeWebPassword (password) {
await this.$store.dispatch('pbxSeats/setSeatWebPassword', {
seatId: this.seat.id,
seatWebPassword: password
})
this.$refs.dialogChangePassword.hide()
},
changeIntraPbx () {
this.$emit('save-intra-pbx', {

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

@ -67,7 +67,7 @@
</div>
<q-list
v-if="!isSeatListEmpty && seatListVisibility === 'visible'"
class="row justify-start"
class="row justify-start items-start"
>
<csc-pbx-seat
v-for="(seat, index) in seatListItems"

Write Preview
Loading…
Cancel
Save