Improve API of Dialogs (action)

[jscti]

Using an actions dialog, the actions list only support a string of arrays .. 2 problems :

• That lead to ugly code where we have to get/match the selected action string ... where we would commonly have more complex objects (at least : {code/id , label} )
• even the cancel button returns its own label as the result ... ins't it exotic ?

Why don't have a basic approach like a good old HTML select option, with both label: string and value: any ?

Actual code, not very happy with it, especially the action().then:

const LESSON_TYPES = [{id:0, label: 'action_0_translation_key'}, {id:1, label: 'action_1_translation_key'}];

let options = {
    title: this.translate.instant('LESSON.START.TITTLE_TYPE'),
    cancelButtonText: this.translate.instant('GENERAL.CANCEL'),
    actions: LESSON_TYPES.map(i => this.translate.instant('ACTION_TRANSLATION_FOR_KEY__' + i.label))
};

action(options).then((result) => {
    if (result !== this.translate.instant('GENERAL.CANCEL')) { // wtf ...
        selectedLesson = LESSON_TYPE.find(i => this.translate.instant('ACTION_TRANSLATION_FOR_KEY__' + i.label) === result);
    }
});

Code that would be so much better :

const LESSON_TYPES = [{id:0, label: 'action_0_translation_key'}, {id:1, label: 'action_1_translation_key'}];

let options = {
    title: this.translate.instant('LESSON.START.TITTLE_TYPE'),
    cancelButtonText: this.translate.instant('GENERAL.CANCEL'),
    actions: LESSON_TYPES,
    // if labelCallback is provided : call it on the action item. Else, directly action item (that should be a string)
    labelCallback : i => this.translate.instant('ACTION_TRANSLATION_FOR_KEY__' + i.label)
};

action(options).then((result) => {
    if (result) { // if dialog canceled, result should be null or something but not its own button label
        selectedLesson = result;
    }
});

[AchrafBardan]

Found a good solution:

const options: Record<string, any> = {
  'distance': 'Distance ascending',
  '-price': 'Price ascending',
}

Dialogs.action({
  message: 'Sort by',
  cancelButtonText: 'Cancel',
  actions: Object.values(options),
}).then((result) => {
  if (result) {
    const key = Object.keys(options).find(key => options[key] === result)
    console.log(key);
  }
});