feat: try fixing THE SHITTY WATERFALL

2 files changed, 168 insertions, 147 deletions

diff --git a/src/site/pages/dashboard/admin/user/_id.vue b/src/site/pages/dashboard/admin/user/_id.vue
index 8c73037..1755b89 100644
--- a/src/site/pages/dashboard/admin/user/_id.vue
+++ b/src/site/pages/dashboard/admin/user/_id.vue
@@ -9,40 +9,51 @@
 					<Sidebar />
 				</div>
 				<div class="column">
-					<h2 class="subtitle">User details</h2>
+					<h2 class="subtitle">
+						User details
+					</h2>
 					<hr>
 
-					<b-field label="User Id"
+					<b-field
+						label="User Id"
 						horizontal>
 						<span>{{ user.id }}</span>
 					</b-field>
 
-					<b-field label="Username"
+					<b-field
+						label="Username"
 						horizontal>
 						<span>{{ user.username }}</span>
 					</b-field>
 
-					<b-field label="Enabled"
+					<b-field
+						label="Enabled"
 						horizontal>
 						<span>{{ user.enabled }}</span>
 					</b-field>
 
-					<b-field label="Registered"
+					<b-field
+						label="Registered"
 						horizontal>
 						<span><timeago :since="user.createdAt" /></span>
 					</b-field>
 
-					<b-field label="Files"
+					<b-field
+						label="Files"
 						horizontal>
 						<span>{{ files.length }}</span>
 					</b-field>
 
 					<div class="mb2 mt2 text-center">
-						<button class="button is-danger"
-							@click="promptDisableUser">Disable user</button>
+						<button
+							class="button is-danger"
+							@click="promptDisableUser">
+							Disable user
+						</button>
 					</div>
 
-					<Grid v-if="files.length"
+					<Grid
+						v-if="files.length"
 						:files="files" />
 				</div>
 			</div>
@@ -57,14 +68,14 @@ import Grid from '~/components/grid/Grid.vue';
 export default {
 	components: {
 		Sidebar,
-		Grid
+		Grid,
 	},
 	middleware: ['auth', 'admin'],
 	data() {
 		return {
 			options: {},
 			files: null,
-			user: null
+			user: null,
 		};
 	},
 	async asyncData({ $axios, route }) {
@@ -72,13 +83,13 @@ export default {
 			const response = await $axios.$get(`/admin/users/${route.params.id}`);
 			return {
 				files: response.files ? response.files : null,
-				user: response.user ? response.user : null
+				user: response.user ? response.user : null,
 			};
 		} catch (error) {
 			console.error(error);
 			return {
 				files: null,
-				user: null
+				user: null,
 			};
 		}
 	},
@@ -87,15 +98,15 @@ export default {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',
 				message: 'Are you sure you want to disable the account of the user that uploaded this file?',
-				onConfirm: () => this.disableUser()
+				onConfirm: () => this.disableUser(),
 			});
 		},
 		async disableUser() {
 			const response = await this.$axios.$post('admin/users/disable', {
-				id: this.user.id
+				id: this.user.id,
 			});
 			this.$buefy.toast.open(response.message);
-		}
-	}
+		},
+	},
 };
 </script>
diff --git a/src/site/pages/dashboard/admin/users.vue b/src/site/pages/dashboard/admin/users.vue
index 695cf0b..269946c 100644
--- a/src/site/pages/dashboard/admin/users.vue
+++ b/src/site/pages/dashboard/admin/users.vue
@@ -1,3 +1,143 @@
+<template>
+	<section class="section is-fullheight dashboard">
+		<div class="container">
+			<div class="columns">
+				<div class="column is-narrow">
+					<Sidebar />
+				</div>
+				<div class="column">
+					<h2 class="subtitle">
+						Manage your users
+					</h2>
+					<hr>
+
+					<div class="view-container">
+						<b-table
+							:data="users || []"
+							:mobile-cards="true">
+							<template slot-scope="props">
+								<b-table-column
+									field="id"
+									label="Id"
+									centered>
+									{{ props.row.id }}
+								</b-table-column>
+
+								<b-table-column
+									field="username"
+									label="Username"
+									centered>
+									<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">
+										{{ props.row.username }}
+									</nuxt-link>
+								</b-table-column>
+
+								<b-table-column
+									field="enabled"
+									label="Enabled"
+									centered>
+									<b-switch
+										v-model="props.row.enabled"
+										@input="changeEnabledStatus(props.row)" />
+								</b-table-column>
+
+								<b-table-column
+									field="isAdmin"
+									label="Admin"
+									centered>
+									<b-switch
+										v-model="props.row.isAdmin"
+										@input="changeIsAdmin(props.row)" />
+								</b-table-column>
+
+								<b-table-column
+									field="purge"
+									centered>
+									<button
+										class="button is-primary"
+										@click="promptPurgeFiles(props.row)">
+										Purge files
+									</button>
+								</b-table-column>
+							</template>
+							<template slot="empty">
+								<div class="has-text-centered">
+									<i class="icon-misc-mood-sad" />
+								</div>
+								<div class="has-text-centered">
+									Nothing here
+								</div>
+							</template>
+							<template slot="footer">
+								<div class="has-text-right">
+									{{ users.length }} users
+								</div>
+							</template>
+						</b-table>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script>
+import Sidebar from '~/components/sidebar/Sidebar.vue';
+
+export default {
+	components: {
+		Sidebar,
+	},
+	middleware: ['auth', 'admin'],
+	data() {
+		return {
+			users: [],
+		};
+	},
+	computed: {
+		config() {
+			return this.$store.state.config;
+		},
+	},
+	metaInfo() {
+		return { title: 'Uploads' };
+	},
+	mounted() {
+		this.getUsers();
+	},
+	methods: {
+		async getUsers() {
+			const response = await this.$axios.$get('admin/users');
+			this.users = response.users;
+		},
+		async changeEnabledStatus(row) {
+			const response = await this.$axios.$post(`admin/users/${row.enabled ? 'enable' : 'disable'}`, {
+				id: row.id,
+			});
+			this.$buefy.toast.open(response.message);
+		},
+		async changeIsAdmin(row) {
+			const response = await this.$axios.$post(`admin/users/${row.isAdmin ? 'promote' : 'demote'}`, {
+				id: row.id,
+			});
+			this.$buefy.toast.open(response.message);
+		},
+		promptPurgeFiles(row) {
+			this.$buefy.dialog.confirm({
+				message: 'Are you sure you want to delete this user\'s files?',
+				onConfirm: () => this.purgeFiles(row),
+			});
+		},
+		async purgeFiles(row) {
+			const response = await this.$axios.$post('admin/users/purge', {
+				id: row.id,
+			});
+			this.$buefy.toast.open(response.message);
+		},
+	},
+};
+</script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	div.view-container {
@@ -107,9 +247,6 @@
 	}
 
 	div.column > h2.subtitle { padding-top: 1px; }
-</style>
-<style lang="scss">
-	@import '~/assets/styles/_colors.scss';
 
 	.b-table {
 		.table-wrapper {
@@ -118,130 +255,3 @@
 		}
 	}
 </style>
-
-
-<template>
-	<section class="section is-fullheight dashboard">
-		<div class="container">
-			<div class="columns">
-				<div class="column is-narrow">
-					<Sidebar />
-				</div>
-				<div class="column">
-					<h2 class="subtitle">Manage your users</h2>
-					<hr>
-
-					<div class="view-container">
-						<b-table
-							:data="users || []"
-							:mobile-cards="true">
-							<template slot-scope="props">
-								<b-table-column field="id"
-									label="Id"
-									centered>
-									{{ props.row.id }}
-								</b-table-column>
-
-								<b-table-column field="username"
-									label="Username"
-									centered>
-									<nuxt-link :to="`/dashboard/admin/user/${props.row.id}`">{{ props.row.username }}</nuxt-link>
-								</b-table-column>
-
-								<b-table-column field="enabled"
-									label="Enabled"
-									centered>
-									<b-switch v-model="props.row.enabled"
-										@input="changeEnabledStatus(props.row)" />
-								</b-table-column>
-
-								<b-table-column field="isAdmin"
-									label="Admin"
-									centered>
-									<b-switch v-model="props.row.isAdmin"
-										@input="changeIsAdmin(props.row)" />
-								</b-table-column>
-
-								<b-table-column field="purge"
-									centered>
-									<button class="button is-primary"
-										@click="promptPurgeFiles(props.row)">Purge files</button>
-								</b-table-column>
-							</template>
-							<template slot="empty">
-								<div class="has-text-centered">
-									<i class="icon-misc-mood-sad" />
-								</div>
-								<div class="has-text-centered">
-									Nothing here
-								</div>
-							</template>
-							<template slot="footer">
-								<div class="has-text-right">
-									{{ users.length }} users
-								</div>
-							</template>
-						</b-table>
-					</div>
-				</div>
-			</div>
-		</div>
-	</section>
-</template>
-
-<script>
-import Sidebar from '~/components/sidebar/Sidebar.vue';
-
-export default {
-	components: {
-		Sidebar
-	},
-	middleware: ['auth', 'admin'],
-	data() {
-		return {
-			users: []
-		};
-	},
-	computed: {
-		config() {
-			return this.$store.state.config;
-		}
-	},
-	metaInfo() {
-		return { title: 'Uploads' };
-	},
-	mounted() {
-		this.getUsers();
-	},
-	methods: {
-		async getUsers() {
-			const response = await this.$axios.$get(`admin/users`);
-			this.users = response.users;
-		},
-		async changeEnabledStatus(row) {
-			const response = await this.$axios.$post(`admin/users/${row.enabled ? 'enable' : 'disable'}`, {
-				id: row.id
-			});
-			this.$buefy.toast.open(response.message);
-		},
-		async changeIsAdmin(row) {
-			const response = await this.$axios.$post(`admin/users/${row.isAdmin ? 'promote' : 'demote'}`, {
-				id: row.id
-			});
-			this.$buefy.toast.open(response.message);
-		},
-		promptPurgeFiles(row) {
-			this.$buefy.dialog.confirm({
-				message: 'Are you sure you want to delete this user\'s files?',
-				onConfirm: () => this.purgeFiles(row)
-			});
-		},
-		async purgeFiles(row) {
-			const response = await this.$axios.$post(`admin/users/purge`, {
-				id: row.id
-			});
-			this.$buefy.toast.open(response.message);
-		}
-	}
-};
-</script>