@campxdev/campx-web-utils 0.4.3 → 0.4.5

package/export.ts

@@ -4,4 +4,4 @@ export * from './src/context/export';
 export * from './src/hooks/export';
 export * from './src/layout/AppLayout';
 export * from './src/selectors/export';
-export * from './src/utils/export';
+export * from './src/utils/constants';

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@campxdev/campx-web-utils",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "main": "./export.ts",
   "private": false,
   "peerDependencies": {
-    "@campxdev/react-blueprint": ">=1.7.0",
+    "@campxdev/react-blueprint": ">=1.7.9",
     "@emotion/react": ">=^11.13.3",
     "@emotion/styled": ">=^11.13.0",
     "@mui/icons-material": ">=6.1.5",
@@ -14,7 +14,7 @@
     "react-redux": "=>9.1.2"
   },
   "dependencies": {
-    "@campxdev/react-blueprint": "1.7.0",
+    "@campxdev/react-blueprint": "1.7.9",
     "@hookform/resolvers": "^3.9.0",
     "@mui/x-date-pickers": "^7.22.1",
     "axios": "^1.7.2",

package/src/AppContent.tsx

@@ -1,6 +1,7 @@
 import { Button, TextField } from '@campxdev/react-blueprint';
 import { useState } from 'react';
 import { EmployeesSelector } from './selectors/EmployeesSelector';
+import { PrintFormatSelector } from './selectors/export';
 
 function AppContent() {
   const [value, setValue] = useState('63b810ee995d6d64f4a248de');
@@ -20,6 +21,8 @@ function AppContent() {
       <div style={{ height: '300px' }}></div>
 
       <TextField />
+
+      <PrintFormatSelector onChange={() => {}} />
     </>
   );
 }

package/src/components/ChangePassword.tsx

@@ -17,7 +17,7 @@ import { StyledMenuItem } from '@campxdev/react-blueprint/src/components/Navigat
 import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { toast } from 'react-toastify';
 import { axios } from '../config/axios';
-import { isDevelopment } from '../utils/export';
+import { isDevelopment } from '../utils/constants';
 
 interface PasswordVisibilityState {
   oldPassword: boolean;

package/src/config/axios.ts

@@ -1,13 +1,7 @@
 import Axios, { InternalAxiosRequestConfig } from 'axios';
 import Cookies from 'js-cookie';
 import { ApplicationStore } from '../context/application-store';
-import { isDevelopment } from '../utils/export';
-
-const tenantCode =
-  window.location.hostname === 'localhost'
-    ? Cookies.get('campx_tenant')
-    : window.location.hostname.split('.')[0];
-const institutionCode = window.location.pathname.split('/')[1];
+import { institutionCode, isDevelopment, tenantCode } from '../utils/constants';
 
 export const formatParams = (params: any) => {
   return Object.fromEntries(

package/src/context/Providers.tsx

@@ -6,11 +6,11 @@ import {
   configureStore,
   ReducersMapObject,
 } from '@reduxjs/toolkit';
-import Cookies from 'js-cookie';
 import { ReactNode, useEffect } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
+import { institutionCode, tenantCode } from '../utils/constants';
 import { ConfirmDialogProvider } from './ConfirmDialogProvider';
 import { SnackbarProvider } from './SnackbarProvider';
 
@@ -35,14 +35,6 @@ export const Providers = ({
     },
   });
 
-  var tenantCode =
-    window.location.hostname === 'localhost'
-      ? Cookies.get('campx_tenant')
-      : window.location.hostname.split('.')[0];
-  var institutionCode =
-    window.location.pathname.split('/')[1] !== ''
-      ? window.location.pathname.split('/')[1]
-      : Cookies.get('campx_institution');
   var baseName = tenantCode && institutionCode ? `/${institutionCode}` : '/';
   useEffect(() => {
     if (window.location.pathname === '/' && institutionCode && tenantCode) {

package/src/layout/AppLayout.tsx

@@ -1,11 +1,12 @@
 import { AppHeader, Sidebar, Spinner } from '@campxdev/react-blueprint';
 import { SideMenuItemProps } from '@campxdev/react-blueprint/src/components/Navigation/Sidebar/Sidebar';
-import { Box, Stack, useTheme } from '@mui/material';
+import { Box, Stack, styled, useMediaQuery, useTheme } from '@mui/material';
 import { motion } from 'framer-motion';
 import Cookies from 'js-cookie';
 import { Suspense, useState } from 'react';
 import { axios } from '../config/axios';
 import { ErrorBoundary } from '../context/export';
+import { Margin } from '@mui/icons-material';
 
 interface Props {
   children?: React.ReactNode;
@@ -14,6 +15,7 @@ interface Props {
   handleLogout?: any;
   userName?: string;
   designation?: string;
+  clientName?: string;
 }
 
 export const AppLayout: React.FC<Props> = ({
@@ -23,9 +25,11 @@ export const AppLayout: React.FC<Props> = ({
   handleLogout,
   userName = '',
   designation = '',
+  clientName = 'Ohio State University',
 }) => {
   const [collapsed, setCollapsed] = useState(true);
   const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
 
   function logout() {
     axios
@@ -42,10 +46,7 @@ export const AppLayout: React.FC<Props> = ({
   }
 
   return (
-    <Stack
-      sx={{ backgroundColor: theme.palette.surface.defaultBackground }}
-      direction={'row'}
-    >
+    <AppLayoutContainer>
       <Sidebar menu={menu} collapsed={collapsed} setCollapsed={setCollapsed} />
       <motion.div
         animate={{
@@ -54,50 +55,71 @@ export const AppLayout: React.FC<Props> = ({
         transition={{ duration: 0.3, ease: 'circOut' }}
         style={{
           margin: '12px 12px 12px 0px',
-          width: 'calc(100% - 84px)',
+          width: isSmallScreen ? '100%' : 'calc(100% - 84px)',
+          display: isSmallScreen ? 'contents' : 'block',
         }}
       >
-        <Stack gap="12px">
-          <AppHeader
-            actions={[]}
-            collapsed={collapsed}
-            showActiveDevices={false}
-            onLogoutClick={handleLogout ?? logout}
-            clientName={''}
-            userFullName={userName}
-            designation={designation}
-          />
-          <Box
-            sx={{
-              // backgroundColor: theme.palette.surface.paperBackground,
-              borderRadius: '8px',
-              height: 'calc(100vh - 96px)',
-              overflowY: 'scroll',
-              '&::-webkit-scrollbar': {
-                width: '0.5em',
-                height: '0.2em',
-              },
+        <AppHeader
+          actions={[]}
+          collapsed={collapsed}
+          showActiveDevices={false}
+          onLogoutClick={handleLogout ?? logout}
+          clientName={''}
+          userFullName={userName}
+          designation={designation}
+          {...(isSmallScreen && {
+            profileSx: { width: 32, height: 32, fontSize: '12px' },
+          })}
+        />
+        <OuletContainer
+          sx={{
+            // backgroundColor: theme.palette.surface.paperBackground,
 
-              '&::-webkit-scrollbar-thumb': {
-                backgroundColor: theme.palette.primary.light,
-                borderRadius: '3px',
-
-                '&:hover': {
-                  backgroundColor: theme.palette.primary.main,
-                },
-              },
-              ...mainContainerSx,
-            }}
-            onClick={() => {
-              setCollapsed(true);
-            }}
-          >
-            <Suspense fallback={<Spinner />}>
-              <ErrorBoundary>{children}</ErrorBoundary>
-            </Suspense>
-          </Box>
-        </Stack>
+            ...mainContainerSx,
+          }}
+          onClick={() => {
+            setCollapsed(true);
+          }}
+        >
+          <Suspense fallback={<Spinner />}>
+            <ErrorBoundary>{children}</ErrorBoundary>
+          </Suspense>
+        </OuletContainer>
       </motion.div>
-    </Stack>
+    </AppLayoutContainer>
   );
 };
+
+const AppLayoutContainer = styled(Stack)(({ theme }: { theme?: any }) => ({
+  flexDirection: 'row',
+  backgroundColor: theme.palette.surface.defaultBackground,
+
+  [theme.breakpoints.down('md')]: {
+    flexWrap: 'wrap',
+  },
+}));
+
+const OuletContainer = styled(Box)(({ theme }: { theme?: any }) => ({
+  borderRadius: '8px',
+  height: 'calc(100vh - 96px)',
+  overflowY: 'scroll',
+  width: '100%',
+
+  [theme.breakpoints.down('md')]: {
+    margin: '0px 12px 12px 12px',
+  },
+
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.2em',
+  },
+
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: theme.palette.primary.light,
+    borderRadius: '3px',
+
+    '&:hover': {
+      backgroundColor: theme.palette.primary.main,
+    },
+  },
+}));

package/src/utils/constants.ts

@@ -0,0 +1,18 @@
+import Cookies from 'js-cookie';
+
+const tenantCookie = Cookies.get('campx_tenant');
+const institutionCookie = Cookies.get('campx_institution');
+
+export const isLocal = window.location.hostname === 'localhost';
+
+export const isDevelopment = process.env.NODE_ENV === 'development' || isLocal;
+
+export const tenantCode = isLocal
+  ? tenantCookie
+  : window.location.hostname.split('.')[0];
+
+// if url searched is aupulse.campx.in then redirect to aupulse.campx.in/aupulse
+export const institutionCode =
+  window.location.pathname.split('/')[1] !== ''
+    ? window.location.pathname.split('/')[1]
+    : institutionCookie;

package/src/utils/export.ts

@@ -1,3 +0,0 @@
-export const isDevelopment =
-  process.env.NODE_ENV === 'development' ||
-  window.location.hostname === 'localhost';