[ci skip] Enable todo toggle action on Epic sidebar

app/assets/javascripts/sidebar/components/todo_toggle/todo.vue

@@ -30,18 +30,17 @@ export default {
       required: false,
       default: true,
     },
+    isActionActive: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     collapsed: {
       type: Boolean,
       required: false,
       default: false,
     },
   },
-  data() {
-    return {
-      isButtonTypeTodo: this.isTodo,
-      isActionActive: false,
-    };
-  },
   computed: {
     buttonClasses() {
       return this.collapsed ?
@@ -49,13 +48,18 @@ export default {
         'btn btn-default btn-todo issuable-header-btn float-right';
     },
     buttonLabel() {
-      return this.isButtonTypeTodo ? MARK_TEXT : TODO_TEXT;
+      return this.isTodo ? MARK_TEXT : TODO_TEXT;
     },
     collapsedButtonIconClasses() {
-      return this.isButtonTypeTodo ? 'todo-undone' : '';
+      return this.isTodo ? 'todo-undone' : '';
     },
     collapsedButtonIcon() {
-      return this.isButtonTypeTodo ? 'check-circle' : 'plus-square';
+      return this.isTodo ? 'check-circle' : 'plus-square';
+    },
+  },
+  methods: {
+    handleButtonClick() {
+      this.$emit('toggleTodo');
     },
   },
 };
@@ -73,6 +77,7 @@ export default {
     data-container="body"
     data-placement="left"
     data-boundary="viewport"
+    @click="handleButtonClick"
   >
     <icon
       v-if="collapsed"

ee/app/assets/javascripts/epics/epic_show/components/epic_show_app.vue

@@ -119,6 +119,15 @@
         type: String,
         required: true,
       },
+      todoPath: {
+        type: String,
+        required: true,
+      },
+      todoDeletePath: {
+        type: String,
+        required: false,
+        default: '',
+      },
       labelsWebUrl: {
         type: String,
         required: true,
@@ -191,6 +200,8 @@
         :update-path="updateEndpoint"
         :labels-path="labelsPath"
         :toggle-subscription-path="toggleSubscriptionPath"
+        :todo-path="todoPath"
+        :todo-delete-path="todoDeletePath"
         :labels-web-url="labelsWebUrl"
         :epics-web-url="epicsWebUrl"
       />

ee/app/assets/javascripts/epics/epic_show/epic_show_bundle.js

 import Vue from 'vue';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import EpicShowApp from './components/epic_show_app.vue';
 
 export default () => {
   const el = document.querySelector('#epic-show-app');
-  const metaData = JSON.parse(el.dataset.meta);
+  const metaData = convertObjectPropsToCamelCase(JSON.parse(el.dataset.meta));
   const initialData = JSON.parse(el.dataset.initial);
 
   const props = Object.assign({}, initialData, metaData, el.dataset);
 
-  // Convert backend casing to match frontend style guide
-  props.epicId = props.epic_id;
-  props.todoExists = props.todo_exists;
-  props.startDate = props.start_date;
-  props.endDate = props.end_date;
-
   return new Vue({
     el,
     components: {

ee/app/assets/javascripts/epics/sidebar/components/sidebar_app.vue

 <script>
 /* eslint-disable vue/require-default-prop */
+import $ from 'jquery';
 import _ from 'underscore';
 import Cookies from 'js-cookie';
 import Flash from '~/flash';
@@ -82,6 +83,14 @@ export default {
       type: String,
       required: true,
     },
+    todoPath: {
+      type: String,
+      required: true,
+    },
+    todoDeletePath: {
+      type: String,
+      required: true,
+    },
     labelsWebUrl: {
       type: String,
       required: true,
@@ -96,6 +105,8 @@ export default {
       startDate: this.initialStartDate,
       endDate: this.initialEndDate,
       subscribed: this.initialSubscribed,
+      todoExists: this.initialTodoExists,
+      todoDeletePath: this.todoDeletePath,
     });
 
     return {
@@ -107,7 +118,12 @@ export default {
       savingStartDate: false,
       savingEndDate: false,
       savingSubscription: false,
-      service: new SidebarService(this.endpoint, this.toggleSubscriptionPath),
+      savingTodoAction: false,
+      service: new SidebarService({
+        endpoint: this.endpoint,
+        subscriptionEndpoint: this.subscriptionEndpoint,
+        todoPath: this.todoPath,
+      }),
       epicContext: {
         labels: this.initialLabels,
       },
@@ -202,6 +218,37 @@ export default {
           }
         });
     },
+    handleToggleTodo() {
+      this.savingTodoAction = true;
+      if (!this.store.todoExists) {
+        this.service
+          .addTodo(this.epicId)
+          .then(res => res.data)
+          .then(data => {
+            this.savingTodoAction = false;
+            this.store.setTodoDeletePath(data.delete_path);
+            this.store.setTodoExists(!this.store.todoExists);
+            $(document).trigger('todo:toggle', data.count);
+          })
+          .catch(() => {
+            this.savingTodoAction = false;
+            Flash(__('There was an error adding a todo.'));
+          });
+      } else {
+        this.service
+          .deleteTodo(this.store.todoDeletePath)
+          .then(res => res.data)
+          .then(data => {
+            this.savingTodoAction = false;
+            this.store.setTodoExists(!this.store.todoExists);
+            $(document).trigger('todo:toggle', data.count);
+          })
+          .catch(() => {
+            this.savingTodoAction = false;
+            Flash(__('There was an error deleting the todo.'));
+          });
+      }
+    },
   },
 };
 </script>
@@ -226,8 +273,10 @@ export default {
           v-if="!collapsed"
           :collapsed="collapsed"
           :issuable-id="epicId"
-          :is-todo="initialTodoExists"
+          :is-todo="store.todoExists"
+          :is-action-active="savingTodoAction"
           issuable-type="epic"
+          @toggleTodo="handleToggleTodo"
         />
       </div>
       <div
@@ -237,8 +286,10 @@ export default {
         <sidebar-todo
           :collapsed="collapsed"
           :issuable-id="epicId"
-          :is-todo="initialTodoExists"
+          :is-todo="store.todoExists"
+          :is-action-active="savingTodoAction"
           issuable-type="epic"
+          @toggleTodo="handleToggleTodo"
         />
       </div>
       <sidebar-date-picker

ee/app/assets/javascripts/epics/sidebar/services/sidebar_service.js

 import axios from '~/lib/utils/axios_utils';
 
 export default class SidebarService {
-  constructor(endpoint, subscriptionEndpoint) {
+  constructor({ endpoint, subscriptionEndpoint, todoPath }) {
     this.endpoint = endpoint;
     this.subscriptionEndpoint = subscriptionEndpoint;
+    this.todoPath = todoPath;
   }
 
   updateStartDate(startDate) {
@@ -17,4 +18,16 @@ export default class SidebarService {
   toggleSubscribed() {
     return axios.post(this.subscriptionEndpoint);
   }
+
+  addTodo(epicId) {
+    return axios.post(this.todoPath, {
+      issuable_id: epicId,
+      issuable_type: 'epic',
+    });
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  deleteTodo(todoDeletePath) {
+    return axios.delete(todoDeletePath);
+  }
 }

ee/app/assets/javascripts/epics/sidebar/stores/sidebar_store.js

 import { parsePikadayDate } from '~/lib/utils/datefix';
 
 export default class SidebarStore {
-  constructor({ startDate, endDate, subscribed }) {
+  constructor({ startDate, endDate, subscribed, todoExists, todoDeletePath }) {
     this.startDate = startDate;
     this.endDate = endDate;
     this.subscribed = subscribed;
+    this.todoExists = todoExists;
+    this.todoDeletePath = todoDeletePath;
   }
 
   get startDateTime() {
@@ -18,4 +20,12 @@ export default class SidebarStore {
   setSubscribed(subscribed) {
     this.subscribed = subscribed;
   }
+
+  setTodoExists(todoExists) {
+    this.todoExists = todoExists;
+  }
+
+  setTodoDeletePath(deletePath) {
+    this.todoDeletePath = deletePath;
+  }
 }

ee/app/helpers/epics_helper.rb

@@ -14,6 +14,7 @@ module EpicsHelper
         src: opts[:author_icon]
       },
       todo_exists: todo.present?,
+      todo_path: group_todos_path(group),
       start_date: epic.start_date,
       end_date: epic.end_date
     }