Merge pull request #408 from AkshataKatwal16/reassign-cohorts

Issue feat:Add loader on observation page
tekdi · Nov 23, 2024 · 7fd89ee · 7fd89ee
2 parents c30c6af + 9df93f5
commit 7fd89ee
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 31 deletions.
diff --git a/src/pages/observation/[observationId]/index.tsx b/src/pages/observation/[observationId]/index.tsx
@@ -43,6 +43,8 @@ import Entity from '@/components/observations/Entity';
 import SearchBar from '@/components/Searchbar';
 import { telemetryFactory } from '@/utils/telemetry';
 import centers from '@/pages/centers';
+import Loader from '@/components/Loader';
+
 interface EntityData {
   cohortId?: string;
   name?: string;
@@ -67,6 +69,7 @@ const ObservationDetails = () => {
   const [fetchEntityResponse, setFetchEntityResponse] = useState<any[]>([]);
   const [entityData, setEntityData] = useState<any[]>([]);
   const [filteredEntityData, setFilteredEntityData] = useState<any[]>([]);
+  const [loading, setLoading] = React.useState(false);
 
 
 
@@ -303,6 +306,7 @@ setFilteredEntityData(result)
   useEffect(() => {
     const handleCohortChange = async () => {
       try {
+        setLoading(true)
         console.log('handlecohortChange');
         let filters = {
           cohortId: selectedCohort,
@@ -351,6 +355,8 @@ setFilteredEntityData(result)
 
         console.error('Error fetching cohort list:', error);
       } finally {
+        setLoading(false)
+
       }
     };
     if(selectedCohort && selectedCohort!=='')
@@ -421,35 +427,6 @@ setFilteredEntityData(result)
     });
   };
 
-  // const renderEntityData = (data: EntityData[], entityType: string) =>
-  //   data?.map((item, index) => (
-  //     // <Box
-  //     //   key={item.cohortId}
-  //     //   sx={{
-  //     //     margin: '10px',
-  //     //     background: 'white',
-  //     //     display: 'flex',
-  //     //     alignItems: 'center',
-  //     //   }}
-  //     // >
-  //     //   <Typography margin="10px">{toPascalCase(item?.name) }</Typography>
-  //     //   <Button
-  //     //     sx={{ width: '160px', height: '40px', marginLeft: 'auto' }}
-  //     //     onClick={() => entityType!==ObservationEntityType.CENTER?onStartObservation(item?.userId):onStartObservation(item?.cohortId)}
-  //     //   >
-
-  //     //    {index === 0 && firstEntityStatus==="draft"
-  //     //   ? t('OBSERVATION_SURVEYS.CONTINUE') 
-  //     //   : (index === 0 && firstEntityStatus==="submit")?t('OBSERVATION_SURVEYS.SUBMITTED'):t('OBSERVATION_SURVEYS.OBSERVATION_START')}
-  //     //   </Button>
-  //     // </Box>
-  //     <Entity
-  //     entityMemberValue={toPascalCase(item?.name)}
-  //     status={index === 0?firstEntityStatus:"notstarted"}
-  //     onClick={() => entityType!==ObservationEntityType.CENTER?onStartObservation(item?.userId):onStartObservation(item?.cohortId)}
-  //     />
-  //   ));
-
 
   const renderEntityData = (data: EntityData[], entityType: string) => {
     if (!data || data.length === 0) {
@@ -685,7 +662,26 @@ setFilteredEntityData(result)
 
               </Box>
 
-              <Box sx={{ marginTop: '20px' , display: 'flex', flexWrap: 'wrap', flexDirection: 'row', gap:"20px"}}>{entityContent}</Box>
+              <Box
+  sx={{
+    marginTop: '20px',
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    gap: '20px',
+  }}
+>
+  {loading ? (
+    <Loader showBackdrop={false} loadingText={t('COMMON.LOADING')} />
+  ) : Data.length === 0 ? (
+    <Typography ml="40%">{t('OBSERVATION.NO_DATA_FOUND',{
+      entity:entity,
+    })}</Typography>
+  ) : (
+    entityContent
+  )}
+</Box>
+
               {/* {totalCountForCenter > 6 &&
                 entity === ObservationEntityType.CENTER && (
                   <Box

diff --git a/src/utils/Helper.ts b/src/utils/Helper.ts
@@ -435,7 +435,7 @@ export const getUserDetailsById = (data: any[], userId: any) => {
 };
 
 export const getEmailPattern = (): string => {
-  return '^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,6}$';
+  return '^[a-zA-Z0-9._+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,6}$';
 };
 
 export const translateString = (t: any, label: string) => {