Feature: Add Board delete function

pinry-spa/src/components/Boards.vue

@@ -16,24 +16,32 @@
               <div class="grid-sizer"></div>
               <div class="gutter-sizer"></div>
               <div class="board-card grid-item">
-                <router-link :to="{ name: 'board', params: { boardId: item.id } }">
+                <div @mouseenter="currentEditBoard = item.id"
+                     @mouseleave="currentEditBoard = null"
+                >
                   <div class="card-image">
-                    <img :src="item.preview_image_url"
-                       @load="onPinImageLoaded(item.id)"
-                       :style="item.style"
-                       v-show="item.preview_image_url"
-                       class="preview-image">
+                    <BoardEditorUI
+                      v-show="shouldShowEdit(item.id)"
+                      :board="item"
+                      v-on:board-delete-succeed="reset"
+                    ></BoardEditorUI>
+                    <router-link :to="{ name: 'board', params: { boardId: item.id } }">
+                      <img :src="item.preview_image_url"
+                         @load="onPinImageLoaded(item.id)"
+                         :style="item.style"
+                         v-show="item.preview_image_url"
+                         class="preview-image">
+                    </router-link>
                   </div>
                   <div class="board-footer">
                     <p class="sub-title board-info">{{ item.name }}</p>
-
                     <p class="description">
                       <small>
                         Pins in board: <span class="num-pins">{{ item.total_pins }}</span>
                       </small>
                     </p>
                   </div>
-                </router-link>
+                </div>
               </div>
             </div>
           </template>
@@ -52,6 +60,7 @@ import loadingSpinner from './loadingSpinner.vue';
 import noMore from './noMore.vue';
 import scroll from './utils/scroll';
 import placeholder from '../assets/pinry-placeholder.jpg';
+import BoardEditorUI from './editors/BoardEditUI.vue';
 
 function createBoardItem(board) {
   const defaultPreviewImage = placeholder;
@@ -81,25 +90,45 @@ function createBoardItem(board) {
   return boardItem;
 }
 
+function initialData() {
+  return {
+    currentEditBoard: null,
+    blocks: [],
+    blocksMap: {},
+    status: {
+      loading: false,
+      hasNext: true,
+      offset: 0,
+    },
+  };
+}
+
 export default {
   name: 'boards',
   components: {
     loadingSpinner,
     noMore,
+    BoardEditorUI,
   },
-  data() {
-    return {
-      blocks: [],
-      blocksMap: {},
-      status: {
-        loading: false,
-        hasNext: true,
-        offset: 0,
-      },
-    };
-  },
+  data: initialData,
   props: ['boardUsername'],
   methods: {
+    initialize() {
+      this.fetchMore(true);
+    },
+    reset() {
+      const data = initialData();
+      Object.entries(data).forEach(
+        (kv) => {
+          const [key, value] = kv;
+          this[key] = value;
+        },
+      );
+      this.initialize();
+    },
+    shouldShowEdit(boardId) {
+      return this.currentEditBoard === boardId;
+    },
     onPinImageLoaded(itemId) {
       this.blocksMap[itemId].class = {
         'image-loaded': true,
@@ -165,7 +194,7 @@ export default {
   },
   created() {
     this.registerScrollEvent();
-    this.fetchMore(true);
+    this.initialize();
   },
 };
 </script>

pinry-spa/src/components/api.js

@@ -34,6 +34,10 @@ const Board = {
       { pins_to_add: pinIds },
     );
   },
+  delete(boardId) {
+    const url = `${API_PREFIX}boards/${boardId}/`;
+    return axios.delete(url);
+  },
 };
 
 const Pin = {

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

@@ -0,0 +1,58 @@
+<template>
+  <div class="editor">
+    <div class="editor-buttons">
+      <span class="icon-container" @click="deleteBoard">
+         <b-icon
+           type="is-light"
+           icon="delete"
+           custom-size="mdi-24px">
+         </b-icon>
+      </span>
+      <span class="icon-container">
+       <b-icon
+         type="is-light"
+         icon="pencil"
+         custom-size="mdi-24px">
+       </b-icon>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import API from '../api';
+
+export default {
+  name: 'BoardEditor',
+  props: {
+    board: {
+      default() {
+        return {};
+      },
+      type: Object,
+    },
+  },
+  methods: {
+    deleteBoard() {
+      this.$buefy.dialog.confirm({
+        message: 'Delete this Board?',
+        onConfirm: () => {
+          API.Board.delete(this.board.id).then(
+            () => {
+              this.$buefy.toast.open('Board deleted');
+              this.$emit('board-delete-succeed', this.board.id);
+            },
+            () => {
+              this.$buefy.toast.open('Failed to delete Board');
+            },
+          );
+        },
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './editor';
+</style>

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

@@ -61,28 +61,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@mixin border-radius {
-  border-radius: 3px;
-}
-
-.editor-buttons {
-  padding: 3px 1px 3px 3px;
-  background-color: rgba(225, 225, 225, 0.6);
-  position: absolute;
-  top: 5px;
-  right: 5px;
-  float: right;
-  cursor: pointer;
-
-  @include border-radius;
-  .icon-container {
-    @include border-radius;
-    padding: 5px 2px 2px 2px;
-    background-color: rgba(0, 0, 0, 0.8);
-    margin-right: 2px;
-    span {
-      opacity: 0.9;
-    }
-  }
-}
+@import './editor';
 </style>

pinry-spa/src/components/editors/editor.scss

@@ -0,0 +1,24 @@
+@mixin border-radius {
+  border-radius: 3px;
+}
+
+.editor-buttons {
+  padding: 3px 1px 3px 3px;
+  background-color: rgba(225, 225, 225, 0.6);
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  float: right;
+  cursor: pointer;
+
+  @include border-radius;
+  .icon-container {
+    @include border-radius;
+    padding: 5px 2px 2px 2px;
+    background-color: rgba(0, 0, 0, 0.8);
+    margin-right: 2px;
+    span {
+      opacity: 0.9;
+    }
+  }
+}