feat: added new action for qrcode popup on link-share actions

Signed-off-by: Eduardo Morales <emoral435@gmail.com>

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>