new: add download qrCode to money request modal

Lokavaluto · May 24, 2024 · d51a301 · d51a301
1 parent 676dcb4
commit d51a301
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 49 deletions.
diff --git a/src/components/MoneyRequestModal.vue b/src/components/MoneyRequestModal.vue
@@ -107,10 +107,19 @@
           <p class="modal-card-title is-title-shrink">
             {{ $gettext("Request money") }} - 2/2
           </p>
+          <span
+            v-if="$platform === 'web'"
+            @click="downloadQrCodePdf"
+            class="button download is-default is-rounded refresh mr-2 ml-2"
+          >
+            <span class="icon">
+              <fa-icon icon="download" />
+            </span>
+          </span>
           <button class="delete" aria-label="close" @click="close()"></button>
         </header>
         <section class="modal-card-body">
-          <div class="qrcode-container" ref="qrCode">
+          <div class="qrcode-container" ref="qrCodeTransaction">
             <QrCodeVue
               render-as="svg"
               :size="200"
@@ -202,6 +211,11 @@
         }
         this.errors.amount = false
       },
+
+      async downloadQrCodePdf() {
+        let svgQrCode = this.$refs.qrCodeTransaction.firstChild.outerHTML
+        await this.$export.DownloadQrCode(svgQrCode)
+      },
       close() {
         this.amount = 0
         this.$modal.close()

diff --git a/src/components/QrCodeModal.vue b/src/components/QrCodeModal.vue
@@ -55,10 +55,7 @@
 <script lang="ts">
   import { Options, Vue } from "vue-class-component"
   import { mapModuleState } from "@/utils/vuex"
-  import { mapGetters } from "vuex"
   import QrCodeVue from "qrcode.vue"
-  import jsPDF from "jspdf"
-  import { Canvg } from "canvg"
 
   @Options({
     name: "QrCodeModal",
@@ -70,43 +67,9 @@
     },
     methods: {
       async downloadQrCodePdf() {
-        let svgQrCode = this.$refs.qrCode.firstChild.outerHTML
-        const finalSizeMm = 120 // mm of final printed QrCode
-        const resolution = 5 // px/mm
-
-        svgQrCode = svgQrCode.replace(
-          'width="200"',
-          `width="${finalSizeMm * resolution}"`
-        )
-        svgQrCode = svgQrCode.replace(
-          'height="200"',
-          `height="${finalSizeMm * resolution}"`
+        await this.$export.DownloadQrCode(
+          this.$refs.qrCode.firstChild.outerHTML
         )
-
-        const canvas = document.createElement("canvas")
-        const context = canvas.getContext("2d")
-        if (context === null) {
-          throw new Error("Unexpected null context")
-        }
-
-        let v = await Canvg.from(context, svgQrCode)
-        await v.start()
-
-        const imgData = canvas.toDataURL("image/png")
-
-        // Generate PDF
-        let pdf = new jsPDF("p", "mm", "a4")
-
-        await pdf.addImage(
-          imgData,
-          "PNG",
-          (210 - finalSizeMm) / 2,
-          (297 - finalSizeMm) / 2,
-          finalSizeMm,
-          finalSizeMm
-        )
-
-        pdf.save("Qrcode.pdf")
       },
     },
   })

diff --git a/src/i18n/fr-FR/app.po b/src/i18n/fr-FR/app.po
@@ -88,14 +88,14 @@ msgstr "Toutes les opérations"
 msgid "Already have an account ?"
 msgstr "Avez-vous déjà créé un compte ?"
 
-#: src/components/MoneyRequestModal.vue:35
+#: src/components/AmountField.vue:5 src/components/MoneyRequestModal.vue:35
 #: src/components/MoneyTransferModal.vue:161
 #: src/components/TransactionListModal.vue:428
 #: src/views/admin/PendingCredits.vue:52
 msgid "Amount"
 msgstr "Montant"
 
-#: src/components/MoneyRequestModal.vue:198
+#: src/components/MoneyRequestModal.vue:207
 msgid "Amount requested must be a number greater than 0"
 msgstr "Le montant demandé doit être un nombre positif"
 
@@ -287,8 +287,8 @@ msgstr ""
 msgid "click here"
 msgstr "cliquez ici"
 
-#: src/components/MoneyRequestModal.vue:133
-#: src/components/MoneyRequestModal.vue:139 src/components/QrCodeModal.vue:49
+#: src/components/MoneyRequestModal.vue:142
+#: src/components/MoneyRequestModal.vue:148 src/components/QrCodeModal.vue:49
 msgid "Close"
 msgstr "Fermer"
 
@@ -369,7 +369,7 @@ msgstr "Télécharger"
 msgid "Download transactions"
 msgstr "Télécharger les opérations"
 
-#: src/components/MoneyCreditModal.vue:52
+#: src/components/AmountField.vue:12 src/components/MoneyCreditModal.vue:52
 #: src/components/MoneyRequestModal.vue:45
 #: src/components/MoneyTransferModal.vue:171
 msgid "e.g. 50"
@@ -665,7 +665,7 @@ msgstr ""
 "Attention, ce mot de passe n'est pas récupérable, alors veillez à le garder "
 "dans un endroit sûr et accessible."
 
-#: src/components/MoneyRequestModal.vue:128 src/components/QrCodeModal.vue:35
+#: src/components/MoneyRequestModal.vue:137 src/components/QrCodeModal.vue:35
 msgid "Please scan the QR code above to proceed"
 msgstr "Veuillez scanner le QR code ci-dessus pour continuer"
 
@@ -877,7 +877,7 @@ msgstr ""
 msgid "The maximum top up amount must be equal or less than %{ amount }"
 msgstr "Le montant à créditer doit être égal ou inférieur à %{ amount }"
 
-#: src/components/MoneyRequestModal.vue:189
+#: src/components/MoneyRequestModal.vue:198
 msgid "the message description is too long"
 msgstr "Le message de description est trop long"
 
@@ -990,7 +990,7 @@ msgstr "Rechargement demandé"
 msgid "Transaction details"
 msgstr "Détails de l'opération"
 
-#: src/services/ExportService.ts:72
+#: src/services/ExportService.ts:75
 msgid "Transaction list"
 msgstr "Liste des opérations"
 
@@ -1003,7 +1003,7 @@ msgstr "La liste des transactions n'a pas pu être téléchargée"
 msgid "Transaction list downloaded"
 msgstr "Liste des transactions téléchargée"
 
-#: src/services/ExportService.ts:68
+#: src/services/ExportService.ts:71
 msgid "Transaction list from %{ begin } to %{ end }"
 msgstr "Liste des transactions du %{ begin } au %{ end }"
 

diff --git a/src/services/ExportService.ts b/src/services/ExportService.ts
@@ -1,6 +1,9 @@
 import { Capacitor, Plugins } from "@capacitor/core"
 import { Directory, Encoding } from "@capacitor/filesystem"
 
+import jsPDF from "jspdf"
+import { Canvg } from "canvg"
+
 const { Filesystem, Share } = Plugins
 
 class ExportService {
@@ -81,6 +84,45 @@ class ExportService {
       console.log(`Share is not yet available on ${platform} platform.`)
     }
   }
+
+  public async DownloadQrCode(svgQrCode: any) {
+    const finalSizeMm = 120 // mm of final printed QrCode
+    const resolution = 5 // px/mm
+
+    svgQrCode = svgQrCode.replace(
+      'width="200"',
+      `width="${finalSizeMm * resolution}"`
+    )
+    svgQrCode = svgQrCode.replace(
+      'height="200"',
+      `height="${finalSizeMm * resolution}"`
+    )
+
+    const canvas = document.createElement("canvas")
+    const context = canvas.getContext("2d")
+    if (context === null) {
+      throw new Error("Unexpected null context")
+    }
+
+    let v = await Canvg.from(context, svgQrCode)
+    await v.start()
+
+    const imgData = canvas.toDataURL("image/png")
+
+    // Generate PDF
+    let pdf = new jsPDF("p", "mm", "a4")
+
+    await pdf.addImage(
+      imgData,
+      "PNG",
+      (210 - finalSizeMm) / 2,
+      (297 - finalSizeMm) / 2,
+      finalSizeMm,
+      finalSizeMm
+    )
+
+    pdf.save("Qrcode.pdf")
+  }
 }
 
 export default ExportService