IntProgLabs/front/src/Pages/OrderPage.jsx

import { React, useState, useEffect } from "react";
import Table from "../general/Table";
import ToolBar from "../general/ToolBar";
import Modal from "../general/Modal";
import DataService from "../DataService";
import Order from "../models/Order";
import Product from "../models/Product";
import Supplier from "../models/Supplier";

export default function OrderPage(){
    const url = 'order/'
    const supplierUrl = 'supplier/'
    const productUrl = 'product/'

    const transformer = (data) => new Order(data)
    const transformerSupplier = (data) => new Product(data)
    const transformerProduct = (data) => new Supplier(data)

    const [orders, setOrders] = useState([])
    const [currOrder, setCurrOrder] = useState('')

    const[suppliers, setSuppliers] = useState([])
    const[supplier, setSupplier] = useState('')

    const [products, setProducts] = useState([])

    const [modalHeader, setModalHeader] = useState('')
    const [modalConfirm, setModalConfirm] = useState('')
    const [modalVisible, setModalVisible] = useState(false)
    const [isAddProd, setIsAddProd] = useState(false)

    const [isEdit, setEdit] = useState(false)
    const [addProdVisible, setAddProdVisible] = useState(false)
    
    const headers = [
        { name: 'date', label: 'Дата заказа' },
        { name: 'supplierName', label: 'Поставщик' },
        { name: 'products', label: 'Продукт(ы)' }
    ];

    let selectedItems = [];

    useEffect(() => {
        loadItems()
        //eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const loadItems = () => {
        DataService.getOrders(url).then(data => {
            console.log(data)
            setOrders([])
            data.map(order => {
                setOrders(prevState => [...prevState, new Order(order)])
            })
        })

        DataService.readAll(supplierUrl, transformerSupplier).then(data => setSuppliers(data))
        DataService.readAll(productUrl, transformerProduct).then(data => setProducts(data))
    }

    const add = () =>{

    }

    const edit = () =>{

    }

    const remove = () =>{

    }

    const addProduct = () =>{
        if (selectedItems.length === 0) 
            return
        
        DataService.read(url + selectedItems[0], transformer)
        .then(data => {



            setEdit(false)
            setAddProdVisible(true)
            setModalHeader('Добавление продукта к заказу')
            setModalConfirm('Сохранить')
            edit(data)
        }); 
    }

    const removeProduct = () =>{

    }

    const handleFormChange = (event) => {
        console.log(currOrder)
        setData({ ...data, [event.target.id]: event.target.value })
        console.log(data)
    }


    const handleTableClick = (tableSelectedItems) => {selectedItems = tableSelectedItems;}
    const handleTableDblClick = (tableSelectedItem) =>{}
    const hideModal = () => {
        setModalVisible(false)
        setAddProdVisible(false)
    }
    const modalDone = () => {}

    return(
        <>
            <ToolBar 
                add={add}
                edit={edit}   
                remove={remove}
                addProduct={addProduct}
                removeProduct={removeProduct}
                addsVisible={true}/>

            <Table 
                headers={headers} 
                items={orders}
                selectable={true}
                onClick={handleTableClick}
                onDblClick={handleTableDblClick}/>

            <Modal
                header={modalHeader}
                confirm={modalConfirm}
                visible={modalVisible} 
                onHide={hideModal}
                onDone={modalDone}> 
                    <div className="mb-3">
                        <label htmlFor="supplierId" className="form-label">Поставщик</label>
                        <select id="supplierId" className="form-select" required
                            value={currOrder.supplierId} onChange={handleFormChange}>
                            <option disabled value="">Укажите поставщика</option>
                            {
                                suppliers.map(supplier => 
                                    <option key={supplier.id} value={supplier.id}>{supplier.name}</option>
                                )
                            }
                        </select>
                    </div>

                    <div className="mb-3">
                        <label htmlFor="product" className="form-label">Поставщик</label>
                        <select id="product" className="form-select" required
                            onChange={handleFormChange}>
                            <option disabled value="">Укажите продукт</option>
                            {
                                products.map(product => 
                                    <option key={product.id} value={product.id}>{product.name}</option>
                                )
                            }
                        </select>
                    </div>
            </Modal>

            <Modal            
            header={modalHeader}
            confirm={modalConfirm}
            visible={addProdVisible} 
            onHide={hideModal}
            onDone={modalDone}>
                <div className="mb-3">
                    <label htmlFor="product" className="form-label">Поставщик</label>
                    <select id="product" className="form-select" required
                        value={products} onChange={handleFormChange}>
                        <option disabled value="">Укажите продукт</option>
                        {
                            products.map(product => 
                                <option key={product.id} value={product.id}>{product.name}</option>
                            )
                        }
                    </select>
                </div>
        </Modal>
        </>
    )
}