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>