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) {
    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) {
                if (res.warning) {
                    bootbox.alert({
                        title: 'Warning',
                        message: res.warning,
                        callback: function() {
                            $('.barcode_input').filter(function() {
                                return !this.value;
                            }).focus();
                        }
                    });
                }

                if (res.success) {
                    $row.find('input[name*=name]').val(res.data.title);

                    var $authors = $row.find('.select2-author');

                    $authors.children('option').remove();

                    for (var i = 0; i < res.data.authors.length; i++) {
                        $authors.append($('<option>', {value: res.data.authors[i], text: res.data.authors[i], selected: 'selected'}));
                    }

                    $authors.trigger('change');
                }
            }, 'json');

            var count = emptyRowCount();

            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);
            }
        }
    });

    $('.remove-item').click(function(e) {
        e.preventDefault();

        var $this = $(this),
            $row = $this.closest('tr');

        bootbox.confirm('Are you sure?', function(result) {
            if (!result) {
                return;
            }

            axios.delete($row.data('url')).then(function(res) {
                if (res.data.success) {

                    $row.remove();
                }
            });
        })
    })
});

function emptyRowCount() {
    var $barcodes = $('#add-form .barcode_input');

    var count = 0;

    $barcodes.each(function() {
        if ($(this).val() == '') {
            count++;
        }
    });

    return count;
}