add search tab

components/ContextMenu.vue

@@ -44,17 +44,23 @@
         <a></a>
       </li>
       <li v-if="entry && type === 'vocabulary'">
-        <a role="button" @click="openInNewTab('Vocabulary', { entry })">
+        <a
+          role="button"
+          @click="openInNewTab('Dictionary', { entry, type: 'vocabulary' })"
+        >
           Show details
         </a>
       </li>
       <li v-if="entry">
-        <a role="button" @click="openInNewTab('Character', { q: entry })">
+        <a
+          role="button"
+          @click="openInNewTab('Dictionary', { entry, type: 'character' })"
+        >
           {{ type === 'character' ? 'Show details' : 'Search for Kanji' }}
         </a>
       </li>
       <li v-if="entry && type !== 'character'">
-        <a role="button" @click="openInNewTab('Vocabulary', { q: entry })">
+        <a role="button" @click="openInNewTab('Dictionary', { entry, type })">
           Search for vocabs
         </a>
       </li>

components/tabs/SearchTab.vue

@@ -0,0 +1,129 @@
+<template>
+  <section>
+    <div class="LibraryPage">
+      <form @submit.prevent="q = q0">
+        <label for="q" class="label">
+          Search
+          <b-tooltip label="How to?" position="is-right">
+            <a
+              href="https://github.com/zhquiz/zhquiz/wiki/How-to-search-or-filter"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <b-icon icon="info-circle"></b-icon>
+            </a>
+          </b-tooltip>
+        </label>
+        <div class="field">
+          <p class="control is-expanded">
+            <input
+              v-model="q0"
+              class="input"
+              type="search"
+              name="q"
+              placeholder="Type here to search"
+              aria-label="search"
+            />
+          </p>
+        </div>
+      </form>
+
+      <div class="columns mt-4">
+        <div class="column">
+          <section class="card">
+            <div class="card-content">
+              <b-table
+                paginated
+                backend-pagination
+                :total="count"
+                :per-page="perPage"
+                @page-change="(p) => (page = p)"
+                :data="result"
+              >
+                <b-table-column field="entry" label="Entry" v-slot="props">
+                  <span
+                    :class="'tag clickable is-medium '"
+                    @click.stop="
+                      (evt) => {
+                        selected = props.row
+                        $refs.context.open(evt)
+                      }
+                    "
+                    @contextmenu.prevent="
+                      (evt) => {
+                        selected = props.row
+                        $refs.context.open(evt)
+                      }
+                    "
+                  >
+                    {{ props.row.entry }}
+                  </span>
+                </b-table-column>
+                <b-table-column
+                  field="type"
+                  label="Type"
+                  width="100"
+                  v-slot="props"
+                >
+                  {{ props.row.type }}
+                </b-table-column>
+              </b-table>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+
+    <ContextMenu ref="context" :type="selected.type" :entry="selected.entry" />
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Watch } from 'nuxt-property-decorator'
+import { api } from '~/assets/api'
+import ContextMenu from '../ContextMenu.vue'
+
+@Component<SearchTab>({
+  components: {
+    ContextMenu,
+  },
+  created() {
+    this.$emit('title', 'Search')
+  },
+})
+export default class SearchTab extends Vue {
+  q = ''
+  q0 = ''
+
+  result: {
+    entry: string
+    type: string
+  }[] = []
+  count = 0
+  page = 1
+  perPage = 10
+
+  selected = {
+    entry: '',
+    type: 'vocabulary',
+  }
+
+  @Watch('q')
+  setQ() {
+    this.page = 1
+  }
+
+  @Watch('q')
+  @Watch('page')
+  async doSearch() {
+    const r = await api.all_getQuery({
+      q: this.q,
+      offset: (this.page - 1) * this.perPage,
+      limit: this.perPage,
+    })
+
+    this.result = r.result
+    this.count = r.count
+  }
+}
+</script>

pages/app.vue

@@ -115,7 +115,8 @@
 
 <script lang="ts">
 import BrowseTab from '@/components/tabs/BrowseTab.vue'
-import LookupTab from '@/components/tabs/LookupTab.vue'
+import SearchTab from '@/components/tabs/SearchTab.vue'
+import DictionaryTab from '@/components/tabs/DictionaryTab.vue'
 import LevelTab from '@/components/tabs/LevelTab.vue'
 import LibraryTab from '@/components/tabs/LibraryTab.vue'
 import { Component, Vue } from 'nuxt-property-decorator'
@@ -124,14 +125,15 @@ import { api } from '~/assets/api'
 @Component<AppPage>({
   components: {
     BrowseTab,
-    LookupTab,
+    SearchTab,
+    DictionaryTab,
     LevelTab,
     LibraryTab,
   },
   async mounted() {
     if (await api.setWanikaniApiKey()) {
       this.$accessor.ADD_TAB({
-        component: 'Lookup',
+        component: 'Search',
         first: true,
       })
       this.isReady = true
@@ -153,8 +155,11 @@ export default class AppPage extends Vue {
   }[] {
     return [
       {
-        title: 'Lookup',
+        component: 'Search',
-        component: 'Character',
+        icon: 'search',
+      },
+      {
+        component: 'Dictionary',
         text: '字',
         className: 'font-han',
       },