diff options
Diffstat (limited to 'app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue')
-rw-r--r-- | app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue | 106 |
1 files changed, 100 insertions, 6 deletions
diff --git a/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue b/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue index 87090165f82..7d3135ad50d 100644 --- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue +++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue @@ -1,29 +1,123 @@ <script> +import { s__ } from '~/locale'; import Todo from '~/sidebar/components/todo_toggle/todo.vue'; +import axios from '~/lib/utils/axios_utils'; +import createAlertTodo from '../../graphql/mutations/alert_todo_create.graphql'; export default { + i18n: { + UPDATE_ALERT_TODO_ERROR: s__( + 'AlertManagement|There was an error while updating the To Do of the alert.', + ), + }, components: { Todo, }, props: { + alert: { + type: Object, + required: true, + }, + projectPath: { + type: String, + required: true, + }, sidebarCollapsed: { type: Boolean, required: true, }, }, + data() { + return { + isUpdating: false, + isTodo: false, + todo: '', + }; + }, + computed: { + alertID() { + return parseInt(this.alert.iid, 10); + }, + }, + methods: { + updateToDoCount(add) { + const oldCount = parseInt(document.querySelector('.todos-count').innerText, 10); + const count = add ? oldCount + 1 : oldCount - 1; + const headerTodoEvent = new CustomEvent('todo:toggle', { + detail: { + count, + }, + }); + + return document.dispatchEvent(headerTodoEvent); + }, + toggleTodo() { + if (this.todo) { + return this.markAsDone(); + } + + this.isUpdating = true; + return this.$apollo + .mutate({ + mutation: createAlertTodo, + variables: { + iid: this.alert.iid, + projectPath: this.projectPath, + }, + }) + .then(({ data: { alertTodoCreate: { todo = {}, errors = [] } } = {} } = {}) => { + if (errors[0]) { + return this.$emit( + 'alert-error', + `${this.$options.i18n.UPDATE_ALERT_TODO_ERROR} ${errors[0]}.`, + ); + } + + this.todo = todo.id; + return this.updateToDoCount(true); + }) + .catch(() => { + this.$emit( + 'alert-error', + `${this.$options.i18n.UPDATE_ALERT_TODO_ERROR} ${s__( + 'AlertManagement|Please try again.', + )}`, + ); + }) + .finally(() => { + this.isUpdating = false; + }); + }, + markAsDone() { + this.isUpdating = true; + + return axios + .delete(`/dashboard/todos/${this.todo.split('/').pop()}`) + .then(() => { + this.todo = ''; + return this.updateToDoCount(false); + }) + .catch(() => { + this.$emit('alert-error', this.$options.i18n.UPDATE_ALERT_TODO_ERROR); + }) + .finally(() => { + this.isUpdating = false; + }); + }, + }, }; </script> -<!-- TODO: Implement after or as part of: https://gitlab.com/gitlab-org/gitlab/-/issues/215946 --> <template> - <div v-if="false" :class="{ 'block todo': sidebarCollapsed }"> + <div :class="{ 'block todo': sidebarCollapsed, 'gl-ml-auto': !sidebarCollapsed }"> <todo + data-testid="alert-todo-button" :collapsed="sidebarCollapsed" - :issuable-id="1" - :is-todo="false" - :is-action-active="false" + :issuable-id="alertID" + :is-todo="todo !== ''" + :is-action-active="isUpdating" issuable-type="alert" - @toggleTodo="() => {}" + @toggleTodo="toggleTodo" /> </div> </template> |