feat: Filter transactions table by date

cypress/e2e/app/charts.cy.js

@@ -3,7 +3,7 @@ describe('charts', () => {
     cy.visit('/charts/transactions')
     cy.get('.charts-navigation__link').should('be.visible')
     cy.get('.chart-controls__button').should('be.visible')
-    cy.get('.range-picker').should('be.visible')
+    cy.get('.scope-picker').should('be.visible')
     cy.get('.transactions-chart-panel__select').should('be.visible')
     cy.get('.line-chart canvas').should('be.visible')
     cy.get('.chart-controls__button').should('be.visible')

cypress/e2e/app/transactions.cy.js

@@ -28,4 +28,61 @@ describe('transactions', () => {
           })
       })
   })
+
+  it('should select  date', () => {
+    cy.visit('/transactions')
+
+    cy.get('.paginated-content .scope-picker').click()
+    cy.get('.dp__today').click()
+    cy.get('.dp__today').parent().prev().click()
+
+    cy.url().should('include', 'scope=')
+    cy.get('.paginated-content .dp__input').should('not.have.value', '')
+  })
+  it('should select type', () => {
+    cy.visit('/transactions')
+
+    cy.get('.paginated-content .multiselect').click()
+    cy.contains('.paginated-content .multiselect__option', 'SpendTx').click()
+
+    cy.url().should('include', 'txType=spend')
+    cy.get('.paginated-content .multiselect__single').contains('SpendTx')
+  })
+
+  it('should select combined parameters', () => {
+    cy.visit('/transactions')
+
+    cy.get('.paginated-content .scope-picker').click()
+    cy.get('.dp__today').click()
+    cy.get('.dp__today').parent().prev().click()
+
+    cy.get('.paginated-content .multiselect').click()
+    cy.contains('.paginated-content .multiselect__option', 'NameClaimTx').click()
+
+    cy.url().should('include', 'txType=name_claim').should('include', 'scope=')
+    cy.get('.paginated-content .multiselect__single').contains('NameClaimTx')
+    cy.get('.paginated-content .dp__input').should('not.have.value', '')
+  })
+
+  it('should filter by combining parameters from direct URL access', () => {
+    cy.visit('/transactions?scope=1733871600-1733958000&txType=spend')
+
+    cy.get('.paginated-content .multiselect__single').contains('SpendTx')
+    cy.get('.transactions-table tbody tr').should('have.length', 10)
+    cy.get('.transactions-table tbody tr').contains('td', 'SpendTx').should('have.length', 1)
+    cy.get('.paginated-content .dp__input')
+      .should('have.value', '12/11/2024 - 12/12/2024')
+  })
+
+  it('should cancel filtering and clear url', () => {
+    cy.visit('/transactions?scope=1733871600-1733958000&txType=contract_create')
+
+    cy.get('.paginated-content .multiselect').click()
+    cy.contains('.paginated-content .multiselect__option', 'All Types').click()
+    cy.get('.dp--clear-btn').click()
+
+    cy.url().should('eq', Cypress.config().baseUrl + '/transactions')
+    cy.get('.paginated-content .multiselect__single').contains('All Types')
+    cy.get('.paginated-content .dp__input').should('have.value', '')
+  })
 })

package.json

@@ -26,7 +26,7 @@
     "reinstall": "rm -rf node_modules/ && yarn cache clean && yarn install",
     "reset": "yarn reinstall && yarn dev",
     "e2e:run": "cypress run",
-    "e2e:open": "cypress open"
+    "e2e": "cypress open"
   },
   "dependencies": {
     "@aeternity/aepp-sdk": "14.0.0",

src/components/AccountsChartPanel.vue

@@ -14,7 +14,7 @@
 
     <line-chart
       :data="accountsStatistics"
-      :interval="range.interval"/>
+      :interval-by="range.intervalBy"/>
 
     <chart-controls
       v-model="range"
@@ -26,7 +26,7 @@
 import { storeToRefs } from 'pinia'
 import { chartsHints } from '@/utils/hints/chartsHints'
 import { useChartsStore } from '@/stores/charts'
-import { CHART_INTERVALS_PRESETS_OPTIONS } from '~/utils/constants'
+import { CHART_SCOPE_PRESETS_OPTIONS } from '~/utils/constants'
 
 const chartsStore = useChartsStore()
 const { accountsStatistics } = storeToRefs(chartsStore)
@@ -35,33 +35,33 @@ const { fetchAccountsStatistics } = chartsStore
 const props = defineProps({
   preselectedRange: {
     type: Object,
-    default: CHART_INTERVALS_PRESETS_OPTIONS[4],
+    default: CHART_SCOPE_PRESETS_OPTIONS[4],
   },
 })
 
 const range = ref(props.preselectedRange)
 
 await useAsyncData(async() => {
-  await loadHashrateStatistics()
+  await loadAccountStatistics()
   return true
 })
 
 if (process.client) {
   watch([range], async() => {
-    await loadHashrateStatistics()
+    await loadAccountStatistics()
   })
 }
 
-async function loadHashrateStatistics() {
+async function loadAccountStatistics() {
   await fetchAccountsStatistics(
-    range.value.interval,
+    range.value.intervalBy,
     range.value.limit,
-    range.value.customInterval)
+    range.value.scope)
 }
 </script>
 
 <style scoped>
-.accounts-chart-pane__controls {
+.accounts-chart-panel__controls {
   margin-top: var(--space-4);
 }
 </style>

src/components/AppSelect.vue

@@ -10,9 +10,7 @@
     :searchable="searchable"
     :hide-selected="hideSelected"
     :preselect-first="preselectFirst"
-    :class="[
-      size ? `multiselect--${size}` : null,
-    ]">
+    :class="[ size ? `multiselect--${size}` : null]">
     <template
       v-for="(_, slot) of $slots"
       #[slot]="scope">
@@ -184,7 +182,7 @@ const selectedValue = useVModel(props, 'modelValue', emit)
 
   &--sm {
     .multiselect__tags {
-      min-height: 28px;
+      min-height: 31px;
       padding: 0 var(--space-6) 0 var(--space-1);
     }
 
@@ -199,7 +197,7 @@ const selectedValue = useVModel(props, 'modelValue', emit)
     }
 
     .multiselect__select {
-      height: 29px;
+      height: 32px;
     }
   }
 }

src/components/ChartControls.vue

@@ -2,16 +2,17 @@
   <div>
     <div class="chart-controls__container">
       <app-chip
-        v-for="option in CHART_INTERVALS_PRESETS_OPTIONS"
+        v-for="option in CHART_SCOPE_PRESETS_OPTIONS"
         :key="option.label"
         class="chart-controls__button"
         :variant="isPresetSelected(option) ? 'error' : 'secondary'"
         @click="selectPreset(option)">
         {{ option.label }}
       </app-chip>
-      <range-picker
-        :is-range-selected="isCustomIntervalSelected"
-        @updated="selectCustomInterval"/>
+
+      <scope-picker
+        :is-scope-selected="isCustomScopeSelected"
+        @updated="selectCustomScope"/>
     </div>
   </div>
 </template>
@@ -23,32 +24,30 @@ const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
   modelValue: {
-    type: Number,
-    default: 0,
+    type: Object,
+    default: null,
   },
 })
 
-const selectedRange = useVModel(props, 'modelValue', emit)
+const selectedScope = useVModel(props, 'modelValue', emit)
 
-const isCustomIntervalSelected = computed(() =>
-  Object.keys(selectedRange.value).includes('customInterval'))
+const isCustomScopeSelected = computed(() => Object.keys(selectedScope.value).includes('scope'))
 
-function isPresetSelected(option) {
-  return selectedRange.value.label === option.label
+function selectCustomScope(scope) {
+  selectedScope.value = {
+    scope: {
+      minStart: scope[0],
+      maxStart: scope[1],
+    },
+  }
 }
 
-function selectPreset(option) {
-  selectedRange.value = option
+function isPresetSelected(option) {
+  return selectedScope.value.label === option.label
 }
 
-function selectCustomInterval(dateCustomInterval) {
-  const customInterval = {
-    customInterval: {
-      minStart: dateCustomInterval[0].toISOString().split('T')[0],
-      maxStart: dateCustomInterval[1].toISOString().split('T')[0],
-    },
-  }
-  selectedRange.value = customInterval
+function selectPreset(option) {
+  selectedScope.value = option
 }
 
 </script>

src/components/ContractsChartPanel.vue

@@ -11,7 +11,7 @@
 
     <line-chart
       :data="contractsStatistics"
-      :interval="range.interval"/>
+      :interval-by="range.intervalBy"/>
 
     <chart-controls
       v-model="range"
@@ -23,7 +23,7 @@
 import { storeToRefs } from 'pinia'
 import { useChartsStore } from '@/stores/charts'
 import LineChart from '@/components/LineChart'
-import { CHART_INTERVALS_PRESETS_OPTIONS } from '~/utils/constants'
+import { CHART_SCOPE_PRESETS_OPTIONS } from '@/utils/constants'
 
 const chartsStore = useChartsStore()
 const { contractsStatistics } = storeToRefs(chartsStore)
@@ -32,7 +32,7 @@ const { fetchContractsStatistics } = chartsStore
 const props = defineProps({
   preselectedRange: {
     type: Object,
-    default: CHART_INTERVALS_PRESETS_OPTIONS[4],
+    default: CHART_SCOPE_PRESETS_OPTIONS[4],
   },
 })
 
@@ -51,11 +51,10 @@ if (process.client) {
 
 async function loadContractsStatistics() {
   await fetchContractsStatistics(
-    range.value.interval,
+    range.value.intervalBy,
     range.value.limit,
-    range.value.customInterval)
+    range.value.scope)
 }
-
 </script>
 
 <style scoped>

src/components/DifficultyChartPanel.vue

@@ -11,7 +11,7 @@
 
     <line-chart
       :data="difficultyStatistics"
-      :interval="range.interval"/>
+      :interval-by="range.intervalBy"/>
 
     <chart-controls
       v-model="range"
@@ -22,13 +22,13 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useChartsStore } from '@/stores/charts'
-import { CHART_INTERVALS_PRESETS_OPTIONS } from '@/utils/constants'
+import { CHART_SCOPE_PRESETS_OPTIONS } from '@/utils/constants'
 
 const chartsStore = useChartsStore()
 const { difficultyStatistics } = storeToRefs(chartsStore)
 const { fetchDifficultyStatistics } = chartsStore
 
-const range = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const range = ref(CHART_SCOPE_PRESETS_OPTIONS[4])
 
 await useAsyncData(async() => {
   await loadDifficultytatistics()
@@ -43,9 +43,9 @@ if (process.client) {
 
 async function loadDifficultytatistics() {
   await fetchDifficultyStatistics(
-    range.value.interval,
+    range.value.intervalBy,
     range.value.limit,
-    range.value.customInterval)
+    range.value.scope)
 }
 </script>
 

src/components/HashrateChartPanel.vue

@@ -11,26 +11,29 @@
 
     <line-chart
       :data="hashrateStatistics"
-      :interval="range.interval"/>
+      :interval-by="range.intervalBy"/>
 
     <chart-controls
       v-model="range"
-      class="hashrate-chart-panel__controls u-hidden-desktop"/>
+      :interval="range.interval"/>
+
+    class="hashrate-chart-panel__controls u-hidden-desktop"/>
   </app-panel>
 </template>
 
 <script setup>
 import { storeToRefs } from 'pinia'
 import { useChartsStore } from '@/stores/charts'
+import { CHART_SCOPE_PRESETS_OPTIONS } from '@/utils/constants'
 
 const chartsStore = useChartsStore()
 const { hashrateStatistics } = storeToRefs(chartsStore)
 const { fetchHashrateStatistics } = chartsStore
 
-const range = ref(CHART_INTERVALS_PRESETS_OPTIONS[4])
+const range = ref(CHART_SCOPE_PRESETS_OPTIONS[4])
 
 await useAsyncData(async() => {
-  await loadHashratetatistics()
+  await loadHashrateStatistics()
   return true
 })
 
@@ -40,16 +43,16 @@ if (process.client) {
   })
 }
 
-async function loadHashratetatistics() {
+async function loadHashrateStatistics() {
   await fetchHashrateStatistics(
-    range.value.interval,
+    range.value.intervalBy,
     range.value.limit,
-    range.value.customInterval)
+    range.value.scope)
 }
 </script>
 
 <style scoped>
-.hashrate-chart-pane__controls {
+.hashrate-chart-panel__controls {
   margin-top: var(--space-4);
 }
 </style>