Feature: Add 'remove-from-board' in board view

pinry-spa/src/components/Pins.vue

@@ -26,6 +26,7 @@
                     :currentUsername="editorMeta.user.meta.username"
                     :currentBoardId="editorMeta.currentBoard.id"
                     v-on:pin-delete-succeed="reset"
+                    v-on:pin-remove-from-board-succeed="reset"
                   ></EditorUI>
                   <img :src="item.url"
                      @load="onPinImageLoaded(item.id)"

pinry-spa/src/components/api.js

@@ -45,6 +45,13 @@ const Board = {
       { pins_to_add: pinIds },
     );
   },
+  removeFromBoard(boardId, pinIds) {
+    const url = `${API_PREFIX}boards/${boardId}/`;
+    return axios.patch(
+      url,
+      { pins_to_remove: pinIds },
+    );
+  },
   delete(boardId) {
     const url = `${API_PREFIX}boards/${boardId}/`;
     return axios.delete(url);

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

@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
     <div class="editor-buttons">
-      <span class="icon-container" v-if="inBoard">
+      <span class="icon-container" v-if="inBoard" @click="removeFromBoard">
           <b-icon
             type="is-light"
             icon="minus-box"
@@ -63,6 +63,24 @@ export default {
     },
   },
   methods: {
+    removeFromBoard() {
+      this.$buefy.dialog.confirm({
+        message: 'Remove Pin from Board?',
+        onConfirm: () => {
+          API.Board.removeFromBoard(this.currentBoardId, [this.pin.id]).then(
+            () => {
+              this.$buefy.toast.open('Pin removed');
+              this.$emit('pin-remove-from-board-succeed', this.pin.id);
+            },
+            () => {
+              this.$buefy.toast.open(
+                { type: 'is-danger', message: 'Failed to Remove Pin' },
+              );
+            },
+          );
+        },
+      });
+    },
     deletePin() {
       this.$buefy.dialog.confirm({
         message: 'Delete this Pin?',