Add attachments, more pages

resources/js/app.js

@@ -8,18 +8,6 @@
 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,
@@ -64,23 +52,35 @@ $(document).ready(function(e) {
             }
 
             $.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'}));
+                if (res.warning) {
+                    bootbox.alert({
+                        title: 'Warning',
+                        message: res.warning,
+                        callback: function() {
+                            $('.barcode_input').filter(function() {
+                                return !this.value;
+                            }).focus();
+                        }
+                    });
                 }
 
-                $authors.trigger('change');
+                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();
 
-            console.log('Empty rows:', count);
-
             if (count < 1) {
                 var firstIndex = 0,
                     $container = $row.closest('.row-container');
@@ -116,6 +116,26 @@ $(document).ready(function(e) {
             }
         }
     });
+
+    $('.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() {

resources/js/bootstrap.js

@@ -12,8 +12,7 @@ try {
 
     require('bootstrap');
     require('select2');
-    require('datatables.net-bs4');
-    require('datatables.net-buttons-bs4');
+    window.bootbox = require('bootbox');
 } catch (e) {}
 
 /**
@@ -24,21 +23,4 @@ try {
 
 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
-// });
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

resources/views/add.blade.php

@@ -6,6 +6,9 @@
         <div class="form-row justify-content-md-center">
             <div class="col-4">
                 <select name="location" class="form-control select2-location">
+                    @foreach ($locations as $location)
+                        <option value="{{ $location->name }}">{{ $location->name }}</option>
+                    @endforeach
                 </select>
             </div>
         </div>
@@ -21,9 +24,11 @@
             @endif
         </div>
         <div class="row">
-            <button class="btn btn-primary" name="save" type="submit">
-                Save
-            </button>
+            <div class="col-2">
+                <button class="btn btn-primary" name="save" type="submit" style="width:100%">
+                    Save
+                </button>
+            </div>
         </div>
     </form>
     @include('partials/row', [ 'id' => 'add-template', 'htmlClass' => 'invisible' ])

resources/views/books/show.blade.php

@@ -0,0 +1,18 @@
+@extends('layouts.main')
+
+@section('content')
+    <h3>{{ $book->name }}</h3>
+    <h5>By: {{ $book->authors->pluck('name')->join(', ') }}</h5>
+    <br />
+    @if ($thumbnail = $book->attachment('thumbnail'))
+    <h5>Image</h5>
+    <p>
+        <img src="{{ $thumbnail->url }}" />
+    </p>
+    @endif
+
+    <h5>Location:</h5>
+    <p>
+        {{ $book->location->name }}
+    </p>
+@endsection

resources/views/index.blade.php

@@ -1,11 +1,12 @@
 @extends('layouts.main')
 
 @section('content')
-    <table class="table table-compact">
+    <table class="table table-compact table-striped">
         <thead>
             <th>Name</th>
             <th>Authors</th>
             <th>Location</th>
+            <th>Actions</th>
         </thead>
         <tbody>
             @foreach ($rows as $row)
@@ -13,6 +14,9 @@
                     <td>{{ $row->name }}</td>
                     <td>{{ $row->authors->pluck('name')->join(', ') }}</td>
                     <td>{{ $row->location->name }}</td>
+                    <td>
+                        <a class="btn btn-info btn-sm" href="{{ route('books.show', $row->id) }}">View</a>
+                    </td>
                 </tr>
             @endforeach
         </tbody>

resources/views/layouts/main.blade.php

@@ -21,7 +21,6 @@
 </main><!-- /.container -->
 
 <script src="{{ mix('js/app.js') }}"></script>
-    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
     @stack('scripts')
 </body>
 </html>

resources/views/locations/index.blade.php

@@ -0,0 +1,21 @@
+@extends('layouts.main')
+
+@section('content')
+    <table class="table table-compact">
+        <thead>
+            <th>Name</th>
+            <th>Actions</th>
+        </thead>
+        <tbody>
+            @foreach ($locations as $row)
+                <tr>
+                    <td>{{ $row->name }}</td>
+                    <td>
+                        <a href="{{ route('locations.show', $row->id) }}" class="btn btn-info btn-sm">View</a>
+                    </td>
+                </tr>
+            @endforeach
+        </tbody>
+    </table>
+    {{ $locations->links() }}
+@endsection

resources/views/locations/show.blade.php

@@ -0,0 +1,24 @@
+@extends('layouts.main')
+
+@section('content')
+    <h3>{{ $location->name }}</h3>
+    <table class="table table-compact">
+        <thead>
+        <th>Name</th>
+        <th>Authors</th>
+        </thead>
+        <tbody>
+        @foreach ($rows as $row)
+            <tr data-id="{{ $row->id }}" data-url="{{ route('books.show', $row->id) }}">
+                <td>{{ $row->name }}</td>
+                <td>{{ $row->authors->pluck('name')->join(', ') }}</td>
+                <td>
+                    <a class="btn btn-info btn-sm" href="{{ route('books.show', $row->id) }}">View</a>
+                    <button class="remove-item btn btn-danger btn-sm">Remove</button>
+                </td>
+            </tr>
+        @endforeach
+        </tbody>
+    </table>
+    {{ $rows->links() }}
+@endsection

resources/views/partials/navbar.blade.php

@@ -11,7 +11,10 @@
                 <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
             </li>
             <li class="nav-item">
-                <a class="nav-link" href="/add">Add</a>
+                <a class="nav-link" href="{{ route('locations.index') }}">Locations</a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="{{ route('add') }}">Add</a>
             </li>
         </ul>
         <form class="form-inline my-2 my-lg-0" action="{{ route('search') }}">