Feature: Add PinEditorUI filter for buttons

pinry-spa/src/components/Pins.vue

@@ -23,6 +23,8 @@
                   <EditorUI
                     v-show="shouldShowEdit(item.id)"
                     :pin="item"
+                    :currentUsername="editorMeta.user.meta.username"
+                    :currentBoardId="editorMeta.currentBoard.id"
                     v-on:pin-delete-succeed="reset"
                   ></EditorUI>
                   <img :src="item.url"
@@ -105,7 +107,6 @@ function createImageItem(pin) {
 
 function initialData() {
   return {
-    currentEditId: null,
     blocks: [],
     blocksMap: {},
     status: {
@@ -113,6 +114,14 @@ function initialData() {
       hasNext: true,
       offset: 0,
     },
+    editorMeta: {
+      currentEditId: null,
+      currentBoard: {},
+      user: {
+        loggedIn: false,
+        meta: {},
+      },
+    },
   };
 }
 
@@ -133,19 +142,20 @@ export default {
         return {
           tagFilter: null,
           userFilter: null,
+          boardFilter: null,
         };
       },
     },
   },
   methods: {
     shouldShowEdit(id) {
-      return this.currentEditId === id;
+      return this.editorMeta.currentEditId === id;
     },
     showEditButtons(id) {
-      this.currentEditId = id;
+      this.editorMeta.currentEditId = id;
     },
     hideEditButtons() {
-      this.currentEditId = null;
+      this.editorMeta.currentEditId = null;
     },
     onPinImageLoaded(itemId) {
       this.blocksMap[itemId].class = {
@@ -201,8 +211,23 @@ export default {
       return true;
     },
     initialize() {
+      this.initializeMeta();
       this.fetchMore(true);
     },
+    initializeMeta() {
+      const self = this;
+      API.User.fetchUserInfo().then(
+        (user) => {
+          if (user === null) {
+            self.editorMeta.user.loggedIn = false;
+            self.editorMeta.user.meta = {};
+          } else {
+            self.editorMeta.user.meta = user;
+            self.editorMeta.user.loggedIn = true;
+          }
+        },
+      );
+    },
     reset() {
       const data = initialData();
       Object.entries(data).forEach(
@@ -224,7 +249,19 @@ export default {
       } else if (this.pinFilters.userFilter) {
         promise = API.fetchPins(this.status.offset, null, this.pinFilters.userFilter);
       } else if (this.pinFilters.boardFilter) {
-        promise = API.fetchPinsForBoard(this.pinFilters.boardFilter);
+        promise = new Promise(
+          (resolve, reject) => {
+            API.fetchPinsForBoard(this.pinFilters.boardFilter).then(
+              (resp) => {
+                this.editorMeta.currentBoard = resp.data.board;
+                resolve(resp);
+              },
+              (error) => {
+                reject(error);
+              },
+            );
+          },
+        );
       } else if (this.pinFilters.idFilter) {
         promise = API.fetchPin(this.pinFilters.idFilter);
       } else {

pinry-spa/src/components/api.js

@@ -23,6 +23,10 @@ const Board = {
       },
     );
   },
+  get(boardId) {
+    const url = `${API_PREFIX}boards/${boardId}/`;
+    return axios.get(url);
+  },
   fetchFullList(username) {
     const url = `${API_PREFIX}boards-auto-complete/?submitter__username=${username}`;
     return axios.get(url);
@@ -123,12 +127,12 @@ function fetchPin(pinId) {
 }
 
 function fetchPinsForBoard(boardId) {
-  const url = `${API_PREFIX}boards/${boardId}`;
+  const url = `${API_PREFIX}boards/${boardId}/`;
   return new Promise(
     (resolve, reject) => {
       axios.get(url).then(
         (resp) => {
-          resolve({ data: { results: resp.data.pins_detail, next: null } });
+          resolve({ data: { results: resp.data.pins_detail, next: null, board: resp.data } });
         },
         error => reject(error),
       );

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

@@ -1,7 +1,7 @@
 <template>
   <div class="editor">
     <div class="editor-buttons">
-      <span class="icon-container">
+      <span class="icon-container" v-if="inBoard">
           <b-icon
             type="is-light"
             icon="minus-box"
@@ -15,14 +15,14 @@
             custom-size="mdi-24px">
          </b-icon>
       </span>
-      <span class="icon-container" @click="deletePin">
+      <span class="icon-container" @click="deletePin" v-if="isOwner">
          <b-icon
            type="is-light"
            icon="delete"
            custom-size="mdi-24px">
          </b-icon>
       </span>
-      <span class="icon-container">
+      <span class="icon-container" v-if="isOwner">
        <b-icon
          type="is-light"
          icon="pencil"
@@ -39,6 +39,14 @@ import API from '../api';
 export default {
   name: 'Editor',
   props: {
+    currentBoardId: {
+      type: Number,
+      default: null,
+    },
+    currentUsername: {
+      default: '',
+      type: String,
+    },
     pin: {
       default() {
         return {};
@@ -46,6 +54,14 @@ export default {
       type: Object,
     },
   },
+  computed: {
+    isOwner() {
+      return this.pin.author === this.currentUsername;
+    },
+    inBoard() {
+      return this.currentBoardId !== null;
+    },
+  },
   methods: {
     deletePin() {
       this.$buefy.dialog.confirm({