Improve category display

pages.php

@@ -43,7 +43,8 @@ define("PAGES", [
         "navbar" => true,
         "icon" => "archive",
         "styles" => [
-            "static/css/datatables.min.css"
+            "static/css/datatables.min.css",
+            "static/css/tables.css"
         ],
         "scripts" => [
             "static/js/datatables.min.js",

pages/categories.php

@@ -1,5 +1,4 @@
 <?php
-
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@@ -14,8 +13,10 @@ redirectifnotloggedin();
 <table id="cattable" class="table table-bordered table-striped">
     <thead>
         <tr>
-            <th><?php lang('actions'); ?></th>
-            <th><i class="fa fa-archive hidden-xs"></i> <?php lang('category'); ?></th>
+            <th data-priority="0"></th>
+            <th data-priority="1"><?php lang('actions'); ?></th>
+            <th data-priority="1"><i class="fa fa-archive hidden-xs"></i> <?php lang('category'); ?></th>
+            <th data-priority="2"><i class="fa fa-hashtag hidden-xs"></i> <?php lang('item count'); ?></th>
         </tr>
     </thead>
     <tbody>
@@ -25,12 +26,15 @@ redirectifnotloggedin();
             'catname'
         ]);
         foreach ($cats as $cat) {
+            $itemcount = $database->count('items', ['catid' => $cat['catid']]);
             ?>
             <tr>
+                <td></td>
                 <td>
                     <a class="btn btn-primary btn-xs" href="app.php?page=editcat&id=<?php echo $cat['catid']; ?>"><i class="fa fa-pencil-square-o"></i> <?php lang("edit"); ?></a>
                 </td>
                 <td><?php echo $cat['catname']; ?></td>
+                <td><?php echo $itemcount; ?></td>
             </tr>
             <?php
         }
@@ -38,8 +42,10 @@ redirectifnotloggedin();
     </tbody>
     <tfoot>
         <tr>
-            <th><?php lang('actions'); ?></th>
-            <th><i class="fa fa-archive"></i> <?php lang('category'); ?></th>
+            <th data-priority="0"></th>
+            <th data-priority="1"><?php lang('actions'); ?></th>
+            <th data-priority="1"><i class="fa fa-archive hidden-xs"></i> <?php lang('category'); ?></th>
+            <th data-priority="2"><i class="fa fa-hashtag hidden-xs"></i> <?php lang('item count'); ?></th>
         </tr>
     </tfoot>
 </table>

static/js/categories.js

@@ -3,13 +3,32 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 $('#cattable').DataTable({
+    responsive: {
+        details: {
+            display: $.fn.dataTable.Responsive.display.modal({
+                header: function (row) {
+                    var data = row.data();
+                    return "<i class=\"fa fa-archive fa-fw\"></i> " + data[2];
+                }
+            }),
+            renderer: $.fn.dataTable.Responsive.renderer.tableAll({
+                tableClass: 'table'
+            }),
+            type: "column"
+        }
+    },
     columnDefs: [
         {
             targets: 0,
+            className: 'control',
+            orderable: false
+        },
+        {
+            targets: 1,
             orderable: false
         }
     ],
     order: [
-        [1, 'asc']
+        [2, 'asc']
     ]
 });