From b39fb9c76eb3b598277dc4ba61a8e308088ee52b Mon Sep 17 00:00:00 2001
From: Giyos <giyos.a@gmail.com>
Date: Fri, 21 Sep 2018 18:09:32 +0500
Subject: [PATCH 1/2] Search input added to header

---
 front/client/components/Article.vue        | 48 ++++++++--------------
 front/client/components/Categories.vue     |  4 +-
 front/client/components/Search.vue         | 10 ++++-
 front/client/components/Toolbar.vue        |  6 +--
 front/client/service/Category.ts           |  7 ----
 front/client/service/CategoryItem.ts       | 23 +++++++++++
 front/client/store/index.ts                |  4 +-
 front/client/store/modules/category.ts     |  5 ---
 front/client/store/modules/categoryItem.ts | 35 ++++++++++++++++
 9 files changed, 90 insertions(+), 52 deletions(-)
 create mode 100644 front/client/service/CategoryItem.ts
 create mode 100644 front/client/store/modules/categoryItem.ts

diff --git a/front/client/components/Article.vue b/front/client/components/Article.vue
index 6a58c7f..a4c6df2 100644
--- a/front/client/components/Article.vue
+++ b/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>
diff --git a/front/client/components/Categories.vue b/front/client/components/Categories.vue
index 139445f..7066a85 100644
--- a/front/client/components/Categories.vue
+++ b/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">
diff --git a/front/client/components/Search.vue b/front/client/components/Search.vue
index 9db3744..2c5c644 100644
--- a/front/client/components/Search.vue
+++ b/front/client/components/Search.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-autocomlete dark outline />
+  <v-text-field class="toollbar-search" label="Search" dark solo></v-text-field>
 </template>
 
 <script lang="ts">
@@ -7,5 +7,11 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 
 @Component
-export default class Search extends Vue {}
+export default class SearchField extends Vue {}
 </script>
+
+<style>
+.toollbar-search div {
+  margin-bottom: 0 !important;
+}
+</style>
diff --git a/front/client/components/Toolbar.vue b/front/client/components/Toolbar.vue
index e4bdea9..b29ba9c 100644
--- a/front/client/components/Toolbar.vue
+++ b/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 {
diff --git a/front/client/service/Category.ts b/front/client/service/Category.ts
index 96c96b9..40a81da 100644
--- a/front/client/service/Category.ts
+++ b/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 {
diff --git a/front/client/service/CategoryItem.ts b/front/client/service/CategoryItem.ts
new file mode 100644
index 0000000..a14d9e1
--- /dev/null
+++ b/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 }
\ No newline at end of file
diff --git a/front/client/store/index.ts b/front/client/store/index.ts
index cb39f91..2e990f7 100644
--- a/front/client/store/index.ts
+++ b/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
     }
   })
 }
diff --git a/front/client/store/modules/category.ts b/front/client/store/modules/category.ts
index b586ec8..24793e7 100644
--- a/front/client/store/modules/category.ts
+++ b/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)
   }
 }
 
diff --git a/front/client/store/modules/categoryItem.ts b/front/client/store/modules/categoryItem.ts
new file mode 100644
index 0000000..5b9267e
--- /dev/null
+++ b/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
\ No newline at end of file

From 551b887430bd695f3e89cebeb3c2e11e7b845747 Mon Sep 17 00:00:00 2001
From: Giyos <giyos.a@gmail.com>
Date: Sat, 22 Sep 2018 17:01:12 +0500
Subject: [PATCH 2/2] Search redirect v 0.0.5

---
 front/client/components/Search.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/front/client/components/Search.vue b/front/client/components/Search.vue
index 2c5c644..b6f5acb 100644
--- a/front/client/components/Search.vue
+++ b/front/client/components/Search.vue
@@ -1,5 +1,9 @@
 <template>
-  <v-text-field class="toollbar-search" label="Search" dark solo></v-text-field>
+  <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,11 +11,20 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 
 @Component
-export default class SearchField 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>
-.toollbar-search div {
+<style scoped>
+.toollbar-search >>> div {
   margin-bottom: 0 !important;
 }
 </style>