From 15e55b719b379608704fcc837a48f3fe3d62f3f6 Mon Sep 17 00:00:00 2001
From: Eduardo Morales <emoral435@gmail.com>
Date: Thu, 22 Feb 2024 11:03:40 -0600
Subject: [PATCH] feat: added new action for qrcode popup on link-share actions

Signed-off-by: Eduardo Morales <emoral435@gmail.com>
---
 .../src/components/SharingEntryLink.vue       | 44 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
index a1fba7663d087..d8f8fe6d5c955 100644
--- a/apps/files_sharing/src/components/SharingEntryLink.vue
+++ b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -20,7 +20,7 @@
   -
   -->
 
-<template>
+  <template>
 	<li :class="{ 'sharing-entry--share': share }" class="sharing-entry sharing-entry__link">
 		<NcAvatar :is-no-user="true"
 			:icon-class="isEmailShareType ? 'avatar-link-share icon-mail-white' : 'avatar-link-share icon-public-white'"
@@ -133,6 +133,14 @@
 						{{ t('files_sharing', 'Customize link') }}
 					</NcActionButton>
 				</template>
+				
+				<NcActionButton :close-after-click="true"
+					@click.prevent="showQRCode">
+					<template #icon>
+						<IconQr />
+					</template>
+					{{ t('files_sharing', 'Generate QR Code') }}
+				</NcActionButton>
 
 				<NcActionSeparator />
 
@@ -179,6 +187,17 @@
 
 		<!-- loading indicator to replace the menu -->
 		<div v-else class="icon-loading-small sharing-entry__loading" />
+
+		<!-- Modal to open whenever we have a QR code -->
+		<Modal v-if="qrcode"
+				id="qrcode-modal"
+				size="small"
+				:clear-view-delay="-1"
+				:name="title"
+				:close-button-contained="false"
+				@close="closeQRModal">
+				<qrcode value="qrCode"/>
+			</Modal>
 	</li>
 </template>
 
@@ -187,6 +206,7 @@ import { generateUrl } from '@nextcloud/router'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { Type as ShareTypes } from '@nextcloud/sharing'
 import Vue from 'vue'
+import VueQrcode from '@chenfengyuan/vue-qrcode';
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
@@ -195,8 +215,10 @@ import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 
 import Tune from 'vue-material-design-icons/Tune.vue'
+import IconQr from 'vue-material-design-icons/Qrcode.vue'
 
 import SharingEntryQuickShareSelect from './SharingEntryQuickShareSelect.vue'
 
@@ -218,7 +240,10 @@ export default {
 		NcActionText,
 		NcActionSeparator,
 		NcAvatar,
+		NcModal,
+		VueQrcode,
 		Tune,
+		IconQr,
 		SharingEntryQuickShareSelect,
 	},
 
@@ -245,6 +270,9 @@ export default {
 
 			ExternalLegacyLinkActions: OCA.Sharing.ExternalLinkActions.state,
 			ExternalShareActions: OCA.Sharing.ExternalShareActions.state,
+
+			// tracks whether modal should be opened or not
+			qrCode: '',
 		}
 	},
 
@@ -728,6 +756,20 @@ export default {
 			// YET. We can safely delete the share :)
 			this.$emit('remove:share', this.share)
 		},
+
+		/**
+		 * Opens modal for QR Code
+		 */
+		showQRCode() {
+			this.qrCode = this.shareLink
+		},
+
+		/**
+		 * Closes modal for QR Code
+		 */
+		closeQRModal() {
+			this.qrCode = ''
+		},
 	},
 }
 </script>