diff --git a/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js b/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js deleted file mode 100644 index 901adbe9fce312f0d55ad147e4aa185a184bf935..0000000000000000000000000000000000000000 --- a/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js +++ /dev/null @@ -1,148 +0,0 @@ -import Vue from 'vue'; -import Translate from '../../vue_shared/translate'; - -Vue.use(Translate); - -const inputNameAttribute = 'schedule[cron]'; - -export default { - props: { - initialCronInterval: { - type: String, - required: false, - default: '', - }, - }, - data() { - return { - inputNameAttribute, - cronInterval: this.initialCronInterval, - cronIntervalPresets: { - everyDay: '0 4 * * *', - everyWeek: '0 4 * * 0', - everyMonth: '0 4 1 * *', - }, - cronSyntaxUrl: 'https://en.wikipedia.org/wiki/Cron', - customInputEnabled: false, - }; - }, - computed: { - intervalIsPreset() { - return _.contains(this.cronIntervalPresets, this.cronInterval); - }, - // The text input is editable when there's a custom interval, or when it's - // a preset interval and the user clicks the 'custom' radio button - isEditable() { - return !!(this.customInputEnabled || !this.intervalIsPreset); - }, - }, - methods: { - toggleCustomInput(shouldEnable) { - this.customInputEnabled = shouldEnable; - - if (shouldEnable) { - // We need to change the value so other radios don't remain selected - // because the model (cronInterval) hasn't changed. The server trims it. - this.cronInterval = `${this.cronInterval} `; - } - }, - }, - created() { - if (this.intervalIsPreset) { - this.enableCustomInput = false; - } - }, - watch: { - cronInterval() { - // updates field validation state when model changes, as - // glFieldError only updates on input. - Vue.nextTick(() => { - gl.pipelineScheduleFieldErrors.updateFormValidityState(); - }); - }, - }, - template: ` -
- `, -}; diff --git a/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.vue b/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.vue new file mode 100644 index 0000000000000000000000000000000000000000..ce46b3fa3fada130bdb1bd62dfe1103ac03dee3f --- /dev/null +++ b/app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.vue @@ -0,0 +1,144 @@ + + + + + diff --git a/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js b/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js index c60e77deccedf50d1d65fde6556d5d08f2331ec2..b424e7f205d43825ecb1a1477330a8e7a6c08776 100644 --- a/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js +++ b/app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js @@ -1,20 +1,41 @@ import Vue from 'vue'; -import IntervalPatternInput from './components/interval_pattern_input'; +import Translate from '../vue_shared/translate'; +import intervalPatternInput from './components/interval_pattern_input.vue'; import TimezoneDropdown from './components/timezone_dropdown'; import TargetBranchDropdown from './components/target_branch_dropdown'; -document.addEventListener('DOMContentLoaded', () => { - const IntervalPatternInputComponent = Vue.extend(IntervalPatternInput); +Vue.use(Translate); + +function initIntervalPatternInput() { const intervalPatternMount = document.getElementById('interval-pattern-input'); const initialCronInterval = intervalPatternMount ? intervalPatternMount.dataset.initialInterval : ''; - new IntervalPatternInputComponent({ - propsData: { - initialCronInterval, + return new Vue({ + el: intervalPatternMount, + components: { + intervalPatternInput, }, - }).$mount(intervalPatternMount); + render(createElement) { + return createElement('interval-pattern-input', { + props: { + initialCronInterval, + }, + }); + }, + }); +} + +document.addEventListener('DOMContentLoaded', () => { + /* Most of the form is written in haml, but for fields with more complex behaviors, + * you should mount individual Vue components here. If at some point components need + * to share state, it may make sense to refactor the whole form to Vue */ + + initIntervalPatternInput(); + + // Initialize non-Vue JS components in the form const formElement = document.getElementById('new-pipeline-schedule-form'); + gl.timezoneDropdown = new TimezoneDropdown(); gl.targetBranchDropdown = new TargetBranchDropdown(); gl.pipelineScheduleFieldErrors = new gl.GlFieldErrors(formElement); diff --git a/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js b/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js index 56c57d94798a3f5c50ca2f968ccd1884af708b83..040d14efed246193b8fda7b70419ba63e061f54b 100644 --- a/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js +++ b/spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js @@ -1,5 +1,8 @@ import Vue from 'vue'; -import IntervalPatternInput from '~/pipeline_schedules/components/interval_pattern_input'; +import Translate from '~/vue_shared/translate'; +import IntervalPatternInput from '~/pipeline_schedules/components/interval_pattern_input.vue'; + +Vue.use(Translate); const IntervalPatternInputComponent = Vue.extend(IntervalPatternInput); const inputNameAttribute = 'schedule[cron]';