Add frontend/src/views/WorkspaceView.vue

frontend/src/views/WorkspaceView.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="workspace">
+    <h2>Workspace {{ workspaceId }}</h2>
+    <button @click="showCreateTable = true" class="btn btn-primary">Create Table</button>
+    
+    <div v-if="showCreateTable" class="modal">
+      <div class="modal-content">
+        <h3>New Table</h3>
+        <form @submit.prevent="createTable">
+          <div class="form-group">
+            <label>Name</label>
+            <input v-model="newTable.name" type="text" required />
+          </div>
+          <button type="submit" class="btn btn-primary">Create</button>
+          <button @click="showCreateTable = false" type="button" class="btn">Cancel</button>
+        </form>
+      </div>
+    </div>
+
+    <div class="table-list">
+      <div v-for="table in tables" :key="table.id" class="table-card">
+        <h3>{{ table.name }}</h3>
+        <router-link :to="'/table/' + table.id" class="btn">Open</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import api from '../api'
+
+const route = useRoute()
+const workspaceId = route.params.id
+const tables = ref([])
+const showCreateTable = ref(false)
+const newTable = ref({ name: '' })
+
+onMounted(async () => {
+  const response = await api.get(`/tables/workspace/${workspaceId}`)
+  tables.value = response.data
+})
+
+const createTable = async () => {
+  const response = await api.post('/tables', { name: newTable.value.name, workspace_id: workspaceId })
+  tables.value.push(response.data)
+  showCreateTable.value = false
+  newTable.value = { name: '' }
+}
+</script>