add assignee selector

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

+<template>
+  <div class="block assignee">
+    <div class="title append-bottom-10">
+      Assignee
+      <a
+        v-if="canEdit"
+        class="js-sidebar-dropdown-toggle edit-link pull-right"
+        href="#"
+      >
+        Edit
+      </a>
+    </div>
+    <div class="value">
+      <div
+        v-if="board.assignee.name"
+        class="media"
+      >
+        <div class="align-center">
+          <user-avatar-image
+            :img-src="board.assignee.avatar_url"
+            :size="40"
+          />
+        </div>
+        <div class="media-body">
+          <div class="bold author">
+            {{ board.assignee.name }}
+          </div>
+
+          <div class="username">
+            @{{ board.assignee.username }}
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        Any assignee
+      </div>
+    </div>
+
+    <div class="selectbox" style="display: none">
+
+      <input type="hidden" name="assignee_id" v-model="board.assignee_id">
+
+      <div class="dropdown">
+        <button
+          class="dropdown-menu-toggle wide js-user-search js-author-search js-save-user-data js-board-config-modal"
+          data-field-name="assignee_id"
+          data-current-user="true"
+          data-dropdown-title="Select assignee"
+          :data-group-id="groupId"
+          :data-project-id="projectId"
+          :data-selected="1"
+          data-toggle="dropdown"
+          aria-expanded="false"
+          type="button"
+        >
+          <span class="dropdown-toggle-text">
+            Select assignee
+          </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-user dropdown-menu-selectable dropdown-menu-author">
+          <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>
+import UsersSelect from '~/users_select';
+import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+
+export default {
+  props: {
+    board: {
+      type: Object,
+      required: true,
+    },
+    canEdit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    groupId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    projectId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  components: {
+    UserAvatarImage,
+  },
+  mounted() {
+    new UsersSelect();
+  },
+};
+</script>

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

@@ -81,13 +81,12 @@
           </form-block>
 
           <form-block>
-            <div>Author</div>
-            <input v-model="board.author_id" />
-          </form-block>
-
-          <form-block>
-            <div>Assignee</div>
-            <input v-model="board.assignee_id" />
+            <assignee-select
+              :board="board"
+              :canEdit="canAdminBoard"
+              :project-id="projectId"
+              :group-id="groupId"
+            />
           </form-block>
 
           <form-block
@@ -123,6 +122,7 @@ import FormBlock from './form_block.vue';
 import BoardMilestoneSelect from './milestone_select.vue';
 import BoardWeightSelect from './weight_select.vue';
 import BoardLabelsSelect from './labels_select.vue';
+import AssigneeSelect from './assignee_select.vue';
 
 window.gl = window.gl || {};
 window.gl.issueBoards = window.gl.issueBoards || {};
@@ -148,6 +148,16 @@ export default Vue.extend({
       required: false,
       default: false,
     },
+    projectId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    groupId: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -161,11 +171,12 @@ export default Vue.extend({
     };
   },
   components: {
-    BoardMilestoneSelect,
+    AssigneeSelect,
     BoardLabelsSelect,
+    BoardMilestoneSelect,
     BoardWeightSelect,
-    PopupDialog,
     FormBlock,
+    PopupDialog,
   },
   mounted() {
     if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage !== 'new') {

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

 <template>
-    <div class="block labels">
+  <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>

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

 <template>
   <div class="dropdown" :class="{ open: isOpen }">
-    <div class="media">
-      <label class="label-light media-body">{{ title }}</label>
+    <div class="title append-bottom-10">
+      {{ title }}
       <a
         v-if="canEdit"
-        class="edit-link"
+        class="edit-link pull-right"
         href="#"
         @click.prevent="toggle"
       >
@@ -20,12 +20,12 @@
         <li>
           <a
             href="#"
-            @click.prevent.stop="selectWeight(0)"
+            @click.prevent.stop="selectWeight(null)"
           >
             <i
               class="fa fa-check"
-              v-if="0 === value"></i>
-            No weight
+              v-if="!value"></i>
+            Any weight
           </a>
         </li>
         <li

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

@@ -28,6 +28,7 @@ gl.issueBoards.BoardsStore = {
     milestone_id: undefined,
     milestone: {},
     author_id: '',
+    assignee: {},
     assignee_id: '',
     weight: null,
   },
@@ -60,6 +61,7 @@ gl.issueBoards.BoardsStore = {
     this.boardConfig.labels = board.labels || [];
     this.boardConfig.author_id = board.author_id;
     this.boardConfig.assignee_id = board.assignee_id;
+    this.boardConfig.assignee = board.assignee;
   },
   addList (listObj, defaultAvatar) {
     const list = new List(listObj, defaultAvatar);

app/assets/javascripts/users_select.js

@@ -442,8 +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 ($el.closest('.js-board-config-modal').length) {
+            gl.issueBoards.BoardsStore.boardConfig.assignee = user;
           } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
             return Issuable.filterResults($dropdown.closest('form'));
           } else if ($dropdown.hasClass('js-filter-submit')) {

app/views/shared/boards/_switcher.html.haml

@@ -37,6 +37,8 @@
 
     %board-form{ ":milestone-path" => "milestonePath",
       "labels-path" => labels_filter_path,
+      "project-id" => @project&.id,
+      "group-id" => @group&.id,
       ":can-admin-board" => can?(current_user, :admin_board, parent),
       ":scoped-issue-board-feature-enabled" => parent.feature_available?(:scoped_issue_board),
       "v-if" => "currentPage" }