91 lines
3.5 KiB
Vue
91 lines
3.5 KiB
Vue
<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>
|