fix: refs #4774 fix translation front
gitea/salix-front/pipeline/pr-dev This commit looks good Details

This commit is contained in:
Carlos Satorres 2024-11-26 12:40:32 +01:00
parent aa0b0d8317
commit fc007921bd
2 changed files with 253 additions and 40 deletions

View File

@ -0,0 +1,220 @@
<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>

View File

@ -22,7 +22,7 @@ const columns = computed(() => [
{
align: 'left',
name: primaryKey,
label: t('primaryKey'),
label: primaryKey,
create: true,
},
{
@ -34,6 +34,7 @@ const columns = computed(() => [
align: 'left',
name: lang,
label: lang,
component: 'input',
},
{
align: 'right',
@ -77,30 +78,30 @@ const originalData = ref([]);
const url = computed(() => table.value?.tableName + 's');
async function loadTable(data) {
if (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('data: ', data);
if (data) originalData.value = data;
if (!lang.value) return;
const toFilter = JSON.parse(JSON.stringify(originalData.value));
console.log('toFilter: ', toFilter);
for (const currentData in newData) {
originalData.value.push({
[primaryKey.value]: currentData,
...newData[currentData],
});
tableRef.value.CrudModelRef.formData.push({
[primaryKey.value]: currentData,
...newData[currentData],
});
}
return;
const filtered = [];
for (const translation of toFilter) {
if (translation.lang != lang.value) continue;
translation[lang.value] = translation[field.value];
translation.en = originalData.value.find(
(o) => o.lang == 'en' && o[primaryKey.value] == translation[primaryKey.value]
)[field.value];
filtered.push(translation);
}
tableRef.value.CrudModelRef.formData = JSON.parse(JSON.stringify(originalData.value));
tableRef.value.CrudModelRef.formData = filtered;
// PENDIENTE
/*
Borrar por id (nativo de crudModel) y poner mensaje para si se quiieren borrar todas la traducciones (confirmar con Javi)
Para guardar, Setear el original data de crudmodel para saber cuando cambia
*/
}
function resetOriginalData() {
@ -108,6 +109,7 @@ function resetOriginalData() {
}
async function upsertI18n(data) {
console.log('data: ', data);
await axios.patch(url.value, {
[field.value]: data[lang.value],
[primaryKey.value]: data[primaryKey.value],
@ -163,7 +165,6 @@ async function removeLine(id) {
data-key="translations"
:url="url"
:columns="columns"
:filter="{ limit: 50 }"
:create="{
urlCreate: url,
title: 'Create translation',
@ -174,24 +175,16 @@ async function removeLine(id) {
@on-fetch="(data) => loadTable(data)"
:save-fn="upsertI18n"
:search-url="false"
:is-editable="true"
>
<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 }">
<VnSelect
:label="t('lang')"
v-model="data.lang"
:options="langs"
option-label="code"
option-value="code"
/>
<VnInput v-model="data[field]" :label="field" />
</template>
</VnTable>