Asynchronous printing issue

[codoffer]

Hello, I am facing the same issue with column printing. I have used promises and async/await

The same issue was opened before and closed - issue

I have created 3 separate common functions for printing and using these for sending text/image/columnText

asyncPrintBill = bill => {
    return new Promise((resolve, reject) => {
      this.Printer.printBill(bill);
      resolve();
    });
  };

  asyncPrintColumnsText = (
    columnHeader,
    columnWidth,
    columnAliment,
    columnStyle,
  ) => {
    return new Promise((resolve, reject) => {
      this.Printer.printColumnsText(
        columnHeader,
        columnWidth,
        columnAliment,
        columnStyle,
      );
      resolve();
    });
  };

  asyncPrintImage = image => {
    return new Promise((resolve, reject) => {
      this.Printer.printImage(image);
      resolve();
    });
  };

On printing screen - I have created multiple functions to craft a full bill (Function for Header, Function for Items, Function for footer, etc)

Below is a Header function -

printBillOrderInfo = () => {
    return new Promise((resolve, reject) => {
      const paymentMethod = this.order?.method
        ? orderPaymentMethods?.[this.order.method] !== undefined
          ? orderPaymentMethods?.[this.order.method]
          : ' - '
        : ' - ';
      const userName =
        this.order?.user?.name !== null ? this.order?.user?.name : ' - ';
      const pickupMethod = orderPickupMethods?.[this.order.action];
      const orderRemark = this.order?.note !== null ? this.order?.note : ' - ';
      const orderDate = codoDateformat(this.order?.create_at);
      Promise.all([
        printerService.asyncPrintColumnsText(
          ['Order Id : ', `${this.order?.order_number}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
        ),
        printerService.asyncPrintColumnsText(
          ['Method : ', `${pickupMethod}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
        ),
        printerService.asyncPrintColumnsText(
          ['Payment Method : ', `${paymentMethod}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
        ),
        printerService.asyncPrintColumnsText(
          ['Note : ', `${orderRemark}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
        ),
        printerService.asyncPrintColumnsText(
          ['User : ', `${userName}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
        ),
        printerService.asyncPrintColumnsText(
          ['Order Date : ', `${orderDate}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
        ),
        printerService.asyncPrintColumnsText(
          [`${DOUBLE_DASHED_LINE}`],
          [52],
          [ColumnAliment.LEFT],
          [''],
        ),
      ]).then(() => {
        resolve();
      });
    });
  };

In the final - Printing function (Calling by print button press), I am again calling promise.all() for asynchronous printing, but all is in vain. It's not working.

print = () => {
      Promise.all([
        this.printBillHeader(),
        this.printBillOrderInfo(),
        this.orderProductHeader(),
        this.orderProductTable(),
        this.orderTotal(),
        this.deliveryAddressPrint(),
        printerService.asyncPrintImage(
          `${MEDIA_URL + this.branch?.shopInfo?.site?.logo}`,
        ),
        printerService.asyncPrintText(
          `<C>Thank you for your visit</C>\n<C>Have a nice day</C>\n`,
        ),
      ])
        .then(() => {
          console.log('print receipt successfully.');
        })
        .catch(error => {
          showMessage({
            message: error?.message || 'Something went wrong while printing',
            type: 'error',
          });
        });
  };

Can you help me with this?

[thiendangit]

@codoffer try to using setTimeOut in asyncPrintColumnsText function!

asyncPrintColumnsText = (
    columnHeader,
    columnWidth,
    columnAliment,
    columnStyle,
  ) => {
    return new Promise((resolve, reject) => {
      setTimeOut(()=>{
        this.Printer.printColumnsText(
        columnHeader,
        columnWidth,
        columnAliment,
        columnStyle,
      );
      resolve();
      }, 100)
    });
  };

[codoffer]

Thanks @thiendangit

I have solved the issue by adding setTimeout with each method and incrementing on every use.

asyncPrintText = (text, waitTime) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.Printer.printText(text);
        resolve();
      }, waitTime * 100);
    });
  };

  asyncPrintBill = (bill, waitTime) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.Printer.printBill(bill);
        resolve();
      }, waitTime * 100);
    });
  };

  asyncPrintColumnsText = (
    columnHeader,
    columnWidth,
    columnAliment,
    columnStyle,
    waitTime,
  ) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.Printer.printColumnsText(
          columnHeader,
          columnWidth,
          columnAliment,
          columnStyle,
        );
        resolve();
      }, waitTime * 100);
    });
  };

I am using like below

printBillOrderInfo = () => {
    return new Promise((resolve, reject) => {
      const paymentMethod = this.order?.method
        ? orderPaymentMethods?.[this.order.method] !== undefined
          ? orderPaymentMethods?.[this.order.method]
          : ' - '
        : ' - ';
      const userName =
        this.order?.user?.name !== null ? this.order?.user?.name : ' - ';
      const pickupMethod = orderPickupMethods?.[this.order.action];
      const orderRemark = this.order?.note !== null ? this.order?.note : ' - ';
      const orderDate = codoDateformat(this.order?.create_at);
      Promise.all([
        printerService.asyncPrintColumnsText(
          ['Order Id : ', `${this.order?.order_number}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
          this.waitTime++,
        ),
        printerService.asyncPrintColumnsText(
          ['Method : ', `${pickupMethod}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
          this.waitTime++,
        ),
        printerService.asyncPrintColumnsText(
          ['Payment Method : ', `${paymentMethod}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
          this.waitTime++,
        ),
        printerService.asyncPrintColumnsText(
          ['Note : ', `${orderRemark}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
          this.waitTime++,
        ),
        printerService.asyncPrintColumnsText(
          ['User : ', `${userName}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
          this.waitTime++,
        ),
        printerService.asyncPrintColumnsText(
          ['Order Date : ', `${orderDate}`],
          [23, 23],
          [ColumnAliment.LEFT, ColumnAliment.RIGHT],
          ['', ''],
          this.waitTime++,
        ),
        printerService.asyncPrintColumnsText(
          [`${DOUBLE_DASHED_LINE}`],
          [52],
          [ColumnAliment.LEFT],
          [''],
          this.waitTime++,
        ),
      ]).then(() => {
        resolve();
      });
    });
  };