add table sorting (#597)

1 files changed, 45 insertions, 40 deletions

diff --git a/src/SMAPI.Web/Views/Mods/Index.cshtml b/src/SMAPI.Web/Views/Mods/Index.cshtml
index 8d1b91ad..3626c4d8 100644
--- a/src/SMAPI.Web/Views/Mods/Index.cshtml
+++ b/src/SMAPI.Web/Views/Mods/Index.cshtml
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="~/Content/css/mods.css?r=20180615" />
     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>
+    <script src="~/Content/js/external/jquery-tablesorter.js"></script>
     <script src="~/Content/js/mods.js?r=20180615"></script>
     <script>
         $(function() {
@@ -28,51 +29,55 @@
 <div id="app">
     <div>
         <label for="search-box">Search: </label>
-        <input type="text" id="search-box" v-model="search" v-on:input="applySearch"/>
+        <input type="text" id="search-box" v-model="search" v-on:input="applySearch" />
     </div>
     <div id="show-fields-option">
         <input type="checkbox" id="show-all-fields" v-model="showAllFields" />
         <label for="show-all-fields">show advanced fields</label>
     </div>
     <table class="wikitable" id="mod-list">
-        <tr>
-            <th>mod name</th>
-            <th>links</th>
-            <th>author</th>
-            <th>compatibility</th>
-            <th v-show="showAllFields">broke in</th>
-            <th v-show="showAllFields">code</th>
-            <th>&nbsp;</th>
-        </tr>
-        <tr v-for="mod in mods" :key="mod.Name" v-bind:id="mod.Slug" :key="mod.Slug" v-bind:data-status="mod.BetaCompatibility != null ? mod.BetaCompatibility.Status : mod.Compatibility.Status" v-show="mod.Visible">
-            <td>
-                {{mod.Name}}
-                <small class="mod-alt-names" v-if="mod.AlternateNames">(aka {{mod.AlternateNames}})</small>
-            </td>
-            <td class="mod-page-links">
-                <span v-for="(link, i) in mod.ModPages">
-                    <a v-bind:href="link.Url">{{link.Text}}</a>{{i < mod.ModPages.length - 1 ? ', ' : ''}}
-                </span>
-            </td>
-            <td>
-                {{mod.Author}}
-                <small class="mod-alt-authors" v-if="mod.AlternateAuthors">(aka {{mod.AlternateAuthors}})</small>
-            </td>
-            <td>
-                <div v-html="mod.Compatibility.Summary"></div>
-                <div v-if="mod.BetaCompatibility">
-                    <strong v-if="mod.BetaCompatibility">SDV beta only:</strong>
-                    <span v-html="mod.BetaCompatibility.Summary"></span>
-                </div>
-            </td>
-            <td class="mod-broke-in" v-html="mod.BrokeIn" v-show="showAllFields"></td>
-            <td v-show="showAllFields">
-                <span v-if="mod.SourceUrl"><a v-bind:href="mod.SourceUrl">source</a></span>
-                <span v-else class="mod-closed-source">no source</span>
-            </td>
-            <td>
-                <small><a v-bind:href="'#' + mod.Slug">#</a></small>
-            </td>
-        </tr>
+        <thead>
+            <tr>
+                <th>mod name</th>
+                <th>links</th>
+                <th>author</th>
+                <th>compatibility</th>
+                <th v-show="showAllFields">broke in</th>
+                <th v-show="showAllFields">code</th>
+                <th>&nbsp;</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="mod in mods" :key="mod.Name" v-bind:id="mod.Slug" :key="mod.Slug" v-bind:data-status="mod.BetaCompatibility != null ? mod.BetaCompatibility.Status : mod.Compatibility.Status" v-show="mod.Visible">
+                <td>
+                    {{mod.Name}}
+                    <small class="mod-alt-names" v-if="mod.AlternateNames">(aka {{mod.AlternateNames}})</small>
+                </td>
+                <td class="mod-page-links">
+                    <span v-for="(link, i) in mod.ModPages">
+                        <a v-bind:href="link.Url">{{link.Text}}</a>{{i < mod.ModPages.length - 1 ? ', ' : ''}}
+                    </span>
+                </td>
+                <td>
+                    {{mod.Author}}
+                    <small class="mod-alt-authors" v-if="mod.AlternateAuthors">(aka {{mod.AlternateAuthors}})</small>
+                </td>
+                <td>
+                    <div v-html="mod.Compatibility.Summary"></div>
+                    <div v-if="mod.BetaCompatibility">
+                        <strong v-if="mod.BetaCompatibility">SDV beta only:</strong>
+                        <span v-html="mod.BetaCompatibility.Summary"></span>
+                    </div>
+                </td>
+                <td class="mod-broke-in" v-html="mod.BrokeIn" v-show="showAllFields"></td>
+                <td v-show="showAllFields">
+                    <span v-if="mod.SourceUrl"><a v-bind:href="mod.SourceUrl">source</a></span>
+                    <span v-else class="mod-closed-source">no source</span>
+                </td>
+                <td>
+                    <small><a v-bind:href="'#' + mod.Slug">#</a></small>
+                </td>
+            </tr>
+        </tbody>
     </table>
 </div>