fix: refs #4774 fix translation front
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
This commit is contained in:
parent
aa0b0d8317
commit
fc007921bd
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue