O3-1325: Ability to have arbitrary translations for labels in AMPATH forms.

[hadijahkyampeire]

Requirements

• This PR has a title that briefly describes the work done, including the ticket number if there is a ticket.

Summary

• Add support for i18n translation in our forms
• Apply translation support on form labels and placeholder
• Add some mock translations

Screenshots

Spanish

Kmer

French

Failure

• For some reason, the labels are not getting translated, it could be because of the nesting that is involved to get labels @ibacher @FlorianRappl please advise on how to apply translations to labels like Visit date , Provider etc

Issue

Ability to have arbitrary translations for labels in AMPATH forms

Other

• Branched off this PR to add more work i18n - Support i18n #4

[FlorianRappl]

I think a great change - only thing I do not yet understand is how the translations are loaded as the HTTP loader is not configured.

[hadijahkyampeire]

BTW @FlorianRappl this PR is not complete, it still has a hard-coded implementation that I need to remove, but I am not sure how to do that yet, do you have some pointers?

[ibacher]

This seems like a mistake no?

[hadijahkyampeire]

I think that is the correct one because it was throwing an error as input just so I used the same implementation we did on the form ofe-form and did the same for input and it stopped showing the error.

[ibacher]

So, ofe-number-input is a custom tag for the custom element defined here. I think this exists largely so we can match the carbon styling for numeric inputs. So we sue it above when a numeric input is being rendered (note the *ngSwitchCase="'number'"). This component, however, is a simple text input which shouldn't need additional styling and was just using the standard HTML input tag. If there were errors, we should figure why those errors occurred and fix them, because the numeric input styling is likely to look wrong for text inputs

[hadijahkyampeire]

Okay, I will look into that.

[hadijahkyampeire]

@ibacher this is the error when it is just input

[hadijahkyampeire]

theme seems to be causing the issue.

[hadijahkyampeire]

I have seen this in the main branch and I have seen another solution you mention for adding carbon design class, it is confusing when we should use ofe-number-input and when we need to use just input.

[ibacher]

The guiding rule here is that this section of the form-renderer.component.html is, in essence, a big switch statement that determines the tag based on the question, so in this context, each tag should only appear once.

In your screenshot, but not in the PR, I see you're missing the ofeTextInput that was there originally which is why you're seeing the error. ofeTextInput is the directive that adds the necessary styling to this element, including the theme attribute. If you just add that back in, the error should go away.

[hadijahkyampeire]

@ibacher I have added some screenshots.