formulaire-creation-objet.php

@extends('layouts.page-layout')

@section('title', '{{ $pageTitle }}')

@section('content')
<div class="container mt-3">
    <noscript>
        <div class="alert alert-danger">L'activation de Javascript est nécessaire sur la page.</div>
    </noscript>
    @if(!empty($insertMessage))
    <div class="alert alert-{{ $insertMessage["status"] }}" role="alert">
        @if(!empty($insertMessage["pdoError"]))
            <strong>{{ $insertMessage["message"] }}</strong>
            <br>{{ $insertMessage["pdoError"] }}
        @else
            {{ $insertMessage["message"] }}
        @endif
    </div>
    @endif

    <div class="max-700">
        <h1>{{ $pageTitle }}</h1>


        <div class="border rounded bg-light p-2">
            <h5>Type d'objet à créer</h5>
            <select id="objectType" class="form-select form-select-sm" aria-label=".form-select-sm example">
                <option value="dontchooseme" selected>Choisissez un objet dans la liste</option>
                <option value="Auteur">Auteur (oui c'est triste mais on les considère comme tel dans le code :c)</option>
                <option value="Adherent">Adhérent (est-ce surprenant du coup?)</option>
                <option value="Livre">Livre</option>
                <option value="Nationalite">Nationalité</option>
                <option value="Genre">Genre</option>
                <option value="Categorie">Categorie</option>
            </select>
        </div>
        <form action="index.php" method="post" class="mt-2" id="objectForm">
        </form>
    </div>
</div>

<script type="text/javascript">
    const objectForm = document.getElementById("objectForm");
    const selectObjectType = document.getElementById("objectType");
    selectObjectType.addEventListener('change', function (){
        if(selectObjectType.value !== 'dontchooseme') {
            loadObjectTypeForm(selectObjectType.value);
        }
    })
    const typesList = {
        "int" : "number",
        "varchar" : "text",
        "date" : "date"
    };

    async function loadObjectTypeForm(objectType){
        objectForm.innerHTML = "";

        await fetch('?action=describeTable&tableName=' + objectType)
            .then(res => res.json())
            .then((out) => {
                console.log('Output: ', out);

                let objectName = document.createElement("input");
                objectName.name = "objectName";
                objectName.setAttribute("value", objectType);
                objectName.hidden = true;
                objectForm.appendChild(objectName);

                if(out.status === "success"){
                    for(let i = 0; i < out.columns.length; i++){
                        // On évite de proposer les clés primaires auto incrémentables
                        if(out.columns[i].Extra !== "auto_increment"){
                            let columnType = out.columns[i].Type;
                            let typeMatch = columnType.match(/([a-z]*)/);
                            let comment = null;

                            if(out.columns[i].Comment !== ""){
                                let splitedComment = out.columns[i].Comment.split(',');
                                for(let c = 0; c<splitedComment.length; c++){
                                    let commentMatch = splitedComment[c].match(/(^[^%].*[^%]$)/);
                                    if(commentMatch && commentMatch !== undefined){
                                        comment = commentMatch[1];
                                    }
                                }

                            }

                            objectForm.appendChild(
                                createInputDiv(
                                    typesList[typeMatch[1]],
                                    out.columns[i].Field,
                                    comment
                                )
                            );
                        }
                    }
                }else{
                    let errorAlert = document.createElement("div");
                    errorAlert.classList.add("alert");
                    errorAlert.classList.add("alert-danger");
                    errorAlert.innerHTML = "<b>Erreur lors de la récupération des spécifications de l'objet " + objectType + "</b><br>" + out.message;
                    objectForm.appendChild(errorAlert);
                }
            }).catch(err => console.error(err));

        let actionInput = document.createElement("input");
        actionInput.name = "action";
        actionInput.value = "creerObjet";
        actionInput.hidden = true;

        objectForm.appendChild(actionInput);

        let submitButton = document.createElement("button");
        submitButton.type = "submit";
        submitButton.classList.add("btn");
        submitButton.classList.add("btn-primary");
        submitButton.innerText = "Créer";

        objectForm.appendChild(submitButton);
    }

    function createInputDiv(type, name, description=null){
        let mainContainer = document.createElement("div");
        mainContainer.classList.add("mb-3");

        let label = document.createElement("label");
        label.classList.add("form-label");
        label.setAttribute("for", name);

        let showName = name.split(/(?=[A-Z])/).join(' ').toLowerCase();
        showName = showName.charAt(0).toUpperCase() + showName.slice(1);

        label.innerText = showName;

        mainContainer.appendChild(label);

        let input = document.createElement("input");
        input.classList.add("form-control");
        input.type = type;
        input.name = name;
        input.required = true;

        mainContainer.appendChild(input);

        if(description != null) {
            let small = document.createElement("small");
            small.classList.add("form-text");
            small.classList.add("text-muted");
            small.innerText = description;

            mainContainer.appendChild(small);
        }

        return mainContainer;
    }
</script>
@endsection