Add sort menu component and use in admin users page

frontend/src/components/SortMenu.vue

@@ -0,0 +1,102 @@
+<template>
+	<menu-tooltip v-model='menuOpen' width='10rem'>
+		<div
+			slot='button'
+			class='sort_menu__button'
+			:class='{ "sort_menu__button--selected": menuOpen }'
+			@click='menuOpen = true'
+		>
+			{{column}}
+			<span class='fa fa-fw' :class='iconName'></span>
+		</div>
+
+		<template slot='menu'>
+			<div
+				v-for='sort in ["ascending", "descending"]'
+				
+				class='sort_menu__item'
+				:class='{
+					"sort_menu__item--selected": sort == value.sort && value.column == column
+				}'
+				@click='setSelected(sort)'
+			>
+				{{sort}}
+			</div>
+		</template>
+	</menu-tooltip>
+</template>
+
+<script>
+	import MenuTooltip from './MenuTooltip';
+
+	export default {
+		name: 'SortMenu',
+		props: ['value', 'column'],
+		components: { MenuTooltip },
+		data () {
+			return {
+				menuOpen: false
+			}
+		},
+		computed: {
+			iconName () {
+				if(this.value.column !== this.column) {
+					return 'fa-chevron-down';
+				} else if(this.value.sort === 'ascending') {
+					return 'fa-sort-amount-up';
+				} else if(this.value.sort === 'descending') {
+					return 'fa-sort-amount-down';
+				}
+			}
+		},
+		methods: {
+			setSelected (val) {
+				this.$emit('input', {
+					column: this.column,
+					sort: val
+				})
+
+				this.menuOpen = false;
+			}
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	@import '../assets/scss/variables.scss';
+
+	.sort_menu {
+		@at-root #{&}__button {
+			cursor: pointer;
+			text-transform: capitalize;
+
+			.fa {
+				font-size: 0.8rem;
+			}
+
+			@at-root #{&}--selected {
+				color: $color__blue--darker;
+			}
+		}
+
+		@at-root #{&}__item {
+			background-color: #fff;
+			border-radius: 0.25rem;
+			cursor: default;
+			font-size: 0.9rem;
+			font-weight: normal;
+			margin: 0.125rem 0;
+			padding: 0.125rem 0.25rem;
+			user-select: none;
+			transition: background-color 0.2s;
+
+			@at-root #{&}--selected {
+				background-color: $color__lightgray--darker;
+			}
+
+			&:hover {
+				background-color: $color__lightgray--darker;
+			}
+		}
+	}
+</style>

frontend/src/components/routes/AdminUsers.vue

@@ -2,7 +2,7 @@
 	<div class='admin_users'>
 		<h1 class='admin_users__header'>Users</h1>
 		<div class='category_widget__box'>
-			<div class='admin_users__search'>
+			<div class='admin_users__filters'>
 				<select-filter
 					name='Username'
 					:options='usernameOptions'
@@ -19,12 +19,34 @@
 			</div>
 			<table>
 				<tr>
-					<th>Username</th>
-					<th>Role</th>
-					<th>Account creation date</th>
-					<th>Posts</th>
-					<th>Threads</th>
+					<th>
+						<sort-menu v-model='tableSort' column='username'></sort-menu>
+					</th>
+					<th>
+						<sort-menu v-model='tableSort' column='role'></sort-menu>
+					</th>
+					<th>
+						<sort-menu v-model='tableSort' column='date'></sort-menu>
+					</th>
+					<th>
+						<sort-menu v-model='tableSort' column='posts'></sort-menu>
+					</th>
+					<th>
+						<sort-menu v-model='tableSort' column='threads'></sort-menu>
+					</th>
 				</tr>
+				<tr><td>Username</td><td>User</td><td>Today</td><td>10</td><td>2</td></tr>
+				<tr><td>Username</td><td>User</td><td>Today</td><td>10</td><td>2</td></tr>
+				<tr><td>Username</td><td>User</td><td>Today</td><td>10</td><td>2</td></tr>
+				<tr><td>Username</td><td>User</td><td>Today</td><td>10</td><td>2</td></tr>
+				<tr><td>Username</td><td>User</td><td>Today</td><td>10</td><td>2</td></tr>
+				<tr><td>Username</td><td>User</td><td>Today</td><td>10</td><td>2</td></tr>
+				<tr><td>Username</td><td>User</td><td>Today</td><td>10</td><td>2</td></tr>
+				<tr><td>Username</td><td>User</td><td>Today</td><td>10</td><td>2</td></tr>
+				<tr><td>Username</td><td>User</td><td>Today</td><td>10</td><td>2</td></tr>
+				<tr><td>Username</td><td>User</td><td>Today</td><td>10</td><td>2</td></tr>
+				<tr><td>Username</td><td>User</td><td>Today</td><td>10</td><td>2</td></tr>
+				<tr><td>Username</td><td>User</td><td>Today</td><td>10</td><td>2</td></tr>
 			</table>
 		</div>
 	</div>
@@ -32,12 +54,14 @@
 
 <script>
 	import SelectFilter from '../SelectFilter.vue';
+	import SortMenu from '../SortMenu.vue';
 	import FancyInput from '../FancyInput.vue';
 	export default {
 		name: 'AdminUsers',
 		components: {
 			FancyInput,
-			SelectFilter
+			SelectFilter,
+			SortMenu
 		},
 		data () {
 			return {
@@ -53,16 +77,13 @@
 					{ name: 'User1', value: 'admin' },
 					{ name: 'User1', value: 'admin' },
 					{ name: 'User1', value: 'admin' },
-					{ name: 'User1', value: 'admin' },
-					{ name: 'User1', value: 'admin' },
-					{ name: 'User1', value: 'admin' },
-					{ name: 'User1', value: 'admin' },
-					{ name: 'User1', value: 'admin' },
-					{ name: 'User1', value: 'admin' },
-					{ name: 'User1', value: 'admin' },
-					{ name: 'User2', value: 'admin' }
 				],
-				usernameSelected: null
+				usernameSelected: null,
+
+				tableSort: {
+					column: 'username',
+					sort: 'descending'
+				}
 			}
 		}
 	}
@@ -78,15 +99,33 @@
 			margin: 0.5rem 0 1rem 0;
 		}
 
+		@at-root #{&}__filters {
+			margin-bottom: 0.5rem;
+
+			.select_filter {
+				margin-right: 0.5rem;
+			}
+		}
+
 		table {
 			border-collapse: collapse;
 			width: 100%;
 
 			th {
 				border-bottom: 0.125rem solid $color__gray--darker;
-				padding: 0.25rem;
+				padding: 0.5rem 0.75rem;
 				text-align: left;
 			}
+
+			tr {
+				&:nth-child(even) {
+					background-color: $color__gray--primary;
+				}
+			}
+
+			td {
+				padding: 0.75rem;
+			}
 		}
 	}
 </style>