Add download button

the-clothing-loop · May 6, 2024 · b5422ca · b5422ca
1 parent 06b7f42
commit b5422ca
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 19 deletions.
diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
@@ -32,6 +32,7 @@
   "loopParticipant_one": "Loop participant",
   "loopParticipant_other": "Loop participants",
   "copy": "Copy",
+  "download": "Download",
   "account": "Account",
   "actions": "Actions",
   "address": "Address",

diff --git a/frontend/src/components/react/components/LoopMembers/QrCode.tsx b/frontend/src/components/react/components/LoopMembers/QrCode.tsx
@@ -1,10 +1,13 @@
 import QRCodeStyling from "qr-code-styling";
 import { useEffect, useRef, useState } from "react";
 import isSSR from "../../util/is_ssr";
+import { useTranslation } from "react-i18next";
 interface Props {
   data: string;
+  chainName: string;
 }
 export default function QrCode(props: Props) {
+  const { t } = useTranslation();
   const [qrCode] = useState(
     new QRCodeStyling({
       width: 300,
@@ -45,5 +48,31 @@ export default function QrCode(props: Props) {
     qrCode.append(ref.current!);
   }, [props.data]);
 
-  return <div ref={ref} />;
+  function onDownload() {
+    let name = props.chainName
+      .replaceAll(/[\-\( ]/g, "_")
+      .replaceAll(/[,\.\/\-\!\@\#\<\>\:\"\\\|\?\$\%\^\&\*]/g, "")
+      .toLowerCase();
+    name = "clqr_" + name;
+    name = name.substring(0, 255);
+    qrCode.download({
+      name,
+      extension: "png",
+    });
+  }
+
+  return (
+    <>
+      <div key="qr-container" ref={ref} />
+      <button
+        key="qr-download"
+        type="button"
+        className="btn btn-sm btn-block btn-outline btn-secondary mt-4"
+        onClick={onDownload}
+      >
+        <i className="icon-qr-code me-2" />
+        {t("download")}
+      </button>
+    </>
+  );
 }
diff --git a/frontend/src/components/react/pages/ChainMemberList.tsx b/frontend/src/components/react/pages/ChainMemberList.tsx
@@ -491,30 +491,32 @@ export default function ChainMemberList() {
                 <dialog
                   open={openQrCode}
                   ref={refQrCodeDialog}
-                  className="group peer-hover:md:block opacity-10 open:opacity-100 transition-opacity absolute z-20 top-0 ltr:sm:right-full max-sm:mt-14 rtl:sm:left-full me-0 sm:me-4 p-4 w-[300px] box-content bg-white shadow-lg"
+                  className="group peer-hover:md:block opacity-10 open:opacity-100 transition-opacity absolute z-20 top-0 ltr:sm:right-full max-sm:mt-14 rtl:sm:left-full me-0 sm:me-4"
                 >
                   <div
                     className="group-open:fixed inset-0 bg-white/30 -z-10"
                     onClick={toggleDialog}
                   />
-                  <div className="bg-grey-light/30 p-1 flex flex-row mb-4">
-                    <p className="text-xs select-all break-all leading-snug">
-                      {shareLink}
-                    </p>
-
-                    <a
-                      {...addCopyAttributes(
-                        t,
-                        "loop-detail-share",
-                        "btn btn-square btn-sm btn-secondary btn-outline tooltip tooltip-left lg:!tooltip-top flex items-center",
-                        shareLink,
-                      )}
-                      href={shareLink}
-                    >
-                      <span className="icon-copy"></span>
-                    </a>
+                  <div className="relative z-0 bg-white shadow-lg p-4">
+                    <div className="bg-grey-light/30 p-1 flex flex-row mb-4">
+                      <p className="text-xs select-all break-all leading-snug">
+                        {shareLink}
+                      </p>
+
+                      <a
+                        {...addCopyAttributes(
+                          t,
+                          "loop-detail-share",
+                          "btn btn-square btn-sm btn-secondary btn-outline tooltip tooltip-left lg:!tooltip-top flex items-center",
+                          shareLink,
+                        )}
+                        href={shareLink}
+                      >
+                        <span className="icon-copy"></span>
+                      </a>
+                    </div>
+                    <QrCode data={shareLink} chainName={chain.name} />
                   </div>
-                  <QrCode data={shareLink} />
                 </dialog>
               </div>