Skip to content

Commit 6e0b22a

Browse files
one-communityone-community
authored
Merge pull request #3510 from OneCommunityGlobal/Manvitha-bmdashboard-lessons-add-form
Sharadha taking over for Manvitha-bmdashbaord-lessons-add-form
2 parents e23723b + 5ceffde commit 6e0b22a

4 files changed

Lines changed: 301 additions & 1 deletion

File tree

‎src/components/App.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,12 @@ function UpdateDocumentTitle() {
109109
{ pattern: /^\/$/, title: `Dashboard - ${fullName}` },
110110
{ pattern: /^\/kitchenandinventory\/login$/, title: 'Kitchen and Inventory Login' },
111111
{ pattern: /^\/kitchenandinventory$/, title: 'Kitchen and Inventory Dashboard' },
112-
{ pattern: /.*/, title: 'HGN APP' }, // Default case
112+
{ pattern: /^\/bmdashboard\/lessons\/add$/, title: 'Add Lessons' },
113113
{
114114
pattern: /^\/communityportal\/activity\/activityid\/feedback$/,
115115
title: 'Activity Feedback',
116116
},
117+
{ pattern: /.*/, title: 'HGN APP' }, // Default case
117118
];
118119

119120
useEffect(() => {

‎src/components/BMDashboard/Lessons/AddLessons.jsx‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
/* eslint-disable */
2+
import React, { useState } from 'react';
3+
import { Form, Button, DropdownButton, Dropdown } from 'react-bootstrap';
4+
import 'bootstrap/dist/css/bootstrap.min.css';
5+
import { toast } from 'react-toastify';
6+
import 'react-toastify/dist/ReactToastify.css';
7+
import { useSelector } from 'react-redux';
8+
import styles from './AddLessons.module.css';
9+
10+
function AddLessons() {
11+
const darkMode = useSelector(state => state.theme.darkMode);
12+
const defaultProject = 'Building 1'; // Can be Modified after integrating the API
13+
const [content, setContent] = useState('');
14+
const [project, setProject] = useState(defaultProject);
15+
const [tags, setTags] = useState([defaultProject]);
16+
const [tagInput, setTagInput] = useState('');
17+
const [viewBy, setViewBy] = useState('All');
18+
const [file, setFile] = useState(null);
19+
20+
const handleTagKeyPress = e => {
21+
if (e.key === 'Enter' && tagInput.trim() !== '') {
22+
e.preventDefault();
23+
const newTag = tagInput.trim();
24+
if (!tags.includes(newTag)) {
25+
setTags([...tags, newTag]);
26+
}
27+
setTagInput('');
28+
}
29+
};
30+
31+
const handleFileChange = e => {
32+
setFile(e);
33+
};
34+
35+
const handleSubmit = () => {
36+
let count = 0;
37+
if (tags.length === 0) {
38+
toast.error('Please enter a tag');
39+
count += 1;
40+
}
41+
if (!content.trim()) {
42+
toast.error('Please write a lesson');
43+
count += 1;
44+
}
45+
if (count === 0) {
46+
const lessonData = {
47+
content,
48+
tags: [...tags],
49+
project,
50+
viewBy,
51+
file,
52+
};
53+
console.log('lesson posted');
54+
console.log(lessonData);
55+
// Make API call here to integrate the API
56+
toast.success('Lesson submitted successfully!');
57+
handleReset();
58+
}
59+
};
60+
61+
const handleReset = () => {
62+
setContent('');
63+
setProject(defaultProject);
64+
setTags([defaultProject]);
65+
setViewBy('All');
66+
setFile(null);
67+
};
68+
69+
const handleProjectChange = newProject => {
70+
setProject(newProject);
71+
const buildingTags = [
72+
'Building 1',
73+
'Building 2',
74+
'Building 3',
75+
'Commercial Test - Project',
76+
'Residential Test - Project',
77+
];
78+
const filteredTags = tags.filter(tag => !buildingTags.includes(tag));
79+
// Add the selected project
80+
if (!filteredTags.includes(newProject)) {
81+
filteredTags.push(newProject);
82+
}
83+
setTags(filteredTags);
84+
};
85+
86+
const handleDeleteTag = deleteTag => {
87+
setTags(tags => tags.filter(tag => tag !== deleteTag));
88+
};
89+
90+
return (
91+
<div className={darkMode ? styles.darkPageWrapper : ''}>
92+
<div className={`${styles.formContainer} ${darkMode ? 'bg-dark text-light' : ''}`}>
93+
<h5 className="mb-4">Write a Lesson</h5>
94+
95+
<Form.Group controlId="lessonContent" className="mb-3">
96+
<Form.Control
97+
as="textarea"
98+
rows={5}
99+
placeholder="Enter the lesson you learn..."
100+
value={content}
101+
onChange={e => setContent(e.target.value)}
102+
className={darkMode ? 'bg-dark text-light border-secondary' : ''}
103+
/>
104+
</Form.Group>
105+
106+
<Form.Group controlId="tagInput" className="mb-3">
107+
<Form.Label>Add Tag</Form.Label>
108+
<Form.Control
109+
type="text"
110+
placeholder="Input tag for the lesson"
111+
value={tagInput}
112+
onChange={e => setTagInput(e.target.value)}
113+
onKeyDown={handleTagKeyPress}
114+
className={darkMode ? 'bg-dark text-light border-secondary' : ''}
115+
/>
116+
<div className="mt-2 d-flex flex-wrap">
117+
{tags.map(tag => (
118+
<span key={tag} className={`badge bg-secondary ${styles.tagBadge}`}>
119+
{tag}
120+
<button
121+
type="button"
122+
className={`${styles.tagDeleteButton} ms-2`}
123+
onClick={() => handleDeleteTag(tag)}
124+
>
125+
&times;
126+
</button>
127+
</span>
128+
))}
129+
</div>
130+
</Form.Group>
131+
132+
<Form.Group className="mb-3">
133+
<div className="d-flex justify-content-between align-items-end">
134+
<div style={{ flex: 1 }}>
135+
<Form.Label className="ms-1">Belongs to</Form.Label>
136+
<DropdownButton
137+
variant="outline-secondary"
138+
title={project}
139+
onSelect={handleProjectChange}
140+
className="w-100"
141+
>
142+
<Dropdown.Item eventKey="Building 1">Building 1</Dropdown.Item>
143+
<Dropdown.Item eventKey="Building 2">Building 2</Dropdown.Item>
144+
<Dropdown.Item eventKey="Building 3">Building 3</Dropdown.Item>
145+
<Dropdown.Item eventKey="Commercial Test - Project">
146+
Commercial Test - Project
147+
</Dropdown.Item>
148+
<Dropdown.Item eventKey="Residential Test - Project">
149+
Residential Test - Project
150+
</Dropdown.Item>
151+
</DropdownButton>
152+
</div>
153+
154+
<div style={{ flex: 1 }}>
155+
<Form.Label className="ms-1">View by</Form.Label>
156+
<DropdownButton
157+
variant="outline-secondary"
158+
title={viewBy}
159+
onSelect={val => setViewBy(val)}
160+
className="w-100"
161+
>
162+
<Dropdown.Item eventKey="All">All</Dropdown.Item>
163+
<Dropdown.Item eventKey="Owner">Owner</Dropdown.Item>
164+
<Dropdown.Item eventKey="Admin">Admin</Dropdown.Item>
165+
<Dropdown.Item eventKey="Volunteer">Volunteer</Dropdown.Item>
166+
</DropdownButton>
167+
</div>
168+
</div>
169+
</Form.Group>
170+
171+
<Form.Group className="mb-4">
172+
<Form.Label>Upload Appendix</Form.Label>
173+
<div
174+
onDragOver={e => e.preventDefault()}
175+
onDrop={e => {
176+
e.preventDefault();
177+
const droppedFile = e.dataTransfer.files[0];
178+
setFile(droppedFile);
179+
}}
180+
className={`${styles.fileUploadBox} ${
181+
darkMode ? 'bg-dark text-light border-secondary' : ''
182+
}`}
183+
onClick={() => document.getElementById('fileInput').click()}
184+
>
185+
{file ? (
186+
<div>
187+
<strong>Selected:</strong> {file.name}
188+
</div>
189+
) : (
190+
'Drag and drop a file here, or click to browse'
191+
)}
192+
<input
193+
type="file"
194+
id="fileInput"
195+
onChange={e => handleFileChange(e.target.files[0])}
196+
style={{ display: 'none' }}
197+
/>
198+
</div>
199+
</Form.Group>
200+
201+
<div className="d-flex justify-content-between">
202+
<Button variant="secondary" onClick={handleReset}>
203+
Cancel
204+
</Button>
205+
<Button variant="primary" onClick={handleSubmit}>
206+
Post
207+
</Button>
208+
</div>
209+
</div>
210+
</div>
211+
);
212+
}
213+
214+
export default AddLessons;

‎src/components/BMDashboard/Lessons/AddLessons.module.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.formContainer {
2+
max-width: 600px;
3+
margin: auto;
4+
background: #f7f9fc;
5+
border-radius: 10px;
6+
padding: 1.5rem;
7+
}
8+
9+
.tagBadge {
10+
padding: 4px 10px;
11+
font-size: 0.85rem;
12+
border-radius: 12px;
13+
display: inline-flex;
14+
align-items: center;
15+
margin-right: 0.5rem;
16+
margin-bottom: 0.5rem;
17+
vertical-align: middle;
18+
line-height: 1;
19+
}
20+
21+
.fileUploadBox {
22+
border: 2px dashed #6c757d;
23+
border-radius: 10px;
24+
padding: 30px;
25+
text-align: center;
26+
color: #6c757d;
27+
background-color: #f8f9fa;
28+
cursor: pointer;
29+
}
30+
31+
.tagDeleteButton {
32+
background: none;
33+
border: none;
34+
color: #fff;
35+
font-size: 0.9rem;
36+
margin-left: 6px;
37+
margin-top: -2px;
38+
padding: 0;
39+
cursor: pointer;
40+
line-height: 1;
41+
display: inline-flex;
42+
align-items: center;
43+
justify-content: center;
44+
}
45+
46+
.tagDeleteButton:hover {
47+
color: black;
48+
background-color: #6c757d;
49+
}
50+
51+
.darkPageWrapper {
52+
background-color: #1B2A41;
53+
min-height: 100vh;
54+
padding: 2rem 0;
55+
}
56+
57+
.darkPageWrapper .formContainer {
58+
background-color: #162e4a;
59+
color: #f0f0f0;
60+
border-radius: 10px;
61+
padding: 1.5rem;
62+
box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
63+
}
64+
65+
.darkPageWrapper :global(.form-control),
66+
.darkPageWrapper :global(.dropdown-menu) {
67+
background-color: #1B2A41;
68+
color: #fff;
69+
border-color: #555;
70+
}
71+
72+
.darkPageWrapper :global(.form-label),
73+
.darkPageWrapper :global(.text) {
74+
color: #ccc;
75+
}
76+
77+
.darkPageWrapper :global(.dropdown-item) {
78+
color: #fff;
79+
}
80+
81+
.darkPageWrapper :global(.dropdown-item:hover) {
82+
background-color: #444;
83+
}

‎src/routes.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ import FeedbackRatingEntry from './components/FeedbackActivityModal/FeedbackActi
102102
import TeamLocations from './components/TeamLocations';
103103
import Inventory from './components/Inventory';
104104
import Collaboration from './components/Collaboration';
105+
import AddLessons from './components/BMDashboard/Lessons/AddLessons';
105106
import SuggestedJobsList from './components/Collaboration/SuggestedJobsList';
106107
import TestEventRegistration from './components/EventRegistration/TestEventRegistration';
107108
import MemberList from './components/QuestionnaireDashboard/MemberList';
@@ -784,6 +785,7 @@ export default (
784785
<BMProtectedRoute path="/bmdashboard/tools/:toolId" component={ToolDetailPage} />
785786
<BMProtectedRoute path="/bmdashboard/lessonform/:projectId" component={LessonForm} />
786787
<BMProtectedRoute path="/bmdashboard/lessonform/" component={LessonForm} />
788+
<BMProtectedRoute path="/bmdashboard/lessons/add" component={AddLessons} />
787789
<BMProtectedRoute
788790
path="/bmdashboard/inventorytypes"
789791
fallback

0 commit comments

Comments
 (0)