From c98331de820dbe8a86d374f85af63b189e4c79e9 Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@designcreateplay.com>
Date: Mon, 29 Dec 2014 15:52:00 -0500
Subject: [PATCH] revamping categories management page in ACP, #2463

---
 public/less/admin/admin.less                |   1 -
 public/less/admin/manage/categories.less    | 133 -------------
 public/src/admin/manage/categories.js       |   4 -
 src/controllers/admin.js                    |  25 +--
 src/routes/admin.js                         |   4 +-
 src/views/admin/manage/categories.tpl       | 201 ++++++++------------
 src/views/admin/partials/categories/row.tpl |  16 ++
 7 files changed, 101 insertions(+), 283 deletions(-)
 delete mode 100644 public/less/admin/manage/categories.less
 create mode 100644 src/views/admin/partials/categories/row.tpl

diff --git a/public/less/admin/admin.less b/public/less/admin/admin.less
index d1626805ce..b7bebd8f98 100644
--- a/public/less/admin/admin.less
+++ b/public/less/admin/admin.less
@@ -2,7 +2,6 @@
 @import "./mixins";
 
 @import "./general/dashboard";
-@import "./manage/categories";
 @import "./manage/groups";
 @import "./manage/tags";
 @import "./manage/flags";
diff --git a/public/less/admin/manage/categories.less b/public/less/admin/manage/categories.less
deleted file mode 100644
index 5982a108dd..0000000000
--- a/public/less/admin/manage/categories.less
+++ /dev/null
@@ -1,133 +0,0 @@
-.categories {
-	.entry-row {
-		border-radius: 10px;
-		cursor: move;
-		list-style-type: none;
-	}
-
-	.fa-icons .col-md-3 {
-		padding-left: 0;
-		padding-right: 0;
-	}
-
-	.admin-categories {
-		margin-top: 20px;
-
-		> ul > li {
-
-			label {
-				font-size: 12px;
-				font-weight: none;
-			}
-
-			form {
-				.btn-group {
-					display: block;
-				}
-			}
-			h3 {
-				margin-top: 0;
-			}
-
-			h3, h4 {
-				cursor: text;
-				.fa-edit {
-					cursor: pointer;
-				}
-			}
-
-			h3, h4, .toggle-settings {
-				padding-left: 8px;
-			}
-
-			.preview-box {
-				width: 100%;
-				height: 100px;
-				text-align: center;
-				color: white;
-				margin-top: 0;
-
-				.icon {
-					width: 30px;
-					height: 30px;
-					line-height: 40px;
-					display: inline-block;
-					margin: 35px 5px 0 5px;
-				}
-			}
-
-			.dropdown {
-				hr {
-					margin: 5px auto;
-				}
-			}
-		}
-	}
-
-	.permissions-modal {
-		.search-results {
-			padding: 0;
-
-			> li {
-				.zebra;
-				clear: both;
-				list-style-type: none;
-				padding: 0.5em;
-				min-height: 46px;
-
-				a {
-					&:before {
-						font-family: "FontAwesome";
-						content: "\f096";
-						display: inline-block;
-						min-width: 20px;
-					}
-
-					&.active:before {
-						content: "\f046";
-					}
-				}
-
-				img {
-					width: 32px;
-					margin-right: 1em;
-				}
-			}
-		}
-
-		.members {
-			li {
-				list-style-type: none;
-				.inline-block;
-				.pointer;
-
-				img {
-					width: 32px;
-				}
-
-				&.empty {
-					font-size: 12px;
-					cursor: auto;
-					min-height: 28px;
-				}
-			}
-		}
-	}
-
-	.category-list {
-		padding: 0;
-
-		li {
-			.inline-block;
-			.pointer;
-			padding: 0.5em;
-			margin: 0.25em;
-			.border-radius(3px);
-
-			&.disabled {
-				-webkit-filter: grayscale(30%);
-				.opacity(0.5);
-			}
-		}
-	}
-}
\ No newline at end of file
diff --git a/public/src/admin/manage/categories.js b/public/src/admin/manage/categories.js
index 5bf1bfe945..8968549b91 100644
--- a/public/src/admin/manage/categories.js
+++ b/public/src/admin/manage/categories.js
@@ -40,10 +40,6 @@ define('admin/manage/categories', [
 			return false;
 		}
 
-		function update_blockclass(el) {
-			el.parentNode.parentNode.className = 'entry-row ' + el.value;
-		}
-
 		function updateCategoryOrders() {
 			var categories = $('.admin-categories #entry-container').children();
 			for(var i = 0; i<categories.length; ++i) {
diff --git a/src/controllers/admin.js b/src/controllers/admin.js
index 5a43e1ba6c..627614dc4d 100644
--- a/src/controllers/admin.js
+++ b/src/controllers/admin.js
@@ -118,33 +118,26 @@ function getStatsForSet(set, field, callback) {
 	}, callback);
 }
 
-adminController.categories.active = function(req, res, next) {
-	filterAndRenderCategories(req, res, next, true);
-};
+adminController.categories.get = function(req, res, next) {
+	var uid = req.user ? parseInt(req.user.uid, 10) : 0,
+		active = [],
+		disabled = [];
 
-adminController.categories.disabled = function(req, res, next) {
-	filterAndRenderCategories(req, res, next, false);
-};
-
-function filterAndRenderCategories(req, res, next, active) {
-	var uid = req.user ? parseInt(req.user.uid, 10) : 0;
 	categories.getAllCategories(uid, function (err, categoryData) {
 		if (err) {
 			return next(err);
 		}
 
-		categoryData = categoryData.filter(function (category) {
-			if (!category) {
-				return false;
-			}
-			return active ? !category.disabled : category.disabled;
+		categoryData.filter(Boolean).forEach(function(category) {
+			(category.disabled ? disabled : active).push(category);
 		});
 
 		res.render('admin/manage/categories', {
-			categories: categoryData
+			active: active,
+			disabled: disabled
 		});
 	});
-}
+};
 
 adminController.tags.get = function(req, res, next) {
 	topics.getTags(0, 199, function(err, tags) {
diff --git a/src/routes/admin.js b/src/routes/admin.js
index 7d867ddbf0..3c9edaa0f9 100644
--- a/src/routes/admin.js
+++ b/src/routes/admin.js
@@ -44,9 +44,7 @@ function addRoutes(router, middleware, controllers) {
 	router.get('/general/languages', controllers.admin.languages.get);
 	router.get('/general/sounds', controllers.admin.sounds.get);
 
-	router.get('/manage/categories', controllers.admin.categories.active);
-	router.get('/manage/categories/active', controllers.admin.categories.active);
-	router.get('/manage/categories/disabled', controllers.admin.categories.disabled);
+	router.get('/manage/categories', controllers.admin.categories.get);
 
 	router.get('/manage/tags', controllers.admin.tags.get);
 
diff --git a/src/views/admin/manage/categories.tpl b/src/views/admin/manage/categories.tpl
index b3b9427abb..5b0c3855e3 100644
--- a/src/views/admin/manage/categories.tpl
+++ b/src/views/admin/manage/categories.tpl
@@ -1,133 +1,41 @@
-<div class="categories">
+<div class="row">
 	<div class="col-lg-9">
 		<div class="panel panel-default">
 			<div class="panel-heading"><i class="fa fa-folder"></i> Categories</div>
 			<div class="panel-body">
-				<ul class="nav nav-pills">
-					<li class='active'><a href='/admin/manage/categories/active'>Active</a></li>
-					<li class=''><a href='/admin/manage/categories/disabled'>Disabled</a></li>
-				</ul>
-
-				<div class="row admin-categories">
-					<ul class="col-md-12" id="entry-container">
-					<!-- BEGIN categories -->
-						<li data-cid="{categories.cid}" class="entry-row">
-							<div class="well">
-								<form class="form">
-									<div class="row">
-										<div class="col-sm-2 hidden-xs text-center">
-											<div class="preview-box" style="
-												<!-- IF categories.backgroundImage -->background-image: url({categories.backgroundImage});<!-- ENDIF categories.backgroundImage -->
-												<!-- IF categories.bgColor -->background-color: {categories.bgColor};<!-- ENDIF categories.bgColor -->
-												color: {categories.color};
-												background-size:cover;
-											">
-												<div class="icon">
-													<i data-name="icon" value="{categories.icon}" class="fa {categories.icon} fa-2x"></i>
-												</div>
-											</div><br />
-											<button type="button" data-name="image" data-value="{categories.image}" class="btn btn-default upload-button"><i class="fa fa-upload"></i> Image</button>
-											<!-- IF categories.image -->
-											<br/>
-											<small class="pointer delete-image"><i data-name="icon" value="fa-times" class="fa fa-times"></i> Delete Image</small>
-											<!-- ENDIF categories.image -->
-										</div>
-										<div class="col-sm-10">
-											<div class="pull-right text-right">
-												<div class="form-group">
-													<div class="dropdown">
-														<button type="button" class="btn btn-default" data-toggle="dropdown"><i class="fa fa-cogs"></i> Options</button>
-														<ul class="dropdown-menu" role="menu">
-															<li class="permissions"><a href="#"><i class="fa fa-ban"></i> Access Control</a></li>
-															<hr />
-															<li data-disabled="{categories.disabled}">
-																<!-- IF categories.disabled -->
-																	<a href="#"><i class="fa fa-power-off"></i> Enable</a>
-																<!-- ELSE -->
-																	<a href="#"><i class="fa fa-power-off"></i> Disable</a>
-																<!-- ENDIF categories.disabled -->
-															</li>
-															<li><a href="#" class="purge"><i class="fa fa-eraser"></i> Purge</a></li>
-														</ul>
-
-
-														<button class="btn btn-primary save">Save</button>
-
-													</div>
-												</div>
-											</div>
-											<h3 data-edit-target="#cid-{categories.cid}-name"><span>{categories.name}</span> <small><i class="fa fa-edit"></i></small></h3>
-											<input id="cid-{categories.cid}-name" type="text" class="form-control hide" placeholder="Category Name" data-name="name" value="{categories.name}" />
-											<h4 data-edit-target="#cid-{categories.cid}-description"><span>{categories.description}</span> <small><i class="fa fa-edit"></i></small></h4>
-											<input id="cid-{categories.cid}-description" data-name="description" placeholder="Category Description" value="{categories.description}" class="form-control category_description input-sm description hide"></input>
-
-											<fieldset>
-												<div class="col-xs-12">
-													<div class="form-group">
-														<label for="cid-{categories.cid}-parentCid">Parent Category</label>
-														<!-- IF categories.parent.name -->
-														<div class="btn-group">
-															<button type="button" class="btn btn-default" data-action="setParent" data-parentCid="{categories.parent.cid}"><i class="fa {categories.parent.icon}"></i> {categories.parent.name}</button>
-															<button type="button" class="btn btn-warning" data-action="removeParent" data-parentCid="{categories.parent.cid}"><i class="fa fa-times"></i></button>
-														</div>
-														<!-- ELSE -->
-														<button type="button" class="btn btn-default form-control" data-action="setParent"><i class="fa fa-sitemap"></i> (None)</button>
-														<!-- ENDIF categories.parent.name -->
-													</div>
-												</div>
-											</fieldset>
-											<fieldset>
-												<div class="col-sm-4 col-xs-12">
-													<div class="form-group">
-														<label for="cid-{categories.cid}-bgColor">Background Colour</label>
-														<input id="cid-{categories.cid}-bgColor" placeholder="#0059b2" data-name="bgColor" value="{categories.bgColor}" class="form-control category_bgColor" />
-													</div>
-												</div>
-												<div class="col-sm-4 col-xs-12">
-													<div class="form-group">
-														<label for="cid-{categories.cid}-color">Text Colour</label>
-														<input id="cid-{categories.cid}-color" placeholder="#fff" data-name="color" value="{categories.color}" class="form-control category_color" />
-													</div>
-												</div>
-												<div class="col-sm-4 col-xs-12">
-													<div class="form-group">
-														<label for="cid-{categories.cid}-imageClass">Image Class</label>
-															<select id="cid-{categories.cid}-imageClass" class="form-control" data-name="imageClass" data-value="{categories.imageClass}">
-															<option value="auto">auto</option>
-															<option value="cover">cover</option>
-															<option value="contain">contain</option>
-														</select>
-													</div>
-												</div>
-												<div class="col-sm-4 col-xs-12">
-													<div class="form-group">
-														<label for="cid-{categories.cid}-class">Custom Class</label>
-														<input id="cid-{categories.cid}-class" type="text" class="form-control" placeholder="col-md-6 col-xs-6" data-name="class" value="{categories.class}" />
-													</div>
-												</div>
-												<div class="col-sm-4 col-xs-12">
-													<div class="form-group">
-														<label for="cid-{categories.cid}-numRecentReplies"># of Recent Replies Displayed</label>
-														<input id="cid-{categories.cid}-numRecentReplies" type="text" class="form-control" placeholder="2" data-name="numRecentReplies" value="{categories.numRecentReplies}" />
-													</div>
-												</div>
-												<div class="col-sm-4 col-xs-12">
-													<div class="form-group">
-														<label for="cid-{categories.cid}-link">External Link</label>
-														<input id="cid-{categories.cid}-link" type="text" class="form-control" placeholder="http://domain.com" data-name="link" value="{categories.link}" />
-													</div>
-												</div>
-											</fieldset>
-
-											<input type="hidden" data-name="order" data-value="{categories.order}"></input>
-										</div>
-									</div>
-								</form>
-							</div>
-						</li>
-					<!-- END categories -->
-					</ul>
-				</div>				
+				<div class="row">
+					<table class="table table-striped table-hover">
+						<thead>
+							<tr>
+								<th></th>
+								<th>Name</th>
+								<th>Description</th>
+								<th class="text-center">Topics</th>
+								<th class="text-center">Posts</th>
+							</tr>
+						</thead>
+						<tbody id="entry-container">
+							<!-- BEGIN active -->
+							<tr data-cid="{active.cid}">
+								<td>
+									<span class="label" style="
+										<!-- IF active.backgroundImage -->background-image: url({active.backgroundImage});<!-- ENDIF active.backgroundImage -->
+										<!-- IF active.bgColor -->background-color: {active.bgColor};<!-- ENDIF active.bgColor -->
+										color: {active.color};
+										background-size:cover;
+									">
+										<i data-name="icon" value="{active.icon}" class="fa fa-fw {active.icon}"></i>
+									</span>
+								</td>
+								<td>{active.name}</td>
+								<td>{active.description}</td>
+								<td class="text-center">{active.topic_count}</td>
+								<td class="text-center">{active.post_count}</td>
+							</tr>
+							<!-- END active -->
+						</tbody>
+					</table>
+				</div>
 			</div>
 		</div>
 	</div>
@@ -141,6 +49,47 @@
 			</div>
 		</div>
 	</div>
+
+	<div class="col-lg-9">
+		<div class="panel panel-default">
+			<div class="panel-heading"><i class="fa fa-folder"></i> Categories</div>
+			<div class="panel-body">
+				<div class="row">
+					<table class="table table-striped table-hover">
+						<thead>
+							<tr>
+								<th></th>
+								<th>Name</th>
+								<th>Description</th>
+								<th class="text-center">Topics</th>
+								<th class="text-center">Posts</th>
+							</tr>
+						</thead>
+						<tbody id="entry-container">
+							<!-- BEGIN disabled -->
+							<tr data-cid="{disabled.cid}">
+								<td>
+									<span class="label" style="
+										<!-- IF disabled.backgroundImage -->background-image: url({disabled.backgroundImage});<!-- ENDIF disabled.backgroundImage -->
+										<!-- IF disabled.bgColor -->background-color: {disabled.bgColor};<!-- ENDIF disabled.bgColor -->
+										color: {disabled.color};
+										background-size:cover;
+									">
+										<i data-name="icon" value="{disabled.icon}" class="fa fa-fw {disabled.icon}"></i>
+									</span>
+								</td>
+								<td>{disabled.name}</td>
+								<td>{disabled.description}</td>
+								<td class="text-center">{disabled.topic_count}</td>
+								<td class="text-center">{disabled.post_count}</td>
+							</tr>
+							<!-- END disabled -->
+						</tbody>
+					</table>
+				</div>
+			</div>
+		</div>
+	</div>
 	
 	<!-- IMPORT admin/partials/categories/new.tpl -->
 	<!-- IMPORT admin/partials/categories/permissions.tpl -->
diff --git a/src/views/admin/partials/categories/row.tpl b/src/views/admin/partials/categories/row.tpl
new file mode 100644
index 0000000000..0e4c15909b
--- /dev/null
+++ b/src/views/admin/partials/categories/row.tpl
@@ -0,0 +1,16 @@
+							<tr data-cid="{cid}">
+								<td>
+									<span class="label" style="
+										<!-- IF backgroundImage -->background-image: url({backgroundImage});<!-- ENDIF backgroundImage -->
+										<!-- IF bgColor -->background-color: {bgColor};<!-- ENDIF bgColor -->
+										color: {color};
+										background-size:cover;
+									">
+										<i data-name="icon" value="{icon}" class="fa fa-fw {icon}"></i>
+									</span>
+								</td>
+								<td>{name}</td>
+								<td>{description}</td>
+								<td class="text-center">{topic_count}</td>
+								<td class="text-center">{post_count}</td>
+							</tr>
\ No newline at end of file