@campxdev/shared 1.10.82 → 1.10.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.10.82",
+  "version": "1.10.84",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/ErrorBoundary/ErrorFallback.tsx

@@ -1,18 +1,17 @@
-import { Alert, Box, Button, Divider, styled, Typography } from '@mui/material'
+import { Alert, Box, Button, styled, Typography } from '@mui/material'
+import Cookies from 'js-cookie'
 import { useEffect, useState } from 'react'
 import {
+  internalserver,
   nointernet,
   pagenotfound,
   permissiondenied,
   unauth,
-  internalserver,
 } from '../../assets/images'
-import Cookies from 'js-cookie'
-import LoginForm from '../LoginForm'
-import { useModal } from '../DrawerWrapper/DrawerWrapper'
-import { PermissionsStore } from '../../shared-state'
 import axios from '../../config/axios'
 import { openRootModal } from '../../contexts/RootModal'
+import { PermissionsStore } from '../../shared-state'
+import { useModal } from '../DrawerWrapper/DrawerWrapper'
 
 const StyledAlert = styled(Alert)(({ theme }) => ({
   height: '60px',
@@ -171,6 +170,7 @@ export function UnAuth({ resetBoundary }) {
     process.env.NODE_ENV === 'development' ||
     origin?.slice(-2).join('.') === 'campx.dev'
   const sessionCookie = Cookies.get('campx_session_key')
+
   const appinit = async () => {
     setLoading(true)
     await axios
@@ -211,6 +211,12 @@ export function UnAuth({ resetBoundary }) {
     }
   }
 
+  useEffect(() => {
+    if (!isLocalHost) {
+      window.location.replace(`https://www.id.campx.in/?redirect_to=${url}`)
+    }
+  }, [isLocalHost])
+
   return (
     <>
       <StyledBox>

package/src/components/FilterComponents/SearchBar.tsx

@@ -9,11 +9,13 @@ interface SearchBarProps {
   onSearch: (v: string) => void
   label?: ReactNode
   textFieldProps?: ITextFieldProps
+  placeholder?: string
 }
 
 export default function SearchBar({
   onSearch,
   label,
+  placeholder = 'Search',
   ...restProps
 }: SearchBarProps) {
   const [, setSearch] = useState('')
@@ -30,7 +32,7 @@ export default function SearchBar({
   return (
     <TextField
       label={label}
-      placeholder="Search"
+      placeholder={placeholder}
       onChange={debouncedChangeHandler}
       InputProps={{
         endAdornment: (

package/src/components/Input/SearchSingleSelect.tsx

@@ -0,0 +1,105 @@
+import { KeyboardArrowDown } from '@mui/icons-material'
+import {
+  Autocomplete,
+  BoxProps,
+  Popper,
+  TextField,
+  alpha,
+  styled,
+} from '@mui/material'
+
+export const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
+  '& .MuiAutocomplete-tag': {
+    border: '1px solid #D1D1D1',
+    background: '#F8F8F8',
+    borderRadius: '5px',
+    height: '38px',
+    '& .MuiSvgIcon-root': {
+      fontSize: '15px',
+      marginLeft: '5px',
+      fontWeight: 700,
+      color: theme.palette.secondary.main,
+      '&:hover': {
+        color: alpha(theme.palette.secondary.main, 0.8),
+      },
+    },
+  },
+}))
+
+export const StyledPopper = styled(Popper)(({ theme }) => ({
+  minWidth: 'fit-content',
+  '& .MuiPaper-root': {
+    borderRadius: '10px',
+    borderTopRightRadius: 0,
+    borderTopLeftRadius: 0,
+    boxShadow: '0px 4px 16px #0000000F',
+    marginTop: '1px',
+    '& .MuiAutocomplete-listbox': {
+      minWidth: '240px',
+      padding: '0px',
+      '& .MuiAutocomplete-option': {
+        padding: '15px',
+        borderBottom: '1px solid rgba(18, 18, 18, 0.1)',
+      },
+    },
+    '&::-webkit-scrollbar': {
+      width: '0.5em',
+      height: '0.5em',
+    },
+
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: 'rgba(0, 0, 0, 0.15)',
+      borderRadius: '3px',
+
+      '&:hover': {
+        background: 'rgba(0, 0, 0, 0.2)',
+      },
+    },
+  },
+}))
+
+type Props = {
+  options: Array<{ label: string; value: any }>
+  value: { label: string; value: any }
+  onChange?: (value: any) => void
+  containerProps?: BoxProps
+}
+export const SearchSingleSelect = ({ options, value, onChange }: Props) => {
+  return (
+    <StyledAutocomplete
+      sx={{ legend: { display: 'none' } }}
+      fullWidth
+      multiple={false}
+      getOptionLabel={(option: any) => option?.label || ''}
+      options={options || []}
+      value={value}
+      onChange={(e, value) => {
+        onChange(value)
+      }}
+      isOptionEqualToValue={(option: any, value: any) =>
+        option?.value === value?.value
+      }
+      disableCloseOnSelect
+      PopperComponent={StyledPopper}
+      popupIcon={<KeyboardArrowDown />}
+      renderInput={(params) => {
+        console.log(params)
+        return (
+          <TextField
+            inputRef={(input) => {
+              if (input && value) {
+                input.style.width = `${value.label.length * 9}px`
+              }
+            }}
+            InputProps={{
+              ...params.InputProps,
+              endAdornment: <>{params.InputProps.endAdornment}</>,
+            }}
+            sx={{ minWidth: '220px' }}
+            {...params}
+          />
+        )
+      }}
+    />
+  )
+}

package/src/components/Institutions/InstitutionsDropdown.tsx

@@ -1,9 +1,6 @@
-import { KeyboardArrowDown } from '@mui/icons-material'
-import { Box } from '@mui/material'
 import { urlTenantKey } from '../../contexts/Providers'
 import { InsititutionsStore } from '../../shared-state/InstitutionsStore'
-import { TextField } from '../Input'
-import { StyledAutocomplete, StyledPopper } from '../Input/MultiSelect'
+import { SearchSingleSelect } from '../Input/SearchSingleSelect'
 
 export default function SchoolSwitch() {
   const { current, institutions } = InsititutionsStore.useState((s) => s)
@@ -18,40 +15,16 @@ export default function SchoolSwitch() {
   }
   const options =
     institutions?.map((item) => ({
-      label: item.name,
-      value: item.code,
+      label: item?.name,
+      value: item?.code,
     })) || []
+  const selectedOption = { label: current?.name, value: current?.code }
 
   return (
-    <Box sx={{ legend: { display: 'none' } }}>
-      <StyledAutocomplete
-        multiple={false}
-        sx={{
-          minWidth: '220px',
-        }}
-        getOptionLabel={(option: any) => option?.label || ''}
-        options={options || []}
-        value={{ label: current.name, value: current.code }}
-        onChange={(e, value) => {
-          handleChange(value)
-        }}
-        isOptionEqualToValue={(option: any, value: any) =>
-          option?.value === value?.value
-        }
-        disableCloseOnSelect
-        PopperComponent={StyledPopper}
-        popupIcon={<KeyboardArrowDown />}
-        renderInput={(params) => (
-          <TextField
-            label={null}
-            InputProps={{
-              ...params.InputProps,
-              endAdornment: <>{params.InputProps.endAdornment}</>,
-            }}
-            {...params}
-          />
-        )}
-      />
-    </Box>
+    <SearchSingleSelect
+      options={options}
+      value={selectedOption}
+      onChange={handleChange}
+    />
   )
 }

package/src/components/Selectors/ExamGroupSelector.tsx

@@ -0,0 +1,105 @@
+import { SelectProps } from '@mui/material'
+import { useEffect, useState } from 'react'
+import axios from '../../config/axios'
+import { SingleSelect } from '../Input'
+
+type ExamGroupSelectorProps = {
+  name?: string
+  label: string
+  filters?: { courseId: number; examType: string }
+  required?: boolean
+  onChange?: (value: any) => void
+  allowAll?: boolean
+  error?: boolean
+  helperText?: string
+} & SelectProps
+const ExamGroupSelector = (props: ExamGroupSelectorProps) => {
+  const {
+    name,
+    required = false,
+    label,
+    multiple = false,
+    filters,
+    allowAll = true,
+  } = props
+  const [options, setOptions] = useState([])
+  const [prevExamType, setPrevExamType] = useState(null)
+  const [prevCourseId, setPrevCourseId] = useState(null)
+  let api =
+    filters.examType !== 'internal'
+      ? '/exams/exams/exam-groups'
+      : '/exams/internal-exams'
+  const handleOpen = () => {
+    if (filters) {
+      if (
+        (filters.examType && filters.examType !== prevExamType) ||
+        (filters?.courseId && filters?.courseId !== prevCourseId)
+      ) {
+        setOptions([])
+        axios
+          .get(api, {
+            params: {
+              ...filters,
+              isArchived: 'false',
+              isExamPublished: 'true',
+            },
+          })
+          .then((response) => {
+            setOptions(
+              filters.examType !== 'internal'
+                ? response.data?.examGroups
+                : response.data?.exams,
+            )
+            setPrevExamType(filters.examType)
+            setPrevCourseId(filters.courseId)
+          })
+          .catch((error) => {
+            console.error('Error fetching data from the API:', error)
+          })
+      }
+    } else if (options.length === 0) {
+      axios
+        .get(api)
+        .then((response) => {
+          setOptions(response.data)
+        })
+        .catch((error) => {
+          console.error('Error fetching data from the API:', error)
+        })
+    }
+  }
+  useEffect(() => {
+    if (props?.value && props.value != 'all') {
+      handleOpen()
+    }
+  }, [props.value])
+
+  const handleOptions =
+    options.length > 0
+      ? [
+          ...(allowAll ? [{ value: 'all', label: 'All' }] : []),
+          ...options.map((item) => ({
+            label:
+              filters.examType != 'internal'
+                ? item?.groupName
+                : item?.displayName,
+            value: item?.id,
+          })),
+        ]
+      : allowAll
+      ? [{ value: 'all', label: 'All' }]
+      : []
+
+  return (
+    <SingleSelect
+      name={name}
+      label={label}
+      required={required}
+      options={handleOptions}
+      onOpen={handleOpen}
+      defaultValue="all"
+      {...props}
+    />
+  )
+}
+export default ExamGroupSelector

package/src/components/Selectors/FormSelectors/FormExamGroupSelector.tsx

@@ -0,0 +1,48 @@
+import { SelectProps } from '@mui/material'
+import { Controller } from 'react-hook-form'
+import ExamGroupSelector from '../ExamGroupSelector'
+
+type ExamGroupSelectorProps = {
+  control: any
+  name: string
+  label: string
+  required?: boolean
+  multiple?: boolean
+  allowAll?: boolean
+  filters?: { courseId: number; examType: string }
+  onChange?: (value: any) => void
+} & SelectProps
+export default function FormExamGroupSelector(props: ExamGroupSelectorProps) {
+  const {
+    name,
+    required = false,
+    control,
+    label,
+    multiple = false,
+    allowAll = true,
+    onChange,
+    value,
+    filters,
+  } = props
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <ExamGroupSelector
+          label={label}
+          name={name}
+          onChange={onChange ?? field.onChange}
+          value={value ?? field?.value}
+          allowAll={allowAll}
+          filters={filters}
+          required={required}
+          error={!!error}
+          helperText={error?.message}
+          {...props}
+        />
+      )}
+    />
+  )
+}

package/src/components/Selectors/index.tsx

@@ -1,11 +1,13 @@
 import ClassRoomSelector from './ClassRoomSelector'
 import CourseSelector from './CourseSelector'
 import DepartmentSelector from './DepartmentSelector'
+import ExamGroupSelector from './ExamGroupSelector'
 import FacultySelector from './FacultySelector'
 import FeeTypeSelector from './FeeTypeSelector'
 import FormClassRoomSelector from './FormSelectors/FormClassRoomSelector'
 import FormCourseSelector from './FormSelectors/FormCourseSelector'
 import FormDepartmentSelector from './FormSelectors/FormDepartmentSelector'
+import FormExamGroupSelector from './FormSelectors/FormExamGroupSelector'
 import FormFacultySelector from './FormSelectors/FormFacultySelector'
 import FormFeeTypeSelector from './FormSelectors/FormFeeTypeSelector'
 import FormProgramSelector from './FormSelectors/FormProgramSelector'
@@ -23,11 +25,13 @@ export {
   ClassRoomSelector,
   CourseSelector,
   DepartmentSelector,
+  ExamGroupSelector,
   FacultySelector,
   FeeTypeSelector,
   FormClassRoomSelector,
   FormCourseSelector,
   FormDepartmentSelector,
+  FormExamGroupSelector,
   FormFacultySelector,
   FormFeeTypeSelector,
   FormProgramSelector,

package/src/components/Tables/ReactTable/ReactTable.tsx

@@ -13,9 +13,8 @@ import {
 } from '@mui/material'
 import { useEffect, useMemo, useState } from 'react'
 import { usePagination, useRowSelect, useTable } from 'react-table'
-import BatchActionsHeader from './BatchActionsHeader'
+import TableStats from '../common/TableStats'
 import { SortAscIcon, SortDescIcon, SortIcon } from '../common/icons'
-import { RenderTableBody } from './RenderTableBody'
 import {
   StyledLimitBox,
   StyledLimitMenu,
@@ -23,7 +22,8 @@ import {
   StyledTableFooter,
 } from '../common/styles'
 import { ColumnProps, Sort, TableProps } from '../common/types'
-import TableStats from '../common/TableStats'
+import BatchActionsHeader from './BatchActionsHeader'
+import { RenderTableBody } from './RenderTableBody'
 
 type ReactTableCell = {
   Header: any
@@ -75,6 +75,7 @@ const getTableCol = (headerItem: ColumnProps) => {
 
 export default function ReactTable({
   columns,
+  rowKey = 'id',
   dataSource,
   loading,
   pagination,
@@ -128,7 +129,7 @@ export default function ReactTable({
       manualPagination: true,
       autoResetSelectedRows: false,
       pageCount: pagination?.totalCount ?? dataSource?.length,
-      getRowId: select?.enable ? (row) => row?.id : undefined,
+      getRowId: select?.enable ? (row) => row[rowKey] : undefined,
     },
     // useSortBy,
     usePagination,

package/src/config/axios.ts

@@ -1,14 +1,13 @@
 import Axios, { AxiosRequestConfig } from 'axios'
-import _ from 'lodash'
-import { toast } from 'react-toastify'
 import Cookies from 'js-cookie'
+import { toast } from 'react-toastify'
 import { NetworkStore } from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
 import { isDevelopment } from '../constants'
-import { UserStore } from '../shared-state'
 import { InsititutionsStore } from '../shared-state/InstitutionsStore'
 
 const sessionKey = Cookies.get('campx_session_key')
 const clientId = window.location.pathname.split('/')[1] ?? 'campx_dev'
+const institutionId = window.location.pathname.split('/')[2] ?? 'campx_dev'
 
 export const formatParams = (params) => {
   return Object.fromEntries(
@@ -36,6 +35,8 @@ axios.interceptors.request.use(
     const { current } = InsititutionsStore.getRawState()
     if (current) {
       config.headers['x-institution-code'] = current.code
+    } else {
+      config.headers['x-institution-code'] = institutionId
     }
 
     const params = formatParams(config?.params)