aklivity · Tafseerhussain · Dec 2, 2024 · Dec 2, 2024 · Dec 3, 2024 · Dec 9, 2024
diff --git a/studio/index.html b/studio/index.html
@@ -37,6 +37,8 @@
       href="icons/favicon-16x16.png"
     />
     <link rel="icon" type="image/ico" href="favicon.ico" />
+    <script type="module" src="/async-api.js"></script>
+    <link rel="stylesheet" href="/async-api.css">
   </head>
   <body>
     <!-- quasar:entry-point -->

diff --git a/studio/public/async-api.css b/studio/public/async-api.css
diff --git a/studio/public/async-api.js b/studio/public/async-api.js
diff --git a/studio/quasar.config.js b/studio/quasar.config.js
@@ -67,6 +67,11 @@ module.exports = configure(function (/* ctx */) {
 
       // extendViteConf (viteConf) {},
       // viteVuePluginOptions: {},
+      vueLoaderOptions: {
+        compilerOptions: {
+          isCustomElement: tag => tag === 'async-api',
+        },
+      },
 
       vitePlugins: [
         [

diff --git a/studio/src/pages/shared/CommonTable.vue b/studio/src/pages/shared/CommonTable.vue
@@ -237,11 +237,12 @@
       <template v-slot:body-cell-actions="props">
         <q-td :props="props">
           <q-btn
-          v-if="tableName === 'function-table'"
+            v-if="tableName === 'function-table'"
             flat
             dense
             icon="img:/icons/eye.svg"
             class="icon-outline text-default-light-green q-mr-md"
+            @click="viewRow(props.row)"
           />
           <q-btn
             flat
@@ -494,6 +495,9 @@ export default defineComponent({
     },
   },
   methods: {
+    viewRow(row) {
+      this.$emit("view-row", row);
+    },
     editRow(row) {
       this.$emit("edit-row", row);
     },

diff --git a/studio/src/pages/user_account/ApiDocComponent.vue b/studio/src/pages/user_account/ApiDocComponent.vue
@@ -9,28 +9,25 @@
     <q-icon name="img:/icons/export.svg" class="filter-light-green" size="sm" />
   </div>
   <div class="q-py-md iframe">
-    <iframe
-      :src="iframeSrc"
-      width="100%"
-      height="400px"
-      frameborder="0"
-      allowfullscreen
-      style="display: block; border: none"
-    >
-    </iframe>
+    <async-api :schema="iframeSrc"></async-api>
   </div>
 </template>
 <script>
+import { appApiDocs } from "src/services/api";
 import { defineComponent } from "vue";
 
 export default defineComponent({
   name: "ApiDocComponent",
   components: {},
   data() {
     return {
-      iframeSrc:
-        "/asyncapi.html", // Change this URL as needed
+      iframeSrc: "",
     };
   },
+  mounted() {
+    appApiDocs("http-asyncapi").then(({ data }) => {
+      this.iframeSrc = data;
+    });
+  },
 });
 </script>