Merge pull request #232 from h3poteto/iss-165

closes #165 Search page to find account

src/renderer/components/TimelineSpace/Contents/Cards/User.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="user" @click="openUser(user)">
+<div class="user" @click="openUser(user)" :style="theme">
   <div class="icon">
     <img :src="user.avatar" />
   </div>
@@ -15,9 +15,20 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'user',
   props: [ 'user' ],
+  computed: {
+    ...mapState({
+      theme: (state) => {
+        return {
+          '--theme-border-color': state.App.theme.border_color
+        }
+      }
+    })
+  },
   methods: {
     username (account) {
       if (account.display_name !== '') {
@@ -37,10 +48,12 @@ export default {
 
 <style lang="scss" scoped>
 .user {
+  --theme-border-color: #ebeef5;
+
   display: flex;
   box-sizing: border-box;
   padding: 4px 12px 8px;
-  border-bottom: 1px solid #ebeef5;
+  border-bottom: 1px solid var(--theme-border-color);
   cursor: pointer;
 
   .icon {

src/renderer/components/TimelineSpace/Contents/Search.vue

@@ -0,0 +1,116 @@
+<template>
+  <div id="search" :style="theme">
+    <div class="search-header" v-loading="loading" :element-loading-background="loadingBackground">
+      <el-form :inline="true">
+        <el-select v-model="target" placeholder="search" class="search-target">
+          <el-option
+            v-for="item in searchTargets"
+            :key="item.target"
+            :label="item.label"
+            :value="item.target">
+          </el-option>
+        </el-select>
+        <input v-model="query" placeholder="keyword" class="search-keyword" v-shortkey="['enter']" @shortkey="search" autofocus></input>
+        <div class="clearfix"></div>
+      </el-form>
+    </div>
+    <div class="search-result">
+      <search-account></search-account>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import SearchAccount from './Search/Account'
+
+export default {
+  name: 'search',
+  components: { SearchAccount },
+  data () {
+    return {
+      target: 'account',
+      searchTargets: [
+        {
+          target: 'account',
+          label: 'Account'
+        }
+      ],
+      query: ''
+    }
+  },
+  computed: {
+    ...mapState({
+      loading: state => state.TimelineSpace.Contents.Search.loading,
+      loadingBackground: state => state.App.theme.wrapper_mask_color,
+      theme: (state) => {
+        return {
+          '--theme-background-color': state.App.theme.background_color,
+          '--theme-selected-background-color': state.App.theme.selected_background_color,
+          '--theme-primary-color': state.App.theme.primary_color
+        }
+      }
+    })
+  },
+  methods: {
+    search () {
+      switch (this.target) {
+        case 'account':
+          this.$store.dispatch('TimelineSpace/Contents/Search/Account/search', this.query)
+            .catch(() => {
+              this.$message({
+                message: 'Could not search',
+                type: 'error'
+              })
+            })
+          break
+        default:
+          break
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#search {
+  --theme-background-color: #ffffff;
+  --theme-selected-background-color: #f2f6fc;
+  --theme-primary-color: #303133;
+  --theme-border-color: #ebeef5;
+
+  border-top: 1px solid var(--theme-border-color);
+
+  .search-header {
+    background-color: var(--theme-selected-background-color);
+    padding: 8px 12px;
+
+    .search-target /deep/ {
+      float: left;
+      width: 20%;
+
+      .el-input__inner {
+        background-color: var(--theme-background-color);
+        border: none;
+        border-radius: 4px 0 0 4px;
+        color: var(--theme-primary-color);
+      }
+    }
+
+    .search-keyword {
+      float: left;
+      width: 80%;
+      background-color: var(--theme-background-color);
+      border: none;
+      border-radius: 0 4px 4px 0;
+      color: var(--theme-primary-color);
+      line-height: 40px;
+      height: 40px;
+      padding: 0 15px;
+      outline: 0;
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+  }
+}
+</style>

src/renderer/components/TimelineSpace/Contents/Search/Account.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="search_account">
+    <template v-for="account in results">
+      <user :user="account"></user>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import User from '../Cards/User'
+
+export default {
+  name: 'search-account',
+  components: { User },
+  computed: {
+    ...mapState({
+      results: state => state.TimelineSpace.Contents.Search.Account.results
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/renderer/components/TimelineSpace/HeaderMenu.vue

@@ -40,10 +40,13 @@ export default {
           this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Favourite')
           break
         case 'local':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'LocalTimeline')
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Local timeline')
           break
         case 'public':
-          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'PublicTimeline')
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Public timeline')
+          break
+        case 'search':
+          this.$store.commit('TimelineSpace/HeaderMenu/updateTitle', 'Search')
           break
         case 'lists':
           this.$store.dispatch('TimelineSpace/HeaderMenu/fetchList', this.$route.params.list_id)

src/renderer/components/TimelineSpace/SideMenu.vue

@@ -37,6 +37,10 @@
         <icon name="globe"></icon>
         <span>Public timeline</span>
       </el-menu-item>
+      <el-menu-item :index="`/${id()}/search`">
+        <icon name="search"></icon>
+        <span>Search</span>
+      </el-menu-item>
       <li class="el-menu-item menu-item-title">
         <icon name="list-ul"></icon>
         <span>Lists</span>

src/renderer/router/index.js

@@ -67,6 +67,11 @@ export default new Router({
               name: 'public',
               component: require('@/components/TimelineSpace/Contents/Public').default
             },
+            {
+              path: 'search',
+              name: 'search',
+              component: require('@/components/TimelineSpace/Contents/Search').default
+            },
             {
               path: 'lists/:list_id',
               name: 'lists',

src/renderer/store/TimelineSpace/Contents.js

@@ -4,6 +4,7 @@ import Notifications from './Contents/Notifications'
 import Favourites from './Contents/Favourites'
 import Local from './Contents/Local'
 import Public from './Contents/Public'
+import Search from './Contents/Search'
 import Lists from './Contents/Lists'
 import Cards from './Contents/Cards'
 
@@ -16,6 +17,7 @@ const Contents = {
     Favourites,
     Local,
     Public,
+    Search,
     Lists,
     Cards
   }

src/renderer/store/TimelineSpace/Contents/Search.js

@@ -0,0 +1,17 @@
+import Account from './Search/Account'
+
+const Search = {
+  namespaced: true,
+  modules: { Account },
+  state: {
+    loading: false
+  },
+  mutations: {
+    changeLoading (state, loading) {
+      state.loading = loading
+    }
+  },
+  actions: {}
+}
+
+export default Search

src/renderer/store/TimelineSpace/Contents/Search/Account.js

@@ -0,0 +1,33 @@
+import Mastodon from 'mastodon-api'
+
+const Account = {
+  namespaced: true,
+  state: {
+    results: []
+  },
+  mutations: {
+    updateResults (state, results) {
+      state.results = results
+    }
+  },
+  actions: {
+    search ({ state, commit, rootState }, query) {
+      return new Promise((resolve, reject) => {
+        commit('TimelineSpace/Contents/Search/changeLoading', true, { root: true })
+        const client = new Mastodon(
+          {
+            access_token: rootState.TimelineSpace.account.accessToken,
+            api_url: rootState.TimelineSpace.account.baseURL + '/api/v1'
+          })
+        client.get('/search', { q: query }, (err, data, res) => {
+          if (err) return reject(err)
+          commit('updateResults', data.accounts)
+          commit('TimelineSpace/Contents/Search/changeLoading', false, { root: true })
+          resolve(res)
+        })
+      })
+    }
+  }
+}
+
+export default Account