113 lines
2.6 KiB
Vue
113 lines
2.6 KiB
Vue
<template>
|
|
<div class="tables-container">
|
|
<header class="tables-header">
|
|
<button class="create-btn" @click="createTable">Создать таблицу</button>
|
|
</header>
|
|
<ul class="tables-list-simple">
|
|
<!-- Системная таблица tags -->
|
|
<li>
|
|
<!-- <button class="table-link" @click="goToTagsTable">Теги (tags)</button> -->
|
|
</li>
|
|
<!-- Пользовательские таблицы -->
|
|
<li v-for="table in tables" :key="table.id">
|
|
<button class="table-link" @click="selectTable(table)">{{ table.name }}</button>
|
|
</li>
|
|
<li v-if="!tables.length" class="empty-state">
|
|
<span>Нет таблиц. Создайте первую!</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import tablesService from '../../services/tablesService';
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const tables = ref([]);
|
|
|
|
async function fetchTables() {
|
|
tables.value = await tablesService.getTables();
|
|
}
|
|
onMounted(fetchTables);
|
|
|
|
function selectTable(table) {
|
|
router.push({ name: 'user-table-view', params: { id: table.id } });
|
|
}
|
|
function createTable() {
|
|
router.push({ name: 'create-table' });
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tables-container {
|
|
/* max-width: 600px; */
|
|
/* margin: 2rem auto; */
|
|
margin-top: 2rem;
|
|
margin-left: 0;
|
|
padding: 2rem 1.5rem 2rem 1.5rem;
|
|
/* background: #fff; */
|
|
/* border-radius: 18px; */
|
|
/* box-shadow: 0 2px 16px rgba(0,0,0,0.07); */
|
|
}
|
|
.tables-header {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
.create-btn {
|
|
background: #2ecc40;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 0.5em 1.2em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
.create-btn:hover {
|
|
background: #27ae38;
|
|
}
|
|
.tables-list-simple {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
.tables-list-simple li {
|
|
margin-bottom: 0.5em;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
padding-bottom: 0.5em;
|
|
}
|
|
.tables-list-simple li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.table-link {
|
|
background: none;
|
|
border: none;
|
|
color: #2ecc40;
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
padding: 0.2em 0;
|
|
transition: color 0.2s, background 0.2s;
|
|
width: 100%;
|
|
display: block;
|
|
border-radius: 6px;
|
|
}
|
|
.table-link:hover {
|
|
color: #138496;
|
|
background: #f5f7fa;
|
|
text-decoration: none;
|
|
}
|
|
.empty-state {
|
|
text-align: center;
|
|
color: #aaa;
|
|
margin: 2em 0;
|
|
font-size: 1.1em;
|
|
}
|
|
</style> |