fox(frontend): qr code add to download options (#1865)

* feat(projectOptions): download qrcode option add to download options * fix(qrcodeComponent): remove taskIndex * fix(projectDetailsV2): style fix
hotosm · Nov 11, 2024 · 5e97a85 · 5e97a85
1 parent e8659df
commit 5e97a85
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx b/src/frontend/src/components/ProjectDetailsV2/ProjectOptions.tsx
@@ -4,6 +4,7 @@ import AssetModules from '@/shared/AssetModules';
 import { DownloadDataExtract, DownloadProjectForm, DownloadSubmissionGeojson } from '@/api/Project';
 import Button from '@/components/common/Button';
 import { useAppSelector } from '@/types/reduxTypes';
+import { GetProjectQrCode } from '@/api/Files';
 
 type projectOptionPropTypes = {
   projectName: string;
@@ -19,7 +20,11 @@ const ProjectOptions = ({ projectName }: projectOptionPropTypes) => {
 
   const projectId: string = params.id;
 
-  const handleDownload = (downloadType: 'form' | 'geojson' | 'extract' | 'submission') => {
+  const odkToken = useAppSelector((state) => state.project.projectInfo.odk_token);
+  const authDetails = CoreModules.useAppSelector((state) => state.login.authDetails);
+  const { qrcode }: { qrcode: string } = GetProjectQrCode(odkToken, projectName, authDetails?.username);
+
+  const handleDownload = (downloadType: 'form' | 'geojson' | 'extract' | 'submission' | 'qr') => {
     if (downloadType === 'form') {
       dispatch(
         DownloadProjectForm(
@@ -50,6 +55,11 @@ const ProjectOptions = ({ projectName }: projectOptionPropTypes) => {
           projectName,
         ),
       );
+    } else if (downloadType === 'qr') {
+      const downloadLink = document.createElement('a');
+      downloadLink.href = qrcode;
+      downloadLink.download = `Project_${projectId}`;
+      downloadLink.click();
     }
   };
 
@@ -116,6 +126,17 @@ const ProjectOptions = ({ projectName }: projectOptionPropTypes) => {
             handleDownload('submission');
           }}
         />
+        <Button
+          loadingText="QR CODE"
+          btnText="QR CODE"
+          btnType="other"
+          className={`fmtm-border-red-700 !fmtm-rounded-md fmtm-truncate`}
+          icon={<AssetModules.FileDownloadIcon style={{ fontSize: '22px' }} />}
+          onClick={(e) => {
+            e.stopPropagation();
+            handleDownload('qr');
+          }}
+        />
       </div>
     </>
   );

diff --git a/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx b/src/frontend/src/components/ProjectDetailsV2/TaskSelectionPopup.tsx
@@ -100,7 +100,7 @@ const TaskSelectionPopup = ({ taskId, body, feature }: TaskSelectionPopupPropTyp
         {/* only display qr code component render inside taskPopup on mobile screen */}
         <div className="sm:fmtm-hidden">
           {checkIfTaskAssignedOrNot && task_state !== 'LOCKED_FOR_MAPPING' && (
-            <QrcodeComponent projectId={currentProjectId} taskIndex={selectedTask.index} />
+            <QrcodeComponent projectId={currentProjectId} />
           )}
         </div>
         {body}

diff --git a/src/frontend/src/components/QrcodeComponent.tsx b/src/frontend/src/components/QrcodeComponent.tsx
@@ -6,14 +6,13 @@ import { GetProjectQrCode } from '@/api/Files';
 
 type tasksComponentType = {
   projectId?: string;
-  taskIndex?: number;
 };
 
-const QrcodeComponent = ({ projectId, taskIndex }: tasksComponentType) => {
+const QrcodeComponent = ({ projectId }: tasksComponentType) => {
   const downloadQR = () => {
     const downloadLink = document.createElement('a');
     downloadLink.href = qrcode;
-    downloadLink.download = `Project_${projectId}_Task_${taskIndex}`;
+    downloadLink.download = `Project_${projectId}`;
     downloadLink.click();
   };
 

diff --git a/src/frontend/src/views/ProjectDetailsV2.tsx b/src/frontend/src/views/ProjectDetailsV2.tsx
@@ -425,7 +425,7 @@ const ProjectDetailsV2 = () => {
                   className={`fmtm-flex fmtm-gap-4 fmtm-absolute fmtm-duration-200 fmtm-z-[1000] fmtm-bg-[#F5F5F5] fmtm-p-2 fmtm-rounded-md ${
                     toggle
                       ? 'fmtm-left-0 fmtm-bottom-0 lg:fmtm-top-0'
-                      : '-fmtm-left-[60rem] fmtm-bottom-0 lg:fmtm-top-0'
+                      : '-fmtm-left-[65rem] fmtm-bottom-0 lg:fmtm-top-0'
                   }`}
                 >
                   <ProjectOptions projectName={state?.projectInfo?.name} />