Files
nette-vite/src/scripts/components/Translation.vue
2022-02-23 21:12:23 +01:00

74 lines
2.8 KiB
Vue

<script>
export default {
props: ['data'],
computed: {
termsDataDict: function() {
let data = this.data.terms;
let ret = Object({});
for(let i = 0; i < data.length; i++) {
if (!Array.isArray(ret[data[i].string1])) ret[data[i].string1] = [];
ret[data[i].string1].push(data[i]);
}
return ret;
}
}
}
</script>
<template>
<div class="border-b dark:border-slate-600 shadow-sm overflow-hidden my-8">
<div class="flex flex-col justify-center">
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block py-2 min-w-full sm:px-6 lg:px-8">
<div class="overflow-hidden shadow-md sm:rounded-lg flex justify-center">
<table class="min-w-fit">
<thead class="bg-gray-100 dark:bg-gray-700">
<tr>
<th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
Výraz
</th>
<th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
Preklad
</th>
<th scope="col" class="py-3 px-6 text-xs font-medium tracking-wider text-left text-gray-700 uppercase dark:text-gray-400">
Člen
</th>
</tr>
</thead>
<tbody>
<tr v-for="(t, i) in data.terms" :key="i"
class="border-b odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700 dark:border-gray-600">
<td class="py-4 px-6 text-sm font-medium text-gray-900 whitespace-nowrap dark:text-white">
{{ t.string1 }}
</td>
<td class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
{{ t.string2 }}
</td>
<td class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400">
{{ t.member }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="border-b dark:border-slate-600 shadow-sm overflow-hidden my-8">
<div class="text-lg grid place-items-center">
Preklad
</div>
</div>
<div v-for="(t, i) in termsDataDict" :key="i">
{{ i }}
<div class="px-10">
<span v-for="(tt, n) in t" :key="n" class="bg-white">
{{ tt.string2 }},
</span>
</div>
</div>
</template>