Feature: Add2Board works well

pinry-spa/src/components/editors/PinEditorUI.vue

@@ -8,7 +8,7 @@
             custom-size="mdi-24px">
          </b-icon>
       </span>
-      <span class="icon-container">
+      <span class="icon-container" @click="addToBoar">
           <b-icon
             type="is-light"
             icon="plus-box"
@@ -35,6 +35,7 @@
 
 <script>
 import API from '../api';
+import modals from '../modals';
 
 export default {
   name: 'Editor',
@@ -68,6 +69,9 @@ export default {
     },
   },
   methods: {
+    addToBoar() {
+      modals.openAdd2Board(this, this.pin, this.currentUsername);
+    },
     removeFromBoard() {
       this.$buefy.dialog.confirm({
         message: 'Remove Pin from Board?',

pinry-spa/src/components/modals.js

@@ -2,6 +2,7 @@ import PinCreateModal from './pin_edit/PinCreateModal.vue';
 import LoginForm from './LoginForm.vue';
 import SignUpForm from './SignUpForm.vue';
 import BoardEdit from './BoardEdit.vue';
+import Add2Board from './pin_edit/Add2Board.vue';
 
 
 function openPinCreate(vm, onCreate, props = null) {
@@ -18,6 +19,17 @@ function openPinCreate(vm, onCreate, props = null) {
   );
 }
 
+function openAdd2Board(vm, pin, username) {
+  vm.$buefy.modal.open(
+    {
+      parent: vm,
+      component: Add2Board,
+      props: { pin, username },
+      hasModalCard: true,
+    },
+  );
+}
+
 function openBoardCreate(vm) {
   vm.$buefy.modal.open(
     {
@@ -70,6 +82,7 @@ function openSignUp(vm, onSignUpSucceed) {
 export default {
   openBoardCreate,
   openBoardEdit,
+  openAdd2Board,
   openPinCreate,
   openLogin,
   openSignUp,

pinry-spa/src/components/pin_edit/Add2Board.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="add2board-modal">
+    <form action="">
+      <div class="modal-card" style="width: auto">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Add Pin to Board</p>
+        </header>
+        <section class="modal-card-body">
+          <div class="columns">
+            <div class="column">
+              <FileUpload
+                :previewImageURL="pin.url"
+              ></FileUpload>
+            </div>
+            <div class="column">
+              <FilterSelect
+                :allOptions="boardOptions"
+                v-on:selected="onSelectBoard"
+              ></FilterSelect>
+            </div>
+          </div>
+        </section>
+        <footer class="modal-card-foot">
+          <button class="button" type="button" @click="$parent.close()">Close</button>
+          <button
+            @click="doAdd2Board"
+            class="button is-primary">Add Pin to Board
+          </button>
+        </footer>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import API from '../api';
+import FileUpload from './FileUpload.vue';
+import FilterSelect from './FilterSelect.vue';
+
+
+export default {
+  name: 'Add2Board',
+  props: ['pin', 'username'],
+  components: {
+    FileUpload,
+    FilterSelect,
+  },
+  data() {
+    return {
+      boardOptions: [],
+      boardIds: [],
+    };
+  },
+  created() {
+    this.fetchBoardList();
+  },
+  methods: {
+    doAdd2Board() {
+      if (this.boardIds.length > 0) {
+        const promises = [];
+        this.boardIds.forEach(
+          (boardId) => {
+            promises.push(
+              API.Board.addToBoard(boardId, [this.pin.id]),
+            );
+          },
+        );
+        Promise.all(promises).then(
+          () => {
+            this.$buefy.toast.open('Succeed to add pin to boards');
+            this.$parent.close();
+          },
+          () => {
+            this.$buefy.toast.open(
+              {
+                message: 'Failed to add pin to boards',
+                type: 'is-danger',
+              },
+            );
+          },
+        );
+      }
+    },
+    onSelectBoard(boardIds) {
+      this.boardIds = boardIds;
+    },
+    fetchBoardList() {
+      API.Board.fetchFullList(this.username).then(
+        (resp) => {
+          const boardOptions = [];
+          resp.data.forEach(
+            (board) => {
+              const boardOption = { name: board.name, value: board.id };
+              boardOptions.push(boardOption);
+            },
+          );
+          this.boardOptions = boardOptions;
+        },
+        () => {
+          console.log('Error occurs while fetch board full list');
+        },
+      );
+    },
+  },
+};
+</script>