Site-Proximo/assets/js/listManager.js

class ListManager {

    currentData = [];
    displayedData = [];
    editableTypes = [];
    type = '';


    constructor(listContainer, type, editableTypes) {
        this.listContainer = listContainer;
        this.editableTypes = editableTypes;
        this.type = type;
        AjaxManager.get(type).then((data) => {
            this.currentData = data;
            this.generateList()
        });
    }

    generateList() {
        for (let i = 0; i < this.currentData.length; i++) {
            this.createNewListEntry(this.currentData[i]);
        }
    }

    createNewListEntry(item) {
        let listItem = this.getListItem(item);
        this.displayedData.push($(listItem));
        const index = this.displayedData.length - 1;
        let JQueryItem = this.displayedData[index];
        this.listContainer.append(JQueryItem);
        JQueryItem.on('click', () => {
            this.showEditPopup(index);
        });
    }

    deleteListEntry(id) {
        $('#listItem_' + id).remove();
    }

    getListItem(item) {
        let listItem = "<li id='listItem_" + item["id"] + "'><div>";
        for (let i = 0; i < this.editableTypes.length; i++) {
            listItem += "<span class='list-" + this.editableTypes[i]["name"] + "'>";
            if (this.editableTypes[i]["type"] === "icon")
                listItem += "<i class='mdi mdi-" + item["icon"] + "' style='margin-right: 5px'></i></span>";
            else
                listItem += item[this.editableTypes[i]["name"]] + '</span>';
        }
        listItem += "</div></li>";
        return listItem;
    }

    getFormData(defaultValues) {
        let formData = '<form action="" class="categoryForm"><div class="form-group">';
        for (let i = 0; i < this.editableTypes.length; i++) {
            let inputId = this.editableTypes[i]['name'] + 'Input';
            let inputType = this.editableTypes[i]['type'] === 'number' ? 'number' : 'text';
            let value = defaultValues[this.editableTypes[i]['name']];
            let icon = '';
            if (this.editableTypes[i]['name'] === 'icon') {
                icon = "<i class='mdi mdi-" + value + "' style='margin-left: 5px'></i>";
                let onchangeCallback = function (value) {
                    console.log($(icon));
                }
            }
            formData += '<label for="' + inputId + '">' + this.editableTypes[i]['description'] + ' :</label>' + icon +
                '<input id="' + inputId + '" type="' + inputType + '" placeholder="Entrez une valeur" class="form-control" value="' + value + '" required />';
        }
        formData += "</div></form>";
        return formData;
    }

    getFormValues(form) {
        let values = [];
        for (let i = 0; i < this.editableTypes.length; i++) {
            values.push(form.find('#' + this.editableTypes[i]['name'] + 'Input').val())
        }
        return values;
    }

    isFormValid(values) {
        let isValid = true;
        for (let i = 0; i < values.length; i++) {
            if (values[i] === '') {
                isValid = false;
                break;
            }
        }
        return isValid;
    }

    insertFormDataIntoObject(values, object) {
        for (let i = 0; i < values.length; i++) {
            object[this.editableTypes[i]['name']] = values[i];
        }
        return object;
    }

    updateListItem(values, index) {
        for (let i = 0; i < values.length; i++) {
            if (this.editableTypes[i]['type'] === 'icon')
                this.displayedData[index].find(".mdi")[0].className = "mdi mdi-" + values[i];
            else
                this.displayedData[index].find(".list-" + this.editableTypes[i]['name']).text(values[i]);
        }
    }

    showEditPopup(index) {
        let defaultValues = {
            name: "",
            icon: ""
        };
        let title = "Créer une nouvelle entrée";
        if (index !== -1) {
            defaultValues = this.currentData[index];
            title = "Modifier l'entrée";
        }
        let formData = this.getFormData(defaultValues);
        let thisInstance = this;
        $.confirm({
            title: title,
            content: formData,
            buttons: {
                formSubmit: {
                    text: 'Sauvegarder',
                    btnClass: 'btn-blue',
                    action: async function () {
                        let values = thisInstance.getFormValues(this.$content);
                        if (!thisInstance.isFormValid(values)) {
                            $.alert('Merci de rentrer toutes les valeurs');
                            return false;
                        }
                        let itemToSave = {};
                        if (index !== -1) {
                            itemToSave = thisInstance.currentData[index];
                        }

                        itemToSave = thisInstance.insertFormDataIntoObject(values, itemToSave);

                        if (index !== -1) {
                            thisInstance.currentData[index] = itemToSave;
                            thisInstance.updateListItem(values, index);
                        }
                        let id = await AjaxManager.save(itemToSave, index === -1, thisInstance.type);
                        if (id >= 0 && index === -1) {
                            itemToSave["id"] = id;
                            thisInstance.currentData[thisInstance.displayedData.length] = itemToSave;
                            thisInstance.createNewListEntry(itemToSave);
                        } else if (id === -1) {
                            $.alert("Erreur serveur !");
                        }
                    }
                },
                deleteButton: {
                    text: 'Supprimer',
                    btnClass: 'btn-red',
                    isHidden: index === -1,
                    action: function () {
                        thisInstance.showDeleteConfirmation(index);
                    }
                },
                cancelButton: {
                    text: 'Annuler',
                },
            },
            onContentReady: function () {
                // bind to events
                let jc = this;
                this.$content.find('form').on('submit', function (e) {
                    // if the user submits the form by pressing enter in the field.
                    e.preventDefault();
                    jc.$$formSubmit.trigger('click'); // reference the button and click it
                });
            }
        });
    }

    showDeleteConfirmation(index) {
        let thisInstance = this;
        $.confirm({
            title: "Confirmation",
            content: "Êtes vous sûr de vouloir supprimer cette entrée ?",
            buttons: {
                deleteButton: {
                    text: 'Confirmer',
                    btnClass: 'btn-red',
                    action: async function () {
                        let id = thisInstance.currentData[index]['id'];
                        let status = await AjaxManager.delete(id, thisInstance.type);
                        if (status === 0)
                            thisInstance.deleteListEntry(id);
                        else
                            $.alert("Erreur serveur !");
                    }
                },
                cancelButton: {
                    text: 'Annuler',
                },
            }
        });
    }

}