[ongoing] interface to close an accounting period

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

@@ -105,7 +105,7 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I
      * @param invoice {Object} invoice inherited from angular's $resource
      */
     $scope.generateAvoirForInvoice = function (invoice) {
-    // open modal
+      // open modal
       const modalInstance = $uibModal.open({
         templateUrl: '<%= asset_path "admin/invoices/avoirModal.html" %>',
         controller: 'AvoirModalController',
@@ -387,6 +387,14 @@ Application.Controllers.controller('InvoicesController', ['$scope', '$state', 'I
       return invoiceSearch(true);
     };
 
+    $scope.closeAnAccountingPeriod = function() {
+      // open modal
+      $uibModal.open({
+        templateUrl: '<%= asset_path "admin/invoices/closePeriodModal.html" %>',
+        controller: 'ClosePeriodModalController'
+      });
+    }
+
     /* PRIVATE SCOPE */
 
     /**
@@ -542,7 +550,7 @@ Application.Controllers.controller('AvoirModalController', ['$scope', '$uibModal
     $scope.openDatePicker = function ($event) {
       $event.preventDefault();
       $event.stopPropagation();
-      return $scope.datePicker.opened = true;
+      $scope.datePicker.opened = true;
     };
 
     /**
@@ -571,7 +579,7 @@ Application.Controllers.controller('AvoirModalController', ['$scope', '$uibModal
       }
     };
 
-    /**q
+    /**
      * Cancel the refund, dismiss the modal window
      */
     $scope.cancel = function () { $uibModalInstance.dismiss('cancel'); };
@@ -600,3 +608,50 @@ Application.Controllers.controller('AvoirModalController', ['$scope', '$uibModal
     return initialize();
   }
 ]);
+
+
+/**
+ * Controller used in the modal window allowing an admin to close an accounting period
+ */
+Application.Controllers.controller('ClosePeriodModalController', ['$scope', '$uibModalInstance', 'Invoice', 'growl', '_t',
+  function ($scope, $uibModalInstance, Invoice, growl, _t) {
+    /* PUBLIC SCOPE */
+    $scope.period = {
+      start_date: null,
+      end_date: null
+    };
+
+    // AngularUI-Bootstrap datepickers parameters to define the period to close
+    $scope.datePicker = {
+      format: Fablab.uibDateFormat,
+      // default: datePicker are not shown
+      startOpened: false,
+      endOpened: false,
+      options: {
+        startingDay: Fablab.weekStartingDay
+      }
+    };
+
+    /**
+     * Callback to open the datepicker
+     */
+    $scope.openDatePicker = function ($event, pickedId) {
+      $event.preventDefault();
+      $event.stopPropagation();
+      $scope.datePicker[`${pickedId}Opened`] = true;
+    };
+
+    /**
+     * Validate the refunding and generate a refund invoice
+     */
+    $scope.ok = function () {
+      $uibModalInstance.close({ period: $scope.period });
+      growl.info(_t('not_implemented_yet'));
+    };
+
+    /**
+     * Cancel the refund, dismiss the modal window
+     */
+    $scope.cancel = function () { $uibModalInstance.dismiss('cancel'); };
+  }
+]);

app/assets/templates/admin/invoices/closePeriodModal.html.erb

@@ -0,0 +1,45 @@
+<div class="modal-header">
+  <h3 class="text-center red" translate>{{ 'close_accounting_period' }}</h3>
+</div>
+<div class="modal-body">
+  <form name="closePeriodForm" novalidate="novalidate">
+    <div class="form-group" ng-class="{'has-error': closePeriodForm.start_date.$dirty && closePeriodForm.start_date.$invalid }">
+      <label translate>{{ 'close_from_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"
+               ng-model="period.start_date"
+               uib-datepicker-popup="{{datePicker.format}}"
+               datepicker-options="datePicker.options"
+               is-open="datePicker.startOpened"
+               placeholder="{{datePicker.format}}"
+               ng-click="openDatePicker($event, 'start')"
+               required/>
+      </div>
+      <span class="help-block" ng-show="closePeriodForm.start_date.$dirty && closePeriodForm.start_date.$error.required" translate>{{ 'start_date_is_required' }}</span>
+    </div>
+    <div class="form-group" ng-class="{'has-error': closePeriodForm.end_date.$dirty && closePeriodForm.end_date.$invalid }">
+      <label translate>{{ 'close_until_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"
+               ng-model="period.end_date"
+               uib-datepicker-popup="{{datePicker.format}}"
+               datepicker-options="datePicker.options"
+               is-open="datePicker.endOpened"
+               placeholder="{{datePicker.format}}"
+               ng-click="openDatePicker($event, 'end')"
+               required/>
+      </div>
+      <span class="help-block" ng-show="closePeriodForm.end_date.$dirty && closePeriodForm.end_date.$error.required" translate>{{ 'end_date_is_required' }}</span>
+    </div>
+  </form>
+</div>
+<div class="modal-footer">
+  <button class="btn btn-warning" ng-click="ok()" ng-disabled="closePeriodForm.$invalid" translate>{{ 'confirm' }}</button>
+  <button class="btn btn-default" ng-click="cancel()" translate>{{ 'cancel' }}</button>
+</div>

app/assets/templates/admin/invoices/index.html.erb

@@ -10,7 +10,11 @@
         <h1 translate>{{ 'invoices' }}</h1>
       </section>
     </div>
-
+    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md">
+      <section class="heading-actions wrapper">
+        <a class="btn btn-lg btn-default rounded m-t-sm text-sm" ng-click="closeAnAccountingPeriod()"><i class="fa fa-calendar-check-o"></i></a>
+      </section>
+    </div>
   </div>
 </section>