@campxdev/shared 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,119 +1,113 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import UserBox from "./UserBox";
|
|
1
|
+
import {Box, styled, Typography} from '@mui/material'
|
|
2
|
+
import {ReactNode} from 'react'
|
|
3
|
+
import {Link} from 'react-router-dom'
|
|
4
|
+
import {isDevelopment} from '../../../constants/isDevelopment'
|
|
5
|
+
import {applications} from './applications'
|
|
6
|
+
import AppsMenu from './AppsMenu'
|
|
7
|
+
import {collegex, enrollx, examx, payx, peoplex} from './assets'
|
|
8
|
+
import CogWheelMenu from './CogWheelMenu'
|
|
9
|
+
import FreshDeskHelpButton from './FreshDeskHelpButton'
|
|
10
|
+
import Notification from './Notification'
|
|
11
|
+
import {StyledHeader, StyledImageWrapper} from './styles'
|
|
12
|
+
import UserBox from './UserBox'
|
|
14
13
|
|
|
15
14
|
const StyledLogosWrapper = styled(Box)(() => ({
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}))
|
|
15
|
+
display: 'flex',
|
|
16
|
+
alignItems: 'center',
|
|
17
|
+
gap: '10px',
|
|
18
|
+
padding: '10px',
|
|
19
|
+
transition: 'background ease 0.3s',
|
|
20
|
+
borderRadius: '5px',
|
|
21
|
+
'&:hover': {
|
|
22
|
+
background: 'rgba(0, 0, 0, 0.05)',
|
|
23
|
+
},
|
|
24
|
+
}))
|
|
26
25
|
|
|
27
26
|
const StyledLink = styled(Link)(() => ({
|
|
28
|
-
|
|
29
|
-
}))
|
|
27
|
+
textDecoration: 'none',
|
|
28
|
+
}))
|
|
30
29
|
|
|
31
30
|
const imageMap = {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
31
|
+
ums: collegex,
|
|
32
|
+
enroll: enrollx,
|
|
33
|
+
exams: examx,
|
|
34
|
+
payments: payx,
|
|
35
|
+
peoplex: peoplex,
|
|
36
|
+
campx: collegex,
|
|
37
|
+
}
|
|
39
38
|
|
|
40
39
|
interface AppHeaderProps {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
40
|
+
clientLogo: string
|
|
41
|
+
username: string
|
|
42
|
+
profileIcon: string
|
|
43
|
+
permissions?: any
|
|
44
|
+
userBoxActions: {
|
|
45
|
+
label: ReactNode
|
|
46
|
+
icon?: ReactNode
|
|
47
|
+
onClick: any
|
|
48
|
+
}[]
|
|
49
|
+
cogWheelMenu?: {label: string; path: string}[]
|
|
51
50
|
}
|
|
52
51
|
|
|
53
52
|
export default function AppHeader({
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
53
|
+
clientLogo = imageMap.campx,
|
|
54
|
+
username,
|
|
55
|
+
profileIcon,
|
|
56
|
+
permissions,
|
|
57
|
+
userBoxActions = [],
|
|
58
|
+
cogWheelMenu = [],
|
|
60
59
|
}: AppHeaderProps) {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
60
|
+
return (
|
|
61
|
+
<StyledHeader>
|
|
62
|
+
<Box sx={{display: 'flex', alignItems: 'center', gap: '10px'}}>
|
|
63
|
+
<AppsMenu />
|
|
64
|
+
<AppLogo clientLogo={clientLogo} />
|
|
65
|
+
</Box>
|
|
66
|
+
<Box className='actions'>
|
|
67
|
+
<FreshDeskHelpButton />
|
|
68
|
+
{/* <Notification /> */}
|
|
69
|
+
{cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
|
|
70
|
+
<UserBox
|
|
71
|
+
username={username}
|
|
72
|
+
profileIcon={profileIcon}
|
|
73
|
+
actions={userBoxActions}
|
|
74
|
+
/>
|
|
75
|
+
</Box>
|
|
76
|
+
</StyledHeader>
|
|
77
|
+
)
|
|
79
78
|
}
|
|
80
79
|
|
|
81
|
-
const AppLogo = ({
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
applications.find((item) => item.key === originSubdomain)?.key ?? "campx";
|
|
80
|
+
const AppLogo = ({clientLogo}) => {
|
|
81
|
+
const originSubdomain = window.location.host.split('.')?.slice(-3)[0] ?? 'ums'
|
|
82
|
+
const currentApp =
|
|
83
|
+
applications.find((item) => item.key === originSubdomain)?.key ?? 'campx'
|
|
86
84
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
</StyledLogosWrapper>
|
|
117
|
-
</StyledLink>
|
|
118
|
-
);
|
|
119
|
-
};
|
|
85
|
+
return (
|
|
86
|
+
<StyledLink to={'/'}>
|
|
87
|
+
<StyledLogosWrapper>
|
|
88
|
+
<StyledImageWrapper>
|
|
89
|
+
<img src={imageMap[currentApp]} />
|
|
90
|
+
</StyledImageWrapper>
|
|
91
|
+
<Box
|
|
92
|
+
sx={{
|
|
93
|
+
height: '26px',
|
|
94
|
+
width: '2px',
|
|
95
|
+
background: 'gray',
|
|
96
|
+
}}
|
|
97
|
+
></Box>
|
|
98
|
+
<StyledImageWrapper>
|
|
99
|
+
{isDevelopment ? (
|
|
100
|
+
<Typography variant='h1'>Developer</Typography>
|
|
101
|
+
) : (
|
|
102
|
+
<img
|
|
103
|
+
src={clientLogo}
|
|
104
|
+
onError={(e: any) => {
|
|
105
|
+
e.target.src = imageMap.campx
|
|
106
|
+
}}
|
|
107
|
+
/>
|
|
108
|
+
)}
|
|
109
|
+
</StyledImageWrapper>
|
|
110
|
+
</StyledLogosWrapper>
|
|
111
|
+
</StyledLink>
|
|
112
|
+
)
|
|
113
|
+
}
|
|
@@ -1,87 +1,92 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
1
|
+
import {Box, Menu, Typography} from '@mui/material'
|
|
2
|
+
import {useState} from 'react'
|
|
3
|
+
import {applications} from './applications'
|
|
4
|
+
import {AppsIcon} from './icons'
|
|
5
5
|
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
StyledDescription,
|
|
7
|
+
StyledIconButton,
|
|
8
|
+
StyledMenuItem,
|
|
9
|
+
StyledMenuItemContainer,
|
|
10
|
+
StyledLink,
|
|
11
|
+
} from './styles'
|
|
11
12
|
|
|
12
13
|
const AppsMenu = () => {
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
const [anchorEl, setAnchorEl] = useState<any>(null)
|
|
15
|
+
const open = Boolean(anchorEl)
|
|
15
16
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
17
|
+
const handleClick = (event) => {
|
|
18
|
+
setAnchorEl(event.currentTarget)
|
|
19
|
+
}
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
const handleClose = () => {
|
|
22
|
+
setAnchorEl(null)
|
|
23
|
+
}
|
|
23
24
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
return (
|
|
26
|
+
<>
|
|
27
|
+
<StyledIconButton onClick={handleClick}>
|
|
28
|
+
<AppsIcon />
|
|
29
|
+
</StyledIconButton>
|
|
29
30
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
31
|
+
<Menu
|
|
32
|
+
transitionDuration={150}
|
|
33
|
+
elevation={3}
|
|
34
|
+
id='basic-menu'
|
|
35
|
+
anchorEl={anchorEl}
|
|
36
|
+
open={open}
|
|
37
|
+
onClose={handleClose}
|
|
38
|
+
anchorOrigin={{
|
|
39
|
+
vertical: 'bottom',
|
|
40
|
+
horizontal: 'left',
|
|
41
|
+
}}
|
|
42
|
+
transformOrigin={{
|
|
43
|
+
vertical: 'top',
|
|
44
|
+
horizontal: 'left',
|
|
45
|
+
}}
|
|
46
|
+
sx={{
|
|
47
|
+
'& .MuiPaper-root': {
|
|
48
|
+
left: '0 !important',
|
|
49
|
+
top: '64px !important',
|
|
50
|
+
},
|
|
51
|
+
}}
|
|
52
|
+
>
|
|
53
|
+
<Box sx={{padding: '0.3rem 1rem'}}>
|
|
54
|
+
<Typography variant='body2'>Switch to</Typography>
|
|
55
|
+
</Box>
|
|
56
|
+
<Box>
|
|
57
|
+
{applications.map((item, index) => (
|
|
58
|
+
<StyledLink href={item.path}>
|
|
59
|
+
<StyledMenuItemContainer
|
|
60
|
+
key={index}
|
|
61
|
+
onClick={() => {
|
|
62
|
+
window.location.href = item.path
|
|
63
|
+
handleClose()
|
|
64
|
+
}}
|
|
65
|
+
>
|
|
66
|
+
<MenuItem data={item} />
|
|
67
|
+
</StyledMenuItemContainer>
|
|
68
|
+
</StyledLink>
|
|
69
|
+
))}
|
|
70
|
+
</Box>
|
|
71
|
+
</Menu>
|
|
72
|
+
</>
|
|
73
|
+
)
|
|
74
|
+
}
|
|
72
75
|
|
|
73
|
-
export default AppsMenu
|
|
76
|
+
export default AppsMenu
|
|
74
77
|
|
|
75
|
-
const MenuItem = ({
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
78
|
+
const MenuItem = ({data}) => {
|
|
79
|
+
return (
|
|
80
|
+
<StyledMenuItem>
|
|
81
|
+
<Box>
|
|
82
|
+
<img src={data.icon} style={{width: '28px', height: '28px'}} />
|
|
83
|
+
</Box>
|
|
84
|
+
<Box>
|
|
85
|
+
<Typography variant='h1' sx={{marginBottom: '7px'}}>
|
|
86
|
+
{data?.title}
|
|
87
|
+
</Typography>
|
|
88
|
+
<StyledDescription>{data?.description}</StyledDescription>
|
|
89
|
+
</Box>
|
|
90
|
+
</StyledMenuItem>
|
|
91
|
+
)
|
|
92
|
+
}
|
|
@@ -1,92 +1,98 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
alpha,
|
|
3
|
+
AppBar,
|
|
4
|
+
Box,
|
|
5
|
+
IconButton,
|
|
6
|
+
ListItemText,
|
|
7
|
+
styled,
|
|
8
|
+
Typography,
|
|
9
|
+
Link,
|
|
10
|
+
} from '@mui/material'
|
|
10
11
|
|
|
11
|
-
export const StyledImageWrapper = styled(
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
export const StyledImageWrapper = styled('div')`
|
|
13
|
+
width: auto;
|
|
14
|
+
height: 24px;
|
|
15
|
+
& img {
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: 100%;
|
|
18
|
+
object-fit: contain;
|
|
19
|
+
}
|
|
20
|
+
`
|
|
20
21
|
|
|
21
|
-
export const StyledItemText = styled(ListItemText)(({
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}))
|
|
22
|
+
export const StyledItemText = styled(ListItemText)(({theme}) => ({
|
|
23
|
+
color: theme.palette.text.primary,
|
|
24
|
+
transition: '0.2s ease',
|
|
25
|
+
}))
|
|
25
26
|
|
|
26
|
-
export const StyledAppBar = styled(AppBar)(({
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}))
|
|
27
|
+
export const StyledAppBar = styled(AppBar)(({theme}) => ({
|
|
28
|
+
backgroundColor: 'white',
|
|
29
|
+
boxShadow: '0px 8px 28px rgb(136,136,136, 0.3)',
|
|
30
|
+
}))
|
|
30
31
|
|
|
31
|
-
export const StyledHeader = styled(Box)(({
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}))
|
|
32
|
+
export const StyledHeader = styled(Box)(({theme}) => ({
|
|
33
|
+
boxShadow: '0px 2px 10px #0000001a',
|
|
34
|
+
backgroundColor: 'white',
|
|
35
|
+
display: 'flex',
|
|
36
|
+
alignItems: 'center',
|
|
37
|
+
justifyContent: 'space-between',
|
|
38
|
+
'& .actions': {
|
|
39
|
+
marginRight: '10px',
|
|
40
|
+
display: 'flex',
|
|
41
|
+
alignItems: 'center',
|
|
42
|
+
gap: '14px',
|
|
43
|
+
},
|
|
44
|
+
}))
|
|
44
45
|
|
|
45
|
-
export const StyledUser = styled(Box)(({
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}))
|
|
46
|
+
export const StyledUser = styled(Box)(({theme}) => ({
|
|
47
|
+
cursor: 'pointer',
|
|
48
|
+
borderRadius: '5px',
|
|
49
|
+
transition: 'background 0.2s ease',
|
|
50
|
+
padding: '5px 16px',
|
|
51
|
+
display: 'flex',
|
|
52
|
+
alignItems: 'center',
|
|
53
|
+
gap: '8px',
|
|
54
|
+
'&:hover': {
|
|
55
|
+
background: theme.palette.secondary.light,
|
|
56
|
+
},
|
|
57
|
+
}))
|
|
57
58
|
|
|
58
59
|
export const StyledIconButton = styled(IconButton)({
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
})
|
|
60
|
+
padding: '20px',
|
|
61
|
+
backgroundColor: 'black',
|
|
62
|
+
display: 'flex',
|
|
63
|
+
alignItems: 'center',
|
|
64
|
+
justifyContent: 'center',
|
|
65
|
+
borderRadius: '0px',
|
|
66
|
+
})
|
|
66
67
|
|
|
67
|
-
export const
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
})
|
|
68
|
+
export const StyledLink = styled(Link)({
|
|
69
|
+
textDecoration: 'none',
|
|
70
|
+
})
|
|
71
|
+
|
|
72
|
+
export const StyledDescription = styled(Typography)(({theme}) => ({
|
|
73
|
+
fontSize: '12px',
|
|
74
|
+
fontWeight: 600,
|
|
75
|
+
color: alpha(theme?.palette?.secondary?.lighter, 0.5),
|
|
76
|
+
}))
|
|
72
77
|
|
|
73
78
|
export const StyledMenuItem = styled(Box)({
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
})
|
|
79
|
+
height: '64px',
|
|
80
|
+
width: '380px',
|
|
81
|
+
padding: '40px 20px',
|
|
82
|
+
transition: 'background ease 0.3s',
|
|
83
|
+
'&:hover': {
|
|
84
|
+
background: 'rgba(0, 0, 0, 0.03)',
|
|
85
|
+
},
|
|
86
|
+
display: 'flex',
|
|
87
|
+
alignItems: 'center',
|
|
88
|
+
gap: '20px',
|
|
89
|
+
})
|
|
85
90
|
|
|
86
|
-
export const StyledMenuItemContainer = styled(Box)(({
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
91
|
+
export const StyledMenuItemContainer = styled(Box)(({theme}) => ({
|
|
92
|
+
cursor: 'pointer',
|
|
93
|
+
borderBottom: `1px solid ${theme?.palette?.secondary?.lighter}`,
|
|
94
|
+
'&:last-of-type': {
|
|
95
|
+
border: 'none',
|
|
96
|
+
},
|
|
97
|
+
padding: '8px 0px',
|
|
98
|
+
}))
|