Account Transactions time filterable (#909)

Signed-off-by: Tim Schmidt <[email protected]> Signed-off-by: Eric Le Ponner <[email protected]> Co-authored-by: Eric Le Ponner <[email protected]>
hashgraph · Mar 18, 2024 · fbbcc5c · fbbcc5c
1 parent 045876a
commit fbbcc5c
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 4 deletions.
diff --git a/src/components/DateTimePicker.vue b/src/components/DateTimePicker.vue
@@ -0,0 +1,95 @@
+<!--
+  -
+  - Hedera Mirror Node Explorer
+  -
+  - Copyright (C) 2021 - 2024 Hedera Hashgraph, LLC
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -      http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -
+  -->
+
+<!--Documentation for vue-datepicker: https://vue3datepicker.com-->
+
+<template>
+  <div class="is-flex is-align-items-center">
+    <Datepicker v-model="date" placeholder="SELECT A DATE" :is-24="false" time-picker-inline dark @closed="handleClosed" @cleared="$emit('dateCleared')"/>
+  </div>
+</template>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                      SCRIPT                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<script lang="ts">
+
+import {defineComponent, onMounted, PropType, ref} from "vue";
+import {TableController} from "@/utils/table/TableController";
+import Datepicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+import { TransactionTableControllerXL } from "@/components/transaction/TransactionTableControllerXL";
+
+export default defineComponent({
+  name: "DateTimePicker",
+
+  components: {
+    Datepicker
+  },
+
+  props: {
+    controller: Object as PropType<TransactionTableControllerXL>
+  },
+
+  emits: ["dateCleared"],
+
+  setup(props) {
+    const date = ref(new Date())
+    const handleClosed = () => {
+      if (props.controller) {
+        const controller = props.controller
+        // + 60 to account for when users select for a transaction executed
+        //  the minute they selected
+        const timestamp = (date.value as Date).getTime() / 1000 + 60
+        controller.onKeyChange(timestamp.toString())
+      } else {
+        console.log("Ignoring click because props.controller is undefined")
+      }
+    }
+
+    return {
+      handleClosed,
+      date
+    }
+  }
+});
+
+</script>
+
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+<!--                                                       STYLE                                                     -->
+<!-- --------------------------------------------------------------------------------------------------------------- -->
+
+<style>
+.dp__theme_dark {
+  --dp-background-color: var(--h-theme-box-background-color);
+  --dp-primary-color: #575757;
+  --dp-border-color: white;
+  --dp-border-color-hover: white;
+  --dp-icon-color: white;
+}
+:root {
+  --dp-font-family: "Styrene A Web", sans-serif;
+  --dp-border-radius: 0;
+  --dp-font-size: 11px;
+  --dp-input-padding: 3.5px 30px 3.5px 12px
+}
+</style>
diff --git a/src/pages/AccountDetails.vue b/src/pages/AccountDetails.vue
@@ -219,8 +219,15 @@
       </template>
       <template v-slot:control>
           <div v-if="selectedTab === 'transactions'" class="is-flex is-align-items-flex-end">
-              <PlayPauseButton :controller="transactionTableController"/>
-              <TransactionFilterSelect :controller="transactionTableController"/>
+            <PlayPauseButton v-if="timeSelection == 'LATEST'" :controller="transactionTableController"/>
+            <DateTimePicker v-else :controller="transactionTableController" @dateCleared="onDateCleared"/>
+            <o-field style="margin-bottom: 0">
+              <o-select v-model="timeSelection" class="ml-2 h-is-text-size-1">
+                <option value="LATEST">LATEST</option>
+                <option value="JUMP">JUMP TO DATE</option>
+              </o-select>
+            </o-field>
+            <TransactionFilterSelect :controller="transactionTableController"/>
           </div>
           <div v-else-if="selectedTab === 'contracts'" class="is-flex is-justify-content-end is-align-items-center">
               <PlayPauseButton v-if="!filterVerified" :controller="contractCreateTableController"/>
@@ -275,7 +282,7 @@
 
 <script lang="ts">
 
-import {computed, defineComponent, inject, onBeforeUnmount, onMounted, ref} from 'vue';
+import {computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch} from 'vue';
 import KeyValue from "@/components/values/KeyValue.vue";
 import PlayPauseButton from "@/components/PlayPauseButton.vue";
 import TransactionTable from "@/components/transaction/TransactionTable.vue";
@@ -316,6 +323,7 @@ import Tabs from "@/components/Tabs.vue";
 import AccountCreatedContractsTable from "@/components/account/AccountCreatedContractsTable.vue";
 import {VerifiedContractsByAccountIdCache} from "@/utils/cache/VerifiedContractsByAccountIdCache";
 import {VerifiedContractsController} from "@/components/contract/VerifiedContractsController";
+import DateTimePicker from "@/components/DateTimePicker.vue";
 
 export default defineComponent({
 
@@ -326,6 +334,7 @@ export default defineComponent({
     VerifiedContractsTable,
     EmptyTable,
     Tabs,
+    DateTimePicker,
     MirrorLink,
     InlineBalancesValue,
     Copyable,
@@ -362,6 +371,22 @@ export default defineComponent({
     const isMediumScreen = inject('isMediumScreen', true)
     const isTouchDevice = inject('isTouchDevice', false)
 
+    const timeSelection = ref("LATEST")
+    watch(timeSelection, (newValue, oldValue) => {
+        if (newValue !== oldValue) {
+            if (timeSelection.value == "LATEST") {
+                transactionTableController.startAutoRefresh() // (1)
+            } else {
+                transactionTableController.stopAutoRefresh()
+            }
+        }
+    })
+
+    function onDateCleared() {
+      timeSelection.value = "LATEST"
+      // (1) will restart auto-refresh
+    }
+
     //
     // account
     //
@@ -482,10 +507,12 @@ export default defineComponent({
       tabLabels,
       handleTabUpdate,
       filterVerified,
+      timeSelection,
+      onDateCleared
     }
   }
 });
 
 </script>
 
-<style/>
+<style/>
diff --git a/src/utils/table/TableController.ts b/src/utils/table/TableController.ts
@@ -132,6 +132,15 @@ export abstract class TableController<R, K> implements PlayPauseController {
         }
     }
 
+    public readonly onKeyChange = (key: K): void => {
+        if (this.mountedRef.value) {
+            if (this.autoRefresh.value) {
+                this.stopAutoRefresh(1)
+            }
+            this.moveBufferToPage(1, key).catch(this.errorHandler)
+        }
+    }
+
     //
     // Public (to be subclassed)
     //