back translation

src/scripts/App.vue

@@ -65,7 +65,7 @@
           <input
             class="w-full border-2 border-gray-300 bg-white h-10 px-5 pr-16 rounded-lg text-sm focus:outline-none"
             ref="searchstr"
-            v-on:keyup.enter="search_dict"
+            v-on:keyup.enter="search_dict(this.$refs.searchstr.value)"
             type="search"
             name="search"
             placeholder="Výraz"
@@ -115,6 +115,7 @@
         :data="termsData"
         :type="currentIndex"
         :translation="currentTrans"
+        @search-term="searchTerm2"
       >
       </translation-content>
     </div>
@@ -167,14 +168,14 @@ export default {
       console.log(data.index)
       console.log(data.tab)
     },
-    search_dict() {
+    search_dict(term) {
       console.log(this.$refs.searchstr.value)
       console.log('SEARCH')
       var that = this
       axios
         .get('/api/v1/terms/', {
           params: {
-            string: this.$refs.searchstr.value,
+            string: term,
             translation: this.currentTrans,
           },
         })
@@ -192,11 +193,19 @@ export default {
           // always executed
         })
     },
+    searchTerm2(term) {
+      this.$refs.searchstr.value = term;
+      if (this.currentTrans % 2) {
+        this.switchTrans(parseInt(this.currentTrans) + 1);
+      } else {
+        this.switchTrans(parseInt(this.currentTrans) - 1);
+      }
+    },
     switchTrans(i) {
       if (this.currentTrans != i) {
-        this.currentTrans = i
-        this.search_dict()
-        console.log('TRANS switch = ', i)
+        this.currentTrans = i;
+        this.search_dict(this.$refs.searchstr.value);
+        console.log('TRANS switch = ', i);
       }
     },
   },

src/scripts/components/Translation.vue

@@ -4,6 +4,7 @@ import VueSound from './VueSound.vue'
 export default {
   props: ['data', 'type', 'translation'],
   components: { VueSound },
+  emits: [ 'search-term', ],  
   computed: {
     termsDataDict: function () {
       let data = this.data.terms
@@ -14,6 +15,16 @@ export default {
       }
       return ret
     },
+    termsDataDict2: function () {
+      let data = this.data.terms
+      let ret = Object({})
+      for (let i = 0; i < data.length; i++) {
+        if (!Array.isArray(ret[data[i].string2])) ret[data[i].string2] = []
+        ret[data[i].string2].push(data[i])
+      }
+      console.log(ret);
+      return ret
+    },
   },
 }
 </script>
@@ -90,7 +101,7 @@ export default {
     </div>
 
     <div class="md:w-1/2 sm:w-fit justify-center align-middle">
-      <div class="overflow-hidden shadow-md sm:rounded-lg mx-auto">
+      <div v-if="translation % 2" class="overflow-hidden shadow-md sm:rounded-lg mx-auto">
         <div
           v-for="(t, i) in termsDataDict"
           :key="i"
@@ -115,7 +126,7 @@ export default {
             </span>
           </span>
           <div class="px-10">
-            <span
+            <span @click='this.$emit("search-term", tt.string2)'
               v-for="(tt, n) in t"
               :key="n"
               class="text-sm text-gray-500 dark:text-gray-400"
@@ -125,6 +136,43 @@ export default {
           </div>
         </div>
       </div>
+      <div v-else class="overflow-hidden shadow-md sm:rounded-lg mx-auto">
+      <div
+          v-for="(t, i) in termsDataDict2"
+          :key="i"
+          class="border-b odd:bg-white even:bg-gray-50 p-2"
+        >
+          <span
+            class="text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white"
+            >{{ i }}
+          </span>
+          <div class="px-10">
+            <span
+              v-for="(tt, n) in t"
+              :key="n"
+              class="text-sm text-gray-500 dark:text-gray-400"
+            >
+              <span @click='this.$emit("search-term", tt.string1)'>{{ tt.string1 }}</span>
+              <span v-if="tt.pronunciations">
+                <span
+                  class="mx-1 text-sm font-bold"
+                  v-bind:class="{
+                    'text-green-800': i == 0,
+                    'text-blue-800': i == 1,
+                    'text-red-800': i == 3,
+                  }"
+                  v-for="(p, i) in tt.pronunciations"
+                  :key="i"
+                  >[{{ p.ipa }}]
+                  <vue-sound :src="p.filename"></vue-sound>
+                </span>
+              </span>
+                  
+              <span v-if="n != t.length - 1">, </span>
+            </span>
+          </div>
+      </div>
+      </div>
     </div>
   </div>