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

Change-Id: I23fa5786ced7cf66ba59256c356b7b556387388f

README.md

@@ -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`

src/components/CscDialog.vue

@@ -1,46 +1,58 @@
 <template>
 	<q-dialog
-		ref="modal"
+		ref="dialog"
-		minimized
+		v-bind="$attrs"
+		v-on="$listeners"
 	>
-		<div
+		<q-card
-			class="csc-dialog csc-share-dialog"
+			class="bg-dark q-dialog-plugin"
 		>
-			<div
+			<q-card-section
-				class="csc-dialog-title"
+				class="no-padding"
+			>
+				<q-item>
+					<q-item-section
+						v-if="titleIcon !== undefined && titleIcon !== null && titleIcon !== ''"
+						side
+						no-wrap
 					>
 						<q-icon
-					v-if="titleIcon"
 							:name="titleIcon"
-					size="24px"
+							:color="titleIconColor"
 						/>
-				<span
+					</q-item-section>
-					class="csc-dialog-title-text"
+					<q-item-section
-				>{{ title }}</span>
+						class="text-subtitle1"
-			</div>
+						no-wrap
-			<div
-				class="csc-dialog-content"
 					>
+						{{ title }}
+					</q-item-section>
+				</q-item>
+			</q-card-section>
+			<q-separator />
+			<q-card-section>
 				<slot
 					name="content"
 				/>
-			</div>
+				<slot
-			<div
+					name="default"
-				class="csc-dialog-actions row justify-end no-wrap"
+				/>
+			</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>
+			</q-card-actions>
-		</div>
+		</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>

src/components/CscDialogBase.vue

@@ -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>

src/components/CscDialogChangePassword.vue

@@ -1,18 +1,21 @@
 <template>
-	<csc-dialog-base
+	<csc-dialog
 		ref="dialog"
-		icon="vpn_key"
+		title-icon="vpn_key"
-		title="Change Password"
+		:title="$t('userSettings.changePasswordDialogTitle')"
-		:ready="ready"
-		v-bind="$attrs"
-		v-on="$listeners"
-		@hide="$emit('hide', $event)"
-		@ok="ok"
 	>
 		<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()
 			}
 		}
 	}

src/components/CscPopupMenu.vue

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

src/components/pages/PbxConfiguration/CscPbxSeat.vue

@@ -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', {

src/components/pages/PbxConfiguration/CscPbxSeats.vue

@@ -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"