separate qr dialog to component

Signed-off-by: Felix Beichler <[email protected]>

src/components/QRDialog.vue

@@ -0,0 +1,61 @@
+<template>
+	<div class="qrDialog__content">
+		<h2>{{ title }}</h2>
+		<div>
+			<img :src="uri"
+				:title="text"
+				:alt="t('forms', 'QR code representation of {title}', { title: title })">
+		</div>
+	</div>
+</template>
+
+<script>
+
+import QRCode from 'qrcode'
+
+export default {
+	name: 'QRDialog',
+
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		text: {
+			type: String,
+			default: '',
+		},
+	},
+
+	data() {
+		return {
+			uri: {
+				type: String,
+				default: '',
+			},
+		}
+	},
+
+	created() {
+		this.generateQr()
+	},
+
+	methods: {
+		async generateQr() {
+			try {
+				this.uri = await QRCode.toDataURL(this.text)
+			} catch (err) {
+				console.error(err)
+			}
+		},
+	},
+}
+
+</script>
+
+<style lang="scss">
+.qrDialog__content {
+    margin-bottom: 50px;
+    text-align: center;
+}
+</style>

src/components/SidebarTabs/SharingSidebarTab.vue

@@ -97,13 +97,9 @@
 			</div>
 		</TransitionGroup>
 
-		<NcDialog :open.sync="qrDialog.on" closeOnClickOutside="true" @close="qrDialog.on=false">
-			<div class="qrDialog__content">
-				<h2>{{ t('forms', 'Share {formTitle}', { formTitle: form.title }) }}</h2>
-				<div>
-					<img :src="qrDialog.uri" :title="qrDialog.text" :alt=" t('forms', 'QR code representation of {title}', {title: form.title})">
-				</div>
-			</div>
+		<NcDialog :open.sync="qrDialog" close-on-click-outside="true" @close="qrDialog=false">
+			<QRDialog :title="t('forms', 'Share {formTitle}', { formTitle: form.title })"
+				:text="qrDialog" />
 		</NcDialog>
 
 		<!-- Legacy Info, if present -->
@@ -206,13 +202,13 @@ import IconDelete from 'vue-material-design-icons/Delete.vue'
 import IconLinkBoxVariantOutline from 'vue-material-design-icons/LinkBoxVariantOutline.vue'
 import IconLinkVariant from 'vue-material-design-icons/LinkVariant.vue'
 import IconPlus from 'vue-material-design-icons/Plus.vue'
-import QRCode from 'qrcode'
 
 import FormsIcon from '../Icons/FormsIcon.vue'
 import IconCopyAll from '../Icons/IconCopyAll.vue'
 import SharingSearchDiv from './SharingSearchDiv.vue'
 import SharingShareDiv from './SharingShareDiv.vue'
 import PermissionTypes from '../../mixins/PermissionTypes.js'
+import QRDialog from '../QRDialog.vue'
 import ShareTypes from '../../mixins/ShareTypes.js'
 import ShareLinkMixin from '../../mixins/ShareLinkMixin.js'
 import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
@@ -235,6 +231,7 @@ export default {
 		NcActionLink,
 		NcCheckboxRadioSwitch,
 		NcDialog,
+		QRDialog,
 		SharingSearchDiv,
 		SharingShareDiv,
 	},
@@ -252,11 +249,7 @@ export default {
 		return {
 			isLoading: false,
 			appConfig: loadState(appName, 'appConfig'),
-			qrDialog: {
-				on: false,
-				text: '',
-				uri: '',
-			},
+			qrDialog: false,
 		}
 	},
 
@@ -417,13 +410,7 @@ export default {
 		},
 
 		async openQrDialog(qrText) {
-			this.qrDialog.text = qrText
-			try {
-				this.qrDialog.uri = await QRCode.toDataURL(this.qrDialog.text)
-				this.qrDialog.on = true
-			} catch (err) {
-				console.error(err)
-			}
+			this.qrDialog = qrText
 		},
 	},
 }
@@ -489,9 +476,4 @@ export default {
 		color: var(--color-error)
 	}
 }
-
-.qrDialog__content {
-	margin-bottom: 50px;
-	text-align: center;
-}
 </style>