From f1a70ce797c82775066e357c47765f67b02440a4 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Fri, 22 Jun 2018 15:14:20 +0100
Subject: Moves list_dropdown and footer components to a .vue file

---
 .../javascripts/boards/components/modal/footer.js  | 82 ---------------------
 .../javascripts/boards/components/modal/footer.vue | 86 ++++++++++++++++++++++
 .../javascripts/boards/components/modal/index.js   |  4 +-
 .../boards/components/modal/lists_dropdown.js      | 54 --------------
 .../boards/components/modal/lists_dropdown.vue     | 56 ++++++++++++++
 5 files changed, 144 insertions(+), 138 deletions(-)
 delete mode 100644 app/assets/javascripts/boards/components/modal/footer.js
 create mode 100644 app/assets/javascripts/boards/components/modal/footer.vue
 delete mode 100644 app/assets/javascripts/boards/components/modal/lists_dropdown.js
 create mode 100644 app/assets/javascripts/boards/components/modal/lists_dropdown.vue

diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.js
deleted file mode 100644
index 2745ca219ad..00000000000
--- a/app/assets/javascripts/boards/components/modal/footer.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import Vue from 'vue';
-import Flash from '../../../flash';
-import { __ } from '../../../locale';
-import './lists_dropdown';
-import { pluralize } from '../../../lib/utils/text_utility';
-import ModalStore from '../../stores/modal_store';
-import modalMixin from '../../mixins/modal_mixins';
-
-gl.issueBoards.ModalFooter = Vue.extend({
-  components: {
-    'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
-  },
-  mixins: [modalMixin],
-  data() {
-    return {
-      modal: ModalStore.store,
-      state: gl.issueBoards.BoardsStore.state,
-    };
-  },
-  computed: {
-    submitDisabled() {
-      return !ModalStore.selectedCount();
-    },
-    submitText() {
-      const count = ModalStore.selectedCount();
-
-      return `Add ${count > 0 ? count : ''} ${pluralize('issue', count)}`;
-    },
-  },
-  methods: {
-    addIssues() {
-      const firstListIndex = 1;
-      const list = this.modal.selectedList || this.state.lists[firstListIndex];
-      const selectedIssues = ModalStore.getSelectedIssues();
-      const issueIds = selectedIssues.map(issue => issue.id);
-
-      // Post the data to the backend
-      gl.boardService.bulkUpdate(issueIds, {
-        add_label_ids: [list.label.id],
-      }).catch(() => {
-        Flash(__('Failed to update issues, please try again.'));
-
-        selectedIssues.forEach((issue) => {
-          list.removeIssue(issue);
-          list.issuesSize -= 1;
-        });
-      });
-
-      // Add the issues on the frontend
-      selectedIssues.forEach((issue) => {
-        list.addIssue(issue);
-        list.issuesSize += 1;
-      });
-
-      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>
-      <button
-        class="btn btn-default float-right"
-        type="button"
-        @click="toggleModal(false)">
-        Cancel
-      </button>
-    </footer>
-  `,
-});
diff --git a/app/assets/javascripts/boards/components/modal/footer.vue b/app/assets/javascripts/boards/components/modal/footer.vue
new file mode 100644
index 00000000000..e0dac6003f1
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/footer.vue
@@ -0,0 +1,86 @@
+<script>
+import Flash from '../../../flash';
+import { __ } from '../../../locale';
+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';
+
+export default {
+  components: {
+    ListsDropdown,
+  },
+  mixins: [modalMixin],
+  data() {
+    return {
+      modal: ModalStore.store,
+      state: gl.issueBoards.BoardsStore.state,
+    };
+  },
+  computed: {
+    submitDisabled() {
+      return !ModalStore.selectedCount();
+    },
+    submitText() {
+      const count = ModalStore.selectedCount();
+
+      return `Add ${count > 0 ? count : ''} ${pluralize('issue', count)}`;
+    },
+  },
+  methods: {
+    addIssues() {
+      const firstListIndex = 1;
+      const list = this.modal.selectedList || this.state.lists[firstListIndex];
+      const selectedIssues = ModalStore.getSelectedIssues();
+      const issueIds = selectedIssues.map(issue => issue.id);
+
+      // Post the data to the backend
+      gl.boardService.bulkUpdate(issueIds, {
+        add_label_ids: [list.label.id],
+      }).catch(() => {
+        Flash(__('Failed to update issues, please try again.'));
+
+        selectedIssues.forEach((issue) => {
+          list.removeIssue(issue);
+          list.issuesSize -= 1;
+        });
+      });
+
+      // Add the issues on the frontend
+      selectedIssues.forEach((issue) => {
+        list.addIssue(issue);
+        list.issuesSize += 1;
+      });
+
+      this.toggleModal(false);
+    },
+  },
+};
+</script>
+<template>
+  <footer
+    class="form-actions add-issues-footer"
+  >
+    <div class="float-left">
+      <button
+        :disabled="submitDisabled"
+        class="btn btn-success"
+        type="button"
+        @click="addIssues"
+      >
+        {{ submitText }}
+      </button>
+      <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>
-- 
cgit v1.2.1