Merge pull request #268 from vaibhavsTekdi/vs-7june

Issue #220796 feat: FE - Provision for submitting reason about absent while marking self attendance
tekdi · Jun 10, 2024 · 898583f · 898583f
2 parents 6ca2b9d + a70e219
commit 898583f
Show file tree

Hide file tree

Showing 3 changed files with 190 additions and 4 deletions.
diff --git a/packages/common-lib/src/services/attendanceRegistryService.js b/packages/common-lib/src/services/attendanceRegistryService.js
@@ -22,7 +22,8 @@ const interfaceData = {
   parentName: 'parentName',
   contextId: 'contextId',
   contextType: 'contextType',
-  scope: 'scope'
+  scope: 'scope',
+  absentReason: 'absentReason'
 }
 
 let only = Object.keys(interfaceData)

diff --git a/packages/profile/src/components/Dialog/DialogMsg.js b/packages/profile/src/components/Dialog/DialogMsg.js
@@ -0,0 +1,77 @@
+import React from "react";
+import { Dialog, DialogActions, DialogTitle } from "@mui/material";
+import { Button, Box, Select, CheckIcon, Text } from "native-base";
+import { IconByName } from "@shiksha/common-lib";
+
+export default function DialogMsg(props) {
+  return (
+    <div>
+      <Dialog
+        open={props.modalShow}
+        onClose={props.modalClose}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <Box
+          style={{
+            paddingLeft: "53px",
+            paddingRight: "53px",
+            paddingTop: "10px",
+            paddingBottom: "10px",
+          }}
+        >
+          <Box className="alert_dec">
+            <Box style={{ display: "flex", alignItems: "center" }}>
+              <IconByName
+                name="CloseCircleLineIcon"
+                style={{
+                  color: "rgb(245, 123, 123) !important",
+                  cursor: "none !important",
+                }}
+                _icon={{
+                  size: "47px",
+                }}
+              />
+            </Box>
+            <Box
+              style={{
+                marginTop: "15px",
+                marginBottom: "15px",
+                alignItems: "center",
+              }}
+            >
+              <span>{props.description}</span>
+            </Box>
+          </Box>
+
+          <DialogActions
+            style={{
+              display: "flex",
+              justifyContent: "center",
+            }}
+          >
+            <Button
+              color="primary"
+              onPress={props.clickOk}
+              style={{
+                backgroundColor: "rgb(248, 117, 88) !important",
+                marginRight: "10px",
+              }}
+            >
+              Submit
+            </Button>
+            {props.showCancel && (
+              <Button
+                onPress={props.modalClose}
+                style={{ backgroundColor: "rgb(248, 117, 88) !important" }}
+                autoFocus
+              >
+                Cancel
+              </Button>
+            )}
+          </DialogActions>
+        </Box>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/packages/profile/src/components/SelfAttendanceSheet.js b/packages/profile/src/components/SelfAttendanceSheet.js
@@ -22,8 +22,13 @@ import {
   Pressable,
   Stack,
   VStack,
+  NativeBaseProvider,
+  Select,
+  CheckIcon,
+  Text,
 } from "native-base";
 import React, { useEffect } from "react";
+import DialogMsg from "../components/Dialog/DialogMsg";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import Camera from "./Camera";
@@ -137,6 +142,10 @@ export default function SelfAttendanceSheet({
   const [selfAttendance, setSelfAttendance] = React.useState({});
   const { cohortId } = useParams();
   const navigate = useNavigate();
+  const [showDialogModal, setShowDialogModal] = React.useState(false);
+  const [modalMsg, setModalMsg] = React.useState("");
+  const [selectedReason, setSelectedReason] = React.useState("");
+  const [error, setError] = React.useState("");
 
   const handleTelemetry = (newAttedance) => {
     const telemetryData = telemetryFactory.interact({
@@ -193,6 +202,7 @@ export default function SelfAttendanceSheet({
             id: newAttedance.id,
             attendance: newAttedance.attendance,
             remark: newAttedance.remark,
+            absentReason: newAttedance.absentReason,
             contextId: cohortId,
             scope: scope,
             contextType: "class",
@@ -216,6 +226,7 @@ export default function SelfAttendanceSheet({
               "contextId",
               "contextType",
               "scope",
+              "absentReason",
             ],
           }
         )
@@ -237,6 +248,7 @@ export default function SelfAttendanceSheet({
         studentId: userId || localStorage.getItem("id"),
         contextId: cohortId,
         scope: scope,
+        absentReason: newAttedance.absentReason,
         contextType: "class",
       };
       setSelfAttendance(newAttedance);
@@ -260,6 +272,7 @@ export default function SelfAttendanceSheet({
             "contextId",
             "contextType",
             "scope",
+            "absentReason",
           ],
           tenantid: process.env.REACT_APP_TENANT_ID,
         })
@@ -345,6 +358,20 @@ export default function SelfAttendanceSheet({
     };
   }, []);
 
+  const handleOk = (selfAttendance, selectedReason) => {
+    if (!selectedReason) {
+      setError("Please select a reason.");
+      return;
+    }
+    setError(""); // Clear any previous errors
+    const updatedAttendance = {
+      ...selfAttendance,
+      absentReason: selectedReason,
+    };
+    setShowDialogModal(false);
+    handleMarkAttendance(updatedAttendance);
+  };
+
   const handleGoBack = () => {
     setDone(false);
     setCameraModal(false);
@@ -357,10 +384,11 @@ export default function SelfAttendanceSheet({
   const setAttendanceMark = (e) => {
     if (selfAttendance.attendance == ABSENT) {
       setLocationModal(false);
-      setShowModal(true);
-      setDone(true);
       setCameraModal(false);
-      handleMarkAttendance(selfAttendance);
+      setModalMsg(
+        "Please select the reason for marking the attendance as absent:"
+      );
+      setShowDialogModal(true);
     } else if (
       selfAttendance.attendance == PRESENT &&
       selfAttendance.name === selfAttendance.remark
@@ -407,7 +435,87 @@ export default function SelfAttendanceSheet({
     }
     return data;
   };
+  if (showDialogModal == true) {
+    const absentReasonOptions = [
+      { label: "Paid leave - Half day", value: "Paid leave - Half day" },
+      { label: "Paid leave - Full day", value: "Paid leave - Full day" },
+      { label: "Unpaid leave - Half day", value: "Unpaid leave - Half day" },
+      { label: "Unpaid leave - Full day", value: "Unpaid leave - Full day" },
+      {
+        label: "Menstrual leave - Half day",
+        value: "Menstrual leave - Half day",
+      },
+      {
+        label: "Menstrual leave - Full day",
+        value: "Menstrual leave - Full day",
+      },
+    ];
 
+    return (
+      <>
+        <NativeBaseProvider>
+          {showDialogModal && (
+            <DialogMsg
+              modalShow={showDialogModal}
+              modalClose={() => {
+                setShowDialogModal(false);
+              }}
+              title={"Message"}
+              message={modalMsg}
+              description={
+                <>
+                  <Text>
+                    Please select the reason for marking the attendance as
+                    absent:
+                  </Text>
+                  <Select
+                    selectedValue={selectedReason}
+                    minWidth={200}
+                    accessibilityLabel="Select a reason"
+                    placeholder="Select a reason"
+                    _selectedItem={{
+                      bg: "teal.600",
+                      endIcon: <CheckIcon size="5" />,
+                    }}
+                    mt={1}
+                    mb={3}
+                    _popover={{
+                      transform: [{ translateX: -10 }], // Adjust the value (-10) to set the amount of padding
+                      alignItems: "flex-start",
+                    }}
+                    onValueChange={(value) => {
+                      setSelectedReason(value);
+                      if (value) {
+                        setError("");
+                      } else {
+                        setError("Please select a reason.");
+                      }
+                    }}
+                    labelStyle={{ paddingLeft: 10 }} // Apply padding here
+                  >
+                    {absentReasonOptions.map((option, index) => (
+                      <Select.Item
+                        key={index}
+                        label={option.label}
+                        value={option.value}
+                      />
+                    ))}
+                  </Select>
+                  {error && (
+                    <Text color="red.500" mt={2}>
+                      {error}
+                    </Text>
+                  )}
+                </>
+              }
+              clickOk={() => handleOk(selfAttendance, selectedReason)}
+              showCancel={true}
+            />
+          )}
+        </NativeBaseProvider>
+      </>
+    );
+  }
   if (showModal && config && config["captureSelfAttendace"] === "false") {
     return (
       <>