first commit
This commit is contained in:
90
resources/js/Pages/Schemas/Index.vue
Normal file
90
resources/js/Pages/Schemas/Index.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<AppLayout>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">Схемы</h2>
|
||||
</template>
|
||||
|
||||
<div class="grid gap-4">
|
||||
<Card v-for="db in databases" :key="db.id">
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center p-4 border-b border-surface">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold">{{ db.name }}</h3>
|
||||
<p class="text-sm text-muted-color">{{ db.host }}:{{ db.port }}/{{ db.database }}</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<Button label="Таблицы" icon="pi pi-table" severity="info" outlined
|
||||
@click="viewTables(db)" />
|
||||
<Button label="Синхронизировать" icon="pi pi-refresh" severity="success"
|
||||
@click="syncSchema(db)" :loading="syncingId === db.id" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="grid grid-cols-3 gap-4 text-center">
|
||||
<div>
|
||||
<p class="text-2xl font-bold">{{ db.tables?.length || 0 }}</p>
|
||||
<p class="text-sm text-muted-color">Таблиц</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold">{{ getTotalColumns(db.tables) }}</p>
|
||||
<p class="text-sm text-muted-color">Колонок</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-muted-color">Последняя синхронизация</p>
|
||||
<p class="text-sm">{{ db.last_synced_at ? formatDate(db.last_synced_at) : 'Никогда' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card v-if="databases.length === 0">
|
||||
<template #content>
|
||||
<div class="text-center py-8">
|
||||
<i class="pi pi-database text-4xl text-muted-color mb-4"></i>
|
||||
<p class="text-muted-color">Исходные базы данных ещё не настроены.</p>
|
||||
<Link :href="route('databases.source.create')" class="text-primary hover:underline mt-2 inline-block">
|
||||
Добавить первую базу данных
|
||||
</Link>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Link, router } from '@inertiajs/vue3';
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import Card from 'primevue/card';
|
||||
import Button from 'primevue/button';
|
||||
|
||||
const props = defineProps({
|
||||
databases: Array,
|
||||
});
|
||||
|
||||
const syncingId = ref(null);
|
||||
|
||||
const getTotalColumns = (tables) => {
|
||||
if (!tables) return 0;
|
||||
return tables.reduce((sum, table) => sum + (table.columns?.length || 0), 0);
|
||||
};
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleString('ru-RU');
|
||||
};
|
||||
|
||||
const viewTables = (db) => {
|
||||
router.visit(route('schemas.show', db.id));
|
||||
};
|
||||
|
||||
const syncSchema = (db) => {
|
||||
syncingId.value = db.id;
|
||||
router.post(route('schemas.sync', db.id), {}, {
|
||||
onFinish: () => {
|
||||
syncingId.value = null;
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
88
resources/js/Pages/Schemas/Show.vue
Normal file
88
resources/js/Pages/Schemas/Show.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<AppLayout>
|
||||
<template #header>
|
||||
<div class="flex flex-row justify-between items-center">
|
||||
<div>
|
||||
<Link :href="route('schemas.index')" class="inline-flex items-center text-primary hover:underline text-sm">
|
||||
<i class="pi pi-arrow-left mr-1"></i> Назад к схемам
|
||||
</Link>
|
||||
<h2 class="text-xl font-bold mt-1">{{ database.name }}</h2>
|
||||
<p class="text-sm text-muted-color">{{ database.host }}:{{ database.port }}/{{ database.database }}</p>
|
||||
</div>
|
||||
<Button label="Синхронизировать" icon="pi pi-refresh" severity="success" size="small"
|
||||
@click="syncSchema" :loading="syncing" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<Message v-if="$page.props.flash?.success" severity="success" :life="3000" class="mb-4">
|
||||
{{ $page.props.flash.success }}
|
||||
</Message>
|
||||
|
||||
<Card>
|
||||
<template #content>
|
||||
<DataTable :value="database.tables" stripedRows>
|
||||
<Column field="schema_name" header="Схема" sortable></Column>
|
||||
<Column field="table_name" header="Таблица">
|
||||
<template #body="slotProps">
|
||||
<Link :href="route('schemas.table.detail', slotProps.data.id)"
|
||||
class="text-primary hover:underline">
|
||||
{{ slotProps.data.table_name }}
|
||||
</Link>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="comment" header="Комментарий"></Column>
|
||||
<Column header="Колонки">
|
||||
<template #body="slotProps">
|
||||
{{ slotProps.data.columns?.length || 0 }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Индексы">
|
||||
<template #body="slotProps">
|
||||
{{ slotProps.data.indexes?.length || 0 }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Внешние ключи">
|
||||
<template #body="slotProps">
|
||||
{{ slotProps.data.foreignKeys?.length || 0 }}
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="last_checked_at" header="Последняя проверка">
|
||||
<template #body="slotProps">
|
||||
{{ slotProps.data.last_checked_at ? formatDate(slotProps.data.last_checked_at) : 'Никогда' }}
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</Card>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { Link, router } from '@inertiajs/vue3';
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import Card from 'primevue/card';
|
||||
import DataTable from 'primevue/datatable';
|
||||
import Column from 'primevue/column';
|
||||
import Button from 'primevue/button';
|
||||
import Message from 'primevue/message';
|
||||
|
||||
const props = defineProps({
|
||||
database: Object,
|
||||
});
|
||||
|
||||
const syncing = ref(false);
|
||||
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleString('ru-RU');
|
||||
};
|
||||
|
||||
const syncSchema = () => {
|
||||
syncing.value = true;
|
||||
router.post(route('schemas.sync', props.database.id), {}, {
|
||||
onFinish: () => {
|
||||
syncing.value = false;
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
130
resources/js/Pages/Schemas/TableDetail.vue
Normal file
130
resources/js/Pages/Schemas/TableDetail.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<AppLayout>
|
||||
<template #header>
|
||||
<div>
|
||||
<Link :href="route('schemas.show', table.source_database.id)" class="inline-flex items-center text-primary hover:underline text-sm">
|
||||
<i class="pi pi-arrow-left mr-1"></i> Назад к таблицам
|
||||
</Link>
|
||||
<h2 class="text-xl font-bold mt-1">
|
||||
{{ table.schema_name }}.{{ table.table_name }}
|
||||
</h2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="grid gap-6">
|
||||
<!-- Колонки -->
|
||||
<Card header="Колонки">
|
||||
<template #content>
|
||||
<DataTable :value="table.columns" stripedRows scrollable scrollHeight="400px">
|
||||
<Column field="column_name" header="Колонка"></Column>
|
||||
<Column field="data_type" header="Тип"></Column>
|
||||
<Column field="is_nullable" header="NULL">
|
||||
<template #body="slotProps">
|
||||
<Tag :value="slotProps.data.is_nullable ? 'Да' : 'Нет'"
|
||||
:severity="slotProps.data.is_nullable ? 'info' : 'warning'" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="is_primary_key" header="PK">
|
||||
<template #body="slotProps">
|
||||
<i v-if="slotProps.data.is_primary_key" class="pi pi-check text-green-600"></i>
|
||||
<i v-else class="pi pi-times text-gray-300"></i>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="is_foreign_key" header="FK">
|
||||
<template #body="slotProps">
|
||||
<i v-if="slotProps.data.is_foreign_key" class="pi pi-link text-blue-600"></i>
|
||||
<i v-else class="pi pi-times text-gray-300"></i>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="is_indexed" header="Индекс">
|
||||
<template #body="slotProps">
|
||||
<i v-if="slotProps.data.is_indexed" class="pi pi-check text-green-600"></i>
|
||||
<i v-else class="pi pi-times text-gray-300"></i>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="column_default" header="По умолчанию"></Column>
|
||||
<Column header="Настройки миграции">
|
||||
<template #body="slotProps">
|
||||
<div class="flex items-center gap-2">
|
||||
<InputText v-model="slotProps.data.target_column_name"
|
||||
placeholder="Имя в цели"
|
||||
size="small"
|
||||
class="w-32" />
|
||||
<Button icon="pi pi-check" size="small" severity="success"
|
||||
@click="saveColumn(slotProps.data)" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Индексы -->
|
||||
<Card header="Индексы">
|
||||
<template #content>
|
||||
<DataTable :value="table.indexes" stripedRows>
|
||||
<Column field="index_name" header="Название"></Column>
|
||||
<Column field="index_type" header="Тип"></Column>
|
||||
<Column field="is_unique" header="Уникальный">
|
||||
<template #body="slotProps">
|
||||
<Tag :value="slotProps.data.is_unique ? 'Да' : 'Нет'"
|
||||
:severity="slotProps.data.is_unique ? 'success' : 'secondary'" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="is_primary" header="Первичный">
|
||||
<template #body="slotProps">
|
||||
<Tag :value="slotProps.data.is_primary ? 'Да' : 'Нет'"
|
||||
:severity="slotProps.data.is_primary ? 'warning' : 'secondary'" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="columns" header="Колонки">
|
||||
<template #body="slotProps">
|
||||
<span v-if="Array.isArray(slotProps.data.columns)">
|
||||
{{ slotProps.data.columns.join(', ') }}
|
||||
</span>
|
||||
<span v-else>{{ slotProps.data.columns }}</span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Внешние ключи -->
|
||||
<Card header="Внешние ключи">
|
||||
<template #content>
|
||||
<DataTable :value="table.foreignKeys" stripedRows>
|
||||
<Column field="constraint_name" header="Ограничение"></Column>
|
||||
<Column field="column_name" header="Колонка"></Column>
|
||||
<Column field="referenced_table" header="Таблица ссылки"></Column>
|
||||
<Column field="referenced_column" header="Колонка ссылки"></Column>
|
||||
<Column field="on_delete" header="ON DELETE"></Column>
|
||||
<Column field="on_update" header="ON UPDATE"></Column>
|
||||
</DataTable>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { router, Link } from '@inertiajs/vue3';
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import Card from 'primevue/card';
|
||||
import DataTable from 'primevue/datatable';
|
||||
import Column from 'primevue/column';
|
||||
import Tag from 'primevue/tag';
|
||||
import InputText from 'primevue/inputtext';
|
||||
import Button from 'primevue/button';
|
||||
|
||||
const props = defineProps({
|
||||
table: Object,
|
||||
});
|
||||
|
||||
const saveColumn = (column) => {
|
||||
router.put(route('schemas.columns.update', column.id), {
|
||||
target_column_name: column.target_column_name,
|
||||
}, {
|
||||
preserveScroll: true,
|
||||
});
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user