fix: nftdetails page organization, fix filter, probably broke pause/play

Signed-off-by: Tim Schmidt <tim@launchbadge.com>
hashgraph · Oct 6, 2023 · bb24df1 · bb24df1
1 parent 051c3df
commit bb24df1
Show file tree

Hide file tree

Showing 11 changed files with 418 additions and 463 deletions.
diff --git a/src/components/token/NftHolderTable.vue b/src/components/token/NftHolderTable.vue
@@ -23,8 +23,9 @@
 <!-- --------------------------------------------------------------------------------------------------------------- -->
 
 <template>
-  <div id="nft-holder-table">
-    <o-table
+
+ <div id="nft-holder-table">
+  <o-table
       :data="nfts"
       :loading="loading"
       paginated
@@ -33,48 +34,47 @@
       v-model:current-page="currentPage"
       :per-page="perPage"
       @page-change="onPageChange"
-      @cell-click="handleClick"
 
+      @cell-click="handleClick"
       :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"
       aria-previous-label="Previous page"
       customRowKey="serial_number"
-    >
-      <o-table-column v-slot="props" field="serial_number" label="Serial #">
-        <div class="is-numeric">
-          {{ props.row.serial_number }}
-        </div>
-      </o-table-column>
-
-      <o-table-column v-slot="props" field="account_id" label="Account ID">
-        <AccountLink v-bind:account-id="props.row.account_id"/>
-      </o-table-column>
-
-      <o-table-column v-slot="props" field="deleted" label="Deleted">
-        {{ props.row.deleted }}
-      </o-table-column>
-
-      <o-table-column v-slot="props" field="modified_timestamp" label="Modification Time">
-        <TimestampValue v-bind:timestamp="props.row.modified_timestamp"/>
-      </o-table-column>
-
-      <o-table-column v-slot="props" field="metadata" label="Metadata">
-        <div class="should-wrap">
-          <BlobValue v-bind:base64="true" v-bind:blob-value="props.row.metadata" v-bind:show-none="true"/>
-        </div>
-      </o-table-column>
-
-    </o-table>
-    <EmptyTable v-if="!nfts.length"/>
-  </div>
+  >
+    <o-table-column v-slot="props" field="serial_number" label="Serial #">
+      <div class="is-numeric">
+        {{ props.row.serial_number }}
+      </div>
+    </o-table-column>
+
+    <o-table-column v-slot="props" field="account_id" label="Account ID">
+      <AccountLink v-bind:account-id="props.row.account_id" no-anchor/>
+    </o-table-column>
+
+    <o-table-column v-slot="props" field="deleted" label="Deleted">
+      {{ props.row.deleted }}
+    </o-table-column>
+
+    <o-table-column v-slot="props" field="modified_timestamp" label="Modification Time">
+      <TimestampValue v-bind:timestamp="props.row.modified_timestamp"/>
+    </o-table-column>
+
+    <o-table-column v-slot="props" field="metadata" label="Metadata">
+      <div class="should-wrap">
+        <BlobValue v-bind:base64="true" v-bind:blob-value="props.row.metadata" v-bind:show-none="true"/>
+      </div>
+    </o-table-column>
+
+  </o-table>
+  <EmptyTable v-if="!nfts.length"/>
+ </div>
 
 </template>
 
@@ -84,51 +84,61 @@
 
 <script lang="ts">
 
-import {ComputedRef, defineComponent, inject, PropType, Ref} from 'vue'
-import {Nft} from "@/schemas/HederaSchemas"
-import TimestampValue from "@/components/values/TimestampValue.vue"
-import AccountLink from "@/components/values/AccountLink.vue"
-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"
+import {ComputedRef, defineComponent, inject, PropType, Ref} from 'vue';
+import {Nft} from "@/schemas/HederaSchemas";
+import TimestampValue from "@/components/values/TimestampValue.vue";
+import AccountLink from "@/components/values/AccountLink.vue";
+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',
+  name: 'NftHolderTable',
 
-    components: {EmptyTable, AccountLink, TimestampValue, BlobValue},
+  components: {EmptyTable, AccountLink, TimestampValue, BlobValue},
 
-    props: {
-        controller: {
-            type: Object as PropType<NftHolderTableController>,
-            required: true
-        },
+  props: {
+    controller: {
+      type: Object as PropType<NftHolderTableController>,
+      required: true
     },
-
-    setup(props) {
-        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,
-            nfts: props.controller.rows as ComputedRef<Nft[]>,
-            loading: props.controller.loading as ComputedRef<boolean>,
-            total: props.controller.totalRowCount as ComputedRef<number>,
-            currentPage: props.controller.currentPage as Ref<number>,
-            onPageChange: props.controller.onPageChange,
-            perPage: props.controller.pageSize as Ref<number>,
-            ORUGA_MOBILE_BREAKPOINT,
-            handleClick
-        }
+  },
+
+  setup(props) {
+    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,
+      nfts: props.controller.rows as ComputedRef<Nft[]>,
+      loading: props.controller.loading as ComputedRef<boolean>,
+      total: props.controller.totalRowCount as ComputedRef<number>,
+      currentPage: props.controller.currentPage as Ref<number>,
+      onPageChange: props.controller.onPageChange,
+      perPage: props.controller.pageSize as Ref<number>,
+      ORUGA_MOBILE_BREAKPOINT,
+      handleClick,
     }
-})
+  }
+});
 
 </script>
diff --git a/src/components/transaction/NftTransactionTable.vue b/src/components/transaction/NftTransactionTable.vue
@@ -147,12 +147,16 @@ export default defineComponent({
             routeManager.routeToTransaction(t, event.ctrlKey || event.metaKey)
         }
 
+        const transactions = computed(() => {
+          return props.controller.rows.value.filter(el =>
+            !props.controller.transactionType.value || el.type === props.controller.transactionType.value
+          )
+        })
+
         return {
             isTouchDevice,
             isMediumScreen,
-            transactions: props.controller.rows as ComputedRef<
-                NftTransactionTransfer[]
-            >,
+            transactions: transactions,
             loading: props.controller.loading as ComputedRef<boolean>,
             total: props.controller.totalRowCount as ComputedRef<number>,
             currentPage: props.controller.currentPage as Ref<number>,

diff --git a/src/components/transaction/NftTransactionTableController.ts b/src/components/transaction/NftTransactionTableController.ts
@@ -89,19 +89,10 @@ export class NftTransactionTableController extends TableController<
         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 r = await axios.get<NftTransactionHistory>(
             `api/v1/tokens/${this.tokenId.value}/nfts/${this.serialNumber.value}/transactions`,
             {params: params},

diff --git a/src/components/transaction/TransactionFilterSelect.vue b/src/components/transaction/TransactionFilterSelect.vue
@@ -40,48 +40,55 @@
 
 <script lang="ts">
 
-import {defineComponent, PropType} from "vue"
-import {TransactionType} from "@/schemas/HederaSchemas"
-import {makeTypeLabel} from "@/utils/TransactionTools"
-import {TransactionTableControllerXL} from "@/components/transaction/TransactionTableControllerXL"
-import {NftTransactionTableController} from "./NftTransactionTableController"
+import {defineComponent, PropType} from "vue";
+import {TransactionType} from "@/schemas/HederaSchemas";
+import {makeTypeLabel} from "@/utils/TransactionTools";
+import {TransactionTableControllerXL} from "@/components/transaction/TransactionTableControllerXL";
+import {NftTransactionTableController} from "./NftTransactionTableController";
 
 export default defineComponent({
-    name: "TransactionFilterSelect",
-
-    props: {
-        controller: {
-            type: Object as PropType<
-                TransactionTableControllerXL | NftTransactionTableController
-            >,
-            required: true,
-        },
-    },
+  name: "TransactionFilterSelect",
 
-    setup(props) {
-        const makeFilterLabel = (filterValue: string): string => {
-            return filterValue == ""
-                ? "TYPES: ALL"
-                : makeTypeLabel(filterValue as TransactionType)
-        }
-
-        return {
-            filterValues: makeFilterValues(),
-            selectedFilter: props.controller.transactionType,
-            makeFilterLabel,
-        }
+  props: {
+    controller: {
+      type: Object as PropType<
+        TransactionTableControllerXL | NftTransactionTableController
+      >,
+      required: true,
+    },
+    nftFilter: {
+      type: Boolean,
+      required: false,
     },
-})
-
-export function makeFilterValues(): string[] {
-    const result = Object.keys(TransactionType).sort((a, b) => {
-        return makeTypeLabel(a as TransactionType) <
-        makeTypeLabel(b as TransactionType)
-            ? -1
-            : 1
+  },
+
+  setup(props) {
+
+    const makeFilterLabel = (filterValue: string): string => {
+      return filterValue == "" ? "TYPES: ALL" : makeTypeLabel(filterValue as TransactionType)
+    }
+
+    return {
+      filterValues: makeFilterValues(props.nftFilter),
+      selectedFilter: props.controller.transactionType,
+      makeFilterLabel,
+    }
+  }
+});
+
+export function makeFilterValues(nftFilter: boolean): string[] {
+  let result = Object
+    .keys(TransactionType)
+    .sort((a, b) => {
+      return makeTypeLabel(a as TransactionType) < makeTypeLabel(b as TransactionType) ? -1 : 1;
+    })
+  if(nftFilter) {
+    result = result.filter(el => {
+      return el === "CRYPTOTRANSFER" || el.startsWith("TOKEN");
     })
-    result.splice(0, 0, "")
-    return result
+  }
+  result.splice(0, 0, "")
+  return result
 }
 
 </script>