1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import $ from 'jquery';
import Vue from 'vue';
import { __ } from '~/locale';
import RefSelector from '~/ref/components/ref_selector.vue';
import { REF_TYPE_BRANCHES, REF_TYPE_TAGS } from '~/ref/constants';
import setupNativeFormVariableList from '~/ci_variable_list/native_form_variable_list';
import GlFieldErrors from '~/gl_field_errors';
import Translate from '~/vue_shared/translate';
import intervalPatternInput from './components/interval_pattern_input.vue';
import TimezoneDropdown from './components/timezone_dropdown';
Vue.use(Translate);
function initIntervalPatternInput() {
const intervalPatternMount = document.getElementById('interval-pattern-input');
const initialCronInterval = intervalPatternMount?.dataset?.initialInterval;
const dailyLimit = intervalPatternMount.dataset?.dailyLimit;
return new Vue({
el: intervalPatternMount,
components: {
intervalPatternInput,
},
render(createElement) {
return createElement('interval-pattern-input', {
props: {
initialCronInterval,
dailyLimit,
},
});
},
});
}
function getEnabledRefTypes() {
return [REF_TYPE_BRANCHES, REF_TYPE_TAGS];
}
function initTargetRefDropdown() {
const $refField = document.getElementById('schedule_ref');
const el = document.querySelector('.js-target-ref-dropdown');
const { projectId, defaultBranch } = el.dataset;
if (!$refField.value) {
$refField.value = defaultBranch;
}
const refDropdown = new Vue({
el,
render(h) {
return h(RefSelector, {
props: {
enabledRefTypes: getEnabledRefTypes(),
projectId,
value: $refField.value,
useSymbolicRefNames: true,
translations: {
dropdownHeader: __('Select target branch or tag'),
},
},
class: 'gl-w-full',
});
},
});
refDropdown.$children[0].$on('input', (newRef) => {
$refField.value = newRef;
});
return refDropdown;
}
export default () => {
/* 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({
$dropdownEl: $('.js-timezone-dropdown'),
$inputEl: $('#schedule_cron_timezone'),
onSelectTimezone: () => {
gl.pipelineScheduleFieldErrors.updateFormValidityState();
},
});
gl.pipelineScheduleFieldErrors = new GlFieldErrors(formElement);
initTargetRefDropdown();
setupNativeFormVariableList({
container: $('.js-ci-variable-list-section'),
formField: 'schedule',
});
};
|
