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 | 84 |
1 files changed, 53 insertions, 31 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 7d3135ad50d..5bd69a1f0ec 100644 --- a/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue +++ b/app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue @@ -1,13 +1,14 @@ <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'; +import createAlertTodo from '../../graphql/mutations/alert_todo_create.mutation.graphql'; +import todoMarkDone from '../../graphql/mutations/alert_todo_mark_done.mutation.graphql'; +import alertQuery from '../../graphql/queries/details.query.graphql'; export default { i18n: { UPDATE_ALERT_TODO_ERROR: s__( - 'AlertManagement|There was an error while updating the To Do of the alert.', + 'AlertManagement|There was an error while updating the To-Do of the alert.', ), }, components: { @@ -30,14 +31,24 @@ export default { data() { return { isUpdating: false, - isTodo: false, - todo: '', }; }, computed: { alertID() { return parseInt(this.alert.iid, 10); }, + firstToDoId() { + return this.alert?.todos?.nodes[0]?.id; + }, + hasPendingTodos() { + return this.alert?.todos?.nodes.length > 0; + }, + getAlertQueryVariables() { + return { + fullPath: this.projectPath, + alertId: this.alert.iid, + }; + }, }, methods: { updateToDoCount(add) { @@ -51,11 +62,7 @@ export default { return document.dispatchEvent(headerTodoEvent); }, - toggleTodo() { - if (this.todo) { - return this.markAsDone(); - } - + addToDo() { this.isUpdating = true; return this.$apollo .mutate({ @@ -65,24 +72,14 @@ export default { projectPath: this.projectPath, }, }) - .then(({ data: { alertTodoCreate: { todo = {}, errors = [] } } = {} } = {}) => { + .then(({ data: { errors = [] } }) => { if (errors[0]) { - return this.$emit( - 'alert-error', - `${this.$options.i18n.UPDATE_ALERT_TODO_ERROR} ${errors[0]}.`, - ); + return this.throwError(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.', - )}`, - ); + this.throwError(); }) .finally(() => { this.isUpdating = false; @@ -90,20 +87,45 @@ export default { }, markAsDone() { this.isUpdating = true; - - return axios - .delete(`/dashboard/todos/${this.todo.split('/').pop()}`) - .then(() => { - this.todo = ''; + return this.$apollo + .mutate({ + mutation: todoMarkDone, + variables: { + id: this.firstToDoId, + }, + update: this.updateCache, + }) + .then(({ data: { errors = [] } }) => { + if (errors[0]) { + return this.throwError(errors[0]); + } return this.updateToDoCount(false); }) .catch(() => { - this.$emit('alert-error', this.$options.i18n.UPDATE_ALERT_TODO_ERROR); + this.throwError(); }) .finally(() => { this.isUpdating = false; }); }, + updateCache(store) { + const data = store.readQuery({ + query: alertQuery, + variables: this.getAlertQueryVariables, + }); + + data.project.alertManagementAlerts.nodes[0].todos.nodes.shift(); + + store.writeQuery({ + query: alertQuery, + variables: this.getAlertQueryVariables, + data, + }); + }, + throwError(err = '') { + const error = err || s__('AlertManagement|Please try again.'); + this.$emit('alert-error', `${this.$options.i18n.UPDATE_ALERT_TODO_ERROR} ${error}`); + }, }, }; </script> @@ -114,10 +136,10 @@ export default { data-testid="alert-todo-button" :collapsed="sidebarCollapsed" :issuable-id="alertID" - :is-todo="todo !== ''" + :is-todo="hasPendingTodos" :is-action-active="isUpdating" issuable-type="alert" - @toggleTodo="toggleTodo" + @toggleTodo="hasPendingTodos ? markAsDone() : addToDo()" /> </div> </template> |