Add frontend/src/views/TableView.vue

frontend/src/views/TableView.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="table-view">
+    <h2>Table {{ tableId }}</h2>
+    <div class="spreadsheet">
+      <table>
+        <thead>
+          <tr>
+            <th v-for="col in columns" :key="col.id">{{ col.name }}</th>
+            <th><button @click="addColumn" class="btn-small">+</button></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in rows" :key="row">
+            <td v-for="col in columns" :key="col.id">
+              <input type="text" v-model="cellValues[row][col.id]" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <button @click="addRow" class="btn">Add Row</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import api from '../api'
+
+const route = useRoute()
+const tableId = route.params.id
+const columns = ref([])
+const rows = ref([1, 2, 3, 4, 5])
+const cellValues = ref({})
+
+onMounted(async () => {
+  const response = await api.get(`/tables/${tableId}/columns`)
+  columns.value = response.data
+  cellValues.value = {}
+  rows.value.forEach(r => {
+    cellValues.value[r] = {}
+    columns.value.forEach(c => {
+      cellValues.value[r][c.id] = ''
+    })
+  })
+})
+
+const addColumn = async () => {
+  const name = prompt('Column name:')
+  if (name) {
+    const response = await api.post(`/tables/${tableId}/columns`, { name, field_type: 'text' })
+    columns.value.push(response.data)
+  }
+}
+
+const addRow = () => {
+  const newRow = Math.max(...rows.value) + 1
+  rows.value.push(newRow)
+  cellValues.value[newRow] = {}
+  columns.value.forEach(c => {
+    cellValues.value[newRow][c.id] = ''
+  })
+}
+</script>