Fixed the date format issue in the frontend, added back buttons to table

import

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 () {

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 () {

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

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>

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)

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

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) {

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])
               }
             }
           }

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()
     },

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`)

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>

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>

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
 }