fix: Fix the translation issue on conversation filter reload (#11513)
# Pull Request Template ## Description This PR fixes the translation inconsistency in the `<ConversationBasicFilter />` component, where dropdown options would revert to English after page reload. **Cause:** The component used static arrays for chat status and sort options, with translations initialized only once. After a reload, it showed system language (English) until the user's locale was fully loaded. **Solution:** Replaced static arrays with computed properties to make translations reactive. This ensures the options automatically update when the locale changes. ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? ### Loom video **Before** https://www.loom.com/share/eeac97c59b21480b95ef74813d3d7fa9?sid=0481994a-8d35-4c44-87d0-c6c5a77a54fd **After** https://www.loom.com/share/c1bdfbdb19ca4e37bda373f0fe12527a?sid=cb5b1d19-272b-48cb-967c-9a82c2a2b028 ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
This commit is contained in:
@@ -38,7 +38,7 @@ const currentSortBy = computed(() => {
|
|||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
const chatStatusOptions = [
|
const chatStatusOptions = computed(() => [
|
||||||
{
|
{
|
||||||
label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT'),
|
label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.open.TEXT'),
|
||||||
value: 'open',
|
value: 'open',
|
||||||
@@ -59,9 +59,9 @@ const chatStatusOptions = [
|
|||||||
label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.all.TEXT'),
|
label: t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.all.TEXT'),
|
||||||
value: 'all',
|
value: 'all',
|
||||||
},
|
},
|
||||||
];
|
]);
|
||||||
|
|
||||||
const chatSortOptions = [
|
const chatSortOptions = computed(() => [
|
||||||
{
|
{
|
||||||
label: t('CHAT_LIST.SORT_ORDER_ITEMS.last_activity_at_asc.TEXT'),
|
label: t('CHAT_LIST.SORT_ORDER_ITEMS.last_activity_at_asc.TEXT'),
|
||||||
value: 'last_activity_at_asc',
|
value: 'last_activity_at_asc',
|
||||||
@@ -94,15 +94,18 @@ const chatSortOptions = [
|
|||||||
label: t('CHAT_LIST.SORT_ORDER_ITEMS.waiting_since_desc.TEXT'),
|
label: t('CHAT_LIST.SORT_ORDER_ITEMS.waiting_since_desc.TEXT'),
|
||||||
value: 'waiting_since_desc',
|
value: 'waiting_since_desc',
|
||||||
},
|
},
|
||||||
];
|
]);
|
||||||
|
|
||||||
const activeChatStatusLabel = computed(
|
const activeChatStatusLabel = computed(
|
||||||
() =>
|
() =>
|
||||||
chatStatusOptions.find(m => m.value === chatStatusFilter.value)?.label || ''
|
chatStatusOptions.value.find(m => m.value === chatStatusFilter.value)
|
||||||
|
?.label || ''
|
||||||
);
|
);
|
||||||
|
|
||||||
const activeChatSortLabel = computed(
|
const activeChatSortLabel = computed(
|
||||||
() => chatSortOptions.find(m => m.value === chatSortFilter.value)?.label || ''
|
() =>
|
||||||
|
chatSortOptions.value.find(m => m.value === chatSortFilter.value)?.label ||
|
||||||
|
''
|
||||||
);
|
);
|
||||||
|
|
||||||
const saveSelectedFilter = (type, value) => {
|
const saveSelectedFilter = (type, value) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user