Merge pull request #369 from AkshataKatwal16/reassign-cohorts

Issue feat: update observation UI
tekdi · Nov 7, 2024 · 0ac30df · 0ac30df
2 parents 108baf8 + 38c756e
commit 0ac30df
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 9 deletions.
diff --git a/src/components/AddFacilitator.tsx b/src/components/AddFacilitator.tsx
@@ -305,7 +305,7 @@ const AddFacilitatorModal: React.FC<AddFacilitatorModalprops> = ({
                 id: 'facilitator-updated-success',
                 type: Telemetry.CLICK,
                 subtype: '',
-                pageid: 'cleanedUrl',
+                pageid: cleanedUrl
               },
             };
             telemetryFactory.interact(telemetryInteract);

diff --git a/src/components/MenuDrawer.tsx b/src/components/MenuDrawer.tsx
@@ -26,6 +26,8 @@ import { useDirection } from '../hooks/useDirection';
 import { isEliminatedFromBuild } from '../../featureEliminationUtil';
 import { getAcademicYear } from '../services/AcademicYearService';
 import { AcademicYear } from '@/utils/Interfaces';
+import { telemetryFactory } from '@/utils/telemetry';
+import { Telemetry } from '@/utils/app.constant';
 
 interface DrawerProps {
   toggleDrawer?: (open: boolean) => () => void;
@@ -454,6 +456,24 @@ const MenuDrawer: React.FC<DrawerProps> = ({
                 closeDrawer();
                 router.push(`/`);
               }, 0);
+
+              const windowUrl = window.location.pathname;
+            const cleanedUrl = windowUrl.replace(/^\//, '');
+
+
+            const telemetryInteract = {
+              context: {
+               // env: '',
+                cdata: [],
+              },
+              edata: {
+                id: 'click-on-learn-how-to-use',
+                type: Telemetry.CLICK,
+                subtype: '',
+                pageid: cleanedUrl
+              },
+            };
+            telemetryFactory.interact(telemetryInteract)
             }}
           >
             {t('GUIDE_TOUR.LEARN_HOW_TO_USE')}

diff --git a/src/pages/assessments/index.tsx b/src/pages/assessments/index.tsx
@@ -13,7 +13,7 @@ import {
 import { getMyCohortMemberList } from '@/services/MyClassDetailsService';
 import { toPascalCase } from '@/utils/Helper';
 import { ICohort } from '@/utils/Interfaces';
-import { AssessmentStatus, Role, Status } from '@/utils/app.constant';
+import { AssessmentStatus, Role, Status, Telemetry } from '@/utils/app.constant';
 import withAccessControl from '@/utils/hoc/withAccessControl';
 import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp';
 import {
@@ -34,6 +34,7 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { accessControl, AssessmentType, AttendanceAPILimit, Program } from '../../../app.config';
 import { useDirection } from '../../hooks/useDirection';
+import { telemetryFactory } from '@/utils/telemetry';
 
 const DEFAULT_STATUS_ORDER = {
   [AssessmentStatus.NOT_STARTED]: 0,
@@ -399,7 +400,27 @@ const Assessments = () => {
                 style={{
                   borderRadius: '4px',
                 }}
-                onChange={(e) => setAssessmentType(e.target.value)}
+                onChange={(e) => 
+                  {setAssessmentType(e.target.value)
+                    const windowUrl = window.location.pathname;
+                    const cleanedUrl = windowUrl.replace(/^\//, '');
+
+
+                    const telemetryInteract = {
+                      context: {
+                        env: 'assessments',
+                        cdata: [],
+                      },
+                      edata: {
+                        id: 'filter-by-assessment-type:'+e.target.value,
+                        type: Telemetry.CLICK,
+                        subtype: '',
+                        pageid: cleanedUrl
+                      },
+                    };
+                    telemetryFactory.interact(telemetryInteract);
+
+                  }}
                 defaultValue={'pre'}
                 value={assessmentType}
               >

diff --git a/src/pages/observation/index.tsx b/src/pages/observation/index.tsx
@@ -3,7 +3,7 @@ import Header from '@/components/Header';
 import ObservationCard from '@/components/ObservationCard';
 import React, { useEffect, useState } from 'react';
 import { targetSolution } from '@/services/ObservationServices';
-import { Box, Tab, Tabs, Typography } from '@mui/material';
+import { Box, Tab, Tabs, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useRouter } from 'next/router';
 import { FormContext, FormContextType, Role, Status, Telemetry } from '@/utils/app.constant';
@@ -20,16 +20,20 @@ const ObservationForms: React.FC = () => {
   const [observationData, setObservationData] = useState<any>([]);
   const [filteredObservationData, setFilteredObservationData] = useState<any>([]);
   const router = useRouter();
+  const theme = useTheme();
+
   const { t } = useTranslation();
   const [selectedOption, setSelectedOption] = useState('all');  
-  const [sortOrder, setSortOrder] = useState('lowToHigh');
+  const [sortOrder, setSortOrder] = useState('');
   const currentDate = new Date();
   const menuItems = [
     { value: 'all', label: t('COMMON.ALL') },
     { value: 'center', label: t('CENTERS.CENTERS') },
     { value: 'facilitator', label: t('COMMON.FACILITATORS') },
     { value: 'learner', label: t('COMMON.LEARNERS') }
   ];
+  const isSmallScreen = useMediaQuery('(max-width:938px)');
+
   useEffect(() => {
     const fetchEntityList = async () => {
       try {
@@ -218,15 +222,23 @@ const ObservationForms: React.FC = () => {
 
 
     <Box
-    flexDirection={'row'}
-    display={'flex'}
-    mr="20px">
+    // flexDirection={'row'}
+    // display={'flex'}
+    // mr="20px"
+    flexDirection={isSmallScreen ? 'column' : 'row'}
+      display={'flex'}
+      alignItems={isSmallScreen ? 'flex-start' : 'center'}
+      mr={isSmallScreen ? 0 : '20px'}
+      gap={isSmallScreen ? '10px' : '20px'}
+
+    >
     <SearchBar
         onSearch={handleSearch}
         value={searchInput}
         placeholder={t('OBSERVATION.SEARCH_OBSERVATIONS')}
+        fullWidth
       />
-       {value===0 &&(<FormControl sx={{ minWidth: 200 , backgroundColor:"#F0F0F0"}} variant="outlined" margin="normal">
+       {value===0 &&(<FormControl sx={{ minWidth: 200 , marginLeft:"20px",backgroundColor:"#F0F0F0"}} variant="outlined" margin="normal">
         <InputLabel id="days-sort-label">{t('OBSERVATION.DAYS_LEFT')}</InputLabel>
         <Select
           labelId="days-sort-label"