Merge pull request #145 from hotosm/feat/drone-operator-task-page

Feat/drone operator task page - Add feature to upload folder of images

src/frontend/src/assets/css/index.css

@@ -10,6 +10,7 @@
 html,
 body {
   font-family: 'Barlow Condensed', sans-serif;
+  box-sizing: border-box;
 }
 
 .landing-page p {
@@ -39,6 +40,27 @@ body {
   transition: all 1s ease-in-out;
   border-radius: 500px;
 }
+.scrollbar-images-grid::-webkit-scrollbar {
+  /* height: 7px; */
+  width: 6px;
+}
+.scrollbar-images-grid:hover::-webkit-scrollbar-track {
+  background: #d73f3f40;
+  border-radius: 10px;
+  /* display: block; */
+}
+.scrollbar-images-grid:hover::-webkit-scrollbar-thumb {
+  background: #d73f3fd3;
+  border-radius: 10px;
+}
+.scrollbar-images-grid::-webkit-scrollbar-track {
+  background: transparent;
+  display: none;
+}
+
+.scrollbar-images-grid::-webkit-scrollbar-thumb {
+  background: transparent;
+}
 @keyframes pulse-animation {
   0% {
     box-shadow: 0 0 0 0 rgba(0, 70, 119, 0.5);

src/frontend/src/components/Dashboard/DashboardSidebar/index.tsx

@@ -8,7 +8,7 @@ export default function DashboardSidebar() {
 
   const userDetails = getLocalStorageValue('userprofile');
   return (
-    <FlexColumn className="naxatw-col-span-1 naxatw-items-center naxatw-rounded-lg naxatw-border naxatw-border-grey-400 naxatw-bg-white naxatw-p-2.5">
+    <FlexColumn className="w-naxatw-w-full naxatw-items-center naxatw-rounded-lg naxatw-border naxatw-border-grey-400 naxatw-bg-white naxatw-p-2.5 md:naxatw-min-h-[37.188rem]">
       <Flex className="naxatw-h-20 naxatw-w-20 naxatw-items-center naxatw-justify-center naxatw-overflow-hidden naxatw-rounded-full naxatw-bg-grey-600">
         <img src={userDetails?.img_url} alt="profile" />
       </Flex>
@@ -22,13 +22,17 @@ export default function DashboardSidebar() {
         Edit Profile
       </Button>
       <FlexColumn className="naxatw-my-5 naxatw-w-full naxatw-gap-2">
-        <FlexRow className="naxatw-gap-1">
-          <div className="naxatw-w-[120px]">Name</div>:
-          <div>{userDetails?.name}</div>
+        <FlexRow className="naxatw-justify-center naxatw-gap-1 md:naxatw-justify-normal">
+          <p className="md:naxatw-min-w-[30%]">Name</p>:
+          <p className="naxatw-break-words md:naxatw-min-w-[65%]">
+            {userDetails?.name}
+          </p>
         </FlexRow>
-        <FlexRow className="naxatw-gap-1">
-          <div className="naxatw-w-[120px]">Email</div>:
-          <div className="naxatw-break-words">{userDetails?.email}</div>
+        <FlexRow className="naxatw-justify-center naxatw-gap-1 md:naxatw-justify-normal">
+          <p className="md:naxatw-min-w-[30%]">Email</p>:
+          <p className="naxatw-break-words md:naxatw-min-w-[65%]">
+            {userDetails?.email}
+          </p>
         </FlexRow>
       </FlexColumn>
     </FlexColumn>

src/frontend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/ImageBox/ImageCard/index.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable jsx-a11y/interactive-supports-focus */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { useState } from 'react';
+
+import {
+  setSelectedImage,
+  unCheckImages,
+} from '@Store/actions/droneOperatorTask';
+import { useTypedDispatch } from '@Store/hooks';
+import Skeleton from '@Components/RadixComponents/Skeleton';
+
+interface IImageCardProps {
+  image: string;
+  imageName: string;
+  checked: boolean;
+  deselectImages?: number;
+}
+const ImageCard = ({
+  image,
+  imageName,
+  checked,
+  deselectImages,
+}: IImageCardProps) => {
+  const dispatch = useTypedDispatch();
+  const [loading, setLoading] = useState(true);
+
+  const handleLoad = () => {
+    setLoading(false);
+  };
+  return (
+    <>
+      {loading && (
+        <Skeleton className="naxatw-h-[8.75rem] naxatw-w-[8.75rem]" />
+      )}
+      <div
+        className={`naxatw-flex naxatw-w-[8.75rem] naxatw-flex-col naxatw-gap-1 ${loading ? 'naxatw-hidden' : 'naxatw-block'}`}
+      >
+        <div className="naxatw-w-full naxatw-overflow-hidden naxatw-rounded-[0.25rem]">
+          <img
+            src={image}
+            onLoad={handleLoad}
+            alt=""
+            className="naxatw-h-[8.75rem] naxatw-w-full naxatw-cursor-pointer naxatw-rounded-[0.25rem] naxatw-transition hover:naxatw-scale-150"
+            onClick={() => dispatch(setSelectedImage(image))}
+          />
+        </div>
+        <div
+          role="button"
+          className="naxatw-flex naxatw-w-full naxatw-cursor-pointer naxatw-items-center naxatw-gap-2 naxatw-overflow-hidden"
+          onClick={() => dispatch(unCheckImages(deselectImages))}
+        >
+          <input
+            type="checkbox"
+            checked={checked}
+            className="naxatw-cursor-pointer"
+          />
+          <p className="naxatw-truncate naxatw-text-nowrap naxatw-text-[0.875rem] naxatw-leading-normal naxatw-text-black">
+            {imageName}
+          </p>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ImageCard;

src/frontend/src/components/DroneOperatorTask/DescriptionSection/PopoverBox/ImageBox/PreviewImage/index.tsx

@@ -0,0 +1,14 @@
+import { useTypedSelector } from '@Store/hooks';
+
+const PreviewImage = () => {
+  const { clickedImage } = useTypedSelector(state => state.droneOperatorTask);
+  return (
+    <img
+      src={clickedImage}
+      className={`naxatw-aspect-[3/4] naxatw-w-full naxatw-rounded-[0.25rem] naxatw-object-cover ${clickedImage ? 'naxatw-block' : 'naxatw-hidden'}`}
+      alt=""
+    />
+  );
+};
+
+export default PreviewImage;