update

components/tabs/BrowseTab.vue

@@ -67,8 +67,8 @@
           </span>
         </b-table-column>
         <b-table-column
-          field="english"
-          label="English"
+          field="translation"
+          label="Translation"
           v-slot="props"
           width="40vw"
         >
@@ -77,7 +77,7 @@
             @click="(ev) => onTableContextmenu(props.row, ev)"
             @contextmenu.prevent="(ev) => onTableContextmenu(props.row, ev)"
           >
-            <div v-for="it in props.row.english" :key="it">
+            <div v-for="it in props.row.translation" :key="it">
               {{ it }}
             </div>
           </span>
@@ -122,16 +122,16 @@
               placeholder="Must not be empty"
             ></b-input>
           </b-field>
-          <b-field label="English">
+          <b-field label="Translation">
             <template slot="label">
-              English
+              Translation
               <b-tooltip type="is-dark" label="New-line separated">
                 <b-icon size="is-small" icon="info-circle"></b-icon>
               </b-tooltip>
             </template>
             <b-input
-              :value="selected.english.join('\n')"
-              @input="(ev) => (selected.english = ev.trim().split('\n'))"
+              :value="selected.translation.join('\n')"
+              @input="(ev) => (selected.translation = ev.trim().split('\n'))"
               type="textarea"
               placeholder="Must not be empty"
             ></b-input>
@@ -179,7 +179,8 @@
     <ContextMenu
       :id="selected.id"
       ref="context"
-      :entry="selected.entry[0]"
+      :entry="selected.entry"
+      :list="selected.list"
       :type="selected.type || 'vocabulary'"
       :description="selected.description"
       source="extra"
@@ -193,6 +194,7 @@
 import { Component, Ref, Vue, Watch } from 'nuxt-property-decorator'
 import ContextMenu from '@/components/ContextMenu.vue'
 import { api, IEntry } from '~/assets/api'
+import { jsonClone } from '~/assets/util'
 
 @Component<BrowseTab>({
   components: {
@@ -220,11 +222,15 @@ export default class BrowseTab extends Vue {
     type: 'desc',
   }
 
-  selected: IEntry = {
+  selected: Omit<IEntry, 'entry'> & {
+    entry: string
+    list: string[]
+  } = {
     id: '',
-    entry: [],
+    entry: '',
+    list: [],
     reading: [],
-    english: [],
+    translation: [],
     type: 'vocabulary',
     description: '',
     tag: [],
@@ -257,8 +263,8 @@ export default class BrowseTab extends Vue {
         ]
       }
 
-      if (!this.selected.english.length) {
-        this.selected.english = await api
+      if (!this.selected.translation.length) {
+        this.selected.translation = await api
           .all_getMeaning({
             entry: this.selected.entry[0],
           })
@@ -292,9 +298,8 @@ export default class BrowseTab extends Vue {
   async doCreate() {
     const { id } = await api.extra_create({
       ...this.selected,
-      description: this.selected.description || '',
+      entry: this.selected.list,
     })
-
     this.selected.id = id
 
     await this.context.addToQuiz()
@@ -309,7 +314,7 @@ export default class BrowseTab extends Vue {
     if (id) {
       await api.extra_update({
         ...this.selected,
-        description: this.selected.description || '',
+        entry: this.selected.list,
         id,
       })
 
@@ -337,9 +342,10 @@ export default class BrowseTab extends Vue {
   onNewItem() {
     this.selected = {
       id: '',
-      entry: [],
+      entry: '',
+      list: [],
       reading: [],
-      english: [],
+      translation: [],
       type: 'vocabulary',
       description: '',
       tag: [],
@@ -351,7 +357,12 @@ export default class BrowseTab extends Vue {
   async onTableContextmenu(row: IEntry, evt: MouseEvent) {
     evt.preventDefault()
 
-    this.selected = JSON.parse(JSON.stringify(row))
+    const o = jsonClone(row)
+    this.selected = {
+      ...o,
+      entry: o.entry[0],
+      list: o.entry,
+    }
     this.context.open(evt)
   }
 

components/tabs/CharacterTab.vue

@@ -95,21 +95,25 @@
             </div>
           </b-collapse>
 
-          <b-collapse class="card" animation="slide" :open="!!english.length">
+          <b-collapse
+            class="card"
+            animation="slide"
+            :open="!!translation.length"
+          >
             <div
               slot="trigger"
               slot-scope="props"
               class="card-header"
               role="button"
             >
-              <h2 class="card-header-title">English</h2>
+              <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">
-              {{ english.join(' / ') }}
+              {{ translation.join(' / ') }}
             </div>
           </b-collapse>
 
@@ -222,7 +226,7 @@
 
                 <span class="pinyin">[{{ v.reading.join(' / ') }}]</span>
 
-                <span>{{ v.english.join(' / ') }}</span>
+                <span>{{ v.translation.join(' / ') }}</span>
               </div>
             </div>
           </b-collapse>
@@ -244,15 +248,15 @@
               <div v-for="(s, i) in sentences" :key="i" class="long-item">
                 <span
                   class="clickable"
-                  @click="(evt) => openContext(evt, s.entry, 'sentence')"
+                  @click="(evt) => openContext(evt, s.entry[0], 'sentence')"
                   @contextmenu.prevent="
-                    (evt) => openContext(evt, s.entry, 'sentence')
+                    (evt) => openContext(evt, s.entry[0], 'sentence')
                   "
                 >
-                  {{ s.entry }}
+                  {{ s.entry[0] }}
                 </span>
 
-                <span>{{ s.english }}</span>
+                <span>{{ s.translation[0] }}</span>
               </div>
             </div>
           </b-collapse>
@@ -304,7 +308,7 @@ export default class CharacterTab extends Vue {
   visual: string[] = []
 
   reading: string[] = []
-  english: string[] = []
+  translation: string[] = []
   tag: string[] = []
   level = 0
 
@@ -387,7 +391,7 @@ export default class CharacterTab extends Vue {
       this.visual = []
 
       this.reading = []
-      this.english = []
+      this.translation = []
       this.tag = []
       this.level = 0
       this.vocabulary_lookup = []
@@ -402,7 +406,7 @@ export default class CharacterTab extends Vue {
       this.variant = []
       this.visual = []
 
-      this.english = []
+      this.translation = []
       this.tag = []
       this.level = 0
       return
@@ -428,7 +432,7 @@ export default class CharacterTab extends Vue {
         })
 
         this.reading = r?.reading || []
-        this.english = r?.english || []
+        this.translation = r?.translation || []
         this.tag = r?.tag || []
         this.level = r?.level || 0
       })(),
@@ -443,6 +447,7 @@ export default class CharacterTab extends Vue {
 
     const { result } = await api.character_getVocabulary({
       entry: this.current,
+      distinct: 'id',
     })
 
     this.vocabulary_lookup = await Promise.all(
@@ -465,6 +470,7 @@ export default class CharacterTab extends Vue {
 
     const { result } = await api.character_getSentence({
       entry: this.current,
+      distinct: 'id',
     })
 
     this.vocabulary_lookup = await Promise.all(