github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-02-15 16:05:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

Translation Strings Improvements (#13920)

Browse Source 
* fix translations string being null

* clean up watcher a bit

* add sort prop to list interface

* use sort for list interface in translation strings
This commit is contained in:
Azri Kahar
2022-06-16 23:30:34 +08:00
committed by GitHub
parent bd3bf347cc
commit 662a476236
5 changed files with 96 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/src/modules/settings/routes/translation-strings/translation-strings-drawer.vue
View File

@@ -47,7 +47,7 @@
</template>
<script lang="ts" setup>
import { ref, computed, watch } from 'vue';
import { ref, computed, watch, toRefs } from 'vue';
import { useI18n } from 'vue-i18n';
import { isEqual } from 'lodash';
import { Field, DeepPartial } from '@directus/shared/types';
@@ -64,6 +64,8 @@ const emit = defineEmits(['update:modelValue', 'savedKey']);
const { t } = useI18n();
const { translationString } = toRefs(props);
const confirmDelete = ref<boolean>(false);
const values = ref<TranslationString>({
@@ -79,7 +81,7 @@ const formValues = computed<TranslationString>({
values.value.key = val.key;
if (!val.translations) {
values.value.translations = null;
values.value.translations = val.translations;
return;
}
@@ -121,6 +123,7 @@ const fields = computed<DeepPartial<Field>[]>(() => {
options: {
placeholder: '$t:translation_string_translations_placeholder',
template: '{{ language }} {{ translation }}',
sort: 'language',
fields: [
{
field: 'language',
@@ -159,8 +162,8 @@ const fields = computed<DeepPartial<Field>[]>(() => {
const { translationStrings, updating, update } = useTranslationStrings();
watch(
() => props.translationString,
(newVal: TranslationString) => {
translationString,
(newVal: TranslationString | null) => {
values.value.key = newVal?.key ?? null;
values.value.translations = newVal?.translations ?? null;
initialValues.value.key = newVal?.key ?? null;

20
app/src/modules/settings/routes/translation-strings/translation-strings-tooltip.vue
View File

@@ -1,11 +1,11 @@
<template>
<ValueNull v-if="!displayedTranslation && !hideDisplayText" />
<div v-else class="translation-strings-display">
<span v-if="!hideDisplayText" class="translation-display-text">{{ displayedTranslation.translation }}</span>
<v-menu class="menu" show-arrow :disabled="!translations || translations.length === 0">
<span v-if="!hideDisplayText" class="translation-display-text">{{ displayedTranslation!.translation }}</span>
<v-menu class="menu" show-arrow :disabled="!sortedTranslations || sortedTranslations.length === 0">
<template #activator="{ toggle, deactivate, active }">
<v-icon
v-tooltip.bottom="translations && translations.length === 0 && t('no_translations')"
v-tooltip.bottom="sortedTranslations && sortedTranslations.length === 0 && t('no_translations')"
:small="!hideDisplayText"
class="icon"
:class="{ active }"
@@ -17,7 +17,7 @@
</template>
<v-list class="translations">
<v-list-item v-for="item in translations" :key="item.language">
<v-list-item v-for="item in sortedTranslations" :key="item.language">
<v-list-item-content>
<div class="header">
<div class="lang">
@@ -40,6 +40,7 @@ import { useI18n } from 'vue-i18n';
import { useUserStore } from '@/stores';
import ValueNull from '@/views/private/components/value-null';
import { TranslationString } from '@/composables/use-translation-strings';
import { sortBy } from 'lodash';
interface Props {
translations?: TranslationString['translations'];
@@ -48,18 +49,23 @@ interface Props {
const props = withDefaults(defineProps<Props>(), { translations: () => null, hideDisplayText: false });
const sortedTranslations = computed(() => {
if (!props.translations) return [];
return sortBy(props.translations, ['language']);
});
const { t } = useI18n();
const { currentUser } = useUserStore();
const displayedTranslation = computed(() => {
if (!props.translations || props.translations.length === 0) return null;
if (!sortedTranslations.value || sortedTranslations.value.length === 0) return null;
if (currentUser && 'id' in currentUser) {
return props.translations.find((val) => val.language === currentUser.language) ?? props.translations[0];
return sortedTranslations.value.find((val) => val.language === currentUser.language) ?? sortedTranslations.value[0];
}
return props.translations[0];
return sortedTranslations.value[0];
});
</script>