Skip to content

Commit bedd612

Browse files
khangonnnhathunglthanhhieu
authored
feature-8980: Badge creation in wizard misses default options (#8994)
* feature-8980: Badge creation in wizard misses default options * feature-8980: Badge creation in wizard misses default options add options for font style * refactor code * feature-8980: Badge creation in wizard misses default options add font style as multiple choise * set default font style --------- Co-authored-by: nnhathung <[email protected]> Co-authored-by: lthanhhieu <[email protected]>
1 parent 60b41bb commit bedd612

File tree

6 files changed

+201
-51
lines changed

6 files changed

+201
-51
lines changed

‎app/components/forms/wizard/badge-field-form.js

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,16 @@ import { computed } from '@ember/object';
44
import { inject as service } from '@ember/service';
55
import FormMixin from 'open-event-frontend/mixins/form';
66
import { booleanTextType } from 'open-event-frontend/utils/dictionary/boolean_text_type';
7-
import { fieldFontName } from 'open-event-frontend/utils/dictionary/badge-field';
7+
import { fieldFontName, badgeFieldRotate, badgeFieldFontWeight, badgeFieldFontSize } from 'open-event-frontend/utils/dictionary/badge-field';
88

99
export default Component.extend(FormMixin, {
1010
router : service(),
1111
autoScrollToErrors : false,
1212
isExpanded : true,
1313
booleanTextType : orderBy(booleanTextType, 'position'),
14+
badgeFieldRotate : orderBy(badgeFieldRotate),
15+
badgeFieldFontWeight,
16+
badgeFieldFontSize,
1417

1518
getCustomFields: computed('includeCustomField', function() {
1619
const validForms = this.includeCustomField.map(item => {
@@ -89,6 +92,22 @@ export default Component.extend(FormMixin, {
8992
return orderBy(fieldFontName, 'name');
9093
},
9194

95+
get fontStyle() {
96+
let font_style = [];
97+
if (this.data.font_weight) {
98+
font_style = this.data.font_weight.map(item => item.name);
99+
}
100+
return font_style;
101+
},
102+
103+
get fontStyleSelected() {
104+
if (this.fontStyle.length > 0 ) {
105+
return this.fontStyle.join(', ')
106+
} else {
107+
return 'Normal'
108+
}
109+
},
110+
92111
actions: {
93112
toggleSetting() {
94113
if (!this.data.is_field_expanded) {
@@ -125,6 +144,19 @@ export default Component.extend(FormMixin, {
125144
},
126145
onChangeFontName(value) {
127146
this.set('data.font_name', value);
147+
},
148+
onChangeTextRotate(value) {
149+
this.set('data.text_rotation', value);
150+
},
151+
onChangeTextFontWeight(value) {
152+
if (this.data.font_weight == null) {
153+
this.set('data.font_weight', []);
154+
}
155+
if (this.data.font_weight.map(item => item.name).includes(value.name)) {
156+
this.data.font_weight.removeObject(this.data.font_weight.find(item => item.name === value.name));
157+
} else {
158+
this.data.font_weight.pushObject(value);
159+
}
128160
}
129161
}
130162
});

‎app/components/forms/wizard/badge-step.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ export default Component.extend(FormMixin, EventWizardMixin, {
246246
const data = {
247247
badgeForms: badge.badgeForms
248248
};
249-
const result = await this.loader.downloadFileWithPost('/badge-forms/preivew-badge-pdf', data, config);
249+
const result = await this.loader.downloadFileWithPost('/badge-forms/preview-badge-pdf', data, config);
250250
const anchor = document.createElement('a');
251251
anchor.style.display = 'none';
252252
anchor.href = URL.createObjectURL(new Blob([result], { type: 'application/pdf' }));

‎app/models/badge-field-form.js

Lines changed: 29 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,18 @@ export default ModelBase.extend({
1515
badge_id : attr('string'),
1616
field_identifier : attr('string'),
1717
custom_field : attr('string'),
18-
sample_text : attr('string'),
19-
font_size : attr('number'),
20-
font_name : attr('string'),
21-
font_color : attr('string'),
22-
text_rotation : attr('number'),
23-
margin_top : attr('number'),
24-
margin_bottom : attr('number'),
25-
margin_left : attr('number'),
26-
margin_right : attr('number'),
27-
font_weight : attr('number'),
18+
sample_text : attr('string', { defaultValue: 'Sample Text' }),
19+
font_size : attr('number', { defaultValue: 14 }),
20+
font_name : attr('string', { defaultValue: 'Arial' }),
21+
font_color : attr('string', { defaultValue: '#000000' }),
22+
text_rotation : attr('number', { defaultValue: 0 }),
23+
margin_top : attr('number', { defaultValue: 0 }),
24+
margin_bottom : attr('number', { defaultValue: 0 }),
25+
margin_left : attr('number', { defaultValue: 0 }),
26+
margin_right : attr('number', { defaultValue: 0 }),
27+
font_weight : attr(),
2828
text_alignment : attr('string', { defaultValue: 'center' }),
29-
text_type : attr('string'),
29+
text_type : attr('string', { defaultValue: 'None' }),
3030
is_deleted : attr('boolean'),
3131
qr_custom_field : attr(),
3232
is_field_expanded : attr('boolean', { defaultValue: true }),
@@ -37,12 +37,28 @@ export default ModelBase.extend({
3737
ticket : hasMany('ticket'),
3838

3939
getFieldStyle: computed('font_size', 'font_name', 'font_color', 'text_rotation', 'margin_top', 'margin_bottom', 'margin_left'
40-
, 'margin_right', 'font_weight', 'text_alignment', 'text_type', 'isDeleted', 'this', function() {
40+
, 'margin_right', 'font_weight.@each', 'text_alignment', 'text_type', 'isDeleted', 'this', function() {
4141
let font_name = fieldFontName.find(item => { return item.name === this.font_name});
4242
if (font_name) {
4343
font_name = font_name.value;
4444
}
45+
const font_weight = [];
46+
const font_style = [];
47+
const text_decoration = [];
48+
if (this.font_weight) {
49+
this.font_weight.forEach(element => {
50+
if (element.font_weight) {
51+
font_weight.addObject(element.font_weight);
52+
}
53+
if (element.font_style) {
54+
font_style.addObject(element.font_style);
55+
}
56+
if (element.text_decoration) {
57+
text_decoration.addObject(element.text_decoration);
58+
}
59+
});
60+
}
4561
return htmlSafe(
46-
'font-family: ' + font_name + '; font-size: ' + this.font_size + 'px; text-align: ' + this.text_alignment + '; text-transform: ' + this.text_type + '; color:' + this.font_color + '; font-weight:' + this.font_weight + '; -webkit-transform: rotate(' + this.text_rotation + 'deg); -moz-transform: rotate(' + this.text_rotation + 'deg); -o-transform: rotate(' + this.text_rotation + 'deg); writing-mode: lr-tb; margin-top:' + this.margin_top + 'mm; margin-bottom:' + this.margin_bottom + 'mm; margin-left:' + this.margin_left + 'mm; margin-right:' + this.margin_right + 'mm;');
62+
'font-family: ' + font_name + '; font-size: ' + this.font_size + 'px; text-align: ' + this.text_alignment + '; text-transform: ' + this.text_type + '; color:' + this.font_color + '; font-weight:' + font_weight.join(',') + '; font-style:' + font_style.join(',') + '; text-decoration: ' + text_decoration.join(',') + '; -webkit-transform: rotate(' + this.text_rotation + 'deg); -moz-transform: rotate(' + this.text_rotation + 'deg); -o-transform: rotate(' + this.text_rotation + 'deg); writing-mode: lr-tb; margin-top:' + this.margin_top + 'mm; margin-bottom:' + this.margin_bottom + 'mm; margin-left:' + this.margin_left + 'mm; margin-right:' + this.margin_right + 'mm;');
4763
})
4864
});

‎app/models/badge-form.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ export default ModelBase.extend({
1010
*/
1111
badgeID : attr('string'),
1212
isShowingSampleData : attr('boolean'),
13-
badgeSize : attr('string'),
13+
badgeSize : attr('string', { defaultValue: '4 x 6 inch (101.6 x 152.4 mm)' }),
1414
badgeColor : attr('string'),
1515
badgeImageUrl : attr('string'),
16-
badgeOrientation : attr('string'),
16+
badgeOrientation : attr('string', { defaultValue: 'Portrait' }),
1717
badgeQRFields : attr(),
1818
badgeFields : attr(),
1919
selectedImage : attr('string'),

‎app/templates/components/forms/wizard/badge-field-form.hbs

Lines changed: 52 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,15 @@
3838
@onChange={{action 'onChangeCustomField'}}>
3939
<Input @type="hidden" @autocomplete="no" @name={{concat "custom_field_" @data.badge_id "_" @index}}/>
4040
<i class="dropdown icon"></i>
41-
<div class="default text">{{t 'Custom field'}}</div>
41+
{{#if this.data.custom_field}}
42+
<div class="default">
43+
{{t this.data.custom_field}}
44+
</div>
45+
{{else}}
46+
<div class="default text">
47+
{{t 'Custom Field'}}
48+
</div>
49+
{{/if}}
4250
<div class="menu">
4351
{{#each this.getCustomFields as |cfield|}}
4452
{{#if cfield.isFixed}}
@@ -58,10 +66,6 @@
5866
{{#if this.getWarningFields}}
5967
{{#each this.getWarningFields as |warning|}}
6068
<label class="warning">{{warning-badge-ticket warning.field warning.ticket}}</label>
61-
{{!-- <UiPopup
62-
@tagName="i"
63-
@class="info circle icon"
64-
@content={{concat warning.field ' is not available in ticket ' warning.ticket }} /> --}}
6569
{{/each}}
6670
{{/if}}
6771
</div>
@@ -90,10 +94,6 @@
9094
{{#if this.getWarningQRFields}}
9195
{{#each this.getWarningQRFields as |warning|}}
9296
<label class="warning">{{concat '\'' warning.field '\' is not available in ticket \'' warning.ticket '\''}}</label>
93-
{{!-- <UiPopup
94-
@tagName="i"
95-
@class="info circle icon"
96-
@content={{concat warning.field ' is not available in ticket ' warning.ticket }} /> --}}
9797
{{/each}}
9898
{{/if}}
9999
</div>
@@ -120,40 +120,26 @@
120120
<div class="row pt-0">
121121
<div class="field four wide column mr--4">
122122
<label>{{t 'Top (mm)'}}</label>
123-
<Input @type='text' @placeholder="Top" @value={{mut @data.margin_top}} @name={{concat "margin_top_"
123+
<Input @type='number' @placeholder="Top" @value={{mut @data.margin_top}} @name={{concat "margin_top_"
124124
@data.badge_id "_" @index}} />
125125
</div>
126126
<div class="field four wide column mr--4">
127127
<label>{{t 'Left (mm)'}}</label>
128-
<Input @type='text' @placeholder="Left" @value={{mut @data.margin_left}} @name={{concat "margin_left_"
128+
<Input @type='number' @placeholder="Left" @value={{mut @data.margin_left}} @name={{concat "margin_left_"
129129
@data.badge_id "_" @index}} />
130130
</div>
131131
<div class="field four wide column mr--4">
132132
<label>{{t 'Right (mm)'}}</label>
133-
<Input @type='text' @placeholder="Right" @value={{mut @data.margin_right}} @name={{concat "margin_right_"
133+
<Input @type='number' @placeholder="Right" @value={{mut @data.margin_right}} @name={{concat "margin_right_"
134134
@data.badge_id "_" @index}} />
135135
</div>
136136
<div class="field four wide column mr--4">
137137
<label>{{t 'Bottom (mm)'}}</label>
138-
<Input @type='text' @placeholder="Bottom" @value={{mut @data.margin_bottom}} @name={{concat "margin_bottom_"
138+
<Input @type='number' @placeholder="Bottom" @value={{mut @data.margin_bottom}} @name={{concat "margin_bottom_"
139139
@data.badge_id "_" @index}} />
140140
</div>
141141
</div>
142142
</div>
143-
{{!-- <div class="ui stackable grid padding-left-1rem">
144-
<div class="field twelve wide">
145-
<label>{{t 'Text Alignment'}}</label>
146-
</div>
147-
</div>
148-
<div class="ui stackable grid padding-left-1rem">
149-
<div class="row pt-0 ml-4 mb-2">
150-
<div class="ui icon buttons">
151-
<button class="ui button" {{action 'toggleTextAlignments' 'Center' }} disabled={{if (eq
152-
@data.custom_field 'QR' ) true false}}>
153-
{{t 'Center'}}</button>
154-
</div>
155-
</div>
156-
</div> --}}
157143
{{#if (not-eq @data.custom_field 'QR') }}
158144
<div class="ui stackable grid padding-left-1rem">
159145
<div class="field twelve wide">
@@ -180,17 +166,38 @@
180166
</div>
181167
<div class="field six wide column">
182168
<label>{{t 'Font size (px)'}}</label>
183-
<Input @type='text' @placeholder="Font size" @value={{mut @data.font_size}} @name={{concat "font_size_"
184-
@data.badge_id "_" @index}} />
169+
<UiDropdown @class="search selection min-width-0" @selected={{@data.font_size}}
170+
@onChange={{action (mut @data.font_size) }}
171+
@allowAdditions={{true}} >
172+
<Input @type="number" @name={{concat "font_size_" @data.badge_id "_" @index}} @value={{mut @data.font_size}}/>
173+
<i class="dropdown icon"></i>
174+
<div class="default text">{{t 'Font size'}}</div>
175+
<div class="menu">
176+
{{#each this.badgeFieldFontSize as |item|}}
177+
<div class="item" data-value="{{item.value}}">
178+
{{item.value}}
179+
</div>
180+
{{/each}}
181+
</div>
182+
</UiDropdown>
185183
</div>
186184
</div>
187185
</div>
188186
<div class="ui stackable grid padding-left-1rem">
189187
<div class="row pt-0">
190188
<div class="field six wide column">
191-
<label>{{t 'Weight (bold)'}}</label>
192-
<Input @type='text' @placeholder="Weight" @value={{mut @data.font_weight}} @name={{concat "weight_"
193-
@data.badge_id "_" @index}} />
189+
<label>{{t 'Font Style'}}</label>
190+
<UiDropdown @class="search selection min-width-0">
191+
<div class="default">
192+
{{this.fontStyleSelected}}
193+
</div>
194+
<i class="dropdown icon"></i>
195+
<div class="menu">
196+
{{#each this.badgeFieldFontWeight as |item|}}
197+
<UiCheckbox @class="item" @label={{item.name}} @checked={{if (includes this.fontStyle item.name) 'active'}} @onChange={{action 'onChangeTextFontWeight' item }} />
198+
{{/each}}
199+
</div>
200+
</UiDropdown>
194201
</div>
195202
<div class="field six wide column">
196203
<label>{{t 'Text Transform'}}</label>
@@ -214,8 +221,19 @@
214221
<div class="row pt-0 pb-0">
215222
<div class="field six wide column">
216223
<label>{{t 'Text Rotate (deg)'}}</label>
217-
<Input @type='text' @placeholder="Text Rotate" @value={{mut @data.text_rotation}}
218-
@name={{concat "text_rotate_" @data.badge_id "_" @index}} />
224+
<UiDropdown @class="search selection min-width-0" @selected={{@data.text_rotation}}
225+
@onChange={{action 'onChangeTextRotate' }}>
226+
<Input @type="hidden" @autocomplete="no" @name={{concat "text_rotate_" @data.badge_id "_" @index}} />
227+
<i class="dropdown icon"></i>
228+
<div class="default text">{{t 'Text Rotate'}}</div>
229+
<div class="menu">
230+
{{#each this.badgeFieldRotate as |item|}}
231+
<div class="item" data-value="{{item.value}}">
232+
{{item.value}}
233+
</div>
234+
{{/each}}
235+
</div>
236+
</UiDropdown>
219237
</div>
220238
<div class="field six wide column font-color">
221239
<label>{{t 'Font Color'}}</label>

‎app/utils/dictionary/badge-field.ts

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,3 +84,87 @@ export const fieldFontName = [
8484
value : '"Kanit variant1", Tofu'
8585
}
8686
]
87+
88+
export const badgeFieldRotate = [
89+
{
90+
value: 0
91+
},
92+
{
93+
value: 45
94+
},
95+
{
96+
value: -45
97+
},
98+
{
99+
value: 90
100+
},
101+
{
102+
value: -90
103+
}
104+
];
105+
106+
export const badgeFieldFontWeight = [
107+
{
108+
name : 'Bold',
109+
font_weight : 'bold'
110+
},
111+
{
112+
name : 'Italic',
113+
font_style : 'italic'
114+
},
115+
{
116+
name : 'Underline',
117+
text_decoration : 'underline'
118+
}
119+
]
120+
121+
export const badgeFieldFontSize = [
122+
{
123+
value: 8
124+
},
125+
{
126+
value: 9
127+
},
128+
{
129+
value: 10
130+
},
131+
{
132+
value: 11
133+
},
134+
{
135+
value: 12
136+
},
137+
{
138+
value: 14
139+
},
140+
{
141+
value: 16
142+
},
143+
{
144+
value: 18
145+
},
146+
{
147+
value: 20
148+
},
149+
{
150+
value: 22
151+
},
152+
{
153+
value: 24
154+
},
155+
{
156+
value: 26
157+
},
158+
{
159+
value: 28
160+
},
161+
{
162+
value: 36
163+
},
164+
{
165+
value: 48
166+
},
167+
{
168+
value: 72
169+
}
170+
]

0 commit comments

Comments
 (0)