chore(billing services): create/update working

This commit moves the CREATE and UPDATE controls to using the same form template, now located at `/billing_services/form.html`. The methods both work as expected.
Third-Culture-Software · Mar 31, 2016 · 052be5e · 052be5e
1 parent f1fa378
commit 052be5e
Show file tree

Hide file tree

Showing 13 changed files with 296 additions and 127 deletions.
diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
@@ -198,6 +198,19 @@
   "GENERATE_DOC"    : "Generate Document",
   "DOC_SUCCES"      : "Document Build Success - Open Document"
   },
+"BILLING_SERVICES" : {
+  "TITLE" : "Billing Services",
+  "BTN" : {
+    "CREATE" : "Create a Billing Service",
+    "DELETE" : "Delete this Billing Service"
+  },
+  "CREATED" : "Created a new billing service.",
+  "FORM" : {
+    "CREATE" : "New Billing Service",
+    "UPDATE" : "Updating Billing Service"
+  },
+  "VIEW" : "View all billing services."
+},
 "BUDGET": {
   "ANALYSIS" : {
     "ALL_PERIOD"         : "All periods",
@@ -1470,10 +1483,7 @@
     "MISSING"           : "Please ensure that all fields are filled in.",
     "DATE_OUT_OF_RANGE" : "This date is not in the allowed date range. Please select another date."
    },
-<<<<<<< HEAD
-=======
    "ERRORED"       : "This form contains errors.  Please correct them and resubmit.",
->>>>>>> feat: inital billing services implementation
    "INVALID_DATE"    : "Invalid date",
    "LOGIN"           : "Login",
    "HAS_ERRORS"      : "The form contains errors.  Please correct them and resubmit.",
@@ -2715,7 +2725,7 @@
    "PASSIVE"          : "Passive",
    "SAVE_SUCCESS"     : "Saved Successfully",
    "TITLE"            : "Bilan section",
-   "UPDATE_SUCCESS"   : "Update Successfully"   
+   "UPDATE_SUCCESS"   : "Update Successfully"
 },
 "SECTION_RESULTAT" : {
    "ADD"                  : "Add",

diff --git a/client/src/js/app.js b/client/src/js/app.js
@@ -200,23 +200,25 @@ function bhimaConfig($stateProvider, $urlRouterProvider) {
   .state('billingServices', {
     abstract : true,
     url : '/admin/billing_services',
-    templateUrl : 'partials/billing_services/billing_services.abstract.html',
+    templateUrl : 'partials/billing_services/index.html',
     controller : 'BillingServicesController as BillingServicesCtrl',
   })
   .state('billingServices.list', {
     url : '', // display by default in the parent state
     templateUrl : '/partials/billing_services/list/list.html',
     controller : 'BillingServicesListController as BillingServicesListCtrl'
   })
+
+  // both create and update use the same form template
   .state('billingServices.create', {
     url : '/create',
-    templateUrl : '/partials/billing_services/create/create.html',
-    controller : 'BillingServicesCreateController as BillingServicesCreateCtrl'
+    templateUrl : '/partials/billing_services/form.html',
+    controller : 'BillingServicesCreateController as BillingServicesFormCtrl',
   })
   .state('billingServices.update', {
     url : '/:id',
-    templateUrl : '/partials/billing_services/update/update.html',
-    controller : 'BillingServicesUpdateController as BillingServiceUpdateCtrl'
+    templateUrl : '/partials/billing_services/form.html',
+    controller : 'BillingServicesUpdateController as BillingServicesFormCtrl'
   })
 
   /* budget routes */

diff --git a/client/src/js/services/AccountService.js b/client/src/js/services/AccountService.js
@@ -43,9 +43,11 @@ function AccountService($http, util, sessionService) {
       .then(function (accounts) {
 
         // label the accounts with a nice human readable label
-        accounts.forEach(function (account) {
-          account.label = label(account);
-        });
+        if (!id) {
+          accounts.forEach(function (account) {
+            account.label = label(account);
+          });
+        }
 
         /** @todo make this ordering work */
         // return order(accounts);

diff --git a/client/src/js/services/BillingServicesService.js b/client/src/js/services/BillingServicesService.js
@@ -77,7 +77,22 @@ function BillingServicesService($http, util) {
    */
   function update(id, data) {
     var target = url.concat(id);
-    return $http.put(target, data)
+
+    // copy the data not do disrupt the view
+    data = angular.copy(data);
+
+    // remove view-specific values
+    if (data.account) {
+      data.account_id = data.account.id;
+      delete data.account;
+    }
+
+    // remove unneeded properties
+    delete data.updated_at;
+    delete data.created_at;
+    delete data.account_number;
+
+    return $http.put(target, { billingService : data } )
       .then(util.unwrapHttpResponse);
   }
 

diff --git a/client/src/partials/billing_services/create/create.html b/client/src/partials/billing_services/create/create.html
diff --git a/client/src/partials/billing_services/create/create.js b/client/src/partials/billing_services/create/create.js
@@ -8,6 +8,9 @@ BillingServicesCreateController.$inject = [
 function BillingServicesCreateController($state, BillingServices, Accounts) {
   var vm = this;
 
+  // The form title is defined in the JS to allow us to reuse templates
+  vm.title = 'BILLING_SERVICES.FORM.CREATE';
+
   // this is the CreateForm's model
   vm.model = {};
 

diff --git a/client/src/partials/billing_services/form.html b/client/src/partials/billing_services/form.html
@@ -0,0 +1,136 @@
+<!-- billing service form -->
+<div class="row">
+  <div class="col-md-8">
+    <form name="BillingServicesForm" bh-submit="BillingServicesFormCtrl.submit(BillingServicesForm)" novalidate autocomplete="off">
+      <div class="panel panel-primary">
+        <div class="panel-heading">
+          {{ BillingServicesFormCtrl.title | translate }}
+        </div>
+
+        <!--
+          @hack - styling looks better this way (nicer error messages)
+          @todo - propose to the team this should be part of the overall config
+        -->
+        <div class="panel-body" style="padding-bottom:5px;">
+
+          <!-- account input -->
+          <div class="form-group" ng-class="{ 'has-error' : BillingServicesForm.$submitted && BillingServicesForm.account.$invalid }">
+            <label class="control-label">
+              {{ "COLUMNS.ACCOUNT" | translate }}
+            </label>
+            <input
+              class="form-control"
+              name="account"
+              ng-model="BillingServicesFormCtrl.model.account"
+              placeholder="{{ 'PLACEHOLDERS.ENTER.ACCOUNT' | translate }}"
+              uib-typeahead="account as account.label for account in BillingServicesFormCtrl.accounts | filter:$viewValue | limitTo:6"
+              typeahead-template-url="partials/templates/typeahead/accounts.html"
+              required>
+            <div class="help-block" ng-messages="BillingServicesForm.account.$error" ng-show="BillingServicesForm.$submitted">
+              <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
+            </div>
+          </div>
+
+          <!-- label input -->
+          <div class="form-group" ng-class="{ 'has-error' : BillingServicesForm.$submitted && BillingServicesForm.label.$invalid }">
+            <label class="control-label">
+              {{ "COLUMNS.LABEL" | translate }}
+            </label>
+            <input
+              class="form-control"
+              name="label"
+              ng-model="BillingServicesFormCtrl.model.label"
+              required>
+            <div class="help-block" ng-messages="BillingServicesForm.label.$error" ng-show="BillingServicesForm.$submitted">
+              <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
+            </div>
+          </div>
+
+          <!-- description textarea -->
+          <div class="form-group" ng-class="{ 'has-error' : BillingServicesForm.$submitted && BillingServicesForm.description.$invalid }">
+            <label class="control-label">
+              {{ "COLUMNS.DESCRIPTION" | translate }}
+            </label>
+            <!--
+              @todo - propose to the team that all text-areas should have "resize:vertical" styles
+            -->
+            <textarea
+              style="resize:vertical;"
+              class="form-control"
+              name="description"
+              ng-model="BillingServicesFormCtrl.model.description"
+              placeholder="{{ 'INPUT.DESCRIPTION' | translate }}"
+              required>
+            </textarea>
+            <div class="help-block" ng-messages="BillingServicesForm.description.$error" ng-show="BillingServicesForm.$submitted">
+              <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
+            </div>
+          </div>
+
+          <!-- value input -->
+          <div class="form-group" ng-class="{ 'has-error' : BillingServicesForm.$submitted && BillingServicesForm.value.$invalid }">
+            <label class="control-label">
+              {{ "COLUMNS.VALUE" | translate }} (%)
+            </label>
+            <input
+              type="number"
+              class="form-control"
+              name="value"
+              ng-model="BillingServicesFormCtrl.model.value"
+              required>
+            <div class="help-block" ng-messages="BillingServicesForm.value.$error" ng-show="BillingServicesForm.$submitted">
+              <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
+            </div>
+          </div>
+
+          <!-- a validation section for the form -->
+          <div
+            class="form-group"
+            ng-class="{
+              'has-error' : BillingServicesForm.$submitted && (BillingServicesForm.$invalid || BillingServicesFormCtrl.error),
+              'has-success' : BillingServicesFormCtrl.created || BillingServicesFormCtrl.updated
+            }">
+
+            <div class="help-block">
+
+              <!-- show success message if the form is successfully submitted -->
+              <p ng-show="BillingServicesFormCtrl.created">
+                <span class="glyphicon glyphicon-ok-sign"></span> {{ "BILLING_SERVICES.CREATED" | translate }}
+                <a ui-sref="billingServices.list" href="">
+                  <span class="glyphicon glyphicon-link"></span> {{ "BILLING_SERVICES.VIEW" | translate }}
+                </a>
+              </p>
+
+              <p ng-show="BillingServicesFormCtrl.updated">
+                <span class="glyphicon glyphicon-ok-sign"></span> {{ "BILLING_SERVICES.UPDATED" | translate }}
+                <a ui-sref="billingServices.list" href="">
+                  <span class="glyphicon glyphicon-link"></span> {{ "BILLING_SERVICES.VIEW" | translate }}
+                </a>
+              </p>
+
+              <!-- there are (client-side) errors on the form -->
+              <p ng-show="BillingServicesForm.$submitted && BillingServicesForm.$invalid">
+                <span class="glyphicon glyphicon-alert"></span> {{ "FORM.ERRORED" | translate }}
+              </p>
+
+              <!-- show http errors sent from the server -->
+              <p ng-show="BillingServicesForm.$submitted && BillingServicesFormCtrl.error">
+                <span class="glyphicon glyphicon-alert"></span> {{ BillingServicesFormCtrl.error.code | translate }}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="panel-footer">
+          <!-- form submit button -->
+          <bh-loading-button loading-state="BillingServicesForm.$loading">
+          </bh-loading-button>
+
+          <button ui-sref="billingServices.list" class="btn btn-default">
+            {{ "FORM.BACK" | translate }}
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/...g_services/billing_services.abstract.html → .../src/partials/billing_services/index.html b/...g_services/billing_services.abstract.html → .../src/partials/billing_services/index.html
@@ -11,9 +11,13 @@
       <div class="toolbar-item">
 
         <!-- @todo - hide this on the create/update state -->
-        <button class="btn btn-default" ui-sref="billingServices.create" data-method="create">
-          <span class="glyphicon glyphicon-plus"></span> {{ "BILLING_SERVICES.CREATE" | translate }}
-        </button>
+        <button
+          class="btn btn-default"
+          ui-sref="billingServices.create"
+          data-method="create"
+          ng-hide="BillingServicesCtrl.$state.current.name === 'billingServices.create'">
+          <span class="glyphicon glyphicon-plus"></span> {{ "BILLING_SERVICES.BTN.CREATE" | translate }}
+        </button> 
       </div>
     </div>
   </div>

diff --git a/...ing_services/billing_services.abstract.js → ...nt/src/partials/billing_services/index.js b/...ing_services/billing_services.abstract.js → ...nt/src/partials/billing_services/index.js