Add collection page & wishlist button; Needs design to izitoast & persistance;

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>-->

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',
+    path: '/collection',
-    name: 'About',
+    name: 'Collection',
+    component: Collection
   },
 ]
 

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: {}
+})

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

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>

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>