Switched from dialog to detail page in consumers app

apimanager/consumers/static/consumers/css/consumers.css

@@ -2,28 +2,15 @@
 	margin-top: 20px;
 }
 
-.consumers .consumer-row {
-	cursor: pointer;
-}
-
-.consumers .consumer-enabled {
-	background-color: rgba(0, 255, 0, 0.1);
-}
-
-.consumers .consumer-disabled {
-	background-color: rgba(255, 0, 0, 0.1);
-}
-
-.consumers .table > tbody > tr.active > td {
-	background-color: #fff;
-}
-
-
-.consumers .btn-group.filter-enabled {
+#consumers .btn-group.filter-enabled {
 	margin-left: 10px;
 }
 
-.consumers .btn-group-vertical.filter-enabled,
-.consumers .btn-group-vertical.filter-apptype {
+#consumers .btn-group-vertical.filter-enabled,
+#consumers .btn-group-vertical.filter-apptype {
 	margin-top: 10px;
 }
+
+#consumers-detail div {
+	margin: 10px 0;
+}

apimanager/consumers/static/consumers/js/consumers.js

@@ -1,35 +1,2 @@
 $(document).ready(function($) {
-	$('#consumer-detail').hide();
-	$('.consumers .consumer-row td.select').click(function() {
-		$('.consumers .consumer-row').removeClass('active');
-		var tr = $(this).parent();
-		tr.addClass('active');
-		var consumer_id = tr.data('consumer-id');
-		$.each(CONSUMERS, function (idx, consumer) {
-			if (consumer['id'] == consumer_id) {
-				$('#consumer-detail-id').val(consumer['id']);
-				$('#consumer-detail-name').html(consumer['name']);
-				$('#consumer-detail-developerEmail').html(consumer['developerEmail']);
-				$('#consumer-detail-created').html(consumer['created']);
-				$('#consumer-detail-description').html(consumer['description']);
-				var isactive = $('#consumer-detail-isactive');
-				var enableButton = $('#consumer-detail-enable');
-				enableButton.removeClass('btn-green').removeClass('btn-red');
-				if (consumer['enabled']) {
-					enableButton.addClass('btn-red');
-					enableButton.html('Disable');
-					enableButton.attr('href',
-						CONSUMERS_DISABLE.replace('0', consumer['id']));
-					isactive.prop('checked', true);
-				} else {
-					enableButton.addClass('btn-green');
-					enableButton.html('Enable');
-					enableButton.attr('href',
-						CONSUMERS_ENABLE.replace('0', consumer['id']));
-					isactive.prop('checked', false);
-				}
-				$('#consumer-detail').modal('show');
-			}
-		});
-	});
 });

apimanager/consumers/templates/consumers/detail.html

@@ -0,0 +1,63 @@
+{% extends 'base.html' %}
+{% load humanize static %}
+
+{% block page_title %}{{ block.super }} / {{ consumer.name }}{% endblock page_title %}
+
+{% block content %}
+<div id="consumers-detail">
+	<h1>Consumer {{ consumer.name }}</h1>
+
+	<div id="consumers-detail-id">
+		<strong>ID</strong><br />
+		<span>{{ consumer.id }}</span>
+	</div>
+
+
+	<div id="consumers-detail-developerEmail">
+		<strong>Developer Email</strong><br />
+		<span>{{ consumer.developerEmail }}</span>
+	</div>
+
+	<div id="consumers-detail-created">
+		<strong>Created</strong><br />
+		<span>{{ consumer.created|naturaltime }}</span>
+	</div>
+
+	<div id="consumers-detail-description">
+		<strong>Description</strong><br />
+		<div class="well">{{ consumer.description }}</div>
+	</div>
+
+	<div id="consumers-detail-enable">
+		{% if consumer.enabled %}
+			{% url 'consumers-disable' consumer.id as url_action %}
+		{% else %}
+			{% url 'consumers-enable' consumer.id as url_action %}
+		{% endif %}
+		<form action="{{ url_action }}" method="post">
+			{% csrf_token %}
+			<input type="hidden" name="next" value="{{ request.path }}" />
+			<div class="form-group">
+			{% if consumer.enabled %}
+				<button type="submit" class="btn btn-primary btn-red">Disable</a>
+			{% else %}
+				<button type="submit" class="btn btn-primary btn-green">Enable</a>
+			{% endif %}
+			</div>
+		</form>
+	</div>
+</div>
+{% endblock %}
+
+{% block extrajs %}
+{% comment %}
+	<script type="text/javascript" src="{% static 'consumers/js/consumers.js' %}"></script>
+	<script type="text/javascript">
+	</script>
+{% endcomment %}
+{% endblock extrajs %}
+
+
+{% block extracss %}
+		<link href="{% static 'consumers/css/consumers.css' %}" rel="stylesheet">
+{% endblock extracss %}

apimanager/consumers/templates/consumers/includes/filter_apptype.html

@@ -1,3 +1,3 @@
 <a href="?apptype=web&time={{ request.GET.time }}&enabled={{ request.GET.enabled }}" class="btn btn-default{% if active_apptype_web %} active{% endif %}">Web</a>
 <a href="?apptype=mobile&time={{ request.GET.time }}&enabled={{ request.GET.enabled }}" class="btn btn-default{% if active_apptype_mobile %} active{% endif %}">Mobile</a>
-<a href="?apptype=all&time={{ request.GET.time }}&enabled={{ request.GET.enabled }}" class="btn btn-default{% if active_apptype_all %} active{% endif %}">All</a>
+<a href="?apptype=All&time={{ request.GET.time }}&enabled={{ request.GET.enabled }}" class="btn btn-default{% if active_apptype_all %} active{% endif %}">All</a>

apimanager/consumers/templates/consumers/includes/filter_enabled.html

@@ -1,3 +1,3 @@
 <a href="?enabled=true&apptype={{ request.GET.apptype }}&time={{ request.GET.time }}" class="btn btn-default{% if active_enabled_true %} active{% endif %}">Enabled</a>
 <a href="?enabled=false&apptype={{ request.GET.apptype }}&time={{ request.GET.time }}" class="btn btn-default{% if active_enabled_false %} active{% endif %}">Disabled</a>
-<a href="?enabled=all&apptype={{ request.GET.apptype }}&time={{ request.GET.time }}" class="btn btn-default{% if active_enabled_all %} active{% endif %}">All</a>
+<a href="?enabled=All&apptype={{ request.GET.apptype }}&time={{ request.GET.time }}" class="btn btn-default{% if active_enabled_all %} active{% endif %}">All</a>

apimanager/consumers/templates/consumers/includes/filter_time.html

@@ -4,4 +4,4 @@
 <a href="?time=week&apptype={{ request.GET.apptype }}&enabled={{ request.GET.enabled }}" class="btn btn-default{% if active_time_week %} active{% endif %}">Last Week</a>
 <a href="?time=month&apptype={{ request.GET.apptype }}&enabled={{ request.GET.enabled }}" class="btn btn-default{% if active_time_month %} active{% endif %}">Last Month</a>
 <a href="?time=year&apptype={{ request.GET.apptype }}&enabled={{ request.GET.enabled }}" class="btn btn-default{% if active_time_year %} active{% endif %}">Last Year</a>
-<a href="?time=all&apptype={{ request.GET.apptype }}&enabled={{ request.GET.enabled }}" class="btn btn-default{% if active_time_all %} active{% endif %}">All</a>
+<a href="?time=All&apptype={{ request.GET.apptype }}&enabled={{ request.GET.enabled }}" class="btn btn-default{% if active_time_all %} active{% endif %}">All</a>

apimanager/consumers/templates/consumers/index.html

@@ -4,7 +4,7 @@
 {% block page_title %}{{ block.super }} / Consumers{% endblock page_title %}
 
 {% block content %}
-<div class="consumers">
+<div id="consumers">
 	<h1>Consumers</h1>
 
 	<div class="btn-group hidden-xs filter-time" role="group" aria-label="filter-time">
@@ -30,13 +30,13 @@
 
 	<h2>Statistics</h2>
 	<ul id="statistics">
-		<li>Total number of consumers: {{ consumers_num }}</li>
+		<li>Total number of consumers: {{ statistics.consumers_num }}</li>
 	</ul>
 
 	<div class="table-responsive">
 		<table class="table table-hover" id="consumer-list">
 			<thead>
-				<th>No</th>
+				<th>#</th>
 				<th>Name</th>
 				<th>Developer Email</th>
 				<th>Created</th>
@@ -45,11 +45,17 @@
 			<tbody>
 			{% for consumer in consumers %}
 			<tr class="consumer-row {% if consumer.enabled %}consumer-enabled{% else %}consumer-disabled{% endif %}" data-consumer-id="{{ consumer.id }}">
+				{% url 'consumers-detail' consumer.id as url_detail %}
 				<td>{{ forloop.counter }}</td>
-					<td class="select">{{ consumer.name }}</td>
+				<td class="select"><a href="{{ url_detail }}">{{ consumer.name }}</a></td>
 					<td class="select">{{ consumer.developerEmail }}</td>
 					<td class="select">{{ consumer.created|naturaltime }}</td>
-					<td>{% if consumer.enabled %}<a class="btn btn-sm btn-primary btn-red" href="{% url 'consumers-disable' consumer.id %}?{{ request.GET.urlencode }}" role="button">Disable</a>{% else %}<a class="btn btn-sm btn-primary btn-green" href="{% url 'consumers-enable' consumer.id %}?{{ request.GET.urlencode }}" role="button">Enable</a>{% endif %}</td>
+					<td>
+						<div class="btn-group" role="group" aria-label="actions">
+							{% if consumer.enabled %}<a class="btn btn-primary btn-red" href="{% url 'consumers-disable' consumer.id %}?{{ request.GET.urlencode }}" role="button">Disable</a>{% else %}<a class="btn btn-primary btn-green" href="{% url 'consumers-enable' consumer.id %}?{{ request.GET.urlencode }}" role="button">Enable</a>{% endif %}
+							<a href="{{ url_detail }}" class="btn btn-primary">View</a>
+						</div>
+					</td>
 				</tr>
 			{% endfor %}
 			</tbody>
@@ -57,50 +63,17 @@
 	</div>
 
 
-	<div class="modal fade" id="consumer-detail" tabindex="-1" role="dialog">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-					<h4 id="consumer-detail-name"></h4>
-				</div>
-				<div class="modal-body">
-					<p>
-						<strong>Developer Email</strong><br />
-						<span id="consumer-detail-developerEmail"></span>
-					</p>
-
-					<p>
-						<strong>Created</strong><br />
-						<span id="consumer-detail-created"></span>
-					</p>
-
-					<p>
-						<strong>Description</strong><br />
-						<div class="well" id="consumer-detail-description"></div>
-					</p>
-				</div>
-				<div class="modal-footer">
-					<a id="consumer-detail-enable" class="btn btn-primary btn-red" href="" role="button">UNKNOWN</a>
-					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-				</div>
-			</div><!-- /.modal-content -->
-		</div><!-- /.modal-dialog -->
-	</div><!-- /.modal -->
-
-
 </div>
 {% endblock content %}
 
 
 
 {% block extrajs %}
+{% comment %}
 	<script type="text/javascript" src="{% static 'consumers/js/consumers.js' %}"></script>
 	<script type="text/javascript">
-	CONSUMERS = {{ consumers_json|safe }};
-	CONSUMERS_ENABLE = "{% url 'consumers-enable' 0 %}?{{ request.GET.urlencode }}";
-	CONSUMERS_DISABLE = "{% url 'consumers-disable' 0 %}?{{ request.GET.urlencode }}";
 	</script>
+{% endcomment %}
 {% endblock extrajs %}
 
 

apimanager/consumers/urls.py

@@ -1,9 +1,10 @@
 from django.conf.urls import url
 
-from .views import IndexView, EnableView, DisableView
+from .views import IndexView, DetailView, EnableView, DisableView
 
 urlpatterns = [
     url(r'^$', IndexView.as_view(), name='consumers-index'),
-    url(r'^enable/(?P<consumer_id>[0-9]+)$', EnableView.as_view(), name='consumers-enable'),
-    url(r'^disable/(?P<consumer_id>[0-9]+)$', DisableView.as_view(), name='consumers-disable'),
+    url(r'^(?P<consumer_id>[0-9]+)$', DetailView.as_view(), name='consumers-detail'),
+    url(r'^(?P<consumer_id>[0-9]+)/enable$', EnableView.as_view(), name='consumers-enable'),
+    url(r'^(?P<consumer_id>[0-9]+)/disable$', DisableView.as_view(), name='consumers-disable'),
 ]

apimanager/consumers/views.py

@@ -18,7 +18,7 @@ class FilterAppType(BaseFilter):
     filter_type = 'apptype'
 
     def _apply(self, data, filter_value):
-        filtered = [x for x in data if x['appType'].lower() == filter_value]
+        filtered = [x for x in data if x['appType'] == filter_value]
         return filtered
 
 
@@ -62,8 +62,33 @@ class IndexView(LoginRequiredMixin, TemplateView):
 
         context.update({
             'consumers': filtered,
-            'consumers_num': len(filtered),
             'consumers_json': json.dumps(filtered, default=json_serial),
+            'statistics': {
+                'consumers_num': len(filtered),
+            },
+        })
+        return context
+
+
+
+class DetailView(LoginRequiredMixin, TemplateView):
+    template_name = "consumers/detail.html"
+
+    def get_context_data(self, **kwargs):
+        context = super(DetailView, self).get_context_data(**kwargs)
+        urlpath = '/management/consumers/{}'.format(kwargs['consumer_id'])
+        consumer = api_get(self.request, urlpath)
+        
+        if not isinstance(consumer, dict):
+            messages.error(self.request, consumer)
+        elif 'error' in consumer:
+            messages.error(self.request, consumer['error'])
+        else:
+            consumer['created'] = datetime.strptime(
+                consumer['created'], settings.API_DATETIMEFORMAT)
+
+        context.update({
+            'consumer': consumer,
         })
         return context
 
@@ -78,9 +103,11 @@ class EnableDisableView(LoginRequiredMixin, RedirectView):
             messages.error(self.request, result['error'])
         else:
             messages.success(self.request, self.success)
+        urlpath = self.request.POST.get('next', reverse('consumers-index'))
         query = self.request.GET.urlencode()
-        url = '{}?{}'.format(reverse('consumers-index'), query)
-        return url
+        redirect_url = '{}?{}'.format(urlpath, query)
+        return redirect_url
+
 
 
 class EnableView(EnableDisableView):