Skip to content

Commit 37be669

Browse files
maryomaryo
committedNov 2, 2017
- Added FileInput component, formLayout WIP
- Fixed FormChoiceType missing multipart variable in case it contains multipart entry - Registration of components inside Collection component
·
v0.4.0v0.2.0
1 parent 1be3722 commit 37be669

File tree

7 files changed

+251
-19
lines changed

7 files changed

+251
-19
lines changed
 

‎Form/FormChoiceType.php

+4-1
Original file line numberDiff line numberDiff line change
@@ -47,13 +47,16 @@ public function configureOptions(OptionsResolver $resolver)
4747

4848
public function finishView(FormView $view, FormInterface $form, array $options)
4949
{
50-
parent::finishView($view, $form, $options);
5150
$builder = $form->getConfig()->getAttribute('builder');
5251

5352
foreach ($view[$options['choice_name']]->vars['choices'] as $choiceView) {
5453
$formChoiceForm = $this->createForm($builder, $this->resolveFormOptions($options, $choiceView->data));
5554
$formView = $formChoiceForm->setParent($form)->createView($view);
5655
$view[$options['choice_name']]->vars['forms'][$choiceView->value] = $formView;
56+
57+
if ($formView->vars['multipart']) {
58+
$view->vars['multipart'] = true;
59+
}
5760
}
5861
}
5962

‎Resources/assets/js/components/Collection.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {component} from 'jquery-ts-components';
1+
import {component, register} from 'jquery-ts-components';
22

33
@component('Collection')
44
export default class Collection
@@ -14,7 +14,7 @@ export default class Collection
1414
fade_in: false,
1515
fade_out: false,
1616
after_init: this.updateEntriesCount.bind(this),
17-
after_add: this.updateEntriesCount.bind(this),
17+
after_add: this.onAdd.bind(this),
1818
after_remove: this.updateEntriesCount.bind(this),
1919
drag_drop_options: {
2020
handle: '.collection-move',
@@ -37,6 +37,12 @@ export default class Collection
3737
return this.$body.find(this.settings.elements_selector!);
3838
}
3939

40+
private onAdd($collection: JQuery, $entry: JQuery): void
41+
{
42+
register($entry);
43+
this.updateEntriesCount();
44+
}
45+
4046
private updateEntriesCount(): void
4147
{
4248
this.$element.attr('data-entries-count', this.$entries.length);

‎Resources/assets/js/components/FileInput.ts

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import {component} from 'jquery-ts-components';
2+
3+
@component('FileInput')
4+
export default class FileInput
5+
{
6+
private $element: JQuery;
7+
private $input: JQuery;
8+
private inputPlaceholder: string;
9+
private inputText: string;
10+
private filename?: string;
11+
12+
public constructor(element: JQuery|HTMLFormElement|string)
13+
{
14+
this.$element = $(element);
15+
this.$input = this.$element.find('input');
16+
this.$input.on('change', this.showSelectedFiles.bind(this));
17+
this.inputPlaceholder = this.$element.data('inputPlaceholder') || 'Choose file…';
18+
this.inputText = this.$element.data('inputText') || '{{ filename }}';
19+
this.filename = this.$element.data('filename');
20+
this.showSelectedFiles();
21+
}
22+
23+
private get files(): File[]
24+
{
25+
const files = [];
26+
27+
for (const file of this.$input.prop('files')) {
28+
files.push(file);
29+
}
30+
31+
return files;
32+
}
33+
34+
private showSelectedFiles(): void
35+
{
36+
const filename = this.files.length
37+
? this.files.map((file: File) => file.name).join(', ')
38+
: this.filename;
39+
40+
if (filename == null) {
41+
this.$element.removeAttr('data-input-value');
42+
} else {
43+
const value = this.inputText
44+
.replace('{{ filename }}', filename)
45+
.replace('{{ count }}', this.files.length.toString());
46+
this.$element.attr('data-input-value', value);
47+
}
48+
}
49+
}

‎Resources/assets/js/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import '@vanio_web/js/components/Collection';
1111
import '@vanio_web/js/components/Confirm';
1212
import '@vanio_web/js/components/DatePicker';
1313
import '@vanio_web/js/components/Dropzone';
14+
import '@vanio_web/js/components/FileInput';
1415
import '@vanio_web/js/components/FormChoice';
1516
import '@vanio_web/js/components/Gallery';
1617
import '@vanio_web/js/components/Location';

‎Resources/translations/forms.cs.xlf

+79-9
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,88 @@
66
</header>
77

88
<body>
9-
<trans-unit id="2d8840721dd9ad7e1e964c8a4208be67" resname="uploadedImage.singleUploadMessage">
10-
<source>uploadedImage.singleUploadMessage</source>
9+
<trans-unit id="4dbf900de52108c823d85199c9a1fca3" resname="file.singleInputPlaceholder">
10+
<source>file.singleInputPlaceholder</source>
11+
<target>Vybrat soubor…</target>
12+
</trans-unit>
13+
14+
<trans-unit id="af99498061a4a97fc65cfe92751bc216" resname="file.multipleInputPlaceholder">
15+
<source>file.multipleInputPlaceholder</source>
16+
<target>Vybrat soubory…</target>
17+
</trans-unit>
18+
19+
<trans-unit id="39db8ee79f62ae33bdec400529163be8" resname="file.singleInputText">
20+
<source>file.singleInputText</source>
21+
<target>{{ filename }}</target>
22+
</trans-unit>
23+
24+
<trans-unit id="943fe2e8aa68b3a20e38fa5abf7dfe6d" resname="file.multipleInputText">
25+
<source>file.multipleInputText</source>
26+
<target>Vybráno {{ count }} souborů.</target>
27+
</trans-unit>
28+
29+
<trans-unit id="59b5858ffb2acef9ca16b27cf84591be" resname="file.singleButtonText">
30+
<source>file.singleButtonText</source>
31+
<target>Vybrat</target>
32+
</trans-unit>
33+
34+
<trans-unit id="5b0364559a5ce0296bb9d039760486dc" resname="file.multipleButtonText">
35+
<source>file.multipleButtonText</source>
36+
<target>Vybrat</target>
37+
</trans-unit>
38+
39+
<trans-unit id="cc227e7f6404891ae803708d2d09ede7" resname="image.singleInputPlaceholder">
40+
<source>image.singleInputPlaceholder</source>
41+
<target>Vybrat obrázek…</target>
42+
</trans-unit>
43+
44+
<trans-unit id="3d069c50b193102d5036f60bce097df5" resname="image.multipleInputPlaceholder">
45+
<source>image.multipleInputPlaceholder</source>
46+
<target>Vybrat obrázky…</target>
47+
</trans-unit>
48+
49+
<trans-unit id="f78a13d235d4c46a3126fa7ab258190d" resname="image.singleInputText">
50+
<source>image.singleInputText</source>
51+
<target>{{ filename }}</target>
52+
</trans-unit>
53+
54+
<trans-unit id="1358a06378d6361148d308e81bafa217" resname="image.multipleInputText">
55+
<source>image.multipleInputText</source>
56+
<target>Vybráno {{ count }} obrázků.</target>
57+
</trans-unit>
58+
59+
<trans-unit id="40bd38cc9a90fa906afbbefbfa99366e" resname="image.singleButtonText">
60+
<source>image.singleButtonText</source>
61+
<target>Vybrat</target>
62+
</trans-unit>
63+
64+
<trans-unit id="94d1e9e16186ddf1b4ff886c40ba6d03" resname="image.multipleButtonText">
65+
<source>image.multipleButtonText</source>
66+
<target>Vybrat</target>
67+
</trans-unit>
68+
69+
<trans-unit id="60d060204beda17eae9e7d7167c61903" resname="uploadedFile.singleUploadText">
70+
<source>uploadedFile.singleUploadText</source>
71+
<target>Soubory vyberete klepnutím nebo přetáhnutím zde.</target>
72+
</trans-unit>
73+
74+
<trans-unit id="6d3149c09c2300c5369e2f0bbe449326" resname="uploadedFile.multipleUploadText">
75+
<source>uploadedFile.multipleUploadText</source>
76+
<target>Soubory vyberete klepnutím nebo přetáhnutím zde.</target>
77+
</trans-unit>
78+
79+
<trans-unit id="4770bc7a07ec96686b14465dcd1d2891" resname="uploadedFile.invalidMessage">
80+
<source>uploadedFile.invalidMessage</source>
81+
<target>Neplatný typ souboru.</target>
82+
</trans-unit>
83+
84+
<trans-unit id="06b933a85601fa87bb5a0efa7c0cc78d" resname="uploadedImage.singleUploadText">
85+
<source>uploadedImage.singleUploadText</source>
1186
<target>Obrázek vyberete klepnutím nebo přetáhnutím zde.</target>
1287
</trans-unit>
1388

14-
<trans-unit id="8a5d91054f23f56dbd883dfac4ccb786" resname="uploadedImage.multipleUploadMessage">
15-
<source>uploadedImage.multipleUploadMessage</source>
89+
<trans-unit id="b84c6d74ed252e2a98ffe3f07fa979d0" resname="uploadedImage.multipleUploadText">
90+
<source>uploadedImage.multipleUploadText</source>
1691
<target>Obrázky vyberete klepnutím nebo přetáhnutím zde.</target>
1792
</trans-unit>
1893

@@ -21,11 +96,6 @@
2196
<target>Neplatný typ souboru. Vyberte obrázek.</target>
2297
</trans-unit>
2398

24-
<trans-unit id="6b1dd62fd62cb3bcf26d82f577b6e10b" resname="uploadedFile.multipleUploadMessage">
25-
<source>uploadedFile.multipleUploadMessage</source>
26-
<target>Soubory vyberete klepnutím nebo přetáhnutím zde.</target>
27-
</trans-unit>
28-
2999
<trans-unit id="781e72f9d79686d1595044d10ff136bb" resname="location.address">
30100
<source>location.address</source>
31101
<target>Adresa</target>

‎Resources/translations/forms.en.xlf

+74-4
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,86 @@
66
</header>
77

88
<body>
9-
<trans-unit id="2d8840721dd9ad7e1e964c8a4208be67" resname="uploadedImage.singleUploadMessage">
10-
<source>uploadedImage.singleUploadMessage</source>
9+
<trans-unit id="4dbf900de52108c823d85199c9a1fca3" resname="file.singleInputPlaceholder">
10+
<source>file.singleInputPlaceholder</source>
11+
<target>Choose file…</target>
12+
</trans-unit>
13+
14+
<trans-unit id="af99498061a4a97fc65cfe92751bc216" resname="file.multipleInputPlaceholder">
15+
<source>file.multipleInputPlaceholder</source>
16+
<target>Choose files…</target>
17+
</trans-unit>
18+
19+
<trans-unit id="39db8ee79f62ae33bdec400529163be8" resname="file.singleInputText">
20+
<source>file.singleInputText</source>
21+
<target>{{ filename }}</target>
22+
</trans-unit>
23+
24+
<trans-unit id="943fe2e8aa68b3a20e38fa5abf7dfe6d" resname="file.multipleInputText">
25+
<source>file.multipleInputText</source>
26+
<target>{{ count }} files selected.</target>
27+
</trans-unit>
28+
29+
<trans-unit id="59b5858ffb2acef9ca16b27cf84591be" resname="file.singleButtonText">
30+
<source>file.singleButtonText</source>
31+
<target>Choose</target>
32+
</trans-unit>
33+
34+
<trans-unit id="5b0364559a5ce0296bb9d039760486dc" resname="file.multipleButtonText">
35+
<source>file.multipleButtonText</source>
36+
<target>Choose</target>
37+
</trans-unit>
38+
39+
<trans-unit id="cc227e7f6404891ae803708d2d09ede7" resname="image.singleInputPlaceholder">
40+
<source>image.singleInputPlaceholder</source>
41+
<target>Choose image…</target>
42+
</trans-unit>
43+
44+
<trans-unit id="3d069c50b193102d5036f60bce097df5" resname="image.multipleInputPlaceholder">
45+
<source>image.multipleInputPlaceholder</source>
46+
<target>Choose images…</target>
47+
</trans-unit>
48+
49+
<trans-unit id="f78a13d235d4c46a3126fa7ab258190d" resname="image.singleInputText">
50+
<source>image.singleInputText</source>
51+
<target>{{ filename }}</target>
52+
</trans-unit>
53+
54+
<trans-unit id="1358a06378d6361148d308e81bafa217" resname="image.multipleInputText">
55+
<source>image.multipleInputText</source>
56+
<target>{{ count }} images selected.</target>
57+
</trans-unit>
58+
59+
<trans-unit id="60d060204beda17eae9e7d7167c61903" resname="uploadedFile.singleUploadText">
60+
<source>uploadedFile.singleUploadText</source>
61+
<target>Choose file by clicking or dropping here.</target>
62+
</trans-unit>
63+
64+
<trans-unit id="6d3149c09c2300c5369e2f0bbe449326" resname="uploadedFile.multipleUploadText">
65+
<source>uploadedFile.multipleUploadText</source>
66+
<target>Choose files by clicking or dropping here.</target>
67+
</trans-unit>
68+
69+
<trans-unit id="4770bc7a07ec96686b14465dcd1d2891" resname="uploadedFile.invalidMessage">
70+
<source>uploadedFile.invalidMessage</source>
71+
<target>Invalid file type.</target>
72+
</trans-unit>
73+
74+
<trans-unit id="06b933a85601fa87bb5a0efa7c0cc78d" resname="uploadedImage.singleUploadText">
75+
<source>uploadedImage.singleUploadText</source>
1176
<target>Choose image by clicking or dropping here.</target>
1277
</trans-unit>
1378

14-
<trans-unit id="8a5d91054f23f56dbd883dfac4ccb786" resname="uploadedImage.multipleUploadMessage">
15-
<source>uploadedImage.multipleUploadMessage</source>
79+
<trans-unit id="b84c6d74ed252e2a98ffe3f07fa979d0" resname="uploadedImage.multipleUploadText">
80+
<source>uploadedImage.multipleUploadText</source>
1681
<target>Choose images by clicking or dropping here.</target>
1782
</trans-unit>
1883

84+
<trans-unit id="524681ed7ce774d8b4d39a7a2dce7044" resname="uploadedImage.invalidMessage">
85+
<source>uploadedImage.invalidMessage</source>
86+
<target>Invalid file type. Choose an image.</target>
87+
</trans-unit>
88+
1989
<trans-unit id="781e72f9d79686d1595044d10ff136bb" resname="location.address">
2090
<source>location.address</source>
2191
<target>Address</target>

‎Resources/views/formLayout.html.twig

+36-3
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,39 @@
1515
</div>
1616
{% endblock %}
1717

18+
{% block file_widget %}
19+
<label
20+
class="custom-file form-control"
21+
data-input-placeholder="{{ inputPlaceholder ?? "file.#{attr.multiple is defined ? 'multiple' : 'single'}InputPlaceholder"|trans({}, translation_domain) }}"
22+
data-input-text="{{ inputText ?? "file.#{attr.multiple is defined ? 'multiple' : 'single'}InputText"|trans({}, translation_domain) }}"
23+
data-button-text="{{ buttonText ?? "file.#{attr.multiple is defined ? 'multiple' : 'single'}ButtonText"|trans({}, translation_domain) }}"
24+
data-component-file-input
25+
26+
{% if filename is defined ? filename is not empty : data is not empty %}
27+
data-filename="{{ filename ?? data.basename }}"
28+
{% endif %}
29+
>
30+
{{ form_widget(form) }}
31+
</label>
32+
{% endblock %}
33+
34+
{% block vanio_file_widget %}
35+
{{ form_widget(form.file, {
36+
filename: data ? data.metaData.name : null,
37+
inputPlaceholder: inputPlaceholder ?? null,
38+
inputText: inputText ?? null,
39+
buttonText: buttonText ?? null,
40+
}) }}
41+
{% endblock %}
42+
43+
{% block image_widget %}
44+
{{ form_widget(form, {
45+
inputPlaceholder: "image.#{multiple ? 'multiple' : 'single'}InputPlaceholder"|trans({}, translation_domain),
46+
inputText: "image.#{multiple ? 'multiple' : 'single'}InputText"|trans({}, translation_domain),
47+
buttonText: "image.#{multiple ? 'multiple' : 'single'}ButtonText"|trans({}, translation_domain),
48+
}) }}
49+
{% endblock %}
50+
1851
{% block uploaded_file_widget %}
1952
{% set files = {} %}
2053
{% for key, file in multiple ? data : (data ? [data] : []) %}
@@ -23,7 +56,7 @@
2356
name: file.metadata.name ?? file.file.basename,
2457
mime: file.metadata.mime ?? null,
2558
size: file.metadata.size,
26-
url: thumbnail_filter is defined ? url|imagine_filter(thumbnail_filter) : url,
59+
url: thumbnail_filter is not empty ? url|imagine_filter(thumbnail_filter) : url,
2760
key: key,
2861
status: 'uploaded',
2962
}} %}
@@ -39,7 +72,7 @@
3972
<div class="dropzone-widget" data-component-dropzone="{{ options|json_encode }}" data-dropzone-target="#{{ form.files.vars.id }}" data-dropzone-files="{{ files|json_encode }}">
4073
<div class="dz-message">
4174
<span class="icon"></span>
42-
<h4>{{ uploadMessage ?? "uploadedFile.#{multiple ? 'multiple' : 'single'}UploadMessage"|trans({}, translation_domain) }}</h4>
75+
<h4>{{ uploadText ?? "uploadedFile.#{multiple ? 'multiple' : 'single'}UploadText"|trans({}, translation_domain) }}</h4>
4376
</div>
4477
</div>
4578

@@ -48,7 +81,7 @@
4881

4982
{% block uploaded_image_widget %}
5083
{{ form_widget(form, {
51-
uploadMessage: "uploadedImage.#{multiple ? 'multiple' : 'single'}UploadMessage"|trans({}, translation_domain),
84+
uploadText: "uploadedImage.#{multiple ? 'multiple' : 'single'}UploadText"|trans({}, translation_domain),
5285
invalidMessage: "uploadedImage.invalidMessage"|trans({}, translation_domain),
5386
}) }}
5487
{% endblock %}

0 commit comments

Comments
 (0)
Please sign in to comment.