Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
14 kB
3
Indexable
import { useState, useEffect, useContext, useRef } from 'react';
import { Link } from 'react-router-dom';
import circle from '../pictures/circle.png';
import line from '../pictures/line.png';
import axios from '../config/axios';
import StatusButton from '../components/StatusButton';
import { ReRenderContext } from '../context/ReRenderContext';
import { FiPrinter } from 'react-icons/fi';
import { useReactToPrint } from 'react-to-print';

function OrderPage() {
  const componentRef = useRef(null);

  const { reRender } = useContext(ReRenderContext);
  const [saleOrders, setSaleOrders] = useState([]);

  const [transactionSelectedOrderObj, setTransactionSelectedOrderObj] =
    useState({
      bankAccountName: '',
      bankName: '',
      paymentDate: '',
      amount: '',
    });

  const [transactions, setTransactions] = useState([]);

  const getCartProductByUserId = async () => {
    try {
      const res = await axios.get(`/sale_orders/getSaleOrderByUserId`);
      setSaleOrders(res.data.saleOrders);
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    getCartProductByUserId();
  }, [reRender]);
  let i = 1;
  console.log(saleOrders);
  // const componentRefs = saleOrders.map(() => useRef(null));
  //-----------------------------------------------
  const printComponent = useReactToPrint({
    content: () => componentRef.current,
  });
  // // const handlePrint = (componentRefsIndex) => {
  // //   console.log('componentRef', componentRef);
  // //   printComponent();
  // // };

  const handlePrint = () => {
    // if (componentRef.current) {
    //   Add your printing logic here using the ref
    //   For example: componentRef.current.print();
    //   console.log('Printing:', componentRef.current.print());
    // }
    printComponent();
  };
  //-----------------------------------------------
  //-----------------------------------------------
  //-----------------------------------------------
  console.log('sale orders', saleOrders);

  const handleGetTransactionBySaleOrderId = async (saleOrderId) => {
    try {
      const res = await axios.get(`/transactions/get/saleOrder/${saleOrderId}`);
      console.log(res.data?.transactions);
      setTransactions(res.data?.transactions);
      // setTransactionSelectedOrderObj(res.data?.transactions[0]);
    } catch (error) {
      console.log(error);
    }
  };
  // useEffect(() => {
  //   try {
  //     handleGetTransactionBySaleOrderId();
  //   } catch (error) {
  //     console.log(error);
  //   }
  // }, []);

  return (
    <div>
      {saleOrders.map((el, index) => {
        i = 0;
        return (
          <div className='border-2'>
            <br />
            <div
              className='border-2 rounded-lg m-2 p-2'
              key={el?.id}
              ref={componentRef}
            >
              <div className='flex flex-col'>
                <div className=''>
                  <h1 className='text-orange-400 text-[35px] text-bold'>
                    ใบส่งของชั่วคราว
                  </h1>
                  <br />
                  <div className='flex justify-end text-gray-600 text-[23px]'>
                    <p>{`เลขที่: ${el.id}`}</p>
                  </div>
                  <div className='flex justify-end text-gray-600 text-[23px]'>
                    <h2>{`วันที่: ${el.createdAt.slice(
                      8,
                      10
                    )}${el.createdAt.slice(4, 7)}-${el.createdAt.slice(
                      0,
                      4
                    )}`}</h2>
                  </div>
                  <div className='flex justify-center text-gray-600 text-[23px]'>
                    <h2>{`นามลูกค้า: ${el.User?.name || '-'}`}</h2>
                  </div>
                  <div className='flex justify-between'>
                    <div>
                      <div className=' text-gray-600 text-[23px] gap-4 flex flex-col justify-between'>
                        <h2>{`นามผู้รับของ: ${el.recipientName}`}</h2>
                      </div>
                      <p className='text-[23px] text-gray-600'>{`เบอร์โทรหน้างาน: ${el.recipientPhoneNumber}`}</p>
                      <p className='text-[23px] text-gray-600'>{`ที่อยู่จัดส่ง: ${el.deliveryAddress}`}</p>
                    </div>
                    <div>
                      <p className='text-[23px] text-gray-600'>{`ประเภทการชำระเงิน: ${
                        el?.paymentType === 'cash_on_delivery'
                          ? 'เงินสดปลายทาง'
                          : el?.paymentType === 'in_store_cash'
                          ? 'เงินสดหน้าร้าน'
                          : el?.paymentType === 'transfer'
                          ? 'โอน'
                          : el?.paymentType === 'cheque'
                          ? 'เช็ค'
                          : '-'
                      }`}</p>
                      <p className='text-[23px] text-gray-600'>{`น้ำหนักรวม: ${
                        el?.netWeight || '-'
                      } kg`}</p>
                    </div>
                  </div>
                </div>
              </div>
              <br />
              <div>
                {transactions.length > 0 ? (
                  transactions.map((el, index) => {
                    return (
                      <>
                        <div className='flex justify-between gap-1' key={el}>
                          <div className='w-[280px] h-[67px] items-center flex gap-2 p-2 border-2 rounded-lg border-orange-400 bg-orange-100'>
                            <div className='flex  justify-center  '>
                              <p
                                htmlFor='bankName'
                                className=' text-xl text-gray-600    '
                              >
                                ชื่อธนาคาร :
                              </p>
                            </div>
                            <p className='text-xl text-gray-600'>
                              {el?.bankName}
                            </p>
                          </div>
                          <br />
                          <div className='items-center w-[261px] h-[67px] flex gap-2 p-2 border-2 rounded-lg border-orange-400 bg-orange-100'>
                            <div className='flex  justify-center  '>
                              <p
                                htmlFor='bankAccountName'
                                className=' text-xl text-gray-600    '
                              >
                                ชื่อบัญชี :
                              </p>
                            </div>
                            <p className='text-xl text-gray-600'>
                              {el?.bankAccountName}
                            </p>
                          </div>
                          <div className='items-center w-[302px] h-[67px] flex gap-2 p-2 border-2 rounded-lg border-orange-400 bg-orange-100'>
                            <div className='text-xl text-gray-600'>
                              วันที่ชำระเงิน :
                            </div>
                            <p className='text-xl text-gray-600'>
                              {el?.paymentDate}
                            </p>
                          </div>
                          <div className='items-center w-[268px] h-[67px] flex gap-2 p-2 border-2 rounded-lg border-orange-400 bg-orange-100'>
                            <div className='flex  justify-center  '>
                              <div className=' text-xl text-gray-600'>
                                ยอดชำระ :
                              </div>
                            </div>
                            <p className='text-xl text-gray-600'>
                              {el?.amount}
                            </p>
                          </div>
                        </div>
                        <div className='border-t-2 border-white'></div>
                      </>
                    );
                  })
                ) : (
                  <></>
                )}
              </div>

              <div>
                <div className='text-[23px] flex flex-col items-center'>
                  <div className='flex gap-8 '>
                    <div className='flex gap-2'>
                      <h1 className='text-gray-600'>สถานะการชำระเงิน : </h1>
                      <h1 className='text-orange-400'>{el.paymentStatus}</h1>
                    </div>
                    <div className='flex gap-2'>
                      <h1 className='text-gray-600'>สถานะการจัดส่งสินค้า : </h1>
                      <h1 className='text-orange-400'>{el.deliveryStatus}</h1>
                    </div>
                  </div>
                </div>
                <br />
                <div className='flex justify-center '>
                  <StatusButton
                    status={el.deliveryStatus}
                    option={'กำลังดำเนินการ'}
                  />
                  {/* <img src={line} alt='line' className='w-[180px] h-[70px]' /> */}
                  <div className=''>{'--->'}</div>
                  <StatusButton
                    status={el.deliveryStatus}
                    option={'พร้อมส่ง'}
                  />
                  <div className=''>{'--->'}</div>
                  <StatusButton
                    status={el.deliveryStatus}
                    option={'กำลังส่ง'}
                  />
                  <div className=''>{'--->'}</div>
                  <StatusButton
                    status={el.deliveryStatus}
                    option={'ส่งเสร็จสิ้น'}
                  />
                </div>
              </div>
              <br />
              <div className=' rounded-lg border-2'>
                <div className=''>
                  <table className='w-full bg-gradient-to-t from-yellow-500 to-yellow-300 text-gray-600'>
                    <tr className='text-[23px] h-[10px]'>
                      <th className='p-3'>ลำดับ</th>
                      <th className='p-3'>รายการ</th>
                      <th className='p-3'>จำนวน</th>
                      <th className='p-3'>ราคา/หน่วย</th>
                      <th className='p-3 flex justify-end'>รวม/บาท</th>
                    </tr>
                    {el?.SaleOrderProducts.map((elIn, index) => {
                      console.log(elIn);
                      i++;
                      return (
                        <tr
                          className='text-[23px] text-gray-600 text-center bg-white border-b-2'
                          key={elIn.id}
                        >
                          <td className=''>{i}</td>
                          <td className='text-left w-[430px]'>
                            {elIn?.Product?.name}
                          </td>
                          <td className=''>{elIn?.amount}</td>
                          <td className=''>
                            <div className='flex justify-end '>
                              {elIn?.unitPrice}
                            </div>
                          </td>
                          <td className='flex justify-end'>
                            {(elIn?.amount * elIn?.unitPrice).toFixed(2)}
                          </td>
                        </tr>
                      );
                    })}
                  </table>
                </div>
                <br />
                <div className='container text-[23px] flex flex-col items-end  h-[112px] text-gray-600'>
                  <div className='flex gap-20'>
                    <p>ยอดรวมสุทธิ</p>
                    <div className='flex justify-end w-[102px] '>
                      {(+el?.netPrice - +el?.deliveryFee).toFixed(2)}
                    </div>
                  </div>
                  <div className='flex gap-20'>
                    <p>ค่าขนส่ง</p>
                    <div className='flex justify-end w-[102px] '>
                      {el?.deliveryFee}
                    </div>
                  </div>
                  <div className='flex gap-20'>
                    <p>รวม</p>
                    <div className='flex justify-end w-[102px] '>
                      {el?.netPrice}
                    </div>
                  </div>
                </div>
              </div>
              <br />
              <div className='flex justify-between text-[23px] text-gray-600 border-2 rounded-lg '>
                <p className=''>{`ผู้รับของ: `}</p>
                <div className='w-[300px] flex justify-start'>
                  <p className=''>{`ผู้ส่งของ:`}</p>
                </div>
              </div>
              <br />
            </div>
            <br />
            <div className='flex justify-center'>
              <button
                className='w-[200px] h-[60px] btn btn-secondary text-white text-lg gap-2 font-bold hover:scale-105'
                onClick={() => {
                  handlePrint();
                  // printComponent(componentRefs[index]);
                  // handlePrint(componentRefs[index]);
                }}
              >
                <FiPrinter size={28} />
                <p>พิมพ์ใบส่งของ</p>
              </button>
            </div>
            <br />
          </div>
        );
      })}
    </div>
  );
}

export default OrderPage;