Merge branch 'improve-budget-template' into 'master'

improve Budget template

See merge request Chill-Projet/chill-bundles!514

src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss

@@ -1,39 +1,42 @@
-.subtitle {
+h3.subtitle {
     margin-top: 1rem;
     margin-bottom: 1rem;
     padding: 1rem;
+    &::before {
+        font: normal normal normal 20px/1 ForkAwesome;
+        margin-right: 0.5em;
+        content: "\f061";
+    }
 }
-.family-title {
+
+$col_charge: #e03851d7;
+$col_resource: #6d9e63d8;
+
+h4.family-title {
+    margin-top: 1.5rem;
     margin-bottom: 1rem !important;
+    padding-left: 0.7em;
+    i {
+        margin-right: 0.4em;
+    }
+    &.charge i { color: $col_charge; }
+    &.resource i { color: $col_resource; }
 }
 .budget-table th {
     th {
         color: white;
     }
 }
-.budget-table {
+
-    th.charge {
+table.budget-table {
-        background-color: #e03851d7;
-    }
-}
-.budget-table {
-    th.resource {
-        background-color: #6d9e63d8;
-    }
-}
-.budget-table {
     th, td {
         padding: 10px;
         text-align: right;
     }
-    td.column-wide {
+    th.charge { background-color: $col_charge; }
-        width: 20%;
+    th.resource { background-color: $col_resource; }
-    }
+    td.column-fixed {
-    td.column-small {
+        width: 9.5em;
-        width: 15%;
-        &.right {
-            align-items: right;
-        }
     }
 }
 

src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig

@@ -32,28 +32,21 @@
     {% endif %}
 {% endfor %}
 
-
 <h3 class="subtitle">{{ 'Actual budget'|trans }}</h3>
-
 {% if actualCharges|length > 0 or actualResources|length > 0 %}
-    {% include 'ChillBudgetBundle:Budget:_current_budget.html.twig' with {
+    {% include '@ChillBudget/Budget/_current_budget.html.twig' with {
         'actualResources': actualResources,
         'actualCharges': actualCharges,
         'results': results,
         'entity': entity
     } %}
 {% else %}
-    <div class="flex-table">
-        <div class="item-bloc">
     <p><span class="chill-no-data-statement">{{ "There isn't any element recorded"|trans }}</span></p>
-        </div>
-    </div>
 {% endif %}
 
 {% if pastCharges|length > 0 or pastResources|length > 0 %}
-    <h2 class="subtitle">{{ 'Past budget'|trans }}</h2>
+    <h3 class="subtitle">{{ 'Past budget'|trans }}</h3>
-
+    {% include '@ChillBudget/Budget/_past_budget.html.twig' with {
-    {% include 'ChillBudgetBundle:Budget:_past_budget.html.twig' with {
         'pastCharges': pastCharges,
         'pastResources': pastResources,
         'entity': entity
@@ -61,9 +54,8 @@
 {% endif %}
 
 {% if futureCharges|length > 0 or futureResources|length > 0 %}
-    <h2 class="subtitle">{{ 'Future budget'|trans }}</h2>
+    <h3 class="subtitle">{{ 'Future budget'|trans }}</h3>
-
+    {% include '@ChillBudget/Budget/_future_budget.html.twig' with {
-    {% include 'ChillBudgetBundle:Budget:_future_budget.html.twig' with {
         'futureResources': futureResources,
         'futureCharges': futureCharges,
         'entity': entity

src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig

@@ -1,30 +1,17 @@
-{% from 'ChillBudgetBundle:Budget:_macros.html.twig' import table_elements, table_results %}
+{% from '@ChillBudget/Budget/_macros.html.twig' import table_elements, table_results %}
-
-{# <h2 class="subtitle">{{ 'Actual budget'|trans }}</h2> #}
-
-<div class="flex-table">
-    <h4 class="family-title">{{ 'Actual resources'|trans }}</h4>
 
+<div class="my-4">
+    <h4 class="family-title resource"><i class="fa fa-fw fa-plus-square"></i>{{ 'Actual resources'|trans }}</h4>
     {% if actualResources|length > 0 %}
-    <div class="item-bloc">
         {{ table_elements(actualResources, 'resource') }}
-    </div>
     {% else %}
-    <div class="item-bloc">
         <span class="chill-no-data-statement">{{ 'No resources registered'|trans }}</span>
-    </div>
     {% endif %}
-</div>
 
-<div class="flex-table">
+    <h4 class="family-title charge"><i class="fa fa-fw fa-minus-square"></i>{{ 'Actual charges'|trans }}</h4>
-    <h4 class="family-title">{{ 'Actual charges'|trans }}</h4>
     {% if actualCharges|length > 0 %}
-    <div class="item-bloc">
         {{ table_elements(actualCharges, 'charge') }}
-    </div>
     {% else %}
-    <div class="item-bloc">
         <span class="chill-no-data-statement">{{ 'No charges registered'|trans }}</span>
-    </div>
     {% endif %}
 </div>

src/Bundle/ChillBudgetBundle/Resources/views/Budget/_future_budget.html.twig

@@ -20,30 +20,21 @@
             aria-labelledby="heading_future_{{ entity.id }}"
             data-bs-parent="#future_{{ entity.id }}">
 
-            <div class="flex-table">
+            <div class="my-4">
-                <h3 class="family-title">{{ 'Future resources'|trans }}</h3>
+                <h4 class="family-title resource"><i class="fa fa-fw fa-plus-square"></i>{{ 'Future resources'|trans }}</h4>
 
                 {% if futureResources|length > 0 %}
-                    <div class="item-bloc">
                     {{ table_elements(futureResources, 'resource') }}
-                    </div>
                 {% else %}
-                    <div class="item-bloc">
                     <span class="chill-no-data-statement">{{ 'No future resources registered'|trans }}</span>
-                    </div>
                 {% endif %}
-            </div>
+
-            <div class="flex-table">
+                <h4 class="family-title charge"><i class="fa fa-fw fa-minus-square"></i>{{ 'Future charges'|trans }}</h4>
-                <h3 class="family-title">{{ 'Future charges'|trans }}</h3>
 
                 {% if futureCharges|length > 0 %}
-                    <div class="item-bloc">
                     {{ table_elements(futureCharges, 'charge') }}
-                    </div>
                 {% else %}
-                    <div class="item-bloc">
                     <span class="chill-no-data-statement">{{ 'No future charges registered'|trans }}</span>
-                    </div>
                 {% endif %}
             </div>
         </div>

src/Bundle/ChillBudgetBundle/Resources/views/Budget/_macros.html.twig

@@ -1,5 +1,5 @@
 {% macro table_elements(elements, family) %}
-<table class="budget-table">
+<table class="table table-bordered border-dark budget-table">
     <thead>
         <tr>
             <th class="{{ family }} el-type">{{ 'Budget element type'|trans }}</th>
@@ -13,25 +13,22 @@
         {% for f in elements %}
         {% set total = total + f.amount %}
         <tr>
-            <td class="column-wide el-type">
+            <td class="el-type">
-                <span class="badge-title">
-                    <span class="title_label title_label_{{ family }}"></span>
                 {% if f.isResource %}
-                        <span class="title_action">{{ f.resource.name|localize_translatable_string }}<span>
+                    {{ f.resource.name|localize_translatable_string }}
                 {% else %}
-                        <span class="title_action">{{ f.charge.name|localize_translatable_string }}<span>
+                    {{ f.charge.name|localize_translatable_string }}
                 {% endif %}
-                </span>
             </td>
-            <td class="column-small">{{ f.amount|format_currency('EUR') }}</td>
+            <td>{{ f.amount|format_currency('EUR') }}</td>
-            <td class="column-wide">
+            <td>
                 {% if f.endDate is not null %}
                     {{ f.startDate|format_date('short') ~ ' - ' ~ f.endDate|format_date('short') }}
                 {% else %}
-                    {{ f.startDate|format_date('short') ~ ' - ...' }}
+                    {{ 'depuis le  ' ~ f.startDate|format_date('short') }}
                 {% endif %}
             </td>
-            <td class="column-small">
+            <td class="column-fixed">
                 <ul class="record_actions">
                     {% if is_granted('CHILL_BUDGET_ELEMENT_SEE', f) %}
                         <li>
@@ -80,10 +77,9 @@
 
 {% set result = (totalResources - totalCharges) %}
 
-<table>
+<table class="table table-bordered border-dark">
     <thead>
         <tr>
-            <th>&nbsp;</th>
             <th>&nbsp;</th>
             <th>{{ 'Budget calculator result'|trans }}</th>
         </tr>
@@ -91,7 +87,6 @@
     <tbody>
         <tr>
             <td>{{ 'The balance'|trans }}</td>
-            <td>&nbsp;</td>
             <td>
                 {{ result|format_currency('EUR') }}
             </td>

src/Bundle/ChillBudgetBundle/Resources/views/Budget/_past_budget.html.twig

@@ -20,31 +20,21 @@
             aria-labelledby="heading_past_{{ entity.id }}"
             data-bs-parent="#past_{{ entity.id }}">
 
-            <div class="flex-table">
+            <div class="my-4">
-                <h3 class="family-title">{{ 'Past resources'|trans }}</h3>
+                <h4 class="family-title resource"><i class="fa fa-fw fa-plus-square"></i>{{ 'Past resources'|trans }}</h4>
 
                 {% if pastResources|length > 0 %}
-                    <div class="item-bloc">
                     {{ table_elements(pastResources, 'resource') }}
-                    </div>
                 {% else %}
-                    <div class="item-bloc">
                     <span class="chill-no-data-statement">{{ 'No past resources registered'|trans }}</span>
-                    </div>
                 {% endif %}
-            </div>
 
-            <div class="flex-table">
+                <h4 class="family-title charge"><i class="fa fa-fw fa-minus-square"></i>{{ 'Past charges'|trans }}</h4>
-                <h3 class="family-title">{{ 'Past charges'|trans }}</h3>
 
                 {% if pastCharges|length > 0 %}
-                    <div class="item-bloc">
                     {{ table_elements(pastCharges, 'charge') }}
-                    </div>
                 {% else %}
-                    <div class="item-bloc">
                     <span class="chill-no-data-statement">{{ 'No past charges registered'|trans }}</span>
-                    </div>
                 {% endif %}
             </div>
         </div>

src/Bundle/ChillBudgetBundle/Resources/views/Household/index.html.twig

@@ -24,16 +24,14 @@
 } %}
 
     {#
-<div class="flex-table">
+<div class="my-4">
-    <h3 class="family-title">{{ 'Budget calculator'|trans }}</h3>
+    <h4 class="family-title">{{ 'Budget calculator'|trans }}</h4>
-    <div class="item-bloc">
     {{ table_results(wholeCharges, wholeResources) }}
-    </div>
 </div>
 #}
 
 {% if household.getCurrentMembers|length > 0 %}
-    <h2 class="subtitle">{{ 'Current budget household members'|trans }}</h2>
+    <h1 class="my-5">{{ 'Budget household members'|trans }}</h1>
 
     {% for hm in household.getCurrentMembers %}
         {% set member = hm.person %}
@@ -57,6 +55,8 @@
                     aria-labelledby="heading_{{ member.id }}"
                     data-bs-parent="#nonCurrent">
 
+                        <h2 class="mt-4">{{ 'Budget for %name%'|trans({'%name%': member.firstName ~ " " ~ member.lastName }) }}</h2>
+
                         {% include 'ChillBudgetBundle:Budget:_budget.html.twig' with {
                             'resources': member.getBudgetResources,
                             'charges': member.getBudgetCharges,

src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig

@@ -17,17 +17,15 @@
 {% block content %}
 <h1>{{ title }}</h1>
 
-{% include 'ChillBudgetBundle:Budget:_budget.html.twig' with {
+{% include '@ChillBudget/Budget/_budget.html.twig' with {
     'resources': resources,
     'charges': charges,
     'person': person
 } %}
 
-<div class="flex-table">
+<div class="mt-5">
-    <h3 class="family-title">{{ 'Budget calculator'|trans }}</h2>
+    <h3 class="subtitle">{{ 'Budget calculator'|trans }}</h3>
-    <div class="item-bloc">
     {{ table_results(charges, resources) }}
-    </div>
 </div>
 
 {% if is_granted('CHILL_BUDGET_ELEMENT_CREATE', person) %}

src/Bundle/ChillBudgetBundle/Resources/views/Resource/confirm_delete.html.twig

@@ -9,7 +9,7 @@
     {% set indexPage = 'chill_budget_elements_household_index' %}
     {% set activeRouteKey = '' %}
     {% set household = element.household %}
-    {% set confirm_question = 'Are you sure you want to remove the ressource "%type%" associated to household "%household%" ?'|trans({ '%household%' : household.id, '%type%': element.resource.getName | localize_translatable_string} ) %}
+    {% set confirm_question = 'Are you sure you want to remove the resource "%type%" associated to household "%household%" ?'|trans({ '%household%' : household.id, '%type%': element.resource.getName | localize_translatable_string} ) %}
 {% endif %}
 
 {% extends template %}

src/Bundle/ChillBudgetBundle/translations/messages.fr.yml

@@ -3,23 +3,23 @@ Resource: Ressource
 Charge: Charge
 Budget for %name%: Budget de %name%
 Budget for household %household%: Budget du ménage
-Current budget household members: Budget actuel des membres du ménage
+Budget household members: Budget des membres du ménage
 Show budget of %name%: Montrer budget de %name%
 See complete budget: Voir budget complet
 Hide budget: Masquer
 Hide budget of %name%: Masquer budget de %name%
 Resource element type: Nature de la ressource
-Actual budget: Éléments actuels du budget
+Actual budget: Éléments actuels
 Actual resources: Ressources actuelles
 Actual resources for %name%: Ressources actuelles de %name%
 Actual charges for %name%: Charges actuelles de %name%
 Actual charges: Charges actuelles
-Past budget: Éléments du budget passé
+Past budget: Éléments passés
 Show past budget: Montrer budget passé
 Show future budget: Montrer budget future
 Past resources: Ressources passées
 Past charges: Charges passées
-Future budget: Futurs éléments du budget
+Future budget: Éléments futurs
 Future resources: Ressources futures
 Future charges: Charges futures
 Budget element type: Nature
@@ -49,6 +49,8 @@ Remove resource: Supprimer la ressource
 Remove charge: Supprimer la charge
 Are you sure you want to remove the ressource "%type%" associated to "%name%" ?: Êtes-vous sûr·e de vouloir supprimer la ressource de nature "%type%" associée à %name% ?
 Are you sure you want to remove the charge "%type%" associated to "%name%" ?: Êtes-vous sûr·e de vouloir supprimer la charge de nature "%type%" associée à %name% ?
+Are you sure you want to remove the charge "%type%" associated to household "%household%" ?: Êtes-vous sur·e de vouloir supprimer la charge "%type%" associée au ménage ?
+Are you sure you want to remove the resource "%type%" associated to household "%household%" ?: Êtes-vous sur·e de vouloir supprimer la ressource "%type%" associée au ménage ?
 Resource deleted: Ressource supprimée
 Charge deleted: Charge supprimée
 Charge created: Charge créée