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)
   }