Skip to content

Commit 00c51e0

Browse files
jmgasperjmgasper
committed
Changes to sorting and filtering due to QA reports
1 parent 7ba11ac commit 00c51e0

File tree

6 files changed

+159
-40
lines changed

6 files changed

+159
-40
lines changed

‎src/actions/challenges.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@ export function loadChallengesByPage (
6969
filterChallengeType = {},
7070
filterDate = {},
7171
filterSortBy = null,
72-
filterSortOrder = null
72+
filterSortOrder = null,
73+
perPage = PAGE_SIZE
7374
) {
7475
return (dispatch, getState) => {
7576
if (_.isObject(projectId)) {
@@ -83,7 +84,7 @@ export function loadChallengesByPage (
8384
filterDate,
8485
filterSortBy,
8586
filterSortOrder,
86-
perPage: PAGE_SIZE,
87+
perPage,
8788
page
8889
})
8990
} else {
@@ -97,7 +98,7 @@ export function loadChallengesByPage (
9798
filterDate,
9899
filterSortBy,
99100
filterSortOrder,
100-
perPage: PAGE_SIZE,
101+
perPage,
101102
page
102103
})
103104
}
@@ -152,7 +153,7 @@ export function loadChallengesByPage (
152153

153154
return fetchChallenges(filters, {
154155
page,
155-
perPage: PAGE_SIZE
156+
perPage
156157
// memberId: getState().auth.user ? getState().auth.user.userId : null
157158
}).then((res) => {
158159
dispatch({

‎src/components/ChallengesComponent/ChallengeCard/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ class ChallengeCard extends React.Component {
259259

260260
<Link className={styles.col2} to={`/projects/${challenge.projectId}/challenges/${challenge.id}/view`} onClick={() => setActiveProject(parseInt(challenge.projectId))}>
261261
<div className={styles.name}>
262-
<span className={styles.block}>{challenge.name}</span>
262+
<span className={styles.link}>{challenge.name}</span>
263263
</div>
264264
</Link>
265265
<div className={styles.col3}>
@@ -274,9 +274,9 @@ class ChallengeCard extends React.Component {
274274
<div className={styles.col4}>
275275
<span>{challenge.numOfSubmissions}</span>
276276
</div>
277-
<Link className={styles.col3} to={`/projects/${challenge.projectId}/challenges/${challenge.id}/view`}>
277+
<div className={styles.col3}>
278278
{renderStatus(challenge.status.toUpperCase(), getStatusText)}
279-
</Link>
279+
</div>
280280
<div className={styles.col6}>
281281
{(disableHover ? <Link className={styles.link} to={`/projects/${challenge.projectId}/challenges/${challenge.id}/edit`}>Edit</Link> : hoverComponents(challenge, this.onUpdateLaunch, this.deleteModalLaunch))}
282282
</div>

‎src/components/ChallengesComponent/ChallengeList/ChallengeList.module.scss‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,16 @@
160160
}
161161

162162
.challengeInput {
163-
width: 94% !important;
163+
width: 60% !important;
164+
max-width: 230px !important;
165+
}
166+
167+
.searchInputWrapper {
168+
display: flex;
169+
}
170+
171+
.resetFilter {
172+
margin-left: 35px;
164173
}
165174

166175
@-moz-document url-prefix() {
@@ -216,12 +225,21 @@
216225
}
217226
}
218227

219-
.paginationContainer {
228+
.footer {
220229
display: flex;
221230
justify-content: flex-end;
222231
margin-top: 30px;
223232
}
224233

234+
.perPageContainer {
235+
margin-right: 20px;
236+
max-width: 150px;
237+
}
238+
239+
.paginationContainer {
240+
display: flex;
241+
}
242+
225243
.modalContainer {
226244
padding: 0;
227245
position: fixed;

‎src/components/ChallengesComponent/ChallengeList/index.js‎

Lines changed: 123 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import DateTime from '@nateradebaugh/react-datetime'
1212
import Pagination from 'react-js-pagination'
1313
import cn from 'classnames'
1414

15-
import { PrimaryButton } from '../../Buttons'
15+
import { OutlineButton, PrimaryButton } from '../../Buttons'
1616
import Modal from '../../Modal'
1717
import 'react-tabs/style/react-tabs.css'
1818
import styles from './ChallengeList.module.scss'
@@ -22,7 +22,7 @@ import Message from '../Message'
2222
import SortIcon from '../../../assets/images/sort-icon.svg'
2323
import Select from '../../Select'
2424

25-
import { CHALLENGE_STATUS } from '../../../config/constants'
25+
import { CHALLENGE_STATUS, PAGE_SIZE, PAGINATION_PER_PAGE_OPTIONS } from '../../../config/constants'
2626
import { checkAdmin } from '../../../util/tc'
2727

2828
require('bootstrap/scss/bootstrap.scss')
@@ -46,12 +46,14 @@ class ChallengeList extends Component {
4646
}
4747
this.directUpdateSearchParam = this.updateSearchParam.bind(this) // update search param without debounce
4848
this.handlePageChange = this.handlePageChange.bind(this) // update search param without debounce
49+
this.handlePerPageChange = this.handlePerPageChange.bind(this)
4950
this.showError = this.showError.bind(this)
5051
this.hideError = this.hideError.bind(this)
5152
this.reloadChallengeList = this.reloadChallengeList.bind(this)
5253
this.updateSearchParam = debounce(this.updateSearchParam.bind(this), 1000)
5354
this.updateSort = this.updateSort.bind(this)
5455
this.update = debounce(this.updateSearchParam.bind(this), 1000)
56+
this.resetFilter = this.resetFilter.bind(this)
5557
}
5658

5759
/**
@@ -111,7 +113,7 @@ class ChallengeList extends Component {
111113

112114
/**
113115
* Update filter for getting project by pagination
114-
* @param {Number} pageNumber page numer
116+
* @param {Number} pageNumber page number
115117
*/
116118
handlePageChange (pageNumber) {
117119
const { searchText } = this.state
@@ -142,6 +144,44 @@ class ChallengeList extends Component {
142144
}
143145
}
144146

147+
/**
148+
* Update filter for getting project by pagination
149+
* @param {Number} perPageNumber per page number
150+
*/
151+
handlePerPageChange (option) {
152+
const perPageNumber = option.value
153+
const { searchText, sortBy, sortOrder } = this.state
154+
const {
155+
perPage,
156+
page,
157+
loadChallengesByPage,
158+
activeProjectId,
159+
dashboard,
160+
filterProjectOption,
161+
status,
162+
selfService,
163+
filterChallengeType,
164+
filterDate
165+
} = this.props
166+
167+
let projectId = dashboard ? filterProjectOption : activeProjectId
168+
if (perPage !== perPageNumber) {
169+
loadChallengesByPage(
170+
page,
171+
projectId,
172+
status,
173+
searchText,
174+
selfService,
175+
this.getHandle(),
176+
filterChallengeType,
177+
filterDate,
178+
sortBy,
179+
sortOrder,
180+
perPageNumber
181+
)
182+
}
183+
}
184+
145185
/**
146186
* Reload challenge list
147187
*/
@@ -259,6 +299,40 @@ class ChallengeList extends Component {
259299
) : null
260300
}
261301

302+
resetFilter () {
303+
const {
304+
activeProjectId,
305+
dashboard,
306+
filterProjectOption,
307+
selfService,
308+
loadChallengesByPage
309+
} = this.props
310+
311+
this.setState({
312+
searchText: '',
313+
challengeType: null,
314+
sortBy: '',
315+
sortOrder: 'asc',
316+
challengeDate: {}
317+
})
318+
319+
let projectId = dashboard ? filterProjectOption : activeProjectId
320+
321+
loadChallengesByPage(
322+
1,
323+
projectId,
324+
null,
325+
'',
326+
selfService,
327+
this.getHandle(),
328+
null,
329+
{},
330+
null,
331+
null,
332+
PAGE_SIZE
333+
)
334+
}
335+
262336
render () {
263337
const {
264338
searchText,
@@ -423,22 +497,30 @@ class ChallengeList extends Component {
423497
</div>
424498
)}
425499
<div className={styles['col-6']}>
426-
<DebounceInput
427-
className={styles.challengeInput}
428-
minLength={2}
429-
debounceTimeout={300}
430-
placeholder='Search Challenges'
431-
onChange={e =>
432-
this.updateSearchParam(
433-
e.target.value,
434-
status,
435-
challengeType,
436-
challengeDate,
437-
projectOption
438-
)
439-
}
440-
value={searchText}
441-
/>
500+
<div className={cn(styles.field, styles.input1)}>
501+
<label htmlFor='startDate'>Search :</label>
502+
</div>
503+
<div className={styles['searchInputWrapper']}>
504+
<DebounceInput
505+
className={styles.challengeInput}
506+
minLength={2}
507+
debounceTimeout={300}
508+
placeholder='Search Challenges'
509+
onChange={e =>
510+
this.updateSearchParam(
511+
e.target.value,
512+
status,
513+
challengeType,
514+
challengeDate,
515+
projectOption
516+
)
517+
}
518+
value={searchText}
519+
/>
520+
<div className={styles['resetFilter']}>
521+
<OutlineButton text='Reset Filters' type={'info'} onClick={this.resetFilter} />
522+
</div>
523+
</div>
442524
</div>
443525
</div>
444526
<div className={styles.row}>
@@ -699,16 +781,28 @@ class ChallengeList extends Component {
699781
})}
700782
</ul>
701783
)}
702-
<div className={styles.paginationContainer}>
703-
<Pagination
704-
activePage={page}
705-
itemsCountPerPage={perPage}
706-
totalItemsCount={totalChallenges}
707-
pageRangeDisplayed={5}
708-
onChange={this.handlePageChange}
709-
itemClass='page-item'
710-
linkClass='page-link'
711-
/>
784+
<div className={styles.footer}>
785+
<div className={styles.perPageContainer}>
786+
<Select
787+
styles={styles}
788+
name='perPage'
789+
value={{ label: perPage, value: perPage }}
790+
placeholder='Per page'
791+
options={PAGINATION_PER_PAGE_OPTIONS}
792+
onChange={this.handlePerPageChange}
793+
/>
794+
</div>
795+
<div className={styles.paginationContainer}>
796+
<Pagination
797+
activePage={page}
798+
itemsCountPerPage={perPage}
799+
totalItemsCount={totalChallenges}
800+
pageRangeDisplayed={5}
801+
onChange={this.handlePageChange}
802+
itemClass='page-item'
803+
linkClass='page-link'
804+
/>
805+
</div>
712806
</div>
713807
{warningModal}
714808
</div>

‎src/components/ChallengesComponent/ChallengeTag/ChallengeTag.module.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ $corner-radius: 2px;
2222
color: $white;
2323
padding: $track-code-pad - 1 0 $track-code-pad;
2424
border-radius: 4px;
25-
cursor: pointer;
2625
width: 100%;
2726
height: 100%;
2827

‎src/config/constants.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ export const ADMIN_ROLES = [
222222
export const downloadAttachmentURL = (challengeId, attachmentId, token) =>
223223
`${CHALLENGE_API_URL}/${challengeId}/attachments/${attachmentId}/download?token=${token}`
224224

225-
export const PAGE_SIZE = 50
225+
export const PAGE_SIZE = 10
226226

227227
/**
228228
* The minimal number of characters to enter before starting showing autocomplete suggestions
@@ -301,3 +301,10 @@ export const MULTI_ROUND_CHALLENGE_DESC_TEMPLATE = '\n\n### ROUND 1\n' +
301301
export const MAX_CHECKPOINT_PRIZE_COUNT = 8
302302
export const DEFAULT_CHECKPOINT_PRIZE = 50
303303
export const DEFAULT_CHECKPOINT_PRIZE_COUNT = 5
304+
305+
export const PAGINATION_PER_PAGE_OPTIONS = [
306+
{ label: '5', value: '5' },
307+
{ label: '10', value: '10' },
308+
{ label: '25', value: '25' },
309+
{ label: '50', value: '50' }
310+
]

0 commit comments

Comments
 (0)