adjust school table

WBG-Coach · Dec 15, 2023 · b27d822 · b27d822
1 parent b84d4d1
commit b27d822
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 69 deletions.
diff --git a/src/common/helper/index.ts b/src/common/helper/index.ts
@@ -0,0 +1,9 @@
+import { IRegion } from '@/types';
+
+export const formatRegionPath = (region?: IRegion): string => {
+  if (region?.parent) {
+    return formatRegionPath(region.parent) + ' / ' + region.name;
+  }
+
+  return region?.name || '';
+};
diff --git a/src/i18n/langs/en.ts b/src/i18n/langs/en.ts
@@ -52,7 +52,8 @@ const enTranslation = {
     },
     'targeted-improvement-areas': {
       title: 'Targeted improvement areas',
-      description: 'Fundamental teaching practices and skills teachers and coaches agreed to work on between coaching sessions',
+      description:
+        'Fundamental teaching practices and skills teachers and coaches agreed to work on between coaching sessions',
     },
     'needs-work': 'Needs work',
     'keep-working': 'Keep working',
@@ -104,8 +105,8 @@ const enTranslation = {
     filter: 'School name',
     table: {
       name: 'Name',
-      'coaches-count': 'Coaches count',
-      'teachers-count': 'Teachers count',
+      emis_number: 'Emis code',
+      region: 'Region',
       actions: 'Actions',
     },
     form: {

diff --git a/src/pages/Schools/SchoolForm/RegionSelect/index.tsx b/src/pages/Schools/SchoolForm/RegionSelect/index.tsx
@@ -6,37 +6,35 @@ import { useTranslation } from 'react-i18next';
 
 type Props = {
   direction: 'row' | 'column';
-  parentId?: string;
+  region?: IRegion;
   level: number;
   onSelect: (regionId?: string) => void;
 };
 
-const RegionSelect: React.FC<Props> = ({ level, direction, parentId, onSelect }) => {
+const RegionSelect: React.FC<Props> = ({ level, direction, region, onSelect }) => {
   const { t } = useTranslation();
-  const [hasChildren, setHasChildren] = useState(false);
-  const [regions, setRegions] = useState<IRegion[]>([]);
-  const [selectedId, setSelectedId] = useState<IRegion['id']>();
+  const [regions, setRegions] = useState<IRegion[]>(region?.children || []);
+  const [selectedRegion, setSelectedRegion] = useState<IRegion>();
 
   useEffect(() => {
-    setRegions([]);
-    setHasChildren(false);
-    setSelectedId(undefined);
-    onSelect(undefined);
-    RegionService.getRegionsByParentId(parentId).then(setRegions);
-  }, [parentId]);
+    if (!region) {
+      RegionService.getRegionsTree().then(setRegions);
+    }
+  }, [region]);
 
-  useEffect(() => {
-    if (selectedId) {
-      const region = regions.find((item) => item.id === selectedId);
-      const canSubmitValue = !region?.children || region.children.length === 0;
+  const handleSelect = (regionId?: string) => {
+    const region = regions.find((region) => region.id === regionId);
 
-      if (canSubmitValue) {
-        onSelect(selectedId);
+    if (region) {
+      if (!!region.children?.length) {
+        setSelectedRegion(region);
       } else {
-        setHasChildren(true);
+        onSelect(region.id);
       }
+    } else {
+      setSelectedRegion(undefined);
     }
-  }, [selectedId]);
+  };
 
   return (
     <Flex
@@ -48,16 +46,16 @@ const RegionSelect: React.FC<Props> = ({ level, direction, parentId, onSelect })
     >
       <VStack w="full" alignItems="flex-start">
         <Text fontWeight={600}>{t(`settings.tabs.region.${level}.select`)}</Text>
-        <Select placeholder="..." onChange={(e) => setSelectedId(e.target.value)} value={selectedId}>
+        <Select placeholder="..." onChange={(e) => handleSelect(e.target.value)} value={selectedRegion?.id}>
           {regions?.map((region) => (
             <option key={region.id} value={region.id}>
               {region.name}
             </option>
           ))}
         </Select>
       </VStack>
-      {hasChildren && (
-        <RegionSelect level={level + 1} parentId={selectedId} onSelect={onSelect} direction={direction} />
+      {!!selectedRegion?.children?.length && (
+        <RegionSelect level={level + 1} region={selectedRegion} onSelect={onSelect} direction={direction} />
       )}
     </Flex>
   );

diff --git a/src/pages/Schools/SchoolForm/index.tsx b/src/pages/Schools/SchoolForm/index.tsx
@@ -11,7 +11,6 @@ import {
   DrawerFooter,
   FormControl,
   FormLabel,
-  useToast,
   Text,
   VStack,
   Spinner,
@@ -23,6 +22,7 @@ import { useTranslation } from 'react-i18next';
 import RegionSelect from './RegionSelect';
 import SchoolService from '@/services/school';
 import Icon from '@/components/Base/Icon';
+import { formatRegionPath } from '@/common/helper';
 
 type Props = {
   isOpen: boolean;
@@ -33,7 +33,6 @@ type Props = {
 
 const SchoolForm: React.FC<Props> = ({ isOpen, schoolId, onClose, onSubmit }) => {
   const { t } = useTranslation();
-  const toast = useToast();
   const [isLoading, setIsLoading] = useState(true);
   const [showSelectRegion, setShowSelectRegion] = useState(false);
   const [schoolValues, setSchoolValues] = useState<ISchool>();
@@ -122,7 +121,7 @@ const SchoolForm: React.FC<Props> = ({ isOpen, schoolId, onClose, onSubmit }) =>
                   <HStack mt="20px" justifyContent="center" alignItems="center">
                     <VStack w="full" alignItems="flex-start">
                       <Text fontWeight={600}>{t('school.form.region')}</Text>
-                      <Text>{schoolValues?.region?.name}</Text>
+                      <Text>{formatRegionPath(schoolValues?.region)}</Text>
                     </VStack>
                     <IconButton
                       my="auto"

diff --git a/src/pages/Schools/SchoolList/index.tsx b/src/pages/Schools/SchoolList/index.tsx
@@ -1,29 +1,12 @@
-import {
-  Button,
-  Center,
-  Flex,
-  HStack,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalOverlay,
-  Spinner,
-  Text,
-  VStack,
-} from '@chakra-ui/react';
-import { ISchool } from '@/types';
+import { Flex, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import { IRegion, ISchool } from '@/types';
 import Table from '@/components/Table';
 import Icon from '@/components/Base/Icon';
 import { useTranslation } from 'react-i18next';
-import QRCode from 'qrcode.react';
 import { useEffect, useState } from 'react';
 import SchoolService from '@/services/school';
 import QRCodeModal from './QRCodeModal';
+import { formatRegionPath } from '@/common/helper';
 
 type Props = {
   schools: ISchool[];
@@ -52,19 +35,19 @@ const SchoolList: React.FC<Props> = ({ schools, handleDelete, handleEdit }) => {
         data={schools}
         columns={[
           {
-            renderColumn: (item: ISchool) => item.name,
-            title: t('school.table.name'),
-            width: '30%',
+            renderColumn: (item: ISchool) => item.emis_number,
+            title: t('school.table.emis_number'),
+            width: '150px',
           },
           {
-            renderColumn: (item: ISchool) => item.coachSchools?.length || '0',
-            title: t('school.table.coaches-count'),
-            width: '30%',
+            renderColumn: (item: ISchool) => item.name,
+            title: t('school.table.name'),
+            width: 'calc(40% - 115px)',
           },
           {
-            renderColumn: (item: ISchool) => item.teachers?.length || '0',
-            title: t('school.table.teachers-count'),
-            width: '30%',
+            renderColumn: (item: ISchool) => formatRegionPath(item.region),
+            title: t('school.table.region'),
+            width: 'calc(60% - 115px)',
           },
           {
             renderColumn: (item: ISchool) => (
@@ -90,7 +73,7 @@ const SchoolList: React.FC<Props> = ({ schools, handleDelete, handleEdit }) => {
                 </Menu>
               </Flex>
             ),
-            width: '10%',
+            width: '80px',
             title: 'common.actions',
           },
         ]}

diff --git a/src/pages/Settings/Regions/index.tsx b/src/pages/Settings/Regions/index.tsx
@@ -19,8 +19,9 @@ const Regions = () => {
     data: [] as IRegion[],
   });
 
-  const refreshRegions = useCallback(() => {
-    RegionService.getRegions().then((regions) => setRegions({ isLoading: false, data: regions }));
+  const refreshRegions = useCallback(async () => {
+    const regions = await RegionService.getRegions();
+    setRegions({ isLoading: false, data: regions });
   }, []);
 
   useEffect(() => {
@@ -30,11 +31,7 @@ const Regions = () => {
   const handleSubmitRegion = async (region: IRegion) => {
     try {
       setRegions({ isLoading: true, data: [] });
-      if (!!region.id) {
-        await RegionService.updateRegion(region.id, region);
-      } else {
-        await RegionService.saveRegion(region);
-      }
+      await RegionService.saveRegion(region);
     } catch (err) {
       toast.error('An error as ocurred on management of user');
     }

diff --git a/src/services/region/index.ts b/src/services/region/index.ts
@@ -2,13 +2,10 @@ import _axios from '..';
 import { IRegion } from '../../types';
 
 export const RegionService = {
-  getRegionsByParentId: async (parentId?: string): Promise<IRegion[]> =>
-    (await _axios.get(parentId ? `region/parent/${parentId}` : 'region/parent')).data,
   getRegions: async (): Promise<IRegion[]> => (await _axios.get('region')).data,
+  getRegionsTree: async (): Promise<IRegion[]> => (await _axios.get('region/tree')).data,
   getRegion: async (id: string): Promise<IRegion> => (await _axios.get(`region/${id}`)).data,
   saveRegion: async (region: Partial<IRegion>): Promise<IRegion> => (await _axios.post('region', region)).data,
-  updateRegion: async (regionId: string, region: IRegion): Promise<IRegion> =>
-    (await _axios.patch(`region/${regionId}`, region)).data,
 };
 
 export default RegionService;