diff --git a/src/module-elasticsuite-catalog/view/adminhtml/templates/catalog/product/attribute/js.phtml b/src/module-elasticsuite-catalog/view/adminhtml/templates/catalog/product/attribute/js.phtml index cbe08d140..93f59d73f 100644 --- a/src/module-elasticsuite-catalog/view/adminhtml/templates/catalog/product/attribute/js.phtml +++ b/src/module-elasticsuite-catalog/view/adminhtml/templates/catalog/product/attribute/js.phtml @@ -66,7 +66,7 @@ ($('frontend_input').value == 'select' || $('frontend_input').value == 'multiselect' || $('frontend_input').value == 'price' - || $('frontend_input').value == 'text') + || $('frontend_input').value == 'text' || $('frontend_input').value == 'boolean') ) { if($('is_filterable') && !$('is_filterable').getAttribute('readonly')){ @@ -209,21 +209,27 @@ helper('Magento\Catalog\Helper\Data')->getAttributeHiddenFields() as $type => $fields): ?> case '': + var isFrontTabHidden = false; getFrontTab().hide(); + isFrontTabHidden = true; defaultValueTextVisibility = - defaultValueTextareaVisibility = - defaultValueDateVisibility = - defaultValueYesnoVisibility = false; + defaultValueTextareaVisibility = + defaultValueDateVisibility = + defaultValueYesnoVisibility = false; scopeVisibility = false; setRowVisibility('', false); - break; + + if (!isFrontTabHidden){ + getFrontTab().show(); + } + break; default: @@ -338,6 +344,7 @@ jQuery(function($) { bindAttributeInputType(); + // @todo: refactor collapsable component $('.attribute-popup .collapse, [data-role="advanced_fieldset-content"]') .collapsable() .collapse('hide'); @@ -349,7 +356,6 @@ window.showDefaultRows = showDefaultRows; window.switchDefaultValueField = switchDefaultValueField; window.switchIsFilterable = switchIsFilterable; - window.switchIsFilterable = switchIsFilterable; window.bindAttributeInputType = bindAttributeInputType; window.checkOptionsPanelVisibility = checkOptionsPanelVisibility; window.getFrontTab = getFrontTab; diff --git a/src/module-elasticsuite-swatches/view/adminhtml/layout/catalog_product_attribute_edit.xml b/src/module-elasticsuite-swatches/view/adminhtml/layout/catalog_product_attribute_edit.xml index 68b251570..e1ef17ec4 100644 --- a/src/module-elasticsuite-swatches/view/adminhtml/layout/catalog_product_attribute_edit.xml +++ b/src/module-elasticsuite-swatches/view/adminhtml/layout/catalog_product_attribute_edit.xml @@ -9,7 +9,7 @@ * * @category Smile * @package Smile\ElasticsuiteSwatches - * @author Romain Ruaud + * @author Richard BAYET * @copyright 2018 Smile * @license Open Software License ("OSL") v. 3.0 */ @@ -18,7 +18,7 @@ - Smile_ElasticsuiteSwatches::catalog/product/attribute/js.phtml + Magento_Swatches::catalog/product/attribute/js.phtml diff --git a/src/module-elasticsuite-swatches/view/adminhtml/layout/catalog_product_attribute_edit_popup.xml b/src/module-elasticsuite-swatches/view/adminhtml/layout/catalog_product_attribute_edit_popup.xml index f9caf26b2..6488ef240 100644 --- a/src/module-elasticsuite-swatches/view/adminhtml/layout/catalog_product_attribute_edit_popup.xml +++ b/src/module-elasticsuite-swatches/view/adminhtml/layout/catalog_product_attribute_edit_popup.xml @@ -9,16 +9,16 @@ * * @category Smile * @package Smile\ElasticsuiteSwatches - * @author Romain Ruaud + * @author Richard BAYET * @copyright 2018 Smile * @license Open Software License ("OSL") v. 3.0 */ --> - + - Smile_ElasticsuiteSwatches::catalog/product/attribute/js.phtml + Magento_Swatches::catalog/product/attribute/js.phtml diff --git a/src/module-elasticsuite-swatches/view/adminhtml/requirejs-config.js b/src/module-elasticsuite-swatches/view/adminhtml/requirejs-config.js new file mode 100644 index 000000000..615668460 --- /dev/null +++ b/src/module-elasticsuite-swatches/view/adminhtml/requirejs-config.js @@ -0,0 +1,21 @@ +/** + * DISCLAIMER + * + * Do not edit or add to this file if you wish to upgrade Smile ElasticSuite to newer + * versions in the future. + * + * + * @category Smile + * @package Smile\ElasticsuiteSwatches + * @author Richard BAYET + * @copyright 2018 Smile + * @license Open Software License ("OSL") v. 3.0 + */ + +var config = { + map: { + '*': { + swatchesProductAttributes: 'Smile_ElasticsuiteSwatches/js/product-attributes' + } + } +}; diff --git a/src/module-elasticsuite-swatches/view/adminhtml/templates/catalog/product/attribute/js.phtml b/src/module-elasticsuite-swatches/view/adminhtml/templates/catalog/product/attribute/js.phtml deleted file mode 100644 index 43e063721..000000000 --- a/src/module-elasticsuite-swatches/view/adminhtml/templates/catalog/product/attribute/js.phtml +++ /dev/null @@ -1,429 +0,0 @@ - - * @copyright 2018 Smile - * @license Open Software License ("OSL") v. 3.0 - */ - - -// @codingStandardsIgnoreFile - -?> - diff --git a/src/module-elasticsuite-swatches/view/adminhtml/web/js/product-attributes.js b/src/module-elasticsuite-swatches/view/adminhtml/web/js/product-attributes.js new file mode 100644 index 000000000..22d726aec --- /dev/null +++ b/src/module-elasticsuite-swatches/view/adminhtml/web/js/product-attributes.js @@ -0,0 +1,445 @@ +/** + * DISCLAIMER + * + * Do not edit or add to this file if you wish to upgrade Smile ElasticSuite to newer + * versions in the future. + * + * + * @category Smile + * @package Smile\ElasticsuiteSwatches + * @author Richard BAYET + * @copyright 2018 Smile + * @license Open Software License ("OSL") v. 3.0 + */ + + +/** + * @api + */ +define([ + 'jquery', + 'Magento_Ui/js/modal/alert', + 'Magento_Ui/js/modal/prompt', + 'uiRegistry', + 'collapsable' +], function ($, alert, prompt, rg) { + 'use strict'; + + return function (optionConfig) { + var swatchProductAttributes = { + frontendInput: $('#frontend_input'), + isFilterable: $('#is_filterable'), + isFilterableInSearch: $('#is_filterable_in_search'), + backendType: $('#backend_type'), + usedForSortBy: $('#used_for_sort_by'), + frontendClass: $('#frontend_class'), + isWysiwygEnabled: $('#is_wysiwyg_enabled'), + isHtmlAllowedOnFront: $('#is_html_allowed_on_front'), + isRequired: $('#is_required'), + isUnique: $('#is_unique'), + defaultValueText: $('#default_value_text'), + defaultValueTextarea: $('#default_value_textarea'), + defaultValueDate: $('#default_value_date'), + defaultValueYesno: $('#default_value_yesno'), + isGlobal: $('#is_global'), + useProductImageForSwatch: $('#use_product_image_for_swatch'), + updateProductPreviewImage: $('#update_product_preview_image'), + usedInProductListing: $('#used_in_product_listing'), + isVisibleOnFront: $('#is_visible_on_front'), + position: $('#position'), + attrTabsFront: $('#product_attribute_tabs_front'), + + /** + * @returns {*|jQuery|HTMLElement} + */ + get tabsFront() { + return this.attrTabsFront.length ? this.attrTabsFront.closest('li') : $('#front_fieldset-wrapper'); + }, + selectFields: ['select', 'multiselect', 'price', 'swatch_text', 'swatch_visual'], + + /** + * @this {swatchProductAttributes} + */ + toggleApplyVisibility: function (select) { + if ($(select).val() === 1) { + $(select).next('select').removeClass('no-display'); + $(select).next('select').removeClass('ignore-validate'); + } else { + $(select).next('select').addClass('no-display'); + $(select).next('select').addClass('ignore-validate'); + $(select).next('select option:selected').each(function () { + this.selected = false; + }); + } + }, + + /** + * @this {swatchProductAttributes} + */ + checkOptionsPanelVisibility: function () { + var selectOptionsPanel = $('#manage-options-panel'), + visualOptionsPanel = $('#swatch-visual-options-panel'), + textOptionsPanel = $('#swatch-text-options-panel'); + + this._hidePanel(selectOptionsPanel); + this._hidePanel(visualOptionsPanel); + this._hidePanel(textOptionsPanel); + + switch (this.frontendInput.val()) { + case 'swatch_visual': + this._showPanel(visualOptionsPanel); + break; + + case 'swatch_text': + this._showPanel(textOptionsPanel); + break; + + case 'select': + case 'multiselect': + this._showPanel(selectOptionsPanel); + break; + } + }, + + /** + * @this {swatchProductAttributes} + */ + bindAttributeInputType: function () { + this.checkOptionsPanelVisibility(); + this.switchDefaultValueField(); + + var filterableFrontendInputs = $.merge(this.selectFields, ['text', 'boolean']); + if (!~$.inArray(this.frontendInput.val(), filterableFrontendInputs)) { + // not in array + this.isFilterable.selectedIndex = 0; + this._disable(this.isFilterable); + this._disable(this.isFilterableInSearch); + } else { + // in array + this._enable(this.isFilterable); + this._enable(this.isFilterableInSearch); + this.backendType.val('int'); + } + + if (this.frontendInput.val() === 'multiselect' || + this.frontendInput.val() === 'gallery' || + this.frontendInput.val() === 'textarea' + ) { + this._disable(this.usedForSortBy); + } else { + this._enable(this.usedForSortBy); + } + + if (this.frontendInput.val() === 'swatch_text') { + $('.swatch-text-field-0').addClass('required-option'); + } else { + $('.swatch-text-field-0').removeClass('required-option'); + } + + this.setRowVisibility(this.isWysiwygEnabled, false); + this.setRowVisibility(this.isHtmlAllowedOnFront, false); + + switch (this.frontendInput.val()) { + case 'textarea': + this.setRowVisibility(this.isWysiwygEnabled, true); + + if (this.isWysiwygEnabled.val() === '0') { + this._enable(this.isHtmlAllowedOnFront); + } + this.frontendClass.val(''); + this._disable(this.frontendClass); + break; + + case 'text': + this.setRowVisibility(this.isHtmlAllowedOnFront, true); + this._enable(this.frontendClass); + break; + + case 'select': + case 'multiselect': + this.setRowVisibility(this.isHtmlAllowedOnFront, true); + this.frontendClass.val(''); + this._disable(this.frontendClass); + break; + default: + this.frontendClass.val(''); + this._disable(this.frontendClass); + } + + this.switchIsFilterable(); + }, + + /** + * @this {swatchProductAttributes} + */ + switchIsFilterable: function () { + if (this.isFilterable.selectedIndex === 0) { + this._disable(this.position); + } else { + this._enable(this.position); + } + }, + + /** + * @this {swatchProductAttributes} + */ + switchDefaultValueField: function () { + var currentValue = this.frontendInput.val(), + defaultValueTextVisibility = false, + defaultValueTextareaVisibility = false, + defaultValueDateVisibility = false, + defaultValueYesnoVisibility = false, + scopeVisibility = true, + useProductImageForSwatch = false, + defaultValueUpdateImage = false, + optionDefaultInputType = '', + isFrontTabHidden = false, + thing = this; + + if (!this.frontendInput.length) { + return; + } + + switch (currentValue) { + case 'select': + optionDefaultInputType = 'radio'; + break; + + case 'multiselect': + optionDefaultInputType = 'checkbox'; + break; + + case 'date': + defaultValueDateVisibility = true; + break; + + case 'boolean': + defaultValueYesnoVisibility = true; + break; + + case 'textarea': + defaultValueTextareaVisibility = true; + break; + + case 'media_image': + defaultValueTextVisibility = false; + break; + + case 'price': + scopeVisibility = false; + break; + + case 'swatch_visual': + useProductImageForSwatch = true; + defaultValueUpdateImage = true; + defaultValueTextVisibility = false; + break; + + case 'swatch_text': + useProductImageForSwatch = false; + defaultValueUpdateImage = true; + defaultValueTextVisibility = false; + break; + default: + defaultValueTextVisibility = true; + break; + } + + delete optionConfig.hiddenFields['swatch_visual']; + delete optionConfig.hiddenFields['swatch_text']; + + if (currentValue === 'media_image') { + this.tabsFront.hide(); + this.setRowVisibility(this.isRequired, false); + this.setRowVisibility(this.isUnique, false); + this.setRowVisibility(this.frontendClass, false); + } else if (optionConfig.hiddenFields[currentValue]) { + $.each(optionConfig.hiddenFields[currentValue], function (key, option) { + switch (option) { + case '_front_fieldset': + thing.tabsFront.hide(); + isFrontTabHidden = true; + break; + + case '_default_value': + defaultValueTextVisibility = false; + defaultValueTextareaVisibility = false; + defaultValueDateVisibility = false; + defaultValueYesnoVisibility = false; + break; + + case '_scope': + scopeVisibility = false; + break; + default: + thing.setRowVisibility($('#' + option), false); + } + }); + + if (!isFrontTabHidden) { + thing.tabsFront.show(); + } + + } else { + this.tabsFront.show(); + this.showDefaultRows(); + } + + this.setRowVisibility(this.defaultValueText, defaultValueTextVisibility); + this.setRowVisibility(this.defaultValueTextarea, defaultValueTextareaVisibility); + this.setRowVisibility(this.defaultValueDate, defaultValueDateVisibility); + this.setRowVisibility(this.defaultValueYesno, defaultValueYesnoVisibility); + this.setRowVisibility(this.isGlobal, scopeVisibility); + + /* swatch attributes */ + this.setRowVisibility(this.useProductImageForSwatch, useProductImageForSwatch); + this.setRowVisibility(this.updateProductPreviewImage, defaultValueUpdateImage); + + $('input[name=\'default[]\']').each(function () { + $(this).attr('type', optionDefaultInputType); + }); + }, + + /** + * @this {swatchProductAttributes} + */ + showDefaultRows: function () { + this.setRowVisibility(this.isRequired, true); + this.setRowVisibility(this.isUnique, true); + this.setRowVisibility(this.frontendClass, true); + }, + + /** + * @param {Object} el + * @param {Boolean} isVisible + * @this {swatchProductAttributes} + */ + setRowVisibility: function (el, isVisible) { + if (isVisible) { + el.show(); + el.closest('.field').show(); + } else { + el.hide(); + el.closest('.field').hide(); + } + }, + + /** + * @param {Object} el + * @this {swatchProductAttributes} + */ + _disable: function (el) { + el.attr('disabled', 'disabled'); + }, + + /** + * @param {Object} el + * @this {swatchProductAttributes} + */ + _enable: function (el) { + if (!el.attr('readonly')) { + el.removeAttr('disabled'); + } + }, + + /** + * @param {Object} el + * @this {swatchProductAttributes} + */ + _showPanel: function (el) { + el.closest('.fieldset').show(); + this._render(el.attr('id')); + }, + + /** + * @param {Object} el + * @this {swatchProductAttributes} + */ + _hidePanel: function (el) { + el.closest('.fieldset').hide(); + }, + + /** + * @param {String} id + * @this {swatchProductAttributes} + */ + _render: function (id) { + rg.get(id, function () { + $('#' + id).trigger('render'); + }); + }, + + /** + * @param {String} promptMessage + * @this {swatchProductAttributes} + */ + saveAttributeInNewSet: function (promptMessage) { + + prompt({ + content: promptMessage, + actions: { + + /** + * @param {String} val + * @this {actions} + */ + confirm: function (val) { + var rules = ['required-entry', 'validate-no-html-tags'], + newAttributeSetNameInputId = $('#new_attribute_set_name'), + editForm = $('#edit_form'), + newAttributeSetName = val, + i; + + if (!newAttributeSetName) { + return; + } + + for (i = 0; i < rules.length; i++) { + if (!$.validator.methods[rules[i]](newAttributeSetName)) { + alert({ + content: $.validator.messages[rules[i]] + }); + + return; + } + } + + if (newAttributeSetNameInputId.length) { + newAttributeSetNameInputId.val(newAttributeSetName); + } else { + editForm.append(new Element('input', { + type: 'hidden', + id: newAttributeSetNameInputId, + name: 'new_attribute_set_name', + value: newAttributeSetName + }) + ); + } + // Temporary solution will replaced after refactoring of attributes functionality + editForm.triggerHandler('save'); + } + } + }); + } + }; + + $(function () { + $('#frontend_input').bind('change', function () { + swatchProductAttributes.bindAttributeInputType(); + }); + $('#is_filterable').bind('change', function () { + swatchProductAttributes.switchIsFilterable(); + }); + + swatchProductAttributes.bindAttributeInputType(); + + // @todo: refactor collapsable component + $('.attribute-popup .collapse, [data-role="advanced_fieldset-content"]') + .collapsable() + .collapse('hide'); + }); + + window.saveAttributeInNewSet = swatchProductAttributes.saveAttributeInNewSet; + window.toggleApplyVisibility = swatchProductAttributes.toggleApplyVisibility; + }; +});