From a510791bb2fb537fd2fbe4a9f6b94e38fe5a6094 Mon Sep 17 00:00:00 2001
From: Clement Ho <ClemMakesApps@gmail.com>
Date: Fri, 2 Dec 2016 16:43:15 -0600
Subject: [PATCH] Add label and milestone dropdowns

---
 .../filtered_search/dropdown_label.js.es6     | 22 +++++++++++++++++++
 .../filtered_search/dropdown_milestone.js.es6 | 22 +++++++++++++++++++
 .../filtered_search_manager.js.es6            | 14 ++++++++++++
 .../shared/issuable/_search_bar.html.haml     | 11 ++++++++++
 4 files changed, 69 insertions(+)
 create mode 100644 app/assets/javascripts/filtered_search/dropdown_label.js.es6
 create mode 100644 app/assets/javascripts/filtered_search/dropdown_milestone.js.es6

diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6
new file mode 100644
index 00000000000..9225dca13b0
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6
@@ -0,0 +1,22 @@
+/* eslint-disable no-param-reassign */
+/*= require filtered_search/filtered_search_dropdown */
+
+((global) => {
+  class DropdownLabel extends gl.FilteredSearchDropdown {
+    constructor(dropdown, input) {
+      super(dropdown, input);
+      this.listId = 'js-dropdown-label';
+    }
+
+    itemClicked(e) {
+      console.log('label clicked');
+    }
+
+    renderContent() {
+      super.renderContent();
+      droplab.setData(this.hookId, 'labels.json');
+    }
+  }
+
+  global.DropdownLabel = DropdownLabel;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6
new file mode 100644
index 00000000000..ab97d709886
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6
@@ -0,0 +1,22 @@
+/* eslint-disable no-param-reassign */
+/*= require filtered_search/filtered_search_dropdown */
+
+((global) => {
+  class DropdownMilestone extends gl.FilteredSearchDropdown {
+    constructor(dropdown, input) {
+      super(dropdown, input);
+      this.listId = 'js-dropdown-milestone';
+    }
+
+    itemClicked(e) {
+      console.log('milestone clicked');
+    }
+
+    renderContent() {
+      super.renderContent();
+      droplab.setData(this.hookId, 'milestones.json');
+    }
+  }
+
+  global.DropdownMilestone = DropdownMilestone;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6 b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
index 237f4fc3fff..f06d5a646cf 100644
--- a/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js.es6
@@ -80,6 +80,8 @@
   let dropdownHint;
   let dropdownAuthor;
   let dropdownAssignee;
+  let dropdownMilestone;
+  let dropdownLabel;
 
   class FilteredSearchManager {
     constructor() {
@@ -116,6 +118,18 @@
           }
 
           dropdownAssignee.render();
+        } else if (match.key === 'milestone') {
+          if (!dropdownMilestone) {
+            dropdownMilestone = new gl.DropdownMilestone(document.querySelector('#js-dropdown-milestone'), document.querySelector('.filtered-search'));
+          }
+
+          dropdownMilestone.render();
+        } else if (match.key === 'label') {
+          if (!dropdownLabel) {
+            dropdownLabel = new gl.DropdownLabel(document.querySelector('#js-dropdown-label'), document.querySelector('.filtered-search'));
+          }
+
+          dropdownLabel.render();
         }
 
       } else if (!match && this.currentDropdown !== 'hint') {
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 3801b46a332..cf5b1a52332 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -42,6 +42,17 @@
                     {{name}}
                   %span
                     {{username}}
+          #js-dropdown-milestone.dropdown-menu{ 'data-dropdown' => true }
+            %ul{ 'data-dynamic' => true }
+              %li
+                %button.btn.btn-link
+                  {{title}}
+          #js-dropdown-label.dropdown-menu{ 'data-dropdown' => true }
+            %ul{ 'data-dynamic' => true }
+              %li
+                %button.btn.btn-link
+                  %span.dropdown-label-box{ 'style': 'background: {{color}}'}
+                    {{title}}
         .pull-right
           - if boards_page
             #js-boards-seach.issue-boards-search