admin interface

src/main/java/com/commafeed/frontend/pages/HomePage.java

@@ -14,6 +14,7 @@ import com.commafeed.frontend.references.angularuibootstrap.AngularUIBootstrapRe
 import com.commafeed.frontend.references.angularuistate.AngularUIStateReference;
 import com.commafeed.frontend.references.csstreeview.CssTreeViewReference;
 import com.commafeed.frontend.references.mousetrap.MouseTrapReference;
+import com.commafeed.frontend.references.nggrid.NGGridReference;
 import com.commafeed.frontend.references.nginfinitescroll.NGInfiniteScrollReference;
 import com.commafeed.frontend.references.ngupload.NGUploadReference;
 import com.commafeed.frontend.references.select2.Select2Reference;
@@ -37,6 +38,7 @@ public class HomePage extends BasePage {
 		Select2Reference.renderHead(response);
 		SpinJSReference.renderHead(response);
 		MouseTrapReference.renderHead(response);
+		NGGridReference.renderHead(response);
 
 		CssTreeViewReference.renderHead(response);
 

src/main/java/com/commafeed/frontend/references/nggrid/NGGridReference.java

@@ -0,0 +1,35 @@
+package com.commafeed.frontend.references.nggrid;
+
+import java.util.Arrays;
+
+import org.apache.wicket.markup.head.CssHeaderItem;
+import org.apache.wicket.markup.head.HeaderItem;
+import org.apache.wicket.markup.head.IHeaderResponse;
+import org.apache.wicket.markup.head.JavaScriptHeaderItem;
+import org.apache.wicket.request.resource.CssResourceReference;
+import org.apache.wicket.request.resource.JavaScriptResourceReference;
+
+import com.commafeed.frontend.references.angular.AngularReference;
+
+public class NGGridReference extends JavaScriptResourceReference {
+	private static final long serialVersionUID = 1L;
+
+	public static final NGGridReference INSTANCE = new NGGridReference();
+
+	private NGGridReference() {
+		super(NGGridReference.class, "ng-grid-2.0.2.js");
+	}
+
+	@SuppressWarnings("unchecked")
+	@Override
+	public Iterable<? extends HeaderItem> getDependencies() {
+		return Arrays.asList(JavaScriptHeaderItem
+				.forReference(AngularReference.INSTANCE), CssHeaderItem
+				.forReference(new CssResourceReference(NGGridReference.class,
+						"ng-grid.css")));
+	}
+
+	public static void renderHead(final IHeaderResponse response) {
+		response.render(JavaScriptHeaderItem.forReference(INSTANCE));
+	}
+}

src/main/java/com/commafeed/frontend/references/nggrid/ng-grid.css

@@ -0,0 +1,472 @@
+
+/******** Grid Global ********/
+.nglabel {
+    display: block;
+    float: left;
+    font-weight: bold;
+    padding-right: 5px;
+}
+/******** Grid ********/
+
+.ngGrid{
+    background-color: rgb(253, 253, 253);  
+}
+
+/******** Header ********/
+
+.ngGroupPanel{
+    background-color: rgb(234, 234, 234);
+    overflow: hidden;
+	border-bottom: 1px solid rgb(212,212,212);
+}
+
+.ngGroupPanelDescription{
+	margin-top: 5px;
+	margin-left: 5px;
+}
+
+.ngGroupList {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+
+.ngGroupItem {
+	float: left; 
+}
+
+.ngGroupElement {
+	float: left;
+	height: 100%; 
+	width: 100%;
+}
+
+.ngGroupName {
+    background-color: rgb(247,247,247);
+    border: 1px solid rgb(212,212,212);
+    padding: 3px 10px;
+    float: left;
+    margin-left: 0;
+    margin-top: 2px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    font-weight: bold;
+}
+
+.ngGroupItem:first-child{
+	margin-left: 2px;
+}
+
+.ngRemoveGroup {
+    width: 5px;
+    -moz-opacity: 0.4;
+    opacity: 0.4;
+    margin-top: -1px;
+    margin-left: 5px;
+}
+.ngRemoveGroup:hover {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+    -moz-opacity: 0.7;
+    opacity: 0.7;
+}
+.ngGroupArrow {
+	width: 0; 
+	height: 0; 
+	border-top: 6px solid transparent;
+	border-bottom: 6px solid transparent;
+	border-left: 6px solid black;
+	margin-top: 10px;
+	margin-left: 5px;
+	margin-right: 5px;
+	float: right;
+}
+
+.ngTopPanel {
+    position: relative;	
+	z-index:5;
+    background-color: rgb(234, 234, 234);
+	border-bottom: 1px solid rgb(212,212,212);
+}
+.ngHeaderContainer {
+    position: relative;
+    overflow: hidden;
+    font-weight: bold;
+    background-color: inherit;
+}
+
+.ngHeaderScroller {
+	position:absolute;
+    background-color: inherit;
+}
+.ngHeaderSortColumn{
+	position:absolute;
+    overflow: hidden;
+}
+
+.ngHeaderCell{
+	border-right: 1px solid rgb(212,212,212);
+	border-left: 1px solid rgb(212,212,212);
+    position: absolute;
+    top: 0; 
+    bottom: 0; 
+    background-color: inherit;
+}
+
+.ngHeaderCell:first-child{
+    border-left: 0;
+}
+
+.ngSortButtonUp {
+    position: absolute;
+    top: 3px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+	border-color: gray transparent;
+	border-style: solid;
+	border-width: 0 5px 5px 5px;
+	height: 0;
+	width: 0;
+}
+.ngSortButtonDown {
+    position: absolute;
+    top: 3px;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+	border-color: gray transparent;
+	border-style: solid;
+	border-width: 5px 5px 0 5px;
+    height: 0;
+	width: 0;
+}
+.ngSortPriority {
+    position: absolute;
+    top: -5px;
+    left: 1px;
+    font-size: 6pt;
+    font-weight: bold;
+}
+.ngHeaderGrip { 
+    cursor: col-resize; 
+    width: 10px; 
+	right: -5px;
+    top: 0; 
+    height: 100%; 
+    position: absolute; 
+    background-color: transparent;
+}
+.ngHeaderText {
+    padding: 5px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    white-space: nowrap;
+    -ms-text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+/******** Viewport ********/
+.ngViewport{
+	overflow: auto;
+    min-height: 20px;
+}
+
+.ngCanvas{
+    position: relative;
+}
+
+/******** Rows ********/
+.ngRow {
+    position: absolute;
+    border-bottom: 1px solid rgb(229, 229, 229);
+}
+.ngRow.even {
+    background-color: rgb(243, 243, 243);
+}
+.ngRow.odd {
+    background-color: rgb(253, 253, 253);
+}
+.ngRow.selected {
+    background-color: rgb(201, 221, 225);
+}
+.ngRow.canSelect {
+    cursor: pointer;
+}
+
+/******** Cells ********/
+
+.ngCell {
+    overflow: hidden; 
+    position: absolute;
+	border-right: 1px solid rgb(212,212,212);
+	border-left: 1px solid rgb(212,212,212);
+    top: 0; 
+    bottom: 0; 
+    background-color: inherit;
+}
+
+.ngCell:first-child{
+	border-left: 0;
+}
+
+.ngCellElement:focus {
+	outline: 0;
+    background-color: rgb(179, 196, 199);
+}
+
+.ngCellText {
+    padding: 5px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    white-space: nowrap;
+    -ms-text-overflow: ellipsis;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.ngSelectionHeader {
+	position: absolute;
+    top: 11px; 
+    left: 6px;
+}
+.ngGrid input[type="checkbox"] {
+	margin: 0;
+	padding: 0;
+}
+.ngGrid input {
+	vertical-align:top;
+}
+.ngSelectionCell{
+	margin-top: 9px;
+	margin-left: 6px;
+}
+.ngSelectionCheckbox{
+	margin-top: 9px;
+	margin-left: 6px;
+}
+.ngNoSort {
+    cursor:default;
+}
+
+/******** Footer ********/
+.ngFooterPanel{
+    background-color: rgb(234, 234, 234);
+    padding: 0;
+	border-top: 1px solid rgb(212,212,212);
+	position: relative;
+}
+.ngTotalSelectContainer {
+    float: left;
+    margin: 5px;
+    margin-top: 7px;
+}
+.ngFooterSelectedItems {
+	padding: 2px;
+}
+.ngFooterTotalItems {
+	padding: 2px;
+}
+.ngFooterTotalItems.ngnoMultiSelect {
+    padding: 0 !important;
+}
+
+/* Aggregates */
+.ngAggHeader {
+    position: absolute;
+    border: none;
+}
+.ngAggregate {
+    position: absolute;
+    background-color: rgb(201, 221, 225);
+    border-bottom: 1px solid beige;
+    overflow: hidden;
+    top: 0;
+    bottom: 0;
+    right: -1px;
+	left: 0;
+}
+.ngAggregateText {
+    position: absolute;
+    left: 27px;
+	top: 5px;
+    line-height: 20px;
+    white-space:nowrap;
+}
+.ngAggArrowExpanded {
+    position: absolute;
+    left: 8px;
+    bottom: 10px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 0 9px 9px;
+    border-color: transparent transparent #000000 transparent;
+}
+.ngAggArrowCollapsed {
+    position: absolute;
+    left: 8px;
+    bottom: 10px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 5px 0 5px 8.7px;
+    border-color: transparent transparent transparent #000000;
+}
+
+.ngHeaderButton {
+    position: absolute;    
+    right: 2px;
+    top: 8px;
+    -moz-border-radius: 50%;
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    z-index: 5;
+    background-color: rgb(179, 191, 188);
+    cursor: pointer;
+    /* width and height can be anything, as long as they're equal */
+}
+.ngHeaderButtonArrow {
+    position: absolute;
+    top: 4px;
+    left: 3px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 6.5px 4.5px 0 4.5px;
+    border-color: #000 transparent transparent transparent;
+    /* width and height can be anything, as long as they're equal */
+}
+.ngColMenu {
+    right: 2px;
+    padding: 5px;
+    top: 25px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #BDD0CB;
+    position: absolute;
+    border: 2px solid rgb(212,212,212);
+    z-index: 5;
+}
+.ngMenuText {
+    position: relative;
+    top: 2px;
+    left: 2px;
+}
+.ngColList {
+    list-style-type: none;
+}
+
+.ngColListItem {
+    position: relative;
+    right: 17px;
+    top: 2px;
+    white-space:nowrap;
+}
+.ngColListCheckbox {
+    position: relative;
+    right: 3px;
+    top: 4px;
+}
+
+/********Paging Styles **********/
+
+.ngPagerButton{
+	height: 25px;
+	min-width: 26px;
+}
+
+.ngPagerFirstTriangle{
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-width: 5px 8.7px 5px 0;
+	border-color: transparent #000000 transparent transparent;
+	margin-left: 2px;
+}
+
+.ngPagerFirstBar{
+	width: 10px;
+	border-left: 2px solid black;
+	margin-top: -6px;
+	height: 12px;
+	margin-left: -3px;
+}	
+
+.ngPagerLastTriangle{
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-width: 5px 0 5px 8.7px;
+	border-color: transparent transparent transparent #000000;
+	margin-left: -1px;
+}
+
+.ngPagerLastBar{
+	width: 10px;
+	border-left: 2px solid black;
+	margin-top: -6px;
+	height: 12px;
+	margin-left: 1px;
+}	
+
+.ngPagerPrevTriangle{
+	margin-left: 0;
+}	
+
+.ngPagerNextTriangle{
+	margin-left: 1px;
+}
+.ngGroupIcon {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAEFJREFUKFNjoAhISkr+h2J5JDZODNXGwGBsbPwfhIGAA8bGh6HaGBiAGhxAGJmND4M1gQCSM0adCsVQbcPcqQwMALWDGyDvWPefAAAAAElFTkSuQmCC);
+	background-repeat:no-repeat;
+    height: 15px;
+    width: 15px;
+    position: absolute;
+    right: -2px;
+    top: 2px;
+}
+
+.ngGroupedByIcon {
+	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAElJREFUKFNjoAhISkr+R8LyaHwMDNXGwGBsbPwfhoGAA5mPDUO1oWpE52PDYE0gALTFAYbR+dgwWBMIoPlh1I9ADNU2NPzIwAAAFQYI9E4OLvEAAAAASUVORK5CYII=);
+	background-repeat:no-repeat;
+    height: 15px;
+    width: 15px;
+    position: absolute;
+    right: -2px;
+    top: 2px;
+}
+.ngPinnedIcon {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAmElEQVQoU33PQapBURjA8UtkwJuaWYGSgfQWYBMvczPmTCzAAGVuaA228BZhRCkDGSmE31FucuRfvzq3vr5zT/JSjSU7DsypEPXDkDVn2hSIytJhw4kWGaLCxgHh2gt/RBuLzNhz5caWPjnSqqw4EraFfwznf8qklWjwy4IRTerkiQoPGtPl40OehcEJvcfXl8LglLfBJLkDcMgbgHlHhK8AAAAASUVORK5CYII=);
+    background-repeat: no-repeat;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    height: 10px;
+    width: 10px;
+}
+.ngUnPinnedIcon {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAlElEQVQoU33PPQrCQBRF4fFnI2KfZVi5ARvdgo1l6mwmkCJVOgluwd5OwUoDtnoOxAei8cLXTN7cvEl/skCNDCMPfsUPO5zQwOHIDEvYtMURHe6wOVLgigvOePRyeDkyR4ln7wZ//7XfFBu8B23+aDJjrHGAwza7hjtHJvDmHg7b7Bru7AMjK7Rw2ObBVHDY5oGk9AKQNB2zy8MBTgAAAABJRU5ErkJggg==);
+    background-repeat: no-repeat;
+    position: absolute;
+    height: 10px;
+    width: 10px;
+    right: 5px;
+    top: 5px;
+}
+.ngGroupingNumber {
+    position: absolute;
+    right: -10px;
+    top: -2px;
+}

src/main/java/com/commafeed/frontend/rest/RESTApplication.java

@@ -5,7 +5,7 @@ import java.util.Set;
 import javax.ws.rs.ApplicationPath;
 import javax.ws.rs.core.Application;
 
-import com.commafeed.frontend.rest.resources.AdminREST;
+import com.commafeed.frontend.rest.resources.AdminUsersREST;
 import com.commafeed.frontend.rest.resources.EntriesREST;
 import com.commafeed.frontend.rest.resources.SettingsREST;
 import com.commafeed.frontend.rest.resources.SubscriptionsREST;
@@ -22,7 +22,7 @@ public class RESTApplication extends Application {
 		set.add(SubscriptionsREST.class);
 		set.add(EntriesREST.class);
 		set.add(SettingsREST.class);
-		set.add(AdminREST.class);
+		set.add(AdminUsersREST.class);
 		return set;
 	}
 }

src/main/java/com/commafeed/frontend/rest/resources/AdminUsersREST.java

@@ -14,10 +14,10 @@ import com.commafeed.frontend.rest.SecurityCheck;
 import com.google.common.collect.Maps;
 
 @SecurityCheck(Role.ADMIN)
-@Path("admin")
+@Path("admin/users")
-public class AdminREST extends AbstractREST {
+public class AdminUsersREST extends AbstractREST {
 
-	@Path("users/get")
+	@Path("get")
 	@GET
 	public Collection<UserModel> getUsers() {
 		Map<Long, UserModel> users = Maps.newHashMap();

src/main/webapp/js/controllers.js

@@ -140,7 +140,7 @@ module.controller('FeedListCtrl', function($scope, $stateParams, $http, $route,
 		}, function(data) {
 			for ( var i = 0; i < data.entries.length; i++) {
 				$scope.entries.push(data.entries[i]);
-			}
+			};
 			$scope.name = data.name;
 			$scope.busy = false;
 			$scope.hasMore = data.entries.length == limit
@@ -239,7 +239,7 @@ module.controller('FeedListCtrl', function($scope, $stateParams, $http, $route,
 			openPreviousEntry(e);
 		})
 	});
-	
+
 	$scope.$on('reload', function(event, args) {
 		$scope.name = null;
 		$scope.entries = [];
@@ -247,4 +247,11 @@ module.controller('FeedListCtrl', function($scope, $stateParams, $http, $route,
 		$scope.hasMore = true;
 		$scope.loadMoreEntries();
 	});
+});
+
+module.controller('ManageUsersCtrl', function($scope, AdminUsersService) {
+	$scope.users = AdminUsersService.get();
+	$scope.gridOptions = {
+		data : 'users'
+	};
 });

src/main/webapp/js/main.js

@@ -1,6 +1,6 @@
 var app = angular.module('commafeed', [ 'ui', 'ui.bootstrap', 'ui.state',
 		'commafeed.directives', 'commafeed.controllers', 'commafeed.services',
-		'ngSanitize', 'ngUpload', 'infinite-scroll' ]);
+		'ngSanitize', 'ngUpload', 'infinite-scroll', 'ngGrid' ]);
 
 app.config(function($routeProvider, $stateProvider, $urlRouterProvider) {
 	$stateProvider.state('feeds', {
@@ -20,6 +20,7 @@ app.config(function($routeProvider, $stateProvider, $urlRouterProvider) {
 	});
 	$stateProvider.state('admin.users', {
 		url : '/users',
+		controller : 'ManageUsersCtrl',
 		templateUrl : 'templates/admin.users.html'
 	});
 

src/main/webapp/js/services.js

@@ -126,4 +126,18 @@ module.service('SettingsService', function($resource) {
 		$resource('rest/settings/save').save(s.settings);
 	};
 	return s;
-});
+});
+
+module.service('AdminUsersService', function($resource) {
+	var actions = {
+		get : {
+			method : 'GET',
+			params : {
+				_method : 'get'
+			},
+			isArray : true
+		}
+	};
+	var res = $resource('rest/admin/:_method', {}, actions);
+	return res;
+})

src/main/webapp/templates/admin.users.html

@@ -1 +1,3 @@
-Manage users
+Manage users
+
+<div ng-grid="gridOptions"></div>