[REF] web, barcodes: remove legacy dialog

This commit replaces the legacy dialog by the new one.

Part of task-id 3439226

Part-of: odoo/odoo#129774
This commit is contained in:
Pierre Rousseau
2023-07-31 19:02:57 +02:00
committed by Aaron Bohy
parent 83ed99d973
commit 72dbb75d4d
5 changed files with 33 additions and 38 deletions
@@ -18,7 +18,7 @@ export class BarcodeScanner extends Component {
let error = null;
let barcode = null;
try {
barcode = await scanBarcode(this.facingMode);
barcode = await scanBarcode(this.env, this.facingMode);
} catch (err) {
error = err.error.message;
}
@@ -262,7 +262,7 @@ export class Many2OneField extends Component {
}
}
async onBarcodeBtnClick() {
const barcode = await BarcodeScanner.scanBarcode();
const barcode = await BarcodeScanner.scanBarcode(this.env);
if (barcode) {
await this.onBarcodeScanned(barcode);
if ("vibrate" in browser.navigator) {
@@ -2,26 +2,14 @@
/* global BarcodeDetector */
import { browser } from "@web/core/browser/browser";
import Dialog from "@web/legacy/js/core/owl_dialog";
import { Dialog } from "@web/core/dialog/dialog";
import { delay } from "@web/legacy/js/core/concurrency";
import { loadJS, templates } from "@web/core/assets";
import { loadJS } from "@web/core/assets";
import { isVideoElementReady, buildZXingBarcodeDetector } from "./ZXingBarcodeDetector";
import { CropOverlay } from "./crop_overlay";
import {
App,
Component,
EventBus,
onMounted,
onWillStart,
onWillUnmount,
useRef,
useState,
} from "@odoo/owl";
import { Component, onMounted, onWillStart, onWillUnmount, useRef, useState } from "@odoo/owl";
import { _t } from "@web/core/l10n/translation";
const bus = new EventBus();
const busOk = "BarcodeDialog-Ok";
const busError = "BarcodeDialog-Error";
export class BarcodeDialog extends Component {
/**
@@ -127,8 +115,8 @@ export class BarcodeDialog extends Component {
* @param {string} result found code
*/
onResult(result) {
this.props.onClose();
bus.trigger(busOk, result);
this.props.close();
this.props.onResult(result);
}
/**
@@ -137,8 +125,8 @@ export class BarcodeDialog extends Component {
* @param {Error} error
*/
onError(error) {
this.props.onClose();
bus.trigger(busError, { error });
this.props.close();
this.props.onError(error);
}
/**
@@ -201,22 +189,17 @@ export function isBarcodeScannerSupported() {
*
* @returns {Promise<string>} resolves when a {qr,bar}code has been detected
*/
export async function scanBarcode(facingMode = "environment") {
export async function scanBarcode(env, facingMode = "environment") {
let res;
let rej;
const promise = new Promise((resolve, reject) => {
bus.on(busOk, null, resolve);
bus.on(busError, null, reject);
res = resolve;
rej = reject;
});
const appForBarcodeDialog = new App(BarcodeDialog, {
env: owl.Component.env,
dev: owl.Component.env.isDebug(),
templates,
translatableAttributes: ["data-tooltip"],
translateFn: _t,
props: {
onClose: () => appForBarcodeDialog.destroy(),
facingMode: facingMode,
},
env.services.dialog.add(BarcodeDialog, {
facingMode,
onResult: (result) => res(result),
onError: (error) => rej(error),
});
await appForBarcodeDialog.mount(document.body);
return promise;
}
@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="web.BarcodeDialog" owl="1">
<Dialog title="'Barcode Scanner'" onClosed="props.onClose" fullscreen="true" renderFooter="false" contentClass="'o-barcode-modal'">
<Dialog title="'Barcode Scanner'" fullscreen="true" footer="false" contentClass="'o-barcode-modal'">
<CropOverlay onResize.bind="this.onResize" isReady="state.isReady">
<video t-ref="videoPreview" muted="true" autoplay="true" playsinline="true" class="w-100 h-100"/>
</CropOverlay>
@@ -8,12 +8,24 @@ import {
patchWithCleanup,
triggerEvent,
} from "@web/../tests/helpers/utils";
import { registry } from "@web/core/registry";
import { uiService } from "@web/core/ui/ui_service";
import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
import { scanBarcode, BarcodeDialog } from "@web/webclient/barcode/barcode_scanner";
import { createWebClient } from "@web/../tests/webclient/helpers";
import { dialogService } from "@web/core/dialog/dialog_service";
import { overlayService } from "@web/core/overlay/overlay_service";
QUnit.module("Barcode scanner", {});
QUnit.test("Barcode scanner crop overlay", async (assert) => {
registry.category("services").add("ui", uiService);
registry.category("services").add("hotkey", hotkeyService);
registry.category("services").add("dialog", dialogService);
registry.category("services").add("overlay", overlayService);
const { env } = await createWebClient({});
const firstBarcodeValue = "Odoo";
const secondBarcodeValue = "O-CMD-TEST";
@@ -70,7 +82,7 @@ QUnit.test("Barcode scanner crop overlay", async (assert) => {
},
});
const firstBarcodeFound = scanBarcode();
const firstBarcodeFound = scanBarcode(env);
await videoReady;
// Needed due to the change on the props in the Crop component
await nextTick();
@@ -113,7 +125,7 @@ QUnit.test("Barcode scanner crop overlay", async (assert) => {
barcodeToGenerate = secondBarcodeValue;
videoReady = makeDeferred();
const secondBarcodeFound = scanBarcode();
const secondBarcodeFound = scanBarcode(env);
await videoReady;
const secondValueScanned = await secondBarcodeFound;
assert.strictEqual(