separate qr dialog to component

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

src/components/QRDialog.vue

@@ -0,0 +1,60 @@
+<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,10 @@
 			</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" closeOnClickOutside="true" @close="qrDialog=false">
+			<QRDialog :title="t('forms', 'Share {formTitle}', { formTitle: form.title })"
+				:text="qrDialog">
+			</QRDialog>
 		</NcDialog>
 
 		<!-- Legacy Info, if present -->
@@ -206,13 +203,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 +232,7 @@ export default {
 		NcActionLink,
 		NcCheckboxRadioSwitch,
 		NcDialog,
+		QRDialog,
 		SharingSearchDiv,
 		SharingShareDiv,
 	},
@@ -252,11 +250,7 @@ export default {
 		return {
 			isLoading: false,
 			appConfig: loadState(appName, 'appConfig'),
-			qrDialog: {
-				on: false,
-				text: '',
-				uri: '',
-			},
+			qrDialog: false,
 		}
 	},
 
@@ -417,13 +411,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 +477,4 @@ export default {
 		color: var(--color-error)
 	}
 }
-
-.qrDialog__content {
-	margin-bottom: 50px;
-	text-align: center;
-}
 </style>