Filter: i18n

[denaldhushi]

Hi there,

I need the filter to be in the multiple languages, not only in English, as it is right now.
I tried to add i18n in filter in this way:
file: packages/toast-ui.grid/src/i18n/index.ts

const messages: OptI18nLanguage = {
  en: {
    display: {
      noData: 'No data.',
      loadingData: 'Loading data.',
      resizeHandleGuide:
        'You can change the width of the column by mouse drag, and initialize the width by double-clicking.',
      contain: 'Contains',
      eq: 'Equals',
      ne: 'Not equals',
      start: 'Starts with',
      end: 'Ends with',
      after: 'After',
      afterEq: 'After or Equal',
      before: 'Before',
      beforeEq: 'Before or Equal',
    },
....

file: packages/toast-ui.grid/src/helper/filter.ts

import i18n from '../i18n';
....
export const filterSelectOption: FilterSelectOption = {
  number: {
    eq: '=',
    lt: '<',
    gt: '>',
    lte: '<=',
    gte: '>=',
    ne: '!=',
  },
  text: {
    contain: i18n.get('display.contain'),
    eq: i18n.get('display.eq'),
    ne: i18n.get('display.ne'),
    start: i18n.get('display.start'),
    end: i18n.get('display.end'),
  },
  date: {
    eq: i18n.get('display.eq'),
    ne: i18n.get('display.ne'),
    after: i18n.get('display.after'),
    afterEq: i18n.get('display.afterEq'),
    before: i18n.get('display.before'),
    beforeEq: i18n.get('display.beforeEq'),
  },
};

file: packages/toast-ui.grid/types/options.d.ts

export interface OptI18nData {
  display?: {
    noData?: string;
    loadingData?: string;
    resizeHandleGuide?: string;
    contain?: string;
    eq?: string;
    ne?: string;
    start?: string;
    end?: string;
    after?: string;
    afterEq?: string;
    before?: string;
    beforeEq?: string;
  };

And it looks is working correct here..

but when I build it with: lerna run build --scope tui-grid
and I add the generated tui-grid.js file in my project, values that I added are in file, but the filters in UI are empty.
Can you see it when I am wrong or I have missing something please ?

[js87zz]

@denaldhushi
It looks like a timing problem. The text of the filter is set before i18n setup is completed. We need to improve it for supporting filter i18n properly. Thank you for your contributing!

[denaldhushi]

Do you have any update about that issue?

[js87zz]

@denaldhushi
Not yet..😓 Due to the ongoing with other projects, the new feature or bug fixes may be slow. If I start working on it, I will leave a comment.

[js87zz]

@denaldhushi
This i18n for filter has been added in v4.17.0. Thanks!

// our internal example 
const messages: OptI18nLanguage = {
  en: {
    // ...
    filter: {
      contains: 'Contains',
      eq: 'Equals',
      ne: 'Not equals',
      start: 'Starts with',
      end: 'Ends with',
      after: 'After',
      afterEq: 'After or Equal',
      before: 'Before',
      beforeEq: 'Before or Equal',
      apply: 'Apply',
      clear: 'Clear',
      selectAll: 'Select All',
      emptyValue: 'Empty Value',
    },
  },
}