From a4dd2ea30ff0b9c7f516ae45bae4a60e4a0623d4 Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Sat, 7 Dec 2019 16:52:46 +0800
Subject: [PATCH] Feature: Add 'remove-from-board' in board view

---
 pinry-spa/src/components/Pins.vue                |  1 +
 pinry-spa/src/components/api.js                  |  7 +++++++
 pinry-spa/src/components/editors/PinEditorUI.vue | 20 +++++++++++++++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/pinry-spa/src/components/Pins.vue b/pinry-spa/src/components/Pins.vue
index b14187b..39a919a 100644
--- a/pinry-spa/src/components/Pins.vue
+++ b/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)"
diff --git a/pinry-spa/src/components/api.js b/pinry-spa/src/components/api.js
index 86c0870..20e981c 100644
--- a/pinry-spa/src/components/api.js
+++ b/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);
diff --git a/pinry-spa/src/components/editors/PinEditorUI.vue b/pinry-spa/src/components/editors/PinEditorUI.vue
index 16570a0..6ac9664 100644
--- a/pinry-spa/src/components/editors/PinEditorUI.vue
+++ b/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?',