Added vue book search.

assets/js/book.js

@@ -1,8 +1,10 @@
 import Vue from 'vue';
 import Book from './pages/book'
 import BookListing from './pages/booklisting'
+import BookListingHeader from './pages/booklistingheader'
 
 Vue.component('Book', Book);
 Vue.component('BookListing', BookListing);
+Vue.component('BookListingHeader', BookListingHeader);
 
 new Vue().$mount('#app');

assets/js/pages/booklisting.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <input type="text" v-model="searchTerm" @keydown.enter="search"/>
     <table class="table">
       <thead>
       <tr>
@@ -52,13 +53,20 @@ export default {
   },
   methods: {
     search: function () {
+      this.updateHistory();
       axios.get('/api/books', {
         params: {title: this.searchTerm},
         headers: {'accept': 'application/json'}
       }).then(response => {
         this.books = response.data;
-      });
+      }).finally(() => window.EventBus.$emit('updateBookListingHeader', {searchTerm: this.searchTerm}));
     },
+    updateHistory: function () {
+      if (history.pushState) {
+        let url = window.location.protocol + "//" + window.location.host + window.location.pathname + '?search=' + this.searchTerm;
+        window.history.pushState({path: url}, '', url);
+      }
+    }
   },
   mounted() {
     const urlParams = new URLSearchParams(window.location.search);

assets/js/pages/booklistingheader.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <h1 v-if="searchTerm" v-html="'Book search: '+searchTerm"></h1>
+    <h1 v-else>Book list</h1>
+  </div>
+</template>
+
+<script>
+import {EventBus} from "../event-bus";
+
+export default {
+  name: 'BookListingHeader',
+  data() {
+    return {
+      searchTerm: null,
+    }
+  },
+  created() {
+    window.EventBus.$on('updateBookListingHeader', (data) => {
+      this.searchTerm = data.searchTerm;
+    });
+  },
+  mounted() {
+    const urlParams = new URLSearchParams(window.location.search);
+    this.searchTerm = urlParams.get('search') || "";
+  }
+}
+</script>

templates/book/index.html.twig

@@ -3,22 +3,16 @@
 {% block title %}Book index{% endblock %}
 
 {% block body %}
+    <div id="app">
         <div class="d-flex flex-row justify-content-between align-items-center">
             <div>
-            {% if(searchTerm) %}
-                <h1>Book search: {{ searchTerm }}</h1>
-            {% else %}
-                <h1>Book list</h1>
-            {% endif %}
+                <book-listing-header></book-listing-header>
             </div>
             <div>
                 <a href="{{ path('app_book_new') }}" class="btn btn-primary">Add new</a>
             </div>
         </div>
 
-
-
-    <div id="app">
         <book-listing></book-listing>
     </div>
 {% endblock %}