fix vue component property order

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

@@ -23,7 +23,7 @@
         </div>
         <div class="media-body">
           <div class="bold author">
-            {{ selected.name }}
+            {{ selectedName }}
           </div>
 
           <div class="username">
@@ -38,18 +38,17 @@
 
     <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"
+          ref="dropdown"
           :data-field-name="fieldName"
           data-current-user="true"
           data-dropdown-title="Select assignee"
           data-any-user="Any assignee"
           :data-group-id="groupId"
           :data-project-id="projectId"
-          :data-selected="selected.id"
+          :data-selected="selectedId"
           data-toggle="dropdown"
           aria-expanded="false"
           type="button"
@@ -115,16 +114,37 @@ export default {
       default: () => ({}),
     }
   },
+  data() {
+    return {
+      selectedId: this.board.assignee_id,
+    }
+  },
   components: {
     UserAvatarImage,
   },
   computed: {
     hasValue() {
-      return Object.keys(this.selected).length > 0 && this.selected.id;
+      return this.board.assignee_id;
+    },
+    selectedName() {
+      return this.board.assignee ? this.board.assignee.name : '';
     },
   },
+  watch: {
+    board: {
+      handler() {
+        this.selectedId = this.board.assignee_id;
+        this.$nextTick(() => {
+          new UsersSelect();
+        });
+      },
+      deep: true,
+    }
+  },
   mounted() {
-    new UsersSelect();
+    this.$nextTick(() => {
+      new UsersSelect();
+    });
   },
 };
 </script>

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

@@ -74,9 +74,9 @@
             <board-labels-select
               :board="board"
               title="Labels"
-              defaultText="Any label"
-              :canEdit="canAdminBoard"
-              :labelsPath="labelsPath"
+              default-text="Any label"
+              :can-edit="canAdminBoard"
+              :labels-path="labelsPath"
             />
           </form-block>
 
@@ -84,6 +84,7 @@
             <assignee-select
               :board="board"
               field-name="assignee_id"
+              v-model="board.assignee_id"
               :selected="board.assignee"
               :can-edit="canAdminBoard"
               :project-id="projectId"
@@ -99,6 +100,7 @@
           >
             <board-weight-select
               :board="board"
+              :weights="weightsArray"
               v-model="board.weight"
               title="Weight"
               defaultText="Any weight"
@@ -160,6 +162,10 @@ export default Vue.extend({
       required: false,
       default: '',
     },
+    weights: {
+      type: String,
+      required: false,
+    },
   },
   data() {
     return {
@@ -180,25 +186,6 @@ export default Vue.extend({
     FormBlock,
     PopupDialog,
   },
-  mounted() {
-    if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage !== 'new') {
-      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();
-    }
-  },
   computed: {
     buttonText() {
       if (this.currentPage === 'new') {
@@ -247,6 +234,9 @@ export default Vue.extend({
     readonly() {
       return !this.canAdminBoard;
     },
+    weightsArray() {
+      return JSON.parse(this.weights);
+    }
   },
   methods: {
     refreshPage() {
@@ -280,5 +270,25 @@ export default Vue.extend({
       Store.state.currentPage = '';
     },
   },
+  mounted() {
+    if (this.currentBoard && Object.keys(this.currentBoard).length && this.currentPage !== 'new') {
+      Store.updateBoardConfig(this.currentBoard);
+    } else {
+      Store.updateBoardConfig({
+        name: '',
+        id: false,
+        label_ids: [],
+        assignee: {},
+      });
+    }
+
+    if (!this.board.labels) {
+      this.board.labels = [];
+    }
+
+    if (this.$refs.name) {
+      this.$refs.name.focus();
+    }
+  },
 });
 </script>

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

@@ -8,8 +8,6 @@
 import eventHub from '../eventhub';
 
 export default {
-  props: {
-  },
   data() {
     return {
       editing: false,

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

@@ -99,17 +99,14 @@ export default {
       default: false,
     },
   },
-  components: {
-    loadingIcon,
-  },
   data() {
     return {
       isOpen: false,
       loading: true,
     };
   },
-  mounted() {
-    new LabelsSelect();
+  components: {
+    loadingIcon,
   },
   methods: {
     open() {
@@ -122,5 +119,8 @@ export default {
       this.isOpen = !this.isOpen;
     },
   },
+  mounted() {
+    new LabelsSelect();
+  },
 };
 </script>

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

@@ -51,7 +51,7 @@
         </li>
       </ul>
     </div>
-    <div>
+    <div class="value">
       {{ milestoneTitle }}
     </div>
   </div>
@@ -62,7 +62,6 @@
 
 import loadingIcon from '~/vue_shared/components/loading_icon.vue';
 import extraMilestones from '../mixins/extra_milestones';
-import eventHub from '../eventhub';
 
 export default {
   props: {
@@ -92,14 +91,6 @@ export default {
       default: false,
     },
   },
-  components: {
-    loadingIcon,
-  },
-  computed: {
-    milestoneTitle() {
-      return this.board.milestone ? this.board.milestone.title : this.defaultText;
-    },
-  },
   data() {
     return {
       isOpen: false,
@@ -108,24 +99,13 @@ export default {
       extraMilestones,
     };
   },
-  mounted() {
-    this.$http.get(this.milestonePath)
-      .then(resp => resp.json())
-      .then((data) => {
-        this.milestones = data;
-        this.loading = false;
-      })
-      .catch(() => {
-        this.loading = false;
-      });
-    eventHub.$on('open', this.open);
-    eventHub.$on('close', this.close);
-    eventHub.$on('toggle', this.toggle);
+  components: {
+    loadingIcon,
   },
-  beforeDestroy() {
-    eventHub.$off('open', this.open);
-    eventHub.$off('close', this.close);
-    eventHub.$off('toggle', this.toggle);
+  computed: {
+    milestoneTitle() {
+      return this.board.milestone ? this.board.milestone.title : this.defaultText;
+    },
   },
   methods: {
     selectMilestone(milestone) {
@@ -143,5 +123,16 @@ export default {
       this.isOpen = !this.isOpen;
     },
   },
+  mounted() {
+    this.$http.get(this.milestonePath)
+      .then(resp => resp.json())
+      .then((data) => {
+        this.milestones = data;
+        this.loading = false;
+      })
+      .catch(() => {
+        this.loading = false;
+      });
+  },
 };
 </script>

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

@@ -43,7 +43,7 @@
         </li>
       </ul>
     </div>
-    <div>
+    <div class="value">
       {{ weight }}
     </div>
   </div>
@@ -78,6 +78,15 @@ export default {
       required: false,
       default: false,
     },
+    weights: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isOpen: false,
+    };
   },
   components: {
     loadingIcon,
@@ -90,13 +99,6 @@ export default {
       return this.board.weight || 'Any weight';
     },
   },
-  data() {
-    return {
-      isOpen: false,
-      // TODO: use Issue.weight_options from backend
-      weights: [1, 2, 3, 4, 5, 6, 7, 8, 9],
-    };
-  },
   methods: {
     selectWeight(weight) {
       this.$set(this.board, 'weight', weight);

app/assets/javascripts/users_select.js

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