inactive feeds: use client dialog

2 files changed, 78 insertions, 83 deletions

diff --git a/classes/pref/feeds.php b/classes/pref/feeds.php
index d8495a59c..03e8b1b81 100755
--- a/classes/pref/feeds.php
+++ b/classes/pref/feeds.php
@@ -1485,56 +1485,14 @@ class Pref_Feeds extends Handler_Protected {
 			ORDER BY last_article");
 		$sth->execute([$_SESSION['uid']]);
 
-		print "<div dojoType='fox.Toolbar'>";
-		print "<div dojoType='fox.form.DropDownButton'>".
-				"<span>" . __('Select')."</span>";
-		print "<div dojoType='dijit.Menu' style='display: none'>";
-		print "<div onclick=\"Tables.select('inactive-feeds-list', true)\"
-			dojoType='dijit.MenuItem'>".__('All')."</div>";
-		print "<div onclick=\"Tables.select('inactive-feeds-list', false)\"
-			dojoType='dijit.MenuItem'>".__('None')."</div>";
-		print "</div></div>";
-		print "</div>"; #toolbar
-
-		print "<div class='panel panel-scrollable'>";
-		print "<table width='100%' id='inactive-feeds-list'>";
-
-		$lnum = 1;
-
-		while ($line = $sth->fetch()) {
-
-			$feed_id = $line["id"];
-
-			print "<tr data-row-id='$feed_id'>";
-
-			print "<td width='5%' align='center'><input
-				onclick='Tables.onRowChecked(this);' dojoType='dijit.form.CheckBox'
-				type='checkbox'></td>";
-			print "<td>";
-
-			print "<a href='#' ".
-				"title=\"".__("Click to edit feed")."\" ".
-				"onclick=\"CommonDialogs.editFeed(".$line["id"].")\">".
-				htmlspecialchars($line["title"])."</a>";
-
-			print "</td><td class='text-muted' align='right'>";
-			print TimeHelper::make_local_datetime($line['last_article'], false);
-			print "</td>";
-			print "</tr>";
+		$rv = [];
 
-			++$lnum;
+		while ($row = $sth->fetch(PDO::FETCH_ASSOC)) {
+			$row['last_article'] = TimeHelper::make_local_datetime($row['last_article'], false);
+			array_push($rv, $row);
 		}
 
-		print "</table>";
-		print "</div>";
-
-		print "<footer>
-			<button style='float : left' class='alt-danger' dojoType='dijit.form.Button' onclick='App.dialogOf(this).removeSelected()'>"
-			.__('Unsubscribe from selected feeds')."</button>
-			<button dojoType='dijit.form.Button' class='alt-primary' type='submit'>"
-			.__('Close this window')."</button>
-			</footer>";
-
+		print json_encode($rv);
 	}
 
 	function feedsWithErrors() {
diff --git a/js/PrefFeedTree.js b/js/PrefFeedTree.js
index 7684c7f9d..3e3584a9a 100644
--- a/js/PrefFeedTree.js
+++ b/js/PrefFeedTree.js
@@ -1,5 +1,5 @@
 /* eslint-disable prefer-rest-params */
-/* global __, lib, dijit, define, dojo, CommonDialogs, Notify, Tables, xhrPost, fox, App */
+/* global __, lib, dijit, define, dojo, CommonDialogs, Notify, Tables, xhrPost, xhrJson, fox, App */
 
 define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dojo/_base/array", "dojo/cookie"],
 	function (declare, domConstruct, checkBoxTree, array, cookie) {
@@ -409,50 +409,87 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dojo/_b
 			dialog.show();
 		},
 		showInactiveFeeds: function() {
-			const dialog = new fox.SingleUseDialog({
-				id: "inactiveFeedsDlg",
-				title: __("Feeds without recent updates"),
-				getSelectedFeeds: function () {
-					return Tables.getSelected("inactive-feeds-list");
-				},
-				removeSelected: function () {
-					const sel_rows = this.getSelectedFeeds();
-
-					if (sel_rows.length > 0) {
-						if (confirm(__("Remove selected feeds?"))) {
-							Notify.progress("Removing selected feeds...", true);
+			xhrJson("backend.php", {op: 'pref-feeds', method: 'inactivefeeds'}, function (reply) {
+
+				const dialog = new fox.SingleUseDialog({
+					id: "inactiveFeedsDlg",
+					title: __("Feeds without recent updates"),
+					getSelectedFeeds: function () {
+						return Tables.getSelected("inactive-feeds-list");
+					},
+					removeSelected: function () {
+						const sel_rows = this.getSelectedFeeds();
+
+						if (sel_rows.length > 0) {
+							if (confirm(__("Remove selected feeds?"))) {
+								Notify.progress("Removing selected feeds...", true);
+
+								const query = {
+									op: "pref-feeds", method: "remove",
+									ids: sel_rows.toString()
+								};
 
-							const query = {
-								op: "pref-feeds", method: "remove",
-								ids: sel_rows.toString()
-							};
+								xhrPost("backend.php", query, () => {
+									Notify.close();
 
-							xhrPost("backend.php", query, () => {
-								Notify.close();
+									const tree = dijit.byId("feedTree");
+									if (tree) tree.reload();
 
-								const tree = dijit.byId("feedTree");
-								if (tree) tree.reload();
+									dialog.hide();
+								});
+							}
 
-								dialog.hide();
-							});
+						} else {
+							alert(__("No feeds selected."));
 						}
+					},
+					content: `
+						<div dojoType='fox.Toolbar'>
+							<div dojoType='fox.form.DropDownButton'>
+								<span>${__('Select')}</span>
+								<div dojoType='dijit.Menu' style='display: none'>
+								<div onclick="Tables.select('inactive-feeds-list', true)"
+									dojoType='dijit.MenuItem'>${__('All')}</div>
+								<div onclick="Tables.select('inactive-feeds-list', false)"
+									dojoType='dijit.MenuItem'>${__('None')}</div>
+								</div>
+							</div>
+						</div>
+
+						<div class='panel panel-scrollable'>
+							<table width='100%' id='inactive-feeds-list'>
+								${reply.map((row) => `<tr data-row-id='${row.id}'>
+									<td width='5%' align='center'>
+										<input onclick='Tables.onRowChecked(this)' dojoType='dijit.form.CheckBox' type='checkbox'>
+									</td>
+									<td>
+										<a href='#' "title="${__("Click to edit feed")}" onclick="CommonDialogs.editFeed(${row.id})">
+											${App.escapeHtml(row.title)}
+										</a>
+									</td>
+									<td class='text-muted' align='right'>
+										${row.last_article}
+									</td>
+								</tr>
+								`).join("")}
+							</table>
+						</div>
+
+						<footer>
+							<button style='float : left' class='alt-danger' dojoType='dijit.form.Button' onclick='App.dialogOf(this).removeSelected()'>
+								${__('Unsubscribe from selected feeds')}
+							</button>
+							<button dojoType='dijit.form.Button' class='alt-primary' type='submit'>
+								${__('Close this window')}
+							</button>
+						</footer>
+					`
+				});
 
-					} else {
-						alert(__("No feeds selected."));
-					}
-				},
-				content: __("Loading, please wait...")
-			});
-
-			const tmph = dojo.connect(dialog, 'onShow', function () {
-				dojo.disconnect(tmph);
+				dialog.show();
 
-				xhrPost("backend.php", {op: "pref-feeds", method: "inactivefeeds"}, (transport) => {
-					dialog.attr('content', transport.responseText);
-				})
 			});
 
-			dialog.show();
 		}
 	});
 });