A ton of progress, search start

resources/js/app.js

@@ -0,0 +1,133 @@
+
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
+require('./bootstrap');
+
+$(document).ready(function(e) {
+
+    $.fn.dataTable.render.authorValue = function(_, context, book) {
+        let authors = [];
+
+        console.log(book);
+        for (let author of book.authors) {
+            authors.push(author.name);
+        }
+
+        return authors.join(', ');
+    };
+
+    var authorOptions = {
+        placeholder: 'Authors',
+        tags: true,
+        ajax: {
+            url: '/authors/search',
+            dataType: 'json'
+        }
+    };
+
+    var locationOptions = {
+        placeholder: 'Location',
+        tags: true
+    };
+
+    $('#add-form .select2-author').select2(authorOptions);
+
+    $('#add-form .select2-location').select2(locationOptions);
+
+    $('#add-form').on('click', '.remove-row', function(e) {
+        e.preventDefault();
+
+        $(this).closest('.form-row').remove();
+    });
+
+    $('#add-form').on('keydown', '.barcode_input', function(e) {
+        if (e.keyCode === 13) {
+            e.preventDefault();
+        }
+    });
+
+    $('#add-form').on('keyup', '.barcode_input', function (e) {
+        if (e.keyCode === 13) {
+            // Do something
+            e.preventDefault();
+
+            var $this = $(this),
+                $row = $this.closest('.form-row'),
+                barcodeValue = $this.val();
+
+            if (barcodeValue === '') {
+                return;
+            }
+
+            $.get('/lookup/' + barcodeValue, function(res) {
+                $row.find('input[name*=name]').val(res.title);
+
+                var $authors = $row.find('.select2-author');
+
+                $authors.children('option').remove();
+
+                for (var i = 0; i < res.authors.length; i++) {
+                    $authors.append($('<option>', {value: res.authors[i], text: res.authors[i], selected: 'selected'}));
+                }
+
+                $authors.trigger('change');
+            }, 'json');
+
+            var count = emptyRowCount();
+
+            console.log('Empty rows:', count);
+
+            if (count < 1) {
+                var firstIndex = 0,
+                    $container = $row.closest('.row-container');
+
+
+                for (var i = 0; i < 200; i++) {
+                    if ($container.find('.form-row[data-index=' + i + ']').length < 1) {
+                        firstIndex = i;
+                        break;
+                    }
+                }
+
+                var $template = $('#add-template'),
+                    $clone = $template.clone();
+
+                $clone.attr('data-index', firstIndex);
+
+                $clone.find('input, select').each(function() {
+                    $(this).attr('name', $(this).attr('name').replace('__INDEX__', firstIndex));
+                });
+
+                $clone.removeAttr('id');
+                $clone.find('input[type=text]').val('');
+
+                $clone.removeClass('invisible').addClass('form-row');
+
+                $container.append($clone);
+
+                setTimeout(function() {
+                    $clone.find('.barcode_input').focus();
+                    $clone.find('.select2-author').select2(authorOptions);
+                }, 150);
+            }
+        }
+    });
+});
+
+function emptyRowCount() {
+    var $barcodes = $('#add-form .barcode_input');
+
+    var count = 0;
+
+    $barcodes.each(function() {
+        if ($(this).val() == '') {
+            count++;
+        }
+    });
+
+    return count;
+}

resources/js/bootstrap.js

@@ -0,0 +1,44 @@
+window._ = require('lodash');
+
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+    require('select2');
+    require('datatables.net-bs4');
+    require('datatables.net-buttons-bs4');
+} catch (e) {}
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// window.Pusher = require('pusher-js');
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: process.env.MIX_PUSHER_APP_KEY,
+//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
+//     forceTLS: true
+// });