DateTime picker for time traveling in the table data view

fda-ui/components/DBToolbar.vue

@@ -54,7 +54,9 @@ export default {
       return this.$route.params.database_id
     },
     loadingColor () {
-      return this.error ? 'red lighten-2' : 'primary'
+      return 'primary'
+      // XXX we have no `error` here...
+      // return this.error ? 'red lighten-2' : 'primary'
     }
   },
   mounted () {

fda-ui/components/DataTable.vue

+<template>
+  <div>
+    hey
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>

fda-ui/pages/databases/_database_id/tables/_table_id/index.vue

 <template>
   <div>
     <v-card>
-      <v-card-title v-if="!loading">
+      <v-row dense>
+        <v-col cols="6">
+          <v-card-title v-if="table.name">
             {{ table.name }}
           </v-card-title>
-      <v-card-subtitle v-if="!loading">
+          <v-card-subtitle v-if="table.name">
             {{ table.description }}
           </v-card-subtitle>
+        </v-col>
+        <v-col class="text-right" cols="6">
+          <v-row dense>
+            <v-col>
+              <v-menu
+                ref="dateMenu"
+                v-model="dateMenu"
+                :close-on-content-click="false"
+                :return-value.sync="date"
+                transition="scale-transition"
+                offset-y>
+                <template v-slot:activator="{ on, attrs }">
+                  <v-text-field
+                    v-model="date"
+                    label="Date"
+                    prepend-icon="mdi-calendar"
+                    readonly
+                    v-bind="attrs"
+                    v-on="on" />
+                </template>
+                <v-date-picker
+                  v-model="date"
+                  no-title
+                  scrollable>
+                  <v-spacer />
+                  <v-btn
+                    text
+                    color="primary"
+                    @click="dateMenu = false">
+                    Cancel
+                  </v-btn>
+                  <v-btn
+                    text
+                    color="primary"
+                    @click="$refs.dateMenu.save(date)">
+                    OK
+                  </v-btn>
+                </v-date-picker>
+              </v-menu>
+            </v-col>
+            <v-col>
+              <v-menu
+                ref="timeMenu"
+                v-model="timeMenu"
+                :close-on-content-click="false"
+                :nudge-right="40"
+                :return-value.sync="time"
+                transition="scale-transition"
+                offset-y
+                max-width="290px"
+                min-width="290px">
+                <template v-slot:activator="{ on, attrs }">
+                  <v-text-field
+                    v-model="time"
+                    label="Time"
+                    prepend-icon="mdi-clock-time-four-outline"
+                    readonly
+                    v-bind="attrs"
+                    v-on="on" />
+                </template>
+                <v-time-picker
+                  v-if="timeMenu"
+                  v-model="time"
+                  format="24hr"
+                  @click:minute="$refs.timeMenu.save(time)" />
+              </v-menu>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
       <v-data-table
         dense
         :headers="headers"
         :items="rows"
         :loading="loading"
-        :items-per-page="15"
+        :options.sync="options"
+        :server-items-length="total"
+        :footer-props="footerProps"
         class="elevation-1" />
     </v-card>
     <div class="mt-3">
@@ -31,6 +105,8 @@
   </div>
 </template>
 <script>
+import { format, parse } from 'date-fns'
+
 export default {
   name: 'TableListing',
   components: {
@@ -38,7 +114,26 @@ export default {
   data () {
     return {
       loading: true,
-      page: 0,
+      total: 150, // FIXME hardcoded until issue #119 is resolved
+      footerProps: {
+        'items-per-page-options': [10, 20, 30, 40, 50]
+      },
+      // datetime: Date.now(),
+      // datetime: new Date().toISOString(),
+      dateMenu: false,
+      timeMenu: false,
+      date: format(new Date(), 'yyyy-MM-dd'),
+      time: format(new Date(), 'HH:mm'),
+      options: {
+        page: 1,
+        itemsPerPage: 10
+        // sortBy: string[],
+        // sortDesc: boolean[],
+        // groupBy: string[],
+        // groupDesc: boolean[],
+        // multiSort: boolean,
+        // mustSort: boolean
+      },
       table: {
         name: null,
         description: null
@@ -53,6 +148,28 @@ export default {
       rows: []
     }
   },
+  watch: {
+    date (val) {
+      console.log('new date', val)
+      if (!val) {
+        this.date = format(new Date(), 'yyyy-MM-dd')
+      }
+      this.loadData()
+    },
+    time (val) {
+      console.log('new time', val)
+      if (!val) {
+        this.time = '00:00'
+      }
+      this.loadData()
+    },
+    options: {
+      handler () {
+        this.loadData()
+      },
+      deep: true
+    }
+  },
   mounted () {
     this.loadProperties()
     this.loadData()
@@ -75,9 +192,12 @@ export default {
       }
     },
     async loadData () {
+      const datetime = parse(`${this.date} ${this.time}`, 'yyyy-MM-dd HH:mm', new Date()).toISOString()
+      console.log(datetime)
+      this.loading = true
       try {
         let url = `/api/database/${this.$route.params.database_id}/table/${this.$route.params.table_id}/data`
-        url += `?page=${this.page}&size=10`
+        url += `?page=${this.options.page - 1}&size=${this.options.itemsPerPage}&timestamp=${datetime}`
         const res = await this.$axios.get(url)
         this.rows = res.data.result
         console.debug('table data', res.data)