Skip to content

Commit cfb3cc9

Browse files
one-communityone-community
authored
Merge pull request #4385 from OneCommunityGlobal/xinyi_fix_dropdown_issue
Sai Sandeep taking over for Xinyi - fix: dropdown and issue data fetching
2 parents bf7e94b + 893df5a commit cfb3cc9

9 files changed

Lines changed: 235 additions & 193 deletions

File tree

‎src/components/BMDashboard/Issue/Issue.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useHistory, useParams } from 'react-router-dom';
55
import axios from 'axios';
66
import { ENDPOINTS } from '../../../utils/URL';
77
import styles from './Issue.module.css';
8+
import { useSelector } from 'react-redux';
89

910
function Issue() {
1011
const ISSUE_FORM_HEADER = 'ISSUE LOG';
@@ -41,6 +42,8 @@ function Issue() {
4142

4243
const otherOption = ['Other'];
4344

45+
const darkMode = useSelector(state => state.theme.darkMode);
46+
4447
const [formData, setFormData] = useState({
4548
issueDate: '',
4649
dropdown: defaultOption,
@@ -222,7 +225,9 @@ function Issue() {
222225
}, []);
223226

224227
return (
225-
<div className={`${styles.issueFormContainer}`}>
228+
<div
229+
className={darkMode ? `${styles.darkModeIssueFormContainer}` : `${styles.issueFormContainer}`}
230+
>
226231
<h4 className={`${styles.issueTitleText}`}>{ISSUE_FORM_HEADER}</h4>
227232
<Form>
228233
<FormGroup>

‎src/components/BMDashboard/Issue/Issue.module.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
/* stylelint-disable */
22
.issueFormContainer {
33
margin: 0 auto;
4-
max-width: 625px;
4+
width: 100%;
5+
padding: 5px;
6+
background-color: white;
7+
}
8+
9+
.darkModeIssueFormContainer{
10+
color: white;
511
}
612

713
.redText {

‎src/components/BMDashboard/Issues/IssueDashboard.jsx‎

Lines changed: 62 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { jsPDF } from 'jspdf';
3131

3232
export default function IssueDashboard() {
3333
const dispatch = useDispatch();
34-
const issues = useSelector(state => state.bmissuechart?.issues || []);
34+
const issues = useSelector(state => state.bmIssues || []);
3535
const darkMode = useSelector(state => state.theme.darkMode);
3636

3737
const [currentPage, setCurrentPage] = useState(1);
@@ -170,7 +170,6 @@ export default function IssueDashboard() {
170170
return;
171171
}
172172
const doc = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' });
173-
const pageWidth = doc.internal.pageSize.getWidth();
174173
const startX = 40;
175174
const startY = 50;
176175
const rowHeight = 18;
@@ -244,15 +243,17 @@ export default function IssueDashboard() {
244243
return (
245244
<div
246245
className={`container-fluid issue-dashboard min-vh-100 p-4 ${
247-
darkMode ? 'bg-oxford-blue text-light' : ''
246+
darkMode ? 'bg-oxford-blue text-light' : 'bg-light text-dark'
248247
}`}
249248
>
250249
<div>
251250
<IssueHeader />
252251
</div>
253252
<Row className="mb-3">
254253
<Col>
255-
<h4 className={`fw-semibold ${darkMode ? 'text-light' : ''}`}>Issue Dashboard</h4>
254+
<h4 className={`fw-semibold ${darkMode ? 'text-light' : 'text-dark'}`}>
255+
Issue Dashboard
256+
</h4>
256257
</Col>
257258
<Col className="d-flex justify-content-end">
258259
<UncontrolledDropdown>
@@ -282,7 +283,7 @@ export default function IssueDashboard() {
282283
<Table hover className={`mb-0 ${darkMode ? 'table-dark' : ''}`}>
283284
<thead className={darkMode ? 'table-dark' : 'table-light'}>
284285
<tr>
285-
<th className={`${styles.textEnd}`}>Issue Name </th>
286+
<th className={`${styles.textEnd}`}>Issue Name</th>
286287
<th className={`${styles.textEnd}`}>Open since</th>
287288
<th className={`${styles.textEnd}`}>Category</th>
288289
<th className={`${styles.textEnd}`}>Person dealing</th>
@@ -303,15 +304,17 @@ export default function IssueDashboard() {
303304

304305
return (
305306
<tr key={issue._id}>
306-
<td className={`fw-medium ${darkMode ? 'text-light' : ''}`}>{issue.name}</td>
307-
<td className={darkMode ? 'text-light' : ''}>{openSince}</td>
307+
<td className={`fw-medium ${darkMode ? 'text-light' : 'text-dark'}`}>
308+
{issue.name}
309+
</td>
310+
<td className={darkMode ? 'text-light' : 'text-dark'}>{openSince}</td>
308311
<td>
309312
<span className={`${styles.badge} ${styles.bgInfo} text-dark`}>{category}</span>
310313
</td>
311-
<td className={darkMode ? 'text-light' : ''}>{assignedTo}</td>
312-
<td className={darkMode ? 'text-light' : ''}>{cost}</td>
314+
<td className={darkMode ? 'text-light' : 'text-dark'}>{assignedTo}</td>
315+
<td className={darkMode ? 'text-light' : 'text-dark'}>{cost}</td>
313316
<td className={`${styles.textEnd} position-relative`}>
314-
<div className={`issue-dashboard-dropdown ${darkMode ? 'bg-oxide-blue' : ''}`}>
317+
<div className={`issue-dashboard-dropdown ${darkMode ? 'bg-oxide-blue' : ''}`}>
315318
<button
316319
type="button"
317320
aria-label="Actions menu"
@@ -333,7 +336,9 @@ export default function IssueDashboard() {
333336
>
334337
<button
335338
type="button"
336-
className={`${styles.issueDashboardDropdownItem}`}
339+
className={`${styles.issueDashboardDropdownItem} ${
340+
darkMode ? styles.issueDashboardDropdownItemDark : ''
341+
}`}
337342
onClick={() => {
338343
openRenameModal(issue);
339344
setMenuOpen(null);
@@ -344,7 +349,9 @@ export default function IssueDashboard() {
344349
</button>
345350
<button
346351
type="button"
347-
className={`${styles.issueDashboardDropdownItem}`}
352+
className={`${styles.issueDashboardDropdownItem} ${
353+
darkMode ? styles.issueDashboardDropdownItemDark : ''
354+
}`}
348355
onClick={() => {
349356
openCopyModal(issue);
350357
setMenuOpen(null);
@@ -355,7 +362,11 @@ export default function IssueDashboard() {
355362
</button>
356363
<button
357364
type="button"
358-
className={`${styles.issueDashboardDropdownItem} text-danger`}
365+
className={`${styles.issueDashboardDropdownItem} ${
366+
darkMode
367+
? `${styles.issueDashboardDropdownItemDark} text-danger`
368+
: 'text-danger'
369+
}`}
359370
onClick={() => {
360371
openDeleteModal(issue);
361372
setMenuOpen(null);
@@ -391,15 +402,17 @@ export default function IssueDashboard() {
391402
darkMode ? 'bg-space-cadet text-light' : 'bg-light text-muted'
392403
}`}
393404
>
394-
<div className={`small ${darkMode ? 'text-light' : ''}`}>
405+
<div className={`small ${darkMode ? 'text-light' : 'text-dark'}`}>
395406
Showing {currentItems.length} of {issues.length} issues
396407
</div>
397408
<nav aria-label="Issue pagination">
398409
<ul className={`${styles.pagination} pagination-sm mb-0`}>
399410
<li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
400411
<button
401412
type="button"
402-
className={`page-link ${darkMode ? 'bg-dark text-light border-secondary' : ''}`}
413+
className={`page-link ${
414+
darkMode ? 'bg-dark text-light border-secondary' : 'bg-white text-dark'
415+
}`}
403416
onClick={() => setCurrentPage(p => Math.max(p - 1, 1))}
404417
aria-label="Previous"
405418
>
@@ -410,7 +423,9 @@ export default function IssueDashboard() {
410423
<li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
411424
<button
412425
type="button"
413-
className={`page-link ${darkMode ? 'bg-dark text-light border-secondary' : ''}`}
426+
className={`page-link ${
427+
darkMode ? 'bg-dark text-light border-secondary' : 'bg-white text-dark'
428+
}`}
414429
onClick={() => setCurrentPage(p => Math.min(p + 1, totalPages))}
415430
aria-label="Next"
416431
>
@@ -423,13 +438,19 @@ export default function IssueDashboard() {
423438

424439
{/* Rename Modal */}
425440
{showRenameModal && (
426-
<div className={`${styles.issuesModalBackdrop}`}>
427-
<div className={`modal-dialog `}>
428-
<div className={`modal-content p-3 ${darkMode ? 'bg-oxford-blue text-light' : ''}`}>
441+
<div className={darkMode ? styles.issuesModalBackdropDark : styles.issuesModalBackdrop}>
442+
<div className="modal-dialog">
443+
<div
444+
className={`modal-content p-3 ${
445+
darkMode ? 'bg-oxford-blue text-light' : 'bg-white text-dark'
446+
}`}
447+
>
429448
<h5>Rename Issue</h5>
430449
<input
431450
type="text"
432-
className="form-control my-2"
451+
className={`form-control my-2 ${
452+
darkMode ? 'bg-dark text-light border-secondary' : 'bg-white text-dark'
453+
}`}
433454
value={renameValue}
434455
onChange={e => setRenameValue(e.target.value)}
435456
/>
@@ -438,16 +459,10 @@ export default function IssueDashboard() {
438459
className="btn btn-secondary mx-3"
439460
onClick={() => setShowRenameModal(false)}
440461
type="button"
441-
label="Cancel Button"
442462
>
443463
Cancel
444464
</button>
445-
<button
446-
className="btn btn-primary"
447-
onClick={confirmRename}
448-
type="button"
449-
label="Rename Button"
450-
>
465+
<button className="btn btn-primary" onClick={confirmRename} type="button">
451466
Rename
452467
</button>
453468
</div>
@@ -458,28 +473,26 @@ export default function IssueDashboard() {
458473

459474
{/* Delete Modal */}
460475
{showDeleteModal && (
461-
<div className={`${styles.issuesModalBackdrop}`}>
462-
<div className={`modal-dialog ${darkMode ? 'bg-dark text-light' : ''}`}>
463-
<div className={`modal-content p-3 ${darkMode ? 'bg-oxford-blue text-light' : ''}`}>
476+
<div className={darkMode ? styles.issuesModalBackdropDark : styles.issuesModalBackdrop}>
477+
<div className="modal-dialog">
478+
<div
479+
className={`modal-content p-3 ${
480+
darkMode ? 'bg-oxford-blue text-light' : 'bg-white text-dark'
481+
}`}
482+
>
464483
<h5>Confirm Delete</h5>
465-
<p className={`${darkMode ? 'text-light' : ''}`}>
466-
Are you sure you want to delete <strong>{selectedIssue.name}</strong>?
484+
<p>
485+
Are you sure you want to delete <strong>{selectedIssue?.name}</strong>?
467486
</p>
468487
<div className="d-flex justify-content-end gap-2 mt-2">
469488
<button
470489
className="btn btn-secondary mx-3"
471490
onClick={() => setShowDeleteModal(false)}
472491
type="button"
473-
label="Cancel Button"
474492
>
475493
Cancel
476494
</button>
477-
<button
478-
className="btn btn-danger"
479-
onClick={confirmDelete}
480-
type="button"
481-
label="Delete Button"
482-
>
495+
<button className="btn btn-danger" onClick={confirmDelete} type="button">
483496
Delete
484497
</button>
485498
</div>
@@ -490,28 +503,26 @@ export default function IssueDashboard() {
490503

491504
{/* Copy Modal */}
492505
{showCopyModal && (
493-
<div className={`${styles.issuesModalBackdrop}`}>
494-
<div className={`modal-dialog ${darkMode ? 'bg-dark text-light' : ''}`}>
495-
<div className={`modal-content p-3 ${darkMode ? 'bg-oxford-blue text-light' : ''}`}>
506+
<div className={darkMode ? styles.issuesModalBackdropDark : styles.issuesModalBackdrop}>
507+
<div className="modal-dialog">
508+
<div
509+
className={`modal-content p-3 ${
510+
darkMode ? 'bg-oxford-blue text-light' : 'bg-white text-dark'
511+
}`}
512+
>
496513
<h5>Confirm Copy</h5>
497-
<p className={`${darkMode ? 'text-light' : ''}`}>
498-
Are you sure you want to copy <strong>{selectedIssue.name}</strong>?
514+
<p>
515+
Are you sure you want to copy <strong>{selectedIssue?.name}</strong>?
499516
</p>
500517
<div className="d-flex justify-content-end gap-2 mt-2">
501518
<button
502519
className="btn btn-secondary mx-3"
503520
onClick={() => setShowCopyModal(false)}
504521
type="button"
505-
label="Cancel Button"
506522
>
507523
Cancel
508524
</button>
509-
<button
510-
className="btn btn-primary"
511-
onClick={confirmCopy}
512-
type="button"
513-
label="Copy Button"
514-
>
525+
<button className="btn btn-primary" onClick={confirmCopy} type="button">
515526
Copy
516527
</button>
517528
</div>

0 commit comments

Comments
 (0)