From 351b5ca0910003954864c0cd511f195a43e91a7c Mon Sep 17 00:00:00 2001 From: Martin Weise <martin.weise@tuwien.ac.at> Date: Thu, 21 Jul 2022 11:16:19 +0800 Subject: [PATCH] Fixed the date format issue in the frontend, added back buttons to table import --- fda-ui/components/QueryList.vue | 4 +-- fda-ui/components/TableList.vue | 4 +-- fda-ui/components/TableSchema.vue | 12 +++++++ fda-ui/components/dialogs/CreateDB.vue | 2 +- fda-ui/components/dialogs/TimeTravel.vue | 11 ++++-- .../database/_database_id/info.vue | 4 +-- .../_database_id/query/_query_id/index.vue | 4 +-- .../_database_id/table/_table_id/index.vue | 6 ++-- .../database/_database_id/table/import.vue | 34 +++++++++++++++---- fda-ui/pages/container/index.vue | 4 +-- fda-ui/pages/login.vue | 2 +- fda-ui/pages/signup.vue | 2 +- fda-ui/utils/index.js | 11 +++++- 13 files changed, 75 insertions(+), 25 deletions(-) diff --git a/fda-ui/components/QueryList.vue b/fda-ui/components/QueryList.vue index ae0c9a11c5..248123b98f 100644 --- a/fda-ui/components/QueryList.vue +++ b/fda-ui/components/QueryList.vue @@ -73,7 +73,7 @@ </template> <script> -import { formatTimestampUTC } from '@/utils' +import { formatTimestampUTCLabel } from '@/utils' export default { data () { return { @@ -109,7 +109,7 @@ export default { } }, executionUTC () { - return formatTimestampUTC(this.queryDetails.execution) + return formatTimestampUTCLabel(this.queryDetails.execution) } }, mounted () { diff --git a/fda-ui/components/TableList.vue b/fda-ui/components/TableList.vue index 85082db335..ebb6ca3aac 100644 --- a/fda-ui/components/TableList.vue +++ b/fda-ui/components/TableList.vue @@ -147,7 +147,7 @@ </template> <script> -import { formatTimestampUTC } from '@/utils' +import { formatTimestampUTCLabel } from '@/utils' export default { data () { return { @@ -206,7 +206,7 @@ export default { } }, createdUTC () { - return formatTimestampUTC(this.tableDetails.created) + return formatTimestampUTCLabel(this.tableDetails.created) } }, mounted () { diff --git a/fda-ui/components/TableSchema.vue b/fda-ui/components/TableSchema.vue index 76f8054431..f4b5347517 100644 --- a/fda-ui/components/TableSchema.vue +++ b/fda-ui/components/TableSchema.vue @@ -86,6 +86,9 @@ </v-btn> </div> <div> + <v-btn v-if="back" class="mt-10 mr-2 mb-1" @click="stepBack()"> + Back + </v-btn> <v-btn color="primary" :loading="finished" :disabled="!valid" class="mt-10 mb-1" @click="submit()"> Continue </v-btn> @@ -108,6 +111,12 @@ export default { default () { return false } + }, + back: { + type: Boolean, + default () { + return false + } } }, data () { @@ -163,6 +172,9 @@ export default { column.null_allowed = false column.unique = true }, + stepBack () { + this.$emit('close', { success: false }) + }, canRemove (idx) { if (idx > 0) { return true diff --git a/fda-ui/components/dialogs/CreateDB.vue b/fda-ui/components/dialogs/CreateDB.vue index e78fec9fc1..799c934d0d 100644 --- a/fda-ui/components/dialogs/CreateDB.vue +++ b/fda-ui/components/dialogs/CreateDB.vue @@ -2,7 +2,6 @@ <div> <v-form ref="form" v-model="valid" @submit.prevent="submit"> <v-card> - <v-progress-linear v-if="loading" :color="loadingColor" :indeterminate="!error" /> <v-card-title> Create Database </v-card-title> @@ -57,6 +56,7 @@ :disabled="!valid || loading" color="primary" type="submit" + :loading="loading" @click="createDB"> Create </v-btn> diff --git a/fda-ui/components/dialogs/TimeTravel.vue b/fda-ui/components/dialogs/TimeTravel.vue index 7d9ba0e89f..7c3e940100 100644 --- a/fda-ui/components/dialogs/TimeTravel.vue +++ b/fda-ui/components/dialogs/TimeTravel.vue @@ -15,6 +15,7 @@ required :rules="[v => !!v || $t('Required'), v => v && /^[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}$/.test(v) || $t('Please us the pattern yyyy-MM-dd HH:mm:ss')]" hint="e.g. 2022-07-04 12:53:00" + suffix="UTC" class="mb-4" type="text" /> The following chart summarizes changes (insert/update/delete) in the dataset and give an indication where @@ -56,6 +57,7 @@ <script> import { Bar } from 'vue-chartjs/legacy' import { Chart as ChartJS, Title, Tooltip, BarElement, CategoryScale, LinearScale, LogarithmicScale } from 'chart.js' +import { formatTimestampUTC, formatTimestampUTCLabel } from '@/utils' ChartJS.register(Title, Tooltip, BarElement, CategoryScale, LinearScale, LogarithmicScale) @@ -135,8 +137,13 @@ export default { headers: this.requestHeaders }) this.error = false - this.chartData.labels = res.data.map(d => d.timestamp) - this.chartData.dates = res.data.map(d => d.timestamp) + this.chartData.labels = res.data.map(function (d, idx) { + if (idx === 0) { + return 'Origin' + } + return formatTimestampUTCLabel(d.timestamp) + }) + this.chartData.dates = res.data.map(d => formatTimestampUTC(d.timestamp)) this.chartData.datasets = [{ backgroundColor: this.$vuetify.theme.themes.light.primary, data: res.data.map(d => d.total) diff --git a/fda-ui/pages/container/_container_id/database/_database_id/info.vue b/fda-ui/pages/container/_container_id/database/_database_id/info.vue index 1642d7a2e6..e9ee0abe79 100644 --- a/fda-ui/pages/container/_container_id/database/_database_id/info.vue +++ b/fda-ui/pages/container/_container_id/database/_database_id/info.vue @@ -92,7 +92,7 @@ <script> import DBToolbar from '@/components/DBToolbar' import EditDB from '@/components/dialogs/EditDB' -import { formatTimestampUTC } from '@/utils' +import { formatTimestampUTCLabel } from '@/utils' export default { components: { @@ -156,7 +156,7 @@ export default { } }, createdUTC () { - return formatTimestampUTC(this.database.created) + return formatTimestampUTCLabel(this.database.created) }, language () { return this.database.language === null ? '(none)' : this.database.language diff --git a/fda-ui/pages/container/_container_id/database/_database_id/query/_query_id/index.vue b/fda-ui/pages/container/_container_id/database/_database_id/query/_query_id/index.vue index aeadd39937..65adfc6c8d 100644 --- a/fda-ui/pages/container/_container_id/database/_database_id/query/_query_id/index.vue +++ b/fda-ui/pages/container/_container_id/database/_database_id/query/_query_id/index.vue @@ -214,7 +214,7 @@ <script> import PersistQuery from '@/components/dialogs/PersistQuery' import OrcidIcon from '@/components/icons/OrcidIcon' -import { formatTimestampUTC } from '@/utils' +import { formatTimestampUTCLabel } from '@/utils' export default { name: 'QueryShow', @@ -345,7 +345,7 @@ export default { return 'sha256:' + (this.identifier.id ? this.identifier.result_hash : this.query.result_hash) }, executionUTC () { - return this.identifier.id ? formatTimestampUTC(this.identifier.execution) : formatTimestampUTC(this.query.execution) + return this.identifier.id ? formatTimestampUTCLabel(this.identifier.execution) : formatTimestampUTCLabel(this.query.execution) }, creator () { if (this.query.creator.username === null) { diff --git a/fda-ui/pages/container/_container_id/database/_database_id/table/_table_id/index.vue b/fda-ui/pages/container/_container_id/database/_database_id/table/_table_id/index.vue index df0ec49cfb..5e153b3cc9 100644 --- a/fda-ui/pages/container/_container_id/database/_database_id/table/_table_id/index.vue +++ b/fda-ui/pages/container/_container_id/database/_database_id/table/_table_id/index.vue @@ -74,7 +74,7 @@ <script> import EditTuple from '@/components/dialogs/EditTuple' import TimeTravel from '@/components/dialogs/TimeTravel' -import { formatTimestampUTC, formatDateUTC } from '@/utils' +import { formatTimestampUTCLabel, formatDateUTC } from '@/utils' export default { components: { @@ -142,7 +142,7 @@ export default { if (this.version === null) { return null } - return this.formatDate(this.version) + return formatTimestampUTCLabel(this.version) }, canEdit () { if (this.selection.length !== 1) { return false } @@ -245,7 +245,7 @@ export default { if (columnDefinition[0].column_type === 'DATE') { row[col] = formatDateUTC(row[col]) } else if (columnDefinition[0].column_type === 'TIMESTAMP') { - row[col] = formatTimestampUTC(row[col]) + row[col] = formatTimestampUTCLabel(row[col]) } } } diff --git a/fda-ui/pages/container/_container_id/database/_database_id/table/import.vue b/fda-ui/pages/container/_container_id/database/_database_id/table/import.vue index 425213eedf..bd10a89322 100644 --- a/fda-ui/pages/container/_container_id/database/_database_id/table/import.vue +++ b/fda-ui/pages/container/_container_id/database/_database_id/table/import.vue @@ -31,7 +31,7 @@ </v-row> <v-row dense> <v-col cols="8"> - <v-btn :disabled="!validStep1" color="primary" type="submit" @click="step = 2"> + <v-btn :disabled="!validStep1" class="mb-1" color="primary" type="submit" @click="step = 2"> Continue </v-btn> </v-col> @@ -110,7 +110,16 @@ </v-row> <v-row dense> <v-col cols="6"> - <v-btn :disabled="!validStep2" :loading="loading" color="primary" type="submit" @click="step = 3">Next</v-btn> + <v-btn class="mr-2 mb-1" @click="step = 1">Back</v-btn> + <v-btn + class="mb-1" + :disabled="!validStep2" + :loading="loading" + color="primary" + type="submit" + @click="step = 3"> + Continue + </v-btn> </v-col> </v-row> </v-form> @@ -142,7 +151,16 @@ </v-row> <v-row dense> <v-col cols="6"> - <v-btn :disabled="!file" :loading="loading" color="primary" type="submit" @click="upload">Next</v-btn> + <v-btn class="mr-2 mb-1" @click="step = 2">Back</v-btn> + <v-btn + class="mb-1" + :disabled="!file" + :loading="loading" + color="primary" + type="submit" + @click="upload"> + Continue + </v-btn> </v-col> </v-row> </v-form> @@ -153,7 +171,7 @@ </v-stepper-step> <v-stepper-content step="4"> - <TableSchema :form="validStep4" :columns="tableCreate.columns" @close="schemaClose" /> + <TableSchema :form="validStep4" :back="true" :columns="tableCreate.columns" @close="schemaClose" /> </v-stepper-content> <v-stepper-step @@ -164,7 +182,7 @@ <v-stepper-content step="5"> <div class="mt-2"> - <v-btn color="secondary" :to="`/container/${$route.params.container_id}/database/${$route.params.database_id}/table/${newTableId}`"> + <v-btn class="mb-1" color="primary" :to="`/container/${$route.params.container_id}/database/${$route.params.database_id}/table/${newTableId}`"> View Table </v-btn> </div> @@ -318,7 +336,11 @@ export default { this.loading = false }, schemaClose (event) { - console.trace('schema closed', event) + console.debug('schema closed', event) + if (!event.success) { + this.step = 3 + return + } this.validStep4 = true this.createTable() }, diff --git a/fda-ui/pages/container/index.vue b/fda-ui/pages/container/index.vue index e4c4c60d17..18d492ae9a 100644 --- a/fda-ui/pages/container/index.vue +++ b/fda-ui/pages/container/index.vue @@ -64,7 +64,7 @@ <script> import { mdiDatabaseArrowRightOutline } from '@mdi/js' import CreateDB from '@/components/dialogs/CreateDB' -import { formatTimestampUTC } from '@/utils' +import { formatTimestampUTCLabel } from '@/utils' export default { components: { @@ -154,7 +154,7 @@ export default { console.debug('databases loaded', this.containers) }, createdUTC (str) { - return formatTimestampUTC(str) + return formatTimestampUTCLabel(str) }, loadDatabase (container) { this.$router.push(`/container/${container.id}/database/${container.database.id}/info`) diff --git a/fda-ui/pages/login.vue b/fda-ui/pages/login.vue index 6a7eb59096..b4eddfafe1 100644 --- a/fda-ui/pages/login.vue +++ b/fda-ui/pages/login.vue @@ -2,7 +2,6 @@ <div> <v-form ref="form" v-model="valid" @submit.prevent="submit"> <v-card v-if="!token"> - <v-progress-linear v-if="loading" :color="loadingColor" :indeterminate="!error" /> <v-card-title> Login </v-card-title> @@ -42,6 +41,7 @@ :disabled="!valid" color="primary" type="submit" + :loading="loading" @click="login"> Login </v-btn> diff --git a/fda-ui/pages/signup.vue b/fda-ui/pages/signup.vue index 8c02c3005e..aabea32d7d 100644 --- a/fda-ui/pages/signup.vue +++ b/fda-ui/pages/signup.vue @@ -2,7 +2,6 @@ <div> <v-form ref="form" v-model="valid" @submit.prevent="submit"> <v-card> - <v-progress-linear v-if="loading" :color="loadingColor" :indeterminate="!error" /> <v-card-title> Create Account </v-card-title> @@ -77,6 +76,7 @@ :disabled="!valid" color="primary" type="submit" + :loading="loading" @click="register"> Submit </v-btn> diff --git a/fda-ui/utils/index.js b/fda-ui/utils/index.js index 5359583a73..d61b3165e5 100644 --- a/fda-ui/utils/index.js +++ b/fda-ui/utils/index.js @@ -43,7 +43,7 @@ function formatTimestamp (str) { return format(new Date(str), 'yyyy-MM-dd HH:mm:ss') } -function formatTimestampUTC (str) { +function formatTimestampUTCLabel (str) { if (str === null) { return null } @@ -51,10 +51,19 @@ function formatTimestampUTC (str) { return format(new Date(date), 'yyyy-MM-dd HH:mm:ss') + ' (UTC)' } +function formatTimestampUTC (str) { + if (str === null) { + return null + } + const date = new Date(str).toISOString().slice(0, -1) + return format(new Date(date), 'yyyy-MM-dd HH:mm:ss') +} + module.exports = { notEmpty, formatTimestamp, formatTimestampUTC, + formatTimestampUTCLabel, formatDateUTC, isNonNegativeInteger } -- GitLab