expenses prevision page start with example

app/Resources/views/logged/previsionnel.html.twig

@@ -1,6 +1,8 @@
 {% extends 'base.html.twig' %}
 {% trans_default_domain 'FOSUserBundle' %}
 {% block body %}
+    {% verbatim %}
+
         <div id="wrapper">
             <div class="previsionnel"
                  ng-app="caisse"
@@ -18,9 +20,12 @@
                             Dépenses mensuelles: {{ sumMonthlyExpenses }}
                         </div>
                         <div class="postes">
-                    <h2>Postes de dépenses</h2>
+                            <h2>Postes de dépenses
+                            <button ng-click="addExpense()">+</button>
+                            </h2>
                             <p class="desc">
-                        Indiquez les catégories de dépenses mensuelles que vous faites pour faire évoluer la simulation de budget restant dans plusieurs mois.
+                                Indiquez les catégories de dépenses mensuelles que vous faites pour faire évoluer la
+                                simulation de budget restant dans plusieurs mois.
                             </p>
                             <table class="exepnse-table">
                                 <thead>
@@ -49,23 +54,24 @@
                                 <tbody>
 
                                 </tbody>
-                        <tr ng-repeat="e in pCtrl.expenses">
+                                <tr ng-repeat="e in expenses">
                                     <td>
-                                {{ e.name }}
+                                         <input type="text" ng-model="e.name">
                                     </td>
                                     <td>
-                                {{ e.delay }}débute dans X mois
+
+                                        <input type="text" ng-model="e.delay">
                                     </td>
                                     <td>
-                                {{ e.repeat }}
+                                        <input type="text" ng-model="e.repeat">
                                     </td>
-                            <td>
+                                    <td class="text-right padded">
                                         {{ e.repeat * e.amount }}
                                     </td>
                                     <td>
-                                {{ e.amount }}
+                                        <input type="text" ng-model="e.amount">
                                     </td>
-                            <td>
+                                    <td class="text-right padded">
                                         {{ e.amount * 12 }}
                                     </td>
                                 </tr>
@@ -103,6 +109,7 @@
                     <div class="col-6 col-xs-12 col-sm-6">
 
                         <h2>Simulation sur 5 ans (60 mois)</h2>
+                        {{previsionTable.length}} lignes
                         <table>
                             <thead>
                             <tr>
@@ -143,4 +150,5 @@
                 </div>
             </div>
         </div>
+    {% endverbatim %}
 {% endblock %}

assets/js/parts/main.js

@@ -227,12 +227,12 @@ angular
 
 
         let exampleExpenses = [
-            {name: "appart", amount: 600},
+            {name: "appart", amount: 600, delay: 0, repeat: 60},
-            {name: "assurance voiture", amount: 50},
+            {name: "assurance voiture", amount: 50, delay: 0, repeat: 60},
-            {name: "internet", amount: 20},
+            {name: "internet", amount: 20, delay: 0, repeat: 60},
-            {name: "elec", amount: 100},
+            {name: "elec", amount: 100, delay: 0, repeat: 60},
-            {name: "transports", amount: 70},
+            {name: "transports", amount: 70, delay: 0, repeat: 60},
-            {name: "chat", amount: 20},
+            {name: "chat", amount: 20, delay: 0, repeat: 60},
         ];
         /**
          * expenses kind of the user
@@ -285,4 +285,12 @@ angular
                     console.log('save-my-expenses', rep);
                 })
         };
+        $scope.addExpense = () => {
+            $scope.expenses.push({
+                name: "",
+                repeat: 0,
+                delay: 0,
+                amount: 0,
+            })
+        }
     }]);