Treso/Document Angular WIP

simde-utc · Sep 13, 2014 · 2413cef · 2413cef
1 parent d210d41
commit 2413cef
Show file tree

Hide file tree

Showing 8 changed files with 21,276 additions and 363 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,7 @@ lib/model/doctrine/base/Base*
 lib/model/doctrine/*Plugin/base/Base*
 lib/model/om/
 lib/model/map/
+data/
 web/*Plugin/
 /config/app.yml
 data/documents/*

diff --git a/apps/treso/config/view.yml b/apps/treso/config/view.yml
@@ -14,7 +14,7 @@ default:
 
   stylesheets:    [bootstrap.min.css,treso.css]
 
-  javascripts:    [jquery-1.7.2.min.js, bootstrap.min.js, treso.js, highcharts.js, angular.min.js, angular-locale_fr-fr.js]
+  javascripts:    [jquery-1.7.2.min.js, bootstrap.min.js, treso.js, highcharts.js, angular.js, angular-locale_fr-fr.js]
 
   has_layout:     true
   layout:         layout
diff --git a/apps/treso/modules/document/templates/indexSuccess.php b/apps/treso/modules/document/templates/indexSuccess.php
@@ -1,7 +1,10 @@
 <?php use_helper('Date', 'Text');
 
+use_javascript('treso/common/portail.js');
 use_javascript('treso/document/document-ctrl.js');
 
+// à terme cette partie dégage
+// il y aura un service angular pour récupérer les documents par XMLHttpRequest
 $docs = array();
 foreach ($documents as $document) {
   if (!is_null($document->getTransactionId())) {
@@ -24,15 +27,27 @@
       );
 } ?>
 <script type="text/javascript">
-function documentCtrl($scope) {
+// pareil
+// à terme on aura plus à écrire les docs direct dans le JS
+// donc on pourra mettre le controller à sa juste place (document-ctrl.js)
+function documentCtrl($scope, $filter) {
     $scope.documents = <?php echo json_encode($docs); ?>;
-    $scope.opened = false;
-    $scope.date = {start: 0, end: undefined};
+    $scope.date = {start: 0, end: undefined, selectedRange: undefined};
     $scope.rangeSelected = function() {
-      if ($scope.selectedRange == undefined)
+      if ($scope.date.selectedRange == undefined)
         return false;
-      return $scope.selectedRange.year != undefined;
+      return $scope.date.selectedRange.year != undefined;
     };
+    $scope.updateDocumentList = function() {
+      //alert($scope.date.start);
+      $scope.filteredDocuments = $filter('filter')($filter('int_range')($scope.documents, 'date_ajout', $scope.date.start, $scope.date.end), $scope.search);
+      $scope.types = $filter('unique')($scope.filteredDocuments, 'type');
+      // | filter:search | int_range:'date_ajout':date.start:date.end | in_array:'type':allowed_types
+    }
+    $scope.$watch('date.start', $scope.updateDocumentList);
+    $scope.$watch('date.end', $scope.updateDocumentList);
+    $scope.$watch('search.nom', $scope.updateDocumentList);
+    $scope.$watch('documents', $scope.updateDocumentList);
 }
 </script>
 
@@ -48,58 +63,6 @@ function documentCtrl($scope) {
 .table thead th {
   vertical-align: top;
 }
-.dropdown-menu {
-  padding: 4px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  border: 1px solid #ddd !important;
-  -moz-box-shadow: 2px 2px 5px #888;
-  -webkit-box-shadow: 2px 2px 5px #888;
-}
-
-.date-range table {
-  width: 100%;
-}
-
-.date-range td button {
-  background-image: none;
-  background-color: transparent;
-  border-width: 0px;
-  text-shadow: none;
-  box-shadow: none;
-  width: 100%;
-}
-
-.date-range td button:hover {
-  background-color: #eeeeee;
-}
-
-.date-range td button.active {
-  background-color: #006dcc;
-  color: white;
-}
-
-.date-range h1 {
-  font-size: 20px;
-  font-weight: 500;
-}
-
-.date-range hr {
-  margin: 5px 0px;
-}
-
-.date-range .btn-group button {
-  width: 50%;
-}
-.date-range td, .date-range td:hover {
-  border: none;
-  background-color: white !important;
-}
-.date-range tr, .date-range tr:hover {
-  border: none;
-  background-color: white !important;
-}
 </style>
 
 <table class="table table-striped table-bordered">
@@ -108,20 +71,25 @@ function documentCtrl($scope) {
       <th><portail-dropdown>
             <button class="btn dropdown-toggle" portail-dropdown-trigger>
               <span ng-if="!rangeSelected()">Date</span>
-              <span ng-if="rangeSelected()">{{ selectedRange.month }} {{ selectedRange.year }}</span>
+              <span ng-if="rangeSelected()">{{ date.selectedRange.month }} {{ date.selectedRange.year }}</span>
               <i class="caret"></i></button>
             <portail-dropdown-content style="width: 300px">
-              <portail-date-range header="Filtrer par date" selection="selectedRange" start="date.start" end="date.end"></portail-date-range>
+              <portail-date-range header="Filtrer par date" selection="date.selectedRange" start="date.start" end="date.end"></portail-date-range>
             </portail-dropdown-content>
           </portail-dropdown>
       </th>
       <th>Nom <div class="pull-right"><input ng-model="search.nom" type="text" placeholder="Recherche"/></div></th>
-      <th>Type</th>
+      <th><portail-dropdown>
+            <button class="btn dropdown-toggle" portail-dropdown-trigger>Type <i class="caret"></i></button>
+            <portail-dropdown-content>
+              <portail-types-chooser types="types" ng-model="allowed_types" />
+            </portail-dropdown-content>
+      </th>
       <th>Transaction</th>
     </tr>
   </thead>
   <tbody>
-    <tr ng-repeat="document in documents | filter:search | int_range:'date_ajout':date.start:date.end">
+    <tr ng-repeat="document in filteredDocuments">
       <td class="reduce">{{ document.date_ajout * 1000 | date:'d MMMM yyyy' }}</td>
       <td class="expand"><a href="{{ document.url }}" target="_blank">{{ document.nom }}</a></td>
       <td class="reduce">{{ document.type }}</td>

diff --git a/apps/treso/modules/transaction/templates/indexSuccess.php b/apps/treso/modules/transaction/templates/indexSuccess.php
@@ -10,7 +10,18 @@
   <a href="<?php echo url_for('transaction_new_with_compte', $compte) ?>" class="btn btn-success"><i class="icon-plus icon-white"></i>&nbsp;&nbsp;Nouvelle transaction</a>
 <a href="<?php echo url_for('transaction_pdf', $compte) ?>" class="btn btn-primary"><i class="icon-share-alt icon-white"></i>&nbsp;&nbsp;Export pdf</a>
 </div>
-
+<style type="text/css">
+.table-transaction select {
+  border: 0;
+  margin-bottom: 0;
+  width: 99%;
+}
+.table-transaction input {
+  border: 0;
+  margin-bottom: 0;
+  width: 99%;
+}
+</style>
 <div style="clear:both; text-align:center;">
     <strong><?php echo "Actuel  " . format_currency($compte->getSoldeActuel(), '€', 'fr'); ?></strong>
     <?php echo " | Rapproché  " . format_currency($compte->getSoldeRapproche(), '€', 'fr'); ?>
@@ -19,13 +30,13 @@
     <table style="margin: 20px auto;" class="table table-bordered table-striped table-transaction table-hover">
       <thead>
         <tr>
-          <th>Date</th>
-          <th>Libellé</th>
-          <th>Poste</th>
+          <th><select><option>Date</option><option>Début</option><option>Fin</option></select></th>
+          <th><input type="text" placeholder="Libellé"/></th>
+          <th><input type="text" placeholder="Poste"/></th>
           <th>Crédit</th>
           <th>Débit</th>
           <th>Solde</th>
-          <th>Moyen</th>
+          <th><input type="text" placeholder="Moyen"/></th>
           <th></th>
         </tr>
       </thead>

diff --git a/web/css/treso.css b/web/css/treso.css
@@ -86,3 +86,84 @@ tr .expand {
 {
     display: inline;
 }
+
+.dropdown-menu {
+  padding: 4px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  border: 1px solid #ddd !important;
+  -moz-box-shadow: 2px 2px 5px #888;
+  -webkit-box-shadow: 2px 2px 5px #888;
+}
+
+.date-range table {
+  width: 100%;
+}
+
+.date-range td button {
+  background-image: none;
+  background-color: transparent;
+  border-width: 0px;
+  text-shadow: none;
+  box-shadow: none;
+  width: 100%;
+}
+
+.date-range td button:hover {
+  background-color: #eeeeee;
+}
+
+.date-range td button.active {
+  background-color: #006dcc;
+  color: white;
+}
+
+.date-range h1 {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.date-range hr {
+  margin: 5px 0px;
+}
+
+.date-range .btn-group button {
+  width: 50%;
+}
+.date-range td, .date-range td:hover {
+  border: none;
+  background-color: white !important;
+}
+.date-range tr, .date-range tr:hover {
+  border: none;
+  background-color: white !important;
+}
+
+.checkbox-list input {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.checkbox-list li label {
+  cursor: pointer;
+  padding: 4px;
+}
+
+.checkbox-list li label:hover {
+  background-color: #eeeeee;
+}
+
+.full-button {
+    width: 100%;
+}
+
+.half-button {
+    width: 50%;
+    white-space: nowrap;
+}
+
+.types-chooser .btn-group {
+    margin-left: 0;
+    margin-bottom: 5px;
+}