Merge branch 'issue-board-edit-modal' into edit-board

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

@@ -22,6 +22,7 @@
           Board name
         </label>
         <input
+          ref="name"
           class="form-control"
           type="text"
           id="board-new-name"
@@ -64,7 +65,7 @@
           <board-milestone-select
             :board="board"
             :milestone-path="milestonePath"
-            v-model="board.milestone">
+            v-model="board.milestone_id">
           </board-milestone-select>
         </form-block>
 
@@ -154,6 +155,9 @@ export default Vue.extend({
     if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage !== 'new') {
       this.board = Vue.util.extend({}, this.currentBoard);
     }
+    if (this.$refs.name) {
+      this.$refs.name.focus();
+    }
   },
   computed: {
     buttonText() {

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

@@ -11,17 +11,8 @@
         Edit
       </a>
     </div>
-    <div
-      v-if="editing"
-      class="dropdown open"
-    >
-      <input
-        v-if="fieldName"
-        :name="fieldName"
-      >
     <slot></slot>
-    </div>
-    <div :class="{ invisible: editing }">
+    <div>
       <slot name="currentValue">
         {{ defaultText }}
       </slot>
@@ -30,7 +21,9 @@
 </template>
 
 <script>
-  export default {
+import eventHub from '../eventhub';
+
+export default {
   props: {
     defaultText: {
       type: String,
@@ -57,8 +50,8 @@
   },
   methods: {
     toggleEditing() {
-        this.editing = !this.editing;
+      eventHub.$emit('toggle');
     },
   },
-  };
+};
 </script>
\ No newline at end of file

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

 <template>
-  <div class="dropdown-menu dropdown-menu-wide">
+  <div class="dropdown" :class="{ open: isOpen }">
+    <div
+      class="dropdown-menu dropdown-menu-wide"
+    >
       <div class="dropdown-input">
         <input
+          ref="search"
           class="dropdown-input-field"
           type="search"
           placeholder="Search milestones">
@@ -19,7 +23,7 @@
             @click.prevent.stop="selectMilestone(milestone)">
             <i
               class="fa fa-check"
-            v-if="false"></i>
+              v-if="milestone.id === value"></i>
             {{ milestone.title }}
           </a>
         </li>
@@ -37,12 +41,13 @@
             @click.prevent.stop="selectMilestone(milestone)">
             <i
               class="fa fa-check"
-            v-if="false"></i>
+              v-if="milestone.id === value"></i>
             {{ milestone.title }}
           </a>
         </li>
       </ul>
     </div>
+  </div>
 </template>
 
 <script>
@@ -50,6 +55,7 @@
 
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import extraMilestones from '../mixins/extra_milestones';
+import eventHub from '../eventhub';
 
 export default {
   props: {
@@ -62,7 +68,7 @@ export default {
       required: true,
     },
     value: {
-      type: String,
+      type: Number,
       required: false,
     },
   },
@@ -71,6 +77,7 @@ export default {
   },
   data() {
     return {
+      isOpen: false,
       loading: true,
       milestones: [],
       extraMilestones,
@@ -78,11 +85,32 @@ export default {
   },
   mounted() {
     BoardService.loadMilestones.call(this).then(() => this.loading = false);
+    eventHub.$on('open', this.open);
+    eventHub.$on('close', this.close);
+    eventHub.$on('toggle', this.toggle);
+    this.$nextTick(() => {
+      this.$refs.search.focus();
+    });
+  },
+  beforeDestroy() {
+    eventHub.$off('open', this.open);
+    eventHub.$off('close', this.close);
+    eventHub.$off('toggle', this.toggle);
   },
   methods: {
     selectMilestone(milestone) {
-      this.board.milestone_id = milestone.id;
-      this.$emit('input', milestone);
+      this.board.milestone = milestone;
+      this.$emit('input', milestone.id);
+      this.close();
+    },
+    open() {
+      this.isOpen = true;
+    },
+    close() {
+      this.isOpen = false;
+    },
+    toggle() {
+      this.isOpen = !this.isOpen;
     },
   },
 };