Finish subscription manager page

public/js/plugin-download.js

@@ -237,8 +237,10 @@ const component = () => {
 
 			console.log("initial size:", ary.length);
 			for (let filter of this.appliedFilters) {
-				if (!filter.value || isNaN(filter.value)) continue;
+				if (!filter.value) continue;
 				if (filter.type === "array" && filter.value === "all") continue;
+				if (filter.type.startsWith("number") && isNaN(filter.value))
+					continue;
 
 				console.log("applying filter:", filter);
 
@@ -370,6 +372,7 @@ const component = () => {
 			$("#filter-form input")
 				.get()
 				.forEach((i) => (i.value = ""));
+			$("#filter-form select").val("all");
 			this.appliedFilters = [];
 			this.chapters = this.filteredChapters;
 		},
@@ -439,8 +442,9 @@ const component = () => {
 					break;
 			}
 			let value = ft.value;
-			if (!value || isNaN(value)) value = "";
-			else if (ft.type.startsWith("date"))
+
+			if (ft.type.startsWith("number") && isNaN(value)) value = "";
+			else if (ft.type.startsWith("date") && value)
 				value = moment(Number(value)).format("MMM D, YYYY");
 
 			return `<td>${key}</td><td>${type}</td><td>${value}</td>`;

public/js/subscription-manager.js

@@ -3,6 +3,8 @@ const component = () => {
 		subscriptions: [],
 		plugins: [],
 		pid: undefined,
+		subscription: undefined, // selected subscription
+		loading: false,
 
 		init() {
 			fetch(`${base_url}api/admin/plugin`)
@@ -53,5 +55,79 @@ const component = () => {
 					);
 				});
 		},
+		renderStrCell(str) {
+			const maxLength = 40;
+			if (str.length > maxLength)
+				return `<td><span>${str.substring(
+					0,
+					maxLength
+				)}...</span><div uk-dropdown>${str}</div></td>`;
+			return `<td>${str}</td>`;
+		},
+		renderDateCell(timestamp) {
+			return `<td>${moment
+				.duration(moment.unix(timestamp).diff(moment()))
+				.humanize(true)}</td>`;
+		},
+		selected(event, modal) {
+			const id = event.currentTarget.getAttribute("sid");
+			this.subscription = this.subscriptions.find((s) => s.id === id);
+			UIkit.modal(modal).show();
+		},
+		renderFilterRow(ft) {
+			const key = ft.key;
+			let type = ft.type;
+			switch (type) {
+				case "number-min":
+					type = "number (minimum value)";
+					break;
+				case "number-max":
+					type = "number (maximum value)";
+					break;
+				case "date-min":
+					type = "minimum date";
+					break;
+				case "date-max":
+					type = "maximum date";
+					break;
+			}
+			let value = ft.value;
+
+			if (ft.type.startsWith("number") && isNaN(value)) value = "";
+			else if (ft.type.startsWith("date") && value)
+				value = moment(Number(value)).format("MMM D, YYYY");
+
+			return `<td>${key}</td><td>${type}</td><td>${value}</td>`;
+		},
+		action(event, type) {
+			if (this.loading) return;
+			this.loading = true;
+			const id = $(event.currentTarget).closest("tr").attr("sid");
+			fetch(
+				`${base_url}api/admin/plugin/subscriptions?${new URLSearchParams(
+					{
+						plugin: this.pid,
+						subscription: id,
+					}
+				)}`,
+				{
+					method: "DELETE",
+				}
+			)
+				.then((response) => response.json())
+				.then((data) => {
+					if (!data.success) throw new Error(data.error);
+				})
+				.catch((e) => {
+					alert(
+						"danger",
+						`Failed to delete subscription. Error: ${e}`
+					);
+				})
+				.finally(() => {
+					this.loading = false;
+					this.list(this.pid);
+				});
+		},
 	};
 };