www/components/tabs/DictionaryTab.vue

<template>
  <section>
    <div class="CharacterTab">
      <form class="field" @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="control">
          <input
            v-model="q0"
            class="input"
            type="search"
            name="q"
            placeholder="Type here to search."
            aria-label="search"
          />
        </div>
      </form>

      <div class="columns">
        <div class="column is-6 entry-display">
          <div
            class="character-display clickable font-han"
            @click="(evt) => openContext(evt, entry)"
            @contextmenu.prevent="(evt) => openContext(evt, entry)"
          >
            {{ entry.entry }}
          </div>

          <div class="buttons has-addons">
            <button
              class="button"
              :disabled="i < 1"
              @click="i--"
              @keypress="i--"
            >
              Previous
            </button>
            <button
              class="button"
              :disabled="i > entries.length - 2"
              @click="i++"
              @keypress="i++"
            >
              Next
            </button>
          </div>

          <div v-if="entry.tag.length" class="mb-4">
            Tags:
            <b-taglist style="display: inline-flex">
              <b-tag v-for="t in tag.slice(0, 5)" :key="t" type="is-info">
                {{ t }}
              </b-tag>
            </b-taglist>
          </div>

          <div v-if="entry.level <= 60" class="mb-4">
            <b-taglist attached>
              <b-tag type="is-dark">Level</b-tag>
              <b-tag type="is-primary">
                {{ entry.level }}
              </b-tag>
            </b-taglist>
          </div>
        </div>

        <div class="column is-6">
          <b-collapse class="card" animation="slide" :open="false">
            <div
              slot="trigger"
              slot-scope="props"
              class="card-header"
              role="button"
            >
              <h2 class="card-header-title">Reading</h2>
              <a role="button" class="card-header-icon">
                <fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
              </a>
            </div>

            <div class="card-content">
              {{ entry.reading.join(' / ') }}
            </div>
          </b-collapse>

          <b-collapse
            class="card"
            animation="slide"
            :open="!!entry.translation.length"
          >
            <div
              slot="trigger"
              slot-scope="props"
              class="card-header"
              role="button"
            >
              <h2 class="card-header-title">Translation</h2>
              <a role="button" class="card-header-icon">
                <fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
              </a>
            </div>

            <div class="card-content">
              {{ entry.translation.join(' / ') }}
            </div>
          </b-collapse>

          <b-collapse
            v-if="!!entry.sub.length"
            class="card"
            animation="slide"
            :open="!!entry.sub.length"
          >
            <div
              slot="trigger"
              slot-scope="props"
              class="card-header"
              role="button"
            >
              <h2 class="card-header-title">Subcompositions</h2>
              <a role="button" class="card-header-icon">
                <fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
              </a>
            </div>

            <div class="card-content">
              <span
                v-for="h in entry.sub"
                :key="h"
                class="font-han clickable"
                @click="
                  (evt) => openContext(evt, { entry: h, type: 'character' })
                "
                @contextmenu.prevent="
                  (evt) => openContext(evt, { entry: h, type: 'character' })
                "
              >
                {{ h }}
              </span>
            </div>
          </b-collapse>

          <b-collapse
            v-if="!!entry.sub.length"
            class="card"
            animation="slide"
            :open="!!entry.sup.length"
          >
            <div
              slot="trigger"
              slot-scope="props"
              class="card-header"
              role="button"
            >
              <h2 class="card-header-title">Supercompositions</h2>
              <a role="button" class="card-header-icon">
                <fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
              </a>
            </div>

            <div class="card-content">
              <span
                v-for="h in entry.sup"
                :key="h"
                class="font-han clickable"
                @click="
                  (evt) => openContext(evt, { entry: h, type: 'character' })
                "
                @contextmenu.prevent="
                  (evt) => openContext(evt, { entry: h, type: 'character' })
                "
              >
                {{ h }}
              </span>
            </div>
          </b-collapse>

          <b-collapse
            v-if="!!entry.variant.length"
            class="card"
            animation="slide"
            :open="!!entry.variant.length"
          >
            <div
              slot="trigger"
              slot-scope="props"
              class="card-header"
              role="button"
            >
              <h2 class="card-header-title">Variants</h2>
              <a role="button" class="card-header-icon">
                <fontawesome :icon="props.open ? 'caret-down' : 'caret-up'" />
              </a>
            </div>

            <div class="card-content">
              <span
                v-for="h in entry.variant"
                :key="h"
                class="font-han clickable"
                @click="
                  (evt) => openContext(evt, { entry: h, type: 'character' })
                "
                @contextmenu.prevent="
                  (evt) => openContext(evt, { entry: h, type: 'character' })
                "
              >
                {{ h }}
              </span>
            </div>
          </b-collapse>
        </div>
      </div>
    </div>

    <ContextMenu
      ref="context"
      :entry="selected.entry"
      :audio="selected.audio"
      :type="selected.type"
      :additional="additionalContext"
    />
  </section>
</template>

<script lang="ts">
import { Component, Prop, Ref, Vue, Watch } from 'nuxt-property-decorator'
import ContextMenu from '@/components/ContextMenu.vue'
import { api, IDictionaryLookup, IEntryLookup, IType } from '~/assets/api'

type ILookupEntry = Omit<IDictionaryLookup, 'id'> & IEntryLookup

const makeLookupEntry = (
  entry = '',
  type: IType = 'vocabulary'
): ILookupEntry => {
  return {
    entry,
    list: [],
    type,
    reading: [],
    translation: [],
    audio: [],
    description: '',
    tag: [],
    sub: [],
    sup: [],
    variant: [],
    visual: [],
    amalgamation: [],
    component: [],
  }
}

@Component<LookupTab>({
  components: {
    ContextMenu,
  },
  async created() {
    this.$emit('title', this.title)

    this.q = this.query.q || ''

    if (this.additionalContext[0]) {
      await this.additionalContext[0].handler()
    }
  },
})
export default class LookupTab extends Vue {
  @Prop({ default: () => ({}) }) query!: {
    q?: string
    entry?: string
    type?: 'character' | 'vocabulary'
  }

  @Ref() context!: ContextMenu

  title = 'Lookup'

  entries: ILookupEntry[] = []
  i = 0

  lookup: Record<IType, IDictionaryLookup[]> = {
    character: [],
    vocabulary: [],
    sentence: [],
  }

  selected: {
    entry: string
    type: string
    audio?: ILookupEntry['audio']
  } = {
    entry: '',
    type: '',
  }

  q = ''
  q0 = ''

  get entry() {
    return this.entries[this.i] || makeLookupEntry()
  }

  get additionalContext() {
    if (!(this.q || '').trim()) {
      return [
        {
          name: 'Reload',
          handler: async () => {
            const { result } = await api.all_getRandom({ type: 'vocabulary' })
            this.q0 = result
          },
        },
      ]
    }

    return []
  }

  openContext(evt: MouseEvent, entry = this.selected) {
    this.selected = entry
    this.context.open(evt)
  }

  @Watch('q')
  async onQChange(q: string) {
    this.$emit('title', (q ? q + ' - ' : '') + this.title)
    this.entries = []

    if (q.trim()) {
      const r = await api.all_getQuery({
        q,
        type: this.query.type,
        distinct: 'id',
      })
      this.entries = r.result.map(({ entry, type }) =>
        makeLookupEntry(entry, type)
      )
    }

    this.i = 0
  }

  @Watch('entry.entry')
  load() {
    if (this.entry.entry) {
      this.loadComponents()
      this.loadVocabularies()
      this.loadSentences()
    } else {
      this.lookup = {
        character: [],
        vocabulary: [],
        sentence: [],
      }
    }
  }

  async loadComponents() {
    const entry = this.entries[this.i]
    if (!entry) return

    const [comp, dict] = await Promise.all([
      api.all_getComponent({
        entry: entry.entry,
        type: entry.type,
      }),
      api
        .all_getLookup({
          entry: entry.entry,
          type: entry.type,
          limit: 1,
        })
        .then(({ result: [r] }) => r),
    ])

    this.$set(this.entries, this.i, {
      ...(dict || {
        entry: entry.entry,
        list: [],
        type: entry.type,
        reading: [],
        translation: [],
        audio: [],
        description: '',
        tag: [],
      }),
      ...(comp || {
        sub: [],
        sup: [],
        variant: [],
        visual: [],
        amalgamation: [],
        component: [],
      }),
    } as ILookupEntry)
  }

  async loadVocabularies() {
    const entry = this.entries[this.i]
    if (!entry) return

    if (entry.type === 'character') {
      if (!/^\p{sc=Han}$/u.test(entry.entry)) {
        this.lookup.vocabulary = []
        return
      }

      this.lookup.vocabulary = await api
        .character_getVocabulary({
          entry: entry.entry,
          distinct: 'id',
        })
        .then((r) => r.result)
    } else {
      this.lookup.vocabulary = await api
        .vocabulary_getVocabulary({
          entry: entry.entry,
          distinct: 'id',
        })
        .then((r) => r.result)
    }
  }

  async loadSentences() {
    const entry = this.entries[this.i]
    if (!entry) return

    if (entry.type === 'character') {
      if (!/^\p{sc=Han}$/u.test(entry.entry)) {
        this.lookup.sentence = []
        return
      }

      this.lookup.sentence = await api
        .character_getSentence({
          entry: entry.entry,
          distinct: 'id',
        })
        .then((r) => r.result)
    } else {
      this.lookup.sentence = await api
        .vocabulary_getSentence({
          entry: entry.entry,
          distinct: 'id',
        })
        .then((r) => r.result)
    }
  }
}
</script>

<style scoped>
.entry-display {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.entry-display .clickable {
  min-height: 1.5em;
  display: block;
}

.card {
  margin-bottom: 1rem;
}

.card-content {
  max-height: 250px;
  overflow: scroll;
}

.card-content .font-han {
  font-size: 50px;
  display: inline-block;
}

.long-item > span + span {
  margin-left: 1rem;
}

.long-item > .pinyin {
  min-width: 8rem;
}
</style>