(Chore) Move in-line CSS into structure

* Moved styles set only once a receipt was downloaded into the general structure CSS (for receipts + printing). This should be updated to well defined less/ sass styles * Updated end to end tests for patient invoice to accept the receipt existing as a confirm state
Third-Culture-Software · Apr 16, 2016 · 7e80c9b · 7e80c9b
1 parent 5eed707
commit 7e80c9b
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 109 deletions.
diff --git a/client/src/css/structure.css b/client/src/css/structure.css
@@ -488,3 +488,65 @@ ol.headercrumb {
   position : relative;
 
 }
+
+/**
+ * Styles used for printing, receipts and reports 
+ * @todo move this to less
+ */
+.bh-modal-content { 
+  position : relative; 
+  padding : 15px;
+
+  /** @todo review this */
+  height : 50vh;
+  overflow-y : auto;
+}
+
+.receipt { 
+  width : 100%
+}
+
+/* Report tables */
+.total-row > td { 
+  font-weight : bold; 
+}
+
+@media print { 
+  body * { 
+    visibility : hidden;
+  }
+
+  /* FIXME .flex-content height is restricting the print view */
+  /* to two pages - this should be overriden to solve this problem */
+  .flex-content { }
+
+  /* Style required to fix single page overflow problem */
+  /* .flex-continar : height (cannot be 100%) */
+  .flex-container { 
+    height : inherit;
+  }
+
+  /* .modal : overflow (cannot be hidden) */
+  .modal-open .modal { 
+    overflow-x : initial;
+    overflow-y : initial;
+  }
+
+  .modal { 
+    overflow : initial;
+  }
+
+  .bh-print, .bh-print * { 
+    visibility : visible;
+  }
+
+  .bh-print { 
+    position : absolute;
+    left : 0;
+    top : 0;
+  }
+
+  .bh-modal-content { 
+    position : initial;
+  }
+}
diff --git a/client/src/js/services/receipts/modal/receiptModal.tmpl.html b/client/src/js/services/receipts/modal/receiptModal.tmpl.html
@@ -1,17 +1,3 @@
-<style>
-  .reportModal-content { 
-    position : relative;
-    padding : 15px;
-    height : 50vh;
-    overflow-y : auto;
-  }
-
-  @media print { 
-    .reportModal-content { 
-      position : initial;
-    }
-  }
-</style>
 <div class="modal-header">
   <ol class="headercrumb">
     <li class="static">{{ ReceiptCtrl.title | translate }}</li>
@@ -30,7 +16,7 @@
   <div ng-switch-when="json">
 
     <!-- TODO Modal height etc. should be standardised -->
-    <div class="reportModal-content">
+    <div class="bh-modal-content">
       <div ng-include="ReceiptCtrl.template"></div>
     </div>
   </div>

diff --git a/client/src/partials/patient_invoice/receipt/invoice.receipt.tmpl.html b/client/src/partials/patient_invoice/receipt/invoice.receipt.tmpl.html
@@ -1,45 +1,4 @@
-<style>  
-
-  .total-row > td { 
-    font-weight : bold; 
-  }
-  @media print { 
-    body * { 
-      visibility : hidden;
-    }
-
-    /* FIXME .flex-content height is restricting the print view */
-    /* to two pages - this should be overriden to solve this problem */
-    .flex-content { }
-
-    /* Style required to fix single page overflow problem */
-    /* .flex-continar : height (cannot be 100%) */
-    .flex-container { 
-      height : inherit;
-    }
-
-    /* .modal : overflow (cannot be hidden) */
-    .modal-open .modal { 
-      overflow-x : initial;
-      overflow-y : initial;
-    }
-
-    .modal { 
-      overflow : initial;
-    }
-
-    .printme, .printme * { 
-      visibility : visible;
-    }
-    .printme { 
-      position : absolute;
-      left : 0;
-      top : 0;
-    }
-  }
-</style>
-
-<div style="width : 100%" id="receipt" class="printme">
+<div id="receipt" class="bh-print receipt">
 
   <div class="row">
   <div class="col-xs-12">
@@ -71,45 +30,45 @@ <h4 style="text-decoration : underline;">
   </div>
 
   <div class="row">
-  <div class="col-xs-12">
-  <table class="table">
-    <thead>
-      <tr>
-        <th>{{ 'COLUMNS.CODE' | translate }}</th>
-        <th>{{ 'COLUMNS.DESCRIPTION' | translate }}</th>
-        <th>{{ 'COLUMNS.QUANTITY' | translate }}</th>
-        <th>{{ 'COLUMNS.PRICE' | translate }}</th>
-        <th>{{ 'COLUMNS.AMOUNT' | translate }}</th>
-      </tr>
-    </thead>
-
-    <!-- Line items -->
-    <tbody>
-      <tr ng-repeat="item in ReceiptCtrl.receipt.items">
-        <td>{{item.code}}</td>
-        <td>{{item.text}}</td>
-        <td>{{item.quantity}}</td>
-        <td>{{item.transaction_price}}</td>
-        <td>{{item.quantity * item.transaction_price}}</td>
-      </tr>
-    </tbody>
-
-    <!-- Totals -->
-    <tbody>
-      <tr class="total-row">
-        <td colspan="4">{{ "INVOICE.TOTAL" | translate }}</td>
-        <td>{{ReceiptCtrl.receipt.cost | currency }}</td>
-      </tr>
-      <!-- <tr> -->
-      <!--   <td colspan="4">{{ "INVOICE.AMOUNT_RECEIVED" | translate }}</td> -->
-      <!--   <td>{{ ReceiptCtrl.receipt.credit | currency }}</td> -->
-      <!-- </tr> -->
-      <!-- <tr> -->
-      <!--   <td colspan="4">{{ "INVOICE.BALANCE_DUE" | translate }}</td> -->
-      <!--   <td>{{ReceiptCtrl.receipt.balance | currency }}</td> -->
-      <!-- </tr> -->
-    </tbody>
-  </table>
-  </div>
+    <div class="col-xs-12">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>{{ 'COLUMNS.CODE' | translate }}</th>
+            <th>{{ 'COLUMNS.DESCRIPTION' | translate }}</th>
+            <th>{{ 'COLUMNS.QUANTITY' | translate }}</th>
+            <th>{{ 'COLUMNS.PRICE' | translate }}</th>
+            <th>{{ 'COLUMNS.AMOUNT' | translate }}</th>
+          </tr>
+        </thead>
+        
+        <!-- Line items -->
+        <tbody>
+          <tr ng-repeat="item in ReceiptCtrl.receipt.items">
+            <td>{{item.code}}</td>
+            <td>{{item.text}}</td>
+            <td>{{item.quantity}}</td>
+            <td>{{item.transaction_price}}</td>
+            <td>{{item.quantity * item.transaction_price}}</td>
+          </tr>
+        </tbody>
+        
+        <!-- Totals -->
+        <tbody>
+          <tr class="total-row">
+            <td colspan="4">{{ "INVOICE.TOTAL" | translate }}</td>
+            <td>{{ReceiptCtrl.receipt.cost | currency }}</td>
+          </tr>
+          <!-- <tr> -->
+          <!--   <td colspan="4">{{ "INVOICE.AMOUNT_RECEIVED" | translate }}</td> -->
+          <!--   <td>{{ ReceiptCtrl.receipt.credit | currency }}</td> -->
+          <!-- </tr> -->
+          <!-- <tr> -->
+          <!--   <td colspan="4">{{ "INVOICE.BALANCE_DUE" | translate }}</td> -->
+          <!--   <td>{{ReceiptCtrl.receipt.balance | currency }}</td> -->
+          <!-- </tr> -->
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
diff --git a/client/test/e2e/patient/invoice.spec.js b/client/test/e2e/patient/invoice.spec.js
@@ -19,7 +19,7 @@ var PatientInvoicePage = require('./invoice.page.js');
  *   - Test for price list
  *   - Test for discount
  */
-describe('patient invoice', function () {
+describe.only('patient invoice', function () {
   'use strict';
 
   /** @const */
@@ -44,12 +44,10 @@ describe('patient invoice', function () {
 
     // attempt to submit the page.
     page.submit();
-
-    // make sure we navigate away from the page
-    expect(browser.getCurrentUrl()).to.eventually.not.equal(helpers.baseUrl + path);
-
-    // assert that we got to the success page
-    expect(element(by.id('temp-success-message')).isPresent()).to.eventually.equal(true);
+
+    /** @todo - this can validate totals and receipt content in the future */
+    browser.waitForAngular();
+    FU.exists(by.id('receipt'), true); 
   });
 
   it.skip('invoices a patient for multiple items', function () {
@@ -87,12 +85,11 @@ describe('patient invoice', function () {
 
     // submit the page
     page.submit();
+
+    browser.waitForAngular();
+    /** @todo - this can validate totals and receipt content in the future */
+    FU.exists(by.id('receipt'), true); 
 
-    // make sure we navigate away from the page
-    expect(browser.getCurrentUrl()).to.eventually.not.equal(helpers.baseUrl + path);
-
-    // assert that we got to the success page
-    expect(element(by.id('temp-success-message')).isPresent()).to.eventually.equal(true);
   });