Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Jérome Perrin
gitlab-ce
Commits
2da31421
Commit
2da31421
authored
7 years ago
by
Bryce Johnson
Committed by
Phil Hughes
7 years ago
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Slightly refactor pipeline schedules form in preparation for additions
parent
bf412929
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
176 additions
and
156 deletions
+176
-156
app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js
...s/pipeline_schedules/components/interval_pattern_input.js
+0
-148
app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.vue
.../pipeline_schedules/components/interval_pattern_input.vue
+144
-0
app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js
...ripts/pipeline_schedules/pipeline_schedule_form_bundle.js
+28
-7
spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js
...scripts/pipeline_schedules/interval_pattern_input_spec.js
+4
-1
No files found.
app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.js
deleted
100644 → 0
View file @
bf412929
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
:
`
<div class="interval-pattern-form-group">
<div class="cron-preset-radio-input">
<input
id="custom"
class="label-light"
type="radio"
:name="inputNameAttribute"
:value="cronInterval"
:checked="isEditable"
@click="toggleCustomInput(true)"
/>
<label for="custom">
{{ s__('PipelineSheduleIntervalPattern|Custom') }}
</label>
<span class="cron-syntax-link-wrap">
(<a :href="cronSyntaxUrl" target="_blank">{{ __('Cron syntax') }}</a>)
</span>
</div>
<div class="cron-preset-radio-input">
<input
id="every-day"
class="label-light"
type="radio"
v-model="cronInterval"
:name="inputNameAttribute"
:value="cronIntervalPresets.everyDay"
@click="toggleCustomInput(false)"
/>
<label class="label-light" for="every-day">
{{ __('Every day (at 4:00am)') }}
</label>
</div>
<div class="cron-preset-radio-input">
<input
id="every-week"
class="label-light"
type="radio"
v-model="cronInterval"
:name="inputNameAttribute"
:value="cronIntervalPresets.everyWeek"
@click="toggleCustomInput(false)"
/>
<label class="label-light" for="every-week">
{{ __('Every week (Sundays at 4:00am)') }}
</label>
</div>
<div class="cron-preset-radio-input">
<input
id="every-month"
class="label-light"
type="radio"
v-model="cronInterval"
:name="inputNameAttribute"
:value="cronIntervalPresets.everyMonth"
@click="toggleCustomInput(false)"
/>
<label class="label-light" for="every-month">
{{ __('Every month (on the 1st at 4:00am)') }}
</label>
</div>
<div class="cron-interval-input-wrapper">
<input
id="schedule_cron"
class="form-control inline cron-interval-input"
type="text"
:placeholder="__('Define a custom pattern with cron syntax')"
required="true"
v-model="cronInterval"
:name="inputNameAttribute"
:disabled="!isEditable"
/>
</div>
</div>
`
,
};
This diff is collapsed.
Click to expand it.
app/assets/javascripts/pipeline_schedules/components/interval_pattern_input.vue
0 → 100644
View file @
2da31421
<
script
>
export
default
{
props
:
{
initialCronInterval
:
{
type
:
String
,
required
:
false
,
default
:
''
,
},
},
data
()
{
return
{
inputNameAttribute
:
'
schedule[cron]
'
,
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.
this
.
$nextTick
(()
=>
{
gl
.
pipelineScheduleFieldErrors
.
updateFormValidityState
();
});
},
},
};
</
script
>
<
template
>
<div
class=
"interval-pattern-form-group"
>
<div
class=
"cron-preset-radio-input"
>
<input
id=
"custom"
class=
"label-light"
type=
"radio"
:name=
"inputNameAttribute"
:value=
"cronInterval"
:checked=
"isEditable"
@
click=
"toggleCustomInput(true)"
/>
<label
for=
"custom"
>
{{
s__
(
'
PipelineSheduleIntervalPattern|Custom
'
)
}}
</label>
<span
class=
"cron-syntax-link-wrap"
>
(
<a
:href=
"cronSyntaxUrl"
target=
"_blank"
>
{{
__
(
'
Cron syntax
'
)
}}
</a>
)
</span>
</div>
<div
class=
"cron-preset-radio-input"
>
<input
id=
"every-day"
class=
"label-light"
type=
"radio"
v-model=
"cronInterval"
:name=
"inputNameAttribute"
:value=
"cronIntervalPresets.everyDay"
@
click=
"toggleCustomInput(false)"
/>
<label
class=
"label-light"
for=
"every-day"
>
{{
__
(
'
Every day (at 4:00am)
'
)
}}
</label>
</div>
<div
class=
"cron-preset-radio-input"
>
<input
id=
"every-week"
class=
"label-light"
type=
"radio"
v-model=
"cronInterval"
:name=
"inputNameAttribute"
:value=
"cronIntervalPresets.everyWeek"
@
click=
"toggleCustomInput(false)"
/>
<label
class=
"label-light"
for=
"every-week"
>
{{
__
(
'
Every week (Sundays at 4:00am)
'
)
}}
</label>
</div>
<div
class=
"cron-preset-radio-input"
>
<input
id=
"every-month"
class=
"label-light"
type=
"radio"
v-model=
"cronInterval"
:name=
"inputNameAttribute"
:value=
"cronIntervalPresets.everyMonth"
@
click=
"toggleCustomInput(false)"
/>
<label
class=
"label-light"
for=
"every-month"
>
{{
__
(
'
Every month (on the 1st at 4:00am)
'
)
}}
</label>
</div>
<div
class=
"cron-interval-input-wrapper"
>
<input
id=
"schedule_cron"
class=
"form-control inline cron-interval-input"
type=
"text"
:placeholder=
"__('Define a custom pattern with cron syntax')"
required=
"true"
v-model=
"cronInterval"
:name=
"inputNameAttribute"
:disabled=
"!isEditable"
/>
</div>
</div>
</
template
>
This diff is collapsed.
Click to expand it.
app/assets/javascripts/pipeline_schedules/pipeline_schedule_form_bundle.js
View file @
2da31421
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
);
...
...
This diff is collapsed.
Click to expand it.
spec/javascripts/pipeline_schedules/interval_pattern_input_spec.js
View file @
2da31421
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]
'
;
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment