Merge pull request #1 from Zephyrrus/feature/store_refactor

Feature/store refactor

1 files changed, 134 insertions, 130 deletions

diff --git a/src/site/pages/dashboard/admin/users.vue b/src/site/pages/dashboard/admin/users.vue
index 695cf0b..bed4c2b 100644
--- a/src/site/pages/dashboard/admin/users.vue
+++ b/src/site/pages/dashboard/admin/users.vue
@@ -1,3 +1,137 @@
+<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
+										:value="props.row.enabled"
+										@input="changeEnabledStatus(props.row)" />
+								</b-table-column>
+
+								<b-table-column
+									field="isAdmin"
+									label="Admin"
+									centered>
+									<b-switch
+										:value="props.row.isAdmin"
+										@input="changeIsAdmin(props.row)" />
+								</b-table-column>
+
+								<b-table-column
+									field="purge"
+									centered>
+									<b-button
+										type="is-danger"
+										@click="promptPurgeFiles(props.row)">
+										Purge files
+									</b-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 { mapState } from 'vuex';
+import Sidebar from '~/components/sidebar/Sidebar.vue';
+
+export default {
+	components: {
+		Sidebar,
+	},
+	middleware: ['auth', 'admin', ({ route, store }) => {
+		try {
+			store.dispatch('admin/fetchUsers', route.params.id);
+		} catch (e) {
+			// eslint-disable-next-line no-console
+			console.error(e);
+		}
+	}],
+	computed: mapState({
+		users: (state) => state.admin.users,
+		config: (state) => state.config,
+	}),
+	metaInfo() {
+		return { title: 'Uploads' };
+	},
+	methods: {
+		async changeEnabledStatus(row) {
+			if (row.enabled) {
+				this.$handler.executeAction('admin/disableUser', row.id);
+			} else {
+				this.$handler.executeAction('admin/enableUser', row.id);
+			}
+		},
+		async changeIsAdmin(row) {
+			if (row.isAdmin) {
+				this.$handler.executeAction('admin/demoteUser', row.id);
+			} else {
+				this.$handler.executeAction('admin/promoteUser', row.id);
+			}
+		},
+		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) {
+			this.$handler.executeAction('admin/purgeUserFiles', row.id);
+		},
+	},
+};
+</script>
+
 <style lang="scss" scoped>
 	@import '~/assets/styles/_colors.scss';
 	div.view-container {
@@ -107,9 +241,6 @@
 	}
 
 	div.column > h2.subtitle { padding-top: 1px; }
-</style>
-<style lang="scss">
-	@import '~/assets/styles/_colors.scss';
 
 	.b-table {
 		.table-wrapper {
@@ -118,130 +249,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>