grid_generator.js

const { el, mount } = redom;

// remove variações que serão
// escolhidas para gerar grade
const removeLabel = () => {
  let closeElements = Array.from(document.querySelectorAll('i.delete.icon'));

  closeElements.map(closeIcon => {
    closeIcon.addEventListener('click', () => {
      let label = closeIcon.parentElement;

      verifyDeletedLabels(label);
      label.remove();
    })
  })
} 

// Constroi selectbox das variações na Grade
const buildVariationSelector = (availableOptions, index) => {
  let select_box = el('select.select.required', {
    name: `product[product_skus_attributes][${index}][features][value]`,
    id: `product_product_skus_attributes_${index}_features_value` });
  let options = [];

  availableOptions.variations.forEach((variation) => {
    options.push(el('option', {value: variation}, variation))
  });

  return el(select_box, options);
}

// Lista as variações após o usuário selecionar a feature
// retorna objeto com product_feature
const getLabels = (id) => {
  const reponse = {};
  const result = product_features.find(data => data.id == id);

  if (result) {
    response = {
      id: result.id,
      name: result.name,
      variations: result.variations
    };
  }

  return response;
}

// Lista de variações que o usuário selecinou
const selectedLabels = (productFeatureId) => {
  const expectedAttr = `a[data-product-feature-id="${productFeatureId}"]`
  const labels = [];

  document.querySelectorAll(expectedAttr).forEach(variation => {
    labels.push(variation.innerText);
  });

  return labels;
}

// verefica a quantidade de variações
// escolhidas pelo usuário, caso
// todas sejam apagadas, a SKU deve ser removida
const verifyDeletedLabels = (label) => {
  let variationsDiv = label.parentElement;
  let numberOfExistingLables = variationsDiv.childElementCount;

  if (numberOfExistingLables === 1) {
    variationsDiv.parentElement.parentElement.remove();

    return true;
  }
}

// exibe os labels dentro da tabela para
// seleção
function displayLabelsOnDiv(event) {
  const allVariations = getLabels(this.value);
  const selectBox = event.target;
  let $variationsDiv = $(selectBox).closest('tr').find('.variation');

  let variations = allVariations['variations'].map(value =>
    el('a.ui.label.transition.visible', value, { 'data-product-feature-id': allVariations['id'] },
      el('i.delete.icon'))
  )

  $variationsDiv.html(variations);
  removeLabel();
}