feat: topics dashboard details subpage

public/language/en-GB/admin/dashboard.json

@@ -76,5 +76,10 @@
 	"graphs.registered-users": "Registered Users",
 	"graphs.anonymous-users": "Anonymous Users",
 	"last-restarted-by": "Last restarted by",
-	"no-users-browsing": "No users browsing"
+	"no-users-browsing": "No users browsing",
+
+	"back-to-dashboard": "Back to Dashboard",
+	"details.no-users": "No users have joined within the selected timeframe",
+	"details.no-topics": "No topics have been posted within the selected timeframe",
+	"details.no-logins": "No logins have been recorded within the selected timeframe"
 }

public/src/admin/dashboard/topics.js

@@ -1,14 +1,32 @@
 'use strict';
 
-define('admin/dashboard/topics', ['admin/modules/dashboard-line-graph'], (graph) => {
+define('admin/dashboard/topics', ['admin/modules/dashboard-line-graph', 'hooks'], (graph, hooks) => {
 	const ACP = {};
 
 	ACP.init = () => {
 		graph.init({
 			set: 'topics',
 			dataset: ajaxify.data.dataset,
+		}).then(() => {
+			hooks.onPage('action:admin.dashboard.updateGraph', ACP.updateTable);
 		});
 	};
 
+	ACP.updateTable = () => {
+		if (window.fetch) {
+			fetch(`${config.relative_path}/api${ajaxify.data.url}${window.location.search}`, { credentials: 'include' }).then((response) => {
+				if (response.ok) {
+					response.json().then(function (payload) {
+						app.parseAndTranslate(ajaxify.data.template.name, 'topics', payload, function (html) {
+							const tbodyEl = document.querySelector('.topics-list tbody');
+							tbodyEl.innerHTML = '';
+							tbodyEl.append(...html.map((idx, el) => el));
+						});
+					});
+				}
+			});
+		}
+	};
+
 	return ACP;
 });

src/controllers/admin/dashboard.js

@@ -11,6 +11,7 @@ const meta = require('../../meta');
 const analytics = require('../../analytics');
 const plugins = require('../../plugins');
 const user = require('../../user');
+const topics = require('../../topics');
 const utils = require('../../utils');
 
 const dashboardController = module.exports;
@@ -261,7 +262,7 @@ dashboardController.getUsers = async (req, res) => {
 		month: stats[0].thismonth,
 	};
 
-	// List of recently registered users
+	// List of users registered within time frame
 	const end = parseInt(req.query.until, 10) || Date.now();
 	const start = end - (1000 * 60 * 60 * (req.query.units === 'days' ? 24 : 1) * (req.query.count || (req.query.units === 'days' ? 30 : 24)));
 	const uids = await db.getSortedSetRangeByScore('users:joindate', 0, 500, start, end);
@@ -288,10 +289,17 @@ dashboardController.getTopics = async (req, res) => {
 		month: stats[0].thismonth,
 	};
 
+	// List of topics created within time frame
+	const end = parseInt(req.query.until, 10) || Date.now();
+	const start = end - (1000 * 60 * 60 * (req.query.units === 'days' ? 24 : 1) * (req.query.count || (req.query.units === 'days' ? 30 : 24)));
+	const tids = await db.getSortedSetRangeByScore('topics:tid', 0, 500, start, end);
+	const topicData = await topics.getTopicsByTids(tids);
+
 	res.render('admin/dashboard/topics', {
 		set: 'topics',
 		query: req.query,
 		stats,
 		summary,
+		topics: topicData,
 	});
 };

src/views/admin/dashboard/logins.tpl

@@ -1,5 +1,10 @@
 <div class="row dashboard">
 	<div class="col-xs-12">
+		<a class="btn btn-link" href="{config.relative_path}/admin/dashboard">
+			<i class="fa fa-chevron-left"></i>
+			[[admin/dashboard:back-to-dashboard]]
+		</a>
+
 		<!-- IMPORT admin/partials/dashboard/graph.tpl -->
 		<!-- IMPORT admin/partials/dashboard/stats.tpl -->
 	</div>

src/views/admin/dashboard/topics.tpl

@@ -1,6 +1,28 @@
 <div class="row dashboard">
 	<div class="col-xs-12">
+		<a class="btn btn-link" href="{config.relative_path}/admin/dashboard">
+			<i class="fa fa-chevron-left"></i>
+			[[admin/dashboard:back-to-dashboard]]
+		</a>
+
 		<!-- IMPORT admin/partials/dashboard/graph.tpl -->
 		<!-- IMPORT admin/partials/dashboard/stats.tpl -->
+
+		<table class="table table-striped topics-list">
+			<tbody>
+				{{{ if !topics.length}}}
+				<tr>
+					<td colspan=4" class="text-center"><em>[[admin/dashboard:details.no-topics]]</em></td>
+				</tr>
+				{{{ end }}}
+				{{{ each topics }}}
+				<tr>
+					<td><a href="{config.relative_path}/topics/{../slug}">{../title}</a></td>
+					<td>[[topic:posted_by, {../user.username}]]</td>
+					<td><span class="timeago" data-title="{../timestampISO}"></span></td>
+				</tr>
+				{{{ end }}}
+			</tbody>
+		</table>
 	</div>
 </div>

src/views/admin/dashboard/users.tpl

@@ -1,4 +1,10 @@
 <div class="dashboard">
+	<div class="col-xs-12">
+		<a class="btn btn-link" href="{config.relative_path}/admin/dashboard">
+			<i class="fa fa-chevron-left"></i>
+			[[admin/dashboard:back-to-dashboard]]
+		</a>
+
 		<!-- IMPORT admin/partials/dashboard/graph.tpl -->
 		<!-- IMPORT admin/partials/dashboard/stats.tpl -->
 
@@ -10,6 +16,11 @@
 				<th data-sort="joindate">[[admin/manage/users:users.joined]]</th>
 			</thead>
 			<tbody>
+				{{{ if !users.length}}}
+				<tr>
+					<td colspan=4" class="text-center"><em>[[admin/dashboard:details.no-logins]]</em></td>
+				</tr>
+				{{{ end }}}
 				{{{ each users }}}
 				<tr>
 					<td>{../uid}</td>
@@ -20,4 +31,5 @@
 				{{{ end }}}
 			</tbody>
 		</table>
+	</div>
 </div>

src/views/admin/partials/dashboard/stats.tpl

@@ -1,5 +1,4 @@
-<div class="row">
+<div class="table-responsive">
-	<div class="table-responsive">
 	<table class="table table-striped">
 		<thead>
 			<tr>
@@ -45,5 +44,4 @@
 			<!-- END stats -->
 		</tbody>
 	</table>
-	</div>
 </div>