Activity filter fixes

src/components/ActivityFilter.vue

@@ -23,7 +23,7 @@
           {{ $t('components.activityFilter.dateRange') }}
         </div>
         <div class="date-filter-inputs h-padding form">
-          <date-pick v-model="dateFilters.start">
+          <date-pick v-model="dateFilters.start" @input="changeTrigered">
             <template v-slot:default="{ toggle, inputValue, inputEvents }">
               <div class="input-group" @click="toggle">
                 <input
@@ -37,7 +37,7 @@
               </div>
             </template>
           </date-pick>
-          <date-pick v-model="dateFilters.end">
+          <date-pick v-model="dateFilters.end" @input="changeTrigered">
             <template v-slot:default="{ toggle, inputValue, inputEvents }">
               <div class="input-group" @click="toggle">
                 <input
@@ -261,6 +261,11 @@ export default {
         statuses,
         dates: this.dateFilters
       })
+    },
+    changeTrigered() {
+      this.$nextTick(() => {
+        this.applyFilters()
+      })
     }
   }
 }

src/components/NoTransactionsFound.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="empty-state">
+    <p>{{ message || 'Sorry, no results found' }}</p>
+  </div>
+</template>
+<script>
+export default {
+  name: 'NoTransactionsFound',
+  props: ['message']
+}
+</script>
+<style scoped lang="scss">
+.empty-state {
+  min-height: 300px;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  p {
+    font-size: 1rem;
+    margin: 0;
+  }
+}
+</style>

src/components/TransactionList.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="transaction-list">
+    <NoTransactionsFound v-if="!transactions.length" />
     <ListItem
+      v-else
       v-for="item in transactions"
       :key="item.id"
       :id="item.type + '_' + item.from + '_' + item.to"
@@ -39,6 +41,8 @@
 <script>
 import ListItem from '@/components/ListItem'
 import TransactionStatus from '@/components/TransactionStatus'
+import NoTransactionsFound from '@/components/NoTransactionsFound.vue'
+
 import {
   getStep,
   ACTIVITY_STATUSES,
@@ -58,7 +62,8 @@ import { mapState } from 'vuex'
 export default {
   components: {
     ListItem,
-    TransactionStatus
+    TransactionStatus,
+    NoTransactionsFound
   },
   props: ['transactions'],
   computed: {
@@ -156,4 +161,4 @@ export default {
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="sss"></style>

src/views/Wallet/WalletActivity.vue

@@ -3,11 +3,11 @@
     <ActivityFilter
       @filters-changed="applyFilters"
       :activity-data="activityData"
-      v-if="activityData.length > 0"
+      v-if="activity.length"
       :showTypeFilters="true"
     />
-    <TransactionList :transactions="activityData" />
-    <EmptyActivity v-show="activityData.length <= 0" :active-network="activeNetwork" />
+    <TransactionList v-if="activity.length" :transactions="activityData" />
+    <EmptyActivity v-else :active-network="activeNetwork" />
   </div>
 </template>