export modal

app/assets/javascripts/controllers/admin/invoices.js.erb

@@ -516,7 +516,7 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I
       $uibModal.open({
         templateUrl: '<%= asset_path "admin/invoices/accountingExportModal.html" %>',
         controller: 'AccountingExportModalController',
-        size: 'lg'
+        size: 'xl'
       });
     }
 
@@ -907,12 +907,60 @@ Application.Controllers.controller('ClosePeriodModalController', ['$scope', '$ui
 
 Application.Controllers.controller('AccountingExportModalController', ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {
 
+  const SETTINGS = {
+    acd: {
+      format: 'CSV',
+      encoding: 'ISO-8859-1',
+      separator: ';',
+      dateFormat: '%d/%m/%Y',
+      columns: ['journal_code', 'date', 'account_code', 'account_label', 'piece', 'line_label', 'debit_origin', 'credit_origin', 'debit_euro', 'credit_euro', 'lettering']
+    }
+  };
+
+  // binding to radio button "export to"
+  $scope.exportTarget = {
+    software: null,
+    startDate: null,
+    endDate: null,
+    settings: null
+  };
+
+  // AngularUI-Bootstrap datepicker parameters to define export dates range
+  $scope.datePicker = {
+    format: Fablab.uibDateFormat,
+    opened: { // default: datePickers are not shown
+      start: false,
+      end: false
+    },
+    options: {
+      startingDay: Fablab.weekStartingDay
+    }
+  };
+
   /**
    * Validate the close period creation
    */
   $scope.ok = function () {
     console.log('ok');
   };
+
+  /**
+   * Callback to open/close one of the datepickers
+   * @param event {Object} see https://docs.angularjs.org/guide/expression#-event-
+   * @param picker {string} start | end
+   */
+  $scope.toggleDatePicker = function(event, picker) {
+    event.preventDefault();
+    $scope.datePicker.opened[picker] = !$scope.datePicker.opened[picker];
+  };
+
+  /**
+   * Will fill the export settings, accordint to the selected software
+   */
+  $scope.fillSettings = function() {
+    $scope.exportTarget.settings = SETTINGS[$scope.exportTarget.software];
+  };
+
   /**
    * Just dismiss the modal window
    */

app/assets/stylesheets/modules/invoice.scss

@@ -284,3 +284,27 @@ input.form-control.as-writable {
     margin-top: 1em;
   }
 }
+
+.modal-xl {
+  width: 900px;
+}
+
+table.export-table-template {
+  margin-top: 10px;
+
+  thead td {
+    width: 20px;
+    background-color: #227447;
+    color: white;
+    border-bottom: 2px solid black;
+    font-size: 13px;
+    font-weight: bold;
+    padding: 10px 5px;
+    line-height: 12px;
+  }
+
+  tbody td {
+    border-right: 1px solid #d4d4d4;
+    height: 30px;
+  }
+}

app/assets/templates/admin/invoices/accountingExportModal.html

@@ -2,9 +2,82 @@
   <h3 class="text-center red" translate>{{ 'invoices.export_accounting_data' }}</h3>
 </div>
 <div class="modal-body">
-  <h4>hello</h4>
+  <form role="form" name="exportForm">
+    <div class="row">
+      <div class="form-group col-md-6">
+        <label for="start_date" translate>{{ 'invoices.export_form_date' }}</label>
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+          <input type="text"
+                 class="form-control"
+                 name="start_date"
+                 id="start_date"
+                 ng-model="exportTarget.startDate"
+                 uib-datepicker-popup="{{datePicker.format}}"
+                 datepicker-options="datePicker.options"
+                 is-open="datePicker.opened.start"
+                 min-date="lastClosingEnd"
+                 placeholder="{{datePicker.format}}"
+                 ng-click="toggleDatePicker($event, 'start')"
+                 required/>
+        </div>
+      </div>
+      <div class="form-group col-md-6">
+        <label for="end_date" translate>{{ 'invoices.export_to_date' }}</label>
+        <div class="input-group">
+          <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
+          <input type="text"
+                 class="form-control"
+                 name="end_date"
+                 id="end_date"
+                 ng-model="exportTarget.endDate"
+                 uib-datepicker-popup="{{datePicker.format}}"
+                 datepicker-options="datePicker.options"
+                 is-open="datePicker.opened.end"
+                 min-date="lastClosingEnd"
+                 placeholder="{{datePicker.format}}"
+                 ng-click="toggleDatePicker($event, 'end')"
+                 required/>
+        </div>
+      </div>
+    </div>
+    <div class="row">
+      <h4 class="control-label m-l" translate>{{ 'invoices.export_to' }}</h4>
+      <div class="form-group m-l-lg">
+        <label for="acd">
+          <input type="radio" name="acd" id="acd" ng-model="exportTarget.software" ng-value="'acd'" ng-click="fillSettings()" required/>
+          {{ 'invoices.acd' | translate }}
+        </label>
+      </div>
+    </div>
+    <div class="row" ng-show="exportTarget.settings">
+      <div class="col-md-4 font-bold" translate>{{ 'invoices.format' }}</div>
+      <div class="col-md-8">{{ exportTarget.settings.format }}</div>
+      <div class="col-md-4 font-bold" translate>{{ 'invoices.encoding' }}</div>
+      <div class="col-md-8">{{ exportTarget.settings.encoding }}</div>
+      <div class="col-md-4 font-bold" translate>{{ 'invoices.separator' }}</div>
+      <div class="col-md-8">{{ exportTarget.settings.separator }}</div>
+      <div class="col-md-4 font-bold" translate>{{ 'invoices.dateFormat' }}</div>
+      <div class="col-md-8">
+        <a href="https://apidock.com/ruby/DateTime/strftime" class="help-cursor" target="_blank">{{ exportTarget.settings.dateFormat }}</a>
+      </div>
+      <div class="col-md-4 font-bold" translate>{{ 'invoices.columns' }}</div>
+      <table class="col-md-12 export-table-template">
+        <thead>
+          <tr>
+            <td ng-repeat="column in exportTarget.settings.columns" translate>{{ 'invoices.exportColumns.' + column }}</td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td ng-repeat="column in exportTarget.settings.columns"></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </form>
 </div>
 <div class="modal-footer">
-  <button class="btn btn-warning" ng-click="ok()" translate>{{ 'confirm' }}</button>
+  <button class="btn btn-warning" ng-click="ok()" ng-disabled="!exportForm.$valid" translate>{{ 'confirm' }}</button>
   <button class="btn btn-default" ng-click="cancel()" translate>{{ 'cancel' }}</button>
 </div>