start adding labels select

app/assets/javascripts/boards/components/board_form.vue

@@ -13,6 +13,7 @@
     </p>
     <form
       v-else
+      class="js-board-config-modal"
     >
       <div
         v-if="!readonly"
@@ -69,27 +70,14 @@
           />
         </form-block>
 
-        <form-block
-          title="Labels"
-          defaultText="Any label"
-          :canEdit="canAdminBoard"
-        >
-        </form-block>
-
-        <form-block
-          title="Assignee"
-          defaultText="Any assignee"
-          :fieldName="'board_filter[assignee]'"
-          :canEdit="canAdminBoard"
-        >
-        </form-block>
-
-        <form-block
-          title="Author"
-          defaultText="Any author"
-          :fieldName="'board_filter[author]'"
-          :canEdit="canAdminBoard"
-        >
+        <form-block>
+          <board-labels-select
+            :board="board"
+            title="Labels"
+            defaultText="Any label"
+            :canEdit="canAdminBoard"
+            :labelsPath="labelsPath"
+          />
         </form-block>
 
         <form-block
@@ -123,6 +111,7 @@ import PopupDialog from '~/vue_shared/components/popup_dialog.vue';
 import FormBlock from './form_block.vue';
 import BoardMilestoneSelect from './milestone_select.vue';
 import BoardWeightSelect from './weight_select.vue';
+import BoardLabelsSelect from './labels_select.vue';
 
 window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
@@ -135,6 +124,11 @@ export default Vue.extend({
       type: String,
       required: true,
     },
+    labelsPath: {
+      type: String,
+      required: false,
+      default: '/root/my-rails/labels.json',
+    },
     canAdminBoard: {
       type: Boolean,
       required: true,
@@ -142,10 +136,7 @@ export default Vue.extend({
   },
   data() {
     return {
-      board: {
-        id: false,
-        name: '',
-      },
+      board: Store.boardConfig,
       expanded: false,
       issue: {},
       currentBoard: Store.state.currentBoard,
@@ -156,14 +147,26 @@ export default Vue.extend({
   },
   components: {
     BoardMilestoneSelect,
+    BoardLabelsSelect,
     BoardWeightSelect,
     PopupDialog,
     FormBlock,
   },
   mounted() {
     if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage !== 'new') {
-      this.board = Vue.util.extend({}, this.currentBoard);
+      Store.updateBoardConfig(this.currentBoard);
+    } else {
+      Store.updateBoardConfig({
+        name: '',
+        id: false,
+        label_ids: [],
+      });
     }
+
+    if (!this.board.labels) {
+      this.board.labels = [];
+    }
+
     if (this.$refs.name) {
       this.$refs.name.focus();
     }

app/assets/javascripts/boards/components/board_new_issue.js

@@ -42,6 +42,7 @@ export default {
 
       this.error = false;
 
+      // TODO: add board labels
       const labels = this.list.label ? [this.list.label] : [];
       const issue = new ListIssue({
         title: this.title,

app/assets/javascripts/boards/components/labels_select.vue

+<template>
+    <div class="block labels">
+    <div class="title append-bottom-10">
+      Labels <i aria-hidden="true" class="fa fa-spinner fa-spin block-loading" data-hidden="true" style="display: none;"></i> <a class="edit-link pull-right" href="#">Edit</a>
+    </div>
+    <div class="value issuable-show-labels">
+      <span v-if="board.labels.length === 0" class="no-value">
+        Any label
+      </span>
+      <a
+        href="#"
+        v-for="label in board.labels"
+        :key="label.id"
+      >
+        <span
+          class="label color-label has-tooltip"
+          :style="`background-color: ${label.color}; color: ${label.textColor};`"
+          title=""
+        >
+          {{ label.title }}
+        </span>
+      </a>
+    </div>
+    <div class="selectbox" style="display: none">
+
+      <div class="dropdown">
+        <button
+          class="dropdown-menu-toggle wide js-label-select js-multiselect js-board-config-modal"
+          data-field-name="issue[label_names][]"
+          v-bind:data-labels="labelsPath"
+          data-toggle="dropdown"
+          type="button"
+        >
+          <span class="dropdown-toggle-text">
+            Label
+          </span> <i aria-hidden="true" class="fa fa-chevron-down" data-hidden="true"></i>
+        </button>
+        <div class="dropdown-menu dropdown-select dropdown-menu-paging dropdown-menu-labels dropdown-menu-selectable">
+          <div class="dropdown-input">
+            <input
+              autocomplete="off"
+              class="dropdown-input-field" id=""
+              placeholder="Search"
+              type="search"
+              value=""
+            >
+            <i aria-hidden="true" class="fa fa-search dropdown-input-search" data-hidden="true"></i>
+            <i aria-hidden="true" class="fa fa-times dropdown-input-clear js-dropdown-input-clear" data-hidden="true" role="button"></i>
+          </div>
+          <div class="dropdown-content"></div>
+          <div class="dropdown-loading">
+            <i aria-hidden="true" class="fa fa-spinner fa-spin" data-hidden="true"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/* global LabelsSelect */
+
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+import eventHub from '../eventhub';
+
+export default {
+  props: {
+    board: {
+      type: Object,
+      required: true,
+    },
+    labelsPath: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: Array,
+      required: false,
+    },
+    defaultText: {
+      type: String,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    canEdit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  components: {
+    loadingIcon,
+  },
+  data() {
+    return {
+      isOpen: false,
+      loading: true,
+    };
+  },
+  mounted() {
+    new LabelsSelect();
+  },
+  methods: {
+    open() {
+      this.isOpen = true;
+    },
+    close() {
+      this.isOpen = false;
+    },
+    toggle() {
+      this.isOpen = !this.isOpen;
+    },
+  },
+};
+</script>

app/assets/javascripts/boards/stores/boards_store.js

@@ -19,7 +19,12 @@ gl.issueBoards.BoardsStore = {
     reload: false,
   },
   detail: {
-    issue: {}
+    issue: {},
+  },
+  boardConfig: {
+    id: false,
+    name: '',
+    labels: [],
   },
   moving: {
     issue: {},
@@ -28,7 +33,9 @@ gl.issueBoards.BoardsStore = {
   create () {
     this.state.lists = [];
     this.filter.path = getUrlParamsArray().join('&');
-    this.detail = { issue: {} };
+    this.detail = {
+      issue: {},
+    };
   },
   createNewListDropdownData() {
     this.state.currentBoard = {};
@@ -39,6 +46,19 @@ gl.issueBoards.BoardsStore = {
     this.state.reload = false;
     this.state.currentPage = page;
   },
+  updateBoardConfig({
+    name,
+    id,
+    milestone,
+    milestone_id,
+    labels = [],
+  }) {
+    this.boardConfig.name = name;
+    this.boardConfig.milestone = milestone;
+    this.boardConfig.milestone_id = milestone_id;
+    this.boardConfig.id = id;
+    this.boardConfig.labels = labels;
+  },
   addList (listObj, defaultAvatar) {
     const list = new List(listObj, defaultAvatar);
     this.state.lists.push(list);

app/assets/javascripts/labels_select.js

@@ -390,6 +390,23 @@ import DropdownUtils from './filtered_search/dropdown_utils';
                 .then(fadeOutLoader)
                 .catch(fadeOutLoader);
             }
+            else if ($dropdown.hasClass('js-board-config-modal')) {
+              if ($el.hasClass('is-active')) {
+                gl.issueBoards.BoardsStore.boardConfig.labels.push(new ListLabel({
+                  id: label.id,
+                  title: label.title,
+                  color: label.color[0],
+                  textColor: '#fff'
+                }));
+              }
+              else {
+                let labels = gl.issueBoards.BoardsStore.boardConfig.labels;
+                labels = labels.filter(function (selectedLabel) {
+                  return selectedLabel.id !== label.id;
+                });
+                gl.issueBoards.BoardsStore.boardConfig.labels = labels;
+              }
+            }
             else {
               if ($dropdown.hasClass('js-multiselect')) {
 

app/assets/javascripts/users_select.js

@@ -442,6 +442,8 @@ function UsersSelect(currentUser, els) {
           }
           if ($el.closest('.add-issues-modal').length) {
             gl.issueBoards.ModalStore.store.filter[$dropdown.data('field-name')] = user.id;
+          } else if ($el.closest('js-board-config-modal').length) {
+            gl.issueBoards.BoardsStore.boardConfig.authorId = user.id;
           } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
             return Issuable.filterResults($dropdown.closest('form'));
           } else if ($dropdown.hasClass('js-filter-submit')) {