diff --git a/fda-ui/components/DBToolbar.vue b/fda-ui/components/DBToolbar.vue index 66189719a86373daad7b7965274899709360afc2..55ed4b9de2f569f105debb872f0fc64c5cec09a8 100644 --- a/fda-ui/components/DBToolbar.vue +++ b/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 () { diff --git a/fda-ui/components/DataTable.vue b/fda-ui/components/DataTable.vue new file mode 100644 index 0000000000000000000000000000000000000000..c10c7ab4ba1d377153199aa2aa76ed22f5a01a1e --- /dev/null +++ b/fda-ui/components/DataTable.vue @@ -0,0 +1,23 @@ +<template> + <div> + hey + </div> +</template> + +<script> +export default { + data () { + return { + } + }, + computed: { + }, + mounted () { + }, + methods: { + } +} +</script> + +<style scoped> +</style> diff --git a/fda-ui/pages/databases/_database_id/tables/_table_id/index.vue b/fda-ui/pages/databases/_database_id/tables/_table_id/index.vue index f479f2d3a0f19fe3fa7cd369a2961398368d9979..61e85c1892d53d4645b34700ae984b52def66191 100644 --- a/fda-ui/pages/databases/_database_id/tables/_table_id/index.vue +++ b/fda-ui/pages/databases/_database_id/tables/_table_id/index.vue @@ -1,18 +1,92 @@ <template> <div> <v-card> - <v-card-title v-if="!loading"> - {{ table.name }} - </v-card-title> - <v-card-subtitle v-if="!loading"> - {{ table.description }} - </v-card-subtitle> + <v-row dense> + <v-col cols="6"> + <v-card-title v-if="table.name"> + {{ table.name }} + </v-card-title> + <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}×tamp=${datetime}` const res = await this.$axios.get(url) this.rows = res.data.result console.debug('table data', res.data)