full configurable data columns in all screen sizes (#404)

This commit is contained in:
Kevin Papst
2018-11-10 22:22:08 +01:00
committed by GitHub
parent b012b7170b
commit dc70ff128c
7 changed files with 72 additions and 40 deletions

View File

@@ -26,18 +26,22 @@ $(function() {
$.datatable = {
saveVisibility: function (modalSelector) {
var settings = {};
var cookieName = $(modalSelector).find('form').attr('name');
$(modalSelector).find('form').find('input:checkbox:not(:checked)').each(
function () {
settings[$(this).attr('name')] = $(this).is(':checked');
$(modalSelector).find('form').each(
function() {
var settings = {};
var cookieName = $(this).attr('name');
$(this).find('input:checkbox:not(:checked)').each(
function () {
settings[$(this).attr('name')] = $(this).is(':checked');
}
);
if (jQuery.isEmptyObject(settings)) {
Cookies.remove(cookieName);
} else {
Cookies.set(cookieName, JSON.stringify(settings), {expires: 365});
}
}
);
if (jQuery.isEmptyObject(settings)) {
Cookies.remove(cookieName);
} else {
Cookies.set(cookieName, JSON.stringify(settings), {expires: 365});
}
$(modalSelector).modal('toggle');
location.reload();
},
@@ -49,12 +53,12 @@ $(function() {
}
var header = $(tbl.find('th').get(column));
if (header.css("display") === "none") {
header.show();
header.show('ease');
tbl.find('tr').each(function(){
$($(this).find('td').get(column)).show('ease');
});
} else {
header.hide();
header.hide('ease');
tbl.find('tr').each(function(){
$($(this).find('td').get(column)).hide('ease');
});

File diff suppressed because one or more lines are too long

View File

@@ -1,8 +1,8 @@
{
"build/app.js": "/build/app.js?07d671a96df83ac52da6",
"build/app.js": "/build/app.js?ad0631335484158d704a",
"build/app.css": "/build/app.css?6501689dff217d14b179e3049295343e",
"build/fonts/fa-regular-400.woff": "/build/fonts/fa-regular-400.woff?d9e29124",
"build/images/blue@2x.png": "/build/images/blue@2x.png?2694acfd",
"build/images/blue.png": "/build/images/blue.png?96f8a905",
"build/fonts/fa-solid-900.woff2": "/build/fonts/fa-solid-900.woff2?e8a92a29",
"build/images/fa-solid-900.svg": "/build/images/fa-solid-900.svg?666a82cb",
"build/images/glyphicons-halflings-regular.svg": "/build/images/glyphicons-halflings-regular.svg?89889688",
@@ -14,7 +14,7 @@
"build/fonts/glyphicons-halflings-regular.woff2": "/build/fonts/glyphicons-halflings-regular.woff2?448c34a5",
"build/fonts/fa-solid-900.eot": "/build/fonts/fa-solid-900.eot?0b93480e",
"build/fonts/fa-solid-900.woff": "/build/fonts/fa-solid-900.woff?dfc040d5",
"build/images/blue.png": "/build/images/blue.png?96f8a905",
"build/fonts/fa-regular-400.woff": "/build/fonts/fa-regular-400.woff?d9e29124",
"build/fonts/fa-regular-400.woff2": "/build/fonts/fa-regular-400.woff2?930c1264",
"build/images/fa-regular-400.svg": "/build/images/fa-regular-400.svg?4e41caaf",
"build/fonts/fa-regular-400.ttf": "/build/fonts/fa-regular-400.ttf?cdd8fa76",

View File

@@ -128,12 +128,13 @@ class Extensions extends \Twig_Extension
*
* @param string $dataTable
* @param string $column
* @param string $size
* @return bool
*/
public function isColumnVisible(string $dataTable, string $column)
public function isColumnVisible(string $dataTable, string $column, string $size)
{
// TODO name handling could be improved, as now this info is spread in datatables.html.twig and here
$dataTable = $dataTable . '_visibility';
// name handling is spread between here and datatables.html.twig (data_table_column_modal)
$dataTable = $dataTable . '_visibility' . $size;
if (!isset($this->cookies[$dataTable])) {
$visibility = false;

View File

@@ -16,7 +16,7 @@
{{ widgets.callout('warning', 'error.no_entries_found') }}
{% endif %}
{% set columns = {'date': 'alwaysVisible'} %}
{% set columns = {'date': ''} %}
{% if not duration_only %}
{% set columns = columns|merge({'starttime': 'hidden-xs', 'endtime': 'hidden-xs'}) %}
@@ -25,6 +25,8 @@
{% set columns = columns|merge({
'duration': '',
'rate': '',
'customer': 'hidden-xs hidden-sm',
'project': 'hidden-xs hidden-sm',
'activity': 'hidden-xs hidden-sm',
'username': 'hidden-xs',
'description': 'hidden-xs hidden-sm',
@@ -37,7 +39,7 @@
{% for entry in entries %}
<tr>
<td>{{ entry.begin|date_short }}</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'date') }}">{{ entry.begin|date_short }}</td>
{% if not duration_only %}
<td class="{{ tables.data_table_column_class(tableName, columns, 'starttime') }}">{{ entry.begin|date("H:i") }}</td>
@@ -57,6 +59,12 @@
<td class="{{ tables.data_table_column_class(tableName, columns, 'rate') }}">&dash;</td>
{% endif %}
<td class="{{ tables.data_table_column_class(tableName, columns, 'customer') }}">
<a href="{{ path('admin_customer_edit', {'id': entry.project.customer.id}) }}">{{ widgets.label_customer(entry.project.customer) }}</a>
</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'project') }}">
<a href="{{ path('admin_project_edit', {'id': entry.project.id}) }}">{{ widgets.label_project(entry.project) }}</a>
</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'activity') }}">
<a href="{{ path('admin_activity_edit', {'id': entry.activity.id}) }}">{{ widgets.label_activity(entry.activity) }}</a>
</td>

View File

@@ -9,14 +9,14 @@
</div>
<div class="modal-body">
<form name="{{ name }}_visibility">
{% for title, class in entries %}
{% if 'alwaysVisible' not in class %}
<div class="form-group {{ class }}">
<input type="checkbox" id="column_{{ title }}" name="{{ title }}"{% if is_visible_column(name, title) %} checked="checked"{% endif %}>
<label class="control-label required" for="column_{{ title }}">{{ ('label.' ~ title)|trans }}</label>
</div>
{% endif %}
{% endfor %}
{% for title, class in entries %}
{% if 'alwaysVisible' not in class %}
<div class="form-group">
<input type="checkbox" id="column_{{ title }}" name="{{ title }}"{% if is_visible_column(name, title, '') %} checked="checked"{% endif %}>
<label class="control-label required" for="column_{{ title }}">{{ ('label.' ~ title)|trans }}</label>
</div>
{% endif %}
{% endfor %}
</form>
<p>{{ 'modal.columns.description'|trans }}</p>
</div>
@@ -33,17 +33,32 @@
{% spaceless %}
{% set class = '' %}
{% set always = false %}
{% if entries[column] is defined %}
{% set class = entries[column] %}
{% if 'alwaysVisible' in entries[column] %}
{% set always = true %}
{% set classes = entries[column] %}
{% if 'alwaysVisible' in classes %}
{# as this column should always be visible, we remove every class that includes hidden #}
{% for tmp in classes|split(' ') %}
{% if 'hidden' not in tmp %}
{% set class = class ~ ' ' ~ tmp %}
{% endif %}
{% endfor %}
{% else %}
{% if not is_visible_column(name, column, '') %}
{% set classes = classes ~ ' hidden' %}
{% else %}
{% for tmp in classes|split(' ') %}
{% if 'hidden' in tmp %}
{% set classes = classes|replace({(tmp): ''}) %}
{% endif %}
{% endfor %}
{% endif %}
{% set class = classes %}
{% endif %}
{% endif %}
{% if (always == false) and (not is_visible_column(name, column)) %}
{% set class = class ~ ' hidden' %}
{% endif %}
{% if not class is empty %}
{{ class }}
{{ class }}
{% endif %}
{% endspaceless %}
{% endmacro %}

View File

@@ -17,15 +17,17 @@
{{ widgets.callout('warning', 'error.no_entries_found') }}
{% endif %}
{% set columns = {'date': 'alwaysVisible'} %}
{% set columns = {'date': ''} %}
{% if not duration_only %}
{% set columns = columns|merge({'starttime': '', 'endtime': ''}) %}
{% set columns = columns|merge({'starttime': '', 'endtime': 'hidden-xs'}) %}
{% endif %}
{% set columns = columns|merge({
'duration': 'hidden-xs',
'duration': '',
'rate': 'hidden-xs',
'customer': 'hidden-xs hidden-sm',
'project': 'hidden-xs hidden-sm',
'activity': 'hidden-xs hidden-sm',
'description': 'hidden-xs hidden-sm',
'actions': 'alwaysVisible',
@@ -37,7 +39,7 @@
{% for entry in entries %}
<tr>
<td>{{ entry.begin|date_short }}</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'date') }}">{{ entry.begin|date_short }}</td>
{% if not duration_only %}
<td class="{{ tables.data_table_column_class(tableName, columns, 'starttime') }}">{{ entry.begin|date("H:i") }}</td>
@@ -57,6 +59,8 @@
<td class="{{ tables.data_table_column_class(tableName, columns, 'rate') }}">&dash;</td>
{% endif %}
<td class="{{ tables.data_table_column_class(tableName, columns, 'customer') }}">{{ widgets.label_customer(entry.project.customer) }}</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'project') }}">{{ widgets.label_project(entry.project) }}</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'activity') }}">{{ widgets.label_activity(entry.activity) }}</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'description') }} timesheet-description">{{ entry.description|desc2html }}</td>
<td>