From 133cd93d94de4c0ba4212456573184bcd9ece0a8 Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Sat, 30 Nov 2019 15:06:29 +0800
Subject: [PATCH] Feature: Add single pin display and share link for pin

---
 pinry-spa/src/components/PinPreview.vue | 18 +++++++++++++-----
 pinry-spa/src/components/Pins.vue       |  2 ++
 pinry-spa/src/components/api.js         | 23 +++++++++++++++++++++++
 pinry-spa/src/views/Pins4Id.vue         | 12 ++++++------
 pinry-spa/src/views/Pins4Tag.vue        |  2 +-
 pinry-spa/src/views/Pins4User.vue       |  2 +-
 6 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/pinry-spa/src/components/PinPreview.vue b/pinry-spa/src/components/PinPreview.vue
index 57f941c..40aeb70 100644
--- a/pinry-spa/src/components/PinPreview.vue
+++ b/pinry-spa/src/components/PinPreview.vue
@@ -28,7 +28,7 @@
                   </p>
                 </div>
                 <div class="is-pulled-right">
-                  <a :href="pinItem.referer">
+                  <a :href="pinItem.referer" target="_blank">
                     <b-button
                         v-show="pinItem.referer !== null"
                         class="meta-link"
@@ -36,7 +36,7 @@
                       Referer
                     </b-button>
                   </a>
-                  <a :href="pinItem.original_image_url">
+                  <a :href="pinItem.original_image_url" target="_blank">
                     <b-button
                         v-show="pinItem.original_image_url !== null"
                         class="meta-link"
@@ -44,11 +44,11 @@
                         Original Image
                     </b-button>
                   </a>
-                  <b-button tag="router-link"
-                      :to="{ name: 'pin', params: { pinId: pinItem.id } }"
+                  <b-button
+                      @click="closeAndGoTo"
                       class="meta-link"
                       type="is-success">
-                      Pin URL
+                      Goto Pin Link
                   </b-button>
                 </div>
               </div>
@@ -63,6 +63,14 @@
 export default {
   name: 'PinPreview',
   props: ['pinItem'],
+  methods: {
+    closeAndGoTo() {
+      this.$parent.close();
+      this.$router.push(
+        { name: 'pin', params: { pinId: this.pinItem.id } },
+      );
+    },
+  },
 };
 </script>
 
diff --git a/pinry-spa/src/components/Pins.vue b/pinry-spa/src/components/Pins.vue
index cc2686e..4c08e52 100644
--- a/pinry-spa/src/components/Pins.vue
+++ b/pinry-spa/src/components/Pins.vue
@@ -184,6 +184,8 @@ export default {
         promise = API.fetchPins(this.status.offset, null, this.pinFilters.userFilter);
       } else if (this.pinFilters.boardFilter) {
         promise = API.fetchPinsForBoard(this.pinFilters.boardFilter);
+      } else if (this.pinFilters.idFilter) {
+        promise = API.fetchPin(this.pinFilters.idFilter);
       } else {
         promise = API.fetchPins(this.status.offset);
       }
diff --git a/pinry-spa/src/components/api.js b/pinry-spa/src/components/api.js
index a262d2a..290f3bf 100644
--- a/pinry-spa/src/components/api.js
+++ b/pinry-spa/src/components/api.js
@@ -19,6 +19,28 @@ function fetchPins(offset, tagFilter, userFilter) {
   );
 }
 
+function fetchPin(pinId) {
+  const url = `${API_PREFIX}pins/${pinId}`;
+  return new Promise(
+    (resolve, reject) => {
+      const p = axios.get(
+        url,
+      );
+      p.then(
+        (resp) => {
+          const response = {
+            data: { results: [resp.data], next: null },
+          };
+          resolve(response);
+        },
+        (error) => {
+          reject(error);
+        },
+      );
+    },
+  );
+}
+
 function fetchPinsForBoard(boardId) {
   const url = `${API_PREFIX}boards/${boardId}`;
   return new Promise(
@@ -103,6 +125,7 @@ const User = {
 };
 
 export default {
+  fetchPin,
   fetchPins,
   fetchPinsForBoard,
   User,
diff --git a/pinry-spa/src/views/Pins4Id.vue b/pinry-spa/src/views/Pins4Id.vue
index c1e5400..873a339 100644
--- a/pinry-spa/src/views/Pins4Id.vue
+++ b/pinry-spa/src/views/Pins4Id.vue
@@ -10,10 +10,10 @@ import PHeader from '../components/PHeader.vue';
 import Pins from '../components/Pins.vue';
 
 export default {
-  name: 'p-header',
+  name: 'Pins4Id',
   data() {
     return {
-      filters: { tagFilter: null },
+      filters: { idFilter: null },
     };
   },
   components: {
@@ -21,15 +21,15 @@ export default {
     Pins,
   },
   created() {
-    this.initializeTag();
+    this.initialize();
   },
   beforeRouteUpdate(to, from, next) {
-    this.initializeTag();
+    this.initialize();
     next();
   },
   methods: {
-    initializeTag() {
-      this.filters.tagFilter = this.$route.params.tag;
+    initialize() {
+      this.filters.idFilter = this.$route.params.pinId;
     },
   },
 };
diff --git a/pinry-spa/src/views/Pins4Tag.vue b/pinry-spa/src/views/Pins4Tag.vue
index c1e5400..200a9be 100644
--- a/pinry-spa/src/views/Pins4Tag.vue
+++ b/pinry-spa/src/views/Pins4Tag.vue
@@ -10,7 +10,7 @@ import PHeader from '../components/PHeader.vue';
 import Pins from '../components/Pins.vue';
 
 export default {
-  name: 'p-header',
+  name: 'Pins4Tag',
   data() {
     return {
       filters: { tagFilter: null },
diff --git a/pinry-spa/src/views/Pins4User.vue b/pinry-spa/src/views/Pins4User.vue
index 29e666e..4c7b6bc 100644
--- a/pinry-spa/src/views/Pins4User.vue
+++ b/pinry-spa/src/views/Pins4User.vue
@@ -10,7 +10,7 @@ import PHeader from '../components/PHeader.vue';
 import Pins from '../components/Pins.vue';
 
 export default {
-  name: 'p-header',
+  name: 'Pins4User',
   data() {
     return {
       filters: { userFilter: null },