From e048d28ad3262b21d43e1317efefc2d20663ffc8 Mon Sep 17 00:00:00 2001
From: Chord <chord@tuta.io>
Date: Mon, 30 Dec 2019 13:50:32 -0500
Subject: [PATCH] Make ActionModal to component

---
 api/db.js                           |  14 +---
 api/user.js                         |   1 +
 app/App.svelte                      |   2 +
 app/components/ActionButtons.svelte |  38 ++++++++++
 app/components/ActionModal.svelte   |  74 ++++++++++++++++++++
 app/views/Profile.svelte            |  17 ++++-
 app/views/UserList.svelte           | 103 ++--------------------------
 7 files changed, 137 insertions(+), 112 deletions(-)
 create mode 100644 app/components/ActionButtons.svelte
 create mode 100644 app/components/ActionModal.svelte

diff --git a/api/db.js b/api/db.js
index e44d051..dc5ff10 100644
--- a/api/db.js
+++ b/api/db.js
@@ -229,15 +229,11 @@ export async function get_characters(pagination, sort, order) {
 
 	try {
 		const char_count = await get_row_count(CHARACTER.THIS);
-		const chars = await pool.query(`SELECT id, name, faction_id, created, last_login FROM characters ORDER BY ${to_sql(sort)} ${to_sql(order)} OFFSET $1 LIMIT $2`, values);
+		const chars = await pool.query(`SELECT id, account_id, name, faction_id, created, last_login FROM characters ORDER BY ${to_sql(sort)} ${to_sql(order)} OFFSET $1 LIMIT $2`, values);
 
 		pagination.item_count = char_count;
 		pagination.page_count = Math.ceil(pagination.item_count / pagination.items_per_page);
 
-		chars.rows.forEach((r) => {
-			delete r.account_id;
-		});
-
 		return chars.rows;
 	} catch (e) {
 		if (e.code)
@@ -302,8 +298,7 @@ export async function get_stats() {
 	try {
 		const account_count = await get_row_count(ACCOUNT.THIS);
 		const character_count = await get_row_count(CHARACTER.THIS);
-		const last_account = await pool.query('SELECT id, username, created FROM accounts ORDER BY id DESC LIMIT 1');
-		const last_character = await pool.query('SELECT id, name, faction_id, created FROM characters ORDER BY id DESC LIMIT 1');
+		const last_character = await pool.query('SELECT id, account_id, name, faction_id, created FROM characters ORDER BY id DESC LIMIT 1');
 		const empires = await pool.query('SELECT faction_id, COUNT(*) FROM characters GROUP BY faction_id');
 
 		const stats = {}
@@ -311,9 +306,6 @@ export async function get_stats() {
 		stats.characters = character_count;
 		stats.last = {};
 		stats.last.character = last_character.rows[0];
-		stats.last.account = last_account.rows[0];
-		stats.last.account.name = stats.last.account.username
-		delete stats.last.account.username;
 		stats.empires = {};
 
 		empires.rows.forEach((r) =>
@@ -354,7 +346,7 @@ export async function search(term, pagination) {
 		const accounts = await pool.query('SELECT id, username, gm FROM accounts ' +
 			'WHERE upper(username) LIKE $1 '+
 		` ORDER BY username OFFSET $2 LIMIT $3`, values);
-		const characters = await pool.query('SELECT id, name, faction_id FROM characters ' +
+		const characters = await pool.query('SELECT id, name, account_id, faction_id FROM characters ' +
 			'WHERE name LIKE $1 '+
 		` ORDER BY upper(name) OFFSET $2 LIMIT $3`, values);
 
diff --git a/api/user.js b/api/user.js
index b22c52c..684b936 100644
--- a/api/user.js
+++ b/api/user.js
@@ -35,6 +35,7 @@ api.get('/user/:user/profile', async (req, res, next) => {
 			email : "bademail@email.com",
 			account_created : account.created,
 			admin : account.gm,
+			inactive: account.inactive,
 			characters: characters,
 		});
 	} catch (e) {
diff --git a/app/App.svelte b/app/App.svelte
index f208ff6..3462444 100644
--- a/app/App.svelte
+++ b/app/App.svelte
@@ -124,4 +124,6 @@ All other trademarks or tradenames are properties of their respective owners.
     </span>
   </div>
 </footer>
+
 {/if}
+
diff --git a/app/components/ActionButtons.svelte b/app/components/ActionButtons.svelte
new file mode 100644
index 0000000..7f95816
--- /dev/null
+++ b/app/components/ActionButtons.svelte
@@ -0,0 +1,38 @@
+<script>
+	export let account;
+</script>
+
+{#if account.inactive}
+<button type="button"
+	class="btn btn-warning btn-sm"
+	data-action="unban"
+	data-account-id={account.id}
+	data-account-name={account.name}
+	data-toggle="modal"
+	data-target="#actionModal">Unban</button>
+{:else}
+<button type="button"
+	class="btn btn-danger btn-sm"
+	data-action="ban"
+	data-account-id={account.id}
+	data-account-name={account.name}
+	data-toggle="modal"
+	data-target="#actionModal">Ban</button>
+{#if account.admin}
+<button type="button"
+	class="btn btn-warning btn-sm"
+	data-action="remove_gm"
+	data-account-id={account.id}
+	data-account-name={account.name}
+	data-toggle="modal"
+	data-target="#actionModal">Remove GM</button>
+{:else}
+<button type="button"
+	class="btn btn-success btn-sm"
+	data-action="add_gm"
+	data-account-id={account.id}
+	data-account-name={account.name}
+	data-toggle="modal"
+	data-target="#actionModal">Make GM</button>
+{/if}
+{/if}
diff --git a/app/components/ActionModal.svelte b/app/components/ActionModal.svelte
new file mode 100644
index 0000000..d62f1df
--- /dev/null
+++ b/app/components/ActionModal.svelte
@@ -0,0 +1,74 @@
+<script>
+	import { onMount } from 'svelte';
+	import axios from 'axios'
+	import Alert from './Alert'
+	import jq from 'jquery'
+
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	let modalAlert;
+
+	onMount(() => setup_actions());
+
+	function setup_actions() {
+		const modal = jq('#actionModal');
+
+		modal.on('hide.bs.modal', () => modalAlert.message(""));
+		modal.on('show.bs.modal', (event) => {
+			const button = jq(event.relatedTarget) // Button that triggered the modal
+			const username = button.data('account-name')
+			const account_id = button.data('account-id')
+			const action_type = button.data('action')
+			const action_name = button.text();
+
+			modal.find('.modal-title').text("Confirm " + action_name)
+			modal.find('.modal-body p').text("Are you sure you want to perform this action on \'" + username + "\'?")
+
+			const submit = modal.find('.modal-footer .btn-primary')
+
+			submit.text(action_name)
+			// remove ALL previous click handlers
+			submit.off()
+
+			submit.click(async (event) => {
+				submit.addClass("disabled")
+
+				try {
+					await axios.post("/api/user/"+ account_id + "/" + action_type)
+					dispatch('action', {
+						target: account_id,
+						action: action_type,
+					});
+					modal.modal('hide')
+				} catch (e) {
+					modalAlert.message(e.message)
+				} finally {
+					submit.removeClass("disabled")
+				}
+			});
+		})
+	}
+</script>
+
+<div class="modal fade" id="actionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Perform Action</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+		  <Alert bind:this={modalAlert} />
+		  <p>Are you sure?</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
+        <button type="button" class="btn btn-primary">Yes</button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/app/views/Profile.svelte b/app/views/Profile.svelte
index f0e9d17..5d95c3e 100644
--- a/app/views/Profile.svelte
+++ b/app/views/Profile.svelte
@@ -1,12 +1,16 @@
 <script>
 	import { onMount } from 'svelte';
+	import { userId } from '../UserState'
+
 	import axios from 'axios'
 	import page from 'page'
 	import moment from 'moment'
+
 	import CharacterLink from '../components/CharacterLink'
-	import { userId } from '../UserState'
 	import LoginList from '../components/LoginList'
 	import AccountLink from '../components/AccountLink'
+	import ActionButtons from '../components/ActionButtons'
+	import ActionModal from '../components/ActionModal.svelte'
 
 	export let pageCtx;
 	export let appAlert;
@@ -22,7 +26,7 @@
 	let email;
 	let account;
 
-	onMount(async () => {
+	async function refresh() {
 		let loadID = params.id || $userId;
 
 		try {
@@ -47,6 +51,10 @@
 				appAlert.message(e.message)
 			}
 		}
+	}
+
+	onMount(async () => {
+		await refresh();
 	});
 </script>
 
@@ -56,6 +64,8 @@
 
 {#if account}
 <h1>Account: <AccountLink account={account}/></h1>
+<ActionButtons {account} />
+
 <form>
 	<div class="form-group row">
 		<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
@@ -73,7 +83,7 @@
 
 <h2>Characters</h2>
 <p>
-	{#if characters.length > 1}
+	{#if characters.length >= 1}
 	<div class="row">
 	{#each characters as char, i}
 		<div class="col-md-4 col-12"><CharacterLink character={char} /></div>
@@ -90,3 +100,4 @@
 </p>
 {/if}
 
+<ActionModal on:action={refresh} />
diff --git a/app/views/UserList.svelte b/app/views/UserList.svelte
index 39d385c..7d936f0 100644
--- a/app/views/UserList.svelte
+++ b/app/views/UserList.svelte
@@ -1,16 +1,13 @@
 <script>
-	import { onMount } from 'svelte'
 	import axios from 'axios'
 	import AccountLink from '../components/AccountLink'
 	import PaginatedList from '../components/PaginatedList'
-	import Alert from '../components/Alert'
+	import ActionButtons from '../components/ActionButtons'
+	import ActionModal from '../components/ActionModal.svelte'
 	import moment from 'moment'
-	import jq from 'jquery'
 
 	export let appAlert
-	let modalAlert, userList;
-
-	onMount(() => setup_actions());
+	let userList;
 
 	async function fetch(page) {
 		try {
@@ -22,42 +19,6 @@
 			return undefined;
 		}
 	}
-
-	function setup_actions() {
-		const modal = jq('#actionModal');
-
-		modal.on('hide.bs.modal', () => modalAlert.message(""));
-		modal.on('show.bs.modal', (event) => {
-			const button = jq(event.relatedTarget) // Button that triggered the modal
-			const username = button.data('account-name')
-			const account_id = button.data('account-id')
-			const action_type = button.data('action')
-			const action_name = button.text();
-
-			modal.find('.modal-title').text("Confirm " + action_name)
-			modal.find('.modal-body p').text("Are you sure you want to perform this action on \'" + username + "\'?")
-
-			const submit = modal.find('.modal-footer .btn-primary')
-
-			submit.text(action_name)
-			// remove ALL previous click handlers
-			submit.off()
-
-			submit.click(async (event) => {
-				submit.addClass("disabled")
-
-				try {
-					await axios.post("/api/user/"+ account_id + "/" + action_type)
-					await userList.refresh()
-					modal.modal('hide')
-				} catch (e) {
-					modalAlert.message(e.message)
-				} finally {
-					submit.removeClass("disabled")
-				}
-			});
-		})
-	}
 </script>
 
 <PaginatedList bind:this={userList} bind:fetch={fetch} let:data={users} let:pagination={pagination}>
@@ -86,65 +47,11 @@
 					Never logged in
 				{/if}
 			</td>
-			<td>
-				{#if user.inactive}
-				<button type="button"
-					class="btn btn-warning btn-sm"
-					data-action="unban"
-					data-account-id={user.id}
-					data-account-name={user.name}
-					data-toggle="modal"
-					data-target="#actionModal">Unban</button>
-				{:else}
-				<button type="button"
-					class="btn btn-danger btn-sm"
-					data-action="ban"
-					data-account-id={user.id}
-					data-account-name={user.name}
-					data-toggle="modal"
-					data-target="#actionModal">Ban</button>
-				{#if user.admin}
-				<button type="button"
-					class="btn btn-warning btn-sm"
-					data-action="remove_gm"
-					data-account-id={user.id}
-					data-account-name={user.name}
-					data-toggle="modal"
-					data-target="#actionModal">Remove GM</button>
-				{:else}
-				<button type="button"
-					class="btn btn-success btn-sm"
-					data-action="add_gm"
-					data-account-id={user.id}
-					data-account-name={user.name}
-					data-toggle="modal"
-					data-target="#actionModal">Make GM</button>
-				{/if}
-				{/if}
-			</td>
+			<td><ActionButtons account={user} /></td>
 		</tr>
 	  {/each}
 	  </tbody>
 	</table>
 </PaginatedList>
 
-<div class="modal fade" id="actionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" id="exampleModalLabel">Perform Action</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-		  <Alert bind:this={modalAlert} />
-		  <p>Are you sure?</p>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
-        <button type="button" class="btn btn-primary">Yes</button>
-      </div>
-    </div>
-  </div>
-</div>
+<ActionModal on:action={userList.refresh} />