add search; Icon; api; base;

3 years ago · 8782fd9d2f
12 changed files with 2542 additions and 168 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -8,19 +8,31 @@
				@@ -8,19 +8,31 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "@popperjs/core": "^2.11.0",
+    "axios": "^0.24.0",
+    "bootstrap": "^5.1.3",
+    "bootswatch": "^5.1.3",
    "core-js": "^3.6.5",
+    "fontawesome": "^5.6.3",
+    "izitoast": "^1.4.0",
+    "moment": "^2.29.1",
    "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0"
+    "eslint-plugin-vue": "^7.0.0",
+    "node-sass": "^6.0.1",
+    "sass": "^1.43.5",
+    "sass-loader": "^10.2.0"
  },
  "eslintConfig": {
    "root": true,
--- a/public/img/minifig.ico
+++ b/public/img/minifig.ico
--- a/public/img/minifig.png
+++ b/public/img/minifig.png
--- a/public/index.html
+++ b/public/index.html
@ -4,8 +4,8 @@
				@@ -4,8 +4,8 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="icon" href="/img/minifig.ico">
+    <title>Minifig Collector</title>
  </head>
  <body>
    <noscript>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,30 +1,81 @@
				@@ -1,30 +1,81 @@
 <template>
-  <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </div>
-  <router-view/>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container">
+            <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>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarColor02">
+                <ul class="navbar-nav me-auto">
+                    <li class="nav-item">
+                        <router-link class="nav-link" to="/">Explore</router-link>
+                    </li>
+                    <li class="nav-item">
+                        <router-link class="nav-link" to="/">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>-->
+                    <!--                        <div class="dropdown-menu">-->
+                    <!--                            <router-link class="nav-item" to="/">Home</router-link> |-->
+                    <!--                            <router-link class="nav-item" to="/about">About</router-link>-->
+                    <!--                            <div class="dropdown-divider"></div>-->
+                    <!--                        </div>-->
+                    <!--                    </li>-->
+                </ul>
+                <div class="d-flex">
+                    <input class="form-control me-sm-2" type="text" placeholder="Search" v-model="searchTerm">
+                    <router-link class="btn btn-secondary my-2 my-sm-0" to="/">Search</router-link>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container">
+        <div class="header">
+            <br/>
+            <router-view/>
+        </div>
+    </div>
 </template>

+<script>
+export default {
+    name: 'App',
+    data() {
+        return {
+            searchTerm: ''
+        }
+    }
+}
+</script>
+
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
+    color: #2c3e50;
 }

 #nav {
-  padding: 30px;
+    padding: 30px;
 }

 #nav a {
-  font-weight: bold;
-  color: #2c3e50;
+    font-weight: bold;
+    color: #2c3e50;
 }

 #nav a.router-link-exact-active {
-  color: #42b983;
+    color: #42b983;
+}
+
+.navbar-icon {
+    height: 1.7em;
 }
 </style>
--- a/src/css/app.scss
+++ b/src/css/app.scss
@ -0,0 +1 @@
				@@ -0,0 +1 @@
+@import 'bootstrap';
--- a/src/main.js
+++ b/src/main.js
@ -1,5 +1,7 @@
				@@ -1,5 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import './css/app.scss'
+import 'bootstrap'

 createApp(App).use(router).mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,20 +1,20 @@
				@@ -1,20 +1,20 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Home from '../views/Home.vue'
+import Explore from "@/views/Explore";

 const routes = [
  {
    path: '/',
-    name: 'Home',
-    component: Home
+    name: 'Explore',
+    component: Explore
  },
  {
    path: '/about',
    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+  },
+  {
+    path: '/search',
+    name: 'Search',
+  },
 ]

 const router = createRouter({
--- a/src/views/Explore.vue
+++ b/src/views/Explore.vue
@ -0,0 +1,57 @@
				@@ -0,0 +1,57 @@
+<template>
+    <div class="row">
+        <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>
+        <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"/>
+                <div class="card-footer">{{ minifig.name }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+    name: 'Explore',
+    data() {
+        return {
+            searchTerm: '',
+            placeholder: '/img/minifig.png',
+            results: []
+        }
+    },
+    components: {},
+    methods: {
+        loadSearchResults() {
+            let component = this;
+
+            axios.get(
+                'https://rebrickable.com/api/v3/lego/minifigs/?key=197650df271511a5b9f4938301b4ef80&search=' + component.searchTerm
+            ).then((response) => {
+                component.results = response.data.results;
+                // }).catch((error) => {
+                //
+            })
+        }
+    }
+}
+</script>
+
+<style>
+.card {
+    margin-bottom: 1em;
+}
+
+.minifig-image {
+    max-height: 13em;
+    width: auto;
+    margin: 0 auto;
+}
+</style>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -1,18 +0,0 @@
				@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@ -0,0 +1,48 @@
				@@ -0,0 +1,48 @@
+<template>
+    <div class="home">
+        <input type="text" class="form-control" v-model="updatedSearchTerm"/>
+        <div class="card" v-for="(minifigIndex, minifig) in results.results" v-key="minifigIndex">
+            <div class="card-img">
+                <img src="" alt=""/>
+            </div>
+            <div class="card-content">{{ minifig.name }}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+    name: 'Search',
+    props: {
+        searchTerm: {
+            default: '',
+            type: String
+        }
+    },
+    data() {
+        return {
+            updatedSearchTerm: '',
+            results: []
+        }
+    },
+    components: {},
+    mounted() {
+        this.loadSearchResults();
+    },
+    methods: {
+        loadSearchResults() {
+            let component = this;
+
+            axios.get(
+                'https://rebrickable.com/api/v3/lego/minifigs/?key=197650df271511a5b9f4938301b4ef80&search='+this.searchTerm
+            ).then((response) => {
+                component.results = response.data;
+            // }).catch((error) => {
+            //
+            })
+        }
+    }
+}
+</script>