implementation attendance bulk actions

.eslintrc.json

@@ -3,27 +3,23 @@
     "browser": true,
     "es2021": true
   },
-  "extends": [
-    "plugin:react/recommended",
-    "standard-with-typescript"
-  ],
-  "overrides": [
-  ],
+  "extends": ["plugin:react/recommended", "standard-with-typescript"],
+  "overrides": [],
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module",
     "project": "tsconfig.json"
   },
-  "plugins": [
-    "react"
-  ],
+  "plugins": ["react"],
   "rules": {
     "indent": "off",
     "@typescript-eslint/indent": "off",
     "@typescript-eslint/quotes": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/space-before-function-paren": "off",
     "@typescript-eslint/object-curly-spacing": "off",
-    "@typescript-eslint/semi": "off"
+    "@typescript-eslint/semi": "off",
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "@typescript-eslint/comma-dangle": "off"
   }
 }

package.json

@@ -21,6 +21,7 @@
     "typescript": "*"
   },
   "dependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@date-io/date-fns": "1.3.13",
     "@dhis2/app-runtime": "^3.9.4",
     "@dhis2/app-service-datastore": "^1.0.0-beta.3",
@@ -44,4 +45,4 @@
     "recoil": "^0.7.7",
     "zod": "^3.21.4"
   }
-}
+}

src/components/table/components/enrollmentButtons/EnrollmentActionsButtons.tsx

@@ -1,21 +1,30 @@
-import React, { useState } from 'react'
-import { Event } from '@material-ui/icons';
-import { useSetRecoilState } from 'recoil';
-import Tooltip from '@material-ui/core/Tooltip';
-import { useParams, useAttendanceMode } from '../../../../hooks';
+import React, { useState } from "react";
+import { Event } from "@material-ui/icons";
+import { useSetRecoilState } from "recoil";
+import Tooltip from "@material-ui/core/Tooltip";
+import { useParams, useAttendanceMode } from "../../../../hooks";
 import { IconAddCircle24, Button, ButtonStrip } from "@dhis2/ui";
-import { SelectedDateAddNewState, SelectedDateState } from '../../../../schema/attendanceSchema';
-import {  DropDownCalendar } from '../../../../components';
+import {
+  SelectedDateAddNewState,
+  SelectedDateState,
+} from "../../../../schema/attendanceSchema";
+import { DropDownCalendar } from "../../../../components";
 
 function EnrollmentActionsButtons() {
   const { useQuery } = useParams();
-  const orgUnit = useQuery().get("school")
-  const setSelectedDate = useSetRecoilState(SelectedDateState)
-  const setSelectedDateAddNew = useSetRecoilState(SelectedDateAddNewState)
-  const { setAttendanceMode } = useAttendanceMode()
-  const [anchorElAddNew, setAnchorElAddNew] = useState<null | HTMLElement>(null);
-  const [anchorViewLast, setAnchorViewLast] = useState<null | HTMLElement>(null);
-  const [localAttendanceMode, setlocalAttendanceMode] = useState<"edit" | "view">("view");
+  const orgUnit = useQuery().get("school");
+  const setSelectedDate = useSetRecoilState(SelectedDateState);
+  const setSelectedDateAddNew = useSetRecoilState(SelectedDateAddNewState);
+  const { setAttendanceMode } = useAttendanceMode();
+  const [anchorElAddNew, setAnchorElAddNew] = useState<null | HTMLElement>(
+    null
+  );
+  const [anchorViewLast, setAnchorViewLast] = useState<null | HTMLElement>(
+    null
+  );
+  const [localAttendanceMode, setlocalAttendanceMode] = useState<
+    "edit" | "view"
+  >("view");
 
   const closeAnchor = () => {
     setAnchorElAddNew(null);
@@ -25,14 +34,32 @@ function EnrollmentActionsButtons() {
   return (
     <div>
       <ButtonStrip>
-        <Tooltip title={orgUnit === null ? "Please select an organisation unit before" : ""}>
-          <span onClick={(event: React.MouseEvent<HTMLElement>) => { setAnchorElAddNew(event.currentTarget); setlocalAttendanceMode("edit") }}>
+
+        <Tooltip
+          title={
+            orgUnit === null ? "Please select an organisation unit before" : ""
+          }
+        >
+          <span
+            onClick={(event: React.MouseEvent<HTMLElement>) => {
+              setAnchorElAddNew(event.currentTarget);
+              setlocalAttendanceMode("edit");
+            }}
+          >
             <Button icon={<IconAddCircle24 />}>Take attendance</Button>
           </span>
         </Tooltip>
-
-        <Tooltip title={orgUnit === null ? "Please select an organisation unit before" : ""}>
-          <span onClick={(event: React.MouseEvent<HTMLElement>) => { setAnchorViewLast(event.currentTarget); setlocalAttendanceMode("view") }}>
+        <Tooltip
+          title={
+            orgUnit === null ? "Please select an organisation unit before" : ""
+          }
+        >
+          <span
+            onClick={(event: React.MouseEvent<HTMLElement>) => {
+              setAnchorViewLast(event.currentTarget);
+              setlocalAttendanceMode("view");
+            }}
+          >
             <Button icon={<Event />}>View attendance records</Button>
           </span>
         </Tooltip>
@@ -59,7 +86,7 @@ function EnrollmentActionsButtons() {
         setAttendanceMode={setAttendanceMode}
       />
     </div>
-  )
+  );
 }
 
-export default EnrollmentActionsButtons
+export default EnrollmentActionsButtons;

src/components/table/components/head/HeaderFilters.tsx

@@ -1,41 +1,102 @@
 import React from "react";
-import { Chip } from "@dhis2/ui";
+import { Chip, Button, IconView24, IconViewOff24 } from "@dhis2/ui";
 import { SelectedDateAddNewState } from "../../../../schema/attendanceSchema";
 import { format } from "date-fns";
 import { TableColumnState } from "../../../../schema/tableColumnsSchema";
 import { useRecoilState, useRecoilValue } from "recoil";
-import styles from './header.module.css'
+import styles from "./header.module.css";
 import { useHeader, useAttendanceMode } from "../../../../hooks";
 import EnrollmentFilters from "../filters/enrollment/EnrollmentFilters";
 import ConfigTableColumns from "../configTableColumns/ConfigTableColumns";
-import { Button, IconView24, IconViewOff24 } from "@dhis2/ui";
 import { ReasonOfAbsenseState } from "../../../../schema/reasonOfAbsenseSchema";
+import { useAttendanceConst } from "../../../../utils/constants/attendance/attendanceConst";
+import {
+  AccessTime,
+  CheckCircleOutline,
+  HighlightOff,
+} from "@material-ui/icons";
+import { getIcon } from "../../../../utils/table/attendance/getIcom";
+import { bulkActionsState } from "../../../../schema/bulkActionsSchema";
 
-function HeaderFilters() {
+function HeaderFilters({ bulkAction }: any) {
   const { columns } = useHeader();
-  const [updatedCols, setTableColumns] = useRecoilState(TableColumnState)
-  const { selectedDate } = useRecoilValue(SelectedDateAddNewState)
-  const [seeReason, setSeeReason] = useRecoilState(ReasonOfAbsenseState)
-  const { attendanceMode } = useAttendanceMode()
+  const [updatedCols, setTableColumns] = useRecoilState(TableColumnState);
+  const { selectedDate } = useRecoilValue(SelectedDateAddNewState);
+  const [seeReason, setSeeReason] = useRecoilState(ReasonOfAbsenseState);
+  const [bulkActions, setBulkActions] = useRecoilState(bulkActionsState);
+  const { attendanceMode } = useAttendanceMode();
 
-  const setTableHeaders = (tableHeaders: any) => setTableColumns(tableHeaders)
-  const handleClick = () => setSeeReason(!seeReason)
+  const setTableHeaders = (tableHeaders: any) => { setTableColumns(tableHeaders); };
+  const handleClick = () => { setSeeReason(!seeReason); };
+
+  const [disabled, _] = React.useState(false);
 
   return (
     <div className={styles.headerFilterContainer}>
       <EnrollmentFilters />
       <div className="mt-2">
-        {
-          attendanceMode === 'edit' ?
+        {attendanceMode === "edit" ? (
+          <>
+            <span
+              style={{
+                padding: "5px 10px",
+                margin: "5px",
+                border: "1px solid #ccc",
+                cursor: "pointer",
+              }}
+              title="Mark all as Present"
+              onClick={() => {
+                setBulkActions("present");
+              }}
+            >
+              <CheckCircleOutline
+                style={disabled ? styles : { color: "#21B26D" }}
+              />
+            </span>
+            {/* <span
+              style={{
+                padding: "5px 10px",
+                margin: "5px",
+                border: "1px solid #ccc",
+                cursor: "pointer",
+              }}
+              onClick={() => { setBulkActions("late"); }}
+            >
+              <AccessTime style={disabled ? styles : { color: "#EAB631" }} />
+            </span> */}
+            <span
+              style={{
+                padding: "5px 10px",
+                margin: "5px",
+                border: "1px solid #ccc",
+                cursor: "pointer",
+              }}
+              title="Mark all as Absent"
+              onClick={() => {
+                setBulkActions("absent");
+              }}
+            >
+              <HighlightOff style={disabled ? styles : { color: "#F05C5C" }} />
+            </span>
             <Chip selected>
-              Selected date: {selectedDate && format(selectedDate as unknown as Date, 'dd/MM/yyyy')}
+              Selected date:{" "}
+              {selectedDate &&
+                format(selectedDate as unknown as Date, "dd/MM/yyyy")}
             </Chip>
-            :
-            <Button onClick={handleClick} icon={seeReason ? <IconViewOff24 /> : <IconView24 />}>
-              {seeReason ? 'Hide Reason of Absense' : 'View Reason of Absense'}
-            </Button>
-        }
-        <ConfigTableColumns filteredHeaders={updatedCols} headers={columns} updateVariables={setTableHeaders} />
+          </>
+        ) : (
+          <Button
+            onClick={handleClick}
+            icon={seeReason ? <IconViewOff24 /> : <IconView24 />}
+          >
+            {seeReason ? "Hide Reason of Absense" : "View Reason of Absense"}
+          </Button>
+        )}
+        <ConfigTableColumns
+          filteredHeaders={updatedCols}
+          headers={columns}
+          updateVariables={setTableHeaders}
+        />
       </div>
     </div>
   );