Moves list_dropdown and footer components to a .vue file34371-vue-components-tech-debt

4 files changed, 88 insertions, 82 deletions

diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.vue
index 2745ca219ad..e0dac6003f1 100644
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ b/app/assets/javascripts/boards/components/modal/footer.vue
@@ -1,14 +1,14 @@
-import Vue from 'vue';
+<script>
 import Flash from '../../../flash';
 import { __ } from '../../../locale';
-import './lists_dropdown';
+import ListsDropdown from './lists_dropdown.vue';
 import { pluralize } from '../../../lib/utils/text_utility';
 import ModalStore from '../../stores/modal_store';
 import modalMixin from '../../mixins/modal_mixins';
 
-gl.issueBoards.ModalFooter = Vue.extend({
+export default {
   components: {
-    'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
+    ListsDropdown,
   },
   mixins: [modalMixin],
   data() {
@@ -55,28 +55,32 @@ gl.issueBoards.ModalFooter = Vue.extend({
       this.toggleModal(false);
     },
   },
-  template: `
-    <footer
-      class="form-actions add-issues-footer">
-      <div class="float-left">
-        <button
-          class="btn btn-success"
-          type="button"
-          :disabled="submitDisabled"
-          @click="addIssues">
-          {{ submitText }}
-        </button>
-        <span class="inline add-issues-footer-to-list">
-          to list
-        </span>
-        <lists-dropdown></lists-dropdown>
-      </div>
+};
+</script>
+<template>
+  <footer
+    class="form-actions add-issues-footer"
+  >
+    <div class="float-left">
       <button
-        class="btn btn-default float-right"
+        :disabled="submitDisabled"
+        class="btn btn-success"
         type="button"
-        @click="toggleModal(false)">
-        Cancel
+        @click="addIssues"
+      >
+        {{ submitText }}
       </button>
-    </footer>
-  `,
-});
+      <span class="inline add-issues-footer-to-list">
+        to list
+      </span>
+      <lists-dropdown/>
+    </div>
+    <button
+      class="btn btn-default float-right"
+      type="button"
+      @click="toggleModal(false)"
+    >
+      Cancel
+    </button>
+  </footer>
+</template>
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
index c10397eaaba..983061f52ae 100644
--- a/app/assets/javascripts/boards/components/modal/index.js
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -5,7 +5,7 @@ import queryData from '~/boards/utils/query_data';
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import './header';
 import './list';
-import './footer';
+import ModalFooter from './footer.vue';
 import EmptyState from './empty_state.vue';
 import ModalStore from '../../stores/modal_store';
 
@@ -14,7 +14,7 @@ gl.issueBoards.IssuesModal = Vue.extend({
     EmptyState,
     'modal-header': gl.issueBoards.ModalHeader,
     'modal-list': gl.issueBoards.ModalList,
-    'modal-footer': gl.issueBoards.ModalFooter,
+    ModalFooter,
     loadingIcon,
   },
   props: {
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js b/app/assets/javascripts/boards/components/modal/lists_dropdown.js
deleted file mode 100644
index e644de2d4fc..00000000000
--- a/app/assets/javascripts/boards/components/modal/lists_dropdown.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import Vue from 'vue';
-import ModalStore from '../../stores/modal_store';
-
-gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
-  data() {
-    return {
-      modal: ModalStore.store,
-      state: gl.issueBoards.BoardsStore.state,
-    };
-  },
-  computed: {
-    selected() {
-      return this.modal.selectedList || this.state.lists[1];
-    },
-  },
-  destroyed() {
-    this.modal.selectedList = null;
-  },
-  template: `
-    <div class="dropdown inline">
-      <button
-        class="dropdown-menu-toggle"
-        type="button"
-        data-toggle="dropdown"
-        aria-expanded="false">
-        <span
-          class="dropdown-label-box"
-          :style="{ backgroundColor: selected.label.color }">
-        </span>
-        {{ selected.title }}
-        <i class="fa fa-chevron-down"></i>
-      </button>
-      <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
-        <ul>
-          <li
-            v-for="list in state.lists"
-            v-if="list.type == 'label'">
-            <a
-              href="#"
-              role="button"
-              :class="{ 'is-active': list.id == selected.id }"
-              @click.prevent="modal.selectedList = list">
-              <span
-                class="dropdown-label-box"
-                :style="{ backgroundColor: list.label.color }">
-              </span>
-              {{ list.title }}
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  `,
-});
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
new file mode 100644
index 00000000000..6a5a39099bd
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue
@@ -0,0 +1,56 @@
+<script>
+import ModalStore from '../../stores/modal_store';
+
+export default {
+  data() {
+    return {
+      modal: ModalStore.store,
+      state: gl.issueBoards.BoardsStore.state,
+    };
+  },
+  computed: {
+    selected() {
+      return this.modal.selectedList || this.state.lists[1];
+    },
+  },
+  destroyed() {
+    this.modal.selectedList = null;
+  },
+};
+</script>
+<template>
+  <div class="dropdown inline">
+    <button
+      class="dropdown-menu-toggle"
+      type="button"
+      data-toggle="dropdown"
+      aria-expanded="false">
+      <span
+        :style="{ backgroundColor: selected.label.color }"
+        class="dropdown-label-box">
+      </span>
+      {{ selected.title }}
+      <i class="fa fa-chevron-down"></i>
+    </button>
+    <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
+      <ul>
+        <li
+          v-for="(list, i) in state.lists"
+          v-if="list.type == 'label'"
+          :key="i">
+          <a
+            :class="{ 'is-active': list.id == selected.id }"
+            href="#"
+            role="button"
+            @click.prevent="modal.selectedList = list">
+            <span
+              :style="{ backgroundColor: list.label.color }"
+              class="dropdown-label-box">
+            </span>
+            {{ list.title }}
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>