feature #20887 [Form] DateIntervalType: Allow to configure labels & enhance form theme (ogizanagi)
This PR was merged into the 3.3-dev branch.
Discussion
----------
[Form] DateIntervalType: Allow to configure labels & enhance form theme
| Q | A
| ------------- | ---
| Branch? | master
| Bug fix? | no
| New feature? | yes
| BC breaks? | no (unless someone relies on this non themed type)
| Deprecations? | no
| Tests pass? | yes
| Fixed tickets | N/A
| License | MIT
| Doc PR | Should document the new `labels` option
I just realized by using it for last fixes in #20886 and #20877 that this type was not really themed:
### before
<img width="861" alt="screenshot 2016-12-13 a 00 54 35" src="https://cloud.githubusercontent.com/assets/2211145/21121792/c589d27a-c0ce-11e6-8368-a396fda3bc7a.PNG">
At least labels should appear, but this also means being able to change them (thus the new `labels` option).
I think the form themes should provide a functional & minimalistic integration like this:
### after
<img width="862" alt="screenshot 2016-12-13 a 00 54 17" src="https://cloud.githubusercontent.com/assets/2211145/21121814/d9c4ead6-c0ce-11e6-94e1-41e6c14884a7.PNG">
---
(On screenshots above, I've only added a css rule to remove the 100% width of the `.table` class. See https://github.com/symfony/symfony/pull/20887#discussion_r92069557)
Commits
-------
bfd9e50bbb
[Form] DateIntervalType: Allow to configure labels & enhance form theme
This commit is contained in:
commit
df876b3044
@ -94,13 +94,32 @@
|
|||||||
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-inline')|trim}) -%}
|
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-inline')|trim}) -%}
|
||||||
<div {{ block('widget_container_attributes') }}>
|
<div {{ block('widget_container_attributes') }}>
|
||||||
{{- form_errors(form) -}}
|
{{- form_errors(form) -}}
|
||||||
{%- if with_years %}{{ form_widget(form.years) }}{% endif -%}
|
<div class="table-responsive">
|
||||||
{%- if with_months %}{{ form_widget(form.months) }}{% endif -%}
|
<table class="table {{ table_class|default('table-bordered table-condensed table-striped') }}">
|
||||||
{%- if with_weeks %}{{ form_widget(form.weeks) }}{% endif -%}
|
<thead>
|
||||||
{%- if with_days %}{{ form_widget(form.days) }}{% endif -%}
|
<tr>
|
||||||
{%- if with_hours %}{{ form_widget(form.hours) }}{% endif -%}
|
{%- if with_years %}<th>{{ form_label(form.years) }}</th>{% endif -%}
|
||||||
{%- if with_minutes %}{{ form_widget(form.minutes) }}{% endif -%}
|
{%- if with_months %}<th>{{ form_label(form.months) }}</th>{% endif -%}
|
||||||
{%- if with_seconds %}{{ form_widget(form.seconds) }}{% endif -%}
|
{%- if with_weeks %}<th>{{ form_label(form.weeks) }}</th>{% endif -%}
|
||||||
|
{%- if with_days %}<th>{{ form_label(form.days) }}</th>{% endif -%}
|
||||||
|
{%- if with_hours %}<th>{{ form_label(form.hours) }}</th>{% endif -%}
|
||||||
|
{%- if with_minutes %}<th>{{ form_label(form.minutes) }}</th>{% endif -%}
|
||||||
|
{%- if with_seconds %}<th>{{ form_label(form.seconds) }}</th>{% endif -%}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
{%- if with_years %}<td>{{ form_widget(form.years) }}</td>{% endif -%}
|
||||||
|
{%- if with_months %}<td>{{ form_widget(form.months) }}</td>{% endif -%}
|
||||||
|
{%- if with_weeks %}<td>{{ form_widget(form.weeks) }}</td>{% endif -%}
|
||||||
|
{%- if with_days %}<td>{{ form_widget(form.days) }}</td>{% endif -%}
|
||||||
|
{%- if with_hours %}<td>{{ form_widget(form.hours) }}</td>{% endif -%}
|
||||||
|
{%- if with_minutes %}<td>{{ form_widget(form.minutes) }}</td>{% endif -%}
|
||||||
|
{%- if with_seconds %}<td>{{ form_widget(form.seconds) }}</td>{% endif -%}
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
{%- if with_invert %}{{ form_widget(form.invert) }}{% endif -%}
|
{%- if with_invert %}{{ form_widget(form.invert) }}{% endif -%}
|
||||||
</div>
|
</div>
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
|
@ -136,13 +136,30 @@
|
|||||||
{%- else -%}
|
{%- else -%}
|
||||||
<div {{ block('widget_container_attributes') }}>
|
<div {{ block('widget_container_attributes') }}>
|
||||||
{{- form_errors(form) -}}
|
{{- form_errors(form) -}}
|
||||||
{%- if with_years %}{{ form_widget(form.years) }}{% endif -%}
|
<table class="{{ table_class|default('') }}">
|
||||||
{%- if with_months %}{{ form_widget(form.months) }}{% endif -%}
|
<thead>
|
||||||
{%- if with_weeks %}{{ form_widget(form.weeks) }}{% endif -%}
|
<tr>
|
||||||
{%- if with_days %}{{ form_widget(form.days) }}{% endif -%}
|
{%- if with_years %}<th>{{ form_label(form.years) }}</th>{% endif -%}
|
||||||
{%- if with_hours %}{{ form_widget(form.hours) }}{% endif -%}
|
{%- if with_months %}<th>{{ form_label(form.months) }}</th>{% endif -%}
|
||||||
{%- if with_minutes %}{{ form_widget(form.minutes) }}{% endif -%}
|
{%- if with_weeks %}<th>{{ form_label(form.weeks) }}</th>{% endif -%}
|
||||||
{%- if with_seconds %}{{ form_widget(form.seconds) }}{% endif -%}
|
{%- if with_days %}<th>{{ form_label(form.days) }}</th>{% endif -%}
|
||||||
|
{%- if with_hours %}<th>{{ form_label(form.hours) }}</th>{% endif -%}
|
||||||
|
{%- if with_minutes %}<th>{{ form_label(form.minutes) }}</th>{% endif -%}
|
||||||
|
{%- if with_seconds %}<th>{{ form_label(form.seconds) }}</th>{% endif -%}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
{%- if with_years %}<td>{{ form_widget(form.years) }}</td>{% endif -%}
|
||||||
|
{%- if with_months %}<td>{{ form_widget(form.months) }}</td>{% endif -%}
|
||||||
|
{%- if with_weeks %}<td>{{ form_widget(form.weeks) }}</td>{% endif -%}
|
||||||
|
{%- if with_days %}<td>{{ form_widget(form.days) }}</td>{% endif -%}
|
||||||
|
{%- if with_hours %}<td>{{ form_widget(form.hours) }}</td>{% endif -%}
|
||||||
|
{%- if with_minutes %}<td>{{ form_widget(form.minutes) }}</td>{% endif -%}
|
||||||
|
{%- if with_seconds %}<td>{{ form_widget(form.seconds) }}</td>{% endif -%}
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
{%- if with_invert %}{{ form_widget(form.invert) }}{% endif -%}
|
{%- if with_invert %}{{ form_widget(form.invert) }}{% endif -%}
|
||||||
</div>
|
</div>
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
|
@ -99,8 +99,10 @@ class DateIntervalType extends AbstractType
|
|||||||
$childOptions = array();
|
$childOptions = array();
|
||||||
foreach ($this->timeParts as $part) {
|
foreach ($this->timeParts as $part) {
|
||||||
if ($options['with_'.$part]) {
|
if ($options['with_'.$part]) {
|
||||||
$childOptions[$part] = array();
|
$childOptions[$part] = array(
|
||||||
$childOptions[$part]['error_bubbling'] = true;
|
'error_bubbling' => true,
|
||||||
|
'label' => $options['labels'][$part],
|
||||||
|
);
|
||||||
if ('choice' === $options['widget']) {
|
if ('choice' === $options['widget']) {
|
||||||
$childOptions[$part]['choice_translation_domain'] = false;
|
$childOptions[$part]['choice_translation_domain'] = false;
|
||||||
$childOptions[$part]['choices'] = $options[$part];
|
$childOptions[$part]['choices'] = $options[$part];
|
||||||
@ -131,6 +133,7 @@ class DateIntervalType extends AbstractType
|
|||||||
}
|
}
|
||||||
if ($options['with_invert']) {
|
if ($options['with_invert']) {
|
||||||
$builder->add('invert', 'Symfony\Component\Form\Extension\Core\Type\CheckboxType', array(
|
$builder->add('invert', 'Symfony\Component\Form\Extension\Core\Type\CheckboxType', array(
|
||||||
|
'label' => $options['labels']['invert'],
|
||||||
'error_bubbling' => true,
|
'error_bubbling' => true,
|
||||||
'required' => false,
|
'required' => false,
|
||||||
'translation_domain' => $options['translation_domain'],
|
'translation_domain' => $options['translation_domain'],
|
||||||
@ -192,6 +195,21 @@ class DateIntervalType extends AbstractType
|
|||||||
return array_fill_keys($timeParts, $placeholder);
|
return array_fill_keys($timeParts, $placeholder);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$labelsNormalizer = function (Options $options, array $labels) {
|
||||||
|
return array_replace(array(
|
||||||
|
'years' => null,
|
||||||
|
'months' => null,
|
||||||
|
'days' => null,
|
||||||
|
'weeks' => null,
|
||||||
|
'hours' => null,
|
||||||
|
'minutes' => null,
|
||||||
|
'seconds' => null,
|
||||||
|
'invert' => 'Negative interval',
|
||||||
|
), array_filter($labels, function ($label) {
|
||||||
|
return null !== $label;
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
$resolver->setDefaults(
|
$resolver->setDefaults(
|
||||||
array(
|
array(
|
||||||
'with_years' => true,
|
'with_years' => true,
|
||||||
@ -220,9 +238,11 @@ class DateIntervalType extends AbstractType
|
|||||||
// this option.
|
// this option.
|
||||||
'data_class' => null,
|
'data_class' => null,
|
||||||
'compound' => $compound,
|
'compound' => $compound,
|
||||||
|
'labels' => array(),
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
$resolver->setNormalizer('placeholder', $placeholderNormalizer);
|
$resolver->setNormalizer('placeholder', $placeholderNormalizer);
|
||||||
|
$resolver->setNormalizer('labels', $labelsNormalizer);
|
||||||
|
|
||||||
$resolver->setAllowedValues(
|
$resolver->setAllowedValues(
|
||||||
'input',
|
'input',
|
||||||
@ -260,6 +280,7 @@ class DateIntervalType extends AbstractType
|
|||||||
$resolver->setAllowedTypes('with_minutes', 'bool');
|
$resolver->setAllowedTypes('with_minutes', 'bool');
|
||||||
$resolver->setAllowedTypes('with_seconds', 'bool');
|
$resolver->setAllowedTypes('with_seconds', 'bool');
|
||||||
$resolver->setAllowedTypes('with_invert', 'bool');
|
$resolver->setAllowedTypes('with_invert', 'bool');
|
||||||
|
$resolver->setAllowedTypes('labels', 'array');
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -399,4 +399,53 @@ class DateIntervalTypeTest extends TestCase
|
|||||||
);
|
);
|
||||||
$this->assertFalse($form->get('invert')->getConfig()->getOption('required'));
|
$this->assertFalse($form->get('invert')->getConfig()->getOption('required'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public function testCanChangeTimeFieldsLabels()
|
||||||
|
{
|
||||||
|
$form = $this->factory->create(
|
||||||
|
DateIntervalType::class,
|
||||||
|
null,
|
||||||
|
array(
|
||||||
|
'required' => true,
|
||||||
|
'with_invert' => true,
|
||||||
|
'with_hours' => true,
|
||||||
|
'with_minutes' => true,
|
||||||
|
'with_seconds' => true,
|
||||||
|
'labels' => array(
|
||||||
|
'invert' => 'form.trans.invert',
|
||||||
|
'years' => 'form.trans.years',
|
||||||
|
'months' => 'form.trans.months',
|
||||||
|
'days' => 'form.trans.days',
|
||||||
|
'hours' => 'form.trans.hours',
|
||||||
|
'minutes' => 'form.trans.minutes',
|
||||||
|
'seconds' => 'form.trans.seconds',
|
||||||
|
),
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
$view = $form->createView();
|
||||||
|
$this->assertSame('form.trans.invert', $view['invert']->vars['label']);
|
||||||
|
$this->assertSame('form.trans.years', $view['years']->vars['label']);
|
||||||
|
$this->assertSame('form.trans.months', $view['months']->vars['label']);
|
||||||
|
$this->assertSame('form.trans.days', $view['days']->vars['label']);
|
||||||
|
$this->assertSame('form.trans.hours', $view['hours']->vars['label']);
|
||||||
|
$this->assertSame('form.trans.minutes', $view['minutes']->vars['label']);
|
||||||
|
$this->assertSame('form.trans.seconds', $view['seconds']->vars['label']);
|
||||||
|
}
|
||||||
|
|
||||||
|
public function testInvertDefaultLabel()
|
||||||
|
{
|
||||||
|
$form = $this->factory->create(DateIntervalType::class, null, array('with_invert' => true));
|
||||||
|
|
||||||
|
$view = $form->createView();
|
||||||
|
$this->assertSame('Negative interval', $view['invert']->vars['label']);
|
||||||
|
|
||||||
|
$form = $this->factory->create(DateIntervalType::class, null, array(
|
||||||
|
'with_invert' => true,
|
||||||
|
'labels' => array('invert' => null),
|
||||||
|
));
|
||||||
|
|
||||||
|
$view = $form->createView();
|
||||||
|
$this->assertSame('Negative interval', $view['invert']->vars['label']);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user