From 89967305be984c337873930ddaf4d19a7f08b4c7 Mon Sep 17 00:00:00 2001
From: kgogola <32526127+kgogola@users.noreply.github.com>
Date: Wed, 11 Apr 2018 23:28:46 +0200
Subject: [PATCH] SA

aSAAS
---
 .gitattributes                                |  2 +
 2018/simple-vue-nuxt-app/components/Book.vue  | 55 +++++++++++--------
 .../components/page-navigation.vue            | 29 ++++++++++
 2018/simple-vue-nuxt-app/layouts/default.vue  | 21 ++++++-
 .../simple-vue-nuxt-app/pages/books/index.vue | 15 ++++-
 5 files changed, 96 insertions(+), 26 deletions(-)
 create mode 100644 .gitattributes
 create mode 100644 2018/simple-vue-nuxt-app/components/page-navigation.vue

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..dfe0770
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/2018/simple-vue-nuxt-app/components/Book.vue b/2018/simple-vue-nuxt-app/components/Book.vue
index 58a39da..5f4702e 100644
--- a/2018/simple-vue-nuxt-app/components/Book.vue
+++ b/2018/simple-vue-nuxt-app/components/Book.vue
@@ -1,37 +1,46 @@
 <template>
-    <nuxt-link :to="'/books/' + id">
-        <div class="single-book">
+    
+    <div class="single-book">
+        <div class="choose-favourite"></div>
+        <nuxt-link :to="'/books/' + id">
             <h2>{{title}}</h2>
             <p>{{author}}</p>
             <p>{{description}}</p>
             <div class="book-img" :style="{backgroundImage: 'url('+ img +')'}"></div>
-        </div>
-    </nuxt-link>
+       </nuxt-link>
+    </div>
+    
 </template>
 
 <script>
 export default {
-  props: ['title', 'author', 'description', 'img', 'id']
-}
+  props: ["title", "author", "description", "img", "id"]
+};
 </script>
 
 <style scoped>
-.single-book{
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-    text-align: center;
-    padding: 10px;
-
-    box-sizing: border-box;
-    width: 280px;
-    border: 1px solid #ccc;
-    margin: 10px;
-} 
-.book-img{
-    background-position: center;
-    background-size: cover;
-    width: 100%;
-    height: 200px;
+.single-book {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  text-align: center;
+  padding: 10px;
+  box-sizing: border-box;
+  width: 280px;
+  border: 1px solid #ccc;
+  margin: 10px;
+}
+.book-img {
+  background-position: center;
+  background-size: cover;
+  width: 100%;
+  height: 200px;
+}
+.choose-favourite {
+  background-image: url("https://png.icons8.com/metro/1600/like.png");
+  height: 20px;
+  width: 20px;
+  background-size: 100%;
+  float: right;
 }
 </style>
diff --git a/2018/simple-vue-nuxt-app/components/page-navigation.vue b/2018/simple-vue-nuxt-app/components/page-navigation.vue
new file mode 100644
index 0000000..91b5cfa
--- /dev/null
+++ b/2018/simple-vue-nuxt-app/components/page-navigation.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="wrapper">
+    <nuxt-link :to="'/' ">
+      <div class="main-page">HOME</div>
+    </nuxt-link>
+    
+    
+  <nuxt-link :to="'/books' ">
+      <div class="all-books">BOOKS</div>
+    </nuxt-link>
+
+  <nuxt-link :to="'/' ">
+    <div class="favourites">FAVOURITES</div>
+  </nuxt-link>
+  </div >
+</template >
+
+  <script>
+</script>
+
+  <style>
+.wrapper {
+  display: grid;
+  grid-template-columns: 35% 35% 30%;
+  height: 50px;
+  background: grey;
+  text-align: center;
+}
+</style>
diff --git a/2018/simple-vue-nuxt-app/layouts/default.vue b/2018/simple-vue-nuxt-app/layouts/default.vue
index 5ac3b4e..db6cdf8 100644
--- a/2018/simple-vue-nuxt-app/layouts/default.vue
+++ b/2018/simple-vue-nuxt-app/layouts/default.vue
@@ -1,7 +1,24 @@
 <template>
   <div>
-
-    <nuxt/>    
+    <pagenavigation></pagenavigation>
+    <nuxt/>
   </div>
 </template>
 
+<script>
+import pagenavigation from "@/components/page-navigation.vue";
+
+export default {
+  components: {
+    pagenavigation: pagenavigation
+    
+  }
+};
+</script>
+
+<style>
+
+
+
+
+</style>
diff --git a/2018/simple-vue-nuxt-app/pages/books/index.vue b/2018/simple-vue-nuxt-app/pages/books/index.vue
index fd7c609..76f7072 100644
--- a/2018/simple-vue-nuxt-app/pages/books/index.vue
+++ b/2018/simple-vue-nuxt-app/pages/books/index.vue
@@ -1,9 +1,10 @@
 <template>
 <div>
       <h1>Książki</h1>
+<input type="text" v-model="search" placeholder="search books">
   <div class="books-container">
         <Book
-            v-for="book in books"
+            v-for="book in booksFiltered"
             :key="book.id"
             :img="book.img"
             :title="book.title"
@@ -27,6 +28,18 @@ import Book from '@/components/Book';
 export default {
   components: {
       Book
+  },
+    data () {
+      return {
+          search:""
+      }
+  },
+  computed: {
+     booksFiltered: function() {
+         return this.books.filter((book)=>{
+             return book.title.match(this.search)
+         })
+     } 
   },
   asyncData(){
       return new Promise((resolve, reject) => {