first commit

resources/js/Pages/Schemas/Show.vue

@@ -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>