Skip to content

Commit 7be55df

Browse files
thread-koderthread-koder
committed
feat(users): implement the search functionality
1 parent a8ff194 commit 7be55df

File tree

4 files changed

+99
-22
lines changed

4 files changed

+99
-22
lines changed

‎components/Contributors.vue‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import { mapState } from 'vuex'
3232
import UserCard from './UserCard.vue'
3333
import PaginationBar from './PaginationBar.vue'
3434
export default {
35-
name: 'Contributors',
35+
name: 'ContributorsList',
3636
components: {
3737
UserCard,
3838
PaginationBar,
@@ -46,14 +46,26 @@ export default {
4646
currentPage: 'currentPage',
4747
period: 'period',
4848
show: 'show',
49+
userSearchTerm: 'userSearchTerm',
4950
}),
5051
},
5152
methods: {
5253
async fetchCurrentPage(page) {
53-
const response = await this.$axios.get(
54-
`v1/users?page=${this.currentPage}&sort_by=${this.sortBy}&period=${this.period}&contributors=${this.show}`
55-
)
56-
this.$store.commit('setUsers', response.data.users)
54+
if (this.userSearchTerm) {
55+
const response = await this.$axios.get(
56+
`v1/users?page=${this.currentPage}&sort_by=${this.sortBy}&period=${this.period}&contributors=${this.show}&search=${this.userSearchTerm}`,
57+
)
58+
59+
this.$store.commit('setUsers', response.data.users)
60+
this.$store.commit('setPageCount', response.data.totalPages)
61+
} else {
62+
const response = await this.$axios.get(
63+
`v1/users?page=${this.currentPage}&sort_by=${this.sortBy}&period=${this.period}&contributors=${this.show}`,
64+
)
65+
66+
this.$store.commit('setUsers', response.data.users)
67+
this.$store.commit('setPageCount', response.data.totalPages)
68+
}
5769
},
5870
},
5971
}

‎components/InputsSection.vue‎

Lines changed: 53 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
22
<div :class="isOpen ? '' : 'hidden overflow-hidden lg:block'">
3+
<div class="mx-8 pt-6">
4+
<SearchInput placeholder="Search Users..." @on-search="onSearch" />
5+
</div>
36
<div class="sort-section">
47
<h6 class="text-xs font-bold pb-2">Period:</h6>
58
<div class="flex lg:flex-col">
@@ -92,24 +95,65 @@ export default {
9295
getPeriod: 'getPeriod',
9396
getShow: 'getShow',
9497
getSortBy: 'getSortBy',
98+
getUserSearchTerm: 'getUserSearchTerm',
9599
}),
96100
},
97101
methods: {
98102
async onSortByChanged(sortBy) {
103+
this.$store.commit('setCurrentPage', 1)
99104
this.$store.commit('setSortBy', sortBy)
100-
const response = await this.$axios.get(
101-
`v1/users?sort_by=${sortBy}&page=${this.getCurrentPage}&period=${this.getPeriod}&contributors=${this.getShow}`
102-
)
103-
this.$store.commit('setUsers', response.data.users)
105+
106+
if (this.getUserSearchTerm) {
107+
const response = await this.$axios.get(
108+
`v1/users?sort_by=${sortBy}&page=${this.getCurrentPage}&period=${this.getPeriod}&contributors=${this.getShow}&search=${this.getUserSearchTerm}`,
109+
)
110+
this.$store.commit('setUsers', response.data.users)
111+
this.$store.commit('setPageCount', response.data.totalPages)
112+
} else {
113+
const response = await this.$axios.get(
114+
`v1/users?sort_by=${sortBy}&page=${this.getCurrentPage}&period=${this.getPeriod}&contributors=${this.getShow}`,
115+
)
116+
117+
this.$store.commit('setUsers', response.data.users)
118+
this.$store.commit('setPageCount', response.data.totalPages)
119+
}
104120
},
105121
async onShowChanged(show) {
106122
this.$store.commit('setCurrentPage', 1)
107-
const response = await this.$axios.get(
108-
`v1/users?sort_by=${this.getSortBy}&page=${this.getCurrentPage}&period=${this.getPeriod}&contributors=${show}`
109-
)
110123
this.$store.commit('setShow', show)
111-
this.$store.commit('setUsers', response.data.users)
112-
this.$store.commit('setPageCount', response.data.totalPages)
124+
if (this.getUserSearchTerm) {
125+
const response = await this.$axios.get(
126+
`v1/users?sort_by=${this.getSortBy}&page=${this.getCurrentPage}&period=${this.getPeriod}&contributors=${show}&search=${this.getUserSearchTerm}`,
127+
)
128+
129+
this.$store.commit('setUsers', response.data.users)
130+
this.$store.commit('setPageCount', response.data.totalPages)
131+
} else {
132+
const response = await this.$axios.get(
133+
`v1/users?sort_by=${this.getSortBy}&page=${this.getCurrentPage}&period=${this.getPeriod}&contributors=${show}`,
134+
)
135+
136+
this.$store.commit('setUsers', response.data.users)
137+
this.$store.commit('setPageCount', response.data.totalPages)
138+
}
139+
},
140+
async onSearch(searchTerm) {
141+
this.$store.commit('setCurrentPage', 1)
142+
if (searchTerm) {
143+
const response = await this.$axios.get(
144+
`v1/users?sort_by=${this.getSortBy}&page=${this.getCurrentPage}&period=${this.getPeriod}&contributors=${this.getShow}&search=${searchTerm}`,
145+
)
146+
this.$store.commit('setUserSearchTerm', searchTerm)
147+
this.$store.commit('setUsers', response.data.users)
148+
this.$store.commit('setPageCount', response.data.totalPages)
149+
} else {
150+
const response = await this.$axios.get(
151+
`v1/users?sort_by=${this.getSortBy}&page=${this.getCurrentPage}&period=${this.getPeriod}&contributors=${this.getShow}`,
152+
)
153+
this.$store.commit('setUserSearchTerm', '')
154+
this.$store.commit('setUsers', response.data.users)
155+
this.$store.commit('setPageCount', response.data.totalPages)
156+
}
113157
},
114158
},
115159
}

‎components/PeriodDropdown.vue‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,13 @@ export default {
3535
{
3636
day: 'numeric',
3737
month: 'long',
38-
}
38+
},
3939
),
4040
firstDayOfTheLastMonth: 0,
4141
lastDayOfTheLastMonth: new Date(
4242
new Date().getFullYear(),
4343
new Date().getMonth(),
44-
0
44+
0,
4545
).toLocaleString('en-GB', {
4646
day: 'numeric',
4747
month: 'long',
@@ -50,7 +50,7 @@ export default {
5050
firstDayOfLastYear: new Date(
5151
new Date().getFullYear() - 1,
5252
0,
53-
1
53+
1,
5454
).toLocaleString('en-GB', {
5555
day: 'numeric',
5656
month: 'long',
@@ -59,7 +59,7 @@ export default {
5959
lastDayOfLastYear: new Date(
6060
new Date().getFullYear() - 1,
6161
11,
62-
31
62+
31,
6363
).toLocaleString('en-GB', {
6464
day: 'numeric',
6565
month: 'long',
@@ -80,6 +80,9 @@ export default {
8080
getShow() {
8181
return this.$store.getters.getShow
8282
},
83+
getUserSearchTerm() {
84+
return this.$store.getters.getUserSearchTerm
85+
},
8386
},
8487
mounted() {
8588
const today = new Date()
@@ -100,10 +103,23 @@ export default {
100103
methods: {
101104
async onChange(e) {
102105
this.$store.commit('setPeriod', e.target.value)
103-
const response = await this.$axios.get(
104-
`/v1/users?page=${this.currentPage}&sort_by=${this.sortBy}&period=${this.period}&contributors=${this.getShow}`
105-
)
106-
this.$store.commit('setUsers', response.data.users)
106+
this.$store.commit('setCurrentPage', 1)
107+
108+
if (this.getUserSearchTerm) {
109+
const response = await this.$axios.get(
110+
`/v1/users?page=${this.currentPage}&sort_by=${this.sortBy}&period=${this.period}&contributors=${this.getShow}&search=${this.getUserSearchTerm}`,
111+
)
112+
113+
this.$store.commit('setUsers', response.data.users)
114+
this.$store.commit('setPageCount', response.data.totalPages)
115+
} else {
116+
const response = await this.$axios.get(
117+
`/v1/users?page=${this.currentPage}&sort_by=${this.sortBy}&period=${this.period}&contributors=${this.getShow}`,
118+
)
119+
120+
this.$store.commit('setUsers', response.data.users)
121+
this.$store.commit('setPageCount', response.data.totalPages)
122+
}
107123
},
108124
},
109125
}

‎store/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export const state = () => ({
1212
chartPeriod: 'last_year',
1313
show: 'all',
1414
orgSearchTerm: '',
15+
userSearchTerm: '',
1516
})
1617

1718
export const getters = {
@@ -23,6 +24,7 @@ export const getters = {
2324
getChartPeriod: (state) => state.chartPeriod,
2425
getShow: (state) => state.show,
2526
getOrgSearchTerm: (state) => state.orgSearchTerm,
27+
getUserSearchTerm: (state) => state.userSearchTerm,
2628
}
2729

2830
export const mutations = {
@@ -65,4 +67,7 @@ export const mutations = {
6567
setOrgSearchTerm(state, searchTerm) {
6668
state.orgSearchTerm = searchTerm
6769
},
70+
setUserSearchTerm(state, searchTerm) {
71+
state.userSearchTerm = searchTerm
72+
},
6873
}

0 commit comments

Comments
 (0)