Skip to content

Commit 933684d

Browse files
Hieu Lam - TMAkhangoncweitat
authored
feature-8800: Make custom form question translatable by the organizer (#8836)
* feature-8800: Make custom form question translatable by the organizer * feature-8800: Make custom form question translatable by the organizer * feature-8800: Make custom form question translatable by the organizer * feature-8800: Make custom form question translatable by the organizer --------- Co-authored-by: Khang On - TMA <135116292+khangon@users.noreply.github.com> Co-authored-by: cweitat <cweitat@gmail.com>
1 parent 9ad5e98 commit 933684d

File tree

11 files changed

+350
-81
lines changed

11 files changed

+350
-81
lines changed

‎app/components/forms/orders/attendee-list.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,27 @@ export default class AttendeeList extends Component {
4747

4848
@computed('fields.@each.form')
4949
get allFields() {
50-
return groupBy(this.fields.toArray(), field => field.form);
50+
const current_locale = this.cookies.read('current_locale');
51+
return groupBy(this.fields.toArray(), field => {
52+
const { main_language } = field;
53+
54+
if ((main_language && main_language.split('-')[0] === current_locale) || !field.translations || !field.translations.length) {
55+
field.transName = field.name;
56+
} else if (field.translations?.length) {
57+
58+
const transName = field.translations.filter(trans => trans.language_code.split('-')[0] === current_locale);
59+
60+
if (transName.length) {
61+
field.transName = transName[0].name;
62+
} else {
63+
field.transName = field.name;
64+
}
65+
} else {
66+
field.transName = field.name;
67+
}
68+
69+
return field.form;
70+
});
5171
}
5272

5373
@action

‎app/components/forms/orders/order-form.js‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -629,10 +629,10 @@ export default Component.extend(FormMixin, {
629629
validationRules.fields[`instagram_required_${ index}`] = instagramRequiredValidation;
630630
validationRules.fields[`linkedin_${ index}`] = linkedinValidation;
631631
validationRules.fields[`linkedin_required_${ index}`] = linkedinRequiredValidation;
632-
validationRules.fields[`is_consent_of_refund_policy_required_${ index}`] = isConsentOfRefundPolicyValidation;
633-
validationRules.fields[`is_consent_form_field_${ index}`] = isConsentFormFieldValidation;
634632
validationRules.fields[`language_form_1_required_${ index}`] = languageForm1Validation;
635633
validationRules.fields[`language_form_2_required_${ index}`] = languageForm2Validation;
634+
validationRules.fields[`is_consent_form_field_required_${ index}`] = isConsentFormFieldValidation;
635+
validationRules.fields[`is_consent_of_refund_policy_required_${ index}`] = isConsentOfRefundPolicyValidation;
636636
this.allFields.attendee.filter(field => field.isComplex && field.isRequired).forEach(field => {
637637
validationRules.fields[`${field.fieldIdentifier}_required_${index}`] = {
638638
rules: [
@@ -649,20 +649,29 @@ export default Component.extend(FormMixin, {
649649
},
650650

651651
allFields: computed('fields', function() {
652-
let customFields = [];
653-
const requiredFixed = [];
654-
this.fields.forEach(field => {
655-
if (field.isFixed) {
656-
requiredFixed.push(field);
652+
const requiredFixed = this.fields.toArray()?.filter(field => field.isFixed);
653+
const current_locale = this.cookies.read('current_locale');
654+
655+
const customFields = orderBy(this.fields.toArray()?.filter(field => {
656+
const { isFixed, main_language } = field;
657+
658+
if ((main_language && main_language.split('-')[0] === current_locale) || !field.translations || !field.translations.length) {
659+
field.transName = field.name;
660+
} else if (field.translations?.length) {
661+
662+
const transName = field.translations.filter(trans => trans.language_code.split('-')[0] === current_locale);
663+
664+
if (transName.length) {
665+
field.transName = transName[0].name;
666+
} else {
667+
field.transName = field.name;
668+
}
657669
} else {
658-
customFields.push(field);
670+
field.transName = field.name;
659671
}
660-
field.nameConvert = field.name;
661-
if (field.name === 'Consent of refund policy') {
662-
field.nameConvert = 'I agree to the terms of the refund policy of the event.';
663-
}
664-
});
665-
customFields = orderBy(customFields, ['position']);
672+
673+
return !isFixed;
674+
}), ['position']);
666675
return groupBy(requiredFixed.concat(customFields), field => field.get('form'));
667676
}),
668677

@@ -674,6 +683,14 @@ export default Component.extend(FormMixin, {
674683
homeWikis : orderBy(homeWikis, 'item'),
675684
wikiScholarship : orderBy(wikiScholarship, 'position'),
676685

686+
currentLocale: computed('cookies.current_locale', function() {
687+
return this.cookies.read('current_locale');
688+
}),
689+
690+
getData() {
691+
return 'hello';
692+
},
693+
677694
actions: {
678695
submit(data) {
679696
this.onValid(() => {

‎app/components/forms/wizard/custom-form-input-translation.hbs‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div style="width: 30%">
2+
<Input type="text" placeholder={{t "Field Name"}} @value={{@data.name}}/>
3+
</div>
4+
<UiDropdown class="ui selection dropdown custom-form-dropdown-attendee"
5+
@selected={{@data.selectedLang}}
6+
@onChange={{action 'onChangeLanguage' }}>
7+
<div class="default text">
8+
{{ @data.selectedLang }}
9+
</div>
10+
<i class="dropdown icon"></i>
11+
<div class="menu">
12+
{{#each this.languageList as |language|}}
13+
<div class="item" data-value={{language.code}}>{{language.name}}</div>
14+
{{/each}}
15+
</div>
16+
</UiDropdown>
17+
<button style="font-size: 1.1em;" class="ui compact icon negative circular button" data-tooltip="{{t 'Delete'}}" {{action (confirm (t "Are you sure you want to delete this?") (action 'onRemoveForm' ))}}>
18+
<i class="trash box icon"></i>
19+
</button>

‎app/components/forms/wizard/custom-form-input-translation.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import Component from '@glimmer/component';
2+
import { action } from '@ember/object';
3+
4+
interface Args {
5+
onChange: ((code: string, value: string) => void) | null,
6+
onRemoveTranslation: ((field: object) => void) | null,
7+
data: any
8+
}
9+
10+
interface SubForm {
11+
code: string
12+
}
13+
14+
export default class CustomFormInputTranslation extends Component<Args> {
15+
self = this
16+
get languageList(): object[] {
17+
const { languages, ignoreLanguages, selectedLang } = this.args.data;
18+
return languages.filter((item: SubForm) =>
19+
item.code === selectedLang || !ignoreLanguages.includes(item.code)
20+
)
21+
}
22+
23+
@action
24+
onChangeLanguage(code: string) {
25+
if (this.args.onChange) {
26+
this.args.onChange(this.args.data, code)
27+
}
28+
}
29+
30+
@action
31+
onRemoveForm() {
32+
if (this.args.onRemoveTranslation) {
33+
this.args.onRemoveTranslation(this.args.data)
34+
}
35+
}
36+
}

‎app/components/forms/wizard/custom-form-input.hbs‎

Lines changed: 65 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,39 +5,72 @@
55
{{t 'Add Custom Form Field'}}
66
</span>
77
</div>
8-
<div {{did-update this.updated @field}} class="ui action input" style="width: inherit;">
9-
<Input type="text" placeholder={{t "Field Name"}} @value={{this.name}} style="width: 25%"/>
10-
{{#if (eq this.type "number")}}
11-
<div class="ui action input input-attendee-custom-form">
8+
<div style="display: flex; flex-direction: column">
9+
<div {{did-update this.updated @field}} class="ui action input main" style="width: inherit;">
10+
<div style="width: 30%">
11+
<Input type="text" placeholder={{t "Field Name"}} @value={{this.name}}/>
12+
</div>
13+
{{#if (eq this.type "number")}}
14+
<div class="ui action input input-attendee-custom-form">
15+
<Input
16+
@type="number"
17+
@name="min_price"
18+
placeholder={{t "Min"}}
19+
@value={{this.min}} />
20+
</div>
21+
<div class="ui action input input-attendee-custom-form">
1222
<Input
1323
@type="number"
14-
@name="min_price"
15-
placeholder={{t "Min"}}
16-
@value={{this.min}} />
17-
</div>
18-
<div class="ui action input input-attendee-custom-form">
19-
<Input
20-
@type="number"
21-
@name="max_price"
22-
placeholder={{t "Max"}}
23-
@value={{this.max}} />
24-
</div>
25-
{{/if}}
26-
<UiDropdown class="ui selection dropdown custom-form-dropdown-attendee" @selected={{this.type}} @onChange={{action (mut this.type)}}>
27-
<div class="default text">
28-
{{ this.type }}
29-
</div>
30-
<i class="dropdown icon"></i>
31-
<div class="menu">
32-
<div class="item" data-value="text">{{t "Short Answer"}}</div>
33-
<div class="item" data-value="paragraph">{{t "Paragraph"}}</div>
34-
<div class="item" data-value="number">{{t "Number"}}</div>
35-
<div class="item" data-value="year">{{t "Year"}}</div>
36-
<div class="item" data-value="boolean">{{t "Yes/No"}}</div>
37-
<div class="item" data-value="richtextlink">{{t "Rich Text Links"}}</div>
24+
@name="max_price"
25+
placeholder={{t "Max"}}
26+
@value={{this.max}} />
27+
</div>
28+
{{/if}}
29+
{{#if (eq @form 'attendee')}}
30+
<UiDropdown class="ui selection dropdown custom-form-dropdown-attendee" @selected={{this.mainLanguage}} @onChange={{action 'onMainLanguageChange' }}>
31+
<div class="default text">
32+
{{ this.mainLanguage }}
33+
</div>
34+
<i class="dropdown icon"></i>
35+
<div class="menu">
36+
{{#each this.languageList as |language|}}
37+
<div class="item" data-value={{language.code}}>{{language.name}}</div>
38+
{{/each}}
39+
</div>
40+
</UiDropdown>
41+
{{/if}}
42+
<UiDropdown class="ui selection dropdown custom-form-dropdown-attendee" @selected={{this.type}} @onChange={{action (mut this.type)}}>
43+
<div class="default text">
44+
{{ this.type }}
45+
</div>
46+
<i class="dropdown icon"></i>
47+
<div class="menu">
48+
<div class="item" data-value="text">{{t "Short Answer"}}</div>
49+
<div class="item" data-value="paragraph">{{t "Paragraph"}}</div>
50+
<div class="item" data-value="number">{{t "Number"}}</div>
51+
<div class="item" data-value="year">{{t "Year"}}</div>
52+
<div class="item" data-value="boolean">{{t "Yes/No"}}</div>
53+
<div class="item" data-value="richtextlink">{{t "Rich Text Links"}}</div>
54+
</div>
55+
</UiDropdown>
56+
<div>
57+
{{#if (eq @form 'attendee')}}
58+
<button class="ui button h-full" {{action 'addTranslation'}} disabled={{this.disableAddTranslation}}>{{t 'Add Translation'}}</button>
59+
{{/if}}
60+
<button class="ui button h-full" {{action 'addFormField'}} disabled={{not this.validIdentifier}}>{{if @field (t 'Save') (t 'Add')}}</button>
61+
</div>
62+
</div>
63+
</div>
64+
<div style="display: flex; flex-direction: column">
65+
{{#each this.visibleForm as |sub|}}
66+
<div {{did-update this.updated @field}} class="ui action input sub" style="width: inherit; margin-top: 10px">
67+
{{#unless sub.isDeleted }}
68+
<Forms::Wizard::CustomFormInputTranslation
69+
@data={{sub}}
70+
@onRemoveTranslation={{action (mut sub.isDeleted) true}}
71+
@onChange={{action 'onChildChangeLanguage'}}
72+
/>
73+
{{/unless}}
3874
</div>
39-
</UiDropdown>
40-
<div>
41-
<button class="ui button h-full" {{action 'addFormField'}} disabled={{not this.validIdentifier}}>{{if @field (t 'Save') (t 'Add')}}</button>
42-
</div>
75+
{{/each}}
4376
</div>

0 commit comments

Comments
 (0)