4774-traducciones #853
|
|
@ -1,220 +0,0 @@
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue';
|
|
||||||
import { computed } from 'vue';
|
|
||||||
import { useI18n } from 'vue-i18n';
|
|
||||||
import VnTable from 'src/components/VnTable/VnTable.vue';
|
|
||||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
|
||||||
import axios from 'axios';
|
|
||||||
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
|
|
||||||
import FetchData from 'src/components/FetchData.vue';
|
|
||||||
import VnInput from 'src/components/common/VnInput.vue';
|
|
||||||
import { useVnConfirm } from 'composables/useVnConfirm';
|
|
||||||
const { openConfirmationModal } = useVnConfirm();
|
|
||||||
|
|
||||||
const { t } = useI18n();
|
|
||||||
const columns = computed(() => [
|
|
||||||
{
|
|
||||||
align: 'left',
|
|
||||||
name: 'id',
|
|
||||||
label: t('id'),
|
|
||||||
visible: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: 'left',
|
|
||||||
name: primaryKey,
|
|
||||||
label: t('primaryKey'),
|
|
||||||
create: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: 'left',
|
|
||||||
name: 'en',
|
|
||||||
label: t('defaultLang(en)'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: 'left',
|
|
||||||
name: lang,
|
|
||||||
label: lang,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
align: 'right',
|
|
||||||
label: '',
|
|
||||||
name: 'tableActions',
|
|
||||||
actions: [
|
|
||||||
{
|
|
||||||
title: t('View Summary'),
|
|
||||||
icon: 'save',
|
|
||||||
action: (row) => upsertI18n(row),
|
|
||||||
isPrimary: true,
|
|
||||||
disable: (row) => !row.hasChanges,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: t('globals.delete'),
|
|
||||||
icon: 'delete',
|
|
||||||
isPrimary: true,
|
|
||||||
action: (row) =>
|
|
||||||
openConfirmationModal(
|
|
||||||
t('You are going to delete this ticket purchase request'),
|
|
||||||
t(
|
|
||||||
'This ticket will be removed from ticket purchase requests! Continue anyway?'
|
|
||||||
),
|
|
||||||
() => removeLine(row.id)
|
|
||||||
),
|
|
||||||
|
|
||||||
disable: (row) => row.id,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const tableRef = ref({});
|
|
||||||
const langs = ref([]);
|
|
||||||
const tables = ref([]);
|
|
||||||
const lang = ref('es');
|
|
||||||
const primaryKey = computed(() => table.value.primaryKey);
|
|
||||||
const field = computed(() => table.value.field);
|
|
||||||
const table = ref();
|
|
||||||
const originalData = ref([]);
|
|
||||||
const url = computed(() => table.value?.tableName + 's');
|
|
||||||
|
|
||||||
async function loadTable(data) {
|
|
||||||
if (data) {
|
|
||||||
console.log('data: ', data);
|
|
||||||
originalData.value = [];
|
|
||||||
tableRef.value.CrudModelRef.formData = [];
|
|
||||||
const newData = {};
|
|
||||||
for (const translation of data) {
|
|
||||||
if (!newData[translation[primaryKey.value]])
|
|
||||||
newData[translation[primaryKey.value]] = {};
|
|
||||||
newData[translation[primaryKey.value]][translation.lang] =
|
|
||||||
translation[field.value];
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('newData: ', newData);
|
|
||||||
for (const currentData in newData) {
|
|
||||||
originalData.value.push({
|
|
||||||
[primaryKey.value]: currentData,
|
|
||||||
...newData[currentData],
|
|
||||||
});
|
|
||||||
tableRef.value.CrudModelRef.formData.push({
|
|
||||||
[primaryKey.value]: currentData,
|
|
||||||
...newData[currentData],
|
|
||||||
});
|
|
||||||
}
|
|
||||||
console.log(
|
|
||||||
'tableRef.value.CrudModelRef.formData: ',
|
|
||||||
tableRef.value.CrudModelRef.formData
|
|
||||||
);
|
|
||||||
console.log('newData: ', newData);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
tableRef.value.CrudModelRef.formData = JSON.parse(JSON.stringify(originalData.value));
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetOriginalData() {
|
|
||||||
originalData.value = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function upsertI18n(data) {
|
|
||||||
console.log('data: ', data);
|
|
||||||
await axios.patch(url.value, {
|
|
||||||
[field.value]: data[lang.value],
|
|
||||||
[primaryKey.value]: data[primaryKey.value],
|
|
||||||
lang: lang.value,
|
|
||||||
});
|
|
||||||
|
|
||||||
const index = originalData.value.findIndex(
|
|
||||||
(t) => t[primaryKey.value] == data[primaryKey.value]
|
|
||||||
);
|
|
||||||
originalData.value[index] = data;
|
|
||||||
data.hasChanges = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function removeLine(id) {
|
|
||||||
try {
|
|
||||||
console.log({ id }, 'eliminado');
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Error ', err);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<FetchData url="Languages" @on-fetch="(data) => (langs = data)" auto-load />
|
|
||||||
<FetchData
|
|
||||||
url="Applications/get-i18n-tables"
|
|
||||||
@on-fetch="(data) => (tables = data)"
|
|
||||||
auto-load
|
|
||||||
/>
|
|
||||||
<VnSubToolbar>
|
|
||||||
<template #st-data>
|
|
||||||
<VnSelect
|
|
||||||
:label="t('table')"
|
|
||||||
v-model="table"
|
|
||||||
:options="tables"
|
|
||||||
option-label="tableName"
|
|
||||||
option-value="tableName"
|
|
||||||
@update:model-value="resetOriginalData()"
|
|
||||||
:emit-value="false"
|
|
||||||
/>
|
|
||||||
<VnSelect
|
|
||||||
:label="t('lang')"
|
|
||||||
v-model="lang"
|
|
||||||
:options="langs"
|
|
||||||
option-label="code"
|
|
||||||
option-value="code"
|
|
||||||
@update:model-value="loadTable()"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</VnSubToolbar>
|
|
||||||
<VnTable
|
|
||||||
ref="tableRef"
|
|
||||||
data-key="translations"
|
|
||||||
:url="url"
|
|
||||||
:columns="columns"
|
|
||||||
:create="{
|
|
||||||
urlCreate: url,
|
|
||||||
title: 'Create translation',
|
|
||||||
onDataSaved: () => tableRef.reload(),
|
|
||||||
formInitialData: { lang: 'en' },
|
|
||||||
}"
|
|
||||||
:right-search="false"
|
|
||||||
@on-fetch="(data) => loadTable(data)"
|
|
||||||
:save-fn="upsertI18n"
|
|
||||||
:search-url="false"
|
|
||||||
>
|
|
||||||
<template #[`column-${lang}`]="{ row }">
|
|
||||||
<VnInput
|
|
||||||
v-model="row[lang]"
|
|
||||||
:clearable="false"
|
|
||||||
@keyup.enter="upsertI18n(row)"
|
|
||||||
@update:model-value="
|
|
||||||
(value) => {
|
|
||||||
row.hasChanges =
|
|
||||||
value !=
|
|
||||||
originalData.find((o) => o[primaryKey] == row[primaryKey])?.[
|
|
||||||
lang
|
|
||||||
];
|
|
||||||
}
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<template #more-create-dialog="{ data }">
|
|
||||||
<VnInput v-model="data[field]" :label="field" />
|
|
||||||
</template>
|
|
||||||
</VnTable>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<i18n>
|
|
||||||
es:
|
|
||||||
primaryKey: Clave primaria
|
|
||||||
defaultLang(en): Idioma por defecto(Eng)
|
|
||||||
secondLang: Idioma secundario
|
|
||||||
table: Tabla
|
|
||||||
lang: Idioma
|
|
||||||
en:
|
|
||||||
primaryKey: Primary key
|
|
||||||
defaultLang(en): Default language(Eng)
|
|
||||||
secondLang: Second language
|
|
||||||
table: Table
|
|
||||||
lang: Language
|
|
||||||
</i18n>
|
|
||||||
Loading…
Reference in New Issue