History

src/router/index.js

@@ -37,11 +37,12 @@ const routes = [
   {
     path: '/history',
     name: 'history',
+    props: true,
     component: () => import('../views/History.vue'),
     children: [
       {
         // при совпадении пути с шаблоном /history/:id
-        path: ':id',
+        path: ':wallet(\\d{20})',
         props: true,
         component: () => import('../views/Table.vue'),
       },

src/store/modules/currency.js

@@ -6,13 +6,15 @@ const currency = {
     currencies: [],
     wallets: [],
     rates: [],
+    history: [],
   },
 
   getters: {
     currencies: state => state.currencies,
     allWallets: state => state.wallets,
     fee: state => state.settings.fee,
     rates: state => state.rates,
+    history: state => state.history,
   },
 
   mutations: {
@@ -28,6 +30,9 @@ const currency = {
     SET_ALL_WALLETS: (state, payload) => {
       state.wallets = payload.wallets || state.wallets;
     },
+    SET_HISTORY: (state, payload) => {
+      state.history = payload.history || state.history;
+    },
   },
 
   actions: {
@@ -52,6 +57,13 @@ const currency = {
       console.log('[Rates] response: ', JSON.stringify(response));
     },
 
+    History: async ({ commit }, payload) => {
+      console.log('[History]');
+      const response = await request('/history', payload);
+      await commit('SET_HISTORY', response);
+      console.log('[History] response: ', JSON.stringify(response));
+    },
+
     AllWallets: async ({ commit }) => {
       console.log('[Currencies]');
       const response = await request('/wallets/all');

src/store/modules/user.js

@@ -40,7 +40,7 @@ const user = {
   actions: {
     ForAuthorized: async ({ commit, dispatch }, payload) => {
       console.log('[ForAuthorized]', payload);
-      await commit('SET_USER_INFO', payload.user);
+      await commit('SET_USER_INFO', payload.user || {});
       await dispatch('UserWallets');
       await dispatch('AllWallets');
     },

src/views/History.vue

@@ -7,17 +7,55 @@
       <v-list-item-content>
         <div class="overline mb-4">History</div>
         <v-autocomplete
-          v-model="from"
+          v-model="wallet"
           label="Wallet"
           :items="userWallets"
           item-text="description"
           item-value="account"
           dense
+          @change="onChange()"
         ></v-autocomplete>
+
+          <v-row>
+            <v-col cols="12" md="6">
+              <v-menu
+                v-model="menuDates"
+                :close-on-content-click="false"
+                :nudge-right="40"
+                transition="scale-transition"
+                show-current
+                offset-y
+              >
+                <template v-slot:activator="{ on }">
+                  <v-text-field
+                    v-model="dateRangeText"
+                    label="Date range"
+                    prepend-icon="mdi-calendar-multiple"
+                    readonly
+                    v-on="on"
+                  ></v-text-field>
+                </template>
+                <v-date-picker
+                  v-model="dates"
+                  range
+                ></v-date-picker>
+              </v-menu>
+            </v-col>
+            <v-col cols="12" md="6">
+              <v-text-field
+                v-model="search"
+                label="Search"
+                prepend-icon="mdi-magnify"
+                single-line
+                hide-details
+              ></v-text-field>
+            </v-col>
+          </v-row>
       </v-list-item-content>
     </v-list-item>
+
     <v-card-text>
-      <router-view></router-view>
+      <router-view :search="search"></router-view>
     </v-card-text>
   </v-card>
 </template>
@@ -33,20 +71,46 @@ export default {
       'allWallets',
       'fee',
     ]),
+    dateRangeText() {
+      return this.dates.join(' ~ ');
+    },
   },
   data: () => ({
-    from: '',
+    wallet: '',
+    search: '',
+    dates: ['2019-08-25', '2019-11-25'],
+    menuDates: false,
   }),
+  watch: {
+    menuDates(val) {
+      if (!val) this.onChange();
+    },
+  },
   created() {
-    this.fetchData();
+    this.wallet = this.$route.params.wallet || '';
+    this.onChange();
   },
-  /* watch: {
-    // при изменениях маршрута запрашиваем данные снова
-    $route: 'fetchData';
-  }, */
   methods: {
-    fetchData() {
-      console.log(`fetchData ${this.from}`);
+    onChange() {
+      if (this.wallet === '') {
+        return;
+      }
+
+      const options = {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+      };
+
+      const date1 = this.dates[0] ? new Date(this.dates[0]) : Date.now();
+      const date2 = this.dates[1] ? new Date(this.dates[1]) : date1;
+
+      this.$store.dispatch('History', {
+        wallet: this.wallet,
+        datefrom: (date1 < date2 ? date1 : date2).toLocaleString('ru', options),
+        dateto: (date1 < date2 ? date2 : date1).toLocaleString('ru', options),
+      });
+      this.$router.push(`/history/${this.wallet}`);
     },
   },
 };

src/views/Table.vue

@@ -1,8 +1,10 @@
 <template>
   <v-data-table
     :headers="headers"
-    :items="userWallets"
+    :items="history"
     :items-per-page="5"
+    :search="search"
+    dense
   >
     <template v-slot:item.history="{ item }">
       <v-btn text small link :to="`/history/${item.id}`">
@@ -13,13 +15,31 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   name: 'Table',
   props: {
-    id: {
+    wallet: {
       type: String,
       default: '',
     },
+    search: {
+      type: String,
+      default: '',
+    },
+  },
+  data: () => ({
+    headers: [
+      { text: 'Wallet', value: 'wallet' },
+      { text: 'Sum', value: 'sum', align: 'end' },
+      { text: 'Date', value: 'date' },
+    ],
+  }),
+  computed: {
+    ...mapGetters([
+      'history',
+    ]),
   },
 };
 </script>

src/views/Wallet.vue

@@ -15,7 +15,7 @@
         :items-per-page="5"
       >
         <template v-slot:item.history="{ item }">
-          <v-btn text small link :to="`/history/${item.id}`">
+          <v-btn text small link :to="`/history/${item.account}`">
             <v-icon>mdi-history</v-icon>
           </v-btn>
         </template>