aswi2021mr-proper-gitlab/application/view/modals/editUserModal.html @ 76543147

<div id="edit-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row my-1" id="username-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label for="username">Uživatelské jméno: <b class="required">*</b></label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <input class="min-wdth" id="username"/>
                        </div>
                    </div>
                    <div class="row my-1" id="password-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label for="password">Heslo:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <input type="password" class="min-wdth" id="password"/>
                        </div>
                    </div>
                    <div class="row my-1">
                        <div class="col-xs-12 col-sm-4">
                            <label for="email">Email:  <b class="required">*</b></label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <input class="min-wdth" id="email"/>
                        </div>
                    </div>
                    <div class="row my-1">
                        <div class="col-xs-12 col-sm-4">
                            <label for="rights">Práva:  <b class="required">*</b></label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <select class="min-wdth" id="rights">
                                <option value = "editor">Editor</option>
                                <option value = "admin">Admin</option>
                            </select>
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="submit-but" class="btn btn-default" data-dismiss="modal"></button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Zavřít</button>
            </div>
        </div>
    </div>
</div>

<script>
    $('#edit-modal').on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget);
        const pseudo_id = button.data('pseudo-id');// Extract info from data-* attributes
        const title = button.data('title');// Extract info from data-* attributes

        let modal = $(this);
        modal.find('.modal-title').text(title);

        if(title === "Nový uživatel"){
            prefill(modal);
            modal.find('#submit-but').text("Založit");
            modal.find("#username-wrapper").show();
            modal.find("#password-wrapper").show();
            modal.find('#submit-but').click(() => createData(modal));

            enableSubmit(modal, true);
            modal.find("#email").change(() => enableSubmit(modal, true));
            modal.find("#rights").change(() => enableSubmit(modal, true));
            modal.find("#username").change(() => enableSubmit(modal, true));
        } else {
            const data_obj = users[pseudo_id];
            modal.find('#submit-but').text("Upravit");
            modal.find("#username-wrapper").hide();
            modal.find("#password-wrapper").hide();
            modal.find('#submit-but').click(() => editData(data_obj, modal));
            prefill(modal, data_obj);

            enableSubmit(modal, false);
            modal.find("#email").change(() => enableSubmit(modal, true));
            modal.find("#rights").change(() => enableSubmit(modal, true));
            modal.find("#username").change(() => enableSubmit(modal, true));
        }
    });

    function enableSubmit(modal, createNew){
        if(
            modal.find("#email")[0].value === "" ||
            modal.find("#rights")[0].value === "" ||
            (modal.find("#username")[0].value === "" && !createNew)
        ){
            modal.find("#submit-but").prop( "disabled", true );
        } else {
            modal.find("#submit-but").prop( "disabled", false );
        }
    }

    function prefill(modal, data = null){
        modal.find("#username").val("");
        modal.find("#password").val("");
        modal.find("#email").val("");
        modal.find("#rights").val("");

        if(data !== null){
            modal.find("#email").val(data.email);
            modal.find("#rights").val(data.role);
        }
    }

    function editData(data, modal){
        const formData = prepareFormData(modal);
        formData.append("userId", data.id);

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "./controller/UpdateUserRoleController.php");
        xhr.send(formData);
        setTimeout(function(){
         fetchUsers(); //reload data after item delete
        }, 500);
    }

    function prepareFormData(modal) {
        const formData = new FormData();
        formData.append("role", modal.find("#rights")[0].value);
        formData.append("email", modal.find("#email")[0].value);

        return formData;
    }

    function createData(modal){
        const formData = prepareFormData(modal);
        const username = modal.find("#username")[0].value;
        if(username !== undefined && username !== null){
            formData.append("username", username);
            formData.append("password", modal.find("#password")[0].value);

            var xhr = new XMLHttpRequest();
            xhr.open("POST", "./controller/RegistrationController.php");
            xhr.send(formData);
            setTimeout(function(){
                fetchUsers(); //reload data after item delete
            }, 500);
        }
    }
</script>