first commit

admin-kalsport/themes/default/js/bundle/module/loader.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Open Software License (OSL 3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/OSL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ */
+$(() => {
+  const moduleImport = $('#module-import');
+  moduleImport.click(() => {
+    moduleImport.addClass('onclick', 250, validate);
+  });
+
+  function validate() {
+    setTimeout(() => {
+      moduleImport.removeClass('onclick');
+      moduleImport.addClass('validate', 450, callback);
+    }, 2250);
+  }
+  function callback() {
+    setTimeout(() => {
+      moduleImport.removeClass('validate');
+    }, 1250);
+  }
+
+  $('body').on('click', 'a.module-read-more-grid-btn, a.module-read-more-list-btn', (event) => {
+    event.preventDefault();
+    const urlCallModule = event.target.href;
+    const modulePoppin = $(event.target).data('target');
+
+    $.get(urlCallModule, (data) => {
+      $(modulePoppin).html(data);
+      $(modulePoppin).modal();
+    });
+  });
+});

admin-kalsport/themes/default/js/bundle/module/module.js

@@ -0,0 +1,963 @@
+$(document).ready(() => {
+  const controller = new AdminModuleController();
+  controller.init();
+});
+
+/**
+ * Module Admin Page Controller.
+ * @constructor
+ */
+const AdminModuleController = function () {
+  this.currentDisplay = '';
+  this.isCategoryGridDisplayed = false;
+  this.currentTagsList = [];
+  this.currentRefCategory = null;
+  this.currentRefStatus = null;
+  this.currentSorting = null;
+  this.baseAddonsUrl = 'https://addons.prestashop.com/';
+  this.pstaggerInput = null;
+  this.lastBulkAction = null;
+  this.isUploadStarted = false;
+
+  /**
+   * Loaded modules list.
+   * Containing the card and list display.
+   * @type {Array}
+   */
+  this.modulesList = [];
+  this.addonsCardGrid = null;
+  this.addonsCardList = null;
+
+  // Selectors into vars to make it easier to change them while keeping same code logic
+  this.moduleItemGridSelector = '.module-item-grid';
+  this.moduleItemListSelector = '.module-item-list';
+  this.categorySelectorLabelSelector = '.module-category-selector-label';
+  this.categorySelector = '.module-category-selector';
+  this.categoryItemSelector = '.module-category-menu';
+  this.addonsLoginButtonSelector = '#addons_login_btn';
+  this.categoryResetBtnSelector = '.module-category-reset';
+  this.moduleInstallBtnSelector = 'input.module-install-btn';
+  this.moduleSortingDropdownSelector = '.module-sorting-author select';
+  this.categoryGridSelector = '#modules-categories-grid';
+  this.categoryGridItemSelector = '.module-category-item';
+  this.addonItemGridSelector = '.module-addons-item-grid';
+  this.addonItemListSelector = '.module-addons-item-list';
+
+  // Upgrade All selectors
+  this.upgradeAllSource = '.module_action_menu_upgrade_all';
+  this.upgradeAllTargets = '#modules-list-container-update .module_action_menu_upgrade:visible';
+
+  // Bulk action selectors
+  this.bulkActionDropDownSelector = '.module-bulk-actions select';
+  this.checkedBulkActionListSelector = '.module-checkbox-bulk-list input:checked';
+  this.checkedBulkActionGridSelector = '.module-checkbox-bulk-grid input:checked';
+  this.bulkActionCheckboxGridSelector = '.module-checkbox-bulk-grid';
+  this.bulkActionCheckboxListSelector = '.module-checkbox-bulk-list';
+  this.bulkActionCheckboxSelector = '#module-modal-bulk-checkbox';
+  this.bulkConfirmModalSelector = '#module-modal-bulk-confirm';
+  this.bulkConfirmModalActionNameSelector = '#module-modal-bulk-confirm-action-name';
+  this.bulkConfirmModalListSelector = '#module-modal-bulk-confirm-list';
+  this.bulkConfirmModalAckBtnSelector = '#module-modal-confirm-bulk-ack';
+
+  // Placeholders
+  this.placeholderGlobalSelector = '.module-placeholders-wrapper';
+  this.placeholderFailureGlobalSelector = '.module-placeholders-failure';
+  this.placeholderFailureMsgSelector = '.module-placeholders-failure-msg';
+  this.placeholderFailureRetryBtnSelector = '#module-placeholders-failure-retry';
+
+  // Module's statuses selectors
+  this.statusSelectorLabelSelector = '.module-status-selector-label';
+  this.statusItemSelector = '.module-status-menu';
+  this.statusResetBtnSelector = '.module-status-reset';
+
+  // Selectors for Module Import and Addons connect
+  this.addonsConnectModalBtnSelector = '#page-header-desc-configuration-addons_connect';
+  this.addonsLogoutModalBtnSelector = '#page-header-desc-configuration-addons_logout';
+  this.addonsImportModalBtnSelector = '#page-header-desc-configuration-add_module';
+  this.dropZoneModalSelector = '#module-modal-import';
+  this.dropZoneModalFooterSelector = '#module-modal-import .modal-footer';
+  this.dropZoneImportZoneSelector = '#importDropzone';
+  this.addonsConnectModalSelector = '#module-modal-addons-connect';
+  this.addonsLogoutModalSelector = '#module-modal-addons-logout';
+  this.addonsConnectForm = '#addons-connect-form';
+  this.moduleImportModalCloseBtn = '#module-modal-import-closing-cross';
+  this.moduleImportStartSelector = '.module-import-start';
+  this.moduleImportProcessingSelector = '.module-import-processing';
+  this.moduleImportSuccessSelector = '.module-import-success';
+  this.moduleImportSuccessConfigureBtnSelector = '.module-import-success-configure';
+  this.moduleImportFailureSelector = '.module-import-failure';
+  this.moduleImportFailureRetrySelector = '.module-import-failure-retry';
+  this.moduleImportFailureDetailsBtnSelector = '.module-import-failure-details-action';
+  this.moduleImportSelectFileManualSelector = '.module-import-start-select-manual';
+  this.moduleImportFailureMsgDetailsSelector = '.module-import-failure-details';
+  this.moduleImportConfirmSelector = '.module-import-confirm';
+
+  /**
+   * Initialize all listners and bind everything
+   * @method init
+   * @memberof AdminModule
+   */
+  this.init = function () {
+    this.initBOEventRegistering();
+    this.loadVariables();
+    this.initSortingDisplaySwitch();
+    this.initSortingDropdown();
+    this.initSearchBlock();
+    this.initCategorySelect();
+    this.initCategoriesGrid();
+    this.initActionButtons();
+    this.initAddonsSearch();
+    this.initAddonsConnect();
+    this.initAddModuleAction();
+    this.initDropzone();
+    this.initPageChangeProtection();
+    this.initBulkActions();
+    this.initPlaceholderMechanism();
+    this.initFilterStatusDropdown();
+    this.fetchModulesList();
+    this.getNotificationsCount();
+  };
+
+  function currentCompare(a, b) {
+    if (a[key] < b[key]) return -1;
+    if (a[key] > b[key]) return 1;
+    return 0;
+  }
+
+  this.initFilterStatusDropdown = function () {
+    const self = this;
+    const body = $('body');
+    body.on('click', this.statusItemSelector, function () {
+      // Get data from li DOM input
+      self.currentRefStatus = parseInt($(this).attr('data-status-ref'), 10);
+      const statusSelectedDisplayName = $(this).find('a:first').text();
+      // Change dropdown label to set it to the current status' displayname
+      $(self.statusSelectorLabelSelector).text(statusSelectedDisplayName);
+      $(self.statusResetBtnSelector).show();
+      // Do Search on categoryRef
+      self.updateModuleVisibility();
+    });
+
+    body.on('click', this.statusResetBtnSelector, function () {
+      const text = $(this).find('a').text();
+      $(self.statusSelectorLabelSelector).text(text);
+      $(this).hide();
+      self.currentRefStatus = null;
+      self.updateModuleVisibility();
+    });
+  };
+
+  this.initBOEventRegistering = function () {
+    BOEvent.on('Module Disabled', this.onModuleDisabled, this);
+    BOEvent.on('Module Uninstalled', this.updateTotalResults, this);
+  };
+
+  this.onModuleDisabled = function () {
+    const moduleItemSelector = this.getModuleItemSelector();
+    const self = this;
+
+    $('.modules-list').each(function () {
+      const totalForCurrentSelector = $(this).find(`${moduleItemSelector}:visible`).length;
+      self.updateTotalResults(totalForCurrentSelector, $(this));
+    });
+  };
+
+  this.initPlaceholderMechanism = function () {
+    const self = this;
+
+    if ($(this.placeholderGlobalSelector).length) {
+      this.ajaxLoadPage();
+    }
+
+    // Retry loading mechanism
+    $('body').on('click', this.placeholderFailureRetryBtnSelector, () => {
+      $(self.placeholderFailureGlobalSelector).fadeOut();
+      $(self.placeholderGlobalSelector).fadeIn();
+      self.ajaxLoadPage();
+    });
+  };
+
+  this.ajaxLoadPage = function () {
+    const self = this;
+
+    $.ajax({
+      method: 'GET',
+      url: moduleURLs.catalogRefresh,
+    }).done((response) => {
+      if (response.status === true) {
+        if (typeof response.domElements === 'undefined') response.domElements = null;
+        if (typeof response.msg === 'undefined') response.msg = null;
+
+        const stylesheet = document.styleSheets[0];
+        const stylesheetRule = '{display: none}';
+        const moduleGlobalSelector = '.modules-list';
+        const moduleSortingSelector = '.module-sorting-menu';
+        const requiredSelectorCombination = `${moduleGlobalSelector}, ${moduleSortingSelector}`;
+
+        if (stylesheet.insertRule) {
+          stylesheet.insertRule(
+            requiredSelectorCombination
+            + stylesheetRule, stylesheet.cssRules.length,
+          );
+        } else if (stylesheet.addRule) {
+          stylesheet.addRule(
+            requiredSelectorCombination,
+            stylesheetRule,
+            -1,
+          );
+        }
+
+        $(self.placeholderGlobalSelector).fadeOut(800, () => {
+          $.each(response.domElements, (index, element) => {
+            $(element.selector).append(element.content);
+          });
+          $(moduleGlobalSelector).fadeIn(800).css('display', 'flex');
+          $(moduleSortingSelector).fadeIn(800);
+          $('[data-toggle="popover"]').popover();
+          self.initCurrentDisplay();
+          self.fetchModulesList();
+        });
+      } else {
+        $(self.placeholderGlobalSelector).fadeOut(800, () => {
+          $(self.placeholderFailureMsgSelector).text(response.msg);
+          $(self.placeholderFailureGlobalSelector).fadeIn(800);
+        });
+      }
+    }).fail((response) => {
+      $(self.placeholderGlobalSelector).fadeOut(800, () => {
+        $(self.placeholderFailureMsgSelector).text(response.statusText);
+        $(self.placeholderFailureGlobalSelector).fadeIn(800);
+      });
+    });
+  };
+
+  this.fetchModulesList = function () {
+    const self = this;
+    self.modulesList = [];
+    $('.modules-list').each(function () {
+      const container = $(this);
+      container.find('.module-item').each(function () {
+        const $this = $(this);
+        self.modulesList.push({
+          domObject: $this,
+          id: $this.attr('data-id'),
+          name: $this.attr('data-name').toLowerCase(),
+          scoring: parseFloat($this.attr('data-scoring')),
+          logo: $this.attr('data-logo'),
+          author: $this.attr('data-author').toLowerCase(),
+          version: $this.attr('data-version'),
+          description: $this.attr('data-description').toLowerCase(),
+          techName: $this.attr('data-tech-name').toLowerCase(),
+          childCategories: $this.attr('data-child-categories'),
+          categories: $this.attr('data-categories').toLowerCase(),
+          type: $this.attr('data-type'),
+          price: parseFloat($this.attr('data-price')),
+          active: parseInt($this.attr('data-active'), 10),
+          access: $this.attr('data-last-access'),
+          display: $this.hasClass('module-item-list') ? 'list' : 'grid',
+          container,
+        });
+        $this.remove();
+      });
+    });
+    self.addonsCardGrid = $(this.addonItemGridSelector);
+    self.addonsCardList = $(this.addonItemListSelector);
+    this.updateModuleVisibility();
+    $('body').trigger('moduleCatalogLoaded');
+  };
+
+  this.updateModuleVisibility = function () {
+    const self = this;
+
+    if (self.currentSorting) {
+      // Modules sorting
+      let order = 'asc';
+      let key = self.currentSorting;
+
+      if (key.split('-').length > 1) {
+        key = key.split('-')[0];
+      }
+      if (self.currentSorting.indexOf('-desc') !== -1) {
+        order = 'desc';
+      }
+
+      self.modulesList.sort(currentCompare);
+      if (order === 'desc') {
+        self.modulesList.reverse();
+      }
+    }
+
+    $('.modules-list').html('');
+
+    // Modules visibility management
+    for (let i = 0; i < this.modulesList.length; i += 1) {
+      const currentModule = this.modulesList[i];
+
+      if (currentModule.display === this.currentDisplay) {
+        let isVisible = true;
+
+        if (this.currentRefCategory !== null) {
+          isVisible &= currentModule.categories === this.currentRefCategory;
+        }
+        if (self.currentRefStatus !== null) {
+          isVisible &= currentModule.active === this.currentRefStatus;
+        }
+        if (self.currentTagsList.length) {
+          let tagExists = false;
+          $.each(self.currentTagsList, (index, value) => {
+            // eslint-disable-next-line
+            value = value.toLowerCase();
+            tagExists |= (
+              currentModule.name.indexOf(value) !== -1
+              || currentModule.description.indexOf(value) !== -1
+              || currentModule.author.indexOf(value) !== -1
+              || currentModule.techName.indexOf(value) !== -1
+            );
+          });
+          isVisible &= tagExists;
+        }
+        if (isVisible) {
+          currentModule.container.append(currentModule.domObject);
+        }
+      }
+    }
+    if (this.currentTagsList.length) {
+      if (this.currentDisplay === 'grid') {
+        $('.modules-list').append(this.addonsCardGrid);
+      } else {
+        $('.modules-list').append(this.addonsCardList);
+      }
+    }
+
+    this.updateTotalResults();
+  };
+
+  this.initPageChangeProtection = function () {
+    const self = this;
+
+    // eslint-disable-next-line
+    $(window).on('beforeunload', () => {
+      if (self.isUploadStarted === true) {
+        // eslint-disable-next-line
+        return 'It seems some critical operation are running, are you sure you want to change page ? It might cause some unexepcted behaviors.';
+      }
+    });
+  };
+
+  this.initBulkActions = function () {
+    const self = this;
+    const body = $('body');
+
+    body.on('change', this.bulkActionDropDownSelector, function () {
+      if ($(self.getBulkCheckboxesCheckedSelector()).length === 0) {
+        $.growl.warning({message: translate_javascripts['Bulk Action - One module minimum']});
+        return;
+      }
+      self.lastBulkAction = $(this).find(':checked').attr('value');
+      const modulesListString = self.buildBulkActionModuleList();
+      const actionString = $(this).find(':checked').text().toLowerCase();
+      $(self.bulkConfirmModalListSelector).html(modulesListString);
+      $(self.bulkConfirmModalActionNameSelector).text(actionString);
+
+      if (self.lastBulkAction !== 'bulk-uninstall') {
+        $(self.bulkActionCheckboxSelector).hide();
+      }
+      $(self.bulkConfirmModalSelector).modal('show');
+    });
+
+    body.on('click', this.bulkConfirmModalAckBtnSelector, (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      $(self.bulkConfirmModalSelector).modal('hide');
+      self.doBulkAction(self.lastBulkAction);
+    });
+  };
+
+  this.buildBulkActionModuleList = function () {
+    const checkBoxesSelector = this.getBulkCheckboxesCheckedSelector();
+    const moduleItemSelector = this.getModuleItemSelector();
+    let alreadyDoneFlag = 0;
+    let htmlGenerated = '';
+
+    // eslint-disable-next-line
+    $(checkBoxesSelector).each(function () {
+      if (alreadyDoneFlag !== 10) {
+        const currentElement = $(this).parents(moduleItemSelector);
+        htmlGenerated += `- ${currentElement.attr('data-name')}<br/>`;
+        alreadyDoneFlag += 1;
+      } else {
+        // Break each
+        htmlGenerated += '- ...';
+        return false;
+      }
+    });
+
+    return htmlGenerated;
+  };
+
+  this.initAddonsConnect = function () {
+    const self = this;
+
+    // Make addons connect modal ready to be clicked
+    if ($(this.addonsConnectModalBtnSelector).attr('href') === '#') {
+      $(this.addonsConnectModalBtnSelector).attr('data-toggle', 'modal');
+      $(this.addonsConnectModalBtnSelector).attr('data-target', this.addonsConnectModalSelector);
+    }
+    if ($(this.addonsLogoutModalBtnSelector).attr('href') === '#') {
+      $(this.addonsLogoutModalBtnSelector).attr('data-toggle', 'modal');
+      $(this.addonsLogoutModalBtnSelector).attr('data-target', this.addonsLogoutModalSelector);
+    }
+    $('body').on('submit', this.addonsConnectForm, function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      $.ajax({
+        method: 'POST',
+        url: $(this).attr('action'),
+        dataType: 'json',
+        data: $(this).serialize(),
+        beforeSend() {
+          $(self.addonsLoginButtonSelector).show();
+          $("button.btn[type='submit']", self.addonsConnectForm).hide();
+        },
+      }).done((response) => {
+        const responseCode = response.success;
+        const responseMsg = response.message;
+
+        if (responseCode === 1) {
+          location.reload();
+        } else {
+          $.growl.error({message: responseMsg});
+          $(self.addonsLoginButtonSelector).hide();
+          $("button.btn[type='submit']", self.addonsConnectForm).fadeIn();
+        }
+      });
+    });
+  };
+
+  this.initAddModuleAction = function () {
+    const addModuleButton = $(this.addonsImportModalBtnSelector);
+    addModuleButton.attr('data-toggle', 'modal');
+    addModuleButton.attr('data-target', this.dropZoneModalSelector);
+  };
+
+  this.initDropzone = function () {
+    const self = this;
+    const body = $('body');
+    const dropzone = $('.dropzone');
+
+    // Reset modal when click on Retry in case of failure
+    body.on('click', this.moduleImportFailureRetrySelector, () => {
+      // eslint-disable-next-line
+      $(`${self.moduleImportSuccessSelector}, ${self.moduleImportFailureSelector}, ${self.moduleImportProcessingSelector}`).fadeOut(() => {
+        // Added timeout for a better render of animation and avoid to have displayed at the same time
+        setTimeout(() => {
+          $(self.moduleImportStartSelector).fadeIn(() => {
+            $(self.moduleImportFailureMsgDetailsSelector).hide();
+            $(self.moduleImportSuccessConfigureBtnSelector).hide();
+            dropzone.removeAttr('style');
+          });
+        }, 550);
+      });
+    });
+
+    // Reinit modal on exit, but check if not already processing something
+    body.on('hidden.bs.modal', this.dropZoneModalSelector, () => {
+      $(`${self.moduleImportSuccessSelector}, ${self.moduleImportFailureSelector}`).hide();
+      $(self.moduleImportStartSelector).show();
+      dropzone.removeAttr('style');
+      $(self.moduleImportFailureMsgDetailsSelector).hide();
+      $(self.moduleImportSuccessConfigureBtnSelector).hide();
+      $(self.dropZoneModalFooterSelector).html('');
+      $(self.moduleImportConfirmSelector).hide();
+    });
+
+    // Change the way Dropzone.js lib handle file input trigger
+    body.on(
+      'click',
+      `.dropzone:not(${this.moduleImportSelectFileManualSelector}, ${this.moduleImportSuccessConfigureBtnSelector})`,
+      (event, manualSelect) => {
+        // if click comes from .module-import-start-select-manual, stop everything
+        if (typeof manualSelect === 'undefined') {
+          event.stopPropagation();
+          event.preventDefault();
+        }
+      },
+    );
+
+    body.on('click', this.moduleImportSelectFileManualSelector, (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      // Trigger click on hidden file input, and pass extra data
+      // to .dropzone click handler fro it to notice it comes from here
+      $('.dz-hidden-input').trigger('click', ['manual_select']);
+    });
+
+    // Handle modal closure
+    body.on('click', this.moduleImportModalCloseBtn, () => {
+      if (self.isUploadStarted === true) {
+        // TODO: Display tooltip saying you can't escape at this stage
+      } else {
+        $(self.dropZoneModalSelector).modal('hide');
+      }
+    });
+
+    // Fix issue on click configure button
+    body.on('click', this.moduleImportSuccessConfigureBtnSelector, function (event) {
+      event.stopPropagation();
+      event.preventDefault();
+      window.location = $(this).attr('href');
+    });
+
+    // Open failure message details box
+    body.on('click', this.moduleImportFailureDetailsBtnSelector, () => {
+      $(self.moduleImportFailureMsgDetailsSelector).slideDown();
+    });
+
+    // @see: dropzone.js
+    const dropzoneOptions = {
+      url: moduleURLs.moduleImport,
+      acceptedFiles: '.zip, .tar',
+      // The name that will be used to transfer the file
+      paramName: 'file_uploaded',
+      maxFilesize: 50, // can't be greater than 50Mb because it's an addons limitation
+      uploadMultiple: false,
+      addRemoveLinks: true,
+      dictDefaultMessage: '',
+      hiddenInputContainer: self.dropZoneImportZoneSelector,
+      // add unlimited timeout. Otherwise dropzone timeout is 30 seconds and if a module is long to install,
+      // it is not possible to install the module.
+      timeout: 0,
+      addedfile() {
+        self.animateStartUpload();
+      },
+      processing() {
+        // Leave it empty since we don't require anything while processing upload
+      },
+      error(file, message) {
+        self.displayOnUploadError(message);
+      },
+      complete(file) {
+        if (file.status !== 'error') {
+          const responseObject = jQuery.parseJSON(file.xhr.response);
+
+          if (typeof responseObject.is_configurable === 'undefined') responseObject.is_configurable = null;
+          if (typeof responseObject.module_name === 'undefined') responseObject.module_name = null;
+
+          self.displayOnUploadDone(responseObject);
+        }
+        // State that we have finish the process to unlock some actions
+        self.isUploadStarted = false;
+      },
+    };
+    dropzone.dropzone($.extend(dropzoneOptions));
+
+    this.animateStartUpload = function () {
+      // State that we start module upload
+      self.isUploadStarted = true;
+      $(self.moduleImportStartSelector).hide(0);
+      dropzone.css('border', 'none');
+      $(self.moduleImportProcessingSelector).fadeIn();
+    };
+
+    this.animateEndUpload = function (callback) {
+      $(self.moduleImportProcessingSelector).finish().fadeOut(callback);
+    };
+
+    /**
+     * Method to call for upload modal, when the ajax call went well.
+     *
+     * @param object result containing the server response
+     */
+    this.displayOnUploadDone = function (result) {
+      const that = this;
+      that.animateEndUpload(() => {
+        if (result.status === true) {
+          if (result.is_configurable === true) {
+            const configureLink = moduleURLs.configurationPage.replace('1', result.module_name);
+            $(that.moduleImportSuccessConfigureBtnSelector).attr('href', configureLink);
+            $(that.moduleImportSuccessConfigureBtnSelector).show();
+          }
+          $(that.moduleImportSuccessSelector).fadeIn();
+        } else if (typeof result.confirmation_subject !== 'undefined') {
+          that.displayPrestaTrustStep(result);
+        } else {
+          $(that.moduleImportFailureMsgDetailsSelector).html(result.msg);
+          $(that.moduleImportFailureSelector).fadeIn();
+        }
+      });
+    };
+
+    /**
+     * Method to call for upload modal, when the ajax call went wrong or when the action requested could not
+     * succeed for some reason.
+     *
+     * @param string message explaining the error.
+     */
+    this.displayOnUploadError = function (message) {
+      self.animateEndUpload(() => {
+        $(self.moduleImportFailureMsgDetailsSelector).html(message);
+        $(self.moduleImportFailureSelector).fadeIn();
+      });
+    };
+
+    /**
+     * If PrestaTrust needs to be confirmed, we ask for the confirmation modal content and we display it in the
+     * currently displayed one. We also generate the ajax call to trigger once we confirm we want to install
+     * the module.
+     *
+     * @param Previous server response result
+     */
+    this.displayPrestaTrustStep = function (result) {
+      const that = this;
+      const modal = module_card_controller.replacePrestaTrustPlaceholders(result);
+      const moduleName = result.module.attributes.name;
+      $(this.moduleImportConfirmSelector).html(modal.find('.modal-body').html()).fadeIn();
+      $(this.dropZoneModalFooterSelector).html(modal.find('.modal-footer').html()).fadeIn();
+      $(this.dropZoneModalFooterSelector).find('.pstrust-install').off('click').on('click', () => {
+        $(that.moduleImportConfirmSelector).hide();
+        $(that.dropZoneModalFooterSelector).html('');
+        that.animateStartUpload();
+
+        // Install ajax call
+        $.post(result.module.attributes.urls.install, {'actionParams[confirmPrestaTrust]': '1'})
+          .done((data) => {
+            that.displayOnUploadDone(data[moduleName]);
+          })
+          .fail((data) => {
+            that.displayOnUploadError(data[moduleName]);
+          })
+          .always(() => {
+            that.isUploadStarted = false;
+          });
+      });
+    };
+  };
+
+  this.getBulkCheckboxesSelector = function () {
+    return this.currentDisplay === 'grid'
+      ? this.bulkActionCheckboxGridSelector
+      : this.bulkActionCheckboxListSelector;
+  };
+
+  this.getBulkCheckboxesCheckedSelector = function () {
+    return this.currentDisplay === 'grid'
+      ? this.checkedBulkActionGridSelector
+      : this.checkedBulkActionListSelector;
+  };
+
+  this.loadVariables = function () {
+    this.initCurrentDisplay();
+  };
+
+  this.getModuleItemSelector = function () {
+    return this.currentDisplay === 'grid'
+      ? this.moduleItemGridSelector
+      : this.moduleItemListSelector;
+  };
+
+  /**
+   * Get the module notifications count and displays it as a badge on the notification tab
+   * @return void
+   */
+  this.getNotificationsCount = function () {
+    const urlToCall = moduleURLs.notificationsCount;
+
+    $.getJSON(
+      urlToCall,
+      this.updateNotificationsCount,
+    ).fail(() => {
+      console.error('Could not retrieve module notifications count.');
+    });
+  };
+
+  this.updateNotificationsCount = function (badge) {
+    const destinationTabs = {
+      to_configure: $('#subtab-AdminModulesNotifications'),
+      to_update: $('#subtab-AdminModulesUpdates'),
+    };
+
+    // eslint-disable-next-line
+    for (const key in destinationTabs) {
+      if (destinationTabs[key].length === 0) {
+        // eslint-disable-next-line
+        continue;
+      }
+      destinationTabs[key].find('.notification-counter').text(badge[key]);
+    }
+  };
+
+  this.initAddonsSearch = function () {
+    const self = this;
+    $('body').on('click', `${this.addonItemGridSelector}, ${this.addonItemListSelector}`, () => {
+      let searchQuery = '';
+
+      if (self.currentTagsList.length) {
+        searchQuery = encodeURIComponent(self.currentTagsList.join(' '));
+      }
+      const hrefUrl = `${self.baseAddonsUrl}search.php?search_query=${searchQuery}`;
+      window.open(hrefUrl, '_blank');
+    });
+  };
+
+  this.initCategoriesGrid = function () {
+    // eslint-disable-next-line
+    if (typeof refMenu === 'undefined') var refMenu = null;
+    const self = this;
+
+    // eslint-disable-next-line
+    $('body').on('click', this.categoryGridItemSelector, function (event) {
+      event.stopPropagation();
+      event.preventDefault();
+      const refCategory = $(this).attr('data-category-ref');
+
+      // In case we have some tags we need to reset it !
+      if (self.currentTagsList.length) {
+        self.pstaggerInput.resetTags(false);
+        self.currentTagsList = [];
+      }
+      const menuCategoryToTrigger = $(`${self.categoryItemSelector}[data-category-ref="${refCategory}"]`);
+
+      if (!menuCategoryToTrigger.length) {
+        console.warn(`No category with ref (${refMenu}) seems to exist!`);
+        return false;
+      }
+
+      // Hide current category grid
+      if (self.isCategoryGridDisplayed === true) {
+        $(self.categoryGridSelector).fadeOut();
+        self.isCategoryGridDisplayed = false;
+      }
+
+      // Trigger click on right category
+      $(`${self.categoryItemSelector}[data-category-ref="${refCategory}"]`).click();
+    });
+  };
+
+  this.initCurrentDisplay = function () {
+    if (this.currentDisplay === '') {
+      this.currentDisplay = 'list';
+    } else {
+      this.currentDisplay = 'grid';
+    }
+  };
+
+  this.initSortingDropdown = function () {
+    const self = this;
+
+    self.currentSorting = $(this.moduleSortingDropdownSelector).find(':checked').attr('value');
+
+    $('body').on('change', this.moduleSortingDropdownSelector, function () {
+      self.currentSorting = $(this).find(':checked').attr('value');
+      self.updateModuleVisibility();
+    });
+  };
+
+  // eslint-disable-next-line
+  this.doBulkAction = function (requestedBulkAction) {
+    // This object is used to check if requested bulkAction is available and give proper
+    // url segment to be called for it
+    const forceDeletion = $('#force_bulk_deletion').prop('checked');
+
+    const bulkActionToUrl = {
+      'bulk-uninstall': 'uninstall',
+      'bulk-disable': 'disable',
+      'bulk-enable': 'enable',
+      'bulk-disable-mobile': 'disable_mobile',
+      'bulk-enable-mobile': 'enable_mobile',
+      'bulk-reset': 'reset',
+    };
+
+    // Note no grid selector used yet since we do not needed it at dev time
+    // Maybe useful to implement this kind of things later if intended to
+    // use this functionality elsewhere but "manage my module" section
+    if (typeof bulkActionToUrl[requestedBulkAction] === 'undefined') {
+      $.growl.error({
+        message: translate_javascripts['Bulk Action - Request not found']
+          .replace('[1]', requestedBulkAction),
+      });
+      return false;
+    }
+
+    // Loop over all checked bulk checkboxes
+    const bulkActionSelectedSelector = this.getBulkCheckboxesCheckedSelector();
+
+    if ($(bulkActionSelectedSelector).length > 0) {
+      const bulkModulesTechNames = [];
+      $(bulkActionSelectedSelector).each(function () {
+        const moduleTechName = $(this).attr('data-tech-name');
+        bulkModulesTechNames.push({
+          techName: moduleTechName,
+          actionMenuObj: $(this).parent().next(),
+        });
+      });
+
+      $.each(bulkModulesTechNames, (index, data) => {
+        const {actionMenuObj} = data;
+        const moduleTechName = data.techName;
+
+        const urlActionSegment = bulkActionToUrl[requestedBulkAction];
+
+        // eslint-disable-next-line
+        if (typeof module_card_controller !== 'undefined') {
+          // We use jQuery to get the specific link for this action. If found, we send it.
+          const urlElement = $(module_card_controller.moduleActionMenuLinkSelector + urlActionSegment, actionMenuObj);
+
+          if (urlElement.length > 0) {
+            module_card_controller.requestToController(urlActionSegment, urlElement, forceDeletion);
+          } else {
+            $.growl.error({
+              message: translate_javascripts['Bulk Action - Request not available for module']
+                .replace('[1]', urlActionSegment)
+                .replace('[2]', moduleTechName),
+            });
+          }
+        }
+      });
+    } else {
+      console.warn(translate_javascripts['Bulk Action - One module minimum']);
+      return false;
+    }
+  };
+
+  this.initActionButtons = function () {
+    $('body').on('click', this.moduleInstallBtnSelector, function (event) {
+      const $this = $(this);
+      const $next = $($this.next());
+      event.preventDefault();
+      $this.hide();
+      $next.show();
+      $.ajax({
+        url: $this.attr('data-url'),
+        dataType: 'json',
+      }).done(() => {
+        $next.fadeOut();
+      });
+    });
+
+    // "Upgrade All" button handler
+    const that = this;
+    $('body').on('click', this.upgradeAllSource, (event) => {
+      event.preventDefault();
+      $(that.upgradeAllTargets).click();
+    });
+  };
+
+  this.initCategorySelect = function () {
+    const self = this;
+    const body = $('body');
+    body.on('click', this.categoryItemSelector, function () {
+      // Get data from li DOM input
+      self.currentRefCategory = $(this).attr('data-category-ref').toLowerCase();
+      const categorySelectedDisplayName = $(this).attr('data-category-display-name');
+      // Change dropdown label to set it to the current category's displayname
+      $(self.categorySelectorLabelSelector).text(categorySelectedDisplayName);
+      $(self.categoryResetBtnSelector).show();
+      // Do Search on categoryRef
+      self.updateModuleVisibility();
+    });
+
+    body.on('click', this.categoryResetBtnSelector, function () {
+      const rawText = $(self.categorySelector).attr('aria-labelledby');
+      const upperFirstLetter = rawText.charAt(0).toUpperCase();
+      const removedFirstLetter = rawText.slice(1);
+      const originalText = upperFirstLetter + removedFirstLetter;
+      $(self.categorySelectorLabelSelector).text(originalText);
+      $(this).hide();
+      self.currentRefCategory = null;
+      self.updateModuleVisibility();
+    });
+  };
+
+  this.updateTotalResults = function () {
+    // If there are some shortlist: each shortlist count the modules on the next container.
+    const $shortLists = $('.module-short-list');
+
+    if ($shortLists.length > 0) {
+      $shortLists.each(function () {
+        const $this = $(this);
+        updateText(
+          $this.find('.module-search-result-wording'),
+          $this.next('.modules-list').find('.module-item').length,
+        );
+      });
+
+      // If there is no shortlist: the wording directly update from the only module container.
+    } else {
+      const modulesCount = $('.modules-list').find('.module-item').length;
+      updateText(
+        $('.module-search-result-wording'),
+        modulesCount,
+      );
+
+      $(this.addonItemGridSelector).toggle(modulesCount !== (this.modulesList.length / 2));
+      $(this.addonItemListSelector).toggle(modulesCount !== (this.modulesList.length / 2));
+      if (modulesCount === 0) {
+        $('.module-addons-search-link').attr(
+          'href',
+          `${this.baseAddonsUrl
+          }search.php?search_query=${
+            encodeURIComponent(this.currentTagsList.join(' '))}`,
+        );
+      }
+    }
+
+    function updateText(element, value) {
+      const explodedText = element.text().split(' ');
+      explodedText[0] = value;
+      element.text(explodedText.join(' '));
+    }
+  };
+
+  this.initSearchBlock = function () {
+    const self = this;
+    this.pstaggerInput = $('#module-search-bar').pstagger({
+      onTagsChanged(tagList) {
+        self.currentTagsList = tagList;
+        self.updateModuleVisibility();
+      },
+      onResetTags() {
+        self.currentTagsList = [];
+        self.updateModuleVisibility();
+      },
+      inputPlaceholder: translate_javascripts['Search - placeholder'],
+      closingCross: true,
+      context: self,
+    });
+
+    $('body').on('click', '.module-addons-search-link', function (event) {
+      event.preventDefault();
+      event.stopPropagation();
+      const href = $(this).attr('href');
+      window.open(href, '_blank');
+    });
+  };
+
+  /**
+   * Initialize display switching between List or Grid
+   */
+  this.initSortingDisplaySwitch = function () {
+    const self = this;
+
+    $('body').on('click', '.module-sort-switch', function () {
+      const switchTo = $(this).attr('data-switch');
+      const isAlreadyDisplayed = $(this).hasClass('active-display');
+
+      if (typeof switchTo !== 'undefined' && isAlreadyDisplayed === false) {
+        self.switchSortingDisplayTo(switchTo);
+        self.currentDisplay = switchTo;
+      }
+    });
+  };
+
+  this.switchSortingDisplayTo = function (switchTo) {
+    if (switchTo === 'grid' || switchTo === 'list') {
+      $('.module-sort-switch').removeClass('module-sort-active');
+      $(`#module-sort-${switchTo}`).addClass('module-sort-active');
+      this.currentDisplay = switchTo;
+      this.updateModuleVisibility();
+    } else {
+      console.error(`Can't switch to undefined display property "${switchTo}"`);
+    }
+  };
+};

admin-kalsport/themes/default/js/bundle/module/module_card.js

@@ -0,0 +1,255 @@
+/* eslint-disable max-len */
+let moduleCardController = {};
+
+$(document).ready(() => {
+  moduleCardController = new AdminModuleCard();
+  moduleCardController.init();
+});
+
+/**
+ * AdminModule card Controller.
+ * @constructor
+ */
+const AdminModuleCard = function () {
+  /* Selectors for module action links (uninstall, reset, etc...) to add a confirm popin */
+  this.moduleActionMenuLinkSelector = 'button.module_action_menu_';
+  this.moduleActionMenuInstallLinkSelector = 'button.module_action_menu_install';
+  this.moduleActionMenuEnableLinkSelector = 'button.module_action_menu_enable';
+  this.moduleActionMenuUninstallLinkSelector = 'button.module_action_menu_uninstall';
+  this.moduleActionMenuDisableLinkSelector = 'button.module_action_menu_disable';
+  this.moduleActionMenuEnableMobileLinkSelector = 'button.module_action_menu_enable_mobile';
+  this.moduleActionMenuDisableMobileLinkSelector = 'button.module_action_menu_disable_mobile';
+  this.moduleActionMenuResetLinkSelector = 'button.module_action_menu_reset';
+  this.moduleActionMenuUpdateLinkSelector = 'button.module_action_menu_upgrade';
+  this.moduleItemListSelector = '.module-item-list';
+  this.moduleItemGridSelector = '.module-item-grid';
+  this.moduleItemActionsSelector = '.module-actions';
+
+  /* Selectors only for modal buttons */
+  this.moduleActionModalDisableLinkSelector = 'a.module_action_modal_disable';
+  this.moduleActionModalResetLinkSelector = 'a.module_action_modal_reset';
+  this.moduleActionModalUninstallLinkSelector = 'a.module_action_modal_uninstall';
+  this.forceDeletionOption = '#force_deletion';
+
+  /**
+     * Initialize all listeners and bind everything
+     * @method init
+     * @memberof AdminModuleCard
+     */
+  this.init = function () {
+    this.initActionButtons();
+  };
+
+  this.getModuleItemSelector = function () {
+    if ($(this.moduleItemListSelector).length) {
+      return this.moduleItemListSelector;
+    }
+    return this.moduleItemGridSelector;
+  };
+
+  this.confirmAction = function (action, element) {
+    const modal = $(`#${$(element).data('confirm_modal')}`);
+
+    if (modal.length !== 1) {
+      return true;
+    }
+    modal.first().modal('show');
+    return false; // do not allow a.href to reload the page. The confirm modal dialog will do it async if needed.
+  };
+
+  /**
+     * Update the content of a modal asking a confirmation for PrestaTrust and open it
+     *
+     * @param {array} result containing module data
+     * @return {void}
+     */
+  this.confirmPrestaTrust = function confirmPrestaTrust(result) {
+    const that = this;
+    const modal = this.replacePrestaTrustPlaceholders(result);
+    modal.find('.pstrust-install').off('click').on('click', () => {
+      // Find related form, update it and submit it
+      const installButton = $(
+        that.moduleActionMenuInstallLinkSelector,
+        `.module-item[data-tech-name="${result.module.attributes.name}"]`,
+      );
+      const form = installButton.parent('form');
+      $('<input>').attr({
+        type: 'hidden',
+        value: '1',
+        name: 'actionParams[confirmPrestaTrust]',
+      }).appendTo(form);
+      installButton.click();
+      modal.modal('hide');
+    });
+    modal.modal();
+  };
+
+  this.replacePrestaTrustPlaceholders = function replacePrestaTrustPlaceholders(result) {
+    const modal = $('#modal-prestatrust');
+    const module = result.module.attributes;
+
+    if (result.confirmation_subject !== 'PrestaTrust' || !modal.length) {
+      return;
+    }
+
+    const alertClass = module.prestatrust.status ? 'success' : 'warning';
+
+    if (module.prestatrust.check_list.property) {
+      modal.find('#pstrust-btn-property-ok').show();
+      modal.find('#pstrust-btn-property-nok').hide();
+    } else {
+      modal.find('#pstrust-btn-property-ok').hide();
+      modal.find('#pstrust-btn-property-nok').show();
+      modal.find('#pstrust-buy').attr('href', module.url).toggle(module.url !== null);
+    }
+
+    modal.find('#pstrust-img').attr({src: module.img, alt: module.name});
+    modal.find('#pstrust-name').text(module.displayName);
+    modal.find('#pstrust-author').text(module.author);
+    modal.find('#pstrust-label').attr('class', `text-${alertClass}`).text(module.prestatrust.status ? 'OK' : 'KO');
+    modal.find('#pstrust-message').attr('class', `alert alert-${alertClass}`);
+    modal.find('#pstrust-message > p').text(module.prestatrust.message);
+
+    // eslint-disable-next-line
+    return modal;
+  };
+
+  this.dispatchPreEvent = function (action, element) {
+    const event = jQuery.Event('module_card_action_event');
+    $(element).trigger(event, [action]);
+    if (event.isPropagationStopped() !== false || event.isImmediatePropagationStopped() !== false) {
+      return false; // if all handlers have not been called, then stop propagation of the click event.
+    }
+    return (event.result !== false); // explicit false must be set from handlers to stop propagation of the click event.
+  };
+
+  this.initActionButtons = function () {
+    const that = this;
+
+    $(document).on('click', this.forceDeletionOption, function () {
+      const btn = $(
+        that.moduleActionModalUninstallLinkSelector,
+        $(`div.module-item-list[data-tech-name='${$(this).attr('data-tech-name')}']`),
+      );
+
+      if ($(this).prop('checked') === true) {
+        btn.attr('data-deletion', 'true');
+      } else {
+        btn.removeAttr('data-deletion');
+      }
+    });
+
+    $(document).on('click', this.moduleActionMenuInstallLinkSelector, function () {
+      if ($('#modal-prestatrust').length) {
+        $('#modal-prestatrust').modal('hide');
+      }
+      return that.dispatchPreEvent('install', this) && that.confirmAction('install', this) && that.requestToController('install', $(this));
+    });
+    $(document).on('click', this.moduleActionMenuEnableLinkSelector, function () {
+      return that.dispatchPreEvent('enable', this) && that.confirmAction('enable', this) && that.requestToController('enable', $(this));
+    });
+    $(document).on('click', this.moduleActionMenuUninstallLinkSelector, function () {
+      return that.dispatchPreEvent('uninstall', this) && that.confirmAction('uninstall', this) && that.requestToController('uninstall', $(this));
+    });
+    $(document).on('click', this.moduleActionMenuDisableLinkSelector, function () {
+      return that.dispatchPreEvent('disable', this) && that.confirmAction('disable', this) && that.requestToController('disable', $(this));
+    });
+    $(document).on('click', this.moduleActionMenuEnableMobileLinkSelector, function () {
+      return that.dispatchPreEvent('enable_mobile', this) && that.confirmAction('enable_mobile', this) && that.requestToController('enable_mobile', $(this));
+    });
+    $(document).on('click', this.moduleActionMenuDisableMobileLinkSelector, function () {
+      return that.dispatchPreEvent('disable_mobile', this) && that.confirmAction('disable_mobile', this) && that.requestToController('disable_mobile', $(this));
+    });
+    $(document).on('click', this.moduleActionMenuResetLinkSelector, function () {
+      return that.dispatchPreEvent('reset', this) && that.confirmAction('reset', this) && that.requestToController('reset', $(this));
+    });
+    $(document).on('click', this.moduleActionMenuUpdateLinkSelector, function () {
+      return that.dispatchPreEvent('update', this) && that.confirmAction('update', this) && that.requestToController('update', $(this));
+    });
+
+    $(document).on('click', this.moduleActionModalDisableLinkSelector, function () {
+      return that.requestToController('disable', $(that.moduleActionMenuDisableLinkSelector, $(`div.module-item-list[data-tech-name='${$(this).attr('data-tech-name')}']`)));
+    });
+    $(document).on('click', this.moduleActionModalResetLinkSelector, function () {
+      return that.requestToController('reset', $(that.moduleActionMenuResetLinkSelector, $(`div.module-item-list[data-tech-name='${$(this).attr('data-tech-name')}']`)));
+    });
+    $(document).on('click', this.moduleActionModalUninstallLinkSelector, (e) => {
+      $(e.target).parents('.modal').on('hidden.bs.modal', (() => that.requestToController(
+        'uninstall',
+        $(
+          that.moduleActionMenuUninstallLinkSelector,
+          $(`div.module-item-list[data-tech-name='${$(e.target).attr('data-tech-name')}']`),
+        ),
+        $(e.target).attr('data-deletion'),
+      )));
+    });
+  };
+
+  this.requestToController = function (action, element, forceDeletion) {
+    const that = this;
+    const jqElementObj = element.closest(this.moduleItemActionsSelector);
+    const form = element.closest('form');
+    const spinnerObj = $('<button class="btn-primary-reverse onclick unbind spinner "></button>');
+    const url = `//${window.location.host}${form.attr('action')}`;
+    const actionParams = form.serializeArray();
+
+    if (forceDeletion === 'true' || forceDeletion === true) {
+      actionParams.push({name: 'actionParams[deletion]', value: true});
+    }
+
+    $.ajax({
+      url,
+      dataType: 'json',
+      method: 'POST',
+      data: actionParams,
+      beforeSend() {
+        jqElementObj.hide();
+        jqElementObj.after(spinnerObj);
+      },
+    }).done((result) => {
+      if (typeof result === 'undefined') {
+        $.growl.error({message: 'No answer received from server'});
+      } else {
+        const moduleTechName = Object.keys(result)[0];
+
+        if (result[moduleTechName].status === false) {
+          if (typeof result[moduleTechName].confirmation_subject !== 'undefined') {
+            that.confirmPrestaTrust(result[moduleTechName]);
+          }
+          $.growl.error({message: result[moduleTechName].msg});
+        } else {
+          $.growl.notice({message: result[moduleTechName].msg});
+          let alteredSelector = null;
+          let mainElement = null;
+
+          if (action === 'uninstall') {
+            jqElementObj.fadeOut(() => {
+              alteredSelector = that.getModuleItemSelector().replace('.', '');
+              mainElement = jqElementObj.parents(`.${alteredSelector}`).first();
+              mainElement.remove();
+            });
+            BOEvent.emitEvent('Module Uninstalled', 'CustomEvent');
+          } else if (action === 'disable') {
+            alteredSelector = that.getModuleItemSelector().replace('.', '');
+            mainElement = jqElementObj.parents(`.${alteredSelector}`).first();
+            mainElement.addClass(`${alteredSelector}-isNotActive`);
+            mainElement.attr('data-active', '0');
+            BOEvent.emitEvent('Module Disabled', 'CustomEvent');
+          } else if (action === 'enable') {
+            alteredSelector = that.getModuleItemSelector().replace('.', '');
+            mainElement = jqElementObj.parents(`.${alteredSelector}`).first();
+            mainElement.removeClass(`${alteredSelector}-isNotActive`);
+            mainElement.attr('data-active', '1');
+            BOEvent.emitEvent('Module Enabled', 'CustomEvent');
+          }
+
+          jqElementObj.replaceWith(result[moduleTechName].action_menu_html);
+        }
+      }
+    }).always(() => {
+      jqElementObj.fadeIn();
+      spinnerObj.remove();
+    });
+    return false;
+  };
+};