settings: Enable sorting on uploads table.

This allows for sorting in the uploads table by all of the attributes
in ascending order by clicking on the headers.

Fixes #6747.

static/js/attachments_ui.js

@@ -30,14 +30,15 @@ exports.set_up_attachments = function () {
 
     var attachments = page_params.attachments;
     _.each(attachments, function (attachment) {
-        attachment.create_time = timerender.absolute_time(attachment.create_time);
-        attachment.size = exports.bytes_to_size(attachment.size);
+
+        attachment.create_time_str = timerender.absolute_time(attachment.create_time);
+        attachment.size_str = exports.bytes_to_size(attachment.size);
     });
 
     var uploaded_files_table = $("#uploaded_files_table").expectOne();
     var $search_input = $("#upload_file_search");
 
-    list_render(uploaded_files_table, attachments, {
+    var list = list_render(uploaded_files_table, attachments, {
         name: "uploaded-files-list",
         modifier: function (attachment) {
             return templates.render("uploaded_files_list", { attachment: attachment });
@@ -53,6 +54,24 @@ exports.set_up_attachments = function () {
         },
     }).init();
 
+    list.add_sort_function("mentioned-in", function (a, b) {
+        var a_m = a.messages[0];
+        var b_m = b.messages[0];
+
+        if (!a_m) { return 1; }
+        if (!b_m) { return -1; }
+
+        if (a_m.id > b_m.id) {
+            return 1;
+        } else if (a_m.id === b_m.id) {
+            return 0;
+        }
+
+        return -1;
+    });
+
+
+
     ui.set_up_scrollbar(uploaded_files_table.closest(".progressive-table-wrapper"));
 
     uploaded_files_table.empty();

static/templates/settings/attachments-settings.handlebars

@@ -2,13 +2,13 @@
     <div class='tip'>{{#tr this}}You are currently using __total_uploads_size__ of __upload_quota__ upload space.{{/tr}}</div>
     <input id="upload_file_search" type="search" name="" value="" placeholder="{{t 'Search uploads...' }}" />
     <div class="alert" id="delete-upload-status"></div>
-    <div class="progressive-table-wrapper">
+    <div class="progressive-table-wrapper" data-list-render="uploaded-files-list">
         <table class="table table-condensed table-striped">
             <thead>
-                <th>{{t "File" }}</th>
-                <th>{{t "Date uploaded" }}</th>
-                <th>{{t "Mentioned in" }}</th>
-                <th>{{t "Size" }}</th>
+                <th data-sort="alphabetic" data-sort-prop="name">{{t "File" }}</th>
+                <th data-sort="numeric" data-sort-prop="create_time">{{t "Date uploaded" }}</th>
+                <th data-sort="mentioned-in">{{t "Mentioned in" }}</th>
+                <th data-sort="numeric" data-sort-prop="size">{{t "Size" }}</th>
                 <th>{{t "Actions" }}</th>
             </thead>
             <tbody class="required-text" data-empty="{{t 'You have not uploaded any files.' }}"

static/templates/uploaded_files_list.handlebars

@@ -5,7 +5,7 @@
             {{ name }}
         </a>
     </td>
-    <td>{{ create_time }}</td>
+    <td>{{ create_time_str }}</td>
     <td>
         {{#if messages }}
         <div class="attachment-messages">
@@ -17,7 +17,7 @@
         </div>
         {{/if}}
     </td>
-    <td>{{ size }}</td>
+    <td>{{ size_str }}</td>
     <td>
         <span class="edit-attachment-buttons">
             <button type="submit"