From d51a301a06eb86699b9a62410b9eedfb8df0003e Mon Sep 17 00:00:00 2001 From: Seddik Date: Fri, 24 May 2024 17:24:01 +0200 Subject: [PATCH] new: add download qrCode to money request modal --- src/components/MoneyRequestModal.vue | 16 ++++++++++- src/components/QrCodeModal.vue | 41 ++------------------------- src/i18n/fr-FR/app.po | 18 ++++++------ src/services/ExportService.ts | 42 ++++++++++++++++++++++++++++ 4 files changed, 68 insertions(+), 49 deletions(-) diff --git a/src/components/MoneyRequestModal.vue b/src/components/MoneyRequestModal.vue index f3e958e2..16f5a02d 100644 --- a/src/components/MoneyRequestModal.vue +++ b/src/components/MoneyRequestModal.vue @@ -107,10 +107,19 @@

{{ $gettext("Request money") }} - 2/2

+ + + + +
-
+
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 index 211770fa..817d9839 100644 --- 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 index c2b7a490..0528706c 100644 --- 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