Added all filters

7 files changed, 140 insertions, 58 deletions

diff --git a/app/assets/javascripts/boards/components/modal/filters.js.es6 b/app/assets/javascripts/boards/components/modal/filters.js.es6
index 206948b70f4..c6c22dd24c9 100644
--- a/app/assets/javascripts/boards/components/modal/filters.js.es6
+++ b/app/assets/javascripts/boards/components/modal/filters.js.es6
@@ -1,15 +1,19 @@
 /* global Vue */
-/* global MilestoneSelect */
 //= require_tree ./filters
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalFilters = Vue.extend({
-    mounted() {
-      new MilestoneSelect();
+    props: {
+      projectId: {
+        type: Number,
+        required: true,
+      },
     },
     components: {
       'user-filter': gl.issueBoards.ModalFilterUser,
+      'milestone-filter': gl.issueBoards.ModalFilterMilestone,
+      'label-filter': gl.issueBoards.ModalLabelFilter,
     },
     template: `
       <div class="modal-filters">
@@ -17,58 +21,17 @@
           dropdown-class-name="dropdown-menu-author"
           toggle-class-name="js-user-search js-author-search"
           toggle-label="Author"
-          field-name="author_id"></user-filter>
+          field-name="author_id"
+          :project-id="projectId"></user-filter>
         <user-filter
           dropdown-class-name="dropdown-menu-author"
           toggle-class-name="js-assignee-search"
           toggle-label="Assignee"
           field-name="assignee_id"
-          :null-user="true"></user-filter>
-        <div class="dropdown">
-          <button
-            class="dropdown-menu-toggle js-milestone-select"
-            type="button"
-            data-toggle="dropdown"
-            data-show-any="true"
-            data-show-upcoming="true"
-            data-field-name="milestone_title"
-            :data-project-id="12"
-            :data-milestones="'/root/test/milestones.json'">
-            Milestone
-            <i class="fa fa-chevron-down"></i>
-          </button>
-          <div class="dropdown-menu dropdown-select dropdown-menu-selectable dropdown-menu-milestone">
-            <div class="dropdown-title">
-              <span>Filter by milestone</span>
-              <button
-                class="dropdown-title-button dropdown-menu-close"
-                aria-label="Close"
-                type="button">
-                <i class="fa fa-times dropdown-menu-close-icon"></i>
-              </button>
-            </div>
-            <div class="dropdown-input">
-              <input
-                type="search"
-                class="dropdown-input-field"
-                placeholder="Search milestones"
-                autocomplete="off" />
-              <i class="fa fa-search dropdown-input-search"></i>
-              <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
-            </div>
-            <div class="dropdown-content"></div>
-            <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
-          </div>
-        </div>
-        <div class="dropdown">
-          <button
-            class="dropdown-menu-toggle js-label-select js-multiselect"
-            type="button"
-            data-toggle="dropdown">
-            Label
-            <i class="fa fa-chevron-down"></i>
-          </button>
-        </div>
+          :null-user="true"
+          :project-id="projectId"></user-filter>
+        <milestone-filter></milestone-filter>
+        <label-filter></label-filter>
       </div>
     `,
   });
diff --git a/app/assets/javascripts/boards/components/modal/filters/label.js.es6 b/app/assets/javascripts/boards/components/modal/filters/label.js.es6
new file mode 100644
index 00000000000..cfea0780983
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/filters/label.js.es6
@@ -0,0 +1,48 @@
+/* global Vue */
+/* global LabelSelect */
+(() => {
+  gl.issueBoards.ModalLabelFilter = Vue.extend({
+    mounted() {
+      new LabelsSelect(this.$refs.dropdown);
+    },
+    template: `
+      <div class="dropdown">
+        <button
+          class="dropdown-menu-toggle js-label-select js-multiselect js-extra-options"
+          type="button"
+          data-toggle="dropdown"
+          data-labels="/root/test/labels.json"
+          data-show-any="true"
+          data-show-no="true"
+          ref="dropdown">
+          <span class="dropdown-toggle-text">
+            Label
+          </span>
+          <i class="fa fa-chevron-down"></i>
+        </button>
+        <div class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable">
+          <div class="dropdown-title">
+            Filter by label
+            <button
+              class="dropdown-title-button dropdown-menu-close"
+              aria-label="Close"
+              type="button">
+              <i class="fa fa-times dropdown-menu-close-icon"></i>
+            </button>
+          </div>
+          <div class="dropdown-input">
+            <input
+              type="search"
+              class="dropdown-input-field"
+              placeholder="Search"
+              autocomplete="off" />
+            <i class="fa fa-search dropdown-input-search"></i>
+            <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
+          </div>
+          <div class="dropdown-content"></div>
+          <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/filters/milestone.js.es6 b/app/assets/javascripts/boards/components/modal/filters/milestone.js.es6
new file mode 100644
index 00000000000..14c95cb2dae
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/filters/milestone.js.es6
@@ -0,0 +1,49 @@
+/* global Vue */
+/* global MilestoneSelect */
+(() => {
+  gl.issueBoards.ModalFilterMilestone = Vue.extend({
+    mounted() {
+      new MilestoneSelect(null, this.$refs.dropdown);
+    },
+    template: `
+      <div class="dropdown">
+        <button
+          class="dropdown-menu-toggle js-milestone-select"
+          type="button"
+          data-toggle="dropdown"
+          data-show-any="true"
+          data-show-upcoming="true"
+          data-field-name="milestone_title"
+          :data-milestones="'/root/test/milestones.json'"
+          ref="dropdown">
+          <span class="dropdown-toggle-text">
+            Milestone
+          </span>
+          <i class="fa fa-chevron-down"></i>
+        </button>
+        <div class="dropdown-menu dropdown-select dropdown-menu-selectable dropdown-menu-milestone">
+          <div class="dropdown-title">
+            <span>Filter by milestone</span>
+            <button
+              class="dropdown-title-button dropdown-menu-close"
+              aria-label="Close"
+              type="button">
+              <i class="fa fa-times dropdown-menu-close-icon"></i>
+            </button>
+          </div>
+          <div class="dropdown-input">
+            <input
+              type="search"
+              class="dropdown-input-field"
+              placeholder="Search milestones"
+              autocomplete="off" />
+            <i class="fa fa-search dropdown-input-search"></i>
+            <i role="button" class="fa fa-times dropdown-input-clear js-dropdown-input-clear"></i>
+          </div>
+          <div class="dropdown-content"></div>
+          <div class="dropdown-loading"><i class="fa fa-spinner fa-spin"></i></div>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/filters/user.js.es6 b/app/assets/javascripts/boards/components/modal/filters/user.js.es6
index b440abf84e9..d45649af4cd 100644
--- a/app/assets/javascripts/boards/components/modal/filters/user.js.es6
+++ b/app/assets/javascripts/boards/components/modal/filters/user.js.es6
@@ -25,9 +25,13 @@
         required: false,
         default: false,
       },
+      projectId: {
+        type: Number,
+        required: true,
+      },
     },
     mounted() {
-      new UsersSelect();
+      new UsersSelect(null, this.$refs.dropdown);
     },
     computed: {
       currentUsername() {
@@ -51,9 +55,12 @@
           :data-any-user="'Any ' + toggleLabel"
           :data-null-user="nullUser"
           :data-field-name="fieldName"
-          :data-project-id="12"
-          :data-first-user="currentUsername">
-          {{ toggleLabel }}
+          :data-project-id="projectId"
+          :data-first-user="currentUsername"
+          ref="dropdown">
+          <span class="dropdown-toggle-text">
+            {{ toggleLabel }}
+          </span>
           <i class="fa fa-chevron-down"></i>
         </button>
         <div
diff --git a/app/assets/javascripts/boards/components/modal/header.js.es6 b/app/assets/javascripts/boards/components/modal/header.js.es6
index 87c407f5fec..cd672e0f1b2 100644
--- a/app/assets/javascripts/boards/components/modal/header.js.es6
+++ b/app/assets/javascripts/boards/components/modal/header.js.es6
@@ -6,6 +6,12 @@
 
   gl.issueBoards.ModalHeader = Vue.extend({
     mixins: [gl.issueBoards.ModalMixins],
+    props: {
+      projectId: {
+        type: Number,
+        required: true,
+      },
+    },
     data() {
       return ModalStore.store;
     },
@@ -30,6 +36,7 @@
     },
     components: {
       'modal-tabs': gl.issueBoards.ModalTabs,
+      'modal-filters': gl.issueBoards.ModalFilters,
     },
     template: `
       <div>
@@ -50,7 +57,9 @@
         <div
           class="add-issues-search append-bottom-10"
           v-if="showSearch">
-          <modal-filters></modal-filters>
+          <modal-filters
+            :project-id="projectId">
+          </modal-filters>
           <input
             placeholder="Search issues..."
             class="form-control"
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 5bcbd2668af..49f4c73151e 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -25,6 +25,10 @@
         type: String,
         required: true,
       },
+      projectId: {
+        type: Number,
+        required: true,
+      },
     },
     data() {
       return ModalStore.store;
@@ -52,8 +56,7 @@
       },
       filter: {
         handler() {
-          this.issues = [];
-          this.loadIssues();
+          this.loadIssues(true);
         },
         deep: true,
       }
@@ -119,7 +122,9 @@
         class="add-issues-modal"
         v-if="showAddIssuesModal">
         <div class="add-issues-container">
-          <modal-header></modal-header>
+          <modal-header
+            :project-id="projectId">
+          </modal-header>
           <modal-list
             :issue-link-base="issueLinkBase"
             :root-path="rootPath"
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index 95b0b3f9484..ed42af301cd 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -21,6 +21,7 @@
           author_id: '',
           assignee_id: '',
           milestone_title: '',
+          label_name: [],
         },
       };
     }