feat(web-client): Slow scan (#324)

* pnpm * feat(web-admin):add slow-scan feature
IEDCMEC · Feb 27, 2024 · 2f892a3 · 2f892a3
1 parent 49ae8bd
commit 2f892a3
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 54 deletions.
diff --git a/...rganizations/[orgId]/events/[eventId]/participants/check-in/new-in/scanner-slow/index.jsx b/...rganizations/[orgId]/events/[eventId]/participants/check-in/new-in/scanner-slow/index.jsx
@@ -0,0 +1,103 @@
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
+
+import { Button, FormControl, FormLabel, Select, Flex } from '@chakra-ui/react';
+
+import DashboardLayout from '@/layouts/DashboardLayout';
+import Scanner from '@/components/Scanner';
+
+import { useAlert } from '@/hooks/useAlert';
+import { useFetch } from '@/hooks/useFetch';
+
+export default function CheckInParticipantWithScanner() {
+  const { loading, post, get } = useFetch();
+  const showAlert = useAlert();
+
+  const router = useRouter();
+  const { orgId, eventId } = router.query;
+
+  const [participantId, setParticipantId] = useState(null);
+  const [participantDetails, setParticipantDetails] = useState(null);
+
+  useEffect(() => {
+    if (participantId) {
+      const fetchParticipantDetails = async () => {
+        const { data, status } = await get(
+          `/core/organizations/${orgId}/events/${eventId}/participants/${participantId}`,
+        );
+        if (status === 200) {
+          setParticipantDetails(data.participant);
+          console.log(data.participant);
+        } else {
+          showAlert({
+            title: 'Error',
+            description: data.error,
+            status: 'error',
+          });
+        }
+      };
+      fetchParticipantDetails();
+    }
+  }, [orgId, eventId, participantId]);
+
+  const handleCheckIn = async () => {
+    const { data, status } = await post(
+      `/core/organizations/${orgId}/events/${eventId}/participants/check-in/${participantId}`,
+      {},
+      {
+        checkedInAt: new Date().toISOString(),
+      },
+    );
+    if (status === 200) {
+      showAlert({
+        title: 'Success',
+        description: data.message,
+        status: 'success',
+      });
+      setParticipantId(null);
+      setParticipantDetails(null);
+    } else {
+      showAlert({
+        title: 'Error',
+        description: data.error,
+        status: 'error',
+      });
+    }
+  };
+
+  return (
+    <DashboardLayout
+      pageTitle="Check In Participant"
+      previousPage={`/organizations/${orgId}/events/${eventId}/participants`}
+      headerButton={
+        <>
+          <Flex flexDirection="column" gap={4}>
+            <Button
+              onClick={() => {
+                router.push(
+                  `/organizations/${orgId}/events/${eventId}/participants/check-in/new-in/scanner`,
+                );
+              }}
+              isLoading={loading}
+            >
+              Quick Scan
+            </Button>
+          </Flex>
+        </>
+      }
+    >
+      <Flex height="100%" width="100%" flexDirection="column" alignItems="center">
+        {participantDetails && (
+          <div>
+            <p>Name: {participantDetails.firstName + ' ' + participantDetails.lastName}</p>
+            <p>Email: {participantDetails.email}</p>
+            <Button onClick={handleCheckIn} isLoading={loading}>
+              Check In
+            </Button>
+          </div>
+        )}
+        <Scanner setResult={setParticipantId} />
+      </Flex>
+    </DashboardLayout>
+  );
+}
diff --git a/...ges/organizations/[orgId]/events/[eventId]/participants/check-in/new-in/scanner/index.jsx b/...ges/organizations/[orgId]/events/[eventId]/participants/check-in/new-in/scanner/index.jsx
@@ -85,62 +85,25 @@ export default function CheckInParticipantWithScanner() {
     <DashboardLayout
       pageTitle="Check In  Participant"
       previousPage={`/organizations/${orgId}/events/${eventId}/participants`}
+      headerButton={
+        <>
+          <Flex flexDirection="column" gap={4}>
+            <Button
+              onClick={() => {
+                router.push(
+                  `/organizations/${orgId}/events/${eventId}/participants/check-in/new-in/scanner-slow`,
+                );
+              }}
+              isLoading={loading}
+            >
+              Quick Scan
+            </Button>
+          </Flex>
+        </>
+      }
       debugInfo={JSON.stringify(participantId) + JSON.stringify(previousPartiicpantId)}
     >
-      {/* <form onSubmit={handleSubmit}>
-        <FormControl my={4}>
-          <FormLabel>Participant ID</FormLabel>
-          <Select
-            placeholder="Select Participant ID"
-            value={participantId}
-            onChange={(e) => {
-              setParticipantId(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.id}>
-                {participant.id}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl my={4}>
-          <FormLabel>First Name</FormLabel>
-          <Select
-            placeholder="Select First Name"
-            value={participantId}
-            onChange={(e) => {
-              setParticipantId(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.id}>
-                {participant.firstName}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <FormControl my={4}>
-          <FormLabel>Last Name</FormLabel>
-          <Select
-            placeholder="Select Last Name"
-            value={participantId}
-            onChange={(e) => {
-              setParticipantId(e.target.value);
-            }}
-          >
-            {participants.map((participant) => (
-              <option key={participant.id} value={participant.id}>
-                {participant.lastName}
-              </option>
-            ))}
-          </Select>
-        </FormControl>
-        <Button type="submit" width="100%" my="4" isLoading={loading} loadingText="Please Wait">
-          Check In
-        </Button>
-      </form> */}
-      <Flex height="100%" width="100%">
+      <Flex height="50%" width="50%" justifyContent={'center'} alignItems={'center'}>
         <Scanner result={participantId} setResult={setParticipantId} />
       </Flex>
     </DashboardLayout>