@oxyshop/admin 1.3.35 → 1.3.36

package/lib/index.js

@@ -1884,11 +1884,13 @@ $.fn.extend({
   },
 });
 
-$.fn.extend({
-  feedCategorySelect() {
-    const matchedElements = this;
+class FeedCategorySelect {
+  constructor(selector) {
+    this.selectSelector = selector;
+  }
 
-    Object.values(matchedElements).forEach((selectElement) => {
+  init() {
+    document.querySelectorAll(this.selectSelector).forEach((selectElement) => {
       const sourceCode = selectElement.getAttribute('data-source-code');
 
       $(selectElement).dropdown({
@@ -1899,8 +1901,8 @@ $.fn.extend({
         minCharacters: 2,
       });
     });
-  },
-});
+  }
+}
 
 class TooltipHelpers {
   static init() {
@@ -1990,6 +1992,51 @@ class AdminSidebarScroller {
   }
 }
 
+class CustomerGroupingRuleConfiguration {
+  /**
+   * @param {string} groupingRuleSelectSelector
+   * @param {string} formGroupSelector
+   */
+  constructor(groupingRuleSelectSelector, formGroupSelector) {
+    this.groupingRuleSelectSelector = groupingRuleSelectSelector;
+    this.formGroupSelector = formGroupSelector;
+  }
+
+  init() {
+    // Event listener on dynamic elements
+    $(document).on('change', this.groupingRuleSelectSelector, (selectEvent) => {
+      this.toggleRuleConfigurationSection(selectEvent.target);
+    });
+
+    // Show all sections with selected value
+    document.querySelectorAll(this.groupingRuleSelectSelector).forEach((selectElement) => {
+      this.toggleRuleConfigurationSection(selectElement);
+    });
+  }
+
+  toggleRuleConfigurationSection(selectElement) {
+    const selectedRuleCode = selectElement.value;
+    const configurationGroup = selectElement.parentElement.parentElement;
+
+    configurationGroup.querySelectorAll(this.formGroupSelector).forEach((formGroup) => {
+      const groupRuleCode = formGroup.getAttribute('data-grouping-rule-code');
+      const toggleFunction = groupRuleCode === selectedRuleCode ? this.showElement : this.hideElement;
+
+      toggleFunction(formGroup);
+    });
+  }
+
+  /** @private */
+  hideElement(element) {
+    element.classList.add('d-none');
+  }
+
+  /** @private */
+  showElement(element) {
+    element.classList.remove('d-none');
+  }
+}
+
 /**
  * CKEditor config
  */
@@ -2288,7 +2335,6 @@ vendorDescriptionElements.forEach((element) => {
 // Components initializations
 $(document).ready(() => {
   $('.ng-taxon-attr-dropdown').taxonAttributes();
-  $('.ng-feed-category-select').feedCategorySelect();
 
   $(document).previewUploadedImage('#sylius_payment_method_images');
   $(document).previewUploadedImage('#sylius_shipping_method_images');
@@ -2299,6 +2345,15 @@ $(document).ready(() => {
    */
   TooltipHelpers.init();
 
+  const feedCategorySelect = new FeedCategorySelect('.ng-feed-category-select');
+  feedCategorySelect.init();
+
+  const customerGroupingRuleConfiguration = new CustomerGroupingRuleConfiguration(
+    'select.ng-grouping-rule-select',
+    '.ng-grouping-rule-configuration'
+  );
+  customerGroupingRuleConfiguration.init();
+
   // Admin sidebar scroller
   const adminSidebarElement = document.getElementById('sidebar');
   const adminSidebarScroller = new AdminSidebarScroller(adminSidebarElement, 'a.item');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyshop/admin",
-  "version": "1.3.35",
+  "version": "1.3.36",
   "author": "oXy Online s.r.o. <info@oxyshop.cz>",
   "main": "lib/index.js",
   "sass": "scss/main.scss",

package/scss/main.scss

@@ -1,3 +1,7 @@
 @import 'Form/main';
 @import 'Logo/main';
 @import 'PickupPoint/main';
+
+.d-none {
+    display: none !important;
+}

package/src/components/customerGroupingRuleConfiguration.js

@@ -0,0 +1,44 @@
+export default class CustomerGroupingRuleConfiguration {
+  /**
+   * @param {string} groupingRuleSelectSelector
+   * @param {string} formGroupSelector
+   */
+  constructor(groupingRuleSelectSelector, formGroupSelector) {
+    this.groupingRuleSelectSelector = groupingRuleSelectSelector
+    this.formGroupSelector = formGroupSelector
+  }
+
+  init() {
+    // Event listener on dynamic elements
+    $(document).on('change', this.groupingRuleSelectSelector, (selectEvent) => {
+      this.toggleRuleConfigurationSection(selectEvent.target)
+    })
+
+    // Show all sections with selected value
+    document.querySelectorAll(this.groupingRuleSelectSelector).forEach((selectElement) => {
+      this.toggleRuleConfigurationSection(selectElement)
+    })
+  }
+
+  toggleRuleConfigurationSection(selectElement) {
+    const selectedRuleCode = selectElement.value
+    const configurationGroup = selectElement.parentElement.parentElement
+
+    configurationGroup.querySelectorAll(this.formGroupSelector).forEach((formGroup) => {
+      const groupRuleCode = formGroup.getAttribute('data-grouping-rule-code')
+      const toggleFunction = groupRuleCode === selectedRuleCode ? this.showElement : this.hideElement
+
+      toggleFunction(formGroup)
+    })
+  }
+
+  /** @private */
+  hideElement(element) {
+    element.classList.add('d-none')
+  }
+
+  /** @private */
+  showElement(element) {
+    element.classList.remove('d-none')
+  }
+}

package/src/components/feedCategorySelect.js

@@ -1,8 +1,10 @@
-$.fn.extend({
-  feedCategorySelect() {
-    const matchedElements = this
+export default class FeedCategorySelect {
+  constructor(selector) {
+    this.selectSelector = selector
+  }
 
-    Object.values(matchedElements).forEach((selectElement) => {
+  init() {
+    document.querySelectorAll(this.selectSelector).forEach((selectElement) => {
       const sourceCode = selectElement.getAttribute('data-source-code')
 
       $(selectElement).dropdown({
@@ -13,5 +15,5 @@ $.fn.extend({
         minCharacters: 2,
       })
     })
-  },
-})
+  }
+}

package/src/index.js

@@ -6,9 +6,10 @@ import 'sylius-bundle/AdminBundle/Resources/private/js/app'
 
 // Scripts - components
 import './components/taxonAttributes'
-import './components/feedCategorySelect'
+import FeedCategorySelect from './components/feedCategorySelect'
 import TooltipHelpers from './components/tooltipHelpers'
 import AdminSidebarScroller from './components/adminSidebarScroller'
+import CustomerGroupingRuleConfiguration from './components/customerGroupingRuleConfiguration'
 
 // Scripts - plugin
 import './plugins/ckeditor/index'
@@ -32,7 +33,6 @@ import '@oxyshop/admin/images/admin-logo.svg'
 // Components initializations
 $(document).ready(() => {
   $('.ng-taxon-attr-dropdown').taxonAttributes()
-  $('.ng-feed-category-select').feedCategorySelect()
 
   $(document).previewUploadedImage('#sylius_payment_method_images')
   $(document).previewUploadedImage('#sylius_shipping_method_images')
@@ -43,6 +43,15 @@ $(document).ready(() => {
    */
   TooltipHelpers.init()
 
+  const feedCategorySelect = new FeedCategorySelect('.ng-feed-category-select')
+  feedCategorySelect.init()
+
+  const customerGroupingRuleConfiguration = new CustomerGroupingRuleConfiguration(
+    'select.ng-grouping-rule-select',
+    '.ng-grouping-rule-configuration'
+  )
+  customerGroupingRuleConfiguration.init()
+
   // Admin sidebar scroller
   const adminSidebarElement = document.getElementById('sidebar')
   const adminSidebarScroller = new AdminSidebarScroller(adminSidebarElement, 'a.item')