123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201 |
- class ListManager {
-
- currentData = [];
- displayedData = [];
- editableTypes = [];
-
- constructor(listContainer, type, editableTypes) {
- this.listContainer = listContainer;
- this.editableTypes = editableTypes;
- if (type === 'category') {
- AjaxManager.getCategories().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["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 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="text" 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.saveCategory(itemToSave, index === -1);
- 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.deleteCategory(id);
- if (status === 0)
- thisInstance.deleteListEntry(id);
- else
- $.alert("Erreur serveur !");
- }
- },
- cancelButton: {
- text: 'Annuler',
- },
- }
- });
- }
-
- }
|