Add table column list component

docker-compose.yml

@@ -206,4 +206,4 @@ services:
       - fda-database-service
     environment:
       HOST: 0.0.0.0
-      API_URL: //fda-database-managing-service:9092/api
+      API_URL: //fda-gateway-service:9095/api

fda-ui/.env

-# .env SAMPLE
-
 # DB Service API url
-# API_URL="//localhost:9092/api"
-# API_URL="//localhost:9092/api"
+API_URL="//localhost:9095/api"

fda-ui/components/TableList.vue

 <template>
-  <div>
-    List of Tables
+  <v-expansion-panels v-model="panelIndex" accordion>
+    <v-expansion-panel v-for="(item,i) in tables" :key="i">
+      <v-expansion-panel-header>{{ item.name }}</v-expansion-panel-header>
+      <v-expansion-panel-content>
+        ID: {{ item.id }}<br>
+        Internal Name: {{ item.internalName }}<br>
+        <div v-if="tableDetails">
+          Description: {{ tableDetails.description }}<br>
+          <v-simple-table class="colTable">
+            <thead>
+              <th>Column Name</th>
+              <th>Type</th>
+              <th>Primary Key</th>
+              <th>Null Allowed</th>
+            </thead>
+            <tbody>
+              <tr v-for="(col, idx) in tableDetails.columns" :key="idx">
+                <td class="pl-0">{{ col.name }}</td>
+                <td class="pl-0">{{ col.columnType }}</td>
+                <td class="pl-0"><v-simple-checkbox v-model="col.isPrimaryKey" disabled /></td>
+                <td class="pl-0"><v-simple-checkbox v-model="col.isNullAllowed" disabled /></td>
+              </tr>
+            </tbody>
+          </v-simple-table>
         </div>
+      </v-expansion-panel-content>
+    </v-expansion-panel>
+  </v-expansion-panels>
 </template>
 
 <script>
+export default {
+  data () {
+    return {
+      tables: [],
+      panelIndex: undefined,
+      tableDetails: null
+    }
+  },
+  watch: {
+    async panelIndex () {
+      if (typeof this.panelIndex !== 'undefined') {
+        console.log('watch panelIndex id: ' + this.panelIndex)
+        const tableId = this.tables[this.panelIndex].id
+        try {
+          const res = await this.$axios.get(`http://localhost:9094/api/database/${this.$route.params.db_id}/table/${tableId}`)
+          this.tableDetails = res.data[0] // It's a list with one element
+          console.log(this.tableDetails)
+        } catch (err) {
+          this.$toast.error('Could not get table details.')
+        }
+      } else {
+        this.tableDetails = null
+      }
+    }
+  },
+  async mounted () {
+    let res
+    try {
+      res = await this.$axios.get(`http://localhost:9094/api/database/${this.$route.params.db_id}/table`)
+      this.tables = res.data
+      console.log(this.tables)
+    } catch (err) {
+      this.$toast.error('Could not list tables.')
+    }
+  }
+  // methods: {
+  //   onTableExpand () {
+  //     debugger
+  //   }
+  // }
+}
 </script>
 
 <style>
+.colTable thead th {
+  text-align: initial;
+}
 </style>

fda-ui/components/dialogs/CreateDB.vue

@@ -42,7 +42,7 @@ export default {
     return {
       formValid: false,
       loading: false,
-      database: 'Foo Bar',
+      database: '',
       engine: {
         label: 'PostgreSQL, latest',
         repo: 'postgres',

fda-ui/nuxt.config.js

@@ -69,7 +69,7 @@ export default {
 
   // Axios module configuration (https://go.nuxtjs.dev/config-axios)
   axios: {
-    // baseURL: process.env.API_URL.startsWith('//') ? `http:${process.env.API_URL}` : process.env.API_URL
+    baseURL: process.env.API_URL.startsWith('//') ? `http:${process.env.API_URL}` : process.env.API_URL
   },
 
   // Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)

fda-ui/pages/db/_id/index.vue → fda-ui/pages/db/_db_id/index.vue

@@ -4,7 +4,7 @@
       <h2>
         {{ db.name }}
       </h2>
-      <v-btn :to="`/db/${$route.params.id}/tables`">Tables</v-btn>
+      <v-btn :to="`/db/${$route.params.db_id}/tables`">Tables</v-btn>
     </v-col>
   </v-row>
 </template>
@@ -19,7 +19,7 @@ export default {
   },
   async mounted () {
     try {
-      const res = await this.$axios.get(`http://localhost:9092/api/database/${this.$route.params.id}`)
+      const res = await this.$axios.get(`http://localhost:9092/api/database/${this.$route.params.db_id}`)
       this.db = res.data
     } catch (err) {
       this.$toast.error('Could not load database.')