From 5c154b740c368c8326ac3d0e4377089da04b83cf Mon Sep 17 00:00:00 2001
From: krzysiej <krzysztofplaczek@techtube.pl>
Date: Mon, 13 Jun 2022 11:44:50 +0200
Subject: [PATCH] Added vue book search.

---
 assets/js/book.js                     |  2 ++
 assets/js/pages/booklisting.vue       | 10 +++++++++-
 assets/js/pages/booklistingheader.vue | 28 +++++++++++++++++++++++++++
 templates/book/index.html.twig        | 24 +++++++++--------------
 4 files changed, 48 insertions(+), 16 deletions(-)
 create mode 100644 assets/js/pages/booklistingheader.vue

diff --git a/assets/js/book.js b/assets/js/book.js
index 1f7161a..ade0f2b 100644
--- a/assets/js/book.js
+++ b/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');
\ No newline at end of file
diff --git a/assets/js/pages/booklisting.vue b/assets/js/pages/booklisting.vue
index 212a967..4e4aeec 100644
--- a/assets/js/pages/booklisting.vue
+++ b/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);
diff --git a/assets/js/pages/booklistingheader.vue b/assets/js/pages/booklistingheader.vue
new file mode 100644
index 0000000..02e8d3e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/templates/book/index.html.twig b/templates/book/index.html.twig
index a741afc..0bf0fd2 100644
--- a/templates/book/index.html.twig
+++ b/templates/book/index.html.twig
@@ -3,22 +3,16 @@
 {% block title %}Book index{% endblock %}
 
 {% block body %}
-    <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 %}
-        </div>
-        <div>
-            <a href="{{ path('app_book_new') }}" class="btn btn-primary">Add new</a>
-        </div>
-    </div>
-
-
-
     <div id="app">
+        <div class="d-flex flex-row justify-content-between align-items-center">
+            <div>
+                <book-listing-header></book-listing-header>
+            </div>
+            <div>
+                <a href="{{ path('app_book_new') }}" class="btn btn-primary">Add new</a>
+            </div>
+        </div>
+
         <book-listing></book-listing>
     </div>
 {% endblock %}