Improve abuse reporter ui some more

svelte/src/admin_panel/AbuseReporterTable.svelte

@@ -0,0 +1,40 @@
+<script>
+import { createEventDispatcher } from "svelte";
+import { formatDate } from "../util/Formatting.svelte";
+
+let dispatch = createEventDispatcher()
+export let reporters = []
+</script>
+
+<table>
+	<tr>
+		<td>Address / Mail server</td>
+		<td>Name</td>
+		<td>Reports</td>
+		<td>Blocked</td>
+		<td>Last used</td>
+		<td>Created</td>
+		<td></td>
+	</tr>
+	{#each reporters as rep (rep.from_address, rep.mail_server)}
+		<tr>
+			<td>
+				{rep.from_address}<br/>
+				{rep.mail_server}
+			</td>
+			<td>{rep.name}</td>
+			<td>{rep.reports_sent}</td>
+			<td>{rep.files_blocked}</td>
+			<td>{formatDate(rep.last_used, true, true, false)}</td>
+			<td>{formatDate(rep.created, false, false, false)}</td>
+			<td>
+				<button on:click|preventDefault={() => {dispatch("edit", rep)}} class="button round">
+					<i class="icon">edit</i>
+				</button>
+				<button on:click|preventDefault={() => {dispatch("delete", rep)}} class="button button_red round">
+					<i class="icon">delete</i>
+				</button>
+			</td>
+		</tr>
+	{/each}
+</table>

svelte/src/admin_panel/AbuseReporters.svelte

@@ -2,9 +2,12 @@
 import { onMount, tick } from "svelte";
 import { formatDate, formatDuration } from "../util/Formatting.svelte";
 import Spinner from "../util/Spinner.svelte";
+import AbuseReporterTable from "./AbuseReporterTable.svelte";
 
 let loading = true
-let reporters = []
+let reporters_pending = []
+let reporters_trusted = []
+let reporters_rejected = []
 
 const get_reporters = async () => {
 	loading = true;
@@ -13,7 +16,26 @@ const get_reporters = async () => {
 		if(resp.status >= 400) {
 			throw new Error(await resp.text());
 		}
-		reporters = await resp.json();
+		let reporters = await resp.json();
+
+		reporters_pending = reporters.reduce((acc, val) => {
+			if (val.status === "pending") {
+				acc.push(val)
+			}
+			return acc
+		}, [])
+		reporters_trusted = reporters.reduce((acc, val) => {
+			if (val.status === "trusted") {
+				acc.push(val)
+			}
+			return acc
+		}, [])
+		reporters_rejected = reporters.reduce((acc, val) => {
+			if (val.status === "rejected") {
+				acc.push(val)
+			}
+			return acc
+		}, [])
 	} catch (err) {
 		alert(err);
 	} finally {
@@ -75,14 +97,16 @@ const edit_reporter = async reporter => {
 	new_reporter_status = reporter.status
 }
 
-const delete_reporter = async (address, server) => {
+const delete_reporter = async reporter => {
-	if (!confirm("Delete this reporter address?\n\n"+address)) {
+	if (!confirm("Delete this reporter address?\n\n"+reporter.from_address)) {
 		return
 	}
 
 	try {
 		const resp = await fetch(
-			window.api_endpoint+"/admin/abuse_reporter/"+encodeURI(address)+"/"+encodeURI(server),
+			window.api_endpoint+"/admin/abuse_reporter/"+
+				encodeURI(reporter.from_address)+"/"+
+				encodeURI(reporter.mail_server),
 			{ method: "DELETE" }
 		);
 		if(resp.status >= 400) {
@@ -153,39 +177,27 @@ onMount(get_reporters);
 <br/>
 
 <div class="table_scroll">
-	<table style="text-align: left;">
+	<h2>Pending reporters</h2>
-		<tr>
+	<AbuseReporterTable
-			<td>Address</td>
+		reporters={reporters_pending}
-			<td>Server</td>
+		on:edit={e => edit_reporter(e.detail)}
-			<td>Name</td>
+		on:delete={e => delete_reporter(e.detail)}>
-			<td>Status</td>
+	</AbuseReporterTable>
-			<td>Reports</td>
+
-			<td>Blocked</td>
+
-			<td>Last used</td>
+	<h2>Trusted reporters</h2>
-			<td>Created</td>
+	<AbuseReporterTable
-			<td></td>
+		reporters={reporters_trusted}
-		</tr>
+		on:edit={e => edit_reporter(e.detail)}
-		{#each reporters as r (r.email)}
+		on:delete={e => delete_reporter(e.detail)}>
-			<tr>
+	</AbuseReporterTable>
-				<td>{r.from_address}</td>
+
-				<td>{r.mail_server}</td>
+	<h2>Rejected reporters</h2>
-				<td>{r.name}</td>
+	<AbuseReporterTable
-				<td>{r.status}</td>
+		reporters={reporters_rejected}
-				<td>{r.reports_sent}</td>
+		on:edit={e => edit_reporter(e.detail)}
-				<td>{r.files_blocked}</td>
+		on:delete={e => delete_reporter(e.detail)}>
-				<td>{formatDate(r.last_used, true, true, false)}</td>
+	</AbuseReporterTable>
-				<td>{formatDate(r.created, false, false, false)}</td>
-				<td>
-					<button on:click|preventDefault={() => {edit_reporter(r)}} class="button round">
-						<i class="icon">edit</i>
-					</button>
-					<button on:click|preventDefault={() => {delete_reporter(r.from_address, r.mail_server)}} class="button button_red round">
-						<i class="icon">delete</i>
-					</button>
-				</td>
-			</tr>
-		{/each}
-	</table>
 </div>
 
 <style>
@@ -204,4 +216,7 @@ onMount(get_reporters);
 }
 .toolbar > * { flex: 0 0 auto; }
 .toolbar_spacer { flex: 1 1 auto; }
+.table_scroll {
+	text-align: left;
+}
 </style>