From d778a9d95e39db80b5595135483d9e8c0f16d2ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Wr=C3=B3blewski?= Date: Sun, 22 Sep 2024 22:26:55 +0200 Subject: [PATCH] wip --- src/Column/Type/FormColumnType.php | 3 + src/Resources/views/themes/base.html.twig | 519 +++++++++++------- .../views/themes/bootstrap_5.html.twig | 26 +- src/Twig/DataTableExtension.php | 320 +++++------ 4 files changed, 460 insertions(+), 408 deletions(-) diff --git a/src/Column/Type/FormColumnType.php b/src/Column/Type/FormColumnType.php index 5fe37b73..e8489cdc 100755 --- a/src/Column/Type/FormColumnType.php +++ b/src/Column/Type/FormColumnType.php @@ -9,6 +9,9 @@ use Symfony\Component\Form\FormInterface; use Symfony\Component\OptionsResolver\OptionsResolver; +/** + * @deprecated since 0.23, no replacement available + */ final class FormColumnType extends AbstractColumnType { public function buildValueView(ColumnValueView $view, ColumnInterface $column, array $options): void diff --git a/src/Resources/views/themes/base.html.twig b/src/Resources/views/themes/base.html.twig index dbf3afda..4f9b4414 100755 --- a/src/Resources/views/themes/base.html.twig +++ b/src/Resources/views/themes/base.html.twig @@ -1,30 +1,11 @@ {% trans_default_domain 'KreyuDataTable' %} {# Base HTML Theme #} +{# This theme is not meant to be used as is, but rather to be extended and ease creation of proper themes #} -{% block kreyu_data_table %} - {% set stimulus_controllers = ['kreyu--data-table-bundle--state'] %} - - {% if has_batch_actions %} - {% set stimulus_controllers = stimulus_controllers|merge(['kreyu--data-table-bundle--batch']) %} - {% endif %} - - - {{ block('action_bar') }} - {{ block('table') }} - - {% if pagination_enabled %} - {{ data_table_pagination(pagination) }} - {% endif %} - -{% endblock %} - -{% block kreyu_data_table_form_aware %} - {% set stimulus_controllers = ['kreyu--data-table-bundle--state'] %} +{% block data_table %} + {% set stimulus_controllers = stimulus_controllers ?? [] %} + {% set stimulus_controllers = stimulus_controllers|merge(['kreyu--data-table-bundle--state']) %} {% if has_batch_actions %} {% set stimulus_controllers = stimulus_controllers|merge(['kreyu--data-table-bundle--batch']) %} @@ -35,127 +16,78 @@ data-controller="{{ stimulus_controllers|join(' ') }}" data-kreyu--data-table-bundle--state-url-query-parameters-value="{{ url_query_parameters|default({})|json_encode }}" > - {{ block('action_bar') }} - - {{ form_start(form, form_variables) }} - {{ block('table') }} - {{ form_end(form, { render_rest: false }) }} + {{ block('action_bar', theme) }} + {{ block('table', theme) }} - {% if pagination_enabled %} + {% if pagination_enabled and pagination.vars.page_count > 1 %} {{ data_table_pagination(pagination) }} {% endif %} {% endblock %} -{% block kreyu_data_table_table %} - {{ block('table') }} -{% endblock %} - -{% block kreyu_data_table_action_bar %} - {{ block('action_bar') }} -{% endblock %} - -{% block action_bar %}{% endblock %} - {% block table %} - - {{ block('table_head') }} - {{ block('table_body') }} + + {{ block('table_head', theme) }} + {{ block('table_body', theme) }}
{% endblock %} {% block table_head %} - {{ block('table_head_row') }} -{% endblock %} - -{% block table_head_row %} - {{ data_table_header_row(header_row) }} + + {{ block('header_row', theme) }} + {% endblock %} {% block table_body %} - {{ block('table_body_row') }} + + {{ block('table_body_row', theme) }} + {% endblock %} {% block table_body_row %} - {% if value_rows|length > 0 %} - {{ block('table_body_row_results') }} - {% else %} - {{ block('table_body_row_no_results') }} - {% endif %} -{% endblock %} - -{% block table_body_row_results %} {% for value_row in value_rows %} - {{ data_table_value_row(value_row) }} + {{ block('value_row', theme) }} + {% else %} + {{ block('no_results_row', theme) }} {% endfor %} {% endblock %} -{% block table_body_row_no_results %} - - {{ 'No results found'|trans({}, 'KreyuDataTable') }} +{% block header_row %} + + {% for column_header in header_row %} + {{ data_table_column_header(column_header) }} + {% endfor %} {% endblock %} -{% block pagination %} - {{ data_table_pagination(pagination) }} -{% endblock %} - -{% block kreyu_data_table_header_row %} - - {% for column_header in row %} - {{- data_table_column_header(column_header) -}} +{% block value_row %} + + {% for column_value in value_row %} + {{ data_table_column_value(column_value) }} {% endfor %} {% endblock %} -{% block kreyu_data_table_value_row %} - {% for column_value in row %} - - {{- data_table_column_value(column_value) -}} +{% block no_results_row %} + + + {{ 'No results found'|trans({}, 'KreyuDataTable') }} - {% endfor %} -{% endblock %} - -{% block kreyu_data_table_column_label %} - {% if translation_domain is not same as false %} - {{- label|trans(translation_parameters, translation_domain) -}} - {% else %} - {{- label -}} - {% endif %} -{% endblock %} - -{% block kreyu_data_table_column_header %} - {{ block(block_name, block_theme ?? theme) }} -{% endblock %} - -{% block kreyu_data_table_column_value %} - {{ block(block_name, block_theme ?? theme) }} -{% endblock %} - -{% block kreyu_data_table_action %} - {% if visible %}{{- block(block_name, block_theme ?? theme) -}}{% endif %} -{% endblock %} - -{# Pagination #} - -{% block kreyu_data_table_pagination %} - {% if page_count > 1 %} - {{ block('pagination_widget', theme) }} - {% endif %} + {% endblock %} -{% block pagination_widget %} +{% block pagination %} {{ block('pagination_counters', theme) }} {{ block('pagination_controls', theme) }} {% endblock %} {% block pagination_controls %} {%- if has_previous_page -%} - {% with { path: data_table_pagination_url(data_table, 1) } %} + {% with { href: data_table_pagination_url(data_table, 1) } %} {{ block('pagination_first', theme) }} {% endwith %} - {% with { path: data_table_pagination_url(data_table, current_page_number - 1) } %} + {% with { href: data_table_pagination_url(data_table, current_page_number - 1) } %} {{ block('pagination_previous', theme) }} {% endwith %} {%- else -%} @@ -167,18 +99,18 @@ {% if page_number == current_page_number %} {{ block('pagination_page_active', theme) }} {% else %} - {% with { path: data_table_pagination_url(data_table, page_number) } %} + {% with { href: data_table_pagination_url(data_table, page_number) } %} {{ block('pagination_page', theme) }} {% endwith %} {% endif %} {% endfor %} {%- if has_next_page -%} - {% with { path: data_table_pagination_url(data_table, current_page_number + 1) } %} + {% with { href: data_table_pagination_url(data_table, current_page_number + 1) } %} {{ block('pagination_next', theme) }} {% endwith %} - {% with { path: data_table_pagination_url(data_table, page_count) } %} + {% with { href: data_table_pagination_url(data_table, page_count) } %} {{ block('pagination_last', theme) }} {% endwith %} {%- else -%} @@ -188,27 +120,25 @@ {% endblock %} {% block pagination_counters %} - + {{- block('pagination_counters_message', theme) -}} {% endblock %} -{% block pagination_counters_message %} - {{- 'Showing %current_page_first_item_index% - %current_page_last_item_index% of %total_item_count%'|trans({ - '%current_page_first_item_index%': current_page_first_item_index|number_format(0, '', ' '), - '%current_page_last_item_index%': current_page_last_item_index|number_format(0, '', ' '), - '%total_item_count%': total_item_count|number_format(0, '', ' ') - }, 'KreyuDataTable') -}} -{% endblock %} +{% block pagination_counters_message 'Showing %current_page_first_item_index% - %current_page_last_item_index% of %total_item_count%'|trans({ + '%current_page_first_item_index%': current_page_first_item_index|number_format(0, '', ' '), + '%current_page_last_item_index%': current_page_last_item_index|number_format(0, '', ' '), + '%total_item_count%': total_item_count|number_format(0, '', ' ') +}, 'KreyuDataTable') %} {% block pagination_page %} - + {{ block('pagination_page_message', theme) }} {% endblock %} {% block pagination_page_active %} - + {{ block('pagination_page_message', theme) }} {% endblock %} @@ -216,13 +146,13 @@ {% block pagination_page_message page_number %} {% block pagination_first %} - + {{ block('pagination_first_message', theme) }} {% endblock %} {% block pagination_first_disabled %} - + {{ block('pagination_first_message', theme) }} {% endblock %} @@ -230,51 +160,55 @@ {% block pagination_first_message '«' %} {% block pagination_previous %} - + {{ block('pagination_previous_message', theme) }} {% endblock %} {% block pagination_previous_disabled %} - {{ block('pagination_previous_message', theme) }} + + {{ block('pagination_previous_message', theme) }} + {% endblock %} {% block pagination_previous_message '‹' %} -{% block pagination_last %} - - {{ block('pagination_last_message', theme) }} +{% block pagination_next %} + + {{ block('pagination_next_message', theme) }} {% endblock %} -{% block pagination_last_disabled %} - {{ block('pagination_last_message', theme) }} +{% block pagination_next_disabled %} + + {{ block('pagination_next_message', theme) }} + {% endblock %} -{% block pagination_last_message '»' %} +{% block pagination_next_message '›' %} -{% block pagination_next %} - - {{ block('pagination_next_message', theme) }} +{% block pagination_last %} + + {{ block('pagination_last_message', theme) }} {% endblock %} -{% block pagination_next_disabled %} - {{ block('pagination_next_message', theme) }} +{% block pagination_last_disabled %} + + {{ block('pagination_last_message', theme) }} + {% endblock %} -{% block pagination_next_message '›' %} - -{# Filtration #} +{% block pagination_last_message '»' %} {% block kreyu_data_table_filters_form %} {% form_theme form with form_themes|default([_self]) %} - {{ form_start(form, { attr: { 'data-turbo-action': 'advance', 'data-turbo-frame': '_self', 'hidden': 'hidden' } }) }} + {{ form_start(form, { attr: { 'data-turbo-action': 'advance', 'data-turbo-frame': '_self', 'hidden': 'hidden' }|merge(form_attr ?? {}) }) }} {# This form should be empty - all its inputs should be on the outside, referenced using the "form" attribute #} {{ form_end(form, { render_rest: false }) }} - {% if form.count > 0 %} + {% if form is not empty %} {{ block('filtration_widget', theme) }} {% endif %} {% endblock %} @@ -307,71 +241,74 @@ {% endblock %} +{# Form Theme #} + {% block kreyu_data_table_date_range_widget %} {{ form_widget(form.from) }} {{ form_widget(form.to) }} {% endblock %} +{# TODO: Misc #} + +{% block action_bar %}{% endblock %} + {# Column type header templates #} +{% block column_label %} + {% if translation_domain is not same as false %} + {{- label|trans(translation_parameters, translation_domain) -}} + {% else %} + {{- label -}} + {% endif %} +{% endblock %} + {% block column_header %} - {% set label_attr = label_attr|default({}) %} + {% set label_attr = label_attr ?? {} %} {% if data_table.vars.sorting_enabled and sortable %} - {% set active_attr = active_attr|default({}) %} - {% set inactive_attr = inactive_attr|default({}) %} - - {% set attr = attr|merge(sorted ? active_attr : inactive_attr) %} - - + {% set label_attr = { href: data_table_column_sort_url(data_table, column) }|merge(label_attr) %} {% set label_attr = { 'data-turbo-action': 'advance', 'data-turbo-frame': '_self' }|merge(label_attr) %} - - {{- block('column_header_label', theme, _context) -}} + + {{- block('column_label', theme) -}} {% if sorted %} {% if sort_direction == 'asc' %} - {{ block('sort_arrow_asc', theme, _context) }} + {{ block('sort_arrow_asc', theme) }} {% else %} - {{ block('sort_arrow_desc', theme, _context) }} + {{ block('sort_arrow_desc', theme) }} {% endif %} {% else %} - {{ block('sort_arrow_none', theme, _context) }} + {{ block('sort_arrow_none', theme) }} {% endif %} - + {% else %} - - - {{- block('column_header_label', theme, _context) -}} +
+ + {{- block('column_label', theme) -}} - - {% endif %} -{% endblock %} - -{% block column_header_label %} - {% if translation_domain is not same as false %} - {{- label|trans(translation_parameters, translation_domain) -}} - {% else %} - {{- label -}} +
{% endif %} {% endblock %} {# Column type value templates #} {% block column_value %} - + {% set tag = tag ?? 'span' %} + + <{{ tag }}{{ _self.attributes(attr) }}> {%- if translation_domain is not same as false -%} {{- value|trans({}, translation_domain) -}} {%- else -%} {{- value -}} {%- endif -%} - + {% endblock %} {% block column_text_value %} - {{- block('column_value') -}} + {{- block('column_value', theme) -}} {% endblock %} {% block column_number_value %} @@ -382,7 +319,7 @@ {% set value = value|format_number(intl_formatter_options.attrs, intl_formatter_options.style) %} {% endif %} - {{- block('column_text_value') -}} + {{- block('column_text_value', theme) -}} {% endblock %} {% block column_money_value %} @@ -394,7 +331,7 @@ {% set value = value|format_currency(currency, intl_formatter_options.attrs) %} {% endif %} - {{- block('column_text_value') -}} + {{- block('column_text_value', theme) -}} {% if value is not null and not use_intl_formatter %} {{ currency }} @@ -402,9 +339,9 @@ {% endblock %} {% block column_link_value %} - v != null)|merge(attr) } %}{{- block('attributes') -}}{% endwith %}> - {{- block('column_text_value') -}} - + {% with { tag: 'a', attr: { href, target }|filter(v => v != null)|merge(attr) } %} + {{- block('column_text_value', theme) -}} + {% endwith %} {% endblock %} {% block column_date_time_value %} @@ -446,22 +383,6 @@ {% endfor %} {% endblock %} -{% block column_form_value %} - {% if form_child_path is not same as false %} - {% set form = form[row_index][form_child_path].createView() %} - {% else %} - {% set form = form[row_index].createView() %} - {% endif %} - - {% set form_themes = form_themes|default(null) %} - - {% if form_themes is not null %} - {% form_theme form with form_themes %} - {% endif %} - - {{ form_widget(form) }} -{% endblock %} - {% block column_checkbox_header %} {% set input_attr = { @@ -470,7 +391,7 @@ 'data-identifier-name': identifier_name, 'data-kreyu--data-table-bundle--batch-target': 'selectAllCheckbox', 'data-action': 'input->kreyu--data-table-bundle--batch#selectAll' - }|merge(input_attr|default({})) %} + }|merge(input_attr ?? {}) %} @@ -490,16 +411,220 @@ {% endblock %} -{# Action type templates #} +{% block action_icon %} + +{% endblock %} + +{% block action_label %} + {{- label|trans(translation_parameters, translation_domain) -}} +{% endblock %} + +{% block action_control %} + {% if icon_attr %}{{ block('action_icon', theme) }}{% endif %} + {{ block('action_label', theme) }} +{% endblock %} + +{% block action_link_control %} + {% set attr = { href, target }|filter(v => v != null)|merge(attr ?? {}) %} + + {% if batch %} + {% set attr = { 'data-kreyu--data-table-bundle--batch-target': 'identifierHolder' }|merge(attr) %} + {% endif %} + + + {{ block('action_control', theme) }} + +{% endblock %} + +{% block action_button_control %} + {% set attr = { href, target }|filter(v => v != null)|merge(attr ?? {}) %} + + {% if batch %} + {% set attr = { 'data-kreyu--data-table-bundle--batch-target': 'identifierHolder' }|merge(attr) %} + {% endif %} + + + {{ block('action_control', theme) }} + +{% endblock %} + +{% block action_form_control %} + {% set attr = { action, method: html_friendly_method, id: form_id }|filter(v => v != null)|merge(attr ?? {}) %} + + {% if batch %} + {% set attr = { 'data-kreyu--data-table-bundle--batch-target': 'identifierHolder' }|merge(attr) %} + {% endif %} + + + {# Reset attributes to prevent bubbling #} + {% set attr = {} %} + + + + {% set button_tag = button_tag ?? 'button' %} + + <{{ button_tag }} {% with { attr: { type: 'submit' }|merge(button_attr) } %}{{- block('attributes') -}}{% endwith %}> + {{- block('action_control', theme) -}} + + +{% endblock %} + +{% block sort_arrow_none %}{% endblock %} -{% block action_value_icon %}{% endblock %} +{% block sort_arrow_asc %}↑{% endblock %} + +{% block sort_arrow_desc %}↓{% endblock %} + +{% block attributes %} + {% for key, value in attr ?? {} %} {{ key }}="{{ value }}"{% endfor %} +{% endblock %} + +{% macro attributes(attr) %} + {% for key, value in attr ?? {} %} {{ key }}="{{ value }}"{% endfor %} +{% endmacro %} + +{# --------------------------------------------- #} +{# Deprecated - FIXME: remove for stable release #} +{# --------------------------------------------- #} + +{% block kreyu_data_table %} + {% deprecated 'The "kreyu_data_table" block is deprecated, use "data_table" instead.' %} + {{ block('data_table') }} +{% endblock %} + +{% block kreyu_data_table_form_aware %} + {% deprecated 'The "kreyu_data_table_form_aware" block is deprecated, no replacement available.' %} + + {% set stimulus_controllers = ['kreyu--data-table-bundle--state'] %} + + {% if has_batch_actions %} + {% set stimulus_controllers = stimulus_controllers|merge(['kreyu--data-table-bundle--batch']) %} + {% endif %} + + + {{ block('action_bar') }} + + {{ form_start(form, form_variables) }} + {{ block('table') }} + {{ form_end(form, { render_rest: false }) }} + + {% if pagination_enabled %} + {{ data_table_pagination(pagination) }} + {% endif %} + +{% endblock %} + +{% block kreyu_data_table_table %} + {% deprecated 'The "kreyu_data_table_table" block is deprecated, use "table" instead.' %} + {{ block('table') }} +{% endblock %} + +{% block table_head_row %} + {% deprecated 'The "table_head_row" block is deprecated, use "header_row" instead.' %} + {{ block('table_header_row') }} +{% endblock %} + +{% block kreyu_data_table_header_row %} + {% deprecated 'The "kreyu_data_table_header_row" block is deprecated, use "header_row" instead.' %} +{% endblock %} + +{% block table_body_row_results %} + {% deprecated 'The "table_body_row_no_results" block is deprecated, no replacement available, as the value rows are now iterated inside the "table_body_row" block.' %} + {% for value_row in value_rows %} + {{ block('value_row') }} + {% endfor %} +{% endblock %} + +{% block table_body_row_no_results %} + {% deprecated 'The "table_body_row_no_results" block is deprecated, use "no_results_row" instead.' %} +{% endblock %} + +{% block kreyu_data_table_pagination %} + {% deprecated 'The "kreyu_data_table_pagination" block is deprecated, use "pagination" instead.' %} + {{ block('pagination') }} +{% endblock %} + +{% block pagination_widget %} + {% deprecated 'The "pagination_widget" block is deprecated, use "pagination" instead.' %} + {{ block('pagination') }} +{% endblock %} + +{% block kreyu_data_table_value_row %} + {% deprecated 'The "kreyu_data_table_value_row" is deprecated, as the structure has changed, check base theme.' %} + + {% for column_value in row %} + + {{- data_table_column_value(column_value) -}} + + {% endfor %} +{% endblock %} + +{% block kreyu_data_table_action_bar %} + {% deprecated 'The "kreyu_data_table_action_bar" block is deprecated, use "action_bar" instead.' %} + {{ block('action_bar') }} +{% endblock %} + +{% block kreyu_data_table_column_header %} + {% deprecated 'The "kreyu_data_table_column_header" block is deprecated, the "data_table_column_header" now directly renders the column header block.' %} + {{ block(block_name, block_theme ?? theme) }} +{% endblock %} + +{% block kreyu_data_table_column_value %} + {% deprecated 'The "kreyu_data_table_column_value" block is deprecated, the "data_table_column_value" now directly renders the column value block.' %} + {{ block(block_name, block_theme ?? theme) }} +{% endblock %} + +{% block kreyu_data_table_action %} + {% deprecated 'The "kreyu_data_table_action" block is deprecated, the "data_table_action" now directly renders the action block.' %} + {% if visible %}{{- block(block_name, block_theme ?? theme) -}}{% endif %} +{% endblock %} + +{% block kreyu_data_table_column_label %} + {% deprecated 'The "kreyu_data_table_column_label" is now deprecated, use "column_label" instead.' %} + {{ block('column_label') }} +{% endblock %} + +{% block column_header_label %} + {% deprecated 'The "column_header_label" is deprecated, use "column_label" instead.' %} + {% if translation_domain is not same as false %} + {{- label|trans(translation_parameters, translation_domain) -}} + {% else %} + {{- label -}} + {% endif %} +{% endblock %} + +{% block column_form_value %} + {% deprecated 'The "column_form_value" is deprecated. The FormColumnType is deprecated as well.' %} + + {% if form_child_path is not same as false %} + {% set form = form[row_index][form_child_path].createView() %} + {% else %} + {% set form = form[row_index].createView() %} + {% endif %} + + {% set form_themes = form_themes|default(null) %} + + {% if form_themes is not null %} + {% form_theme form with form_themes %} + {% endif %} + + {{ form_widget(form) }} +{% endblock %} {% block action_value %} + {% deprecated 'The "action_value" block is deprecated, use "action_control" instead.' %} + {% if icon_attr %}{{ block('action_value_icon', theme, _context) }}{% endif %} {{- label|trans(translation_parameters, translation_domain) -}} {% endblock %} {% block action_link_value %} + {% deprecated 'The "action_link_value" block is deprecated, use "action_link_control" instead.' %} + {% set attr = { href, target }|filter(v => v != null)|merge(attr|default({})) %} {% if batch %} @@ -512,6 +637,8 @@ {% endblock %} {% block action_button_value %} + {% deprecated 'The "action_button_value" block is deprecated, use "action_button_control" instead.' %} + {% set attr = { href, target }|filter(v => v != null)|merge(attr|default({})) %} {% if batch %} @@ -524,6 +651,8 @@ {% endblock %} {% block action_form_value %} + {% deprecated 'The "action_form_value" block is deprecated, use "action_form_control" instead.' %} + {% set attr = { action, method: html_friendly_method }|merge(attr|default({})) %} {% if batch %} @@ -544,12 +673,6 @@ {% endblock %} -{% block sort_arrow_none %}{% endblock %} - -{% block sort_arrow_asc %}↑{% endblock %} - -{% block sort_arrow_desc %}↓{% endblock %} - -{% block attributes %} - {% for key, value in attr|default({}) %}{{ key }}="{{ value }}"{% endfor %} -{% endblock %} +{% block action_value_icon %} + {% deprecated 'The "action_value_icon" block is deprecated, use "action_icon" instead.' %} +{% endblock %} \ No newline at end of file diff --git a/src/Resources/views/themes/bootstrap_5.html.twig b/src/Resources/views/themes/bootstrap_5.html.twig index 7f222468..1fc562af 100755 --- a/src/Resources/views/themes/bootstrap_5.html.twig +++ b/src/Resources/views/themes/bootstrap_5.html.twig @@ -437,7 +437,7 @@ {% endblock %} -{% block pagination_widget %} +{% block pagination %}