From 635799e60a71c6ac348b2227032c90cb322dba65 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sun, 28 Apr 2019 13:44:20 +0200
Subject: [PATCH] Add the ProjectViewSwitcher component

---
 src/components/ProjectViewSwitcher.vue |  6 ++++++
 src/views/Projects.vue                 | 23 +++++++++++++++++------
 2 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ProjectViewSwitcher.vue

diff --git a/src/components/ProjectViewSwitcher.vue b/src/components/ProjectViewSwitcher.vue
new file mode 100644
index 0000000..12d49e7
--- /dev/null
+++ b/src/components/ProjectViewSwitcher.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <button type="button" @click="$emit('changed', 'grid')">Grid</button>
+    <button type="button" @click="$emit('changed', 'list')" class="ml-2">List</button>
+  </div>
+</template>
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index 897b208..a27d47d 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -26,13 +26,17 @@
     </div>
 
     <div class="max-w-6xl mx-auto p-6 xl:px-0">
-      <page-title class="mb-6">All Projects</page-title>
+      <div class="flex justify-between items-baseline">
+        <page-title class="mb-6">All Projects</page-title>
 
-      <div v-if="display == 'grid'" class="flex flex-wrap mt-4 -mx-4 -mb-8">
+        <project-view-switcher @changed="projectViewSwitched"></project-view-switcher>
+      </div>
+
+      <div v-if="displayMode == 'grid'" class="flex flex-wrap mt-4 -mx-4 -mb-8">
         <project-card v-for="n in 9" :key="n"></project-card>
       </div>
 
-      <div v-if="display == 'list'" class="bg-white shadow-md pt-6 pb-6">
+      <div v-if="displayMode == 'list'" class="bg-white shadow-md pt-6 pb-6 mt-4">
         <table class="w-full">
           <thead>
             <tr class="border-b border-gray-300">
@@ -63,19 +67,26 @@
 <script>
 import ProjectCard from '@/components/ProjectCard'
 import ProjectSearch from '@/components/ProjectSearch'
+import ProjectViewSwitcher from '@/components/ProjectViewSwitcher'
 
 export default {
   name: 'projects',
 
   components: {
     ProjectCard,
-    ProjectSearch
+    ProjectSearch,
+    ProjectViewSwitcher
   },
 
   data () {
     return {
-      display: 'grid'
-      // display: 'list'
+      displayMode: 'grid'
+    }
+  },
+
+  methods: {
+    projectViewSwitched (mode) {
+      this.displayMode = mode
     }
   }
 }