Implement bhBarcodeScanner Component #2630

jniles · 2018-03-28T13:41:55Z

This PR implements the bhBarcodeScanner component and uses it to replace the barcode scanning functionality on the Cash Payments page.

Component Signature

<bh-barcode-scanner on-scan-callback="callback(record)"></bh-barcode-scanner>

Description
The bhBarcodeScanner uses the underlying BarcodeService to query the barcode API and determine which record to return to the client. If the API returns a success HTTP code, it will call the onScanCallback function.

The key difference between this component and the previous implementation is the ability to re-focus the hidden barcode input if focus is lost. This is accomplished by clicking a button that is only visible once focus is lost from the hidden input.

In Action

mbayopanda

The code is excellent and the test also, i just made some comments about messages according the step.

mbayopanda · 2018-03-29T09:07:54Z

client/src/i18n/en/barcode.json

+    "READ_SUCCESS" : "Found Record",
+    "READ_ERROR" : "Unreadable Barcode!  Please enter the barcode manually.",
+    "LOST_FOCUS" : "The barcode input has lost focus.  Please click \"Read Barcode\" to ready the barcode component.",


mbayopanda · 2018-03-29T09:11:26Z

client/src/modules/cash/cash-form.service.js

@@ -121,7 +121,7 @@ function CashFormService(AppCache, Session, Patients, Exchange) {
  CashForm.prototype.configure = function configure(config) {

    if (config.patient) {
-      this.setPatient(config.invoices);
+      this.setPatient(config.patient);


👍 good catch

mbayopanda · 2018-03-29T09:22:31Z

test/client-unit/components/bhBarcoderScanner.spec.js

+    $scope.$digest();
+  }));
+
+  // TODO - how do you find a focused element?


The TODO message is about to find a hidden input box or a focused element ? Because the test below is about a hidden input.

Ah, I can see how that isn't clear.

I originally tried to write a test to find a "hidden, focused" input, but never got the focus to work. The CSS selector $(':focus') is supposed to work, but I never got that working...

So it's currently a TODO. I should probably just make a skipped test for it.

mbayopanda · 2018-03-29T09:23:17Z

test/client-unit/components/bhBarcoderScanner.spec.js

+    angular.element(input).triggerHandler('blur');
+    $scope.$digest();
+
+    expect(isHidden(btn)).to.equal(false);


mbayopanda · 2018-03-29T10:26:28Z

client/src/i18n/fr/barcode.json

+    "AWAITING_INPUT" : "En Attente d'Entrée",
+    "AWAITING_HTTP" : "Code à barres lu! Recherche l'enregistrement....",
+    "READ_SUCCESS" : "Trouvée",


Trouvé et non Trouvée (parce que le mot enregistrement est au masculin).

A good message can be : Enregistrement trouvé instead of simply Trouvé

mbayopanda · 2018-03-29T10:31:36Z

client/src/i18n/fr/barcode.json

+    "AWAITING_HTTP" : "Code à barres lu! Recherche l'enregistrement....",
+    "READ_SUCCESS" : "Trouvée",
+    "READ_ERROR" : "Code à barres illisible! Entrez le code à barres manuellement.",


for the "READ_ERROR" a good key and message can be :

"READ_FAILED" : "Enregistrement non trouvé"

and for any errors during the reading :

"READ_ERROR" : "Une erreur est survenue lors de la lecture du code barre"

That is an excellent idea. I'll expand the API for it.

mbayopanda · 2018-03-29T10:44:37Z

client/src/js/components/bhBarcodeScanner.js

+        $ctrl.onScanCallback({ record });
+      })
+      .catch(() => {
+        $ctrl.currentStep = steps.READ_ERROR;


If the record is not found this code falls in the .catch section, and set the step to an error.

I think if the record is not found the step must be READ_FAILED.

On the server side if we use db.exec, on the client we can have :

if (records.length === 0) { $ctrl.currentStep = steps.READ_FAILED; }

and the READ_ERROR must be set only if we have a real error.

mbayopanda · 2018-03-29T10:47:23Z

client/src/modules/templates/bhBarcodeScanner.html

+
+    <span class="text-danger" ng-if="$ctrl.currentStep === $ctrl.steps.READ_ERROR">
+      <i class="fa fa-danger-sign"></i> <span translate>BARCODE.READ_ERROR</span>
+    </span>


Add also a case for a READ_FAILED

jniles · 2018-03-29T12:17:54Z

@mbayopanda, this is ready for a second review!

mbayopanda

LGTM

mbayopanda · 2018-03-29T13:06:05Z

client/src/i18n/en/barcode.json

+    "READ_SUCCESS" : "Found Record",
+    "READ_ERROR" : "An error occurred during lookup.  Please use another method to find the record.",
+    "NOT_FOUND" : "Cannot find a record with that code.  Please search for the document manually.",


mbayopanda · 2018-03-29T13:06:20Z

client/src/js/components/bhBarcodeScanner.js

+    READ_SUCCESS : 8,
+    READ_ERROR : 16,
+    LOST_FOCUS : 32,
+    NOT_FOUND : 64,


mbayopanda · 2018-03-29T13:08:51Z

client/src/js/components/bhBarcodeScanner.js

+      })
+      .catch(err => {
+        const isNotFound = (err.status === 404);
+        $ctrl.currentStep = isNotFound ? steps.NOT_FOUND : steps.READ_ERROR;


mbayopanda · 2018-03-29T13:09:38Z

server/lib/barcode.js

@@ -36,7 +36,7 @@ function generate(receiptIdentifier, uuid) {
 // YYYYYYYY - First characters of the entity UUID
 // - returns the full UUID of the entity
 function reverseLookup(barcodeKey) {
-  const code = barcodeKey.substr(0, 2);
+  const code = barcodeKey.substr(0, 2).toUpperCase();


mbayopanda · 2018-03-29T13:11:04Z

bors r+

2630: Implement bhBarcodeScanner Component r=mbayopanda a=jniles This PR implements the `bhBarcodeScanner` component and uses it to replace the barcode scanning functionality on the Cash Payments page. **Component Signature** ```html <bh-barcode-scanner on-scan-callback="callback(record)"></bh-barcode-scanner> ``` **Description** The `bhBarcodeScanner` uses the underlying `BarcodeService` to query the barcode API and determine which record to return to the client. If the API returns a success HTTP code, it will call the `onScanCallback` function. The key difference between this component and the previous implementation is the ability to re-focus the hidden barcode input if focus is lost. This is accomplished by clicking a button that is only visible once focus is lost from the hidden input. **In Action** ![2018-03-28_14-44-36](https://user-images.githubusercontent.com/896472/38032906-a0942c82-3296-11e8-9623-dd777c3dd908.gif)

bors · 2018-03-29T13:31:47Z

Build failed

continuous-integration/travis-ci/push

This commit implements a barcode component to make working with barcodes a bit easier. It replaces the cash barcode modal's custom logic with generic logic to be tested. Key features: 1. If the input loses focus, the user is notified and a button appears to re-establish focus on the hidden input. 2. Simple API - only a single callback is provided for the success case. 3. Record agnostic. Closes Third-Culture-Software#1529.

This directive has been superseded now that the barcode component is implemented.

This commit adds unit tests to the bhBarcodeComponent.

This commit differentiates between a "NOT FOUND" barcode (doesn't exist in the database) and all other errors. In theory, we shouldn't encounter a "NOT FOUND" error if users are only scanning barcodes that are generated by the system, unless someone has deleted it. This also refactors the tests to remove repetition.

jniles · 2018-04-02T09:03:37Z

bors r+

2630: Implement bhBarcodeScanner Component r=jniles a=jniles This PR implements the `bhBarcodeScanner` component and uses it to replace the barcode scanning functionality on the Cash Payments page. **Component Signature** ```html <bh-barcode-scanner on-scan-callback="callback(record)"></bh-barcode-scanner> ``` **Description** The `bhBarcodeScanner` uses the underlying `BarcodeService` to query the barcode API and determine which record to return to the client. If the API returns a success HTTP code, it will call the `onScanCallback` function. The key difference between this component and the previous implementation is the ability to re-focus the hidden barcode input if focus is lost. This is accomplished by clicking a button that is only visible once focus is lost from the hidden input. **In Action** ![2018-03-28_14-44-36](https://user-images.githubusercontent.com/896472/38032906-a0942c82-3296-11e8-9623-dd777c3dd908.gif)

bors · 2018-04-02T09:30:51Z

Build succeeded

continuous-integration/travis-ci/push

jniles added the Component label Mar 28, 2018

jniles requested a review from mbayopanda March 29, 2018 08:02

mbayopanda reviewed Mar 29, 2018

View reviewed changes

mbayopanda approved these changes Mar 29, 2018

View reviewed changes

jniles added 4 commits March 29, 2018 15:15

chore: remove bhFocusOn

6cc26c7

This directive has been superseded now that the barcode component is implemented.

test(bhBarcodeScanner): unit test component

e061abf

This commit adds unit tests to the bhBarcodeComponent.

jniles force-pushed the feat-barcode-scanning-component branch from e8c0708 to 65e1f27 Compare March 29, 2018 14:15

bors bot merged commit 65e1f27 into Third-Culture-Software:master Apr 2, 2018

jniles deleted the feat-barcode-scanning-component branch April 2, 2018 09:38

This was referenced Apr 6, 2018

fix(simple voucher): the use of scanner for prise en charge decrease performances #1959

Closed

(design) Scan Barcode Component #1529

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement bhBarcodeScanner Component #2630

Implement bhBarcodeScanner Component #2630

jniles commented Mar 28, 2018 •

edited

Loading

mbayopanda left a comment

mbayopanda Mar 29, 2018

mbayopanda Mar 29, 2018

mbayopanda Mar 29, 2018

jniles Mar 29, 2018

mbayopanda Mar 29, 2018

mbayopanda Mar 29, 2018 •

edited

Loading

mbayopanda Mar 29, 2018

jniles Mar 29, 2018

mbayopanda Mar 29, 2018

mbayopanda Mar 29, 2018

jniles commented Mar 29, 2018

mbayopanda left a comment

mbayopanda Mar 29, 2018

mbayopanda Mar 29, 2018

mbayopanda Mar 29, 2018

mbayopanda Mar 29, 2018

mbayopanda commented Mar 29, 2018

bors bot commented Mar 29, 2018

jniles commented Apr 2, 2018

bors bot commented Apr 2, 2018

Implement bhBarcodeScanner Component #2630

Implement bhBarcodeScanner Component #2630

Conversation

jniles commented Mar 28, 2018 • edited Loading

mbayopanda left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mbayopanda Mar 29, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jniles commented Mar 29, 2018

mbayopanda left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mbayopanda commented Mar 29, 2018

bors bot commented Mar 29, 2018

Build failed

jniles commented Apr 2, 2018

bors bot commented Apr 2, 2018

Build succeeded

jniles commented Mar 28, 2018 •

edited

Loading

mbayopanda Mar 29, 2018 •

edited

Loading