Update global todo counter in design management

app/assets/javascripts/design_management/components/design_todo_button.vue

@@ -5,7 +5,7 @@ import createDesignTodoMutation from '../graphql/mutations/create_design_todo.mu
 import TodoButton from '~/vue_shared/components/todo_button.vue';
 import allVersionsMixin from '../mixins/all_versions';
 import { updateStoreAfterDeleteDesignTodo } from '../utils/cache_update';
-import { findIssueId } from '../utils/design_management_utils';
+import { findIssueId, dispatchDocumentEvent } from '../utils/design_management_utils';
 import { CREATE_DESIGN_TODO_ERROR, DELETE_DESIGN_TODO_ERROR } from '../utils/error_messages';
 
 export default {
@@ -59,6 +59,21 @@ export default {
     },
   },
   methods: {
+    updateGlobalTodoCount(additionalTodoCount) {
+      const currentCount = parseInt(document.querySelector('.js-todos-count').innerText, 10);
+
+      dispatchDocumentEvent('todo:toggle', {
+        detail: {
+          count: Math.max(currentCount + additionalTodoCount, 0),
+        },
+      });
+    },
+    incrementGlobalTodoCount() {
+      this.updateGlobalTodoCount(1);
+    },
+    decrementGlobalTodoCount() {
+      this.updateGlobalTodoCount(-1);
+    },
     createTodo() {
       this.todoLoading = true;
       return this.$apollo
@@ -75,6 +90,9 @@ export default {
             }
           },
         })
+        .then(() => {
+          this.incrementGlobalTodoCount();
+        })
         .catch(err => {
           this.$emit('error', Error(CREATE_DESIGN_TODO_ERROR));
           throw err;
@@ -115,6 +133,9 @@ export default {
             }
           },
         })
+        .then(() => {
+          this.decrementGlobalTodoCount();
+        })
         .catch(err => {
           this.$emit('error', Error(DELETE_DESIGN_TODO_ERROR));
           throw err;

app/assets/javascripts/design_management/utils/design_management_utils.js

@@ -167,3 +167,12 @@ export const createPendingTodo = todoId => {
     id: createTodoGid(todoId),
   };
 };
+
+/**
+ * Dispatch an event on the document
+ * @param {String} eventName
+ * @param {Object} eventData
+ */
+export const dispatchDocumentEvent = (eventName, eventData) => {
+  document.dispatchEvent(new CustomEvent(eventName, eventData));
+};