bookinventory/resources/js/app.js

/**
 * 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;
}