print qrcode

src/app/api/pdf/actions.ts

@@ -0,0 +1,24 @@
+"use server";
+
+import { serverFetchBlob } from "@/app/utils/fetchUtil";
+import { BASE_API_URL } from "@/config/api";
+
+
+export interface FileResponse {
+    filename: string;
+    blobValue: Uint8Array;
+}
+
+
+export const fetchPoQrcode = async (data: any) => {
+    const reportBlob = await serverFetchBlob<FileResponse>(
+        `${BASE_API_URL}/stockInLine/print-label`,
+        {
+            method: "POST",
+            body: JSON.stringify(data),
+            headers: { "Content-Type": "application/json" },
+        },
+    );
+
+    return reportBlob
+};

src/app/utils/commonUtil.ts

@@ -0,0 +1,10 @@
+
+
+export const downloadFile = (blobData: Uint8Array, filename: string) => {
+    const url = URL.createObjectURL(new Blob([blobData]));
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", filename);
+    link.click();
+  }
+  

src/app/utils/fetchUtil.ts

@@ -74,6 +74,79 @@ export async function serverFetchJson<T>(...args: FetchParams) {
   }
 }
 
+export async function serverFetchBlob<T>(...args: FetchParams) {
+  const response = await serverFetch(...args);
+
+  if (response.ok) {
+    const body = response.body;
+    // console.log(body)
+    // console.log(body?.tee()[0].getReader())
+
+    const reader = body?.getReader();
+    let finalUInt8Array = new Uint8Array();
+    let done = false;
+
+    while (!done) {
+      const read = await reader?.read();
+
+      // version 1
+      if (read?.done) {
+        done = true;
+      } else {
+        const tempUInt8Array = new Uint8Array(
+          finalUInt8Array.length + read?.value.length!,
+        );
+        tempUInt8Array.set(finalUInt8Array);
+        tempUInt8Array.set(read?.value!, finalUInt8Array.length);
+        finalUInt8Array = new Uint8Array(tempUInt8Array.length!);
+        finalUInt8Array.set(tempUInt8Array);
+
+        // console.log("1", finalUInt8Array)
+      }
+    }
+
+    // version 2 & return bodyRead
+    // const bodyRead = reader?.read().then(function processText({ done, value }): any {
+    //   // Result objects contain two properties:
+    //   // done  - true if the stream has already given you all its data.
+    //   // value - some data. Always undefined when done is true.
+    //   if (done) {
+    //     console.log("Stream complete");
+    //     return { filename: response.headers.get("filename"), blobValue: finalUInt8Array } as T;;
+    //   }
+
+    //   // value for fetch streams is a Uint8Array
+    //   finalUInt8Array = new Uint8Array(value.length)
+    //   finalUInt8Array.set(value)
+
+    //   console.log(finalUInt8Array)
+    //   // Read some more, and call this function again
+    //   return reader.read().then(processText);
+    // })
+    // const bodyValue = bodyRead?.value
+
+    // const blob = await response.blob()
+    // const blobText = await blob.text();
+    // const blobType = await blob.type;
+
+    // console.log(bodyReader)
+    // console.log("2", finalUInt8Array)
+    // console.log(bodyValue)
+    return {
+      filename: response.headers.get("filename"),
+      blobValue: finalUInt8Array,
+    } as T;
+  } else {
+    switch (response.status) {
+      case 401:
+        signOutUser();
+      default:
+        console.error(await response.text());
+        throw Error("Something went wrong fetching data in server.");
+    }
+  }
+}
+
 export const signOutUser = () => {
   const headersList = headers();
   const referer = headersList.get("referer");

src/components/PoDetail/PoInputGrid.tsx

@@ -43,9 +43,12 @@ import LooksOneIcon from '@mui/icons-material/LooksOne';
 import LooksTwoIcon from '@mui/icons-material/LooksTwo';
 import Looks3Icon from '@mui/icons-material/Looks3';
 import axiosInstance from "@/app/(main)/axios/axiosInstance";
-import axios from "axios";
+import axios, { AxiosRequestConfig } from "axios";
 import { NEXT_PUBLIC_API_URL } from "@/config/api";
+import qs from 'qs';
 import QrCodeIcon from '@mui/icons-material/QrCode';
+import { downloadFile } from "@/app/utils/commonUtil";
+import { fetchPoQrcode } from "@/app/api/pdf/actions";
 interface ResultWithId {
   id: number;
 }
@@ -241,6 +244,16 @@ function PoInputGrid({
     []
   );
 
+  const printQrcode = useCallback(async (row: any) => {
+    console.log(row.id)
+    const postData = {stockInLineIds: [row.id]}
+    const response = await fetchPoQrcode(postData)
+    if (response) {
+      console.log(response)
+        downloadFile(new Uint8Array(response.blobValue), response.filename!!)
+    }
+  }, [fetchPoQrcode, downloadFile])
+
   const handleQrCode = useCallback(
     (id: GridRowId, params: any) => () => {
       setRowModesModel((prev) => ({
@@ -254,6 +267,7 @@ function PoInputGrid({
         // return the record with its status as pending
         // update layout
         console.log("delayed");
+        printQrcode(params.row)
       }, 200);
     },
     []