Hardcoded author, assignee & milestone dropdowns

3 files changed, 112 insertions, 5 deletions

diff --git a/app/assets/javascripts/boards/components/modal/filters.js.es6 b/app/assets/javascripts/boards/components/modal/filters.js.es6
index f36d3c9ffe6..3a4d2675acb 100644
--- a/app/assets/javascripts/boards/components/modal/filters.js.es6
+++ b/app/assets/javascripts/boards/components/modal/filters.js.es6
@@ -1,36 +1,129 @@
 /* global Vue */
+/* global UsersSelect */
+/* global MilestoneSelect */
 (() => {
   const ModalStore = gl.issueBoards.ModalStore;
 
   gl.issueBoards.ModalFilters = Vue.extend({
+    computed: {
+      currentUsername() {
+        return gon.current_username;
+      },
+    },
+    mounted() {
+      new UsersSelect();
+      new MilestoneSelect();
+    },
     template: `
       <div class="modal-filters">
         <div class="dropdown">
           <button
             class="dropdown-menu-toggle js-user-search js-author-search"
             type="button"
-            data-toggle="dropdown">
+            data-toggle="dropdown"
+            data-any-user="Any Author"
+            data-current-user="true"
+            data-field-name="author_id"
+            :data-project-id="12"
+            :data-first-user="currentUsername">
             Author
             <i class="fa fa-chevron-down"></i>
           </button>
+          <div class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable dropdown-menu-author">
+            <div class="dropdown-title">
+              <span>Filter by author</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 authors"
+                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-user-search js-assignee-search"
             type="button"
-            data-toggle="dropdown">
+            data-toggle="dropdown"
+            data-any-user="Any Assignee"
+            data-null-user="true"
+            data-current-user="true"
+            data-field-name="assignee_id"
+            :data-project-id="12"
+            :data-first-user="currentUsername">
             Assignee
             <i class="fa fa-chevron-down"></i>
           </button>
+          <div class="dropdown-menu dropdown-select dropdown-menu-user dropdown-menu-selectable dropdown-menu-author">
+            <div class="dropdown-title">
+              <span>Filter by assignee</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 assignee"
+                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-milestone-select"
             type="button"
-            data-toggle="dropdown">
+            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
diff --git a/app/assets/javascripts/boards/components/modal/index.js.es6 b/app/assets/javascripts/boards/components/modal/index.js.es6
index 666f4e16793..5bcbd2668af 100644
--- a/app/assets/javascripts/boards/components/modal/index.js.es6
+++ b/app/assets/javascripts/boards/components/modal/index.js.es6
@@ -50,17 +50,26 @@
           this.issuesCount = false;
         }
       },
+      filter: {
+        handler() {
+          this.issues = [];
+          this.loadIssues();
+        },
+        deep: true,
+      }
     },
     methods: {
       searchOperation: _.debounce(function searchOperationDebounce() {
         this.loadIssues(true);
       }, 500),
       loadIssues(clearIssues = false) {
-        return gl.boardService.getBacklog({
+        const data = Object.assign({}, this.filter, {
           search: this.searchTerm,
           page: this.page,
           per: this.perPage,
-        }).then((res) => {
+        });
+
+        return gl.boardService.getBacklog(data).then((res) => {
           const data = res.json();
 
           if (clearIssues) {
diff --git a/app/assets/javascripts/boards/stores/modal_store.js.es6 b/app/assets/javascripts/boards/stores/modal_store.js.es6
index 73518b42b84..95b0b3f9484 100644
--- a/app/assets/javascripts/boards/stores/modal_store.js.es6
+++ b/app/assets/javascripts/boards/stores/modal_store.js.es6
@@ -17,6 +17,11 @@
         loadingNewPage: false,
         page: 1,
         perPage: 50,
+        filter: {
+          author_id: '',
+          assignee_id: '',
+          milestone_title: '',
+        },
       };
     }