From 6cc78423a8f5d1d5274054f707f5f129d5a4902e Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Fri, 6 Dec 2019 12:55:52 +0800
Subject: [PATCH] Feature: Add board-creation on pin-creation

---
 .../src/components/pin_create/FilterSelect.vue     | 38 ++++++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/pinry-spa/src/components/pin_create/FilterSelect.vue b/pinry-spa/src/components/pin_create/FilterSelect.vue
index 0060a72..2b25415 100644
--- a/pinry-spa/src/components/pin_create/FilterSelect.vue
+++ b/pinry-spa/src/components/pin_create/FilterSelect.vue
@@ -13,6 +13,7 @@
     </b-field>
     <b-field>
       <button
+        @click="createNewBoard"
         class="button is-primary">
         Create New Board
       </button>
@@ -35,7 +36,7 @@
 </template>
 
 <script>
-// import API from '../api';
+import API from '../api';
 import ModelForm from '../utils/ModelForm';
 
 const fields = ['board'];
@@ -52,6 +53,10 @@ function getFilteredOptions(options, filterText) {
   );
 }
 
+function getBoardFromResp(boardObject) {
+  return { name: boardObject.name, value: boardObject.id };
+}
+
 export default {
   name: 'FilterSelect',
   props: {
@@ -69,17 +74,44 @@ export default {
       selectedOptions: [],
       helper: model,
       availableOptions: [],
+      createdOptions: [],
     };
   },
+  methods: {
+    select(board) {
+      this.selectedOptions = [board.value];
+    },
+    createNewBoard() {
+      const self = this;
+      const promise = API.Board.create(this.form.board.value);
+      promise.then(
+        (data) => {
+          self.$emit('boardCreated', data);
+          const board = getBoardFromResp(data);
+          self.createdOptions.unshift(board);
+          self.select(board);
+          self.form.board.value = null;
+        },
+        (resp) => {
+          self.helper.markFieldsAsDanger(resp.data);
+        },
+      );
+    },
+  },
   watch: {
     'form.board.value': function (newVal) {
+      let availableOptions;
       if (newVal === '' || newVal === null) {
-        this.availableOptions = this.allOptions;
+        availableOptions = this.allOptions;
       } else {
-        this.availableOptions = getFilteredOptions(
+        availableOptions = getFilteredOptions(
           this.allOptions, this.form.board.value,
         );
       }
+      this.availableOptions = availableOptions;
+    },
+    createdOptions() {
+      this.availableOptions = this.createdOptions.concat(this.availableOptions);
     },
     allOptions() {
       this.availableOptions = this.allOptions;