@oxyshop/admin 1.3.48 → 1.3.49

package/lib/style.css

@@ -212,80 +212,6 @@ input[type="color"]::-moz-color-swatch {
   border-radius: 99px;
   border: 0; }
 
-.attributes-group {
-  border: 1px solid rgba(34, 36, 38, 0.1); }
-  .attributes-group:not(:last-child) {
-    border-bottom: 0; }
-  .attributes-group:first-child {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px; }
-  .attributes-group:last-child {
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px; }
-
-.attributes-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: rgba(0, 0, 0, 0.03);
-  padding: 0.5em 1.8em;
-  border-bottom: 1px solid rgba(34, 36, 38, 0.1); }
-  .attributes-header .ui.basic.red.button {
-    box-shadow: none !important; }
-    .attributes-header .ui.basic.red.button:hover {
-      background: rgba(255, 0, 0, 0.1) !important; }
-
-.attributes-list {
-  padding: 1.4em 1.8em; }
-
-.attribute-row {
-  flex-wrap: wrap;
-  margin: 10px 0; }
-  @media (min-width: 1152px) {
-    .attribute-row {
-      display: flex; } }
-
-.attribute-label {
-  align-self: center;
-  width: 200px;
-  margin-right: 20px;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden; }
-  .attribute-label i {
-    width: 20px;
-    text-align: left; }
-
-.attribute-input {
-  flex-grow: 1; }
-
-.attribute-input, .attribute-input div:not(.checkbox) {
-  display: flex;
-  flex-grow: 1;
-  align-items: center; }
-
-.attribute-input *:not(:last-child) {
-  margin-right: 5px; }
-
-.attribute-input *:not(:first-child) {
-  margin-left: 5px; }
-
-.attribute-input textarea {
-  height: 6em !important;
-  min-height: 6em !important; }
-
-.attribute-action > * {
-  margin: 4px 0 !important; }
-  @media (min-width: 1152px) {
-    .attribute-action > * {
-      margin: 0 0 0 10px !important; } }
-
-.attribute-error {
-  width: 100%;
-  text-align: center; }
-
 .sylius-tree.hidden {
   display: none; }
 
@@ -489,10 +415,6 @@ a {
     background: inherit;
     color: #1abb9c; }
 
-.sylius-grid-image {
-  max-height: 50px;
-  max-width: 50px; }
-
 .ui.toggle.checkbox input:checked ~ .box:before, .ui.toggle.checkbox input:checked ~ label:before,
 .ui.toggle.checkbox input:focus:checked ~ .box:before, .ui.toggle.checkbox input:focus:checked ~ label:before {
   background-color: #1abb9c !important; }

package/package.json

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

package/src/components/feedCategorySelect.js

@@ -13,13 +13,7 @@ export default class FeedCategorySelect {
           cache: false,
         },
         minCharacters: 2,
-        clearable: true,
       })
-
-      // Workaround for dropdown clear button not showing after loading initial value from the API
-      setTimeout(() => {
-        $(selectElement).dropdown('restore defaults')
-      }, 0)
     })
   }
 }

package/src/index.js

@@ -7,17 +7,9 @@ import 'sylius-bundle/AdminBundle/Resources/private/js/app'
 // Scripts - components
 import './components/taxonAttributes'
 import FeedCategorySelect from './components/feedCategorySelect'
-import ProductVariantPricingGraph from './components/productVariantPricingGraph'
-import CustomerGroupClientAssigner from './components/customerGroupClientAssigner'
 import TooltipHelpers from './components/tooltipHelpers'
 import AdminSidebarScroller from './components/adminSidebarScroller'
 import CustomerGroupingRuleConfiguration from './components/customerGroupingRuleConfiguration'
-import ImageInput from './components/imageInput'
-import ProductVariantPricingSimulation from './components/productVariantPricingSimulation'
-import DocumentUploadInput from './components/documentUploadInput'
-import './components/blog-slug.js'
-import './components/article-slug.js'
-import './components/blog-category-slug.js'
 
 // Scripts - plugin
 import './plugins/ckeditor/index'
@@ -37,6 +29,8 @@ import '@oxyshop/admin/lib/style.css'
 // Images
 import '@oxyshop/admin/images/logo.png'
 import '@oxyshop/admin/images/admin-logo.svg'
+import '@oxyshop/admin/images/50x50.png'
+import CustomerGroupClientAssigner from './components/customerGroupClientAssigner'
 
 // Components initializations
 $(document).ready(() => {
@@ -65,21 +59,7 @@ $(document).ready(() => {
   const adminSidebarScroller = new AdminSidebarScroller(adminSidebarElement, 'a.item')
   adminSidebarScroller.scrollToActiveLink()
 
-  const productVariantPricingGraph = new ProductVariantPricingGraph('.ng-product-variant-pricing-graph')
-  productVariantPricingGraph.init()
-
-  const productVariantPricingSimulation = new ProductVariantPricingSimulation(
-    '.ng-product-variant-pricing-simulation'
-  )
-  productVariantPricingSimulation.init()
-
   // Client search select
   const clientSearchSelect = new CustomerGroupClientAssigner('.ng-customer-group-client-assigner')
   clientSearchSelect.init()
-
-  const imageInput = new ImageInput('.ng-image-input')
-  imageInput.init()
-
-  const documentUploadInput = new DocumentUploadInput('input.ng-document-upload-input')
-  documentUploadInput.init()
 })

package/src/plugins/ckeditor/index.js

@@ -90,32 +90,3 @@ vendorDescriptionElements.forEach((element) => {
   // eslint-disable-next-line no-undef
   CKEDITOR.replace(element.name, ckEditorOptions)
 })
-
-/**
- * Blog article
- */
-const articleAnnotationElements = document.querySelectorAll(
-  'form[name="nextgen_cms_bundle_article"] textarea[name$="[annotation]"]'
-)
-articleAnnotationElements.forEach((element) => {
-  // eslint-disable-next-line no-undef
-  CKEDITOR.replace(element.name, ckEditorOptions)
-})
-const articleContentElements = document.querySelectorAll(
-  'form[name="nextgen_cms_bundle_article"] textarea[name$="[content]"]'
-)
-articleContentElements.forEach((element) => {
-  // eslint-disable-next-line no-undef
-  CKEDITOR.replace(element.name, ckEditorOptions)
-})
-
-/**
- * Blog category
- */
-const categoryDescriptionElements = document.querySelectorAll(
-  'form[name="nextgen_cms_bundle_blog_category"] textarea[name$="[description]"]'
-)
-categoryDescriptionElements.forEach((element) => {
-  // eslint-disable-next-line no-undef
-  CKEDITOR.replace(element.name, ckEditorOptions)
-})

package/src/components/article-slug.js

@@ -1,65 +0,0 @@
-;(function ($) {
-  'use strict'
-
-  $.fn.extend({
-    articleSlugGenerator: function () {
-      let timeout
-
-      $('[name*="nextgen_cms_bundle_article[translations]"][name*="[name]"]').on('input', function () {
-        clearTimeout(timeout)
-        let element = $(this)
-
-        timeout = setTimeout(function () {
-          updateSlug(element)
-        }, 1000)
-      })
-
-      $('.toggle-article-slug-modification').on('click', function (e) {
-        e.preventDefault()
-        toggleSlugModification($(this), $(this).siblings('input'))
-      })
-
-      function updateSlug(element) {
-        let slugInput = element.parents('.content').find('[name*="[slug]"]')
-        let loadableParent = slugInput.parents('.field.loadable')
-
-        if ('readonly' === slugInput.attr('readonly')) {
-          return
-        }
-
-        loadableParent.addClass('loading')
-
-        $.ajax({
-          type: 'GET',
-          url: slugInput.attr('data-url'),
-          data: { name: element.val() },
-          dataType: 'json',
-          accept: 'application/json',
-          success: function (data) {
-            slugInput.val(data.slug)
-            if (slugInput.parents('.field').hasClass('error')) {
-              slugInput.parents('.field').removeClass('error')
-              slugInput.parents('.field').find('.sylius-validation-error').remove()
-            }
-            loadableParent.removeClass('loading')
-          },
-        })
-      }
-
-      function toggleSlugModification(button, slugInput) {
-        if (slugInput.attr('readonly')) {
-          slugInput.removeAttr('readonly')
-          button.html('<i class="unlock icon"></i>')
-        } else {
-          slugInput.attr('readonly', 'readonly')
-          button.html('<i class="lock icon"></i>')
-        }
-      }
-    },
-  })
-})(jQuery)
-;(function ($) {
-  $(document).ready(function () {
-    $(this).articleSlugGenerator()
-  })
-})(jQuery)

package/src/components/blog-category-slug.js

@@ -1,71 +0,0 @@
-;(function ($) {
-  'use strict'
-
-  $.fn.extend({
-    blogCategorySlugGenerator: function () {
-      let timeout
-
-      $('[name*="nextgen_cms_bundle_blog_category[translations]"][name*="[name]"]').on('input', function () {
-        clearTimeout(timeout)
-        let element = $(this)
-
-        timeout = setTimeout(function () {
-          updateSlug(element)
-        }, 1000)
-      })
-
-      $('.toggle-blog-category-slug-modification').on('click', function (e) {
-        e.preventDefault()
-        toggleSlugModification($(this), $(this).siblings('input'))
-      })
-
-      function updateSlug(element) {
-        let slugInput = element.parents('.content').find('[name*="[slug]"]')
-        let loadableParent = slugInput.parents('.field.loadable')
-
-        if ('readonly' === slugInput.attr('readonly')) {
-          return
-        }
-
-        loadableParent.addClass('loading')
-
-        let data
-        data = {
-          name: element.val(),
-          locale: element.closest('[data-locale]').data('locale'),
-        }
-
-        $.ajax({
-          type: 'GET',
-          url: slugInput.attr('data-url'),
-          data: data,
-          dataType: 'json',
-          accept: 'application/json',
-          success: function (data) {
-            slugInput.val(data.slug)
-            if (slugInput.parents('.field').hasClass('error')) {
-              slugInput.parents('.field').removeClass('error')
-              slugInput.parents('.field').find('.sylius-validation-error').remove()
-            }
-            loadableParent.removeClass('loading')
-          },
-        })
-      }
-
-      function toggleSlugModification(button, slugInput) {
-        if (slugInput.attr('readonly')) {
-          slugInput.removeAttr('readonly')
-          button.html('<i class="unlock icon"></i>')
-        } else {
-          slugInput.attr('readonly', 'readonly')
-          button.html('<i class="lock icon"></i>')
-        }
-      }
-    },
-  })
-})(jQuery)
-;(function ($) {
-  $(document).ready(function () {
-    $(this).blogCategorySlugGenerator()
-  })
-})(jQuery)

package/src/components/blog-slug.js

@@ -1,65 +0,0 @@
-;(function ($) {
-  'use strict'
-
-  $.fn.extend({
-    blogSlugGenerator: function () {
-      let timeout
-
-      $('[name*="nextgen_cms_bundle_blog[translations]"][name*="[name]"]').on('input', function () {
-        clearTimeout(timeout)
-        let element = $(this)
-
-        timeout = setTimeout(function () {
-          updateSlug(element)
-        }, 1000)
-      })
-
-      $('.toggle-blog-slug-modification').on('click', function (e) {
-        e.preventDefault()
-        toggleSlugModification($(this), $(this).siblings('input'))
-      })
-
-      function updateSlug(element) {
-        let slugInput = element.parents('.content').find('[name*="[slug]"]')
-        let loadableParent = slugInput.parents('.field.loadable')
-
-        if ('readonly' === slugInput.attr('readonly')) {
-          return
-        }
-
-        loadableParent.addClass('loading')
-
-        $.ajax({
-          type: 'GET',
-          url: slugInput.attr('data-url'),
-          data: { name: element.val() },
-          dataType: 'json',
-          accept: 'application/json',
-          success: function (data) {
-            slugInput.val(data.slug)
-            if (slugInput.parents('.field').hasClass('error')) {
-              slugInput.parents('.field').removeClass('error')
-              slugInput.parents('.field').find('.sylius-validation-error').remove()
-            }
-            loadableParent.removeClass('loading')
-          },
-        })
-      }
-
-      function toggleSlugModification(button, slugInput) {
-        if (slugInput.attr('readonly')) {
-          slugInput.removeAttr('readonly')
-          button.html('<i class="unlock icon"></i>')
-        } else {
-          slugInput.attr('readonly', 'readonly')
-          button.html('<i class="lock icon"></i>')
-        }
-      }
-    },
-  })
-})(jQuery)
-;(function ($) {
-  $(document).ready(function () {
-    $(this).blogSlugGenerator()
-  })
-})(jQuery)

package/src/components/documentUploadInput.js

@@ -1,33 +0,0 @@
-export default class DocumentUploadInput {
-  /** @param {string} documentUploadInputSelector */
-  constructor(documentUploadInputSelector) {
-    this.selector = documentUploadInputSelector
-  }
-
-  init() {
-    const fileInputs = document.querySelectorAll(this.selector)
-
-    Array.prototype.forEach.call(fileInputs, (inputElement) => {
-      const fileUrl = inputElement.getAttribute('data-file-url')
-      const fileTitle = inputElement.getAttribute('data-file-name')
-      const downloadText = inputElement.getAttribute('data-download-translation')
-
-      const iconElement = document.createElement('i')
-      iconElement.classList.add('download', 'icon')
-
-      const buttonElement = document.createElement('button')
-      buttonElement.classList.add('ui', 'compact', 'labeled', 'icon', 'button')
-      buttonElement.setAttribute('type', 'button')
-      buttonElement.append(iconElement)
-      buttonElement.innerHTML += `${downloadText}: ${fileTitle}`
-
-      const downloadLink = document.createElement('a')
-      downloadLink.setAttribute('style', 'display: inline-block; margin: -5px 0 25px 0;')
-      downloadLink.setAttribute('target', '_blank')
-      downloadLink.setAttribute('href', fileUrl)
-      downloadLink.append(buttonElement)
-
-      inputElement.parentNode.parentNode.append(downloadLink)
-    })
-  }
-}

package/src/components/imageInput.js

@@ -1,41 +0,0 @@
-export default class ImageInput {
-  constructor(selector) {
-    this.selector = selector
-  }
-
-  init() {
-    document.querySelectorAll(this.selector).forEach((element) => {
-      element.querySelectorAll('input[type="file"]').forEach((input) => {
-        input.addEventListener('change', () => {
-          this.onImageInputChange(input)
-        })
-      })
-    })
-  }
-
-  onImageInputChange(input) {
-    if (!input.files || !input.files[0]) {
-      return
-    }
-
-    const reader = new FileReader()
-
-    reader.onload = (event) => {
-      const wrapperDiv = input.parentElement.parentElement
-      const image = wrapperDiv.querySelector('.image')
-
-      if (null === image) {
-        const img = document.createElement('img')
-        img.setAttribute('class', 'ui small bordered image')
-        img.setAttribute('src', event.target.result)
-
-        const inputLabel = wrapperDiv.querySelector(':scope > label')
-        wrapperDiv.insertBefore(img, inputLabel.nextSibling)
-      } else {
-        image.setAttribute('src', event.target.result)
-      }
-    }
-
-    reader.readAsDataURL(input.files[0])
-  }
-}

package/src/components/productVariantPricingGraph.js

@@ -1,86 +0,0 @@
-import Chart from 'chart.js'
-
-export default class ProductVariantPricingGraph {
-  constructor(containerSelector) {
-    this.containerSelector = containerSelector
-  }
-
-  init() {
-    document.querySelectorAll(this.containerSelector).forEach((componentContainer) => {
-      const graphsData = JSON.parse(componentContainer.getAttribute('data-graph'))
-
-      for (const currencyGraphIndex in graphsData) {
-        const currencyGraph = graphsData[currencyGraphIndex]
-
-        const currencyCodeHeader = document.createElement('h4')
-        currencyCodeHeader.classList.add('ui', 'header')
-        currencyCodeHeader.textContent = currencyGraph.currency
-
-        const graphCanvas = document.createElement('canvas')
-        graphCanvas.width = 400
-        graphCanvas.height = 200
-
-        const graphContainer = document.createElement('div')
-        graphContainer.append(currencyCodeHeader)
-        graphContainer.append(graphCanvas)
-
-        componentContainer.append(graphContainer)
-
-        const graphConfig = this.getGraphConfig(currencyGraph.graph)
-        new Chart(graphCanvas.getContext('2d'), graphConfig)
-      }
-    })
-  }
-
-  /** @private */
-  getGraphConfig(rawGraphData) {
-    return {
-      type: 'line',
-      data: {
-        datasets: rawGraphData.datasets.map((rawDataset) => {
-          return {
-            label: rawDataset.label,
-            data: rawDataset.data,
-            borderColor: this.getRandomRgbColor(),
-            fill: false,
-            steppedLine: true,
-            pointRadius: 8,
-            pointHoverRadius: 10,
-          }
-        }),
-      },
-      options: {
-        maintainAspectRatio: true,
-        responsive: true,
-        scales: {
-          xAxes: [
-            {
-              type: 'linear',
-              position: 'bottom',
-              scaleLabel: {
-                display: true,
-                labelString: rawGraphData.xAxisLabel,
-              },
-            },
-          ],
-          yAxes: [
-            {
-              scaleLabel: {
-                display: true,
-                labelString: rawGraphData.yAxisLabel,
-              },
-            },
-          ],
-        },
-      },
-    }
-  }
-
-  /** @private */
-  getRandomRgbColor() {
-    const r = Math.floor(Math.random() * 255)
-    const g = Math.floor(Math.random() * 255)
-    const b = Math.floor(Math.random() * 255)
-    return `rgb(${r},${g},${b})`
-  }
-}