Feature: Add2Board with board creation works well

pinry-spa/src/components/api.js

@@ -27,6 +27,13 @@ const Board = {
     const url = `${API_PREFIX}boards-auto-complete/?submitter__username=${username}`;
     return axios.get(url);
   },
+  addToBoard(boardId, pinIds) {
+    const url = `${API_PREFIX}boards/${boardId}/`;
+    return axios.patch(
+      url,
+      { pins_to_add: pinIds },
+    );
+  },
 };
 
 const Pin = {

pinry-spa/src/components/pin_create/FilterSelect.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="filter-select">
     <b-field label="Select Board"
-             :type="form.board.type"
-             :message="form.board.error">
+             :type="form.name.type"
+             :message="form.name.error">
       <b-input
         type="text"
-        v-model="form.board.value"
+        v-model="form.name.value"
         placeholder="Type to filter or Create one"
         maxlength="128"
       >
@@ -39,7 +39,7 @@
 import API from '../api';
 import ModelForm from '../utils/ModelForm';
 
-const fields = ['board'];
+const fields = ['name'];
 
 function getFilteredOptions(options, filterText) {
   return options.filter(
@@ -83,14 +83,14 @@ export default {
     },
     createNewBoard() {
       const self = this;
-      const promise = API.Board.create(this.form.board.value);
+      const promise = API.Board.create(this.form.name.value);
       promise.then(
         (data) => {
           self.$emit('boardCreated', data);
           const board = getBoardFromResp(data);
           self.createdOptions.unshift(board);
           self.select(board);
-          self.form.board.value = null;
+          self.form.name.value = null;
         },
         (resp) => {
           self.helper.markFieldsAsDanger(resp.data);
@@ -99,16 +99,17 @@ export default {
     },
   },
   watch: {
-    'form.board.value': function (newVal) {
+    // eslint-disable-next-line func-names
+    'form.name.value': function (newVal) {
       let availableOptions;
       if (newVal === '' || newVal === null) {
         availableOptions = this.allOptions;
       } else {
         availableOptions = getFilteredOptions(
-          this.allOptions, this.form.board.value,
+          this.allOptions, this.form.name.value,
         );
       }
-      this.availableOptions = availableOptions;
+      this.availableOptions = this.createdOptions.concat(availableOptions);
     },
     createdOptions() {
       this.availableOptions = this.createdOptions.concat(this.availableOptions);
@@ -116,6 +117,10 @@ export default {
     allOptions() {
       this.availableOptions = this.allOptions;
     },
+    selectedOptions() {
+      this.helper.resetAllFields();
+      this.$emit('selected', this.selectedOptions);
+    },
   },
 };
 </script>

pinry-spa/src/components/pin_create/PinCreateModal.vue

@@ -59,7 +59,10 @@
               </b-field>
             </div>
             <div class="column">
-              <FilterSelect :allOptions="boardOptions"></FilterSelect>
+              <FilterSelect
+                :allOptions="boardOptions"
+                v-on:selected="onSelectBoard"
+              ></FilterSelect>
             </div>
           </div>
         </section>
@@ -104,6 +107,7 @@ export default {
       formUpload: {
         imageId: null,
       },
+      boardId: null,
       boardOptions: [],
     };
   },
@@ -128,6 +132,10 @@ export default {
         },
       );
     },
+    onSelectBoard(boardIds) {
+      console.log('boardId', boardIds);
+      this.boardIds = boardIds;
+    },
     onUploadProcessing() {
       this.disableUrlField = true;
     },
@@ -162,6 +170,14 @@ export default {
           bus.bus.$emit(bus.events.refreshPin);
           self.$emit('pinCreated', resp);
           self.$parent.close();
+          if (self.boardIds !== null) {
+            // FIXME(winkidney): Should handle error for add-to board
+            self.boardIds.forEach(
+              (boardId) => {
+                API.Board.addToBoard(boardId, [resp.data.id]);
+              },
+            );
+          }
         },
       );
     },