Exercise8

.github/workflows/webapp.yml

@@ -5,9 +5,9 @@ name: Build, Test, Lint
 
 on:
   push:
-    branches: [ main, exercise7 ]
+    branches: [ main, exercise8 ]
   pull_request:
-    branches: [ main, exercise7 ]
+    branches: [ main, exercise8 ]
 
 defaults:
   run:
@@ -29,6 +29,6 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
-      - run: npm ci
-      - run: npm run lint
-      - run: npm run test
+      - run: yarn install --frozen-lockfile
+      - run: yarn run lint
+      - run: yarn run test

webapp/components/BasicButton.vue

@@ -0,0 +1,37 @@
+<template>
+  <a
+      :href="href"
+      class="inline-flex m-1.5 px-2.5 py-2 rounded-lg shadow-md text-white text-center
+      cursor-pointer justify-center items-center"
+      :class="(!disabled ? `bg-${color}-500 hover:bg-${color}-600` : `bg-gray-500`) + (bold ? ' font-semibold' : '')">
+    <slot></slot>
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'BasicButton',
+  props: {
+    color: {
+      type: String,
+      default: 'blue'
+    },
+    bold: {
+      type: Boolean,
+      default: false
+    },
+    href: {
+      type: String,
+      default: undefined
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

webapp/components/BasicFooter.vue

@@ -0,0 +1,15 @@
+<template>
+  <footer class="flex justify-center py-4">
+    <span>(c) 2021 Dojo</span>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: "BasicFooter"
+}
+</script>
+
+<style scoped>
+
+</style>

webapp/components/NavBar.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="h-12">
+    <nav
+        class="flex fixed w-full items-center justify-between lg:justify-around px-3 bg-blue-50 shadow-lg z-10"
+    >
+      <section>
+        <BasicButton class="lg:hidden" :bold="true" :color="'gray'" @click.native="sidebarOpen = true">≡ Menu
+        </BasicButton>
+        DojoNews
+      </section>
+      <section class="hidden lg:block lg:flex lg:justify-between lg:bg-transparent">
+        <NavMenu :is-authenticated="isAuthenticated" @logout="logout()"></NavMenu>
+      </section>
+    </nav>
+    <div
+        class="absolute z-20 w-full h-full bg-gray-50 opacity-50"
+        :class="sidebarOpen ? '' : 'hidden'"
+        @click="sidebarOpen = false"
+    >
+    </div>
+    <aside
+        class="fixed z-30 w-1/2 sm:w-1/3 px-3 h-full bg-white shadow-xl transition-all duration-500 flex flex-col"
+        :class="sidebarOpen ? 'left-0' : '-left-1/2 md:-left-1/3'"
+    >
+      <button class="self-end" @click="sidebarOpen = false">[x]</button>
+      <NavMenu :vertical="true" :is-authenticated="isAuthenticated" @logout="logout(); sidebarOpen = false"
+               @navigated="sidebarOpen = false"></NavMenu>
+    </aside>
+  </div>
+</template>
+
+<script>
+import {mapGetters, mapMutations} from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters({
+      isAuthenticated: 'auth/isAuthenticated',
+      userId: 'auth/userId'
+    })
+  },
+  data() {
+    return {
+      sidebarOpen: false
+    }
+  },
+  methods: {
+    async logout() {
+      this.unsetToken()
+      await this.$apolloHelpers.onLogout()
+      await this.$nuxt.refresh()
+    },
+    ...mapMutations({
+      unsetToken: 'auth/unsetToken'
+    })
+  }
+}
+</script>

webapp/components/NavMenu.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex" :class="vertical ? 'justify-start flex-col' : 'justify-between flex-row'">
+    <NuxtLinkButton @click="$emit('navigated')" to="/" color="gray" href="/">Posts</NuxtLinkButton>
+    <NuxtLinkButton @click="$emit('navigated')" to="/about" color="gray" href="/about">About us</NuxtLinkButton>
+    <NuxtLinkButton @click="$emit('navigated')" v-if="!isAuthenticated" :to="{name: 'login', params: {returnPath: '/'}}"
+      color="green" href="/login" id="login-button">
+      Login
+    </NuxtLinkButton>
+    <BasicButton v-else :color="'red'" @click.native="$emit('logout')" id="logout-button">Logout</BasicButton>
+  </div>
+</template>
+<script>
+export default {
+  name: "NavMenu",
+  props: {
+    isAuthenticated: {
+      type: Boolean,
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

webapp/components/NewsListItem.vue

@@ -1,29 +1,42 @@
 <template>
-  <div>
-    <h2>{{ title }} ({{ votes }})</h2>
-    <button
-        :disabled="!isAuthenticated || userVote > 0"
-        :title="isAuthenticated ? null : 'Login to upvote'"
-        @click="$emit('upvote')"
-    >
-      Upvote
-    </button>
-    <button
-        :disabled="!isAuthenticated || userVote < 0"
-        :title="isAuthenticated ? null : 'Login to downvote'"
-        @click="$emit('downvote')"
-    >
-      Downvote
-    </button>
-    <template v-if="isAuthenticated && userId === authorId">
-      <button disabled title="Not implemented yet">Edit</button>
-      <button @click="$emit('remove')">Remove</button>
-    </template>
+  <div class="border-gray-100 rounded-md border py-2 px-3 my-2 w-full md:w-96">
+    <div class="flex justify-between items-baseline">
+      <h2 class="text-lg font-semibold pt-2 pb-1">{{ title }}</h2>
+      <span>
+        <BasicButton
+            class="w-6 h-6 font-bold text-sm"
+            :color="userVote > 0 ? 'green' : 'gray'"
+            :title="isAuthenticated ? null : 'Login to upvote'"
+            @click.native="isAuthenticated && userVote <= 0 && $emit('upvote')"
+        >＋
+        </BasicButton>
+        <h2 class="inline-block text-lg pt-2 pb-1 w-5 text-center">{{ votes }}</h2>
+        <BasicButton
+            class="w-6 h-6 font-bold text-sm"
+            :color="userVote < 0 ? 'red' : 'gray'"
+            :title="isAuthenticated ? null : 'Login to downvote'"
+            @click.native="isAuthenticated && userVote >= 0 && $emit('downvote')"
+        >−
+        </BasicButton>
+      </span>
+    </div>
+    <div class="flex flex-wrap justify-end" v-if="isAuthenticated && userId === authorId">
+      <BasicButton
+          class="text-xs"
+          :color="'gray'"
+          disabled title="Not implemented yet">Edit
+      </BasicButton>
+      <BasicButton
+          class="text-xs"
+          :color="'gray'"
+          @click.native="$emit('remove')">Remove
+      </BasicButton>
+    </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import {mapGetters} from 'vuex'
 
 export default {
   emits: ['upvote', 'downvote', 'remove'],

webapp/components/NewsListItemInput.vue

@@ -1,10 +1,14 @@
 <template>
-  <form @submit.prevent="$emit('create', title); title = ''">
-    <label>
-      Add news title:
-      <input type="text" v-model.trim="title" placeholder="Enter some new news title.."/>
-    </label>
+  <form
+      class="flex flex-wrap justify-center items-center"
+      @submit.prevent="$emit('create', title); title = ''">
+    <label for="input-title" class="py-1 px-2">Add news title:</label>
+    <input id="input-title"
+           class="border-2 border-gray-100 rounded px-2 py-1"
+           type="text" v-model.trim="title" placeholder="Enter some new news.."/>
     <input
+        class="line mx-1.5 px-3.5 pt-1 pb-1.5 rounded-lg shadow text-white text-center
+bg-blue-500 hover:bg-blue-600"
         type="submit"
         value="Add"
         :disabled="!title.length"
@@ -17,16 +21,10 @@
 
 export default {
   emits: ['create'],
-  data () {
+  data() {
     return {
       title: ''
     }
   }
 }
 </script>
-
-<style scoped>
-form {
-  padding: 2rem 0;
-}
-</style>

webapp/components/NuxtLinkButton.vue

@@ -0,0 +1,30 @@
+<template>
+  <nuxt-link @click.native="$emit('click')" :to="this.to" tag="div" class="flex">
+    <BasicButton :color="this.color" class="flex-grow" :href="this.href">
+      <slot></slot>
+    </BasicButton>
+  </nuxt-link>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default Vue.component("NuxtLinkButton", {
+  props: {
+    to: {
+      required: true
+    },
+    color: {
+      type: String,
+      default: 'blue'
+    },
+    href: {
+      type: String,
+    }
+  }
+})
+</script>
+
+<style scoped>
+
+</style>

webapp/layouts/default.vue

@@ -1,8 +1,11 @@
 <template>
-  <div>
-    <LoginMenu/>
-    <hr>
-    <Nuxt/>
+  <div class="flex flex-col justify-between min-h-screen">
+    <NavBar/>
+    <Nuxt class="flex-grow py-4"/>
+    <div>
+      <hr>
+      <BasicFooter/>
+    </div>
   </div>
 </template>
 

webapp/nuxt.config.js

@@ -42,12 +42,13 @@ export default {
   buildModules: [
     // https://go.nuxtjs.dev/eslint
     '@nuxtjs/eslint-module',
-    '@nuxtjs/pwa'
+    '@nuxtjs/pwa',
+    '@nuxtjs/tailwindcss'
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
-    '@nuxtjs/apollo',
+    '@nuxtjs/apollo'
   ],
 
   apollo: {