diff options
Diffstat (limited to 'app/assets/javascripts/integrations/edit/components/active_toggle.vue')
-rw-r--r-- | app/assets/javascripts/integrations/edit/components/active_toggle.vue | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/app/assets/javascripts/integrations/edit/components/active_toggle.vue b/app/assets/javascripts/integrations/edit/components/active_toggle.vue new file mode 100644 index 00000000000..2b0aa2586e4 --- /dev/null +++ b/app/assets/javascripts/integrations/edit/components/active_toggle.vue @@ -0,0 +1,53 @@ +<script> +import eventHub from '../event_hub'; +import { GlToggle } from '@gitlab/ui'; + +export default { + name: 'ActiveToggle', + components: { + GlToggle, + }, + props: { + initialActivated: { + type: Boolean, + required: true, + }, + disabled: { + type: Boolean, + required: true, + }, + }, + data() { + return { + activated: this.initialActivated, + }; + }, + mounted() { + // Initialize view + this.$nextTick(() => { + this.onToggle(this.activated); + }); + }, + methods: { + onToggle(e) { + eventHub.$emit('toggle', e); + }, + }, +}; +</script> + +<template> + <div> + <div class="form-group row" role="group"> + <label for="service[active]" class="col-form-label col-sm-2">{{ __('Active') }}</label> + <div class="col-sm-10 pt-1"> + <gl-toggle + v-model="activated" + :disabled="disabled" + name="service[active]" + @change="onToggle" + /> + </div> + </div> + </div> +</template> |