From c28b6d08f25386e8dea5fc805931c693679c9821 Mon Sep 17 00:00:00 2001 From: Ibrahim Date: Mon, 2 Sep 2024 11:19:07 +0000 Subject: [PATCH 1/2] fixing bugs on attendance bulk actions part --- .eslintrc.json | 16 +- package.json | 3 +- .../EnrollmentActionsButtons.tsx | 69 +++-- .../table/components/head/HeaderFilters.tsx | 90 ++++-- .../table/render/AttendanceEditMode.tsx | 273 +++++++++++------- src/components/table/render/RenderRows.tsx | 184 ++++++------ src/components/table/render/Table.tsx | 264 +++++++++-------- .../events/useCheckIfAttendanceElement.ts | 28 ++ src/hooks/tableData/useTableData.ts | 5 + src/schema/bulkActionsSchema.ts | 6 + src/types/table/TableContentTypes.ts | 5 +- src/types/table/TableRenderTypes.ts | 1 + yarn.lock | 188 +++++++++++- 13 files changed, 762 insertions(+), 370 deletions(-) create mode 100644 src/hooks/events/useCheckIfAttendanceElement.ts create mode 100644 src/schema/bulkActionsSchema.ts diff --git a/.eslintrc.json b/.eslintrc.json index a927a39..dc1d17f 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -3,20 +3,14 @@ "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", @@ -24,6 +18,8 @@ "@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" } } diff --git a/package.json b/package.json index 1927bab..a556d92 100644 --- a/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/components/table/components/enrollmentButtons/EnrollmentActionsButtons.tsx b/src/components/table/components/enrollmentButtons/EnrollmentActionsButtons.tsx index 6ca8b9b..e4e45b8 100644 --- a/src/components/table/components/enrollmentButtons/EnrollmentActionsButtons.tsx +++ b/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); - const [anchorViewLast, setAnchorViewLast] = useState(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 + ); + const [anchorViewLast, setAnchorViewLast] = useState( + null + ); + const [localAttendanceMode, setlocalAttendanceMode] = useState< + "edit" | "view" + >("view"); const closeAnchor = () => { setAnchorElAddNew(null); @@ -25,14 +34,32 @@ function EnrollmentActionsButtons() { return (
- - ) => { setAnchorElAddNew(event.currentTarget); setlocalAttendanceMode("edit") }}> + + + ) => { + setAnchorElAddNew(event.currentTarget); + setlocalAttendanceMode("edit"); + }} + > - - - ) => { setAnchorViewLast(event.currentTarget); setlocalAttendanceMode("view") }}> + + ) => { + setAnchorViewLast(event.currentTarget); + setlocalAttendanceMode("view"); + }} + > @@ -59,7 +86,7 @@ function EnrollmentActionsButtons() { setAttendanceMode={setAttendanceMode} />
- ) + ); } -export default EnrollmentActionsButtons +export default EnrollmentActionsButtons; diff --git a/src/components/table/components/head/HeaderFilters.tsx b/src/components/table/components/head/HeaderFilters.tsx index 9d5c80e..3448138 100644 --- a/src/components/table/components/head/HeaderFilters.tsx +++ b/src/components/table/components/head/HeaderFilters.tsx @@ -4,38 +4,94 @@ 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 (
- { - attendanceMode === 'edit' ? + {attendanceMode === "edit" ? ( + <> + setBulkActions("present")} + > + + + setBulkActions("late")} + > + + + setBulkActions("absent")} + > + + - Selected date: {selectedDate && format(selectedDate as unknown as Date, 'dd/MM/yyyy')} + Selected date:{" "} + {selectedDate && + format(selectedDate as unknown as Date, "dd/MM/yyyy")} - : - - } - + + ) : ( + + )} +
); diff --git a/src/components/table/render/AttendanceEditMode.tsx b/src/components/table/render/AttendanceEditMode.tsx index 2c8c777..45733cf 100644 --- a/src/components/table/render/AttendanceEditMode.tsx +++ b/src/components/table/render/AttendanceEditMode.tsx @@ -1,134 +1,183 @@ -import React, { useState, useEffect } from 'react' -import { format } from 'date-fns'; -import { useRecoilValue } from 'recoil'; -import { useCreateDataValues, useUpdateEvents } from '../../../hooks'; -import { VariablesTypes } from '../../../types/variables/AttributeColumns' -import MultipleButtons from '../components/reasonOfAbsence/multipleButtom/MultipleButtons'; -import { SelectedDateAddNewState } from '../../../schema/attendanceSchema'; -import { type AttendanceEditModeProps } from '../../../types/table/TableRenderTypes'; -import { type AttendanceOptionsProps } from '../../../types/variables/AttributeColumns'; -import { getSelectedKey } from '../../../utils/commons/dataStore/getSelectedKey'; -import { getDisplayName } from '../../../utils/table/rows/getDisplayNameByOption'; -import { useAttendanceConst } from '../../../utils/constants/attendance/attendanceConst'; -import { ProgramConfigState } from '../../../schema/programSchema'; +import React, { useState, useEffect } from "react"; +import { format } from "date-fns"; +import { useRecoilState, useRecoilValue } from "recoil"; +import { useCreateDataValues, useUpdateEvents } from "../../../hooks"; +import { VariablesTypes } from "../../../types/variables/AttributeColumns"; +import MultipleButtons from "../components/reasonOfAbsence/multipleButtom/MultipleButtons"; +import { SelectedDateAddNewState } from "../../../schema/attendanceSchema"; +import { type AttendanceEditModeProps } from "../../../types/table/TableRenderTypes"; +import { type AttendanceOptionsProps } from "../../../types/variables/AttributeColumns"; +import { getSelectedKey } from "../../../utils/commons/dataStore/getSelectedKey"; +import { getDisplayName } from "../../../utils/table/rows/getDisplayNameByOption"; +import { useAttendanceConst } from "../../../utils/constants/attendance/attendanceConst"; +import { ProgramConfigState } from "../../../schema/programSchema"; import { checkCanceled } from "../../../utils/table/rows/checkCanceled"; import { getIcon } from "../../../utils/table/attendance/getIcom"; -import ReasonOfAbsence from '../components/reasonOfAbsence/reasonOfAbsesnce'; +import ReasonOfAbsence from "../components/reasonOfAbsence/reasonOfAbsesnce"; +import { bulkActionsState } from "../../../schema/bulkActionsSchema"; +import useCheckIfAttendanceElement from "../../../hooks/events/useCheckIfAttendanceElement"; function AttendanceEditMode(props: AttendanceEditModeProps) { - const { - column, - value, - rowsData, - setTableData - } = props - const [selectedTerm, setselectedTerm] = useState("") - const { getDataStoreData } = getSelectedKey() - const attendanceId = getDataStoreData.attendance.status - const absentId = getDataStoreData.attendance.absenceReason - const dataStoreOptions = getDataStoreData.attendance.statusOptions - const { selectedDate } = useRecoilValue(SelectedDateAddNewState) - const { createValues } = useCreateDataValues() - const { updateValues } = useUpdateEvents() - const { attendanceConst } = useAttendanceConst() - const programConfigState = useRecoilValue(ProgramConfigState); + const { column, value, rowsData, setTableData, getAttendanceData } = props; + const [selectedTerm, setselectedTerm] = useState(""); + const { getDataStoreData } = getSelectedKey(); + const attendanceId = getDataStoreData.attendance.status; + const absentId = getDataStoreData.attendance.absenceReason; + const dataStoreOptions = getDataStoreData.attendance.statusOptions; + const { selectedDate } = useRecoilValue(SelectedDateAddNewState); + const { createValues } = useCreateDataValues(); + const { updateValues } = useUpdateEvents(); + const { attendanceConst } = useAttendanceConst(); + const programConfigState = useRecoilValue(ProgramConfigState); + const { isAttendanceDataElement } = useCheckIfAttendanceElement(); + + const [bulkActions, setBulkActions] = useRecoilState(bulkActionsState); - const date = format(new Date(selectedDate as unknown as Date), "yyyy-MM-dd") + const date = format(new Date(selectedDate as unknown as Date), "yyyy-MM-dd"); - function getValueBySelectedDate() { - const valueByDate = value?.[date] + function getValueBySelectedDate() { + const valueByDate = value?.[date]; - if (column.id === attendanceId) { - setselectedTerm(valueByDate?.status) - } else if (column.id === absentId) { - setselectedTerm(valueByDate?.absenceOption) - } + if (column.id === attendanceId) { + setselectedTerm(valueByDate?.status); + } else if (column.id === absentId) { + setselectedTerm(valueByDate?.absenceOption); } + } + + function onChangeAttendance(v: string, type: string) { + console.log("values: ", { + dataElementId: column.id, + dataElementValue: v, + rowsData, + setTableData, + teiDetails: value, + typeField: type, + setselectedTerm, + }); - function onChangeAttendance(v: string, type: string) { - // eslint-disable-next-line - if (value[date]?.eventId) { - void updateValues({ - dataElementId: column.id, - dataElementValue: v, - rowsData, - setTableData, - teiDetails: value, - typeField: type, - setselectedTerm - }) - } else { - void createValues({ - dataElementId: column.id, - dataElementValue: v, - rowsData, - setTableData, - teiDetails: value, - typeField: type, - setselectedTerm - }) - } + // return + if (value[date]?.eventId) { + void updateValues({ + dataElementId: column.id, + dataElementValue: v, + rowsData, + setTableData, + teiDetails: value, + typeField: type, + setselectedTerm, + }); + } else { + void createValues({ + dataElementId: column.id, + dataElementValue: v, + rowsData, + setTableData, + teiDetails: value, + typeField: type, + setselectedTerm, + }); } + } - useEffect(() => { - getValueBySelectedDate() - }, [value, selectedDate]) + const handleBulkAction = async () => { + if (await isAttendanceDataElement(column.id, bulkActions)) { + onChangeAttendance(bulkActions, VariablesTypes.Attendance); + setBulkActions(null); + getAttendanceData() + } + }; - return ( - <> - {column.type === VariablesTypes.Attendance - ? attendanceOptionIcons(props, selectedTerm, dataStoreOptions, onChangeAttendance, attendanceId, value?.status, value?.[date], attendanceConst) - : getDisplayName({ - metaData: column.id, - value: value[column.id], - program: programConfigState - }) - } - - ) -} + useEffect(() => { + if (bulkActions) { + // eslint-disable-next-line @typescript-eslint/no-floating-promises + handleBulkAction(); + } + }, [bulkActions]); -export default AttendanceEditMode + useEffect(() => { + getValueBySelectedDate(); + }, [value, selectedDate]); + + return ( + <> + {column.type === VariablesTypes.Attendance + ? attendanceOptionIcons( + props, + selectedTerm, + dataStoreOptions, + onChangeAttendance, + attendanceId, + value?.status, + value?.[date], + attendanceConst + ) + : getDisplayName({ + metaData: column.id, + value: value[column.id], + program: programConfigState, + })} + + ); +} -function attendanceOptionIcons(props: AttendanceEditModeProps, selectedTerm: string, dataStoreOptions: AttendanceOptionsProps[], - setselectedTerm: any, attendanceId: string, enrollmentStatus: string, value: any, attendanceConst: any) { +export default AttendanceEditMode; - return ( - props.column.id === attendanceId - ? - : value?.status === attendanceConst("absent") && - +function attendanceOptionIcons( + props: AttendanceEditModeProps, + selectedTerm: string, + dataStoreOptions: AttendanceOptionsProps[], + setselectedTerm: any, + attendanceId: string, + enrollmentStatus: string, + value: any, + attendanceConst: any +) { + return props.column.id === attendanceId ? ( + + ) : ( + value?.status === attendanceConst("absent") && ( + ) + ); } -function itemsAttendance(dataStoreOptions: AttendanceOptionsProps[], programOptions: AttendanceEditModeProps["column"], disabled: boolean) { - return dataStoreOptions?.map((option) => { - return { - code: option.code, - type: "attendance", - Component: getIcon(option, disabled) - } - }) as [] +function itemsAttendance( + dataStoreOptions: AttendanceOptionsProps[], + programOptions: AttendanceEditModeProps["column"], + disabled: boolean +) { + return dataStoreOptions?.map((option) => { + return { + code: option.code, + type: "attendance", + Component: getIcon(option, disabled), + }; + }) as []; } function itemsAbsence(options: AttendanceEditModeProps["column"]) { - return options.options?.optionSet.options.map((option) => { - return { - code: option.value, - type: "absence", - Component: option.label - } - }) as [] + return options.options?.optionSet.options.map((option) => { + return { + code: option.value, + type: "absence", + Component: option.label, + }; + }) as []; } diff --git a/src/components/table/render/RenderRows.tsx b/src/components/table/render/RenderRows.tsx index 019f23d..b3ac466 100644 --- a/src/components/table/render/RenderRows.tsx +++ b/src/components/table/render/RenderRows.tsx @@ -1,95 +1,109 @@ -import React from 'react' -import i18n from '@dhis2/d2-i18n'; -import classNames from 'classnames'; -import {RowCell, RowTable} from '../components'; -import AttendanceViewMode from './AttendanceViewMode'; -import AttendanceEditMode from './AttendanceEditMode'; -import {type RenderRowsProps} from '../../../types/table/TableContentTypes'; -import {makeStyles, type Theme, createStyles} from '@material-ui/core/styles'; -import {VariablesTypes} from '../../../types/variables/AttributeColumns'; -import {checkCanceled} from "../../../utils/table/rows/checkCanceled"; +import React from "react"; +import i18n from "@dhis2/d2-i18n"; +import classNames from "classnames"; +import { RowCell, RowTable } from "../components"; +import AttendanceViewMode from "./AttendanceViewMode"; +import AttendanceEditMode from "./AttendanceEditMode"; +import { type RenderRowsProps } from "../../../types/table/TableContentTypes"; +import { makeStyles, type Theme, createStyles } from "@material-ui/core/styles"; +import { VariablesTypes } from "../../../types/variables/AttributeColumns"; +import { checkCanceled } from "../../../utils/table/rows/checkCanceled"; const useStyles = makeStyles((theme: Theme) => - createStyles({ - row: {width: "100%"}, - dataRow: { - cursor: 'pointer', - '&:hover': { - backgroundColor: '#F1FBFF' - } - }, - cell: { - padding: `${theme.spacing(1) / 2}px ${theme.spacing(1) * 7}px ${theme.spacing(1) / - 2}px ${theme.spacing(1) * 3}px`, - '&:last-child': { - paddingRight: theme.spacing(1) * 3 - }, - borderBottomColor: "rgba(224, 224, 224, 1)" - }, - bodyCell: { - fontSize: theme.typography.pxToRem(13), - color: theme.palette.text.primary - }, - opacity: {opacity: 0.5} - }) + createStyles({ + row: { width: "100%" }, + dataRow: { + cursor: "pointer", + "&:hover": { + backgroundColor: "#F1FBFF", + }, + }, + cell: { + padding: `${theme.spacing(1) / 2}px ${theme.spacing(1) * 7}px ${ + theme.spacing(1) / 2 + }px ${theme.spacing(1) * 3}px`, + "&:last-child": { + paddingRight: theme.spacing(1) * 3, + }, + borderBottomColor: "rgba(224, 224, 224, 1)", + }, + bodyCell: { + fontSize: theme.typography.pxToRem(13), + color: theme.palette.text.primary, + }, + opacity: { opacity: 0.5 }, + }) ); function RenderRows(props: RenderRowsProps): React.ReactElement { - const { - headerData, - rowsData, - attendanceMode, - setTableData - } = props - const classes = useStyles() - - if (rowsData.length === 0) { - return ( - - x.visible)?.length} - > - {i18n.t('No data to display')} - - - ); - } + const { + headerData, + rowsData, + attendanceMode, + setTableData, + getAttendanceData, + } = props + const classes = useStyles(); + if (rowsData.length === 0) { return ( - - { - rowsData.map((row, index) => { - const cells = headerData?.filter(x => (x.visible && x.type !== VariablesTypes.DataElement))?.map(column => ( - - {attendanceMode === "view" - ? - : - } - - )); + + x.visible)?.length} + > + {i18n.t("No data to display")} + + + ); + } - return ( - - {cells} - - ); - }) - } - - ) + return ( + + {rowsData.map((row, index) => { + const cells = headerData + ?.filter((x) => x.visible && x.type !== VariablesTypes.DataElement) + ?.map((column) => ( + + {attendanceMode === "view" ? ( + + ) : ( + + )} + + )); + + return ( + + {cells} + + ); + })} + + ); } -export default RenderRows +export default RenderRows; diff --git a/src/components/table/render/Table.tsx b/src/components/table/render/Table.tsx index 5b946a0..a571685 100644 --- a/src/components/table/render/Table.tsx +++ b/src/components/table/render/Table.tsx @@ -1,134 +1,160 @@ -import React, { useEffect, useState } from 'react' -import RenderRows from './RenderRows' -import RenderHeader from './RenderHeader' -import { Paper } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import React, { useEffect, useState } from "react"; +import RenderRows from "./RenderRows"; +import RenderHeader from "./RenderHeader"; +import { Paper } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core/styles"; +import { useRecoilState, useRecoilValue } from "recoil"; import { CenteredContent, CircularLoader } from "@dhis2/ui"; -import { TeiRefetch } from '../../../schema/refecthTeiSchema'; -import { WithBorder, WithPadding } from '../../../components'; -import { HeaderFieldsState } from '../../../schema/headersSchema'; -import { SelectedDateAddNewState, SelectedDateState } from '../../../schema/attendanceSchema'; -import { HeaderFilters, Pagination, TableComponent, WorkingLists } from '../components' -import { useHeader, useTableData, useParams, useAttendanceMode } from '../../../hooks'; -import { format } from 'date-fns'; -import { generateAttendanceDays } from '../../../utils/table/header/generateAttendanceDays'; +import { TeiRefetch } from "../../../schema/refecthTeiSchema"; +import { WithBorder, WithPadding } from "../../../components"; +import { HeaderFieldsState } from "../../../schema/headersSchema"; +import { + SelectedDateAddNewState, + SelectedDateState, +} from "../../../schema/attendanceSchema"; +import { + HeaderFilters, + Pagination, + TableComponent, + WorkingLists, +} from "../components"; +import { + useHeader, + useTableData, + useParams, + useAttendanceMode, +} from "../../../hooks"; +import { format } from "date-fns"; +import { generateAttendanceDays } from "../../../utils/table/header/generateAttendanceDays"; const usetStyles = makeStyles({ - tableContainer: { - overflowX: 'auto' - }, - workingListsContainer: { - display: 'flex', - marginLeft: '0.5rem', - alignItems: 'center', - justifyContent: 'space-between' - }, - h4: { - margin: '0px', - fontSize: '22px', - fontWeigth: '500' - } + tableContainer: { + overflowX: "auto", + }, + workingListsContainer: { + display: "flex", + marginLeft: "0.5rem", + alignItems: "center", + justifyContent: "space-between", + }, + h4: { + margin: "0px", + fontSize: "22px", + fontWeigth: "500", + }, }); function Table() { - const classes = usetStyles() - const { columns } = useHeader() - const { getData, loading, tableData, getAttendanceData, setTableData } = useTableData() - const headerFieldsState = useRecoilValue(HeaderFieldsState) - const { selectedDate: selectedDateViewMode } = useRecoilValue(SelectedDateState) - const [selectedDateAddNew, setDateView] = useRecoilState(SelectedDateAddNewState) - const [page, setpage] = useState(1) - const [pageSize, setpageSize] = useState(10) - const [refetch] = useRecoilState(TeiRefetch) - const { attendanceMode } = useAttendanceMode() - const { urlParamiters } = useParams() - const { academicYear } = urlParamiters() - const { getValidDays } = generateAttendanceDays() - - useEffect(() => { - if (academicYear) { - void getData(page, pageSize) - } - }, [headerFieldsState, page, pageSize, refetch]) + const classes = usetStyles(); + const { columns } = useHeader(); + const { getData, loading, tableData, getAttendanceData, setTableData } = + useTableData(); + const headerFieldsState = useRecoilValue(HeaderFieldsState); + const { selectedDate: selectedDateViewMode } = + useRecoilValue(SelectedDateState); + const [selectedDateAddNew, setDateView] = useRecoilState( + SelectedDateAddNewState + ); + const [page, setpage] = useState(1); + const [pageSize, setpageSize] = useState(10); + const [refetch] = useRecoilState(TeiRefetch); + const { attendanceMode } = useAttendanceMode(); + const { urlParamiters } = useParams(); + const { academicYear } = urlParamiters(); + const { getValidDays } = generateAttendanceDays(); - useEffect(() => { - if (academicYear && selectedDateViewMode !== null) { - setDateView({ selectedDate: null }) - void getAttendanceData() - } - }, [selectedDateViewMode]) + // console.log("tableData: ", tableData); - useEffect(() => { - if (academicYear && selectedDateAddNew.selectedDate) { - let days = getValidDays(new Date(selectedDateViewMode ?? new Date)) - if (!days.find(x => x.date === format(new Date(selectedDateAddNew?.selectedDate as unknown as Date), "yyyy-MM-dd"))) - void getAttendanceData() - } - }, [selectedDateAddNew]) - - useEffect(() => { - setpage(1) - }, [headerFieldsState]) + useEffect(() => { + if (academicYear) { + void getData(page, pageSize); + } + }, [headerFieldsState, page, pageSize, refetch]); - const onPageChange = (newPage: number) => { - setpage(newPage) + useEffect(() => { + if (academicYear && selectedDateViewMode !== null) { + setDateView({ selectedDate: null }); + void getAttendanceData(); } + }, [selectedDateViewMode]); - const onRowsPerPageChange = (event: any) => { - setpageSize(parseInt(event.value, 10)) - setpage(1) + useEffect(() => { + if (academicYear && selectedDateAddNew.selectedDate) { + let days = getValidDays(new Date(selectedDateViewMode ?? new Date())); + if ( + !days.find( + (x) => + x.date === + format( + new Date(selectedDateAddNew?.selectedDate as unknown as Date), + "yyyy-MM-dd" + ) + ) + ) + void getAttendanceData(); } + }, [selectedDateAddNew]); + + useEffect(() => { + setpage(1); + }, [headerFieldsState]); + + const onPageChange = (newPage: number) => { + setpage(newPage); + }; + + const onRowsPerPageChange = (event: any) => { + setpageSize(parseInt(event.value, 10)); + setpage(1); + }; - return ( - -
-

Attendances

- -
- - - - -
- {loading ? - - - - : - - <> - { - }} - order='asc' - orderBy='desc' - rowsHeader={columns} - /> - - - - } -
- - - - - ) + return ( + +
+

Attendances

+ +
+ + + + +
+ {loading ? ( + + + + ) : ( + + <> + {}} + order="asc" + orderBy="desc" + rowsHeader={columns} + /> + + + + )} +
+ + + + + ); } -export default Table +export default Table; diff --git a/src/hooks/events/useCheckIfAttendanceElement.ts b/src/hooks/events/useCheckIfAttendanceElement.ts new file mode 100644 index 0000000..9a96805 --- /dev/null +++ b/src/hooks/events/useCheckIfAttendanceElement.ts @@ -0,0 +1,28 @@ +import { useDataQuery } from "@dhis2/app-runtime"; + +const dataElementQuery: any = { + dataElement: { + resource: "dataElements", + id: ({ dataElementID }: { dataElementID: string }) => dataElementID, + params: { + fields: "optionSet[options[code]]", + }, + }, +}; + +const useCheckIfAttendanceElement = () => { + const { refetch } = useDataQuery(dataElementQuery, { lazy: true }); + + const isAttendanceDataElement = async (dataElementID: string, code: string) => { + try { + const response: any = await refetch({ dataElementID }); + const options = response?.dataElement?.optionSet?.options || []; + return options.map((op: { code: string }) => op.code).includes(code); + } catch (err) { + return false; + } + }; + return { isAttendanceDataElement }; +}; + +export default useCheckIfAttendanceElement; diff --git a/src/hooks/tableData/useTableData.ts b/src/hooks/tableData/useTableData.ts index 5ab9771..8d6ae3d 100644 --- a/src/hooks/tableData/useTableData.ts +++ b/src/hooks/tableData/useTableData.ts @@ -69,6 +69,7 @@ export function useTableData() { setLoading(true) const events = await eventsResults(page, pageSize, school, headerFieldsState) + const attendanceValuesByTei: AttendanceQueryResults = { results: { instances: [] } } @@ -83,6 +84,10 @@ export function useTableData() { const attendanceResults: AttendanceQueryResults = await getEvents(selectedDateAddNew.selectedDate ?? selectedDate ?? new Date(), school, tei) attendanceValuesByTei.results.instances.push(...attendanceResults?.results?.instances) } + + console.log("attendanceValuesByTei : ", attendanceValuesByTei) + + // Get the list of trackedEntityIds attributes from the events const teiResults: TeiQueryResults = trackedEntityToFetch?.length > 0 ? await engine.query(TEI_QUERY({ diff --git a/src/schema/bulkActionsSchema.ts b/src/schema/bulkActionsSchema.ts new file mode 100644 index 0000000..c61cc30 --- /dev/null +++ b/src/schema/bulkActionsSchema.ts @@ -0,0 +1,6 @@ +import { atom } from "recoil" + +export const bulkActionsState = atom({ + key: "bulk-state", + default: null +}) diff --git a/src/types/table/TableContentTypes.ts b/src/types/table/TableContentTypes.ts index 06deaad..2c66827 100644 --- a/src/types/table/TableContentTypes.ts +++ b/src/types/table/TableContentTypes.ts @@ -33,10 +33,11 @@ interface RenderHeaderProps { } interface RenderRowsProps { - headerData: CustomAttributeProps[], - rowsData: any[], + headerData: CustomAttributeProps[] + rowsData: any[] attendanceMode: "view" | "edit" setTableData: any + getAttendanceData: any } interface TableSortProps { diff --git a/src/types/table/TableRenderTypes.ts b/src/types/table/TableRenderTypes.ts index c10636c..3e59dc8 100644 --- a/src/types/table/TableRenderTypes.ts +++ b/src/types/table/TableRenderTypes.ts @@ -14,6 +14,7 @@ interface AttendanceEditModeProps { } rowsData: any[] setTableData: any + getAttendanceData: any } interface AttendanceViewModeProps { diff --git a/yarn.lock b/yarn.lock index 3ab9594..17d7f70 100644 --- a/yarn.lock +++ b/yarn.lock @@ -36,6 +36,14 @@ dependencies: "@babel/highlight" "^7.22.5" +"@babel/code-frame@^7.24.7": + version "7.24.7" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465" + integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA== + dependencies: + "@babel/highlight" "^7.24.7" + picocolors "^1.0.0" + "@babel/compat-data@^7.22.5", "@babel/compat-data@^7.22.6": version "7.22.6" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.6.tgz#15606a20341de59ba02cd2fcc5086fcbe73bf544" @@ -81,6 +89,23 @@ "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" +"@babel/generator@^7.25.0": + version "7.25.0" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.0.tgz#f858ddfa984350bc3d3b7f125073c9af6988f18e" + integrity sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw== + dependencies: + "@babel/types" "^7.25.0" + "@jridgewell/gen-mapping" "^0.3.5" + "@jridgewell/trace-mapping" "^0.3.25" + jsesc "^2.5.1" + +"@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.24.7": + version "7.24.7" + resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz#5373c7bc8366b12a033b4be1ac13a206c6656aab" + integrity sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg== + dependencies: + "@babel/types" "^7.24.7" + "@babel/helper-annotate-as-pure@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882" @@ -121,6 +146,19 @@ "@babel/helper-split-export-declaration" "^7.22.6" "@nicolo-ribaudo/semver-v6" "^6.3.3" +"@babel/helper-create-class-features-plugin@^7.21.0": + version "7.25.0" + resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.0.tgz#a109bf9c3d58dfed83aaf42e85633c89f43a6253" + integrity sha512-GYM6BxeQsETc9mnct+nIIpf63SAyzvyYN7UB/IlTyd+MBg06afFGp0mIeUqGyWgS2mxad6vqbMrHVlaL3m70sQ== + dependencies: + "@babel/helper-annotate-as-pure" "^7.24.7" + "@babel/helper-member-expression-to-functions" "^7.24.8" + "@babel/helper-optimise-call-expression" "^7.24.7" + "@babel/helper-replace-supers" "^7.25.0" + "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7" + "@babel/traverse" "^7.25.0" + semver "^6.3.1" + "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.5": version "7.22.6" resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.6.tgz#87afd63012688ad792de430ceb3b6dc28e4e7a40" @@ -168,6 +206,14 @@ dependencies: "@babel/types" "^7.22.5" +"@babel/helper-member-expression-to-functions@^7.24.8": + version "7.24.8" + resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.8.tgz#6155e079c913357d24a4c20480db7c712a5c3fb6" + integrity sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA== + dependencies: + "@babel/traverse" "^7.24.8" + "@babel/types" "^7.24.8" + "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz#1a8f4c9f4027d23f520bd76b364d44434a72660c" @@ -196,6 +242,13 @@ dependencies: "@babel/types" "^7.22.5" +"@babel/helper-optimise-call-expression@^7.24.7": + version "7.24.7" + resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.7.tgz#8b0a0456c92f6b323d27cfd00d1d664e76692a0f" + integrity sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A== + dependencies: + "@babel/types" "^7.24.7" + "@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13", "@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.20.2", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295" @@ -223,6 +276,15 @@ "@babel/traverse" "^7.22.5" "@babel/types" "^7.22.5" +"@babel/helper-replace-supers@^7.25.0": + version "7.25.0" + resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.25.0.tgz#ff44deac1c9f619523fe2ca1fd650773792000a9" + integrity sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg== + dependencies: + "@babel/helper-member-expression-to-functions" "^7.24.8" + "@babel/helper-optimise-call-expression" "^7.24.7" + "@babel/traverse" "^7.25.0" + "@babel/helper-simple-access@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de" @@ -237,6 +299,14 @@ dependencies: "@babel/types" "^7.22.5" +"@babel/helper-skip-transparent-expression-wrappers@^7.24.7": + version "7.24.7" + resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz#5f8fa83b69ed5c27adc56044f8be2b3ea96669d9" + integrity sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ== + dependencies: + "@babel/traverse" "^7.24.7" + "@babel/types" "^7.24.7" + "@babel/helper-split-export-declaration@^7.22.5", "@babel/helper-split-export-declaration@^7.22.6": version "7.22.6" resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c" @@ -249,11 +319,21 @@ resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f" integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw== +"@babel/helper-string-parser@^7.24.8": + version "7.24.8" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d" + integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ== + "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz#9544ef6a33999343c8740fa51350f30eeaaaf193" integrity sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ== +"@babel/helper-validator-identifier@^7.24.7": + version "7.24.7" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db" + integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w== + "@babel/helper-validator-option@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz#de52000a15a177413c8234fa3a8af4ee8102d0ac" @@ -287,11 +367,28 @@ chalk "^2.0.0" js-tokens "^4.0.0" +"@babel/highlight@^7.24.7": + version "7.24.7" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d" + integrity sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw== + dependencies: + "@babel/helper-validator-identifier" "^7.24.7" + chalk "^2.4.2" + js-tokens "^4.0.0" + picocolors "^1.0.0" + "@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.22.5", "@babel/parser@^7.22.7": version "7.22.7" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.7.tgz#df8cf085ce92ddbdbf668a7f186ce848c9036cae" integrity sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q== +"@babel/parser@^7.25.0", "@babel/parser@^7.25.3": + version "7.25.3" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065" + integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw== + dependencies: + "@babel/types" "^7.25.2" + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.5": version "7.22.5" resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz#87245a21cd69a73b0b81bcda98d443d6df08f05e" @@ -365,6 +462,16 @@ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703" integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w== +"@babel/plugin-proposal-private-property-in-object@^7.21.11": + version "7.21.11" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz#69d597086b6760c4126525cfa154f34631ff272c" + integrity sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw== + dependencies: + "@babel/helper-annotate-as-pure" "^7.18.6" + "@babel/helper-create-class-features-plugin" "^7.21.0" + "@babel/helper-plugin-utils" "^7.20.2" + "@babel/plugin-syntax-private-property-in-object" "^7.14.5" + "@babel/plugin-proposal-unicode-property-regex@^7.4.4": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz#af613d2cd5e643643b65cded64207b15c85cb78e" @@ -1148,6 +1255,15 @@ "@babel/parser" "^7.22.5" "@babel/types" "^7.22.5" +"@babel/template@^7.25.0": + version "7.25.0" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a" + integrity sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q== + dependencies: + "@babel/code-frame" "^7.24.7" + "@babel/parser" "^7.25.0" + "@babel/types" "^7.25.0" + "@babel/traverse@^7.22.5", "@babel/traverse@^7.22.6", "@babel/traverse@^7.22.7", "@babel/traverse@^7.7.2": version "7.22.7" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.22.7.tgz#68a5513f3c6b88c7b5f5825d0720fb43e8a31826" @@ -1164,6 +1280,19 @@ debug "^4.1.0" globals "^11.1.0" +"@babel/traverse@^7.24.7", "@babel/traverse@^7.24.8", "@babel/traverse@^7.25.0": + version "7.25.3" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.3.tgz#f1b901951c83eda2f3e29450ce92743783373490" + integrity sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ== + dependencies: + "@babel/code-frame" "^7.24.7" + "@babel/generator" "^7.25.0" + "@babel/parser" "^7.25.3" + "@babel/template" "^7.25.0" + "@babel/types" "^7.25.2" + debug "^4.3.1" + globals "^11.1.0" + "@babel/types@7.15.0": version "7.15.0" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd" @@ -1181,6 +1310,15 @@ "@babel/helper-validator-identifier" "^7.22.5" to-fast-properties "^2.0.0" +"@babel/types@^7.24.7", "@babel/types@^7.24.8", "@babel/types@^7.25.0", "@babel/types@^7.25.2": + version "7.25.2" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125" + integrity sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q== + dependencies: + "@babel/helper-string-parser" "^7.24.8" + "@babel/helper-validator-identifier" "^7.24.7" + to-fast-properties "^2.0.0" + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -2551,16 +2689,35 @@ "@jridgewell/sourcemap-codec" "^1.4.10" "@jridgewell/trace-mapping" "^0.3.9" +"@jridgewell/gen-mapping@^0.3.5": + version "0.3.5" + resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36" + integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg== + dependencies: + "@jridgewell/set-array" "^1.2.1" + "@jridgewell/sourcemap-codec" "^1.4.10" + "@jridgewell/trace-mapping" "^0.3.24" + "@jridgewell/resolve-uri@3.1.0": version "3.1.0" resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78" integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w== +"@jridgewell/resolve-uri@^3.1.0": + version "3.1.2" + resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6" + integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw== + "@jridgewell/set-array@^1.0.1": version "1.1.2" resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72" integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw== +"@jridgewell/set-array@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280" + integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A== + "@jridgewell/source-map@^0.3.3": version "0.3.5" resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.5.tgz#a3bb4d5c6825aab0d281268f47f6ad5853431e91" @@ -2579,6 +2736,11 @@ resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32" integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg== +"@jridgewell/sourcemap-codec@^1.4.14": + version "1.5.0" + resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a" + integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ== + "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9": version "0.3.18" resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz#25783b2086daf6ff1dcb53c9249ae480e4dd4cd6" @@ -2587,6 +2749,14 @@ "@jridgewell/resolve-uri" "3.1.0" "@jridgewell/sourcemap-codec" "1.4.14" +"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25": + version "0.3.25" + resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0" + integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ== + dependencies: + "@jridgewell/resolve-uri" "^3.1.0" + "@jridgewell/sourcemap-codec" "^1.4.14" + "@js-temporal/polyfill@^0.4.2": version "0.4.4" resolved "https://registry.yarnpkg.com/@js-temporal/polyfill/-/polyfill-0.4.4.tgz#4c26b4a1a68c19155808363f520204712cfc2558" @@ -4653,9 +4823,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001503: - version "1.0.30001512" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001512.tgz#7450843fb581c39f290305a83523c7a9ef0d4cb4" - integrity sha512-2S9nK0G/mE+jasCUsMPlARhRCts1ebcp2Ji8Y8PWi4NDE1iRdLCnEPHkEfeBrGC45L4isBx5ur3IQ6yTE2mRZw== + version "1.0.30001651" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz" + integrity sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg== case-sensitive-paths-webpack-plugin@^2.4.0: version "2.4.0" @@ -5402,6 +5572,13 @@ debug@^3.2.7: dependencies: ms "^2.1.1" +debug@^4.3.1: + version "4.3.6" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.6.tgz#2ab2c38fbaffebf8aa95fdfe6d88438c7a13c52b" + integrity sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg== + dependencies: + ms "2.1.2" + decamelize@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290" @@ -11101,6 +11278,11 @@ semver@^6.0.0, semver@^6.2.0, semver@^6.3.0: resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== +semver@^6.3.1: + version "6.3.1" + resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" + integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== + semver@^7.0.0, semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3: version "7.5.3" resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.3.tgz#161ce8c2c6b4b3bdca6caadc9fa3317a4c4fe88e" From 790a4678d53d43082536a355bdc0bd50a1444ac0 Mon Sep 17 00:00:00 2001 From: Ibrahim Date: Tue, 3 Sep 2024 15:17:21 +0000 Subject: [PATCH 2/2] Update: Adding popover when hover bulk icons. Hide Late bulk icon --- .../table/components/head/HeaderFilters.tsx | 23 +++++++++++-------- .../table/render/AttendanceEditMode.tsx | 13 +---------- 2 files changed, 15 insertions(+), 21 deletions(-) diff --git a/src/components/table/components/head/HeaderFilters.tsx b/src/components/table/components/head/HeaderFilters.tsx index 3448138..d1f5fd3 100644 --- a/src/components/table/components/head/HeaderFilters.tsx +++ b/src/components/table/components/head/HeaderFilters.tsx @@ -1,5 +1,5 @@ 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"; @@ -8,7 +8,6 @@ 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 { @@ -27,8 +26,8 @@ function HeaderFilters({ bulkAction }: any) { 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); @@ -45,23 +44,26 @@ function HeaderFilters({ bulkAction }: any) { border: "1px solid #ccc", cursor: "pointer", }} - onClick={() => setBulkActions("present")} + title="Mark all as Present" + onClick={() => { + setBulkActions("present"); + }} > - setBulkActions("late")} + onClick={() => { setBulkActions("late"); }} > - + */} setBulkActions("absent")} + title="Mark all as Absent" + onClick={() => { + setBulkActions("absent"); + }} > diff --git a/src/components/table/render/AttendanceEditMode.tsx b/src/components/table/render/AttendanceEditMode.tsx index 45733cf..61a00a8 100644 --- a/src/components/table/render/AttendanceEditMode.tsx +++ b/src/components/table/render/AttendanceEditMode.tsx @@ -46,17 +46,6 @@ function AttendanceEditMode(props: AttendanceEditModeProps) { } function onChangeAttendance(v: string, type: string) { - console.log("values: ", { - dataElementId: column.id, - dataElementValue: v, - rowsData, - setTableData, - teiDetails: value, - typeField: type, - setselectedTerm, - }); - - // return if (value[date]?.eventId) { void updateValues({ dataElementId: column.id, @@ -84,7 +73,7 @@ function AttendanceEditMode(props: AttendanceEditModeProps) { if (await isAttendanceDataElement(column.id, bulkActions)) { onChangeAttendance(bulkActions, VariablesTypes.Attendance); setBulkActions(null); - getAttendanceData() + getAttendanceData(); } };