Merge branch 'vue' of https://github.com/aelve/guide into vue

front/client/components/Article.vue

@@ -1,10 +1,13 @@
 <template>
   <v-container>
-    <!-- {{ article.notes }} `-->
-    <h1>TEST BLYAT</h1>
+    <div v-html="getCategoryDescription"></div>
+    <br>
+    <br>
+    <br>
     <p> {{ getCategory }} </p>
-    <p>more more more text</p>
-    <p> {{ getCategoryDescription }} </p>
+    <div v-for="(ecosystem, index) in getCategory" :key="index">
+      {{ ecosystem.description }}
+    </div>
   </v-container>
 </template>
 
@@ -17,42 +20,23 @@ import Component from 'vue-class-component'
 export default class ArticleItem extends Vue {
 
   async asyncData({ store }) {
-    return store.dispatch('category/loadCategoryItem')
+    return store.dispatch('categoryItem/loadCategoryItem')
   }
 
   get getCategory () {
-    return typeof this.$store.state.category.categoryList
+    return typeof this.$store.state.categoryItem.categoryItemList
   }
 
   get getCategoryDescription() {
-    // let rawDescription = this.$store.state.category.categoryList.description.html;
-
-    // let parsedDescription = new DOMParser().parseFromString(rawDescription)
-
-    // return typeof this.$store.state.category.categoryList.description.html
-    // return parsedDescription
-    return this.$store.state.category.categoryList
+    const description = this.$store.state.categoryItem.categoryItemList.description.html;
+    return description
   }
 
-  // const computed = {
-  //   getCategory: function() {
-  //     const categoryData = this.$store.state.category.categoryList.items;
+  get getCategoryItems() {
+    const items = this.$store.state.categoryItem.categoryItemList.items
+    const parsedItems = items.map((item:any) => {return item.ecosystem.html})
 
-  //     // categoryData.map() => {
-
-  //     // }
-
-  //     return this.$store.state.category.categoryList.items
-  //   },
-
-  //   getCategoryDescription: function() {
-  //     return this.$store.state.category.categoryList.description.html
-  //   }
-  // }
-
-  // stripHtml() {
-  //   const categoryData: any[] = computed.getCategory();
-  // }
-  // const parser = new DOMParser()
+    return parsedItems
+  }
 }
 </script>

front/client/components/Categories.vue

@@ -17,9 +17,9 @@
         :key="index"
       > 
         <!-- TODO remove when links refactored -->
-        <router-link to="/haskell">
+        <!-- <router-link to="/haskell">
           <button class="test-btn">Test Article</button>
-        </router-link>
+        </router-link> -->
         
         <div class="category-group">
           <h4 class="mb-2 display-1 font-weight-black">

front/client/components/Search.vue

@@ -1,5 +1,9 @@
 <template>
-  <v-autocomlete dark outline />
+  <v-text-field v-model="searchInput" 
+                class="toollbar-search" 
+                label="Search" 
+                @keyup.enter.native="processSearchInput"
+                dark solo></v-text-field>
 </template>
 
 <script lang="ts">
@@ -7,5 +11,20 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 
 @Component
-export default class Search extends Vue {}
+export default class SearchField extends Vue {
+  searchInput:string = ''
+
+  processSearchInput() {
+    window.open('`http://aelve.com:4801/haskell/?q=${this.searchInput}`', '_blank')
+    console.log(this.searchInput);
+    
+    return this.searchInput
+  }
+}
 </script>
+
+<style scoped>
+.toollbar-search >>> div {
+  margin-bottom: 0 !important;
+}
+</style>

front/client/components/Toolbar.vue

@@ -3,7 +3,7 @@
     <v-toolbar-side-icon></v-toolbar-side-icon>
     <v-toolbar-title>Aelve Guide</v-toolbar-title>
     <v-spacer></v-spacer>
-    <!-- <search></search> -->
+    <search-field />
     <v-toolbar-items class="hidden-sm-and-down">
       <v-btn v-on:click="getApi" flat>Login</v-btn>
     </v-toolbar-items>
@@ -12,13 +12,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import Search from './Search.vue';
+import SearchField from 'client/components/Search.vue';
 import Component from 'vue-class-component';
 import axios from "axios";
 
 @Component({
   components: {
-    Search
+    SearchField
   }
 })
 export default class Toolbar extends Vue {

front/client/service/Category.ts

@@ -14,13 +14,6 @@ class CategoryService {
     })
     return data
   }
-
-  async getCategoryItem(): Promise<ICategory[]> {
-    const { data } = await axios.get('api/category/sth6l9jl', {})
-    console.log(data.items);
-
-    return data;
-  }
 }
 
 export enum CategoryStatus {

front/client/service/CategoryItem.ts

@@ -0,0 +1,23 @@
+import axios from 'axios'
+
+class CategoryItemService {
+  async getCategoryItem(): Promise<ICategoryItem[]> {
+    const { data } = await axios.get('api/category/sth6l9jl', {})
+    console.log(data);
+
+    return data;
+  }
+}
+
+export interface ICategoryItem {
+  status?: string,
+  group?: string,
+  uid?: string,
+  items?: any[],
+  title?: string,
+  description?: object
+}
+
+const catItemServiceInstance = new CategoryItemService()
+
+export { catItemServiceInstance as CategoryItemService }

front/client/store/index.ts

@@ -1,5 +1,6 @@
 import Vuex from 'vuex'
 import category from 'client/store/modules/category'
+import categoryItem from 'client/store/modules/categoryItem'
 
 function createStore() {
   // TODO loggins mutations in dev
@@ -8,7 +9,8 @@ function createStore() {
     actions: {},
     mutations: {},
     modules: {
-      category
+      category,
+      categoryItem
     }
   })
 }

front/client/store/modules/category.ts

@@ -15,11 +15,6 @@ const actions: ActionTree<CategoryState, any> = {
   async loadCategoryList({ commit }: ActionContext<CategoryState, any>): Promise<any> {
     const data: ICategory[] = await CategoryService.getCategoryList()
     commit('setCategoryList', data)
-  },
-
-  async loadCategoryItem({ commit }: ActionContext<CategoryState, any>): Promise<any> {
-    const data: ICategory[] = await CategoryService.getCategoryItem()
-    commit('setCategoryItem', data)
   }
 }
 

front/client/store/modules/categoryItem.ts

@@ -0,0 +1,35 @@
+import { ActionTree, GetterTree, MutationTree, ActionContext, Module } from 'vuex'
+import { ICategoryItem, CategoryItemService } from 'client/service/CategoryItem'
+
+interface CategoryItemState {
+  categoryItemList: ICategoryItem[]
+}
+
+const state: CategoryItemState = {
+  categoryItemList: []
+}
+
+const getters: GetterTree<CategoryItemState, any> = {}
+
+const actions: ActionTree<CategoryItemState, any> = {
+  async loadCategoryItem({ commit }: ActionContext<CategoryItemState, any>): Promise<any> {
+    const data: ICategoryItem[] = await CategoryItemService.getCategoryItem()
+    commit('setCategoryItem', data)
+  }
+}
+
+const mutations: MutationTree<CategoryItemState> = {
+  setCategoryItem: (state: CategoryItemState, payload: ICategoryItem[]) => {
+    state.categoryItemList = payload
+  }
+}
+
+const categoryItem: Module<CategoryItemState, any> = {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}
+
+export default categoryItem