Table deletion w/ confirmation dialog

Note: backend deletion does not work yet: https://gitlab.phaidra.org/fair-data-austria-db-repository/fda-services/-/issues/22#note_5219

fda-ui/components/TableList.vue

 <template>
+  <div>
     <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>
+          <v-row dense>
+            <v-col>
               ID: {{ item.id }}<br>
               Internal Name: {{ item.internalName }}<br>
+            </v-col>
+            <v-col class="align-right">
+              <v-btn outlined color="error" @click="showDeleteTableDialog(item.id)">
+                Delete
+              </v-btn>
+            </v-col>
+          </v-row>
           <div v-if="tableDetails">
             Description: {{ tableDetails.description }}<br>
             <v-simple-table class="colTable">
@@ -27,6 +37,27 @@
         </v-expansion-panel-content>
       </v-expansion-panel>
     </v-expansion-panels>
+
+    <v-dialog v-model="dialogDelete" max-width="640">
+      <v-card>
+        <v-card-title class="headline">
+          Delete
+        </v-card-title>
+        <v-card-text class="pb-1">
+         Are you sure you want to drop this table?
+        </v-card-text>
+        <v-card-actions class="pl-4 pb-4 pr-4">
+          <v-btn @click="dialogDelete = false">
+            Cancel
+          </v-btn>
+          <v-spacer />
+          <v-btn color="error" @click="deleteTable()">
+            Delete
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
 </template>
 
 <script>
@@ -35,7 +66,9 @@ export default {
     return {
       tables: [],
       panelIndex: undefined,
-      tableDetails: null
+      tableDetails: null,
+      dialogDelete: false,
+      deleteTableId: -1
     }
   },
   watch: {
@@ -61,11 +94,26 @@ export default {
     async refresh () {
       let res
       try {
-        res = await this.$axios.get(`http://localhost:9094/api/database/${this.$route.params.db_id}/table`)
+        res = await this.$axios.get(
+          `http://localhost:9094/api/database/${this.$route.params.db_id}/table`)
         this.tables = res.data
       } catch (err) {
         this.$toast.error('Could not list tables.')
       }
+    },
+    async deleteTable () {
+      try {
+        await this.$axios.delete(
+          `http://localhost:9094/api/database/${this.$route.params.db_id}/table/${this.deleteTableId}`)
+        this.refresh()
+      } catch (err) {
+        this.$toast.error('Could not delete table.')
+      }
+      this.dialogDelete = false
+    },
+    showDeleteTableDialog (id) {
+      this.deleteTableId = id
+      this.dialogDelete = true
     }
   }
 }
@@ -78,4 +126,7 @@ export default {
 .colTable tbody tr td {
   padding-left: 0;
 }
+.align-right {
+  text-align: right;
+}
 </style>