feat: add page for individual nft serials

Signed-off-by: Tim Schmidt <[email protected]>

src/components/token/NftHolderTable.vue

@@ -34,12 +34,15 @@
       v-model:current-page="currentPage"
       :per-page="perPage"
       @page-change="onPageChange"
+      @cell-click="handleClick"
 
-      :hoverable="false"
+      :hoverable="true"
       :narrowed="true"
       :striped="true"
       :mobile-breakpoint="ORUGA_MOBILE_BREAKPOINT"
 
+      style="cursor: pointer"
+
       aria-current-label="Current page"
       aria-next-label="Next page"
       aria-page-label="Page"
@@ -90,6 +93,7 @@ import BlobValue from "@/components/values/BlobValue.vue";
 import {ORUGA_MOBILE_BREAKPOINT} from '@/App.vue';
 import EmptyTable from "@/components/EmptyTable.vue";
 import {NftHolderTableController} from "@/components/token/NftHolderTableController";
+import {routeManager} from "@/router";
 
 export default defineComponent({
   name: 'NftHolderTable',
@@ -107,6 +111,12 @@ export default defineComponent({
     const isTouchDevice = inject('isTouchDevice', false)
     const isMediumScreen = inject('isMediumScreen', true)
 
+    const handleClick = (n: Nft, c: unknown, i: number, ci: number, event: MouseEvent) => {
+      if (n.token_id && n.serial_number) {
+        routeManager.routeToSerial(n.token_id, n.serial_number, event.ctrlKey || event.metaKey)
+      }
+    }
+
     return {
       isTouchDevice,
       isMediumScreen,
@@ -116,7 +126,8 @@ export default defineComponent({
       currentPage: props.controller.currentPage as Ref<number>,
       onPageChange: props.controller.onPageChange,
       perPage: props.controller.pageSize as Ref<number>,
-      ORUGA_MOBILE_BREAKPOINT
+      ORUGA_MOBILE_BREAKPOINT,
+      handleClick
     }
   }
 });
@@ -126,9 +137,3 @@ export default defineComponent({
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 <!--                                                       STYLE                                                     -->
 <!-- --------------------------------------------------------------------------------------------------------------- -->
-
-<style>
-#nft-holder-table table.o-table > tbody > tr {
-  cursor:default;
-}
-</style>

src/components/transaction/TransactionTable.vue

@@ -53,7 +53,7 @@
 
     <o-table-column v-slot="props" field="name" label="Type">
       <div class="h-has-pill" style="display: inline-block">
-        <div class="h-is-text-size-2">{{ makeTypeLabel(props.row.name) }}</div>
+        <div class="h-is-text-size-2">{{ makeTypeLabel(props.row.name ? props.row.name : props.row.type) }}</div>
       </div>
     </o-table-column>
 
@@ -117,6 +117,8 @@ export default defineComponent({
       routeManager.routeToTransaction(t, event.ctrlKey || event.metaKey)
     }
 
+    console.log(props.controller.rows);
+
     return {
       isTouchDevice,
       isMediumScreen,

src/components/transaction/TransactionTableControllerXL.ts

@@ -19,32 +19,32 @@
  */
 
 import {KeyOperator, SortOrder, TableController} from "@/utils/table/TableController";
-import {Transaction, TransactionResponse} from "@/schemas/HederaSchemas";
+import {NftTransaction, NftTransactionResponse, Transaction, TransactionResponse} from "@/schemas/HederaSchemas";
 import {ComputedRef, ref, Ref, watch, WatchStopHandle} from "vue";
 import axios, {AxiosResponse} from "axios";
 import {LocationQuery, Router} from "vue-router";
 import {fetchStringQueryParam} from "@/utils/RouteManager";
 
 
-export class TransactionTableControllerXL extends TableController<Transaction, string> {
+export class TransactionTableControllerXL extends TableController<Transaction | NftTransaction, string> {
 
-    private readonly accountId: Ref<string | null>
+    private readonly entityId: Ref<string | null>
     private readonly accountIdMandatory: boolean
 
     //
     // Public
     //
 
     public constructor(router: Router,
-                       accountId: Ref<string | null>,
+                       entityId: Ref<string | null>,
                        pageSize: ComputedRef<number>,
                        accountIdMandatory: boolean,
                        pageParamName = "p", keyParamName= "k") {
         super(router, pageSize, 10 * pageSize.value, 5000, 10, 100,
             pageParamName, keyParamName);
-        this.accountId = accountId
+        this.entityId = entityId
         this.accountIdMandatory = accountIdMandatory
-        this.watchAndReload([this.transactionType, this.accountId])
+        this.watchAndReload([this.transactionType, this.entityId])
     }
 
     public readonly transactionType: Ref<string> = ref("")
@@ -54,11 +54,32 @@ export class TransactionTableControllerXL extends TableController<Transaction, s
     //
 
     public async load(consensusTimestamp: string | null, operator: KeyOperator,
-                      order: SortOrder, limit: number): Promise<Transaction[] | null> {
-        let result: Promise<Transaction[] | null>
+                      order: SortOrder, limit: number): Promise<Transaction[] | NftTransaction[] | null> {
+        let result: Promise<Transaction[] | NftTransaction[] | null>
 
-        if (this.accountIdMandatory && this.accountId.value === null) {
+        if (this.accountIdMandatory && this.entityId.value === null) {
             result = Promise.resolve(null)
+        } else if (this.entityId.value?.includes("---")) {
+            const entityArray = this.entityId.value.split("---");
+            const params = {} as {
+                limit: number
+                order: string
+                transactiontype: string | undefined
+                timestamp: string | undefined
+            }
+            params.limit = limit
+            params.order = order
+            if (this.transactionType.value != "") {
+                params.transactiontype = this.transactionType.value
+            }
+            if (consensusTimestamp !== null) {
+                params.timestamp = operator + ":" + consensusTimestamp
+            }
+            const cb = (r: AxiosResponse<NftTransactionResponse>): Promise<NftTransaction[] | null> => {
+                return Promise.resolve(r.data.transactions ?? [])
+            }
+            result = axios.get<NftTransactionResponse>(`api/v1/tokens/${entityArray[0]}/nfts/${entityArray[1]}/transactions`, {params: params}).then(cb)
+            console.log(result)
         } else {
             const params = {} as {
                 limit: number
@@ -69,8 +90,8 @@ export class TransactionTableControllerXL extends TableController<Transaction, s
             }
             params.limit = limit
             params.order = order
-            if (this.accountId.value !== null) {
-                params["account.id"] = this.accountId.value
+            if (this.entityId.value !== null) {
+                params["account.id"] = this.entityId.value
             }
             if (this.transactionType.value != "") {
                 params.transactiontype = this.transactionType.value