123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338 |
- class ListManager {
-
- currentData = [];
- displayedData = [];
- editableTypes = [];
- type = '';
-
- referredTable = [];
- associationTable = [];
-
- constructor(listContainer, type, editableTypes) {
- this.listContainer = listContainer;
- this.editableTypes = editableTypes;
- this.type = type;
-
- if (type === 'article') {
- AjaxManager.getAll().then((data) => {
- this.currentData = data['articles'];
- this.referredTable = data['categories'];
- this.associationTable = data['article_categories'];
- this.generateList()
- });
- } else {
- 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();
- }
-
- getCategoriesOfArticle(articleId) {
- let filteredList = [];
- for (let i = 0; i < this.associationTable.length; i++) {
- if (this.associationTable[i]['article_id'] === articleId)
- filteredList.push(this.associationTable[i]['category_id']);
- }
- return filteredList;
- }
-
- getCategoryOfId(categoryId) {
- for (let i = 0; i < this.referredTable.length; i++) {
- if (this.referredTable[i]['id'] === categoryId) {
- return this.referredTable[i];
- }
- }
- return "";
- }
-
- getCategoryIcons(articleId) {
- let icons = "";
- let categories = this.getCategoriesOfArticle(articleId);
- for (let i = 0; i < categories.length; i++) {
- icons += "<i class='mdi mdi-" + this.getCategoryOfId(categories[i])["icon"] + "' style='margin-right: 5px'></i>";
- }
- return icons;
- }
-
- 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 if (this.editableTypes[i]["type"] === 'checkboxes') {
- listItem += this.getCategoryIcons(item['id']);
- } else if (this.editableTypes[i]["type"] === 'image') {
- listItem += '<img src="../uploaded_images/' + item['id'] + '.jpg" /></span>'
- } else
- listItem += item[this.editableTypes[i]["name"]] + '</span>';
- }
- listItem += "</div></li>";
- return listItem;
- }
-
- getCategoryCheckboxes(articleId) {
- let checkboxes = "<div id='checkboxesContainer' style='display: flex'>";
- let categories = [];
- if (articleId !== undefined)
- categories = this.getCategoriesOfArticle(articleId);
- for (let i = 0; i < this.referredTable.length; i++) {
- let id = this.referredTable[i]['id'];
- let cat = this.getCategoryOfId(id);
- let checked = categories.indexOf(id) !== -1 ? 'checked' : '';
- checkboxes +=
- '<div class="custom-control custom-checkbox" style="margin-right: 20px">\n' +
- '<input type="checkbox" class="custom-control-input" id="checkbox_' + id + '"' + checked + ' >\n' +
- '<label class="custom-control-label" for="checkbox_' + id + '">' +
- '<i class="mdi mdi-' + cat["icon"] + '" style="margin-right: 5px"></i>' +
- '</label>\n' +
- '</div>';
- }
- checkboxes += '</div>';
- return checkboxes;
- }
-
- getFormData(defaultValues, index) {
- let formData = '<form id="popupForm" name="popupForm" method="post" enctype="multipart/form-data"><div class="form-group">';
- for (let i = 0; i < this.editableTypes.length; i++) {
- let inputId = this.editableTypes[i]['name'] + 'Input';
- let inputName = this.editableTypes[i]['name'];
- let inputType = this.editableTypes[i]['type'] === 'number' ? 'number' : 'text';
- let value = defaultValues[this.editableTypes[i]['name']] !== undefined ? defaultValues[this.editableTypes[i]['name']] : '';
- formData += '<label for="' + inputId + '">' + this.editableTypes[i]['description'] + ' :</label>';
- if (this.editableTypes[i]['type'] === 'image') {
- formData += this.getImagePicker(defaultValues['id'], index);
- } else if (this.editableTypes[i]['type'] === 'checkboxes') {
- formData += this.getCategoryCheckboxes(defaultValues['id']);
- } else {
- if (this.editableTypes[i]['name'] === 'icon')
- formData += "<i class='mdi mdi-" + value + "' style='margin-left: 5px'></i>";
- formData += '<input name="' + inputName + '" id="' + inputId + '" type="' + inputType + '" placeholder="Entrez une valeur" class="form-control" value="' + value + '" required />';
-
- }
- }
- formData += "</div></form>";
- return formData;
- }
-
- getImagePicker(id, index) {
- let imageSrc = undefined;
- if (index !== -1)
- imageSrc = $(this.displayedData[index].find("img")[0]).attr('src');
- return (
- '<img style="width: 50px; height: 50px" src="' + imageSrc + '" id="image_' + id + '"/>' +
- '<div class="custom-file">\n' +
- '<input ' +
- 'type="file" ' +
- 'class="custom-file-input" ' +
- 'id="fileInput"' +
- 'accept="image/jpeg"' +
- 'onchange="listManager.updatePickerImagePreview(this, \'image_' + id + '\')"' +
- '>\n' +
- '<label class="custom-file-label" for="customFile">Choose file</label>\n' +
- '</div>');
- }
-
- updatePickerImagePreview(picker, previewId) {
- $("#" + previewId).attr('src', window.URL.createObjectURL(picker.files[0]));
- }
-
- 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;
- }
-
- getCheckedCategories(content) {
- let checkedList = [];
- let checkboxes = content.find('#checkboxesContainer').children();
- for (let i = 0; i < checkboxes.length; i++) {
- let input = $(checkboxes[i]).find('input')[0];
- let id = $(input).attr('id').replace('checkbox_', '');
- if (input.checked)
- checkedList.push(id);
- }
- return checkedList;
- }
-
- 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]);
- }
- }
-
- updateListItemCategories(categories, index) {
- if (index === -1)
- index = this.displayedData.length - 1;
- let iconContainer = this.displayedData[index].find(".list-category");
- for (let i = 0; i < categories.length; i++) {
- iconContainer.html(this.getCategoryIcons(this.currentData[index]['id']));
- }
- }
-
- updateAssociationList(articleId, newCategories) {
- let newTable = [];
- for (let i = 0; i < this.associationTable.length; i++) {
- if (this.associationTable[i]['article_id'] !== articleId)
- newTable.push(this.associationTable[i]);
- }
- for (let i = 0; i < newCategories.length; i++) {
- newTable.push({article_id: articleId, category_id: newCategories[i]});
- }
- console.log(newTable);
- this.associationTable = newTable;
- }
-
- updateArticleImage(image, index) {
- $(this.displayedData[index].find("img")[0]).attr('src', window.URL.createObjectURL(image));
- }
-
- showEditPopup(index) {
- let defaultValues = {};
- 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, index);
- let thisInstance = this;
- $.confirm({
- title: title,
- content: formData,
- buttons: {
- formSubmit: {
- text: 'Sauvegarder',
- btnClass: 'btn-blue',
- action: async function () {
- let image = undefined;
- if (this.$content.find('input[type=file]').length > 0)
- image = this.$content.find('input[type=file]')[0].files[0];
-
- 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 !");
- }
- if (id > 0 && thisInstance.type === 'article') {
- let categories = thisInstance.getCheckedCategories(this.$content);
- let data = {
- id: id,
- categories: categories
- };
- let result = await AjaxManager.save(data, true, 'article_categories');
- if (result) {
- thisInstance.updateAssociationList(id, categories);
- thisInstance.updateListItemCategories(categories, index);
- let imageResult = await AjaxManager.saveArticleImage(image, id);
- if (imageResult === 0)
- thisInstance.updateArticleImage(image, index);
- }
- }
- }
- },
- deleteButton: {
- text: 'Supprimer',
- btnClass: 'btn-red',
- isHidden: index === -1,
- action: function () {
- thisInstance.showDeleteConfirmation(index);
- }
- },
- cancelButton: {
- text: 'Annuler',
- },
- }
- });
- }
-
- 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',
- },
- }
- });
- }
-
- }
|