diff options
Diffstat (limited to 'app/assets/javascripts/sidebar/components/todo_toggle')
-rw-r--r-- | app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue | 6 | ||||
-rw-r--r-- | app/assets/javascripts/sidebar/components/todo_toggle/todo_button.vue | 44 |
2 files changed, 47 insertions, 3 deletions
diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue b/app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue index 5da2d65723a..b86ff279fd8 100644 --- a/app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue +++ b/app/assets/javascripts/sidebar/components/todo_toggle/sidebar_todo_widget.vue @@ -3,11 +3,11 @@ import { GlButton, GlIcon, GlTooltipDirective } from '@gitlab/ui'; import { produce } from 'immer'; import { createAlert } from '~/flash'; import { __, sprintf } from '~/locale'; -import { todoQueries, TodoMutationTypes, todoMutations } from '~/sidebar/constants'; -import { todoLabel } from '~/vue_shared/components/sidebar/todo_toggle//utils'; -import TodoButton from '~/vue_shared/components/sidebar/todo_toggle/todo_button.vue'; import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin'; import Tracking from '~/tracking'; +import { todoQueries, TodoMutationTypes, todoMutations } from '../../constants'; +import { todoLabel } from '../../utils'; +import TodoButton from './todo_button.vue'; const trackingMixin = Tracking.mixin(); diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/todo_button.vue b/app/assets/javascripts/sidebar/components/todo_toggle/todo_button.vue new file mode 100644 index 00000000000..b49b8fc389b --- /dev/null +++ b/app/assets/javascripts/sidebar/components/todo_toggle/todo_button.vue @@ -0,0 +1,44 @@ +<script> +import { GlButton } from '@gitlab/ui'; +import { todoLabel, updateGlobalTodoCount } from '../../utils'; + +export default { + components: { + GlButton, + }, + props: { + isTodo: { + type: Boolean, + required: false, + default: true, + }, + }, + computed: { + buttonLabel() { + return todoLabel(this.isTodo); + }, + }, + methods: { + incrementGlobalTodoCount() { + updateGlobalTodoCount(1); + }, + decrementGlobalTodoCount() { + updateGlobalTodoCount(-1); + }, + onToggle(event) { + if (this.isTodo) { + this.decrementGlobalTodoCount(); + } else { + this.incrementGlobalTodoCount(); + } + this.$emit('click', event); + }, + }, +}; +</script> + +<template> + <gl-button v-bind="$attrs" :aria-label="buttonLabel" @click="onToggle($event)"> + {{ buttonLabel }} + </gl-button> +</template> |