first commit

iadmin/themes/new-theme/js/pages/import/FormFieldToggle.js

@@ -0,0 +1,155 @@
+/**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ */
+
+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.bind(this));
+
+    this.toggleForm();
+  }
+
+  toggleForm() {
+    let selectedOption = $('#entity').find('option:selected');
+    let selectedEntity = parseInt(selectedOption.val());
+    let 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) {
+    let $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 url = -1 === window.location.href.indexOf('index.php') ? '../../../ajax.php' : '../../../../ajax.php';
+
+    $.ajax({
+      url: url,
+      data: {
+        getAvailableFields: 1,
+        entity: entity
+      },
+      dataType: 'json',
+    }).then(response => {
+      let fields = '';
+      let $availableFields = $('.js-available-fields');
+      $availableFields.empty();
+
+      for (let i = 0; i < response.length; i++) {
+        fields += response[i].field;
+      }
+
+      $availableFields.html(fields);
+      $availableFields.find('[data-toggle="popover"]').popover();
+    });
+  }
+}

iadmin/themes/new-theme/js/pages/import/ImportPage.js

@@ -0,0 +1,268 @@
+/**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ */
+
+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') {
+        return confirm(`${$this.data('delete-confirm-message')} ${$.trim($('#entity > option:selected').text().toLowerCase())}?`);
+      }
+    });
+  }
+
+  /**
+   * Check if selected file names exists and if so, then display it
+   */
+  toggleSelectedFile() {
+    let 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) {
+    let 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').html(fileData);
+    $alert.find('.js-error-message').html(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: data,
+      cache: false,
+      contentType: false,
+      processData: false,
+    }).then(response => {
+      if (response.error) {
+        this.showImportFileError(uploadedFile.name, uploadedFile.size, response.error);
+        return;
+      }
+
+      let 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');
+
+    let baseDeleteUrl = $table.data('delete-file-url');
+    let deleteUrl = baseDeleteUrl + '&filename=' + encodeURIComponent(filename);
+
+    let baseDownloadUrl = $table.data('download-file-url');
+    let downloadUrl = baseDownloadUrl + '&filename=' + encodeURIComponent(filename);
+
+    let $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);
+
+    let filesNumber = $table.find('tr').length - 1;
+    $('.js-files-history-number').text(filesNumber);
+  }
+}

iadmin/themes/new-theme/js/pages/import/index.js

@@ -0,0 +1,32 @@
+/**
+ * 2007-2018 PrestaShop
+ *
+ * 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.txt.
+ * 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 http://www.prestashop.com for more information.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2018 PrestaShop SA
+ * @license   https://opensource.org/licenses/OSL-3.0 Open Software License (OSL 3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ */
+
+import ImportPage from './ImportPage';
+
+const $ = window.$;
+
+$(() => {
+  new ImportPage();
+});