feat(app): add dynamic translation to agent detail form #311

Karvel · 2021-04-06T10:26:25Z

Changes

Purpose

The webapp should be able to load a form where a user can set translations for records with dynamic content. This form should disable the non-dynamic fields. It should load the selected language values when available. It should state the selected language in the form title to improve the UX.

setTranslation() does not yet send a request payload to the AgentService.

Approach

This branch puts the responsibility of setting up the dynamic content in the component that creates the form, in this case, AgentDetailComponent, rather than DynamicFormComponent. The only change to DynamicFormComponent was to translate formTitleParams when it is available.

Pre-Testing TODOs

Add the shims for the Agent list & details views.

Testing Steps

If you are not a member of this project, skip this step

Login (as at least an editor).
Go to the Agents view.
Click on "Add Agent" & confirm that the form is built properly.
Go back to the list view & "Update" a record.
Confirm that the form is built properly.
Choose a table row and click on the set translation button.
Choose and click on a language in the popover.
Confirm that a form view is loaded that has "Set Translation for Spanish" (if Spanish was selected) title.
Confirm that all of the form fields that do not require translated text in the translation form are disabled.
Confirm that only the "Description" field is enabled & has the required error message under the input wherever applicable (if the value is blank).
While in the "Set Translation" view, verify that the route looks like http://localhost:4200/content/set-translation/1/es-ES & that changing the language code to one that isn't supported by the application returns the user to the Agent list view.
For each of the above forms, verify that the title, labels, error messages, button are all displayed in the language selected at the top navigation. Change the language selection & verify that the forms react appropriately.

Closes #310.

…tion` route

…y `setTranslation` under the dynamicForm.action & adds translation for its value in all of the JSON files. Uses this new property to set the form submit button text when setting translation on an agent

…get()` if the fieldConfig is not for dynamicContent translation fields. Otherwise uses `group.control` to get the value of fields that requires translation

… is nested inside dynamicContent

pratimasakinala · 2021-04-07T13:59:29Z

.../infrastructure/shared/components/dynamic-form/components/form-input/form-input.component.ts

@@ -31,7 +31,9 @@ export class FormInputComponent implements OnInit {
  }

  public get formControl(): AbstractControl {
-    return this.group.get(this.config.name);
+    return this.config.name.split('.').length > 1


Is there a better way to implement this? I wasn't able to get the formControl using group.get when the config.name was a nested property type string like "dynamicContent.description"

pratimasakinala · 2021-04-07T13:59:56Z

src/app/infrastructure/models/translation/dynamic-form/title.ts

  signUp: string = 'dynamicForm.title.signUp';
  updateAgency: string = 'dynamicForm.title.updateAgency';
  updateAgent: string = 'dynamicForm.title.updateAgent';
  updateProfile: string = 'dynamicForm.title.updateProfile';
-  updateUser: string = 'dynamicForm.title.activateAccount';
+  updateUser: string = 'dynamicForm.title.updateUser';


Good catch!

mwallert · 2021-04-07T16:40:35Z

src/app/features/content/agents/agent-detail/agent-detail-smart.component.ts

@@ -54,19 +69,24 @@ export class AgentDetailSmartComponent implements OnInit {
  }

  public updateOrCreateAgent(): void {
-    return this.agent.id ? this.updateAgent() : this.createAgent();
+    if (this.isSetTranslation) {
+      this.setTranslation();


This function seems to just call this.buildPayload(), could we just call that here?

That functionality isn't in yet. The method is essentially noop right now. We decided to handle the mapping of the data into the payload in a separate branch so we could merge this while the API catches up.

@Karvel Got it, thank you!

…ranslation

mwallert

Changes look good to me, I think @pratimasakinala has better implementation context

pratimasakinala

Everything's working great! NIce job!

Karvel added this to the Translation - Sprint #5 milestone Apr 6, 2021

Karvel and others added 17 commits April 6, 2021 14:22

fix(title): reference correct value

ae28b68

feat(resolvers): initialize new agent object with dynamic content

e96b8a5

test(update-agent): add dependencies

cbc0150

style(app): reorder statements, clean up aliases

f8e78c6

feat(i18n, title): add setTranslation, translations

ed89044

feat, refactor(agents): use event emitter instead of state for trigger

f47e60c

feat(models, dynamic-form): add and bind formTitleParams to template

8f3a929

feat(agent-detail): add isSetTranslation boolean

fcd9e06

feat(agent-detail): disable form control based on isSetTranslation

029d44a

feat(agent-detail): update submit action based on conditions

7005891

feat(agent-detail): map selected language to form

482a80a

feat(agent-detail): set form name and params

8bcd2b1

test(agent-detail): add test dependencies

8fc1ca9

feat(content-routing): wire up set-translation/:id/:languageCode route

33f7580

refactor(agent): improve typing

930c0b8

feat(content, i18n): add translation for set-translation route name

742c463

refactor(content-routing): adds HasValidLanguageGuard to `set-transla…

b0ef512

…tion` route

pratimasakinala force-pushed the 310-ebg-add-dynamic-translation-to-agent-detail-form branch from ff36faa to b0ef512 Compare April 6, 2021 21:32

feat(agent-detail, dynamic-form-action, JSONs): creates a new propert…

35a5db9

…y `setTranslation` under the dynamicForm.action & adds translation for its value in all of the JSON files. Uses this new property to set the form submit button text when setting translation on an agent

pratimasakinala mentioned this pull request Apr 7, 2021

Translation Epic TS3 - Dynamic Form Config to support enabling/disabling translation on a field #270

Open

1 task

pratimasakinala added 2 commits April 7, 2021 06:33

refactor(form-input, form-select): reads formControl from the `group.…

e1607b7

…get()` if the fieldConfig is not for dynamicContent translation fields. Otherwise uses `group.control` to get the value of fields that requires translation

refactor(agent): removes description property from agent dto since it…

b8fb2a7

… is nested inside dynamicContent

pratimasakinala marked this pull request as ready for review April 7, 2021 13:56

pratimasakinala requested a review from mwallert as a code owner April 7, 2021 13:56

pratimasakinala requested review from a team, vinsonf and AramayisO and removed request for a team April 7, 2021 13:56

pratimasakinala requested review from a team and removed request for a team April 7, 2021 13:56

pratimasakinala reviewed Apr 7, 2021

View reviewed changes

pratimasakinala added feature New feature or change that directly affects users refactor Code changes underneath the hood; no difference in user experience labels Apr 7, 2021

mwallert reviewed Apr 7, 2021

View reviewed changes

pratimasakinala self-assigned this Apr 7, 2021

chore(agent-detail): adds TODO to send request to the server to set T…

b231e24

…ranslation

mwallert approved these changes Apr 7, 2021

View reviewed changes

pratimasakinala approved these changes Apr 8, 2021

View reviewed changes

pratimasakinala merged commit f26e384 into ps-locale-translation Apr 8, 2021

pratimasakinala deleted the 310-ebg-add-dynamic-translation-to-agent-detail-form branch April 8, 2021 13:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(app): add dynamic translation to agent detail form #311

feat(app): add dynamic translation to agent detail form #311

Karvel commented Apr 6, 2021 •

edited by pratimasakinala

Loading

pratimasakinala Apr 7, 2021

pratimasakinala Apr 7, 2021

mwallert Apr 7, 2021

Karvel Apr 7, 2021

mwallert Apr 7, 2021

mwallert left a comment

pratimasakinala left a comment

feat(app): add dynamic translation to agent detail form #311

feat(app): add dynamic translation to agent detail form #311

Conversation

Karvel commented Apr 6, 2021 • edited by pratimasakinala Loading

Changes

Purpose

Approach

Pre-Testing TODOs

Testing Steps

If you are not a member of this project, skip this step

pratimasakinala Apr 7, 2021

Choose a reason for hiding this comment

pratimasakinala Apr 7, 2021

Choose a reason for hiding this comment

mwallert Apr 7, 2021

Choose a reason for hiding this comment

Karvel Apr 7, 2021

Choose a reason for hiding this comment

mwallert Apr 7, 2021

Choose a reason for hiding this comment

mwallert left a comment

Choose a reason for hiding this comment

pratimasakinala left a comment

Choose a reason for hiding this comment

Karvel commented Apr 6, 2021 •

edited by pratimasakinala

Loading