From 754604cb05a0b66bd1d575eff1a0106b86c55cf0 Mon Sep 17 00:00:00 2001
From: Eric <5089238+emizzle@users.noreply.github.com>
Date: Mon, 24 Jun 2024 12:50:25 +1000
Subject: [PATCH] Add preview link to moderation views

---
 src/components/StorageRequest.vue  | 15 +++++++++++----
 src/components/StorageRequests.vue |  9 +++++++++
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/StorageRequest.vue b/src/components/StorageRequest.vue
index 6d28b33..f9a2e6c 100644
--- a/src/components/StorageRequest.vue
+++ b/src/components/StorageRequest.vue
@@ -1,8 +1,7 @@
 <script setup>
 import { onMounted, onUnmounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { initTooltips } from 'flowbite'
-import { storeToRefs } from 'pinia'
-import { useRequestsStore } from '@/stores/requests'
 import { getStateColour, moderatedState, price } from '@/utils/requests'
 import { autoPluralize } from '@/utils/strings'
 
@@ -13,8 +12,9 @@ import ShortenValue from '@/components/ShortenValue.vue'
 import Slots from './Slots.vue'
 import SkeletonLoading from './SkeletonLoading.vue'
 
+const router = useRouter()
 const request = defineModel()
-const props = defineProps({
+defineProps({
   requestId: {
     type: String,
     required: true
@@ -54,7 +54,7 @@ const stateColour = computed(() => getStateColour(request.value.state))
     <div class="py-4 px-4 ml-4 max-w-2xl flex-1">
       <div
         v-if="enableModeration === true"
-        class="mb-4 p-5 w-full border border-gray-300 rounded-lg b-1 bg-gray-100"
+        class="flex flex-col space-between mb-4 p-5 w-full border border-gray-300 rounded-lg b-1 bg-gray-100"
       >
         <label for="moderation" class="block mb-2 text-lg font-medium text-gray-900 dark:text-white"
           >Moderation station</label
@@ -78,6 +78,13 @@ const stateColour = computed(() => getStateColour(request.value.state))
             size="lg"
           ></StateIndicator>
         </div>
+        <a
+          :href="router.resolve({ path: `/request/${requestId}` }).href"
+          target="_blank"
+          class="mt-4 font-medium text-blue-600 dark:text-blue-500 hover:underline"
+          @click.stop
+          >Preview</a
+        >
       </div>
       <div class="flex justify-between items-center mb-2">
         <h2 class="text-xl font-semibold leading-none text-gray-900 md:text-2xl dark:text-white">
diff --git a/src/components/StorageRequests.vue b/src/components/StorageRequests.vue
index e9a6631..0fd8d34 100644
--- a/src/components/StorageRequests.vue
+++ b/src/components/StorageRequests.vue
@@ -179,6 +179,15 @@ onMounted(() => {
             </td>
             <td class="px-6 py-4">
               <a
+                v-if="enableModeration"
+                :href="router.resolve({ path: `/request/${requestId}` }).href"
+                target="_blank"
+                class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
+                @click.stop
+                >Preview</a
+              >
+              <a
+                v-else
                 href="#"
                 type="button"
                 class="font-medium text-blue-600 dark:text-blue-500 hover:underline"