ваше сообщение коммита

frontend/src/components/tables/CreateTableModal.vue

@@ -1,111 +0,0 @@
-<template>
-  <div class="create-table-modal">
-    <div class="modal-header">
-      <h3>Создать новую таблицу</h3>
-      <button class="close-btn" @click="$emit('close')">×</button>
-    </div>
-    <form @submit.prevent="createTable">
-      <div class="form-group">
-        <label>Название таблицы</label>
-        <input v-model="name" required maxlength="255" />
-      </div>
-      <div class="form-group">
-        <label>Описание</label>
-        <textarea v-model="description" maxlength="500"></textarea>
-      </div>
-      <div class="modal-actions">
-        <button class="btn btn-success" type="submit" :disabled="isLoading">Создать</button>
-        <button class="btn btn-secondary" type="button" @click="$emit('close')">Отмена</button>
-      </div>
-      <div v-if="error" class="error">{{ error }}</div>
-    </form>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import tablesService from '../../services/tablesService';
-const emit = defineEmits(['close', 'table-created']);
-const name = ref('');
-const description = ref('');
-const isLoading = ref(false);
-const error = ref('');
-
-async function createTable() {
-  if (!name.value.trim()) return;
-  isLoading.value = true;
-  error.value = '';
-  try {
-    await tablesService.createTable({ name: name.value, description: description.value });
-    emit('table-created');
-    emit('close');
-  } catch (e) {
-    error.value = 'Ошибка создания таблицы';
-  } finally {
-    isLoading.value = false;
-  }
-}
-</script>
-
-<style scoped>
-.create-table-modal {
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 2px 16px rgba(0,0,0,0.13);
-  padding: 28px 22px 18px 22px;
-  max-width: 400px;
-  margin: 40px auto;
-  position: relative;
-}
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: #bbb;
-  transition: color 0.2s;
-}
-.close-btn:hover {
-  color: #333;
-}
-.form-group {
-  margin-bottom: 16px;
-}
-input, textarea {
-  width: 100%;
-  padding: 6px 10px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  font-size: 1rem;
-}
-.modal-actions {
-  display: flex;
-  gap: 12px;
-  margin-top: 10px;
-}
-.btn {
-  padding: 7px 18px;
-  border-radius: 6px;
-  font-size: 1rem;
-  border: none;
-  cursor: pointer;
-}
-.btn-success {
-  background: #28a745;
-  color: #fff;
-}
-.btn-secondary {
-  background: #bbb;
-  color: #fff;
-}
-.error {
-  color: #dc3545;
-  margin-top: 10px;
-}
-</style> 

frontend/src/components/tables/DynamicTablesModal.vue

@@ -1,101 +0,0 @@
-<template>
-  <div class="dynamic-tables-modal">
-    <div class="modal-header">
-      <h2>Пользовательские таблицы</h2>
-      <button class="close-btn" @click="closeModal">×</button>
-    </div>
-    <UserTablesList
-      :selected-table-id="selectedTableId"
-      @update:selected-table-id="val => selectedTableId = val"
-    />
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import UserTablesList from './UserTablesList.vue';
-
-const selectedTableId = ref(null);
-
-function closeModal() {
-  selectedTableId.value = null;
-  // эмитим наружу, чтобы закрыть модалку
-  // (если используется <DynamicTablesModal @close=... />)
-  // иначе просто убираем модалку
-  // eslint-disable-next-line vue/custom-event-name-casing
-  // $emit('close') не работает в <script setup>, используем defineEmits
-  emit('close');
-}
-const emit = defineEmits(['close']);
-</script>
-
-<style scoped>
-.dynamic-tables-modal {
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0 4px 32px rgba(0,0,0,0.12);
-  padding: 32px 24px 24px 24px;
-  max-width: 900px;
-  margin: 40px auto;
-  position: relative;
-  overflow-x: auto;
-}
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 18px;
-}
-.close-btn {
-  background: none;
-  border: none;
-  font-size: 2rem;
-  cursor: pointer;
-  color: #bbb;
-  transition: color 0.2s;
-}
-.close-btn:hover {
-  color: #333;
-}
-.tables-list-block {
-  margin-bottom: 18px;
-}
-.tables-list {
-  list-style: none;
-  padding: 0;
-}
-.tables-list li {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 0;
-  border-bottom: 1px solid #eee;
-}
-.btn {
-  margin-left: 12px;
-}
-.loading {
-  color: #888;
-  margin: 16px 0;
-}
-.user-table-block {
-  margin-bottom: 32px;
-  border: 1px solid #eee;
-  border-radius: 8px;
-  padding: 18px 12px;
-  background: #fafbfc;
-}
-.user-table-full {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 12px;
-}
-.user-table-full th, .user-table-full td {
-  border: 1px solid #e0e0e0;
-  padding: 6px 10px;
-  text-align: left;
-}
-.user-table-full th {
-  background: #f5f5f5;
-}
-</style> 

frontend/src/components/tables/UserTableView.vue

@@ -1,4 +1,8 @@
 <template>
+  <div class="user-table-header" v-if="tableMeta">
+    <h2>{{ tableMeta.name }}</h2>
+    <div class="table-desc">{{ tableMeta.description }}</div>
+  </div>
   <div class="notion-table-wrapper">
     <table class="notion-table">
       <thead>
@@ -50,6 +54,7 @@ const props = defineProps({ tableId: Number });
 const columns = ref([]);
 const rows = ref([]);
 const cellValues = ref([]);
+const tableMeta = ref(null);
 
 // Для редактирования ячеек
 const editing = ref({ rowId: null, colId: null });
@@ -62,7 +67,7 @@ function startEdit(row, col) {
   editValue.value = getCellValue(row, col) || '';
 }
 function saveEdit(row, col) {
-  tablesService.saveCell({ rowId: row.id, columnId: col.id, value: editValue.value }).then(fetchTable);
+  tablesService.saveCell({ row_id: row.id, column_id: col.id, value: editValue.value }).then(fetchTable);
   editing.value = { rowId: null, colId: null };
 }
 function cancelEdit() {
@@ -104,6 +109,7 @@ async function fetchTable() {
   columns.value = data.columns;
   rows.value = data.rows;
   cellValues.value = data.cellValues;
+  tableMeta.value = { name: data.name, description: data.description };
 }
 fetchTable();
 </script>
@@ -152,4 +158,20 @@ fetchTable();
   border-radius: 4px;
   padding: 0.2em 0.4em;
 }
+.user-table-header {
+  margin-bottom: 1.2em;
+  padding: 1em 1.2em 0.5em 1.2em;
+  background: #f8f9fa;
+  border-radius: 10px 10px 0 0;
+  border-bottom: 1px solid #ececec;
+}
+.user-table-header h2 {
+  margin: 0 0 0.2em 0;
+  font-size: 1.3em;
+  font-weight: 700;
+}
+.table-desc {
+  color: #888;
+  font-size: 1em;
+}
 </style> 

frontend/src/components/tables/UserTablesList.vue

@@ -44,6 +44,7 @@
 
 <script setup>
 import { ref, onMounted, watch, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
 import UserTableView from './UserTableView.vue';
 import tablesService from '../../services/tablesService';
 
@@ -52,6 +53,8 @@ const props = defineProps({
 });
 const emit = defineEmits(['update:selected-table-id']);
 
+const router = useRouter();
+
 const tables = ref([]);
 const showDeleteModal = ref(false);
 const selectedTable = ref(null);
@@ -62,22 +65,12 @@ async function fetchTables() {
 onMounted(fetchTables);
 
 function selectTable(table) {
-  if (props.selectedTableId === table.id) return;
-  if (props.selectedTableId) {
-    emit('update:selected-table-id', null);
-    nextTick(() => {
-      emit('update:selected-table-id', table.id);
-    });
-  } else {
-    emit('update:selected-table-id', table.id);
-  }
+  router.push({ name: 'user-table-view', params: { id: table.id } });
 }
 function createTable() {
-  const name = prompt('Название таблицы');
-  if (name) {
-    tablesService.createTable({ name }).then(fetchTables);
-  }
+  router.push({ name: 'create-table' });
 }
+
 function renameTable(table) {
   const name = prompt('Новое имя', table.name);
   if (name && name !== table.name) {