GGMM/GrossesMitaines/grosses-mitaines-ui/src/components/Modify.js

import { useState, useEffect } from "react"
import { Dropdown } from "react-bootstrap";
import { Button } from "react-bootstrap";
import { useForm } from "react-hook-form";

function renderStatus(statusCode) {
    if (statusCode !== undefined) {

        switch (statusCode) {
            case 0:
                return ("Disponible");
            case 1:
                return ("En commande");
            case 2:
                return ("Indisponible");
            case 3:
                return ("Liquidation");
            case 4:
                return ("Promotion");
            case 5:
                return ("Discontinué");
            default:
                return (<></>);
        }
    }

}

const Modify = ({ morceau, onModify }) => {

    const { register, handleSubmit, formState: { errors } } = useForm();

    const [currentStatus, setStatus] = useState(renderStatus(morceau.status));
    const [title, setTitle] = useState(morceau.title);
    const [description, setDescription] = useState(morceau.description);
    const [category, setCategory] = useState(morceau.category);
    const [price, setPrice] = useState(morceau.price);
    const [promoPrice, setPromoPrice] = useState(morceau.promoPrice);
    const [quantity, setQuantity] = useState(morceau.quantity);
    const [status, setStatusValue] = useState(morceau.status);

    const [imageFile, setImage] = useState(null);
    const [imageUrl, setImageUrl] = useState(null);


    useEffect(() => {

        if (imageFile)
            setImageUrl(URL.createObjectURL(imageFile));
        else {
            fetch(`https://localhost:7292/api/Image?id=${morceau.id}`)
                .then(response => response.blob())
                .then(blob => {
                    setImageUrl(URL.createObjectURL(blob));
                })
        }

    }, [imageFile]);


    const id = morceau.id;

    const onSubmit = (e) => {
        // Appeler le comportement
        onModify({
            id: morceau.id,
            title: title,
            description: description,
            category: category,
            price: price,
            promoPrice: promoPrice,
            quantity: quantity,
            imageFile: imageFile,
            imageName: morceau.imageName,
            status: status,
        },
            morceau.title
        );
    }


    const handleImageChange = (e) => {
        if (e.target.files && e.target.files[0])
            setImage(e.target.files[0]);
        else
            setImage(null);
    }

    return (
        <div className="inventaire-form-container">
            <form className="form-horizontal" onSubmit={handleSubmit(onSubmit)}>
                <h4 className="text-center">Modifier morceau: {morceau.title}</h4>
                <div className="form-group">
                    <label>Morceau: </label>
                    <input {...register("title", { required: true, maxLength: 255 })}
                        className="form-control form-input" type='text'
                        placeholder="Nom du morceau..."
                        value={title}
                        onChange={(e) => setTitle(e.target.value)} />
                </div>
                <div className="Error_color">
                    {errors.title && errors.title.type === 'required' && <span>Veuillez entrer un titre de morceaux.</span>}
                    {errors.title && errors.title.type === 'maxLength' && <span>Ne doit pas dépasser 255 caractères!</span>}
                </div>

                <div className="form-group">
                    <label>Description: </label>
                    <input {...register("description", { required: true })}
                        type='text' className="form-control form-input"
                        placeholder="Description du morceau..."
                        value={description}
                        onChange={(e) => setDescription(e.target.value)} />
                </div>
                <div className="Error_color">
                    {errors.description && errors.description.type === 'required' && <span>Veuillez écrire une description.</span>}
                </div>

                <div className="form-group">
                    <label>Catégorie: </label>
                    <input {...register("category", { required: true })}
                        type='text' className="form-control form-input"
                        placeholder="Catégorie du morceau..."
                        value={category}
                        onChange={(e) => setCategory(e.target.value)} />
                </div>
                <div className="Error_color">
                    {errors.category && errors.category.type === 'required' && <span>Veuillez inscrire une catégorie.</span>}
                </div>

                <div className="form-group">
                    <label>Prix: </label>
                    <input {...register("price", { required: true, min: 0.01, max: 79228162514264337593543950335 })}
                        type='text' className="form-control form-input"
                        placeholder="Prix..."
                        value={price}
                        onChange={(e) => setPrice(e.target.value)} />
                </div>
                <div className="Error_color">
                    {errors.price && errors.price.type === 'required' && <span>Veuillez entrer un prix.</span>}
                    {errors.price && errors.price.type === 'min' && <span>Minimum 0.01$.</span>}
                    {errors.price && errors.price.type === 'max' && <span>Trop cher... voyons donc!</span>}
                </div>

                <div className="form-group">
                    <label>Prix promotionnel: </label>
                    <input {...register("promoPrice", { required: true, min: 0, max: 79228162514264337593543950335 })}
                        type='text' className="form-control form-input"
                        placeholder="Prix promotionnel..."
                        value={promoPrice}
                        onChange={(e) => setPromoPrice(e.target.value)} />
                </div>
                <div className="Error_color">
                    {errors.promoPrice && errors.promoPrice.type === 'required' && <span>Veuillez entrer un prix promotionnel.</span>}
                    {errors.promoPrice && errors.promoPrice.type === 'min' && <span>Minimum 0$.</span>}
                    {errors.promoPrice && errors.promoPrice.type === 'max' && <span>Trop cher... voyons donc!</span>}
                </div>

                <div className="form-group">
                    <label>Quantité: </label>
                    <input {...register("quantity", { min: 0 })}
                        type='text' className="form-control form-input"
                        placeholder="Quantité..."
                        value={quantity}
                        onChange={(e) => setQuantity(e.target.value)} />
                </div>
                <div className="Error_color">
                    {errors.quantity && errors.quantity.type === 'min' && <span>Minimum 0.</span>}
                </div>

                <div className="form-group">
                    <label>Image: </label>
                    <input
                        className="form-control form-input"
                        type='file'
                        accept="image/*"
                        onChange={(e) => handleImageChange(e)} />
                    {imageUrl && <div className="img-preview-container">
                        <img className="img-preview" src={imageUrl} />
                    </div>}

                </div>
                <div className="form-group">
                    <label>Status: </label>
                    <Dropdown className='status-dropdown'>
                        <Dropdown.Toggle id="dropdown-status-add">
                            {currentStatus}
                        </Dropdown.Toggle>

                        <Dropdown.Menu className='sorting-menu'>
                            <Dropdown.Item key="0" onClick={() => {
                                setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé
                                setStatusValue(0);
                            }}>
                                Disponible {/*Le nom de l'option*/}
                            </Dropdown.Item>
                            <Dropdown.Item key="2" onClick={() => {
                                setStatus("Indisponible");
                                setStatusValue(2);
                            }}>
                                Indisponible
                            </Dropdown.Item>
                            <Dropdown.Item key="1" onClick={() => {
                                setStatus("En Commande");
                                setStatusValue(1);
                            }}>
                                En Commande
                            </Dropdown.Item>
                            <Dropdown.Item key="3" onClick={() => {
                                setStatus("Liquidation");
                                setStatusValue(3);
                            }}>
                                Liquidation
                            </Dropdown.Item>
                            <Dropdown.Item key="4" onClick={() => {
                                setStatus("Promotion");
                                setStatusValue(4);
                            }}>
                                Promotion
                            </Dropdown.Item>
                            <Dropdown.Item key="5" onClick={() => {
                                setStatus("Discontinué");
                                setStatusValue(5);
                            }}>
                                Discontinué
                            </Dropdown.Item>
                        </Dropdown.Menu>
                    </Dropdown>
                </div>



                <Button className="btn-primary btn-ajouter-morceau" type="submit" >Sauvegarder</Button>
            </form>
        </div>
    )
}

export default Modify