Skip to content

Commit

Permalink
feat(cash): implement clear button
Browse files Browse the repository at this point in the history 
This commit fixes the user experience problems reported on the cash
form.  A clear button allows the user to clear all form data in a
uniform place that users would expect.

Closes #90.
  • Loading branch information
@sfount
Jonathan Niles authored and sfount committed Jan 9, 2017
1 parent d16f9bb commit 8937707
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 39 deletions.
55 changes: 29 additions & 26 deletions client/src/partials/cash/cash.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<div class="flex-header">
<div class="bhima-title">
<ol class="headercrumb">
<li class="static">{{ "CASH.TITLE" | translate }}</li>
<li class="static" translate>TREE.FINANCE</li>
<li class="static" translate>CASH.TITLE</li>
<li class="title">{{ CashCtrl.cashbox.label }}</li>
</ol>
</div>
Expand All @@ -15,27 +16,27 @@
<div class="col-md-2">

<button class="btn btn-warning btn-block" ui-sref="cash.select({ id : CashCtrl.cashbox.id })" data-change-cashbox>
<i class="fa fa-inbox"></i> {{ "CASH.VOUCHER.CASHBOXES.CHANGE_CASHBOX" | translate }}
<i class="fa fa-inbox"></i> <span translate>CASH.VOUCHER.CASHBOXES.CHANGE_CASHBOX</span>
</button>

<button style="margin-bottom: 1em;" class="btn btn-primary btn-block" ui-sref="cash.transfer({ id: CashCtrl.cashbox.id })" data-perform-transfer>
<i class="fa fa-exchange"></i> {{ "CASH.VOUCHER.CASHBOXES.TRANSFER" | translate }}
<i class="fa fa-exchange"></i> <span translate>CASH.VOUCHER.CASHBOXES.TRANSFER</span>
</button>
</div>

<!-- Cash Voucher Form -->
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">
<i class="fa fa-barcode"></i>
{{ "CASH.VOUCHER.SLIP" | translate }} <span class="pull-right">{{ CashCtrl.cashbox.label }}</span>
<span translate>CASH.VOUCHER.SLIP</span> <span class="pull-right">{{ CashCtrl.cashbox.label }}</span>
</div>
<div class="panel-body">
<form name="CashVoucherForm" bh-submit="CashCtrl.submit(CashVoucherForm)" bh-form-defaults novalidate>

<fieldset ng-disabled="CashVoucherForm.$loading">

<bh-find-patient
suppress-reset="true"
on-search-complete="CashCtrl.usePatient(patient)"
on-register-api="CashCtrl.onRegisterApiCallback(api)"
validation-trigger="CashVoucherForm.$submitted"
Expand All @@ -54,20 +55,19 @@
validation-trigger="CashVoucherForm.$submitted"
on-change="CashCtrl.digestExchangeRate(currency)"
disable-ids="CashCtrl.disabledCurrencyIds"
cashbox-id="CashCtrl.cashbox.id"
>
cashbox-id="CashCtrl.cashbox.id">
</bh-currency-select>

<!-- determine if we are creating a caution or an invoice payment -->
<div class="radio" ng-class="{ 'has-error' : CashVoucherForm.$submitted && CashVoucherForm.type.$invalid }">
<p><strong class="control-label">{{ "FORM.LABELS.TYPE" | translate }}</strong></p>
<p><strong class="control-label" translate>FORM.LABELS.TYPE</strong></p>
<label class="radio-inline">
<input name="type" type="radio" ng-model="CashCtrl.payment.is_caution" ng-value="1" ng-change="CashCtrl.togglePaymentType(CashCtrl.payment.is_caution)" data-caution-option="1" required>
{{ "FORM.LABELS.CAUTION" | translate }}
<span translate>FORM.LABELS.CAUTION</span>
</label>
<label class="radio-inline">
<input name="type" type="radio" ng-model="CashCtrl.payment.is_caution" ng-value="0" ng-change="CashCtrl.togglePaymentType(CashCtrl.payment.is_caution)" data-caution-option="0" required>
{{ "FORM.LABELS.INVOICE" | translate }}
<span translate>FORM.LABELS.INVOICE</span>
</label>

<div class="help-block" ng-messages="CashVoucherForm.type.$error" ng-show="CashVoucherForm.$submitted">
Expand All @@ -86,9 +86,9 @@
<table class="table table-condensed" ng-show="CashCtrl.payment.invoices.length > 0">
<thead>
<tr>
<th style="width: 25%;">{{ "TABLE.COLUMNS.REFERENCE" | translate }}</th>
<th style="width: 50%;">{{ "TABLE.COLUMNS.DATE" | translate }}</th>
<th style="width: 25%;">{{ "TABLE.COLUMNS.AMOUNT" | translate }}</th>
<th style="width: 25%;" translate>TABLE.COLUMNS.REFERENCE</th>
<th style="width: 50%;" translate>TABLE.COLUMNS.DATE</th>
<th style="width: 25%;" translate>TABLE.COLUMNS.AMOUNT</th>
</tr>
</thead>
<tbody>
Expand All @@ -106,13 +106,13 @@

<!-- only show the sum if we have more rows than 1 -->
<tr ng-show="CashCtrl.payment.invoices.length > 1">
<td colspan="2" class="text-right"><u>{{ "TABLE.COLUMNS.TOTAL" | translate }}</u></td>
<td colspan="2" class="text-right"><u translate>TABLE.COLUMNS.TOTAL</u></td>
<td class="text-right">{{ CashCtrl.slip.rawTotal | currency:CashCtrl.enterprise.currency_id }}</td>
</tr>

<!-- only show this segment if using a foreign currency -->
<tr>
<td colspan="2" class="text-right"><b>{{ "TABLE.COLUMNS.EXCHANGE_RATE" | translate }}</b></td>
<td colspan="2" class="text-right"><b translate>TABLE.COLUMNS.EXCHANGE_RATE</b></td>
<td class="text-right">
<span ng-show="CashCtrl.payment.currency_id !== CashCtrl.enterprise.currency_id">
{{ CashCtrl.slip.rate | currency:CashCtrl.payment.currency_id }}
Expand All @@ -125,33 +125,33 @@

<!-- show a nice total row of what the payer owes today -->
<tr>
<th colspan="2" class="text-right">{{ "TABLE.COLUMNS.TOTAL" | translate }}</th>
<th colspan="2" class="text-right" translate>TABLE.COLUMNS.TOTAL</th>
<td class="text-right">{{ CashCtrl.slip.total | currency:CashCtrl.payment.currency_id }}</td>
</tr>
</tfoot>
</table>

<button class="btn-block btn btn-warning" ng-click="CashCtrl.openInvoicesModal()" type="button" data-open-invoices-btn>
<span class="glyphicon glyphicon-plus-sign"></span> {{ "FORM.BUTTONS.SELECT_INVOICES" | translate }}
<span class="fa fa-plus-circle"></span> <span translate>FORM.BUTTONS.SELECT_INVOICES</span>
</button>

<!-- show informational message if there are not invoice selected -->
<p ng-if="CashCtrl.payment.invoices.length === 0" class="text-center text-primary">
<span class="glyphicon glyphicon-info-sign"></span> {{ "CASH.VOUCHER.NO_INVOICES_SELECTED" | translate }}
<span class="fa fa-info-circle"></span> <span translate>CASH.VOUCHER.NO_INVOICES_SELECTED</span>
</p>
</div>

<hr />

<div ng-show="CashCtrl.patientBalance > 0" class="form-group">
<div class="alert alert-info">
<span ng-show="CashCtrl.slip.rate">
<strong>{{ 'CASH.CAUTION_COVER' | translate }}</strong> -
<strong>{{ 'FORM.LABELS.SOLD' | translate }}</strong>:
<span ng-if="CashCtrl.slip.rate">
<strong translate>CASH.CAUTION_COVER</strong> -
<strong translate>FORM.LABELS.SOLD</strong>:
{{ CashCtrl.patientBalance * CashCtrl.slip.rate | currency:CashCtrl.payment.currency_id }}
</span>
<span ng-hide="CashCtrl.slip.rate">
<strong class="text-capitalize">{{ 'CASH.CAUTION_REMAINING' | translate }}</strong>:
<strong class="text-capitalize" translate>CASH.CAUTION_REMAINING</strong>:
{{ CashCtrl.patientBalance | currency:CashCtrl.enterprise.currency_id }}
</span>
</div>
Expand All @@ -162,14 +162,17 @@
data-payment-currency-input
currency-id="CashCtrl.payment.currency_id"
model="CashCtrl.payment.amount"
form="CashVoucherForm"
validation-trigger="CashVoucherForm.$submitted"
>
validation-trigger="CashVoucherForm.$submitted">
</bh-currency-input>

<div class="form-group text-right">

<button type="button" class="btn btn-default" ng-click="CashCtrl.clear(CashVoucherForm)">
<span translate>FORM.BUTTONS.CLEAR</span>
</button>

<bh-loading-button loading-state="CashVoucherForm.$loading">
{{ "FORM.BUTTONS.SUBMIT" | translate }}
<span translate>FORM.BUTTONS.SUBMIT</span>
</bh-loading-button>
</div>
</fieldset>
Expand Down
30 changes: 19 additions & 11 deletions client/src/partials/cash/cash.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ function CashController(Cash, Cashboxes, AppCache, Currencies, Exchange, Session
vm.digestExchangeRate = digestExchangeRate;
vm.togglePaymentType = togglePaymentType;
vm.submit = submit;
vm.clear = clear;
vm.onRegisterApiCallback = onRegisterApiCallback;

// fired when the bhFindPatient API becomes available
Expand All @@ -56,7 +57,7 @@ function CashController(Cash, Cashboxes, AppCache, Currencies, Exchange, Session
vm.timestamp = new Date();

/* This is the actual payment form */
settupPayment();
setupPayment();

Currencies.read()
.then(function (currencies) {
Expand Down Expand Up @@ -177,7 +178,7 @@ function CashController(Cash, Cashboxes, AppCache, Currencies, Exchange, Session

}

function settupPayment() {
function setupPayment() {
// load payment type from cache
var DEFAULT_PAYMENT_TYPE = 0;
var paymentType = cache.is_caution || DEFAULT_PAYMENT_TYPE;
Expand All @@ -196,18 +197,25 @@ function CashController(Cash, Cashboxes, AppCache, Currencies, Exchange, Session
})
.then(function () {

// reset the data
settupPayment();
// clear and refresh the form
clear(form);
})
.catch(Notify.handleError);
}

// reset the bhFindPatient component
vm.bhFindPatient.reset();
function clear(form) {

// make sure the form is pristine
form.$setPristine();
// delete the slip information
delete vm.slip;

delete vm.slip;
})
.catch(Notify.handleError);
// clear the patient selection
vm.bhFindPatient.reset();

// run the setup script
setupPayment();

// clear the form
form.$setPristine();
}

// start up the module
Expand Down
4 changes: 2 additions & 2 deletions client/src/partials/patient_invoice/patientInvoice.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="flex-header">
<div class="bhima-title">
<ol class="headercrumb">
<li class="static">{{ "TREE.FINANCE" | translate }}</li>
<li class="title">{{ "PATIENT_INVOICE.PAGE_TITLE" | translate }}</li>
<li class="static" translate>TREE.FINANCE</li>
<li class="title" translate>PATIENT_INVOICE.PAGE_TITLE</li>
<li class="title" ng-show="PatientInvoiceCtrl.Invoice.recipient">{{ PatientInvoiceCtrl.Invoice.recipient.display_name }}</li>
</ol>

Expand Down

0 comments on commit 8937707

Please sign in to comment.