improve project view table (#2441)

This commit is contained in:
Kevin Papst
2021-03-16 15:59:31 +01:00
committed by GitHub
parent 16e8e8a5e5
commit 954ba7c937
8 changed files with 61 additions and 25 deletions

View File

@@ -28,3 +28,4 @@
@import 'reporting';
@import 'forms';
@import 'modal';
@import 'progressbar';

View File

@@ -80,4 +80,8 @@ th.w-min,
td.w-min {
width: 1%;
white-space: nowrap;
}
table.dataTable thead > tr > th.hw-min {
width: 1%;
white-space: normal;
}

View File

@@ -158,6 +158,7 @@ table.dataTable thead .sorting_desc_disabled:before {
}
table.dataTable thead > tr > th {
vertical-align: top;
white-space: nowrap;
}

View File

@@ -0,0 +1,20 @@
/*
make sure that the progressbar title does not wrap and does not need to be embedded in a container with white-space: nowrap
used for example in the project-overview report
*/
.progress-group {
.progress-title {
width: 100%;
white-space: nowrap;
.progress-text {
display: inline-block;
width: 1%;
}
.progress-number {
display: inline-block;
width: 98%;
text-align: right;
float: none;
}
}
}

File diff suppressed because one or more lines are too long

View File

@@ -21,15 +21,19 @@
{% endif %}
<div class="progress-group">
<span class="progress-text">{{ title }}{% if percentReached >= 0 and subTitle is not empty %} &ndash; {{ percentReached|number_format(2) }}%{% endif %}</span>
<span class="progress-number">
{% if percentReached >= 0 and subTitle is empty %}
{{ percentReached|number_format(2) }}%
{% elseif subTitle is not empty %}
{{ subTitle }}
{% endif %}
</span>
<div class="progress-title">
<span class="progress-text">
{{ title }}
{% if percentReached >= 0 and subTitle is not empty %} &ndash; {{ percentReached|number_format(2) }}%{% endif %}
</span>
<span class="progress-number">
{% if percentReached >= 0 and subTitle is empty %}
{{ percentReached|number_format(2) }}%
{% elseif subTitle is not empty %}
{{ subTitle }}
{% endif %}
</span>
</div>
<div class="progress">
<div class="progress-bar {{ class }}" role="progressbar" aria-valuenow="{{ width }}" aria-valuemin="0" aria-valuemax="100" style="width: {{ width }}%"></div>
</div>

View File

@@ -4,12 +4,12 @@
{{ widgets.page_actions(event.actions) }}
{% endmacro %}
{% macro project(project, view, options) %}
{% macro project(project, view) %}
{% import "macros/widgets.html.twig" as widgets %}
{% set event = actions(app.user, 'project', view, {'project': project}) %}
{% if view == 'index' or view == 'custom' %}
{{ widgets.table_actions(event.payload.actions) }}
{{ widgets.table_actions(event.actions) }}
{% else %}
{{ widgets.page_actions(event.payload.actions) }}
{{ widgets.page_actions(event.actions) }}
{% endif %}
{% endmacro %}

View File

@@ -4,17 +4,18 @@
{% block report_title %}{{ 'report_project_view'|trans({}, 'reporting') }}{% endblock %}
{% set columns = {
'name': {'class': 'alwaysVisible w-min'},
'today': {'class': 'text-nowrap text-center w-min', 'title': 'daterangepicker.today'|trans({}, 'daterangepicker')},
'week': {'class': 'text-nowrap text-center w-min', 'title': 'agendaWeek'|trans},
'month': {'class': 'text-nowrap text-center w-min', 'title': 'month'|trans},
'durationTotal': {'class': 'hidden-md hidden-sm hidden-xs text-nowrap text-center w-min', 'title': 'label.total'|trans},
'timeBudget': {'class': 'text-nowrap', 'title': 'label.timeBudget'|trans},
'budget': {'class': 'text-nowrap', 'title': 'label.budget'|trans},
'stateDuration': {'class': 'hidden-sm hidden-xs text-nowrap text-center w-min', 'title': 'label.not_exported'|trans},
'stateMoney': {'class': 'hidden-sm hidden-xs text-nowrap text-center w-min', 'title': 'label.not_invoiced'|trans},
'projectEnd': {'class': 'hidden-md hidden-sm hidden-xs hidden text-nowrap text-center w-min', 'title': 'label.project_end'|trans},
'name': {'class': 'alwaysVisible'},
'today': {'class': 'hidden-md hidden-sm hidden-xs text-center hw-min', 'title': 'stats.durationToday'|trans},
'week': {'class': 'hidden-md hidden-sm hidden-xs text-center hw-min', 'title': 'stats.durationWeek'|trans},
'month': {'class': 'hidden-md hidden-sm hidden-xs text-center hw-min', 'title': 'stats.durationMonth'|trans},
'durationTotal': {'class': 'text-center hw-min', 'title': 'stats.durationTotal'|trans},
'timeBudget': {'class': 'hidden-xs', 'title': 'label.timeBudget'|trans},
'budget': {'class': 'hidden-xs', 'title': 'label.budget'|trans},
'stateDuration': {'class': 'hidden-sm hidden-xs text-center hw-min', 'title': 'label.not_exported'|trans},
'stateMoney': {'class': 'hidden-sm hidden-xs text-center hw-min', 'title': 'label.not_invoiced'|trans},
'projectEnd': {'class': 'hidden-md hidden-sm hidden-xs hidden text-center w-min', 'title': 'label.project_end'|trans},
'comment': {'class': 'hidden-md hidden-sm hidden-xs hidden', 'title': 'label.comment'|trans},
'actions': {'class': 'actions alwaysVisible'},
} %}
{% set tableName = 'project_view_reporting' %}
@@ -30,6 +31,7 @@
{% import "macros/progressbar.html.twig" as progress %}
{% import "macros/widgets.html.twig" as widgets %}
{% import "macros/datatables.html.twig" as tables %}
{% import "project/actions.html.twig" as projectActions %}
{% block box_body_class %}project-view-reporting-box {% if hasData %}no-padding{% endif %} table-responsive{% endblock %}
{% block box_before %}
{{ form_start(form, {'attr': {'class': 'form-inline form-reporting', 'id': 'project-view-form'}}) }}
@@ -51,14 +53,14 @@
{% for id, mapping in entries|sort((a, b) => a.customer.name <=> b.customer.name) %}
{% if is_granted('budget', mapping.customer) %}
<tr>
<th colspan="11">{{ widgets.label_customer(mapping.customer) }}</th>
<tr class="summary">
<td colspan="11">{{ widgets.label_customer(mapping.customer) }}</td>
</tr>
{% for entry in mapping.projects|sort((a, b) => a.project.name <=> b.project.name) %}
{% set project = entry.project %}
{% set currency = project.customer.currency %}
{% if is_granted('budget', project) %}
<tr{% if is_granted('view', project) %} class="alternative-link open-edit" data-href="{{ path('project_details', {'id': project.id}) }}"{% endif %}>
<tr>
<td class="{{ tables.data_table_column_class(tableName, columns, 'name') }}">{{ widgets.label_project(project) }}</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'today') }}">{{ entry.durationDay|duration }}</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'week') }}">{{ entry.durationWeek|duration }}</td>
@@ -94,6 +96,9 @@
</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'projectEnd') }}">{% if project.end is not null %}{{ project.end|date_short }}{% endif %}</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'comment') }}">{{ project.comment }}</td>
<td class="{{ tables.data_table_column_class(tableName, columns, 'actions') }}">
{{ projectActions.project(project, 'custom') }}
</td>
</tr>
{% endif %}
{% endfor %}