81 lines
2.6 KiB
PHP
81 lines
2.6 KiB
PHP
<?= $this->extend('layouts/v2') ?>
|
|
|
|
<?= $this->section('content') ?>
|
|
|
|
<div class="flex flex-col lg:flex-row gap-4" x-data="dbBrowser">
|
|
|
|
<!-- Tables List -->
|
|
<div class="card bg-base-100 shadow w-full lg:w-64 lg:shrink-0">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-base">Tables</h3>
|
|
<template x-if="loadingTables">
|
|
<div class="flex justify-center py-4">
|
|
<span class="loading loading-spinner loading-md"></span>
|
|
</div>
|
|
</template>
|
|
<ul class="menu menu-sm bg-base-200 rounded-box max-h-96 lg:max-h-[60vh] overflow-y-auto" x-show="!loadingTables">
|
|
<template x-for="table in tables" :key="table">
|
|
<li>
|
|
<a
|
|
:class="{ 'active': selectedTable === table }"
|
|
@click="selectTable(table)"
|
|
x-text="table"
|
|
></a>
|
|
</li>
|
|
</template>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Data Panel -->
|
|
<div class="card bg-base-100 shadow flex-1">
|
|
<div class="card-body">
|
|
<template x-if="!selectedTable">
|
|
<div class="flex flex-col items-center justify-center py-12 text-base-content/50">
|
|
<i data-lucide="database" class="w-12 h-12 mb-4"></i>
|
|
<p>Select a table to view data</p>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="selectedTable && loadingData">
|
|
<div class="flex justify-center py-12">
|
|
<span class="loading loading-spinner loading-lg"></span>
|
|
</div>
|
|
</template>
|
|
|
|
<template x-if="selectedTable && !loadingData && tableData">
|
|
<div>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="card-title" x-text="selectedTable"></h3>
|
|
<div class="badge badge-primary" x-text="tableData.count + ' rows'"></div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="table table-zebra table-sm">
|
|
<thead>
|
|
<tr>
|
|
<template x-for="field in tableData.fields" :key="field.name">
|
|
<th x-text="field.name"></th>
|
|
</template>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template x-for="(row, idx) in tableData.data" :key="idx">
|
|
<tr>
|
|
<template x-for="field in tableData.fields" :key="field.name">
|
|
<td class="max-w-xs truncate" x-text="row[field.name] ?? '-'"></td>
|
|
</template>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<?= $this->endSection() ?>
|