Skip to content

Commit ffc8ef5

Browse files
author
喜喜懒羊羊
committed
sorting buttons and title fixed
1 parent ebade00 commit ffc8ef5

3 files changed

Lines changed: 128 additions & 55 deletions

File tree

‎src/components/Projects/WBS/AddWBS/AddWBS.jsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,30 @@ import { addNewWBS } from './../../../../actions/wbs';
99
import hasPermission from 'utils/permissions';
1010

1111
const AddWBS = props => {
12-
const [showAddButton, setShowAddButton] = useState(false);
12+
const darkMode = props.state.theme.darkMode;
1313
const [newName, setNewName] = useState('');
14+
const [showAddButton, setShowAddButton] = useState(false);
1415
const canPostWBS = props.hasPermission('postWbs');
15-
const { darkMode } = props.state.theme;
1616

17-
const changeNewName = newName => {
18-
if (newName.length !== 0) {
19-
setShowAddButton(true);
20-
} else {
17+
const changeNewName = value => {
18+
setNewName(value);
19+
setShowAddButton(value.length >= 3);
20+
};
21+
22+
const handleAddWBS = () => {
23+
if (newName.length >= 3) {
24+
props.addNewWBS(props.projectId, newName);
25+
setNewName('');
2126
setShowAddButton(false);
2227
}
23-
setNewName(newName);
2428
};
2529

2630
return (
2731
<>
2832
{canPostWBS ? (
2933
<div className="input-group" id="new_project">
3034
<div className="input-group-prepend">
31-
<span className={`input-group-text ${darkMode ? 'bg-yinmn-blue border-0 text-light' : ''}`}>Add new WBS</span>
35+
<span className={`input-group-text ${darkMode ? 'bg-yinmn-blue border-0 text-light' : ''}`}>Add new WBS</span>
3236
</div>
3337

3438
<input
@@ -44,11 +48,17 @@ const AddWBS = props => {
4448
<button
4549
className="btn btn-outline-primary"
4650
type="button"
47-
onClick={e => props.addNewWBS(newName, props.projectId)}
51+
onClick={handleAddWBS}
4852
>
4953
<i className="fa fa-plus" aria-hidden="true"></i>
5054
</button>
5155
) : null}
56+
<button className="btn btn-primary" type="button" onClick={props.onSortAscending}>
57+
A ↓
58+
</button>
59+
<button className="btn btn-primary" type="button" onClick={props.onSortDescending}>
60+
D ↑
61+
</button>
5262
</div>
5363
</div>
5464
) : null}

‎src/components/Projects/WBS/wbs.jsx‎

Lines changed: 73 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -26,72 +26,99 @@ const WBS = props => {
2626
}, [projectId]);
2727

2828
useEffect(() => {
29+
if (!props.state.wbs.WBSItems) return;
30+
2931
const sortedItems = [...props.state.wbs.WBSItems];
3032
if (sortOrder === 'asc') {
31-
sortedItems.sort((a, b) => a.wbsName.localeCompare(b.wbsName));
33+
sortedItems.sort((a, b) => a.wbsName.toLowerCase().localeCompare(b.wbsName.toLowerCase()));
3234
} else if (sortOrder === 'desc') {
33-
sortedItems.sort((a, b) => b.wbsName.localeCompare(a.wbsName));
35+
sortedItems.sort((a, b) => b.wbsName.toLowerCase().localeCompare(a.wbsName.toLowerCase()));
3436
} else {
3537
sortedItems.sort((a, b) => new Date(b.modifiedDatetime) - new Date(a.modifiedDatetime));
3638
}
3739
setSortedWBSItems(sortedItems);
3840
}, [props.state.wbs.WBSItems, sortOrder]);
3941

4042
const handleSortChange = (newOrder) => {
41-
setSortOrder(newOrder);
43+
setSortOrder(prevOrder => prevOrder === newOrder ? 'recent' : newOrder);
4244
};
4345

4446
return (
4547
<React.Fragment>
4648
<div className={darkMode ? 'bg-oxford-blue text-light' : ''} style={{minHeight: "100%"}}>
4749
<div className={`container pt-2 ${darkMode ? 'bg-yinmn-blue-light text-light' : ''}`}>
4850
<nav aria-label="breadcrumb">
49-
<ol className={`breadcrumb ${darkMode ? 'bg-space-cadet' : ''}`} style={darkMode ? boxStyleDark : boxStyle}>
50-
<NavItem tag={Link} to={`/projects/`}>
51-
<button type="button" className="btn btn-secondary mr-2" style={darkMode ? boxStyleDark : boxStyle}>
52-
<i className="fa fa-chevron-circle-left" aria-hidden="true"></i>
53-
</button>
54-
<span style={{ marginLeft: '8px', marginRight:'8px' }}>Return to Project List</span>
55-
</NavItem>
56-
<div id="member_project__name" style={{ flex: '1', textAlign: 'center', fontWeight: 'bold', display: 'flex',
57-
alignItems: 'center', justifyContent: 'center', }}>Project Name: {projectName}</div>
58-
</ol>
51+
<div className={`d-flex align-items-center breadcrumb ${darkMode ? 'bg-space-cadet' : ''}`}
52+
style={{
53+
...darkMode ? boxStyleDark : boxStyle,
54+
backgroundColor: darkMode ? '' : '#E9ECEF',
55+
margin: '0 0 16px',
56+
padding: '12px 16px',
57+
position: 'relative'
58+
}}>
59+
<div style={{ position: 'absolute', left: '1rem' }}>
60+
<NavItem tag={Link} to={`/projects/`}>
61+
<button type="button" className="btn btn-secondary" style={darkMode ? boxStyleDark : boxStyle}>
62+
<i className="fa fa-chevron-circle-left" aria-hidden="true"></i>
63+
<span style={{ marginLeft: '8px' }}>Return to Project List</span>
64+
</button>
65+
</NavItem>
66+
</div>
67+
<div style={{
68+
width: '100%',
69+
textAlign: 'center',
70+
fontWeight: 'bold',
71+
fontSize: '1.5rem' // 相当于 24px
72+
}}>{projectName}</div>
73+
</div>
5974
</nav>
6075

61-
<AddWBS projectId={projectId} />
76+
<AddWBS
77+
projectId={projectId}
78+
onSortAscending={() => handleSortChange('asc')}
79+
onSortDescending={() => handleSortChange('desc')}
80+
/>
6281

63-
<table className={`table table-bordered table-responsive-sm ${darkMode ? 'bg-yinmn-blue text-light dark-mode' : '' }`}>
64-
<thead>
65-
<tr className={darkMode ? 'bg-space-cadet' : ''}>
66-
<th scope="col" id="members__order">
67-
#
68-
</th>
69-
<th scope="col" id="members__name">
70-
Name
71-
<span style={{ marginLeft: '8px', cursor: 'pointer' }}>
72-
<i
73-
className={`fa ${sortOrder === 'recent' ? 'fa-sort' : sortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}
74-
onClick={() => handleSortChange(sortOrder === 'asc' ? 'desc' : sortOrder === 'desc' ? 'recent' : 'asc')}
75-
></i>
76-
</span>
77-
</th>
78-
<th scope="col" id="members__name"></th>
79-
</tr>
80-
</thead>
81-
<tbody>
82-
{sortedWBSItems.map((item, i) =>
83-
item ? (
84-
<WBSItem
85-
index={i + 1}
86-
key={item._id}
87-
wbsId={item._id}
88-
projectId={projectId}
89-
name={item.wbsName}
90-
/>
91-
) : null,
92-
)}
93-
</tbody>
94-
</table>
82+
{!props.state.wbs.WBSItems ? (
83+
<div className="d-flex justify-content-center align-items-center pt-4">
84+
<div className="spinner-border text-primary" role="status">
85+
<span className="sr-only">Loading...</span>
86+
</div>
87+
</div>
88+
) : (
89+
<table className={`table table-bordered table-responsive-sm ${darkMode ? 'bg-yinmn-blue text-light dark-mode' : '' }`}>
90+
<thead>
91+
<tr className={darkMode ? 'bg-space-cadet' : ''}>
92+
<th scope="col" id="members__order">
93+
#
94+
</th>
95+
<th scope="col" id="members__name">
96+
Name
97+
<span style={{ marginLeft: '8px', cursor: 'pointer' }}>
98+
<i
99+
className={`fa ${sortOrder === 'recent' ? 'fa-sort' : sortOrder === 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}
100+
onClick={() => handleSortChange(sortOrder === 'asc' ? 'desc' : sortOrder === 'desc' ? 'recent' : 'asc')}
101+
></i>
102+
</span>
103+
</th>
104+
<th scope="col" id="members__name"></th>
105+
</tr>
106+
</thead>
107+
<tbody>
108+
{sortedWBSItems.map((item, i) =>
109+
item ? (
110+
<WBSItem
111+
index={i + 1}
112+
key={item._id}
113+
wbsId={item._id}
114+
projectId={projectId}
115+
name={item.wbsName}
116+
/>
117+
) : null,
118+
)}
119+
</tbody>
120+
</table>
121+
)}
95122
</div>
96123
</div>
97124
</React.Fragment>

‎src/styles/print.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
@media print {
2+
/* 确保导航栏在打印时保持正常大小 */
3+
.navbar,
4+
.navbar * {
5+
transform: none !important;
6+
-webkit-transform: none !important;
7+
-moz-transform: none !important;
8+
-ms-transform: none !important;
9+
scale: 1 !important;
10+
zoom: 1 !important;
11+
}
12+
13+
/* 设置导航栏打印时的固定尺寸 */
14+
.navbar {
15+
width: 100% !important;
16+
height: auto !important;
17+
min-height: 60px !important;
18+
position: relative !important;
19+
display: flex !important;
20+
align-items: center !important;
21+
}
22+
23+
/* 确保导航栏内容正确显示 */
24+
.navbar-content {
25+
display: flex !important;
26+
align-items: center !important;
27+
justify-content: space-between !important;
28+
width: 100% !important;
29+
}
30+
31+
/* 防止文本溢出 */
32+
.navbar * {
33+
white-space: normal !important;
34+
overflow: visible !important;
35+
}
36+
}

0 commit comments

Comments
 (0)