l-min-components 1.0.573 → 1.0.580
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 +1 -1
- package/src/components/AdminNotification/components/optionsDropdown/index.jsx +65 -0
- package/src/components/AdminNotification/components/optionsDropdown/index.styled.jsx +55 -0
- package/src/components/AdminNotification/index.jsx +41 -0
- package/src/components/AdminNotification/index.styled.jsx +35 -0
- package/src/components/index.js +1 -0
- package/src/components/sideNav/index.jsx +3 -1
- package/src/hooks/leftNavMenu.jsx +2 -1
- package/src/hooks/notificationItem.jsx +87 -0
package/package.json
CHANGED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Container, Header } from './index.styled';
|
|
3
|
+
import ToggleButtonComponent from '../../../toggle button';
|
|
4
|
+
import { useState } from 'react';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @param {{label: string}} props
|
|
8
|
+
* @returns {JSX.Element}
|
|
9
|
+
*/
|
|
10
|
+
const OptionsDropdown = ({ label, data }) => {
|
|
11
|
+
const [isToggle, setIsToggle] = useState(false);
|
|
12
|
+
return (
|
|
13
|
+
<Container>
|
|
14
|
+
<Header $toggle={isToggle} onClick={() => setIsToggle(!isToggle)}>
|
|
15
|
+
<p>{label}</p>
|
|
16
|
+
<Icon />
|
|
17
|
+
</Header>
|
|
18
|
+
{isToggle && (
|
|
19
|
+
<>
|
|
20
|
+
{data?.optionList && (
|
|
21
|
+
<ul>
|
|
22
|
+
{data?.optionList?.map((item, idx) => (
|
|
23
|
+
<li key={idx}>
|
|
24
|
+
{item}
|
|
25
|
+
<ToggleButtonComponent />
|
|
26
|
+
</li>
|
|
27
|
+
))}
|
|
28
|
+
</ul>
|
|
29
|
+
)}
|
|
30
|
+
{data?.subSection &&
|
|
31
|
+
data?.subSection?.map((section) => (
|
|
32
|
+
<div className="section">
|
|
33
|
+
<p>{section?.title}</p>
|
|
34
|
+
<ul>
|
|
35
|
+
{section.optionList?.map((item, idx) => (
|
|
36
|
+
<li key={idx}>
|
|
37
|
+
{item}
|
|
38
|
+
<ToggleButtonComponent />
|
|
39
|
+
</li>
|
|
40
|
+
))}
|
|
41
|
+
</ul>
|
|
42
|
+
</div>
|
|
43
|
+
))}
|
|
44
|
+
</>
|
|
45
|
+
)}
|
|
46
|
+
</Container>
|
|
47
|
+
);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
const Icon = () => (
|
|
51
|
+
<svg
|
|
52
|
+
width="24"
|
|
53
|
+
height="24"
|
|
54
|
+
viewBox="0 0 24 24"
|
|
55
|
+
fill="none"
|
|
56
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
57
|
+
>
|
|
58
|
+
<path
|
|
59
|
+
d="M11.9983 8.28809L5.98828 14.2981L7.40228 15.7131L12.0023 11.1131L16.6023 15.7131L18.0093 14.2981L11.9983 8.28809Z"
|
|
60
|
+
fill="#636666"
|
|
61
|
+
/>
|
|
62
|
+
</svg>
|
|
63
|
+
);
|
|
64
|
+
|
|
65
|
+
export default OptionsDropdown;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
|
|
3
|
+
export const Container = styled.div`
|
|
4
|
+
border-radius: 10px;
|
|
5
|
+
border: 1px solid #f5f7f7;
|
|
6
|
+
background: #fff;
|
|
7
|
+
ul {
|
|
8
|
+
list-style: none;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
width: 100%;
|
|
12
|
+
padding: 15px 22px;
|
|
13
|
+
gap: 15px;
|
|
14
|
+
li {
|
|
15
|
+
width: 100%;
|
|
16
|
+
display: flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
justify-content: space-between;
|
|
19
|
+
font-size: 16px;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
.section {
|
|
23
|
+
padding: 15px 0 0;
|
|
24
|
+
> p {
|
|
25
|
+
padding: 0 22px;
|
|
26
|
+
color: #1c2434;
|
|
27
|
+
font-size: 16px;
|
|
28
|
+
font-weight: 700;
|
|
29
|
+
margin-bottom: 5px;
|
|
30
|
+
}
|
|
31
|
+
ul {
|
|
32
|
+
padding: 5px 22px 15px;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
`;
|
|
36
|
+
|
|
37
|
+
export const Header = styled.div`
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: space-between;
|
|
41
|
+
border-radius: 10px;
|
|
42
|
+
background: #f5f7f7;
|
|
43
|
+
height: 40px;
|
|
44
|
+
padding: 0px 20px;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
p {
|
|
47
|
+
color: #7c8080;
|
|
48
|
+
font-size: 18px;
|
|
49
|
+
font-weight: 700;
|
|
50
|
+
}
|
|
51
|
+
svg {
|
|
52
|
+
transform: ${({ $toggle }) =>
|
|
53
|
+
$toggle ? 'rotate(180deg)' : 'rotate(0deg)'};
|
|
54
|
+
}
|
|
55
|
+
`;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Container, Header, Wrapper } from './index.styled';
|
|
3
|
+
import OptionsDropdown from './components/optionsDropdown';
|
|
4
|
+
import {
|
|
5
|
+
CMSNotification,
|
|
6
|
+
analyticsNotification,
|
|
7
|
+
supportNotification,
|
|
8
|
+
} from '../../hooks/notificationItem';
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* @param {object} props
|
|
12
|
+
* @param {"cms" | "analytics" | "support"} props.type - switch side navigate routes type
|
|
13
|
+
* @returns {JSX.Element}
|
|
14
|
+
*/
|
|
15
|
+
const AdminNotification = ({ type }) => {
|
|
16
|
+
return (
|
|
17
|
+
<Container>
|
|
18
|
+
<Header>
|
|
19
|
+
<h1>Notifications</h1>
|
|
20
|
+
<p>
|
|
21
|
+
Settings / <span>Notifications</span>
|
|
22
|
+
</p>
|
|
23
|
+
</Header>
|
|
24
|
+
<Wrapper>
|
|
25
|
+
{type === 'analytics'
|
|
26
|
+
? analyticsNotification.map((notif, idx) => (
|
|
27
|
+
<OptionsDropdown label={notif.title} key={idx} data={notif} />
|
|
28
|
+
))
|
|
29
|
+
: type === 'support'
|
|
30
|
+
? supportNotification.map((notif, idx) => (
|
|
31
|
+
<OptionsDropdown label={notif.title} key={idx} data={notif} />
|
|
32
|
+
))
|
|
33
|
+
: CMSNotification.map((notif, idx) => (
|
|
34
|
+
<OptionsDropdown label={notif.title} key={idx} data={notif} />
|
|
35
|
+
))}
|
|
36
|
+
</Wrapper>
|
|
37
|
+
</Container>
|
|
38
|
+
);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export default AdminNotification;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import styled from "styled-components";
|
|
2
|
+
|
|
3
|
+
export const Container = styled.div`
|
|
4
|
+
padding: 18px 30px 30px;
|
|
5
|
+
`;
|
|
6
|
+
|
|
7
|
+
export const Header = styled.div`
|
|
8
|
+
display: flex;
|
|
9
|
+
width: 100%;
|
|
10
|
+
align-items: center;
|
|
11
|
+
justify-content: space-between;
|
|
12
|
+
margin-bottom: 30px;
|
|
13
|
+
h1 {
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
align-items: center;
|
|
17
|
+
gap: 10px;
|
|
18
|
+
color: #1c2434;
|
|
19
|
+
font-size: 18px;
|
|
20
|
+
}
|
|
21
|
+
p {
|
|
22
|
+
color: #64748b;
|
|
23
|
+
font-size: 16px;
|
|
24
|
+
span {
|
|
25
|
+
color: #3c50e0;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
`;
|
|
29
|
+
|
|
30
|
+
export const Wrapper = styled.div`
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
width: 100%;
|
|
34
|
+
gap: 15px;
|
|
35
|
+
`;
|
package/src/components/index.js
CHANGED
|
@@ -43,5 +43,6 @@ export { default as AdminLogin } from './AdminLogin';
|
|
|
43
43
|
export { default as AdminResetPassword } from './AdminResetPassword';
|
|
44
44
|
export { default as AdminChangePassword } from './AdminResetPassword/change-password';
|
|
45
45
|
export { default as AdminPasswordSuccess } from './AdminResetPassword/success-screen';
|
|
46
|
+
export { default as AdminNotification } from './AdminNotification';
|
|
46
47
|
|
|
47
48
|
export { default as GraphMap } from './GraphMap';
|
|
@@ -51,7 +51,9 @@ const SideBar = ({ routes }) => {
|
|
|
51
51
|
<NavLinkStyled
|
|
52
52
|
activeClassName="active"
|
|
53
53
|
to={route?.path}
|
|
54
|
-
onClick={() =>
|
|
54
|
+
onClick={() =>
|
|
55
|
+
window.open(route.path, route?.newTab ? "_blank" : "")
|
|
56
|
+
}
|
|
55
57
|
className={
|
|
56
58
|
route?.label !== "Learning"
|
|
57
59
|
? window.location.pathname.includes(
|
|
@@ -100,10 +100,11 @@ export const sideMenuOptions = [
|
|
|
100
100
|
// notifications: 2,
|
|
101
101
|
},
|
|
102
102
|
{
|
|
103
|
-
path: "
|
|
103
|
+
path: "https://developer.learngual.com",
|
|
104
104
|
icon: <DocumentIcon />,
|
|
105
105
|
iconActive: <DocumentIconActive />,
|
|
106
106
|
text: "Documentation",
|
|
107
|
+
newTab: true,
|
|
107
108
|
// notifications: 5,
|
|
108
109
|
},
|
|
109
110
|
{
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
export const CMSNotification = [
|
|
2
|
+
{
|
|
3
|
+
title: 'CMS',
|
|
4
|
+
optionList: [
|
|
5
|
+
'Notify me when a question is reviewed and approved',
|
|
6
|
+
'Notify me when a question is reviewed and declined',
|
|
7
|
+
'Notify me when a lesson is reviewed and approved',
|
|
8
|
+
'Notify me when a lesson is reviewed and declined',
|
|
9
|
+
'Notify me when a new topic (lesson) is added',
|
|
10
|
+
'Notify me when a new category is added',
|
|
11
|
+
'Notify me when questions are published to the library',
|
|
12
|
+
'Notify me when a question format title is changed',
|
|
13
|
+
],
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
title: 'Alert',
|
|
17
|
+
subSection: [
|
|
18
|
+
{
|
|
19
|
+
title: 'Push Notification',
|
|
20
|
+
optionList: [
|
|
21
|
+
'Notify me when a push notification is approved',
|
|
22
|
+
'Notify me when a push notification is declined',
|
|
23
|
+
'Notify me when a scheduled notification is rent',
|
|
24
|
+
],
|
|
25
|
+
},
|
|
26
|
+
],
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
title: 'Jetfuel',
|
|
30
|
+
optionList: [
|
|
31
|
+
'Notify me when a jetfuel is scheduled',
|
|
32
|
+
'Notify me when a scheduled jetfuel is running',
|
|
33
|
+
'Notify me when a jetfuel schedule has ended',
|
|
34
|
+
],
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
title: 'Support',
|
|
38
|
+
subSection: [
|
|
39
|
+
{
|
|
40
|
+
title: 'Tickets',
|
|
41
|
+
optionList: [
|
|
42
|
+
'Notify me when a request has been received',
|
|
43
|
+
'Notify me when a ticket has been created',
|
|
44
|
+
'Notify me when a ticket has been resolved',
|
|
45
|
+
'Notify me when a ticket has been flagged',
|
|
46
|
+
],
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
title: 'Live Chat',
|
|
50
|
+
optionList: ['Notify me when I have a new chat'],
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
title: 'Flaggged Account',
|
|
54
|
+
optionList: ['Notify me when a user flags an account'],
|
|
55
|
+
},
|
|
56
|
+
],
|
|
57
|
+
},
|
|
58
|
+
|
|
59
|
+
{
|
|
60
|
+
title: 'Settings',
|
|
61
|
+
subSection: [
|
|
62
|
+
{
|
|
63
|
+
title: 'Admin',
|
|
64
|
+
optionList: [
|
|
65
|
+
'Notify me when an admin submits profile',
|
|
66
|
+
'Notify me when an admin is removed',
|
|
67
|
+
],
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
title: 'Roles & Permission',
|
|
71
|
+
optionList: [
|
|
72
|
+
'Notify me when a role is assigned',
|
|
73
|
+
'Notify me when a role is edited',
|
|
74
|
+
'Notify me when a role is deleted',
|
|
75
|
+
],
|
|
76
|
+
},
|
|
77
|
+
],
|
|
78
|
+
},
|
|
79
|
+
];
|
|
80
|
+
|
|
81
|
+
export const supportNotification = [
|
|
82
|
+
CMSNotification[1],
|
|
83
|
+
CMSNotification[3],
|
|
84
|
+
CMSNotification[4],
|
|
85
|
+
];
|
|
86
|
+
|
|
87
|
+
export const analyticsNotification = [CMSNotification[4]];
|