Feature: Add single pin display and share link for pin

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"
+                  <b-button
-                      :to="{ name: 'pin', params: { pinId: pinItem.id } }"
+                      @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>
 

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);
       }

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,

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() {
+    initialize() {
-      this.filters.tagFilter = this.$route.params.tag;
+      this.filters.idFilter = this.$route.params.pinId;
     },
   },
 };

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 },

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 },