Skip to content

Commit b17a83e

Browse files
khangonlthanhhieucweitat
authored
feature 8783: Implement rich text links in custom forms (#8957)
* feature-8783: Implement rich text links in custom forms * feature-8783: Implement rich text links in custom forms * feature-8783: Fix git comment * feature-8783: Fix comment * feature-8783: Fix comment * feature-8783: Fix comment * feature-8783: Fix comment * feature-8783: Implement rich text links in custom forms * feature-8783: Fix bug not show title on the screen order --------- Co-authored-by: lthanhhieu <lthanhhieu@tma.com.vn> Co-authored-by: cweitat <cweitat@gmail.com>
1 parent c35adf7 commit b17a83e

File tree

15 files changed

+726
-74
lines changed

15 files changed

+726
-74
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,23 @@ export default class AttendeeList extends Component {
8484
return groupBy(customFields, field => field.get('form'));
8585
}
8686

87+
prepareFieldId(fieldIdentifier, holderIndex, fieldIndex) {
88+
return `${fieldIdentifier}_${holderIndex}_${fieldIndex}`;
89+
}
90+
91+
get fieldNameConvertRichText() {
92+
const fields = orderBy(this.fields.toArray(), 'position');
93+
this.holders.forEach((holder, indexHolder) => {
94+
fields.forEach((field, index) => {
95+
const elem = document.getElementById(this.prepareFieldId(field.fieldIdentifier, indexHolder, index));
96+
if (elem) {
97+
elem.innerHTML = field.transName;
98+
}
99+
});
100+
});
101+
return null;
102+
}
103+
87104
@action
88105
toggleEditFields() {
89106
this.editFields = !this.editFields;

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -630,9 +630,7 @@ export default Component.extend(FormMixin, {
630630
if ((main_language && main_language.split('-')[0] === current_locale) || !field.translations || !field.translations.length) {
631631
field.transName = field.name;
632632
} else if (field.translations?.length) {
633-
634633
const transName = field.translations.filter(trans => trans.language_code.split('-')[0] === current_locale);
635-
636634
if (transName.length) {
637635
field.transName = transName[0].name;
638636
} else {
@@ -641,7 +639,6 @@ export default Component.extend(FormMixin, {
641639
} else {
642640
field.transName = field.name;
643641
}
644-
645642
return !isFixed;
646643
}), ['position']);
647644
return groupBy(requiredFixed.concat(customFields), field => field.get('form'));
@@ -664,6 +661,23 @@ export default Component.extend(FormMixin, {
664661
return 'hello';
665662
},
666663

664+
prepareFieldId(fieldIdentifier, holderIndex, fieldIndex) {
665+
return `${fieldIdentifier}_${holderIndex}_${fieldIndex}`;
666+
},
667+
668+
get fieldNameConvertRichText() {
669+
const fields = orderBy(this.fields.toArray(), 'position');
670+
this.holders.forEach((holder, indexHolder) => {
671+
fields.forEach((field, index) => {
672+
const elem = document.getElementById(this.prepareFieldId(field.fieldIdentifier, indexHolder, index));
673+
if (elem) {
674+
elem.innerHTML = field.transName;
675+
}
676+
});
677+
});
678+
return null;
679+
},
680+
667681
actions: {
668682
submit(data) {
669683
this.onValid(() => {

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

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
1-
{{#if (not-eq @type "number")}}
2-
<div style="width: 30%">
3-
<Input type="text" placeholder={{t "Field Name"}} @value={{@data.name}}/>
1+
{{#if (eq @type "number")}}
2+
<div class="rich-text-type-number" >
3+
<Widgets::Forms::RichTextLink
4+
@value={{@data.name}}/>
45
</div>
56
{{else}}
6-
<div style="width: 20%">
7-
<Input type="text" placeholder={{t "Field Name"}} @value={{@data.name}}/>
7+
<div class="rich-text-other" >
8+
<Widgets::Forms::RichTextLink
9+
@value={{@data.name}}/>
810
</div>
911
{{/if}}
10-
<UiDropdown class="ui selection dropdown custom-form-dropdown-attendee"
11-
@selected={{@data.selectedLang}}
12-
@onChange={{action 'onChangeLanguage' }}>
13-
<div class="default text">
14-
{{ @data.selectedLang }}
15-
</div>
16-
<i class="dropdown icon"></i>
17-
<div class="menu">
18-
{{#each this.languageList as |language|}}
19-
<div class="item" data-value={{language.code}}>{{language.name}}</div>
20-
{{/each}}
21-
</div>
22-
</UiDropdown>
23-
<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' ))}}>
24-
<i class="trash box icon"></i>
25-
</button>
12+
<div style="width: 11rem">
13+
<div class="ui hidden divider wrapper-button"></div>
14+
<UiDropdown class="ui selection dropdown custom-form-dropdown-attendee"
15+
@selected={{@data.selectedLang}}
16+
@onChange={{action 'onChangeLanguage'}}
17+
style="line-height: inherit; min-width: 11rem;">
18+
<div class="default text">
19+
{{ @data.selectedLang }}
20+
</div>
21+
<i class="dropdown icon"></i>
22+
<div class="menu">
23+
{{#each this.languageList as |language|}}
24+
<div class="item" data-value={{language.code}}>{{language.name}}</div>
25+
{{/each}}
26+
</div>
27+
</UiDropdown>
28+
</div>
29+
<div>
30+
<div class="ui hidden divider wrapper-button"></div>
31+
<button class="ui compact icon negative button btn-delele-lang" data-tooltip="{{t 'Delete'}}" {{action (confirm (t "Are you sure you want to delete this?") (action 'onRemoveForm' ))}}>
32+
<i class="trash box icon"></i>
33+
</button>
34+
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,14 @@
3030
</UiDropdown>
3131
{{/if}}
3232
{{#if (or (eq this.type "number") (eq this.type "year"))}}
33-
<div class="ui action input input-attendee-custom-form" style="width: 8%;">
33+
<div class="ui action input input-attendee-custom-form number-item">
3434
<Input
3535
@type="number"
3636
@name="min_price"
3737
placeholder={{t "Min"}}
3838
@value={{this.min}} />
3939
</div>
40-
<div class="ui action input input-attendee-custom-form" style="width: 8%;">
40+
<div class="ui action input input-attendee-custom-form number-item">
4141
<Input
4242
@type="number"
4343
@name="max_price"
@@ -71,7 +71,7 @@
7171
</div>
7272
<div style="display: flex; flex-direction: column">
7373
{{#each this.visibleForm as |sub|}}
74-
<div {{did-update this.updated @field}} class="ui action input sub" style="width: inherit; margin-top: 10px">
74+
<div {{did-update this.updated @field}} class="ui action input sub child-language">
7575
{{#unless sub.isDeleted }}
7676
<Forms::Wizard::CustomFormInputTranslation
7777
@data={{sub}}

‎app/components/forms/wizard/custom-form-rich-text.hbs‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<div class="ui hidden divider"></div>
2+
<div class="ui dividing">
3+
<i class="checkmark box icon"></i>
4+
<span class="content">
5+
{{t 'Add Custom Form Field'}}
6+
</span>
7+
</div>
8+
<div class="cf-container">
9+
<div {{did-update this.updated @field}} class="ui action input main number-text">
10+
{{#if (eq this.type "number")}}
11+
<div class="number-div">
12+
<Widgets::Forms::RichTextLink
13+
@value={{this.name}}/>
14+
</div>
15+
{{else}}
16+
<div class="other-div">
17+
<Widgets::Forms::RichTextLink
18+
@value={{this.name}}/>
19+
</div>
20+
{{/if}}
21+
<div class="lang-dropdown">
22+
<div class="ui hidden divider lang-dropdown-item"></div>
23+
{{#if (eq @form 'attendee')}}
24+
<UiDropdown
25+
class="ui selection dropdown custom-form-dropdown-attendee item-content"
26+
@selected={{this.mainLanguage}}
27+
@onChange={{action 'onMainLanguageChange'}}
28+
>
29+
<div class="default text">
30+
{{ this.mainLanguage }}
31+
</div>
32+
<i class="dropdown icon"></i>
33+
<div class="menu">
34+
{{#each this.languageList as |language|}}
35+
<div class="item" data-value={{language.code}}>{{language.name}}</div>
36+
{{/each}}
37+
</div>
38+
</UiDropdown>
39+
{{/if}}
40+
</div>
41+
<div>
42+
{{#if (eq this.type "number")}}
43+
<div class="ui hidden divider range-box"></div>
44+
<div class="number-wrapper">
45+
<Input
46+
@type="number"
47+
@name="min_price"
48+
placeholder={{t "Min"}} style="width: 5rem; line-height: 1.7rem"
49+
@value={{this.min}} />
50+
<Input
51+
@type="number"
52+
@name="max_price"
53+
placeholder={{t "Max"}} style="width: 5rem; line-height: 1.7rem"
54+
@value={{this.max}} />
55+
</div>
56+
{{/if}}
57+
</div>
58+
<div style="width: 11rem;">
59+
<div class="ui hidden divider" style="margin: 1.2rem 0rem;"></div>
60+
<UiDropdown
61+
class="ui selection dropdown custom-form-dropdown-attendee"
62+
@selected={{this.type}}
63+
@onChange={{action (mut this.type)}}
64+
style="line-height: inherit; min-width: 11rem">
65+
<div class="default text">
66+
{{ this.type }}
67+
</div>
68+
<i class="dropdown icon"></i>
69+
<div class="menu">
70+
<div class="item" data-value="text">{{t "Short Answer"}}</div>
71+
<div class="item" data-value="paragraph">{{t "Paragraph"}}</div>
72+
<div class="item" data-value="number">{{t "Number"}}</div>
73+
<div class="item" data-value="year">{{t "Year"}}</div>
74+
<div class="item" data-value="boolean">{{t "Yes/No"}}</div>
75+
</div>
76+
</UiDropdown>
77+
</div>
78+
<div>
79+
<div class="ui hidden divider wrapper-button"></div>
80+
{{#if (eq @form 'attendee')}}
81+
<button class="ui button btn-add-translate" {{action 'addTranslation'}} disabled={{this.disableAddTranslation}}>{{t 'Add Translation'}}</button>
82+
{{/if}}
83+
<button class="ui button btn-add-save" {{action 'addFormField'}} disabled={{not this.validIdentifier}}>{{if @field (t 'Save') (t 'Add')}}</button>
84+
</div>
85+
</div>
86+
</div>
87+
<div style="display: flex; flex-direction: column">
88+
{{#each this.visibleForm as |sub|}}
89+
<div {{did-update this.updated @field}} class="ui action input sub" style="width: inherit; margin-top: 10px">
90+
{{#unless sub.isDeleted }}
91+
<Forms::Wizard::CustomFormInputTranslation
92+
@data={{sub}}
93+
@type={{this.type}}
94+
@onRemoveTranslation={{action (mut sub.isDeleted) true}}
95+
@onChange={{action 'onChildChangeLanguage'}}/>
96+
{{/unless}}
97+
</div>
98+
{{/each}}
99+
</div>

0 commit comments

Comments
 (0)