Skip to content

Commit

Permalink
fix qrCodeComponent: qrcode access form parent component, code cleanu…
Browse files Browse the repository at this point in the history 
…p, UI enhancement
  • Loading branch information
@NSUWAL123
NSUWAL123 committed Feb 9, 2024
1 parent 7f3676f commit f9a8095
Showing 1 changed file with 26 additions and 136 deletions.
162 changes: 26 additions & 136 deletions src/frontend/src/components/QrcodeComponent.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,143 +1,33 @@
import React, { useState } from 'react';
import BasicCard from '@/utilities/BasicCard';
// import Activities from "./Activities";
import environment from '@/environment';
import { ProjectFilesById } from '@/api/Files';
import React from 'react';
import CoreModules from '@/shared/CoreModules';
import AssetModules from '@/shared/AssetModules';
import { HomeActions } from '@/store/slices/HomeSlice';

const TasksComponent = ({ type, task, defaultTheme }) => {
const dispatch = CoreModules.useAppDispatch();
const [open, setOpen] = useState(false);
const params = CoreModules.useParams();
const projectName = CoreModules.useAppSelector((state) => state.project.projectInfo.title);
const projectTaskData = CoreModules.useAppSelector((state) => state.project.projectTaskBoundries);
const currentProjectId = environment.decode(params.id);
const projectIndex = projectTaskData.findIndex((project) => project.id == currentProjectId);
const token = CoreModules.useAppSelector((state) => state.login.loginToken);
const selectedTask = {
...projectTaskData?.[projectIndex]?.taskBoundries?.filter((indTask, i) => {
return indTask.id == task;
})?.[0],
};
const checkIfTaskAssignedOrNot =
selectedTask?.locked_by_username === token?.username || selectedTask?.locked_by_username === null;

// TODO fix multiple renders of component (6 times)
const { qrcode } = ProjectFilesById(selectedTask.odk_token, projectName, token?.username, task);

// const socialStyles = {
// copyContainer: {
// border: `1px solid ${defaultTheme.palette.info['main']}`,
// background: defaultTheme.palette.info['info'],
// color: defaultTheme.palette.info['main'],
// },
// title: {
// color: defaultTheme.palette.info['main'],
// fontStyle: 'italic',
// },
// };

const TasksComponent = ({ qrcode }) => {
return (
<CoreModules.Stack>
{checkIfTaskAssignedOrNot && (
<CoreModules.Stack direction={type == 's' ? 'column' : type == 'xs' ? 'column' : 'row'} spacing={2} mt={'1%'}>
<BasicCard
subtitle={{}}
contentProps={{}}
variant={'elevation'}
headerStatus={true}
content={
<CoreModules.Stack direction={'column'} justifyContent={'center'}>
<CoreModules.Stack direction={'row'} justifyContent={'center'}>
<CoreModules.Typography variant="h2">{`Qrcode`}</CoreModules.Typography>
</CoreModules.Stack>

<CoreModules.Stack direction={'row'} justifyContent={'center'}>
{qrcode == '' ? (
<CoreModules.Stack>
<CoreModules.SkeletonTheme
baseColor={defaultTheme.palette.loading['skeleton_rgb']}
highlightColor={defaultTheme.palette.loading['skeleton_rgb']}
>
<CoreModules.Skeleton width={170} count={7} />
</CoreModules.SkeletonTheme>
</CoreModules.Stack>
) : (
<img id="qrcodeImg" src={qrcode} alt="qrcode" />
)}
</CoreModules.Stack>

<CoreModules.Stack mt={'1.5%'} direction={'row'} justifyContent={'center'} spacing={5}>
<CoreModules.Stack width={40} height={40} borderRadius={55} boxShadow={2} justifyContent={'center'}>
<CoreModules.IconButton
onClick={() => {
const downloadLink = document.createElement('a');
downloadLink.href = qrcode;
downloadLink.download = `Task_${task}`;
downloadLink.click();
}}
disabled={qrcode == '' ? true : false}
color="info"
aria-label="download qrcode"
>
<AssetModules.FileDownloadIcon sx={{ fontSize: defaultTheme.typography.fontSize }} />
</CoreModules.IconButton>
</CoreModules.Stack>
<CoreModules.Button
variant="contained"
color="error"
onClick={() => {
document.location.href =
'intent://getodk.org/#Intent;scheme=app;package=org.odk.collect.android;end';
}}
>
Go To ODK
</CoreModules.Button>
<CoreModules.Stack width={40} height={40} borderRadius={55} boxShadow={2} justifyContent={'center'}>
<CoreModules.IconButton
onClick={() => {
dispatch(
HomeActions.SetSnackBar({
open: true,
message: `not implemented`,
variant: 'warning',
duration: 3000,
}),
);
// setOpen(true);
}}
disabled={qrcode == '' ? true : false}
color="info"
aria-label="share qrcode"
>
<AssetModules.ShareIcon sx={{ fontSize: defaultTheme.typography.fontSize }} />
</CoreModules.IconButton>

{/* <BasicDialog
title={"Share with"}
actions={
<ShareSocial
url={`Task_${task}`}
socialTypes={["whatsapp", "twitter"]}
onSocialButtonClicked={(data) => console.log(data)}
style={socialStyles}
/>
}
onClose={() => {
setOpen(false);
}}
open={open}
/> */}
</CoreModules.Stack>
</CoreModules.Stack>
</CoreModules.Stack>
}
/>
</CoreModules.Stack>
)}
</CoreModules.Stack>
<div className="fmtm-flex fmtm-justify-center fmtm-py-5 fmtm-border-t-[1px]">
<div className="fmtm-p-5 fmtm-border-[1px] fmtm-rounded-lg fmtm-relative">
{qrcode == '' ? (
<CoreModules.Skeleton width={170} height={170} />
) : (
<img id="qrcodeImg" src={qrcode} alt="qrcode" />
)}
<div className="fmtm-rounded-full fmtm-w-10 fmtm-h-10 fmtm-flex fmtm-justify-center fmtm-items-center fmtm-shadow-xl fmtm-absolute fmtm-bottom-0 -fmtm-right-5 fmtm-bg-white ">
<button
onClick={() => {
const downloadLink = document.createElement('a');
downloadLink.href = qrcode;
downloadLink.download = `Task_${task}`;
downloadLink.click();
}}
disabled={qrcode == '' ? true : false}
aria-label="download qrcode"
className={` ${qrcode === '' ? 'fmtm-cursor-not-allowed fmtm-opacity-50' : 'fmtm-cursor-pointer'}`}
>
<AssetModules.FileDownloadIcon />
</button>
</div>
</div>
</div>
);
};

Expand Down

0 comments on commit f9a8095

Please sign in to comment.