Certificate page redone (#1071)

frontend/marketplace/package.json

@@ -25,6 +25,7 @@
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.7.1",
     "pinia": "^2.1.7",
     "rollbar": "^2.26.2",
     "vue": "^3.3.2",

frontend/marketplace/src/components/CertificateCard.vue

@@ -1,12 +1,24 @@
 <script setup lang="ts">
 import { toast } from "vue3-toastify";
+import { defineEmits } from 'vue';
 
 export interface CreditCardProps {
   cardData: any;
 }
-defineProps<CreditCardProps>();
-const showInfoToast = () => {
-  toast.info("Coming soon!");
+
+// Define the expected properties from the parent component
+const props = defineProps<CreditCardProps>();
+
+// Define the events that this component can emit
+const emit = defineEmits(['viewCertificate']);
+
+// Function to emit the 'viewCertificate' event
+const viewCertificate = () => {
+  if (props.cardData?.id) {
+    emit('viewCertificate', props.cardData.id);
+  } else {
+    toast.error('Certificate ID not found');
+  }
 };
 </script>
 <template>
@@ -34,7 +46,7 @@ const showInfoToast = () => {
             {{ cardData?.denom }}
           </p>
           <div>
-            <button class="btn certificate-button" @click="showInfoToast">
+            <button class="btn certificate-button" @click="viewCertificate">
               View certificate
             </button>
           </div>
@@ -59,7 +71,7 @@ const showInfoToast = () => {
       </div>
 
       <div class="grid grid-col-1 gap-6 p-5">
-        <button class="btn certificate-button" @click="showInfoToast">
+        <button class="btn certificate-button" @click="viewCertificate">
           View certificate
         </button>
       </div>

frontend/marketplace/src/components/CertificateTabContent.vue

@@ -6,15 +6,25 @@ import CertificateCard from "@/components/CertificateCard.vue";
 import { CHAIN_ID } from "@/config/config";
 import { toast } from "vue3-toastify";
 import { useQuery } from "@vue/apollo-composable";
+import CustomSpinner from "@/components/CustomSpinner.vue";
 import gql from "graphql-tag";
 import CustomAlert from "@/components/CustomAlert.vue";
 import { walletConnected, getWallet } from "@/utils/wallet-utils";
+import { useRouter } from 'vue-router';
 
 const pageNumber = ref(1);
 const itemsPerPage = ref(5);
 const searchTerm = ref("");
 const data = ref();
 const showSpinner = ref(true);
+const router = useRouter();
+
+const viewCertificate = (certificateId: string) => {
+  const url = `${window.location.origin}/certificate/${certificateId}`;
+  window.open(url, '_blank');
+};
+
+
 
 const handlePageChange = () => {
   getCertificatesData();
@@ -46,6 +56,7 @@ const getCertificatesData = async () => {
     nodes {
       amount
       denom
+      id
     }
   }
   }
@@ -92,7 +103,7 @@ onMounted(() => {
         v-for="certificate in data?.result?.creditOffsetCertificates?.nodes"
         :key="certificate.id"
       >
-        <CertificateCard :card-data="certificate" />
+        <CertificateCard :card-data="certificate" @viewCertificate="viewCertificate" />
       </div>
       <div class="flex justify-center md:justify-end my-10">
         <CustomPagination