Add search filter function

frontend/src/components/routes/AdminUsers.vue

@@ -4,6 +4,11 @@
 		<div class='category_widget__box'>
 			<div class='category_widget__text__title'>Filter users</div>
 			<div class='admin_users__filters'>
+				<fancy-input
+					placeholder='Filter users'
+					:large='true'
+					v-model='search'
+				></fancy-input>
 				<select-filter
 					name='Role'
 					:options='roleOptions'
@@ -48,6 +53,7 @@
 	import SortMenu from '../SortMenu.vue';
 	import FancyInput from '../FancyInput.vue';
 
+	import throttle from 'lodash.throttle';
 	import AjaxErrorHandler from '../../assets/js/errorHandler';
 
 	export default {
@@ -80,6 +86,9 @@
 				if(this.roleSelected.length === 1) {
 					url += '&role=' + this.roleSelected[0];
 				}
+				if(this.search.length) {
+					url += '&search=' + encodeURIComponent(this.search.trim());
+				}
 
 				this.axios
 					.get(url)
@@ -94,7 +103,10 @@
 		},
 		watch: {
 			tableSort: 'fetchData',
-			roleSelected: 'fetchData'
+			roleSelected: 'fetchData',
+			search: throttle(function (input) {
+				this.fetchData();
+			}, 200)
 		}
 	}
 </script>

routes/user.js

@@ -301,7 +301,8 @@ router.get('/', async (req, res, next) => {
 			postCount: 'postCount'
 		};
 		let offset = Number.isInteger(+req.query.offset) ? +req.query.offset : 0;
-		let havingClause;
+		let havingClause = '';
+
 		if(req.query.role === 'admin') {
 			havingClause = 'HAVING Users.admin = true';
 		} else if(req.query.role === 'user') {
@@ -310,6 +311,18 @@ router.get('/', async (req, res, next) => {
 			havingClause = '';
 		}
 
+
+		if(req.query.search) {
+			//I.e. if there is not already a HAVING clause
+			if(!havingClause.length) {
+				havingClause = 'HAVING ';
+			} else {
+				havingClause += ' AND ';
+			}
+
+			havingClause += 'Users.username LIKE $search';
+		}
+
 		let sql = `
 			SELECT X.username, X.admin, X.createdAt, X.postCount, COUNT(Threads.id) as threadCount
 			FROM (
@@ -329,7 +342,8 @@ router.get('/', async (req, res, next) => {
 		`;
 
 		let users = await sequelize.query(sql, {
-			model: User
+			model: User,
+			bind: { search: req.query.search + '%' }
 		});
 
 		res.json(users)