first commit

admin-kalsport/themes/new-theme/js/pages/import/FormFieldToggle.js

@@ -0,0 +1,203 @@
+/**
+ * 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 {$} = window;
+
+const entityCategories = 0;
+const entityProducts = 1;
+const entityCombinations = 2;
+const entityCustomers = 3;
+const entityAddresses = 4;
+const entityBrands = 5;
+const entitySuppliers = 6;
+const entityAlias = 7;
+const entityStoreContacts = 8;
+
+export default class FormFieldToggle {
+  constructor() {
+    $('.js-entity-select').on('change', () => this.toggleForm());
+
+    this.toggleForm();
+  }
+
+  toggleForm() {
+    const selectedOption = $('#entity').find('option:selected');
+    const selectedEntity = parseInt(selectedOption.val(), 10);
+    const entityName = selectedOption.text().toLowerCase();
+
+    this.toggleEntityAlert(selectedEntity);
+    this.toggleFields(selectedEntity, entityName);
+    this.loadAvailableFields(selectedEntity);
+  }
+
+  /**
+   * Toggle alert warning for selected import entity
+   *
+   * @param {int} selectedEntity
+   */
+  toggleEntityAlert(selectedEntity) {
+    const $alert = $('.js-entity-alert');
+
+    if ([entityCategories, entityProducts].includes(selectedEntity)) {
+      $alert.show();
+    } else {
+      $alert.hide();
+    }
+  }
+
+  /**
+   * Toggle available options for selected entity
+   *
+   * @param {int} selectedEntity
+   * @param {string} entityName
+   */
+  toggleFields(selectedEntity, entityName) {
+    const $truncateFormGroup = $('.js-truncate-form-group');
+    const $matchRefFormGroup = $('.js-match-ref-form-group');
+    const $regenerateFormGroup = $('.js-regenerate-form-group');
+    const $forceIdsFormGroup = $('.js-force-ids-form-group');
+    const $entityNamePlaceholder = $('.js-entity-name');
+
+    if (entityStoreContacts === selectedEntity) {
+      $truncateFormGroup.hide();
+    } else {
+      $truncateFormGroup.show();
+    }
+
+    if ([entityProducts, entityCombinations].includes(selectedEntity)) {
+      $matchRefFormGroup.show();
+    } else {
+      $matchRefFormGroup.hide();
+    }
+
+    if ([
+      entityCategories,
+      entityProducts,
+      entityBrands,
+      entitySuppliers,
+      entityStoreContacts,
+    ].includes(selectedEntity)
+    ) {
+      $regenerateFormGroup.show();
+    } else {
+      $regenerateFormGroup.hide();
+    }
+
+    if ([
+      entityCategories,
+      entityProducts,
+      entityCustomers,
+      entityAddresses,
+      entityBrands,
+      entitySuppliers,
+      entityStoreContacts,
+      entityAlias,
+    ].includes(selectedEntity)
+    ) {
+      $forceIdsFormGroup.show();
+    } else {
+      $forceIdsFormGroup.hide();
+    }
+
+    $entityNamePlaceholder.html(entityName);
+  }
+
+  /**
+   * Load available fields for given entity
+   *
+   * @param {int} entity
+   */
+  loadAvailableFields(entity) {
+    const $availableFields = $('.js-available-fields');
+
+    $.ajax({
+      url: $availableFields.data('url'),
+      data: {
+        entity,
+      },
+      dataType: 'json',
+    }).then((response) => {
+      this.removeAvailableFields($availableFields);
+
+      for (let i = 0; i < response.length; i += 1) {
+        this.appendAvailableField(
+          $availableFields,
+          response[i].label + (response[i].required ? '*' : ''),
+          response[i].description,
+        );
+      }
+
+      $availableFields.find('[data-toggle="popover"]').popover();
+    });
+  }
+
+  /**
+   * Remove available fields content from given container.
+   *
+   * @param {jQuery} $container
+   * @private
+   */
+  removeAvailableFields($container) {
+    $container.find('[data-toggle="popover"]').popover('hide');
+    $container.empty();
+  }
+
+  /**
+   * Append a help box to given field.
+   *
+   * @param {jQuery} $field
+   * @param {String} helpBoxContent
+   * @private
+   */
+  appendHelpBox($field, helpBoxContent) {
+    const $helpBox = $('.js-available-field-popover-template').clone();
+
+    $helpBox.attr('data-content', helpBoxContent);
+    $helpBox.removeClass('js-available-field-popover-template d-none');
+    $field.append($helpBox);
+  }
+
+  /**
+   * Append available field to given container.
+   *
+   * @param {jQuery} $appendTo field will be appended to this container.
+   * @param {String} fieldText
+   * @param {String} helpBoxContent
+   * @private
+   */
+  appendAvailableField($appendTo, fieldText, helpBoxContent) {
+    const $field = $('.js-available-field-template').clone();
+
+    $field.text(fieldText);
+
+    if (helpBoxContent) {
+      // Append help box next to the field
+      this.appendHelpBox($field, helpBoxContent);
+    }
+
+    $field.removeClass('js-available-field-template d-none');
+    $field.appendTo($appendTo);
+  }
+}

admin-kalsport/themes/new-theme/js/pages/import/ImportPage.js

@@ -0,0 +1,274 @@
+/**
+ * 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)
+ */
+
+import FormFieldToggle from './FormFieldToggle';
+
+const {$} = window;
+
+export default class ImportPage {
+  constructor() {
+    new FormFieldToggle();
+
+    $('.js-from-files-history-btn').on('click', () => this.showFilesHistoryHandler());
+    $('.js-close-files-history-block-btn').on('click', () => this.closeFilesHistoryHandler());
+    $('#fileHistoryTable').on('click', '.js-use-file-btn', (event) => this.useFileFromFilesHistory(event));
+    $('.js-change-import-file-btn').on('click', () => this.changeImportFileHandler());
+    $('.js-import-file').on('change', () => this.uploadFile());
+
+    this.toggleSelectedFile();
+    this.handleSubmit();
+  }
+
+  /**
+   * Handle submit and add confirm box in case the toggle button about
+   * deleting all entities before import is checked
+   */
+  handleSubmit() {
+    $('.js-import-form').on('submit', function () {
+      const $this = $(this);
+
+      if ($this.find('input[name="truncate"]:checked').val() === '1') {
+        /* eslint-disable-next-line max-len */
+        return window.confirm(`${$this.data('delete-confirm-message')} ${$.trim($('#entity > option:selected').text().toLowerCase())}?`);
+      }
+
+      return true;
+    });
+  }
+
+  /**
+   * Check if selected file names exists and if so, then display it
+   */
+  toggleSelectedFile() {
+    const selectFilename = $('#csv').val();
+
+    if (selectFilename.length > 0) {
+      this.showImportFileAlert(selectFilename);
+      this.hideFileUploadBlock();
+    }
+  }
+
+  changeImportFileHandler() {
+    this.hideImportFileAlert();
+    this.showFileUploadBlock();
+  }
+
+  /**
+   * Show files history event handler
+   */
+  showFilesHistoryHandler() {
+    this.showFilesHistory();
+    this.hideFileUploadBlock();
+  }
+
+  /**
+   * Close files history event handler
+   */
+  closeFilesHistoryHandler() {
+    this.closeFilesHistory();
+    this.showFileUploadBlock();
+  }
+
+  /**
+   * Show files history block
+   */
+  showFilesHistory() {
+    $('.js-files-history-block').removeClass('d-none');
+  }
+
+  /**
+   * Hide files history block
+   */
+  closeFilesHistory() {
+    $('.js-files-history-block').addClass('d-none');
+  }
+
+  /**
+   *  Prefill hidden file input with selected file name from history
+   */
+  useFileFromFilesHistory(event) {
+    const filename = $(event.target).closest('.btn-group').data('file');
+
+    $('.js-import-file-input').val(filename);
+
+    this.showImportFileAlert(filename);
+    this.closeFilesHistory();
+  }
+
+  /**
+   * Show alert with imported file name
+   */
+  showImportFileAlert(filename) {
+    $('.js-import-file-alert').removeClass('d-none');
+    $('.js-import-file').text(filename);
+  }
+
+  /**
+   * Hides selected import file alert
+   */
+  hideImportFileAlert() {
+    $('.js-import-file-alert').addClass('d-none');
+  }
+
+  /**
+   * Hides import file upload block
+   */
+  hideFileUploadBlock() {
+    $('.js-file-upload-form-group').addClass('d-none');
+  }
+
+  /**
+   * Hides import file upload block
+   */
+  showFileUploadBlock() {
+    $('.js-file-upload-form-group').removeClass('d-none');
+  }
+
+  /**
+   * Make file history button clickable
+   */
+  enableFilesHistoryBtn() {
+    $('.js-from-files-history-btn').removeAttr('disabled');
+  }
+
+  /**
+   * Show error message if file uploading failed
+   *
+   * @param {string} fileName
+   * @param {integer} fileSize
+   * @param {string} message
+   */
+  showImportFileError(fileName, fileSize, message) {
+    const $alert = $('.js-import-file-error');
+
+    const fileData = `${fileName} (${this.humanizeSize(fileSize)})`;
+
+    $alert.find('.js-file-data').text(fileData);
+    $alert.find('.js-error-message').text(message);
+    $alert.removeClass('d-none');
+  }
+
+  /**
+   * Hide file uploading error
+   */
+  hideImportFileError() {
+    const $alert = $('.js-import-file-error');
+    $alert.addClass('d-none');
+  }
+
+  /**
+   * Show file size in human readable format
+   *
+   * @param {int} bytes
+   *
+   * @returns {string}
+   */
+  humanizeSize(bytes) {
+    if (typeof bytes !== 'number') {
+      return '';
+    }
+
+    if (bytes >= 1000000000) {
+      return `${(bytes / 1000000000).toFixed(2)} GB`;
+    }
+
+    if (bytes >= 1000000) {
+      return `${(bytes / 1000000).toFixed(2)} MB`;
+    }
+
+    return `${(bytes / 1000).toFixed(2)} KB`;
+  }
+
+  /**
+   * Upload selected import file
+   */
+  uploadFile() {
+    this.hideImportFileError();
+
+    const $input = $('#file');
+    const uploadedFile = $input.prop('files')[0];
+
+    const maxUploadSize = $input.data('max-file-upload-size');
+
+    if (maxUploadSize < uploadedFile.size) {
+      this.showImportFileError(uploadedFile.name, uploadedFile.size, 'File is too large');
+      return;
+    }
+
+    const data = new FormData();
+    data.append('file', uploadedFile);
+
+    $.ajax({
+      type: 'POST',
+      url: $('.js-import-form').data('file-upload-url'),
+      data,
+      cache: false,
+      contentType: false,
+      processData: false,
+    }).then((response) => {
+      if (response.error) {
+        this.showImportFileError(uploadedFile.name, uploadedFile.size, response.error);
+        return;
+      }
+
+      const filename = response.file.name;
+
+      $('.js-import-file-input').val(filename);
+
+      this.showImportFileAlert(filename);
+      this.hideFileUploadBlock();
+      this.addFileToHistoryTable(filename);
+      this.enableFilesHistoryBtn();
+    });
+  }
+
+  /**
+   * Renders new row in files history table
+   *
+   * @param {string} filename
+   */
+  addFileToHistoryTable(filename) {
+    const $table = $('#fileHistoryTable');
+
+    const baseDeleteUrl = $table.data('delete-file-url');
+    const deleteUrl = `${baseDeleteUrl}&filename=${encodeURIComponent(filename)}`;
+
+    const baseDownloadUrl = $table.data('download-file-url');
+    const downloadUrl = `${baseDownloadUrl}&filename=${encodeURIComponent(filename)}`;
+
+    const $template = $table.find('tr:first').clone();
+
+    $template.removeClass('d-none');
+    $template.find('td:first').text(filename);
+    $template.find('.btn-group').attr('data-file', filename);
+    $template.find('.js-delete-file-btn').attr('href', deleteUrl);
+    $template.find('.js-download-file-btn').attr('href', downloadUrl);
+
+    $table.find('tbody').append($template);
+
+    const filesNumber = $table.find('tr').length - 1;
+    $('.js-files-history-number').text(filesNumber);
+  }
+}

admin-kalsport/themes/new-theme/js/pages/import/index.js

@@ -0,0 +1,32 @@
+/**
+ * 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)
+ */
+
+import ImportPage from './ImportPage';
+
+const {$} = window;
+
+$(() => {
+  new ImportPage();
+});