Merge pull request #149 from shreyas1434shinde/calenderView

Issue #PS-394 fix:modal UI fixes
tekdi · May 23, 2024 · 8221300 · 8221300
2 parents e4aa2f3 + 9d9dddd
commit 8221300
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 121 deletions.
diff --git a/src/components/AttendanceStatusListView.tsx b/src/components/AttendanceStatusListView.tsx
@@ -26,7 +26,7 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
     height: isBulkAction ? '56px' : '',
     // width: '100%',
     // borderBottom: `0.5px solid ${theme.palette.warning[400]}`,
-    padding: '8px',
+    padding: isBulkAction ? '0 8px' : '0 8px',
     alignItems: 'center',
     borderRadius: isBulkAction ? '8px' : 0,
     // marginBottom: '12px',
@@ -64,7 +64,7 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
           flexDirection="column"
           alignItems="center"
           className="icon_holder"
-          p={2}
+          p={1}
           onClick={() =>
             handleClickAction(
               isBulkAction,
@@ -94,7 +94,8 @@ const AttendanceStatusListView: React.FC<AttendanceStatusListViewProps> = ({
           display="flex"
           flexDirection="column"
           alignItems="center"
-          p={2}
+          className="icon_holder"
+          p={1}
           onClick={() =>
             handleClickAction(
               isBulkAction,

diff --git a/src/components/MarkBulkAttendance.tsx b/src/components/MarkBulkAttendance.tsx
@@ -347,7 +347,7 @@ const MarkBulkAttendace: React.FC<MarkBulkAttendanceProps> = ({
               </Typography>
               {cohortMemberList && cohortMemberList?.length != 0 ? (
                 <Box
-                  height={'100%'}
+                  height={'54vh'}
                   sx={{
                     overflowY: 'scroll',
                     marginTop: '10px',

diff --git a/src/components/SortingModal.tsx b/src/components/SortingModal.tsx
@@ -1,46 +1,52 @@
 import * as React from 'react';
-import Divider from '@mui/material/Divider';
-
 
 import {
   FormControl,
   FormControlLabel,
   FormLabel,
   Grid,
   Radio,
-  RadioGroup
+  RadioGroup,
 } from '@mui/material';
+
+import Divider from '@mui/material/Divider';
 import ModalComponent from './Modal';
-import { useTranslation } from 'react-i18next';
 import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
 
 interface sortCardProps {
-  handleSorting: (sortByName: string, sortByAttendance: string, sortByClassesMissed: string, sortByAttendanceNumber: string) => void;
+  handleSorting: (
+    sortByName: string,
+    sortByAttendance: string,
+    sortByClassesMissed: string,
+    sortByAttendanceNumber: string
+  ) => void;
   handleCloseModal: () => void;
   isModalOpen: boolean;
-  routeName: string
+  routeName: string;
 }
 
 const SortingModal: React.FC<sortCardProps> = ({
   handleSorting,
   isModalOpen,
   handleCloseModal,
-  routeName
+  routeName,
 }) => {
   const [sortByName, setSortByName] = React.useState('asc');
   const [sortByAttendance, setSortByAttendance] = React.useState('');
   const [sortByClassesMissed, setSortByClassesMissed] = React.useState('');
-  const [sortByAttendanceNumber, setSortByAttendanceNumber] = React.useState('');
+  const [sortByAttendanceNumber, setSortByAttendanceNumber] =
+    React.useState('');
   const { t } = useTranslation();
   const theme = useTheme<any>();
 
   // handle changes names from sorting
   const handleSortByName = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSortByAttendance('');
-    setSortByClassesMissed('')
-    setSortByAttendanceNumber('')
+    setSortByClassesMissed('');
+    setSortByAttendanceNumber('');
     // if (event.target.value === 'asc' || event.target.value === 'desc') {
-      setSortByName(event.target.value);
+    setSortByName(event.target.value);
     // }
     //  else {
     //   setSortByAttendance(event.target.value);
@@ -52,8 +58,8 @@ const SortingModal: React.FC<sortCardProps> = ({
   ) => {
     setSortByAttendance(event.target.value);
     setSortByName('');
-    setSortByClassesMissed('')
-    setSortByAttendanceNumber('')
+    setSortByClassesMissed('');
+    setSortByAttendanceNumber('');
   };
 
   const handleSortByAttendanceNumber = (
@@ -62,21 +68,25 @@ const SortingModal: React.FC<sortCardProps> = ({
     setSortByAttendanceNumber(event.target.value);
     setSortByAttendance('');
     setSortByName('');
-    setSortByClassesMissed('')
+    setSortByClassesMissed('');
   };
-  
+
   const handleSortByClassesMissed = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
     setSortByClassesMissed(event.target.value);
     setSortByAttendance('');
     setSortByName('');
-    setSortByAttendanceNumber('')
+    setSortByAttendanceNumber('');
   };
-
 
   const handleApplySort = () => {
-    handleSorting(sortByName, sortByAttendance, sortByClassesMissed, sortByAttendanceNumber);
+    handleSorting(
+      sortByName,
+      sortByAttendance,
+      sortByClassesMissed,
+      sortByAttendanceNumber
+    );
     handleCloseModal();
   };
 
@@ -96,102 +106,102 @@ const SortingModal: React.FC<sortCardProps> = ({
         }}
       />
       <Grid container spacing={2}>
-
-      {routeName== "/attendance-overview" ? 
-     <>
-      <Grid item xs={12}>
-          <FormControl component="fieldset">
-            <FormLabel
-              style={{ color: theme.palette.warning['400'] }}
-              component="legend"
-            >
-              {t('COMMON.ATTENDANCE')}
-            </FormLabel>
-            <RadioGroup
-              aria-label="sortByAttendanceNumber"
-              name="sortByAttendanceNumber"
-              value={sortByAttendanceNumber}
-              onChange={handleSortByAttendanceNumber}
-            >
-              <FormControlLabel
-                labelPlacement="start"
-                value="high"
-                control={<Radio sx={{ ml: '80px' }} />}
-                label={t('COMMON.HIGH_TO_LOW')}
-              />
-              <FormControlLabel
-                labelPlacement="start"
-                value="low"
-                control={<Radio sx={{ ml: '80px' }} />}
-                label={t('COMMON.LOW_TO_HIGH')}
-              />
-            </RadioGroup>
-          </FormControl>
-        </Grid>
-
-        <Grid item xs={12}>
-          <FormControl component="fieldset">
-            <FormLabel
-              style={{ color: theme.palette.warning['400'] }}
-              component="legend"
-            >
-              {t('COMMON.CLASS_MISSED')}
-            </FormLabel>
-            <RadioGroup
-              aria-label="sortByClassesMissed"
-              name="sortByClassesMissed"
-              value={sortByClassesMissed}
-              onChange={handleSortByClassesMissed}
-            >
-              <FormControlLabel
-                labelPlacement="start"
-                value="high"
-                control={<Radio sx={{ ml: '80px' }} />}
-                label={t('COMMON.HIGH_TO_LOW')}
-              />
-              <FormControlLabel
-                labelPlacement="start"
-                value="low"
-                control={<Radio sx={{ ml: '80px' }} />}
-                label={t('COMMON.LOW_TO_HIGH')}
-              />
-            </RadioGroup>
-          </FormControl>
-        </Grid> </>:
-
-
-      <Grid item xs={12}>
-          <FormControl component="fieldset">
-            <FormLabel
-              style={{ color: theme.palette.warning['400'] }}
-              component="legend"
-            >
-              {t('COMMON.ATTENDANCE')}
-            </FormLabel>
-            <RadioGroup
-              aria-label="sortByAttendance"
-              name="sortByAttendance"
-              value={sortByAttendance}
-              onChange={handleSortByAttendance}
-            >
-              <FormControlLabel
-                labelPlacement="start"
-                value="pre"
-                control={<Radio sx={{ ml: '80px' }} />}
-                label={t('ATTENDANCE.PRESENT')}
-              />
-              <FormControlLabel
-                labelPlacement="start"
-                value="abs"
-                control={<Radio sx={{ ml: '80px' }} />}
-                label={t('ATTENDANCE.ABSENT')}
-              />
-            </RadioGroup>
-          </FormControl>
-        </Grid>
-         }
+        {routeName == '/attendance-overview' ? (
+          <>
+            <Grid item xs={12}>
+              <FormControl component="fieldset">
+                <FormLabel
+                  style={{ color: theme.palette.warning['400'] }}
+                  component="legend"
+                >
+                  {t('COMMON.ATTENDANCE')}
+                </FormLabel>
+                <RadioGroup
+                  aria-label="sortByAttendanceNumber"
+                  name="sortByAttendanceNumber"
+                  value={sortByAttendanceNumber}
+                  onChange={handleSortByAttendanceNumber}
+                >
+                  <FormControlLabel
+                    labelPlacement="start"
+                    value="high"
+                    control={<Radio sx={{ ml: '80px' }} />}
+                    label={t('COMMON.HIGH_TO_LOW')}
+                  />
+                  <FormControlLabel
+                    labelPlacement="start"
+                    value="low"
+                    control={<Radio sx={{ ml: '80px' }} />}
+                    label={t('COMMON.LOW_TO_HIGH')}
+                  />
+                </RadioGroup>
+              </FormControl>
+            </Grid>
+            <Grid item xs={12}>
+              <FormControl component="fieldset">
+                <FormLabel
+                  style={{ color: theme.palette.warning['400'] }}
+                  component="legend"
+                >
+                  {t('COMMON.CLASS_MISSED')}
+                </FormLabel>
+                <RadioGroup
+                  aria-label="sortByClassesMissed"
+                  name="sortByClassesMissed"
+                  value={sortByClassesMissed}
+                  onChange={handleSortByClassesMissed}
+                >
+                  <FormControlLabel
+                    labelPlacement="start"
+                    value="high"
+                    control={<Radio />}
+                    label={t('COMMON.HIGH_TO_LOW')}
+                  />
+                  <FormControlLabel
+                    labelPlacement="start"
+                    value="low"
+                    control={<Radio />}
+                    label={t('COMMON.LOW_TO_HIGH')}
+                  />
+                </RadioGroup>
+              </FormControl>
+            </Grid>{' '}
+          </>
+        ) : (
+          <Grid item xs={12}>
+            <FormControl component="fieldset" style={{ width: '100%' }}>
+              <FormLabel
+                style={{ color: theme.palette.warning['400'] }}
+                component="legend"
+              >
+                {t('COMMON.ATTENDANCE')}
+              </FormLabel>
+              <RadioGroup
+                aria-label="sortByAttendance"
+                name="sortByAttendance"
+                value={sortByAttendance}
+                onChange={handleSortByAttendance}
+              >
+                <FormControlLabel
+                  labelPlacement="start"
+                  sx={{ justifyContent: 'space-between' }}
+                  value="pre"
+                  control={<Radio sx={{ ml: '80px' }} />}
+                  label={t('ATTENDANCE.PRESENT')}
+                />
+                <FormControlLabel
+                  labelPlacement="start"
+                  sx={{ justifyContent: 'space-between' }}
+                  value="abs"
+                  control={<Radio sx={{ ml: '80px' }} />}
+                  label={t('ATTENDANCE.ABSENT')}
+                />
+              </RadioGroup>
+            </FormControl>
+          </Grid>
+        )}
         <Grid item xs={12}>
-          <FormControl component="fieldset">
+          <FormControl component="fieldset" style={{ width: '100%' }}>
             <FormLabel
               style={{ color: theme.palette.warning['400'] }}
               component="legend"
@@ -210,15 +220,17 @@ const SortingModal: React.FC<sortCardProps> = ({
             >
               <FormControlLabel
                 labelPlacement="start"
+                sx={{ justifyContent: 'space-between' }}
                 value="asc"
-                control={<Radio sx={{ ml: '80px' }} />}
+                control={<Radio />}
                 label={t('COMMON.A_TO_Z')}
               />
 
               <FormControlLabel
                 labelPlacement="start"
+                sx={{ justifyContent: 'space-between' }}
                 value="desc"
-                control={<Radio sx={{ ml: '80px' }} />}
+                control={<Radio />}
                 label={t('COMMON.Z_TO_A')}
               />
             </RadioGroup>

diff --git a/src/pages/dashboard.tsx b/src/pages/dashboard.tsx
@@ -189,7 +189,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
                   filters: {
                     fromDate: selectedDate || currentDate,
                     toDate: selectedDate || currentDate,
-                    contextId: classId
+                    contextId: classId,
                   },
                 };
                 const res = await attendanceStatusList(attendanceStatusData);
@@ -725,7 +725,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
                         </Typography>
                         {cohortMemberList && cohortMemberList?.length != 0 ? (
                           <Box
-                            height={'100%'}
+                            height={'54vh'}
                             sx={{ overflowY: 'scroll', marginTop: '10px' }}
                           >
                             <Box>