spree_backend 4.3.0.rc1 → 4.4.0.rc1

data/app/assets/javascripts/spree/backend/cms/page.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   const pageVisabilityAttribute = document.querySelectorAll('[data-cms-page-id]')
   const pageTypeSelector = document.getElementById('cms_page_type')
   const el = document.getElementById('cmsPagesectionsArea')
@@ -32,32 +32,24 @@ function handleTogglePageVisibility(obj) {
   let checkedState = null
   if (obj.checked) checkedState = true
 
-  const pageId = parseInt(obj.dataset.cmsPageId, 10)
+  const pageId = obj.dataset.cmsPageId
 
   const data = {
     cms_page: {
       visible: checkedState
     }
   }
+  const requestData = {
+     uri: Spree.routes.pages_api_v2 + `/${pageId}`,
+     method: 'PATCH',
+     dataBody: data,
+  }
+  spreeFetchRequest(requestData, handleToggleSuccess)
 
-  fetch(Spree.routes.pages_api_v2 + `/${pageId}`, {
-    method: 'PATCH',
-    headers: {
-      Authorization: 'Bearer ' + OAUTH_TOKEN,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(data)
-  })
-    .then(response => {
-      if (response.ok) {
-        reloadPreview()
-        toggleVisibilityState(obj)
-      } else {
-        // eslint-disable-next-line no-undef
-        spreeHandleApiRequestError(response)
-      }
-    })
-    .catch(err => { console.error(err) })
+  function handleToggleSuccess() {
+    toggleVisibilityState(obj)
+    reloadPreview()
+  }
 }
 
 function toggleVisibilityState(obj) {
@@ -83,28 +75,18 @@ function reloadPreview() {
 }
 
 function handleSectionReposition(evt) {
+  const sectionId = evt.item.dataset.sectionId
   const data = {
-    section_id: parseInt(evt.item.dataset.sectionId, 10),
-    new_position_idx: parseInt(evt.newIndex, 10)
+    cms_section: {
+      position: parseInt(evt.newIndex, 10) + 1
+    }
   }
-
-  fetch(Spree.routes.sections_api_v2 + '/reposition', {
-    method: 'PATCH',
-    headers: {
-      Authorization: 'Bearer ' + OAUTH_TOKEN,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify(data)
-  })
-    .then(response => {
-      if (response.ok) {
-        reloadPreview()
-      } else {
-        // eslint-disable-next-line no-undef
-        spreeHandleApiRequestError(response.status)
-      }
-    })
-    .catch(err => { console.error(err) })
+  const requestData = {
+     uri: `${Spree.routes.sections_api_v2}/${sectionId}`,
+     method: 'PATCH',
+     dataBody: data,
+  }
+  spreeFetchRequest(requestData, reloadPreview)
 }
 
 function updateCmsPageType() {

data/app/assets/javascripts/spree/backend/cms/section.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   const sectionKindSelector = $('#cms_section_type').select2()
   const layoutSwitcher = $('#cms_section_layout_style').select2()
 

data/app/assets/javascripts/spree/backend/gateway.js

@@ -1,4 +1,4 @@
-$(function () {
+document.addEventListener("spree:load", function() {
   var originalGtwyType = $('#gtwy-type').prop('value')
   $('div#gateway-settings-warning').hide()
   $('#gtwy-type').change(function () {

data/app/assets/javascripts/spree/backend/general_settings.js

@@ -1,5 +1,5 @@
 /* global show_flash */
-$(function () {
+document.addEventListener("spree:load", function() {
   $('[data-hook=general_settings_clear_cache] #clear_cache').click(function () {
     if (confirm(Spree.translations.are_you_sure)) {
       $.ajax({

data/app/assets/javascripts/spree/backend/global/_index.js

@@ -1,5 +1,6 @@
 //= require spree/backend/global/alerts
-//= require spree/backend/global/bootstrap
+//= require spree/backend/global/animate_css
+//= require spree/backend/global/fetch_request_utility
 //= require spree/backend/global/flatpickr
 //= require spree/backend/global/ransack
 //= require spree/backend/global/info_alert
@@ -9,3 +10,4 @@
 //= require spree/backend/global/select2_populate
 //= require spree/backend/global/sortable
 //= require spree/backend/global/side_scroll_indication
+//= require spree/backend/global/tinymce

data/app/assets/javascripts/spree/backend/global/alerts.es6

@@ -1,6 +1,6 @@
 /* global Swal */
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   const alertEl = document.querySelectorAll('[data-alert-type]')
 
   if (!alertEl) return

data/app/assets/javascripts/spree/backend/global/animate_css.es6

@@ -0,0 +1,19 @@
+/* eslint-disable no-unused-vars */
+
+//
+// Handle clearing out of animation styles from complete animation.
+const animateCSS = (element, animation, speed, prefix = 'animate__') =>
+  new Promise((resolve) => {
+    const animationName = `${prefix}${animation}`
+    const node = document.querySelector(element)
+
+    node.classList.add(`${prefix}animated`, animationName, prefix + speed)
+
+    function handleAnimationEnd(event) {
+      event.stopPropagation()
+      node.classList.remove(`${prefix}animated`, animationName)
+      resolve('Animation ended')
+    }
+
+    node.addEventListener('animationend', handleAnimationEnd, { once: true })
+  })

data/app/assets/javascripts/spree/backend/global/fetch_request_utility.es6

@@ -0,0 +1,114 @@
+/* eslint-disable no-undef */
+/* eslint-disable no-unused-vars */
+
+//
+// Shows the progress bar on fech requests
+const showProgressIndicator = () => {
+  Turbo.navigator.delegate.adapter.progressBar.setValue(0)
+  Turbo.navigator.delegate.adapter.progressBar.show()
+}
+
+//
+// Hides the progress bar on fech requests
+const hideProgressIndicator = () => {
+  Turbo.navigator.delegate.adapter.progressBar.setValue(1)
+  Turbo.navigator.delegate.adapter.progressBar.hide()
+}
+
+//
+// Handles the fetch request response.
+// If the response has content it is returned, else if the response is a 204 no-content,
+// the resolved text is returned.
+const spreeHandleFetchRequestResponse = function(response) {
+  hideProgressIndicator()
+
+  if (response.status === 204) {
+    return response.text()
+  } else {
+    return response.json()
+  }
+}
+
+//
+// Handles fech request errors by triggering the appropriate flash alert type and displaying
+// the response message.
+const spreeHandleFetchRequestError = function(data) {
+  if (data.error != null) {
+    show_flash('error', data.error)
+  } else if (data.message != null) {
+    show_flash('success', data.message)
+  } else if (data.exception != null) {
+    show_flash('info', data.exception)
+  } else if (data.detail != null) {
+    show_flash('info', data.detail)
+  }
+}
+
+//
+// Reloads the window.
+const spreeWindowReload = function() {
+  window.location.reload()
+}
+
+//
+// SPREE FECTCH REQUEST
+// Pass a json object containing your fetch request details and settings, you can also send a second optional
+// argument, this second argument is your success response handler, and lastly a third argument that carries
+// through a target element to the response method if needed, the second and third arguments are optional.
+// When using spreeFetchRequest() the loading... progress bar, flash notice and errors are all handled for you.
+//
+// EXAMPLE SENDING A POST REQUEST TO CREATE A NEW SHIPMENT:
+//    const data = {
+//      order_id: 'H8213728798',
+//      variant_id: 2,
+//      quantity: 4,
+//      stock_location_id: 1
+//    }
+//
+//    const requestData = {
+//      // request details
+//      uri: Spree.routes.shipments_api_v2,
+//      method: 'POST',
+//      dataBody: data,
+//
+//   // Optional Settings
+//   // disableProgressIndicator: true,   Allows you to disable the progress loader bar if needed.
+//   // formatDataBody: false             If you have pre-formatted data, pass this option to stop the function performing the default stringify.
+//    }
+//    spreeFetchRequest(requestData, someCallbackFunction, this)
+//
+const spreeFetchRequest = function(requstData, success = null, target = null) {
+  if (!requstData.disableProgressIndicator === true) showProgressIndicator()
+
+  let requestDataBody
+
+  const requestUri = requstData.uri || null
+  const requestMethod = requstData.method || 'GET'
+  const requestContentType = requstData.ContentType || 'application/json'
+
+  if (requstData.formatDataBody === false) {
+    requestDataBody = requstData.dataBody
+  } else {
+    requestDataBody = JSON.stringify(requstData.dataBody) || null
+  }
+
+  if (requestUri == null) return
+
+  fetch(requestUri, {
+    method: requestMethod,
+    headers: {
+      'Authorization': 'Bearer ' + OAUTH_TOKEN,
+      'Content-Type': requestContentType
+    },
+    body: requestDataBody
+  })
+    .then((response) => spreeHandleFetchRequestResponse(response)
+      .then((data) => {
+        if (response.ok) {
+          if (success != null) success(data, target)
+        } else {
+          spreeHandleFetchRequestError(data)
+        }
+      }))
+    .catch(err => console.log(err))
+}

data/app/assets/javascripts/spree/backend/global/flatpickr.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   flatpickr.setDefaults({
     altInput: true,
     time_24hr: true,
@@ -20,3 +20,4 @@ document.addEventListener('DOMContentLoaded', function() {
 
   flatpickr('.datepicker', {})
 })
+

data/app/assets/javascripts/spree/backend/global/info_alert.es6

@@ -1,5 +1,5 @@
 /* global Swal */
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   const infoToggle = document.querySelectorAll('[data-show-info]')
 
   infoToggle.forEach(function(infoElem) {

data/app/assets/javascripts/spree/backend/global/radio_panel_toggle.es6

@@ -2,7 +2,7 @@
   radioControlsVisibilityOfElement:
   Apply to individual radio button that makes another element visible when checked
 **/
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   $.fn.radioControlsVisibilityOfElement = function(dependentElementSelector) {
     if (!this.get(0)) { return }
     var showValue = this.get(0).value

data/app/assets/javascripts/spree/backend/global/ransack.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   const QuickSearchInput = document.getElementById('quick_search')
 
   if (QuickSearchInput) {
@@ -80,7 +80,7 @@ document.addEventListener('DOMContentLoaded', function() {
     }
   })
 
-  // per page dropdown
+  // per page drop-down
   // preserves all selected filters / queries supplied by user
   // changes only per_page value
   $('.js-per-page-select').change(function() {
@@ -92,16 +92,18 @@ document.addEventListener('DOMContentLoaded', function() {
     } else {
       url += '?per_page=' + value
     }
-    window.location = url
+    Turbo.visit(url)
   })
 
   // injects per_page settings to all available search forms
   // so when user changes some filters / queries per_page is preserved
-  $(document).ready(function() {
+  document.addEventListener("spree:load", function() {
     var perPageDropdown = $('.js-per-page-select:first')
     if (perPageDropdown.length) {
       var perPageValue = perPageDropdown.val().toString()
-      var perPageInput = '<input type="hidden" name="per_page" value=' + perPageValue + ' />'
+      var perPageInput = '<input class="hidden_per_page_input" type="hidden" name="per_page" value=' + perPageValue + ' />'
+
+      $('.hidden_per_page_input').remove()
       $('#table-filter form').append(perPageInput)
     }
   })

data/app/assets/javascripts/spree/backend/global/responsive_menus.es6

@@ -1,4 +1,4 @@
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener("spree:load", function() {
   var body = $('body')
   var modalBackdrop = $('#multi-backdrop')
 

data/app/assets/javascripts/spree/backend/global/select2_autocomplete.es6

@@ -1,49 +1,39 @@
 // SELECT2 AUTOCOMPLETE JS
-// This JavaScript file allows Spree developers to set up Select2 autocomplete search
-// using the API v2 by simply adding data attributes to a select element with the class: 'select2autocomplete'
-// as shown here: <select class="select2autocomplete"></select>.
+//  The JavaScript in this file allows Spree developers to set up Select2 autocomplete search
+//  using the API v2 by simply adding data attributes to a select element.
 
 // REQUIRED ATTRIBUTES
-// You must provide a URL for the API V2, use the format shown below.
-// See the backend.js file for other API V2 URL's.
-//
-//  Example:
+//  You must provide a URL for the API V2, use the format shown below. See backend.js for other API V2 URL's.
+//  REQUIRED:
 //  data-autocomplete-url-value="products_api_v2"
 
-// OPTIONAL ATTRIBUTES
-// These optional attributes have sensible defaults, you many not need to use them in many cases,
-// but they do provide a powerful toolkit to refine your autocomplete search as required.
-//
-//  Examples:
-//  data-autocomplete-placeholder-value="Seach Pages"    <- Sets the placeholder | DEFAULT is: 'Search'
-//  data-autocomplete-clear-value="boolean"              <- Allow select2 to be cleared | DEFAULT is: false (no clear button)
-//  data-autocomplete-multiple-value="boolean"           <- Multiple or Single select | DEFAULT is: false (single)
-//  data-autocomplete-return-attr-value="pretty_name"    <- Return Attribute. | DEFAULT is: 'name'
-//  data-autocomplete-min-input-value="4"                <- Minimum input for search | DEFAULT is: 3
-//  data-autocomplete-search-query-value="title_i_cont"  <- Custom search query | DEFAULT is: 'name_i_cont'
-//  data-autocomplete-custom-return-id-value="permalink" <- Return a custom attribute rather than the ID | DEFAULT: returns id
+//  OPTIONAL:
+//  data-autocomplete-placeholder-value="Search Pages"     <- Sets the placeholder | DEFAULT is: 'Search'.
+//  data-autocomplete-clear-value=boolean                 <- Allow select2 to be cleared | DEFAULT is: false (no clear button).
+//  data-autocomplete-multiple-value=boolean              <- Multiple or Single select | DEFAULT is: false (single).
+//  data-autocomplete-return-attr-value="pretty_name"     <- Return Attribute. | DEFAULT is: 'name'.
+//  data-autocomplete-min-input-value="4"                 <- Minimum input for search | DEFAULT is: 3.
+//  data-autocomplete-search-query-value="title_i_cont"   <- Custom search query | DEFAULT is: 'name_i_cont'.
+//  data-autocomplete-custom-return-id-value="permalink"  <- Return a custom attribute | DEFAULT: returns id.
+//  data-autocomplete-debug-mode-value=boolean            <- Turn on console login of data returned by the request.
 //
-// SECOND HARD CODED FILTER - (OPTIONAL)
-// Use a second hard coded search filter param and term if you require a little more curation
-// than just all results returning, an example of this in use can be seen in the menu_item search for Pages,
-// here we only want to retuen Pages that have linkable slugs, not homepages, and so we filter those using the
-// data attributes shown below.
-//
-//  Examples:
-//  data-autocomplete-additional-query-value="type_not_eq"                  <- Additional hard coded query | DEFAULT: null (not used)
-//  data-autocomplete-additional-term-value="Spree::Cms::Pages::Homepage"   <- Additional hard coded term | DEFAULT: null (not used)
+//  Add your own custom URL params to the request as needed
+//  EXAMPLE:
+//  data-autocomplete-additional-url-params-value="filter[type_not_eq]=Spree::Cms::Pages::Homepage"
 
-document.addEventListener('DOMContentLoaded', function() {
-  const select2Autocompletes = document.querySelectorAll('select.select2autocomplete')
-  select2Autocompletes.forEach(element => buildParamsFromDataAttrs(element))
+document.addEventListener("spree:load", function() {
+  loadAutoCompleteParams()
 })
 
-function buildParamsFromDataAttrs (element) {
+// eslint-disable-next-line no-unused-vars
+function loadAutoCompleteParams() {
+  const select2Autocompletes = document.querySelectorAll('select[data-autocomplete-url-value]')
+  select2Autocompletes.forEach(element => buildParamsFromDataAttrs(element))
+}
+
+function buildParamsFromDataAttrs(element) {
   $(element).select2Autocomplete({
-    // Required Attributes
     apiUrl: Spree.routes[element.dataset.autocompleteUrlValue],
-
-    // Optional Attributes
     placeholder: element.dataset.autocompletePlaceholderValue,
     allow_clear: element.dataset.autocompleteClearValue,
     multiple: element.dataset.autocompleteMultipleValue,
@@ -51,19 +41,17 @@ function buildParamsFromDataAttrs (element) {
     minimum_input: element.dataset.autocompleteMinInputValue,
     search_query: element.dataset.autocompleteSearchQueryValue,
     custom_return_id: element.dataset.autocompleteCustomReturnIdValue,
-
-    // Hard coded additional filter for those edge cases.
-    additional_query: element.dataset.autocompleteAdditionalQueryValue,
-    additional_term: element.dataset.autocompleteAdditionalTermValue
+    additional_url_params: element.dataset.autocompleteAdditionalUrlParamsValue,
+    debug_mode: element.dataset.autocompleteDebugModeValue
   })
 }
 
-// Can also be called directly as javastript.
 $.fn.select2Autocomplete = function(params) {
-  // Required params
-  const apiUrl = params.apiUrl || null
+  let apiUrl = null
+  let returnedFields
 
-  // Optional Params
+  const resourcePlural = params.apiUrl.match(/([^/]*)\/*$/)[1]
+  const resourceSingular = resourcePlural.slice(0, -1)
   const select2placeHolder = params.placeholder || Spree.translations.search
   const select2Multiple = params.multiple || false
   const select2allowClear = params.allow_clear || false
@@ -71,19 +59,42 @@ $.fn.select2Autocomplete = function(params) {
   const minimumInput = params.minimum_input || 3
   const searchQuery = params.search_query || 'name_i_cont'
   const customReturnId = params.custom_return_id || null
-  const additionalQuery = params.additional_query || null
-  const additionalTerm = params.additional_term || null
+  const additionalUrlParams = params.additional_url_params || null
+  const DebugMode = params.debug_mode || null
 
+  //
+  // Set up a clean URL for sparseFields
+  if (customReturnId == null) {
+    returnedFields = returnAttribute
+  } else {
+    returnedFields = `${returnAttribute},${customReturnId}`
+  }
+  const sparseFields = `fields[${resourceSingular}]=${returnedFields}`
+
+  //
+  // Set up a clean URL for Additional URL Params
+  if (additionalUrlParams != null) {
+    // URL + Additional URL Params + Sparse Fields
+    apiUrl = `${params.apiUrl}?${additionalUrlParams}&${sparseFields}`
+  } else {
+    // URL + Sparse Fields (the default response for a normal Select2)
+    apiUrl = `${params.apiUrl}?${sparseFields}`
+  }
+
+  if (DebugMode != null) console.log('Request URL:' + apiUrl)
+
+  //
+  // Format the returned values.
   function formatList(values) {
     if (customReturnId) {
-      return values.map(function (obj) {
+      return values.map(function(obj) {
         return {
           id: obj.attributes[customReturnId],
           text: obj.attributes[returnAttribute]
         }
       })
     } else {
-      return values.map(function (obj) {
+      return values.map(function(obj) {
         return {
           id: obj.id,
           text: obj.attributes[returnAttribute]
@@ -92,52 +103,30 @@ $.fn.select2Autocomplete = function(params) {
     }
   }
 
-  if (additionalQuery == null && additionalTerm == null) {
-    this.select2({
-      multiple: select2Multiple,
-      allowClear: select2allowClear,
-      placeholder: select2placeHolder,
-      minimumInputLength: minimumInput,
-      ajax: {
-        url: apiUrl,
-        headers: Spree.apiV2Authentication(),
-        data: function (params) {
-          return {
-            filter: {
-              [searchQuery]: params.term
-            }
-          }
-        },
-        processResults: function(json) {
-          return {
-            results: formatList(json.data)
+  //
+  // Set-up Select2 and make AJAX request.
+  this.select2({
+    multiple: select2Multiple,
+    allowClear: select2allowClear,
+    placeholder: select2placeHolder,
+    minimumInputLength: minimumInput,
+    ajax: {
+      url: apiUrl,
+      headers: Spree.apiV2Authentication(),
+      data: function(params) {
+        return {
+          filter: {
+            [searchQuery]: params.term
           }
         }
-      }
-    })
-  } else {
-    this.select2({
-      multiple: select2Multiple,
-      allowClear: select2allowClear,
-      placeholder: select2placeHolder,
-      minimumInputLength: minimumInput,
-      ajax: {
-        url: apiUrl,
-        headers: Spree.apiV2Authentication(),
-        data: function (params) {
-          return {
-            filter: {
-              [searchQuery]: params.term,
-              [additionalQuery]: additionalTerm
-            }
-          }
-        },
-        processResults: function(json) {
-          return {
-            results: formatList(json.data)
-          }
+      },
+      processResults: function(json) {
+        if (DebugMode != null) console.log(json)
+
+        return {
+          results: formatList(json.data)
         }
       }
-    })
-  }
+    }
+  })
 }

data/app/assets/javascripts/spree/backend/global/select2_populate.es6

@@ -1,11 +1,9 @@
 /**
   populateSelectOptionsFromApi(params)
+  Allows you to easily fetch data from API (Platform v2) and populate an empty <select> with <option> tags, including a selected <option> tag.
 
-  Allows you to easily fetch data from API (Platfrom v2)
-  and populate an empty <select> with <option> tags,
-  including a selected <option> tag.
-
-  ## EXAMPLE USE CASE called from ERB view file:
+  ## EXAMPLE A
+  # Populating a list of all taxons including a selected item
 
   populateSelectOptionsFromApi({
     targetElement: '#mySelectElement',
@@ -16,6 +14,24 @@
       selectedOption: <%= @menu_item.linked_resource_id %>
     <% end %>
   })
+
+  ## EXAMPLE B
+  # Populating a single selected item using filter and returning an attribute other than the ID
+
+  <% if resource.link_one.present? %>
+    <script>
+      populateSelectOptionsFromApi({
+        targetElement: "#<%= save_to %>Select2",
+        apiUrl: Spree.routes.taxons_api_v2 + "?filter[permalink_matches]=<%= resource.send(save_to) %>",
+        returnValueFromAttributes: 'permalink',
+        returnOptionText: 'pretty_name',
+
+        <% if resource.send(save_to) %>
+          selectedOption: "<%= resource.send(save_to) %>"
+        <% end %>
+      })
+    </script>
+  <% end %>
 **/
 
 // eslint-disable-next-line no-unused-vars
@@ -32,30 +48,40 @@ const handleErrors = function(response) {
 const createRequest = function(params, succeed, fail) {
   const targetElement = params.targetElement
   const apiUrl = params.apiUrl
-  const returnAttribute = params.returnAttribute
+  const returnOptionText = params.returnOptionText
+  const returnValueFromAttributes = params.returnValueFromAttributes || null
   const selectedOption = params.selectedOption
   const selectEl = document.querySelector(targetElement)
 
   fetch(apiUrl, { headers: Spree.apiV2Authentication() })
     .then((response) => handleErrors(response))
-    .then((json) => succeed(json.data, returnAttribute, selectEl, selectedOption))
+    .then((json) => succeed(json.data, returnValueFromAttributes, returnOptionText, selectEl, selectedOption))
     .catch((error) => fail(error, selectEl))
 }
 
-const updateSelectSuccess = function(parsedData, returnAttribute, selectEl, selectedOption) {
+const updateSelectSuccess = function(parsedData, returnValueFromAttributes, returnOptionText, selectEl, selectedOption) {
+  const selectedOpt = selectEl.querySelector('option[selected]')
+
   parsedData.forEach((object) => {
     const optionEl = document.createElement('option')
-    optionEl.value = object.id
-    optionEl.innerHTML = object.attributes[returnAttribute]
 
-    if (parseInt(selectedOption, 10) === parseInt(object.id, 10)) optionEl.selected = true
+    if (returnValueFromAttributes == null) {
+      optionEl.value = object.id
+      if (selectedOption === object.id) optionEl.selected = true
+    } else {
+      optionEl.value = object.attributes[returnValueFromAttributes]
+      if (selectedOpt.value === object.attributes[returnValueFromAttributes]) {
+        selectedOpt.remove()
+
+        optionEl.setAttribute('selected', 'selected')
+      }
+    }
 
+    optionEl.innerHTML = object.attributes[returnOptionText]
     selectEl.appendChild(optionEl)
   })
 }
 
 const updateSelectError = function(error, selectEl) {
-  selectEl.disabled = true
-
   console.log(error)
 }