From 1b11d4d57cbccea18928c3b8589a5b29f228311f Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Mon, 24 Jan 2022 00:34:25 +0100
Subject: [PATCH] Add collection page & wishlist button; Needs design to
 izitoast & persistance;

---
 src/App.vue              |  3 +-
 src/router/index.js      |  6 ++--
 src/store/index.js       | 25 +++++++++++++++++
 src/views/About.vue      |  5 ----
 src/views/Collection.vue | 26 +++++++++++++++++
 src/views/Explore.vue    | 60 +++++++++++++++++++++++++++++++++++++---
 6 files changed, 113 insertions(+), 12 deletions(-)
 create mode 100644 src/store/index.js
 delete mode 100644 src/views/About.vue
 create mode 100644 src/views/Collection.vue

diff --git a/src/App.vue b/src/App.vue
index 966dc60..c785ebd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,7 @@
             <a class="navbar-brand" href="#">
                 <img src="/img/minifig.png" alt="" class="navbar-icon">
             </a>
+
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02"
                     aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
@@ -15,7 +16,7 @@
                         <router-link class="nav-link" to="/">Explore</router-link>
                     </li>
                     <li class="nav-item">
-                        <router-link class="nav-link" to="/">Collection</router-link>
+                        <router-link class="nav-link" to="/collection">Collection</router-link>
                     </li>
                     <!--                    <li class="nav-item dropdown">-->
                     <!--                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>-->
diff --git a/src/router/index.js b/src/router/index.js
index 34629f8..3ae6ca8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Explore from "@/views/Explore";
+import Collection from "@/views/Collection";
 
 const routes = [
   {
@@ -8,8 +9,9 @@ const routes = [
     component: Explore
   },
   {
-    path: '/about',
-    name: 'About',
+    path: '/collection',
+    name: 'Collection',
+    component: Collection
   },
 ]
 
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..e06d446
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,25 @@
+import {createStore} from 'vuex'
+import iziToast from "izitoast";
+
+export default createStore({
+    state: {
+        collection: [],
+        wishlist: [],
+    },
+    mutations: {
+        addOwned(state, minifig) {
+            state.collection.push(minifig);
+            iziToast.success({
+                title: minifig.name+' has been added to your collection'
+            });
+        },
+        addWished(state, minifig) {
+            state.wishlist.push(minifig);
+            iziToast.success({
+                title: minifig.name+' has been added to your collection'
+            });
+        }
+    },
+    actions: {},
+    modules: {}
+})
diff --git a/src/views/About.vue b/src/views/About.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/About.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/Collection.vue b/src/views/Collection.vue
new file mode 100644
index 0000000..58a72a1
--- /dev/null
+++ b/src/views/Collection.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="row">
+        <div class="col col-md-3" v-for="(minifig, minifigIndex) in $store.state.collection" :key="minifigIndex">
+            <div class="card">
+                <img :src="minifig.set_img_url ?? placeholder" alt="" class="minifig-image"/>
+                <a href="javascript:" alt="" class="toggle-button collection-button" @click="$store.commit('addOwned', minifig)">
+                    +
+                </a>
+                <a href="javascript:" alt="" class="toggle-button wishlist-button" @click="$store.commit('addWished', minifig)">
+                    ❤
+                </a>
+                <div class="card-footer">{{ minifig.name }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Collection"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Explore.vue b/src/views/Explore.vue
index 3b444b9..e8330aa 100644
--- a/src/views/Explore.vue
+++ b/src/views/Explore.vue
@@ -3,12 +3,20 @@
         <div class="col-md-12">
             <input type="text" class="form-control" v-model="searchTerm" v-on:keydown.enter="loadSearchResults"/>
         </div>
-        <div class="col-md-12">
-            <hr v-if="results.length > 0">
+
+        <div class="col-md-12" v-if="results && resultCount === 0">
+            <span class="no-results">Keine Ergebnisse</span>
         </div>
+
         <div class="col col-md-3" v-for="(minifig, minifigIndex) in results" :key="minifigIndex">
             <div class="card">
                 <img :src="minifig.set_img_url ?? placeholder" alt="" class="minifig-image"/>
+                <a href="javascript:" alt="" class="toggle-button collection-button" @click="$store.commit('addOwned', minifig)">
+                    +
+                </a>
+                <a href="javascript:" alt="" class="toggle-button wishlist-button" @click="$store.commit('addWished', minifig)">
+                    ❤
+                </a>
                 <div class="card-footer">{{ minifig.name }}</div>
             </div>
         </div>
@@ -17,6 +25,7 @@
 
 <script>
 import axios from 'axios';
+import iziToast from "izitoast";
 
 export default {
     name: 'Explore',
@@ -38,7 +47,9 @@ export default {
             ).then((response) => {
                 component.results = response.data.results;
                 component.resultCount = response.data.count;
-            })
+            }).then(() => {
+                iziToast.error('error while query');
+            });
         }
     }
 }
@@ -46,7 +57,7 @@ export default {
 
 <style>
 .card {
-    margin-bottom: 1em;
+    margin-top: 1em;
 }
 
 .minifig-image {
@@ -55,4 +66,45 @@ export default {
     width: auto;
     margin: 0 auto;
 }
+
+.no-results {
+    padding-top: 1em;
+}
+
+.toggle-button {
+    width: 2em;
+    height: 2em;
+
+    text-decoration: none;
+    position: absolute;
+
+    border: 1px solid white;
+    border-radius: 25px;
+    color: white;
+    font-weight: bold;
+    padding-top: 3px;
+    right: 10px;
+}
+
+.collection-button {
+    top: 10px;
+    background-color: greenyellow;
+}
+
+.collection-button:hover {
+    background-color: lime;
+    color: black;
+}
+
+.wishlist-button {
+    padding-top: 4px;
+    top: 45px;
+    background-color: red;
+}
+
+.wishlist-button:hover {
+    padding-top: 4px;
+    background-color: orangered;
+    color: black;
+}
 </style>
\ No newline at end of file