Remove some weird code to add/remove the task status

Moved the data into the data method
Renamed edited ago class name

2 files changed, 41 insertions, 38 deletions

diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 770bf68e093..4ad3eb7dfd7 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -29,7 +29,7 @@
       return {
         preAnimation: false,
         pulseAnimation: false,
-        timeAgoEl: $('.issue_edited_ago'),
+        timeAgoEl: $('.js-issue-edited-ago'),
       };
     },
     watch: {
@@ -49,22 +49,15 @@
       taskStatus() {
         const taskRegexMatches = this.taskStatus.match(/(\d+) of (\d+)/);
         const $issuableHeader = $('.issuable-meta');
-        let $tasks = $('#task_status', $issuableHeader);
-        let $tasksShort = $('#task_status_short', $issuableHeader);
-
-        if (this.taskStatus.indexOf('0 of 0') >= 0 || this.taskStatus.trim() === '') {
-          $tasks.remove();
-          $tasksShort.remove();
-        } else if (!$tasks.length && !$tasksShort.length) {
-          $tasks = $issuableHeader.append('<span id="task_status" class="hidden-xs hidden-sm"></span>')
-            .find('#task_status');
-          $tasksShort = $issuableHeader.append('<span id="task_status_short" class="hidden-md hidden-lg"></span>')
-            .find('#task_status_short');
-        }
+        const $tasks = $('#task_status', $issuableHeader);
+        const $tasksShort = $('#task_status_short', $issuableHeader);
 
         if (taskRegexMatches) {
           $tasks.text(this.taskStatus);
           $tasksShort.text(`${taskRegexMatches[1]}/${taskRegexMatches[2]} task${taskRegexMatches[2] > 1 ? 's' : ''}`);
+        } else {
+          $tasks.text('');
+          $tasksShort.text('');
         }
       },
     },
diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index af11ae4c533..f06e33dee60 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -2,31 +2,41 @@ import Vue from 'vue';
 import issuableApp from './components/app.vue';
 import '../vue_shared/vue_resource_interceptor';
 
-document.addEventListener('DOMContentLoaded', () => {
-  const issuableElement = document.getElementById('js-issuable-app');
-  const issuableTitleElement = issuableElement.querySelector('.title');
-  const issuableDescriptionElement = issuableElement.querySelector('.wiki');
-  const issuableDescriptionTextarea = issuableElement.querySelector('.js-task-list-field');
-  const {
-    canUpdate,
-    endpoint,
-    issuableRef,
-  } = issuableElement.dataset;
+document.addEventListener('DOMContentLoaded', () => new Vue({
+  el: document.getElementById('js-issuable-app'),
+  components: {
+    issuableApp,
+  },
+  data() {
+    const issuableElement = this.$options.el;
+    const issuableTitleElement = issuableElement.querySelector('.title');
+    const issuableDescriptionElement = issuableElement.querySelector('.wiki');
+    const issuableDescriptionTextarea = issuableElement.querySelector('.js-task-list-field');
+    const {
+      canUpdate,
+      endpoint,
+      issuableRef,
+    } = issuableElement.dataset;
 
-  return new Vue({
-    el: issuableElement,
-    components: {
-      issuableApp,
-    },
-    render: createElement => createElement('issuable-app', {
+    return {
+      canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
+      endpoint,
+      issuableRef,
+      initialTitle: issuableTitleElement.innerHTML,
+      initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
+      initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
+    };
+  },
+  render(createElement) {
+    return createElement('issuable-app', {
       props: {
-        canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
-        endpoint,
-        issuableRef,
-        initialTitle: issuableTitleElement.innerHTML,
-        initialDescriptionHtml: issuableDescriptionElement ? issuableDescriptionElement.innerHTML : '',
-        initialDescriptionText: issuableDescriptionTextarea ? issuableDescriptionTextarea.textContent : '',
+        canUpdate: this.canUpdate,
+        endpoint: this.endpoint,
+        issuableRef: this.issuableRef,
+        initialTitle: this.initialTitle,
+        initialDescriptionHtml: this.initialDescriptionHtml,
+        initialDescriptionText: this.initialDescriptionText,
       },
-    }),
-  });
-});
+    });
+  },
+}));