Update category list view (#368)

* Update category list view - fix redundant title text - allow ordering from category list * Fix travis error
kartoza · Jul 22, 2016 · cfaeacf · cfaeacf
1 parent 8c647b1
commit cfaeacf
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 98 deletions.
diff --git a/django_project/changes/static/js/category.js b/django_project/changes/static/js/category.js
@@ -0,0 +1,81 @@
+/**
+ * Created by Dimas Ciputra <[email protected]> on 22/07/16.
+ */
+
+var sortable_state = 'enabled';
+
+$("#sortable").sortable({
+    stop: onStopSortable
+});
+
+function onStopSortable(e, ui) {
+    var categories = $.map($(this).find('li'), function(el, i){
+        var cat = String(el.id).split('-');
+        return {
+            'sort_number' : i,
+            'id': cat[0],
+            'name': cat[1]
+        }
+    });
+    sortableDisable();
+
+    var data_url = $("#sortable").data("url");
+
+    if(data_url) {
+        $.ajax({
+            url: data_url,
+            type: "POST",
+            data: JSON.stringify(categories),
+            success: function (response) {
+                sortableEnable();
+                if($('#order-saved').is(":visible"))
+                {
+                    $('#order-saved').hide();
+                    showOrderSaved();
+                } else {
+                    showOrderSaved();
+                }
+            },
+            error: function (response) {
+                console.log(response);
+                sortableEnable();
+                if($('#order-not-saved').is(":visible"))
+                {
+                    $('#order-not-saved').hide();
+                    showOrderNotSaved();
+                } else {
+                    showOrderNotSaved();
+                }
+            }
+
+        });
+    }
+
+}
+
+function showOrderSaved() {
+    $('#order-saved').fadeIn( "fast", function() {
+        $('#order-saved').fadeOut(2000);
+    });
+}
+
+function showOrderNotSaved() {
+    $('#order-not-saved').fadeIn( "fast", function() {
+        $('#order-not-saved').fadeOut(2000);
+    });
+}
+
+function sortableEnable() {
+    sortable_state = 'enabled';
+    $("#sortable").sortable({
+        stop: onStopSortable
+    });
+    $("#sortable").sortable("option", "disabled", false );
+    $("#sortable").disableSelection();
+    return false;
+}
+function sortableDisable() {
+    sortable_state = 'disabled';
+    $( "#sortable" ).sortable("disable");
+    return false;
+}
diff --git a/django_project/changes/templates/category/list.html b/django_project/changes/templates/category/list.html
@@ -36,15 +36,22 @@ <h1 class="text-muted">
                             <span class="glyphicon glyphicon-th-list"></span>
                         </a>
                     {% endif %}
-                    <a class="btn btn-default btn-mini tooltip-toggle"
-                        href='{% url "category-order" project_slug %}'
-                        data-title="Order Categories">
-                        <span class="glyphicon glyphicon-sort-by-order"></span>
-                    </a>
+                    {% if user.is_staff %}
+                        <a class="btn btn-default btn-mini tooltip-toggle"
+                            href='{% url "category-order" project_slug %}'
+                            data-title="Order Categories">
+                            <span class="glyphicon glyphicon-sort-by-order"></span>
+                        </a>
+                    {% endif %}
                 </div>
+                    <span id="order-saved" hidden class="alert alert-success" style="font-size: 9pt; padding: 3px;font-style: italic;">
+                        order saved</span>
+                    <span id="order-not-saved" hidden class="alert alert-danger" style="font-size: 9pt; padding: 3px;font-style: italic;">
+                        order not saved</span>
             {% endif %}
         </h1>
     </div>
+
     {% ifequal num_categories 0 %}
         {% if unapproved %}
             <h3>All categories are approved.</h3>
@@ -54,12 +61,17 @@ <h3>No categories are defined, but you can <a
                     href='{% url "category-create" project_slug %}'>create one</a>.</h3>
         {% endif %}
     {% endifequal %}
+
+    {% if user.is_authenticated and user.is_staff %}
+        <ul id="sortable" data-url="{% url "category-submit-order" project_slug %}">
+    {% else %}
+        <ul>
+    {% endif %}
+
     {% for category in categories %}
-        <script>console.debug("{{ category }}");</script>
-        <div class="row" style="margin-top:10px;">
+        <li class="row order" style="margin-top:10px;" id="{{ category.id }}-{{ category.name }}">
             <div class="col-lg-10">
-                <h5>{{ category.project.name }}</h5>
-                <h3>{{ category.name }}</h3>
+                <h4>{{ category.name }}</h4>
             </div>
             <div class="col-lg-2">
                 <div class="btn-group pull-right">
@@ -83,7 +95,14 @@ <h3>{{ category.name }}</h3>
                     </a>
                 </div>
             </div>
-        </div>
+        </li>
     {%  endfor %}
+
+    </ul>
     <hr />
+
+    <script>
+
+    </script>
+
 {% endblock %}
diff --git a/django_project/changes/templates/category/order.html b/django_project/changes/templates/category/order.html
@@ -30,9 +30,8 @@ <h1 class="text-muted">
     {% ifequal num_categories 0 %}
         <h3>No categories are defined, but you can</h3>
     {% endifequal %}
-    <ul id="sortable" >
+    <ul id="sortable" data-url="{% url "category-submit-order" project_slug %}">
     {% for category in categories %}
-        <script>console.debug("{{ category }}");</script>
         <li class="row order" style="margin-top:6px;" id="{{ category.id }}-{{ category.name }}" >
             <div class="col-lg-1" style="padding-top: 10px;">
                 {% if category.image_file %}
@@ -53,81 +52,5 @@ <h3>No categories are defined, but you can</h3>
     </ul>
     <hr />
 
-    <script>
-        var sortable_state = 'enabled';
-
-        $("#sortable").sortable({
-            stop: onStopSortable
-        });
-
-        function onStopSortable(e, ui) {
-            var categories = $.map($(this).find('li'), function(el, i){
-                var cat = String(el.id).split('-');
-                return {
-                    'sort_number' : i,
-                    'id': cat[0],
-                    'name': cat[1]
-                }
-            });
-            sortableDisable();
-
-            $.ajax({
-                url: "{% url "category-submit-order" project_slug %}",
-                type: "POST",
-                data: JSON.stringify(categories),
-                success: function (response) {
-                    sortableEnable();
-                    if($('#order-saved').is(":visible"))
-                    {
-                        $('#order-saved').hide();
-                        showOrderSaved();
-                    } else {
-                        showOrderSaved();
-                    }
-                },
-                error: function (response) {
-                    console.log(response);
-                    sortableEnable();
-                    if($('#order-not-saved').is(":visible"))
-                    {
-                        $('#order-not-saved').hide();
-                        showOrderNotSaved();
-                    } else {
-                        showOrderNotSaved();
-                    }
-                }
-
-            });
-        }
-
-        function showOrderSaved() {
-            $('#order-saved').fadeIn( "fast", function() {
-                $('#order-saved').fadeOut(2000);
-            });
-        }
-
-        function showOrderNotSaved() {
-            $('#order-not-saved').fadeIn( "fast", function() {
-                $('#order-not-saved').fadeOut(2000);
-            });
-        }
-
-        function sortableEnable() {
-            sortable_state = 'enabled';
-            $("#sortable").sortable({
-                stop: onStopSortable
-            });
-            $("#sortable").sortable("option", "disabled", false );
-            // ^^^ this is required otherwise re-enabling sortable will not work!
-            $("#sortable").disableSelection();
-            return false;
-        }
-        function sortableDisable() {
-            sortable_state = 'disabled';
-            $( "#sortable" ).sortable("disable");
-            return false;
-        }
-    </script>
-
 {% endblock %}
 
diff --git a/django_project/changes/tests/test_views.py b/django_project/changes/tests/test_views.py
@@ -58,13 +58,7 @@ def test_CategoryListView(self):
         response = self.client.get(reverse('category-list', kwargs={
             'project_slug': self.project.slug
         }))
-        self.assertEqual(response.status_code, 200)
-        expected_templates = [
-            'category/list.html', u'changes/category_list.html'
-        ]
-        self.assertEqual(response.template_name, expected_templates)
-        self.assertEqual(response.context_data['object_list'][0],
-                         self.category)
+        self.assertEqual(response.status_code, 302)
 
     def test_CategoryCreateView_with_login(self):
 

diff --git a/django_project/changes/views/category.py b/django_project/changes/views/category.py
@@ -127,7 +127,7 @@ def get_queryset(self):
         return qs
 
 
-class CategoryListView(CategoryMixin, ListView):
+class CategoryListView(CategoryMixin, StaffuserRequiredMixin, ListView):
     """List view for Category."""
     context_object_name = 'categories'
     template_name = 'category/list.html'

diff --git a/django_project/core/base_static/css/changelog.css b/django_project/core/base_static/css/changelog.css
@@ -104,13 +104,13 @@ body {
 ul .order {
     list-style-type: none;
     cursor: pointer;
-    border: 1px solid lightgray;
+    padding: 10px;
     margin-left: -40px !important;
     margin-right: 0px !important;
 }
 
 .order:hover {
-    background-color: lightgray;
+    background-color: #EEEEEE;
 }
 
 ul.ui-sortable-disabled .order{

diff --git a/django_project/core/settings/project.py b/django_project/core/settings/project.py
@@ -57,6 +57,7 @@
         'js/changelog.js',
         'js/github-issue.js',
         'js/entry.js',
+        'js/category.js',
     ),
     'output_filename': 'js/project.js',
 }