From 58f778f4b4fc02f0a600f6d419cce3ffc6321467 Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Sat, 7 Dec 2019 13:32:20 +0800
Subject: [PATCH] Feature: Add pin delete function

---
 .../{EditorUI.vue => PinEditorUI.vue}         | 30 ++++++++++++++++---
 pinry-spa/src/components/Pins.vue             | 14 +++++----
 pinry-spa/src/components/api.js               |  6 ++++
 3 files changed, 41 insertions(+), 9 deletions(-)
 rename pinry-spa/src/components/{EditorUI.vue => PinEditorUI.vue} (64%)

diff --git a/pinry-spa/src/components/EditorUI.vue b/pinry-spa/src/components/PinEditorUI.vue
similarity index 64%
rename from pinry-spa/src/components/EditorUI.vue
rename to pinry-spa/src/components/PinEditorUI.vue
index d595e8f..413e947 100644
--- a/pinry-spa/src/components/EditorUI.vue
+++ b/pinry-spa/src/components/PinEditorUI.vue
@@ -8,7 +8,7 @@
             custom-size="mdi-24px">
          </b-icon>
       </span>
-      <span class="icon-container">
+      <span class="icon-container" @click="deletePin">
          <b-icon
            type="is-light"
            icon="delete"
@@ -27,12 +27,34 @@
 </template>
 
 <script>
+import API from './api';
+
 export default {
   name: 'Editor',
   props: {
-    show: {
-      default: false,
-      type: Boolean,
+    pin: {
+      default() {
+        return {};
+      },
+      type: Object,
+    },
+  },
+  methods: {
+    deletePin() {
+      this.$buefy.dialog.confirm({
+        message: 'Delete this Pin?',
+        onConfirm: () => {
+          API.Pin.deleteById(this.pin.id).then(
+            () => {
+              this.$buefy.toast.open('Pin deleted');
+              this.$emit('pin-delete-succeed', this.pin.id);
+            },
+            () => {
+              this.$buefy.toast.open('Failed to delete Pin');
+            },
+          );
+        },
+      });
     },
   },
 };
diff --git a/pinry-spa/src/components/Pins.vue b/pinry-spa/src/components/Pins.vue
index b2f0e3c..24d3819 100644
--- a/pinry-spa/src/components/Pins.vue
+++ b/pinry-spa/src/components/Pins.vue
@@ -17,11 +17,15 @@
               <div class="grid-sizer"></div>
               <div class="gutter-sizer"></div>
               <div class="pin-card grid-item">
-                <div>
-                  <EditorUI v-show="shouldShowEdit(item.id)"></EditorUI>
-                  <img :src="item.url"
-                     @mouseenter="showEditButtons(item.id)"
+                <div @mouseenter="showEditButtons(item.id)"
                      @mouseleave="hideEditButtons(item.id)"
+                >
+                  <EditorUI
+                    v-show="shouldShowEdit(item.id)"
+                    :pin="item"
+                    v-on:pin-delete-succeed="reset"
+                  ></EditorUI>
+                  <img :src="item.url"
                      @load="onPinImageLoaded(item.id)"
                      @click="openPreview(item)"
                      alt="item.description"
@@ -76,7 +80,7 @@ import loadingSpinner from './loadingSpinner.vue';
 import noMore from './noMore.vue';
 import scroll from './utils/scroll';
 import bus from './utils/bus';
-import EditorUI from './EditorUI.vue';
+import EditorUI from './PinEditorUI.vue';
 
 function createImageItem(pin) {
   const image = {};
diff --git a/pinry-spa/src/components/api.js b/pinry-spa/src/components/api.js
index 068924d..1e47274 100644
--- a/pinry-spa/src/components/api.js
+++ b/pinry-spa/src/components/api.js
@@ -64,6 +64,12 @@ const Pin = {
       },
     );
   },
+  deleteById(pinId) {
+    const url = `${API_PREFIX}pins/${pinId}/`;
+    return axios.delete(
+      url,
+    );
+  },
 };