kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

refactor component mounts into reusable function

Browse source
This commit is contained in:
Dennis Tang 2018-05-07 14:01:48 +02:00
parent 36eaa4082f
commit 81d769ec99
1 changed files with 20 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
app/assets/javascripts/projects/gke_cluster_dropdowns/index.js
View file

@ -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 mountGkeProjectIdDropdown = () => {
const entryPoint = '.js-gcp-project-id-dropdown-entry-point';
const el = document.querySelector(entryPoint);
mountComponent(entryPoint, GkeProjectIdDropdown, 'gke-project-id-dropdown', {
docsUrl: el.dataset.docsurl,
});
};
const mountGkeZoneDropdown = () => {
const el = document.querySelector('.js-gcp-zone-dropdown-entry-point');
const hiddenInput = el.querySelector('input');
if (!el) return false;
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('.js-gcp-zone-dropdown-entry-point', GkeZoneDropdown, 'gke-zone-dropdown');
};
const mountGkeMachineTypeDropdown = () => {
const el = document.querySelector('.js-gcp-machine-type-dropdown-entry-point');
const hiddenInput = el.querySelector('input');
if (!el) return false;
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,
},
}),
});
mountComponent(
'.js-gcp-machine-type-dropdown-entry-point',
GkeMachineTypeDropdown,
'gke-machine-type-dropdown',
);
};
const gkeDropdownErrorHandler = () => {