diff options
author | Dennis Tang <dtang@gitlab.com> | 2018-05-07 15:01:48 +0300 |
---|---|---|
committer | Dennis Tang <dtang@gitlab.com> | 2018-05-07 15:01:48 +0300 |
commit | 81d769ec9934c1f38f58bfae8bc83a7fc4494091 (patch) | |
tree | ee24c4d59b1c63ca9fda587dc618ea4ceb12ab04 /app/assets/javascripts/projects | |
parent | 36eaa4082f3b42881fa15d44e821d31369f72e7e (diff) |
refactor component mounts into reusable function
Diffstat (limited to 'app/assets/javascripts/projects')
-rw-r--r-- | app/assets/javascripts/projects/gke_cluster_dropdowns/index.js | 61 |
1 files changed, 19 insertions, 42 deletions
diff --git a/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js index 236d5945c6d..70735f78076 100644 --- a/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js +++ b/app/assets/javascripts/projects/gke_cluster_dropdowns/index.js @@ -6,8 +6,8 @@ import GkeZoneDropdown from './components/gke_zone_dropdown.vue'; import GkeMachineTypeDropdown from './components/gke_machine_type_dropdown.vue'; import * as CONSTANTS from './constants'; -const mountGkeProjectIdDropdown = () => { - const el = document.querySelector('.js-gcp-project-id-dropdown-entry-point'); +const mountComponent = (entryPoint, component, componentName, extraProps = {}) => { + const el = document.querySelector(entryPoint); const hiddenInput = el.querySelector('input'); if (!el) return false; @@ -15,62 +15,39 @@ const mountGkeProjectIdDropdown = () => { return new Vue({ el, components: { - GkeProjectIdDropdown, + [componentName]: component, }, render: createElement => - createElement('gke-project-id-dropdown', { + createElement(componentName, { props: { - docsUrl: el.dataset.docsurl, fieldName: hiddenInput.getAttribute('name'), fieldId: hiddenInput.getAttribute('id'), defaultValue: hiddenInput.value, + ...extraProps, }, }), }); }; -const mountGkeZoneDropdown = () => { - const el = document.querySelector('.js-gcp-zone-dropdown-entry-point'); - const hiddenInput = el.querySelector('input'); - - if (!el) return false; +const mountGkeProjectIdDropdown = () => { + const entryPoint = '.js-gcp-project-id-dropdown-entry-point'; + const el = document.querySelector(entryPoint); - return new Vue({ - el, - components: { - GkeZoneDropdown, - }, - render: createElement => - createElement('gke-zone-dropdown', { - props: { - fieldName: hiddenInput.getAttribute('name'), - fieldId: hiddenInput.getAttribute('id'), - defaultValue: hiddenInput.value, - }, - }), + mountComponent(entryPoint, GkeProjectIdDropdown, 'gke-project-id-dropdown', { + docsUrl: el.dataset.docsurl, }); }; -const mountGkeMachineTypeDropdown = () => { - const el = document.querySelector('.js-gcp-machine-type-dropdown-entry-point'); - const hiddenInput = el.querySelector('input'); - - if (!el) return false; +const mountGkeZoneDropdown = () => { + mountComponent('.js-gcp-zone-dropdown-entry-point', GkeZoneDropdown, 'gke-zone-dropdown'); +}; - return new Vue({ - el, - components: { - GkeMachineTypeDropdown, - }, - render: createElement => - createElement('gke-machine-type-dropdown', { - props: { - fieldName: hiddenInput.getAttribute('name'), - fieldId: hiddenInput.getAttribute('id'), - defaultValue: hiddenInput.value, - }, - }), - }); +const mountGkeMachineTypeDropdown = () => { + mountComponent( + '.js-gcp-machine-type-dropdown-entry-point', + GkeMachineTypeDropdown, + 'gke-machine-type-dropdown', + ); }; const gkeDropdownErrorHandler = () => { |