client+server: add tag category ordering feature

Fixes  #209

5 files changed, 39 insertions, 4 deletions

diff --git a/client/html/tag_categories.tpl b/client/html/tag_categories.tpl
index fe6b898..f9d28e1 100644
--- a/client/html/tag_categories.tpl
+++ b/client/html/tag_categories.tpl
@@ -7,6 +7,7 @@
                     <tr>
                         <th class='name'>Category name</th>
                         <th class='color'>CSS color</th>
+                        <th class='order'>Order</th>
                         <th class='usages'>Usages</th>
                     </tr>
                 </thead>
@@ -21,7 +22,7 @@
 
         <div class='messages'></div>
 
-        <% if (ctx.canCreate || ctx.canEditName || ctx.canEditColor || ctx.canDelete) { %>
+        <% if (ctx.canCreate || ctx.canEditName || ctx.canEditColor || ctx.canEditOrder || ctx.canDelete) { %>
             <div class='buttons'>
                 <input type='submit' class='save' value='Save changes'>
             </div>
diff --git a/client/html/tag_category_row.tpl b/client/html/tag_category_row.tpl
index dcc8c16..ce7aa59 100644
--- a/client/html/tag_category_row.tpl
+++ b/client/html/tag_category_row.tpl
@@ -17,6 +17,13 @@
             <%- ctx.tagCategory.color %>
         <% } %>
     </td>
+    <td class='order'>
+        <% if (ctx.canEditOrder) { %>
+            <%= ctx.makeNumericInput({value: ctx.tagCategory.order}) %>
+        <% } else { %>
+            <%- ctx.tagCategory.order %>
+        <% } %>
+    </td>
     <td class='usages'>
         <% if (ctx.tagCategory.name) { %>
             <a href='<%- ctx.formatClientLink('tags', {query: 'category:' + ctx.tagCategory.name}) %>'>
diff --git a/client/js/controllers/tag_categories_controller.js b/client/js/controllers/tag_categories_controller.js
index 2470edb..1ca743f 100644
--- a/client/js/controllers/tag_categories_controller.js
+++ b/client/js/controllers/tag_categories_controller.js
@@ -26,6 +26,7 @@ class TagCategoriesController {
                     tagCategories: this._tagCategories,
                     canEditName: api.hasPrivilege("tagCategories:edit:name"),
                     canEditColor: api.hasPrivilege("tagCategories:edit:color"),
+                    canEditOrder: api.hasPrivilege("tagCategories:edit:order"),
                     canDelete: api.hasPrivilege("tagCategories:delete"),
                     canCreate: api.hasPrivilege("tagCategories:create"),
                     canSetDefault: api.hasPrivilege(
diff --git a/client/js/models/tag_category.js b/client/js/models/tag_category.js
index a8d0e64..cc81f67 100644
--- a/client/js/models/tag_category.js
+++ b/client/js/models/tag_category.js
@@ -9,10 +9,12 @@ class TagCategory extends events.EventTarget {
         super();
         this._name = "";
         this._color = "#000000";
+        this._order = 1;
         this._tagCount = 0;
         this._isDefault = false;
         this._origName = null;
         this._origColor = null;
+        this._origOrder = null;
     }
 
     get name() {
@@ -23,6 +25,10 @@ class TagCategory extends events.EventTarget {
         return this._color;
     }
 
+    get order() {
+        return this._order;
+    }
+
     get tagCount() {
         return this._tagCount;
     }
@@ -43,6 +49,10 @@ class TagCategory extends events.EventTarget {
         this._color = value;
     }
 
+    set order(value) {
+        this._order = value;
+    }
+
     static fromResponse(response) {
         const ret = new TagCategory();
         ret._updateFromResponse(response);
@@ -58,6 +68,9 @@ class TagCategory extends events.EventTarget {
         if (this.color !== this._origColor) {
             detail.color = this.color;
         }
+        if (this.order !== this._origOrder) {
+            detail.order = this.order;
+        }
 
         if (!Object.keys(detail).length) {
             return Promise.resolve();
@@ -65,9 +78,9 @@ class TagCategory extends events.EventTarget {
 
         let promise = this._origName
             ? api.put(
-                  uri.formatApiLink("tag-category", this._origName),
-                  detail
-              )
+                uri.formatApiLink("tag-category", this._origName),
+                detail
+            )
             : api.post(uri.formatApiLink("tag-categories"), detail);
 
         return promise.then((response) => {
@@ -104,10 +117,12 @@ class TagCategory extends events.EventTarget {
         this._version = response.version;
         this._name = response.name;
         this._color = response.color;
+        this._order = response.order;
         this._isDefault = response.default;
         this._tagCount = response.usages;
         this._origName = this.name;
         this._origColor = this.color;
+        this._origOrder = this.order;
     }
 }
 
diff --git a/client/js/views/tag_categories_view.js b/client/js/views/tag_categories_view.js
index 1f1a4da..7cd5c19 100644
--- a/client/js/views/tag_categories_view.js
+++ b/client/js/views/tag_categories_view.js
@@ -100,6 +100,13 @@ class TagCategoriesView extends events.EventTarget {
             );
         }
 
+        const orderInput = rowNode.querySelector(".order input");
+        if (orderInput) {
+            orderInput.addEventListener("change", (e) =>
+                this._evtOrderChange(e, rowNode)
+            );
+        }
+
         const removeLinkNode = rowNode.querySelector(".remove a");
         if (removeLinkNode) {
             removeLinkNode.addEventListener("click", (e) =>
@@ -147,6 +154,10 @@ class TagCategoriesView extends events.EventTarget {
         rowNode._tagCategory.color = e.target.value;
     }
 
+    _evtOrderChange(e, rowNode) {
+        rowNode._tagCategory.order = e.target.value;
+    }
+
     _evtDeleteButtonClick(e, rowNode, link) {
         e.preventDefault();
         if (e.target.classList.contains("inactive")) {