Skip to content

Commit

Permalink
feat(task-description): refactor images uploading process
Browse files Browse the repository at this point in the history 
combine description, comment and image uplaod on same page
  • Loading branch information
@suzit-10
suzit-10 committed Aug 23, 2024
1 parent facbf11 commit f048057
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 126 deletions.
11 changes: 7 additions & 4 deletions src/frontend/src/components/DroneOperatorTask/DescriptionSection/DescriptionBox/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import { useParams } from 'react-router-dom';
import { useGetIndividualTaskQuery } from '@Api/tasks';
import { useTypedSelector } from '@Store/hooks';
import { useState } from 'react';
// import { useTypedSelector } from '@Store/hooks';
import { format } from 'date-fns';
import DescriptionBoxComponent from './DescriptionComponent';
import QuestionBox from '../QuestionBox';

const DescriptionBox = () => {
const secondPageStates = useTypedSelector(state => state.droneOperatorTask);
const { secondPage } = secondPageStates;
// const secondPageStates = useTypedSelector(state => state.droneOperatorTask);
const [flyable, setFlyable] = useState('yes');
// const { secondPage } = secondPageStates;
const { taskId } = useParams();

const { data: taskDescription }: Record<string, any> =
Expand Down Expand Up @@ -88,7 +90,8 @@ const DescriptionBox = () => {
/>
))}
</div>
{!secondPage && <QuestionBox />}
{/* {!secondPage && <QuestionBox />} */}
<QuestionBox setFlyable={setFlyable} flyable={flyable} />
</>
);
};
Expand Down
161 changes: 69 additions & 92 deletions ...rontend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/ImageBox/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,16 @@ import delay from '@Utils/createDelay';
import chunkArray from '@Utils/createChunksOfArray';
import callApiSimultaneously from '@Utils/callApiSimultaneously';
import widthCalulator from '@Utils/percentageCalculator';

import ImageCard from './ImageCard';
import FilesUploadingPopOver from '../LoadingBox';
import PreviewImage from './PreviewImage';

interface IImageBoxPopOverProps {
show: boolean;
imageFiles: any[];
}
// interface IImageBoxPopOverProps {
// show: boolean;
// imageFiles: any[];
// }

const ImageBoxPopOver = ({ show, imageFiles }: IImageBoxPopOverProps) => {
const ImageBoxPopOver = () => {
const dispatch = useTypedDispatch();
const { projectId, taskId } = useParams();

Expand All @@ -42,9 +41,12 @@ const ImageBoxPopOver = ({ show, imageFiles }: IImageBoxPopOverProps) => {
const [imagesNames, setImagesNames] = useState<string[]>([]);
const [loadingWidth, setLoadingWidth] = useState(0);
const [files, setFiles] = useState<any[]>([]);

const { clickedImage, checkedImages } = useTypedSelector(
state => state.droneOperatorTask,
const imageFiles = useTypedSelector(state => state.droneOperatorTask.files);
const clickedImage = useTypedSelector(
state => state.droneOperatorTask.clickedImage,
);
const checkedImages = useTypedSelector(
state => state.droneOperatorTask.checkedImages,
);

// function that gets the signed urls for the images and again puts them in chunks of 4
Expand Down Expand Up @@ -140,100 +142,75 @@ const ImageBoxPopOver = ({ show, imageFiles }: IImageBoxPopOverProps) => {
};
return (
<>
{/* ------------------ image section ----------------- */}
<div
className={`naxatw-absolute naxatw-left-1/2 naxatw-top-1/2 naxatw-z-[1000] naxatw-flex naxatw-h-screen naxatw-w-full naxatw-translate-x-[-50%] naxatw-translate-y-[-50%] naxatw-bg-[#00000036] naxatw-backdrop-blur-sm ${show ? 'naxatw-block' : 'naxatw-hidden'} naxatw-flex naxatw-items-center naxatw-justify-center`}
className={`naxatw-grid naxatw-gap-4 ${clickedImage ? 'naxatw-grid-cols-[70%_auto]' : 'naxatw-grid-cols-1'}`}
>
<div
className={`naxatw-flex naxatw-w-[80%] naxatw-flex-col naxatw-gap-6 naxatw-rounded-xl naxatw-border naxatw-border-gray-200 naxatw-bg-white naxatw-p-6 naxatw-shadow-sm ${progressBar ? 'naxatw-hidden' : 'naxatw-block'} naxatw-overflow-x-hidden`}
className={`scrollbar-images-grid naxatw-grid naxatw-h-[28rem] naxatw-gap-4 naxatw-overflow-y-auto ${clickedImage ? 'naxatw-grid-cols-5' : 'naxatw-grid-cols-6'}`}
>
{/* ------------------ header section ----------------- */}
<div className="naxatw-flex naxatw-justify-between">
<div className="naxatw-flex naxatw-flex-col">
<p className="naxatw-text-[1.0625rem] naxatw-font-bold naxatw-leading-normal naxatw-text-black">
Upload Raw Image
</p>
<p className="naxatw-text-[0.875rem] naxatw-leading-normal naxatw-text-[#7A7676]">
Please uncheck the image that doesn&apos;t need to be uploaded
</p>
</div>
<Icon
name="close"
onClick={() => dispatch(showPopover())}
className="naxatw-cursor-pointer naxatw-text-[1.5rem] naxatw-text-[#555555]"
{imageObject?.map((image, index) => (
<ImageCard
image={image}
key={image}
imageName={imageFiles[index].name}
checked={checkedImages[index]}
deselectImages={index}
/>
</div>
))}
</div>

{/* ----------------- preview Image --------------------- */}
<motion.div
animate={clickedImage ? 'visible' : 'hidden'}
className="naxatw-w-full"
variants={variants}
>
<PreviewImage />
</motion.div>
</div>

{/* ------------------ image section ----------------- */}
{/* ------------------ buttons section ----------------- */}
<div className="naxatw-flex naxatw-w-full naxatw-items-center naxatw-justify-between">
<div className="naxatw-flex naxatw-gap-6">
<div
className={`naxatw-grid naxatw-gap-4 ${clickedImage ? 'naxatw-grid-cols-[70%_auto]' : 'naxatw-grid-cols-1'}`}
role="button"
className="naxatw-flex naxatw-w-full naxatw-items-center naxatw-gap-2 naxatw-overflow-hidden"
onClick={handleSelectAllImages}
>
<div
className={`scrollbar-images-grid naxatw-grid naxatw-h-[28rem] naxatw-gap-4 naxatw-overflow-y-auto ${clickedImage ? 'naxatw-grid-cols-5' : 'naxatw-grid-cols-6'}`}
>
{imageObject?.map((image, index) => (
<ImageCard
image={image}
key={image}
imageName={imageFiles[index].name}
checked={checkedImages[index]}
deselectImages={index}
/>
))}
</div>

{/* ----------------- preview Image --------------------- */}
<motion.div
animate={clickedImage ? 'visible' : 'hidden'}
className="naxatw-w-full"
variants={variants}
>
<PreviewImage />
</motion.div>
<input
type="checkbox"
checked={Object.values(checkedImages).every(Boolean)}
/>
<p className="naxatw-text-nowrap naxatw-text-[0.875rem] naxatw-leading-normal naxatw-text-black">
Select All
</p>
</div>

{/* ------------------ buttons section ----------------- */}
<div className="naxatw-flex naxatw-w-full naxatw-items-center naxatw-justify-between">
<div className="naxatw-flex naxatw-gap-6">
<div
role="button"
className="naxatw-flex naxatw-w-full naxatw-items-center naxatw-gap-2 naxatw-overflow-hidden"
onClick={handleSelectAllImages}
>
<input
type="checkbox"
checked={Object.values(checkedImages).every(Boolean)}
/>
<p className="naxatw-text-nowrap naxatw-text-[0.875rem] naxatw-leading-normal naxatw-text-black">
Select All
</p>
</div>
<div
role="button"
className="naxatw-flex naxatw-w-full naxatw-items-center naxatw-gap-2"
onClick={handleDeselectAllImages}
>
<input
type="checkbox"
checked={Object.values(checkedImages).every(
value => value === false,
)}
/>
<p className="naxatw-text-nowrap naxatw-text-[0.875rem] naxatw-leading-normal naxatw-text-black">
Deselect All
</p>
</div>
</div>
<div className="naxatw-w-fit">
<Button
variant="ghost"
className="naxatw-mx-auto naxatw-w-fit naxatw-bg-[#D73F3F] naxatw-text-[#FFFFFF]"
onClick={() => handleSubmit()}
>
Upload Selected
</Button>
</div>
<div
role="button"
className="naxatw-flex naxatw-w-full naxatw-items-center naxatw-gap-2"
onClick={handleDeselectAllImages}
>
<input
type="checkbox"
checked={Object.values(checkedImages).every(
value => value === false,
)}
/>
<p className="naxatw-text-nowrap naxatw-text-[0.875rem] naxatw-leading-normal naxatw-text-black">
Deselect All
</p>
</div>
</div>
<div className="naxatw-w-fit">
<Button
variant="ghost"
className="naxatw-mx-auto naxatw-w-fit naxatw-bg-[#D73F3F] naxatw-text-[#FFFFFF]"
onClick={() => handleSubmit()}
>
Upload Selected
</Button>
</div>
</div>
{/* ---------- loading popover-------------- */}
<FilesUploadingPopOver
Expand Down
32 changes: 20 additions & 12 deletions src/frontend/src/components/DroneOperatorTask/DescriptionSection/QuestionBox/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,17 @@ import { useTypedDispatch } from '@Store/hooks';
import { postUnflyableComment } from '@Services/droneOperator';
import { useMutation } from '@tanstack/react-query';
import { useParams } from 'react-router-dom';
import UploadsBox from '../UploadsBox';

const QuestionBox = () => {
interface IQuestionBoxProps {
flyable: string;
setFlyable: React.Dispatch<React.SetStateAction<any>>;
}

const QuestionBox = ({ flyable, setFlyable }: IQuestionBoxProps) => {
const { projectId, taskId } = useParams();

const dispatch = useTypedDispatch();
const [flyable, setFlyable] = useState('yes');
const [comment, setComment] = useState('');
const variants = {
open: { opacity: 1, y: 0 },
Expand Down Expand Up @@ -101,17 +106,20 @@ const QuestionBox = () => {
value={comment}
onChange={e => setComment(e.target.value)}
/>

<div className="naxatw-my-4 naxatw-flex naxatw-w-full naxatw-justify-center">
<Button
variant="ghost"
className="naxatw-w-fit naxatw-bg-[#D73F3F] naxatw-text-[#FFFFFF]"
onClick={() => handleSubmit()}
disabled={flyable === 'no' && comment.length < 6}
isLoading={mutation.isLoading}
>
Save
</Button>
</div>
</motion.div>
<Button
variant="ghost"
rightIcon={flyable === 'yes' ? 'chevron_right' : ''}
className="naxatw-w-fit naxatw-bg-[#D73F3F] naxatw-text-[#FFFFFF]"
onClick={() => handleSubmit()}
disabled={flyable === 'no' && comment.length < 6}
isLoading={mutation.isLoading}
>
{flyable === 'no' ? 'Save' : 'Proceed'}
</Button>
{flyable === 'yes' && <UploadsBox />}
</div>
</>
);
Expand Down
25 changes: 7 additions & 18 deletions src/frontend/src/components/DroneOperatorTask/DescriptionSection/UploadsBox/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,20 @@
/* eslint-disable no-await-in-loop */
/* eslint-disable no-console */
/* eslint-disable no-unused-vars */
import { useState } from 'react';

import { useTypedDispatch, useTypedSelector } from '@Store/hooks';
import {
setSelectedImage,
showPopover,
} from '@Store/actions/droneOperatorTask';
import { Button } from '@Components/RadixComponents/Button';

import ImageBoxPopOver from '../PopoverBox/ImageBox';
import { toggleModal } from '@Store/actions/common';
import { setFiles, showPopover } from '@Store/actions/droneOperatorTask';
import { useTypedDispatch, useTypedSelector } from '@Store/hooks';

const UploadsBox = () => {
const dispatch = useTypedDispatch();
const { popOver } = useTypedSelector(state => state.droneOperatorTask);

const [files, setFiles] = useState<any[]>([]);
const [popoverOpen, setPopoverOpen] = useState(false);

const files = useTypedSelector(state => state.droneOperatorTask.files);
const handleFileChange = (event: any) => {
const selectedFiles = event.target.files;
if (!selectedFiles) return;
const selectedFilesArray = Array.from(selectedFiles);
setFiles(selectedFilesArray);
dispatch(showPopover());
dispatch(setFiles(selectedFilesArray));
dispatch(toggleModal('raw-image-preview'));
};

return (
Expand All @@ -47,13 +37,12 @@ const UploadsBox = () => {
<Button
variant="ghost"
className="naxatw-mx-auto naxatw-w-fit naxatw-bg-[#D73F3F] naxatw-text-[#FFFFFF]"
onClick={() => dispatch(showPopover())}
onClick={() => dispatch(toggleModal('raw-image-preview'))}
>
Upload
</Button>
)}
</div>
<ImageBoxPopOver show={popOver} imageFiles={files} />
</>
);
};
Expand Down
5 changes: 5 additions & 0 deletions src/frontend/src/store/slices/droneOperartorTask.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export interface IDroneOperatorTaskState {
clickedImage: string;
checkedImages: Record<number, boolean>;
popOver: boolean;
files: any[];
}

const initialState: IDroneOperatorTaskState = {
Expand All @@ -15,6 +16,7 @@ const initialState: IDroneOperatorTaskState = {
clickedImage: '',
checkedImages: {},
popOver: false,
files: [],
};

export const droneOperatorTaskSlice = createSlice({
Expand Down Expand Up @@ -50,6 +52,9 @@ export const droneOperatorTaskSlice = createSlice({
state.checkedImages[key] = true;
});
},
setFiles: (state, action) => {
state.files = action.payload;
},
},
});

Expand Down

0 comments on commit f048057

Please sign in to comment.