From 22b29ad46e97e1d99f8e90e7bfd698e9aebd46d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Kl=C3=BCter?= <Philipp.klueter@gmail.com>
Date: Sun, 26 Jul 2020 16:38:26 +0200
Subject: [PATCH] End of Tutorial

---
 public/jobs.json              |  58 +++++++++++++++
 src/App.vue                   |  44 ++++++------
 src/components/Header.vue     |  36 ++++++++++
 src/components/HelloWorld.vue | 130 ----------------------------------
 src/components/JobCard.vue    |  26 +++++++
 src/views/Home.vue            |  71 ++++++++++++++++---
 6 files changed, 202 insertions(+), 163 deletions(-)
 create mode 100644 public/jobs.json
 create mode 100644 src/components/Header.vue
 delete mode 100644 src/components/HelloWorld.vue
 create mode 100644 src/components/JobCard.vue

diff --git a/public/jobs.json b/public/jobs.json
new file mode 100644
index 0000000..68dcacf
--- /dev/null
+++ b/public/jobs.json
@@ -0,0 +1,58 @@
+[
+    {
+      "name": "ABC Job123",
+      "id": 1
+    },
+    {
+      "name": "CDE Job123",
+      "id": 2
+    },
+    {
+      "name": "FGH Job123",
+      "id": 3
+    },
+    {
+      "name": "JKL Job123",
+      "id": 4
+    },
+    {
+      "name": "LMN Job123",
+      "id": 5
+    },
+    {
+      "name": "OPQ Job123",
+      "id": 6
+    },
+    {
+      "name": "QRS Job123",
+      "id": 7
+    },
+    {
+      "name": "TUV Job123",
+      "id": 8
+    },
+    {
+      "name": "WXY Job123",
+      "id": 9
+    },
+    {
+      "name": "ZZZ Job123",
+      "id": 10
+    },
+    {
+      "name": "ZZZ Job567",
+      "id": 11
+    },
+    {
+      "name": "ZaZZ Job999",
+      "id": 12
+    },
+    {
+      "name": "ZZZ Journey",
+      "id": 13
+    },
+    {
+      "name": "ZZZ Indigo",
+      "id": 14
+    }
+  ]
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 0228dd3..86d874b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,30 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+    <div id="app">
+        <div id="nav">
+            <Header></Header>
+        </div>
+        <router-view />
     </div>
-    <router-view />
-  </div>
 </template>
 
+<script>
+import Header from "@/components/Header.vue";
+
+export default {
+    name: "app",
+    components: {
+        Header
+    }
+};
+</script>
 <style lang="scss">
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
     color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
 }
+
 </style>
+
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..d840485
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <b-navbar toggleable="lg" type="dark" variant="primary">
+            <b-navbar-brand href="/">NavBar</b-navbar-brand>
+
+            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+            <b-collapse id="nav-collapse" is-nav>
+                <b-navbar-nav>
+                    <b-nav-item href="/">Home</b-nav-item>
+                    <b-nav-item href="/about">About</b-nav-item>
+                </b-navbar-nav>
+
+                <!-- Right aligned nav items -->
+                <b-navbar-nav class="ml-auto">
+                    <b-nav-form>
+                        <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
+                        <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
+                    </b-nav-form>
+                </b-navbar-nav>
+            </b-collapse>
+        </b-navbar>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Header"
+};
+</script>
+
+<style>
+.navbar {
+    margin-bottom: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 13efdaa..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "HelloWorld",
-  props: {
-    msg: String
-  }
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/JobCard.vue b/src/components/JobCard.vue
new file mode 100644
index 0000000..de257ea
--- /dev/null
+++ b/src/components/JobCard.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <b-card
+            :title="name"
+            img-src="https://picsum.photos/600/300/?image=212"
+            img-alt="My Foto"
+            img-top
+            tag="Foto"
+            class="mb-2"
+            border-variant="primary"
+        >
+            <b-card-text>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora, accusamus.</b-card-text>
+            <b-button variant="primary">Apply</b-button>
+        </b-card>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "JobCard",
+    props: ["name"]
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 191049e..136bb54 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,18 +1,69 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
-  </div>
+    <div class="home">
+        <b-container>
+            <b-row algin-v="center">
+                <b-col cols="6" lg="3" v-for="job in displayJobs" :key="job.id">
+                    <job-card :name="job.name"></job-card>
+                </b-col>
+            </b-row>
+            <div class="pagination justify-content-center mt-5">
+                <b-pagination
+                    v-model="currentPage"
+                    :total-rows="rows"
+                    :per-page="perPage"
+                    first-text="First"
+                    prev-text="Prev"
+                    next-text="Next"
+                    last-text="Last"
+                    @input="paginate(currentPage)"
+                ></b-pagination>
+            </div>
+        </b-container>
+    </div>
 </template>
 
+
 <script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
+import JobCard from "@/components/JobCard";
 
 export default {
-  name: "Home",
-  components: {
-    HelloWorld
-  }
+    name: "Home",
+    components: {
+        "job-card": JobCard
+    },
+    mounted() {
+        this.fetchData();
+    },
+    data() {
+        return {
+            jobs: [],
+            displayJobs: [],
+            currentPage: 1,
+            rows: 1,
+            perPage: 4
+        };
+    },
+    methods: {
+        async fetchData() {
+            const res = await fetch("jobs.json");
+            const val = await res.json();
+            this.jobs = val;
+            this.displayJobs = val.slice(
+                this.perPage * (this.currentPage - 1),
+                this.perPage * this.currentPage
+            );
+            this.rows = this.jobs.length;
+        },
+        paginate(currentPage) {
+            this.currentPage = currentPage;
+            this.displayJobs = this.jobs.slice(
+                this.perPage * (currentPage - 1),
+                this.perPage * currentPage
+            );
+        }
+    }
 };
 </script>
+
+<style>
+</style>
\ No newline at end of file