Add item search box on dashboard (close #6)

lang/en_us.php

@@ -89,5 +89,6 @@ define("STRINGS", [
     "show all items" => "Show all items",
     "missing name" => "You need to enter a name.",
     "use the dropdowns" => "Whoops, you need to use the category and location autocomplete boxes.",
-    "make categories and locations" => "Please create at least one category and location before adding an item."
+    "make categories and locations" => "Please create at least one category and location before adding an item.",
+    "search" => "Search"
 ]);

pages/home.php

@@ -4,7 +4,30 @@ require_once __DIR__ . '/../required.php';
 redirectifnotloggedin();
 ?>
 <div class="row">
-    <div class="col-xs-12 col-sm-6 col-md-4">
+    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-lg-4 col-lg-offset-4">
+        <form action="app.php" method="get">
+            <input type="hidden" name="page" value="items" />
+            <div class="input-group">
+                <input type="text" class="form-control" name="q" id="quicklookup_box" placeholder="<?php lang("search"); ?>"/>
+                <div class="input-group-btn">
+                    <?php
+                    if ($_SESSION['mobile']) {
+                        ?>
+                        <span class="btn btn-default" onclick="scancode('#quicklookup_box');">
+                            <i class="fa fa-barcode fa-fw"></i>
+                        </span>
+                    <?php } ?>
+                    <button type="submit" class="btn btn-primary">
+                        <i class="fa fa-search fa-fw"></i>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
+<br />
+<div class="row">
+    <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-2">
         <div class="panel panel-blue-grey">
             <div class="panel-heading"><div class="panel-title"><?php lang("total items") ?></div></div>
             <div class="panel-body">

pages/items.php

@@ -9,9 +9,10 @@ redirectifnotloggedin();
     <a href="app.php?page=edititem" class="btn btn-success"><i class="fa fa-plus"></i> <?php lang("new item"); ?></a>
 </div>
 <?php if ($_GET['filter'] == 'stock') { ?>
-<script nonce="<?php echo $SECURE_NONCE; ?>">var filter = "stock";</script>
+    <script nonce="<?php echo $SECURE_NONCE; ?>">var filter = "stock";</script>
-<div class="alert alert-blue-grey"><i class="fa fa-filter fa-fw"></i> <?php lang("only showing understocked"); ?> &nbsp; <a href="app.php?page=items" class="btn btn-sm btn-blue-grey"><?php lang("show all items"); ?></a></div>
+    <div class="alert alert-blue-grey"><i class="fa fa-filter fa-fw"></i> <?php lang("only showing understocked"); ?> &nbsp; <a href="app.php?page=items" class="btn btn-sm btn-blue-grey"><?php lang("show all items"); ?></a></div>
-<?php } else {
+    <?php
+} else {
     echo "<script nonce=\"$SECURE_NONCE\">var filter = null;</script>\n";
 }
 ?>
@@ -31,50 +32,6 @@ redirectifnotloggedin();
         </tr>
     </thead>
     <tbody>
-        <?php /*
-        $items = $database->select('items', [
-            '[>]categories' => ['catid' => 'catid'],
-            '[>]locations' => ['locid' => 'locid']
-                ], [
-            'itemid',
-            'name',
-            'catname',
-            'locname',
-            'loccode',
-            'code1',
-            'code2',
-            'qty',
-            'want',
-            'userid'
-        ], ["LIMIT" => 100]);
-        $usercache = [];
-        foreach ($items as $item) {
-            if (is_null($item['userid'])) {
-                $user = "";
-            } else {
-                if (!isset($usercache[$item['userid']])) {
-                    $usercache[$item['userid']] = getUserByID($item['userid']);
-                }
-                $user = $usercache[$item['userid']]['name'];
-            }
-            ?>
-            <tr>
-                <td></td>
-                <td>
-                    <a class="btn btn-blue btn-xs" href="app.php?page=edititem&id=<?php echo $item['itemid']; ?>"><i class="fa fa-pencil-square-o"></i> <?php lang("edit"); ?></a>
-                </td>
-                <td><?php echo $item['name']; ?></td>
-                <td><?php echo $item['catname']; ?></td>
-                <td><?php echo $item['locname'] . " (" . $item['loccode'] . ")"; ?></td>
-                <td><?php echo $item['code1']; ?></td>
-                <td><?php echo $item['code2']; ?></td>
-                <td><?php echo $item['qty']; ?></td>
-                <td><?php echo $item['want']; ?></td>
-                <td><?php echo $user; ?></td>
-            </tr>
-            <?php
-        } */
-        ?>
     </tbody>
     <tfoot>
         <tr>
@@ -90,4 +47,17 @@ redirectifnotloggedin();
             <th data-priority="3"><i class="fa fa-fw fa-user hidden-xs"></i> <?php lang('assigned to'); ?></th>
         </tr>
     </tfoot>
-</table>
+</table>
+<?php
+if (!is_empty($VARS['q'])) {
+    ?>
+    <script nonce="<?php echo $SECURE_NONCE; ?>">
+        var search_preload_content = "<?php echo $VARS['q']; ?>";
+    </script>
+    <?php
+} else {
+    ?>
+    <script nonce="<?php echo $SECURE_NONCE; ?>">
+        var search_preload_content = false;
+    </script>
+<?php } ?>

static/js/items.js

@@ -1,64 +1,73 @@
 var itemtable = $('#itemtable').DataTable({
     responsive: {
-        details: {
+	details: {
-            display: $.fn.dataTable.Responsive.display.modal({
+	    display: $.fn.dataTable.Responsive.display.modal({
-                header: function (row) {
+		header: function (row) {
-                    var data = row.data();
+		    var data = row.data();
-                    return "<i class=\"fa fa-cube fa-fw\"></i> " + data[2];
+		    return "<i class=\"fa fa-cube fa-fw\"></i> " + data[2];
-                }
+		}
-            }),
+	    }),
-            renderer: $.fn.dataTable.Responsive.renderer.tableAll({
+	    renderer: $.fn.dataTable.Responsive.renderer.tableAll({
-                tableClass: 'table'
+		tableClass: 'table'
-            }),
+	    }),
-            type: "column"
+	    type: "column"
-        }
+	}
     },
     columnDefs: [
-        {
+	{
-            targets: 0,
+	    targets: 0,
-            className: 'control',
+	    className: 'control',
-            orderable: false
+	    orderable: false
-        },
+	},
-        {
+	{
-            targets: 1,
+	    targets: 1,
-            orderable: false
+	    orderable: false
-        },
+	},
-        {
+	{
-            targets: 8,
+	    targets: 8,
-            orderable: false
+	    orderable: false
-        }
+	}
     ],
     order: [
-        [2, 'asc']
+	[2, 'asc']
     ],
     serverSide: true,
     ajax: {
-        url: "lib/getitemtable.php",
+	url: "lib/getitemtable.php",
-        data: function (d) {
+	data: function (d) {
-            if (filter == "stock") {
+	    if (filter == "stock") {
-                d.show_want = 1;
+		d.show_want = 1;
-            }
+	    }
-        },
+	},
-        dataFilter: function (data) {
+	dataFilter: function (data) {
-            var json = jQuery.parseJSON(data);
+	    var json = jQuery.parseJSON(data);
-            json.data = [];
+	    json.data = [];
-            json.items.forEach(function (row) {
+	    json.items.forEach(function (row) {
-                json.data.push([
+		json.data.push([
-                    "",
+		    "",
-                    row.editbtn + " " + row.clonebtn,
+		    row.editbtn + " " + row.clonebtn,
-                    row.name,
+		    row.name,
-                    row.catname,
+		    row.catname,
-                    row.locname + " (" + row.loccode + ")",
+		    row.locname + " (" + row.loccode + ")",
-                    row.code1,
+		    row.code1,
-                    row.code2,
+		    row.code2,
-                    row.qty,
+		    row.qty,
-                    row.want,
+		    row.want,
-                    row.username
+		    row.username
-                ]);
+		]);
-            });
+	    });
-            return JSON.stringify(json);
+	    return JSON.stringify(json);
-        }
+	}
     }
 });
 
-$('#itemtable_filter').append("<span class=\"btn btn-default btn-sm mobile-app-show mobile-app-display\" onclick=\"scancode('#itemtable_filter label input');\"><i class=\"fa fa-barcode fa-fw\"></i></span>");
+$('#itemtable_filter').append("<span class=\"btn btn-default btn-sm mobile-app-show mobile-app-display\" onclick=\"scancode('#itemtable_filter label input');\"><i class=\"fa fa-barcode fa-fw\"></i></span>");
+
+$(document).ready(function () {
+    if (search_preload_content !== false) {
+	var searchInput = $("#itemtable_filter label input");
+	$(searchInput).val(search_preload_content);
+	$(searchInput).trigger("input");
+	$(searchInput).trigger("change");
+    }
+});