@oxyshop/admin 1.3.32 → 1.3.36

package/lib/index.js

@@ -1884,6 +1884,26 @@ $.fn.extend({
   },
 });
 
+class FeedCategorySelect {
+  constructor(selector) {
+    this.selectSelector = selector;
+  }
+
+  init() {
+    document.querySelectorAll(this.selectSelector).forEach((selectElement) => {
+      const sourceCode = selectElement.getAttribute('data-source-code');
+
+      $(selectElement).dropdown({
+        apiSettings: {
+          url: `/admin/taxon-select-options/${sourceCode}/{query}`,
+          cache: false,
+        },
+        minCharacters: 2,
+      });
+    });
+  }
+}
+
 class TooltipHelpers {
   static init() {
     TooltipHelpers.initSyliusShippingMethodTooltip();
@@ -1926,6 +1946,97 @@ class TooltipHelpers {
   }
 }
 
+class AdminSidebarScroller {
+  /**
+   * @param {HTMLElement} adminMenuElement
+   * @param {string} menuItemSelector
+   */
+  constructor(adminMenuElement, menuItemSelector) {
+    this.adminMenuElement = adminMenuElement;
+    this.menuItemSelector = menuItemSelector;
+
+    Object.freeze(this);
+  }
+
+  scrollToActiveLink() {
+    const activeMenuItem = this.getActiveMenuItem();
+    if (null === activeMenuItem) {
+      return // no active menu item
+    }
+
+    this.scrollToElement(activeMenuItem);
+  }
+
+  /**
+   * @private
+   * @return {HTMLElement}
+   */
+  getActiveMenuItem() {
+    const currentPathname = location.pathname;
+    const activeItemSelector = `${this.menuItemSelector}[href="${currentPathname}"]`;
+    return this.adminMenuElement.querySelector(activeItemSelector)
+  }
+
+  /**
+   * @private
+   * @param {HTMLElement} elementToScrollTo
+   */
+  scrollToElement(elementToScrollTo) {
+    // 'scrollIntoViewIfNeeded' is a non-standard browser feature
+    if ('undefined' !== typeof elementToScrollTo.scrollIntoViewIfNeeded) {
+      elementToScrollTo.scrollIntoViewIfNeeded();
+      return
+    }
+
+    elementToScrollTo.scrollIntoView();
+  }
+}
+
+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
  */
@@ -2233,4 +2344,18 @@ $(document).ready(() => {
    * Place here next components
    */
   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');
+  adminSidebarScroller.scrollToActiveLink();
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyshop/admin",
-  "version": "1.3.32",
+  "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/adminSidebarScroller.js

@@ -0,0 +1,45 @@
+export default class AdminSidebarScroller {
+  /**
+   * @param {HTMLElement} adminMenuElement
+   * @param {string} menuItemSelector
+   */
+  constructor(adminMenuElement, menuItemSelector) {
+    this.adminMenuElement = adminMenuElement
+    this.menuItemSelector = menuItemSelector
+
+    Object.freeze(this)
+  }
+
+  scrollToActiveLink() {
+    const activeMenuItem = this.getActiveMenuItem()
+    if (null === activeMenuItem) {
+      return // no active menu item
+    }
+
+    this.scrollToElement(activeMenuItem)
+  }
+
+  /**
+   * @private
+   * @return {HTMLElement}
+   */
+  getActiveMenuItem() {
+    const currentPathname = location.pathname
+    const activeItemSelector = `${this.menuItemSelector}[href="${currentPathname}"]`
+    return this.adminMenuElement.querySelector(activeItemSelector)
+  }
+
+  /**
+   * @private
+   * @param {HTMLElement} elementToScrollTo
+   */
+  scrollToElement(elementToScrollTo) {
+    // 'scrollIntoViewIfNeeded' is a non-standard browser feature
+    if ('undefined' !== typeof elementToScrollTo.scrollIntoViewIfNeeded) {
+      elementToScrollTo.scrollIntoViewIfNeeded()
+      return
+    }
+
+    elementToScrollTo.scrollIntoView()
+  }
+}

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

@@ -0,0 +1,19 @@
+export default class FeedCategorySelect {
+  constructor(selector) {
+    this.selectSelector = selector
+  }
+
+  init() {
+    document.querySelectorAll(this.selectSelector).forEach((selectElement) => {
+      const sourceCode = selectElement.getAttribute('data-source-code')
+
+      $(selectElement).dropdown({
+        apiSettings: {
+          url: `/admin/taxon-select-options/${sourceCode}/{query}`,
+          cache: false,
+        },
+        minCharacters: 2,
+      })
+    })
+  }
+}

package/src/index.js

@@ -6,7 +6,10 @@ import 'sylius-bundle/AdminBundle/Resources/private/js/app'
 
 // Scripts - components
 import './components/taxonAttributes'
+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'
@@ -39,4 +42,18 @@ $(document).ready(() => {
    * Place here next components
    */
   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')
+  adminSidebarScroller.scrollToActiveLink()
 })