Merge pull request #112 from hotosm/feat/approve-task-mapping-request

Feat/approve task mapping request

src/frontend/src/api/dashboard.ts

@@ -0,0 +1,14 @@
+/* eslint-disable import/prefer-default-export */
+import { UseQueryOptions, useQuery } from '@tanstack/react-query';
+import { getRequestedTasks } from '@Services/project';
+
+export const useGetRequestedTasksListQuery = (
+  queryOptions?: Partial<UseQueryOptions>,
+) => {
+  return useQuery({
+    queryKey: ['requested-task-list'],
+    queryFn: getRequestedTasks,
+    select: (res: any) => res.data,
+    ...queryOptions,
+  });
+};

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

@@ -5,11 +5,18 @@ import graphImage from '@Assets/images/graph.svg';
 interface IDashboardCardProps {
   title: string;
   value: number;
+  active: boolean;
 }
 
-export default function DashboardCard({ title, value }: IDashboardCardProps) {
+export default function DashboardCard({
+  title,
+  value,
+  active,
+}: IDashboardCardProps) {
   return (
-    <FlexRow className="naxatw-items-center naxatw-gap-7 naxatw-p-5 naxatw-shadow-lg">
+    <FlexRow
+      className={`naxatw-items-center naxatw-gap-7 naxatw-rounded-lg naxatw-border naxatw-p-5 naxatw-shadow-lg ${active ? 'naxatw-border-[#D73F3F]' : ''}`}
+    >
       <Image src={graphImage} />
       <FlexColumn>
         <h2>{value}</h2>

src/frontend/src/constants/dashboard.ts

@@ -1,8 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-export const dashboardCards = [
+export const dashboardCardsForProjectCreator = [
   {
     id: 1,
-    title: 'Task Created',
+    title: 'Request Logs',
     value: 12,
   },
   {
@@ -21,3 +21,21 @@ export const dashboardCards = [
     value: 7,
   },
 ];
+
+export const dashboardCardsForDroneOperator = [
+  {
+    id: 2,
+    title: 'Ongoing Task',
+    value: 7,
+  },
+  {
+    id: 3,
+    title: 'Completed Task',
+    value: 5,
+  },
+  {
+    id: 4,
+    title: 'Completed Task',
+    value: 7,
+  },
+];

src/frontend/src/services/project.ts

@@ -10,3 +10,5 @@ export const postTaskStatus = (payload: Record<string, any>) => {
     headers: { 'Content-Type': 'application/json' },
   });
 };
+export const getRequestedTasks = () =>
+  authenticated(api).get('/tasks/requested_tasks/pending');

src/frontend/src/views/Dashboard/index.tsx

@@ -1,8 +1,62 @@
-import { FlexRow } from '@Components/common/Layouts';
+import { useGetRequestedTasksListQuery } from '@Api/dashboard';
+import { FlexColumn, FlexRow } from '@Components/common/Layouts';
 import { DashboardSidebar, DashboardCard } from '@Components/Dashboard';
-import { dashboardCards } from '@Constants/dashboard';
+import { Button } from '@Components/RadixComponents/Button';
+import {
+  dashboardCardsForDroneOperator,
+  dashboardCardsForProjectCreator,
+} from '@Constants/dashboard';
+import { postTaskStatus } from '@Services/project';
+import { useMutation } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { toast } from 'react-toastify';
 
 export default function Dashboard() {
+  const signedInAs = localStorage.getItem('signedInAs') || 'Project Creator';
+  const dashboardCards =
+    signedInAs === 'Project Creator'
+      ? dashboardCardsForProjectCreator
+      : dashboardCardsForDroneOperator;
+
+  const { data: requestedTasks } = useGetRequestedTasksListQuery();
+
+  const { mutate: respondToRequest } = useMutation<any, any, any, unknown>({
+    mutationFn: postTaskStatus,
+    onSuccess: () => {
+      toast.success('Responded to the request');
+    },
+    onError: (err: any) => {
+      toast.error(err.message);
+    },
+  });
+
+  const requestedForMappingTasks: any[] =
+    useMemo(
+      () =>
+        // @ts-ignore
+        requestedTasks?.reduce((acc: any[], curr: Record<string, any>) => {
+          if (curr?.state === 'REQUEST_FOR_MAPPING') return [...acc, curr];
+          return acc;
+        }, []),
+      [requestedTasks],
+    ) || [];
+
+  const handleReject = (taskId: string, projectId: string) => {
+    respondToRequest({
+      projectId,
+      taskId,
+      data: { event: 'bad' },
+    });
+  };
+
+  const handleApprove = (taskId: string, projectId: string) => {
+    respondToRequest({
+      projectId,
+      taskId,
+      data: { event: 'map' },
+    });
+  };
+
   return (
     <section className="naxatw-h-screen-nav naxatw-bg-grey-50 naxatw-px-16 naxatw-pt-8">
       <FlexRow className="naxatw-mb-4 naxatw-py-3">
@@ -17,9 +71,49 @@ export default function Dashboard() {
                 key={card.id}
                 title={card.title}
                 value={card.value}
+                active={card.title === 'Request Logs'}
               />
             ))}
           </div>
+          <div className="naxatw-mt-8 naxatw-flex-col">
+            <h4 className="naxatw-py-2 naxatw-text-base naxatw-font-bold naxatw-text-gray-800">
+              Request Logs
+            </h4>
+            <FlexColumn className="naxatw-max-h-[24.4rem] naxatw-gap-2 naxatw-overflow-y-auto">
+              {requestedForMappingTasks?.map((task: Record<string, any>) => (
+                <div
+                  key={task.task_id}
+                  className="naxatw-flex naxatw-h-fit naxatw-w-full naxatw-items-center naxatw-justify-between naxatw-rounded-xl naxatw-border naxatw-border-gray-300 naxatw-p-3"
+                >
+                  <div>
+                    The Task <strong>#{task.task_id}</strong> is requested for
+                    Mapping
+                  </div>
+                  <div className="naxatw-flex naxatw-w-[172px] naxatw-gap-3">
+                    <Button
+                      variant="outline"
+                      className="naxatw-text-red"
+                      onClick={() =>
+                        handleReject(task.task_id, task.project_id)
+                      }
+                      leftIcon="close"
+                    >
+                      Reject
+                    </Button>
+                    <Button
+                      className="!naxatw-bg-red naxatw-text-white"
+                      onClick={() =>
+                        handleApprove(task.task_id, task.project_id)
+                      }
+                      leftIcon="check"
+                    >
+                      Approve
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </FlexColumn>
+          </div>
         </div>
       </div>
     </section>