From f7dfee399e918e0671a7764d610661fd34881710 Mon Sep 17 00:00:00 2001
From: Chris Sexton <chrissexton@users.noreply.github.com>
Date: Sun, 3 Nov 2019 15:01:13 -0500
Subject: [PATCH] flesh out frontend to have a front page

---
 entry/entry.go                            |  1 +
 frontend/package.json                     |  5 +-
 frontend/src/App.vue                      | 12 ++++
 frontend/src/components/Error.vue         | 25 ++++++++
 frontend/src/components/MainView.vue      | 74 +++++++++++++++++++++++
 frontend/src/components/Search.vue        | 54 +++++++++++++++++
 frontend/src/components/SearchResults.vue | 35 -----------
 frontend/src/components/TagList.vue       | 16 ++++-
 frontend/src/components/Viewer.vue        | 20 ++++++
 frontend/src/router/index.js              | 15 +++++
 frontend/src/store/index.js               | 18 +++++-
 frontend/src/views/Console.vue            |  4 +-
 frontend/src/views/Home.vue               | 31 +++++++---
 frontend/yarn.lock                        |  2 +-
 web/entry.go                              | 15 +++++
 web/search.go                             |  1 +
 16 files changed, 276 insertions(+), 52 deletions(-)
 create mode 100644 entry/entry.go
 create mode 100644 frontend/src/components/Error.vue
 create mode 100644 frontend/src/components/MainView.vue
 create mode 100644 frontend/src/components/Search.vue
 delete mode 100644 frontend/src/components/SearchResults.vue
 create mode 100644 frontend/src/components/Viewer.vue
 create mode 100644 web/entry.go
 create mode 100644 web/search.go

diff --git a/entry/entry.go b/entry/entry.go
new file mode 100644
index 0000000..d033700
--- /dev/null
+++ b/entry/entry.go
@@ -0,0 +1 @@
+package entry
diff --git a/frontend/package.json b/frontend/package.json
index c78205f..9687dd4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,12 +10,13 @@
   "dependencies": {
     "bootstrap": "^4.3.1",
     "bootstrap-vue": "^2.0.4",
+    "brace": "latest",
     "core-js": "^3.3.2",
+    "lodash": "^4.17.15",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",
     "vue2-ace-editor": "^0.0.15",
-    "vuex": "^3.0.1",
-    "brace": "latest"
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.0.0",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 9b159e9..79fd02d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,6 +8,7 @@
         <b-nav-item to="/about">About</b-nav-item>
       </b-navbar-nav>
     </b-navbar>
+    <Error/>
     <router-view/>
   </div>
 </template>
@@ -33,3 +34,14 @@
   color: #42b983;
 }
 </style>
+
+<script>
+  import Error from "./components/Error";
+
+  export default {
+    name: 'app',
+    components: {
+        Error
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/Error.vue b/frontend/src/components/Error.vue
new file mode 100644
index 0000000..c3c5f26
--- /dev/null
+++ b/frontend/src/components/Error.vue
@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <b-alert
+                v-for="(e, i) in errs"
+                v-bind:key="i"
+                variant="danger"
+                dismissible
+                show="true"
+                v-show="errs.length > 0">{{e}}</b-alert>
+    </div>
+</template>
+
+<script>
+  import {mapState} from 'vuex';
+  export default {
+    name: "Error",
+    computed: mapState({
+      errs: state => state.errs
+    }),
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/MainView.vue b/frontend/src/components/MainView.vue
new file mode 100644
index 0000000..b6fbcc6
--- /dev/null
+++ b/frontend/src/components/MainView.vue
@@ -0,0 +1,74 @@
+<template>
+    <div :hidden="!content">
+        <b-container fluid>
+            <b-row>
+                <b-col>
+                    <Viewer :content="content" />
+                </b-col>
+            </b-row>
+            <b-row>
+                <b-col cols="10">
+                    <label for="tagList" >Tags</label>
+                </b-col>
+            </b-row>
+            <b-row>
+                <b-col cols="10">
+                    <TagList id="tagList" :tags="tags" :readOnly="true" />
+                </b-col>
+            </b-row>
+        </b-container>
+    </div>
+</template>
+
+<script>
+  import Viewer from "./Viewer";
+  import TagList from "./TagList";
+  export default {
+    name: "MainView",
+    props: {
+      slug: String
+    },
+    created() {
+      if (this.$props.slug) {
+        this.getFile(this.$props.slug)
+      }
+    },
+    data: function () {
+      return {
+        file: ''
+      }
+    },
+    computed: {
+      tags: function() {
+        if (this.file) {
+          return this.file.tags
+        }
+        return []
+      },
+      content: function () {
+        if (this.file) {
+          return this.file.contents
+        }
+        return null
+      }
+    },
+    watch: {
+      slug: function (newValue) {
+        this.getFile(newValue)
+      }
+    },
+    methods: {
+      getFile: function(slug) {
+        this.$store.dispatch('getFile', slug)
+          .then(file => {
+            this.file = file
+          })
+      }
+    },
+    components: {TagList, Viewer}
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/components/Search.vue b/frontend/src/components/Search.vue
new file mode 100644
index 0000000..241d343
--- /dev/null
+++ b/frontend/src/components/Search.vue
@@ -0,0 +1,54 @@
+<template>
+    <b-container fluid>
+        <b-row>
+            <b-input placeholder="Search" @update="runQuery" v-model="query" />
+        </b-row>
+        <b-row v-for="item in results" v-bind:key="item.id">
+            <b-col>
+                <b-link
+                    :to="{ name: target, params: { slug: item.slug } }"
+                >{{item.title}}</b-link>
+            </b-col>
+        </b-row>
+    </b-container>
+</template>
+
+<script>
+  const _ = require('lodash');
+  export default {
+    name: "SearchResults",
+    data: function() {
+      return {
+        results: []
+      }
+    },
+    props: {
+      target: String,
+      query: String
+    },
+    created() {
+      this.getResults()
+      this.runQuery = _.debounce(this.runQuery, 1000)
+    },
+    methods: {
+      getResults: function () {
+        this.$store.dispatch('getSearchResults')
+          .catch(res => {
+            this.$store.commit('addError', res.message);
+          })
+          .then(res => {
+            this.results = res
+          })
+      },
+      runQuery: function() {
+        this.$store.dispatch('getSearchResults', this.query)
+          .catch(res => {
+            this.$store.commit('addError', res.message);
+          })
+          .then(res => {
+            this.results = res
+          })
+      }
+    }
+  }
+</script>
diff --git a/frontend/src/components/SearchResults.vue b/frontend/src/components/SearchResults.vue
deleted file mode 100644
index bed8bc1..0000000
--- a/frontend/src/components/SearchResults.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-    <b-container fluid>
-        <b-row v-for="item in results" v-bind:key="item.id">
-            <b-col>
-                <b-link
-                    :to="{ name: 'console-slug', params: { slug: item.slug } }"
-                >{{item.title}}</b-link>
-            </b-col>
-        </b-row>
-    </b-container>
-</template>
-
-<script>
-  export default {
-    name: "SearchResults",
-    data: function() {
-      return {
-        results: []
-      }
-    },
-    created() {
-      this.getResults()
-    },
-    methods: {
-      getResults: function () {
-        console.log('getResults')
-        this.$store.dispatch('getSearchResults')
-          .then(res => {
-            console.log('then'+res)
-            this.results = res
-          })
-      }
-    }
-  }
-</script>
diff --git a/frontend/src/components/TagList.vue b/frontend/src/components/TagList.vue
index 3450342..ec1e82b 100644
--- a/frontend/src/components/TagList.vue
+++ b/frontend/src/components/TagList.vue
@@ -1,12 +1,20 @@
 <template>
-    <b-input type="text" placeholder="tags" :value="tagString"/>
+    <div>
+        <b-input type="text" placeholder="tags" :value="tagString" :hidden="readOnly"/>
+        <div :hidden="!readOnly">
+            <b-badge pill v-for="(tag, idx) in tags" v-bind:key="idx" class="tag">
+                {{tag}}
+            </b-badge>
+        </div>
+    </div>
 </template>
 
 <script>
   export default {
     name: "TagList",
     props: {
-      tags: Array
+      tags: Array,
+      readOnly: Boolean
     },
     computed: {
       tagString: function() {
@@ -17,5 +25,7 @@
 </script>
 
 <style scoped>
-
+.tag {
+    margin-right: 0.5em;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/Viewer.vue b/frontend/src/components/Viewer.vue
new file mode 100644
index 0000000..58b6205
--- /dev/null
+++ b/frontend/src/components/Viewer.vue
@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <pre>
+            {{content}}
+        </pre>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: "Viewer",
+    props: {
+      content: String
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index cacba30..a719680 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -11,6 +11,21 @@ const routes = [
     name: 'home',
     component: Home
   },
+  {
+    path: '/view/:slug',
+    name: 'home-slug',
+    component: Home
+  },
+  {
+    path: '/search/:query',
+    name: 'home-search',
+    component: Home
+  },
+  {
+    path: '/console/search/:query',
+    name: 'console-search',
+    component: Console
+  },
   {
     path: '/console/:slug',
     name: 'console-slug',
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 8c7870d..4d50a0d 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import _ from 'lodash'
 
 Vue.use(Vuex)
 
@@ -18,8 +19,15 @@ var files = {
 
 export default new Vuex.Store({
   state: {
+    errs: []
   },
   mutations: {
+    clearError(state) {
+      state.errs = []
+    },
+    addError(state, err) {
+      state.errs.push(err)
+    }
   },
   actions: {
     getFile: function(_, slug) {
@@ -28,9 +36,15 @@ export default new Vuex.Store({
         setTimeout(() => resolve(files[slug]), getRandomInt(0, 1000))
       })
     },
-    getSearchResults: function () {
+    getSearchResults: function (state, query) {
+      console.log('getSearchResults: '+query)
+      let values = Object.values(files)
+      if (query)
+        values = _.filter(values, (o) => {
+          return o.title.indexOf(query) != -1
+        })
       return new Promise(function (resolve) {
-        setTimeout(() => resolve(Object.values(files)), getRandomInt(0, 1000))
+        setTimeout(() => resolve(values, getRandomInt(0, 1000)))
       })
     }
   },
diff --git a/frontend/src/views/Console.vue b/frontend/src/views/Console.vue
index ae9f367..3836c1c 100644
--- a/frontend/src/views/Console.vue
+++ b/frontend/src/views/Console.vue
@@ -16,7 +16,7 @@
       </b-col>
       <b-col md="2">
         <h2>Search Results</h2>
-        <SearchResults />
+        <SearchResults target="console-slug" />
       </b-col>
     </b-row>
   </b-container>
@@ -26,7 +26,7 @@
 // @ is an alias to /src
 import MainEditor from "../components/MainEditor";
 import ScratchPad from "../components/ScratchPad";
-import SearchResults from "../components/SearchResults";
+import SearchResults from "../components/Search";
 
 export default {
   name: 'home',
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index fc2e940..92a34cb 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,18 +1,35 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+  <b-container fluid>
+    <b-row><b-col>
+      <h1>Home</h1>
+    </b-col></b-row>
+    <b-row>
+      <b-col md="2">
+        <SearchResults target="home-slug" :query="$route.params.query" />
+      </b-col>
+      <b-col>
+        <MainView :slug="$route.params.slug" />
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
+
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+import SearchResults from '../components/Search.vue'
+import MainView from '../components/MainView.vue'
 
 export default {
   name: 'home',
   components: {
-    HelloWorld
+    SearchResults,
+    MainView
   }
 }
 </script>
+
+<style scoped>
+  h2 {
+    font-size: large;
+  }
+</style>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 0fde24f..4fd9998 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1641,7 +1641,7 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-brace@^0.11.0:
+brace@^0.11.0, brace@latest:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
   integrity sha1-SJb8ydVE7vRfS7dmDbMg07N5/lg=
diff --git a/web/entry.go b/web/entry.go
new file mode 100644
index 0000000..f981486
--- /dev/null
+++ b/web/entry.go
@@ -0,0 +1,15 @@
+package web
+
+import "net/http"
+
+func editFile(w http.ResponseWriter, r *http.Request) {
+
+}
+
+func newFile(w http.ResponseWriter, r *http.Request) {
+
+}
+
+func getFile(w http.ResponseWriter, r *http.Request) {
+
+}
diff --git a/web/search.go b/web/search.go
new file mode 100644
index 0000000..efb3895
--- /dev/null
+++ b/web/search.go
@@ -0,0 +1 @@
+package web