Skip to content

Commit eef0271

Browse files
AkryumAkryum
committed
chore(playground): db explorer
1 parent 7e7493b commit eef0271

File tree

16 files changed

+334
-5
lines changed

16 files changed

+334
-5
lines changed

‎packages/playground/app/app.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,11 @@ const devtoolsOpen = useLocalStorage('rstore-devtools-open', false)
6868
icon: 'lucide:message-circle',
6969
to: '/chat',
7070
},
71+
{
72+
label: 'Database',
73+
icon: 'lucide:database',
74+
to: '/database',
75+
},
7176
]"
7277
content-orientation="vertical"
7378
/>

‎packages/playground/app/assets/style.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,7 @@
44
@utility border-default {
55
@apply border-neutral-100 dark:border-neutral-800;
66
}
7+
8+
@utility divide-default {
9+
@apply divide-neutral-100 dark:divide-neutral-800;
10+
}

‎packages/playground/app/components/database/DataCollectionItem.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts" setup>
2+
defineProps<{
3+
collection: DataCollection
4+
}>()
5+
6+
const route = useRoute()
7+
</script>
8+
9+
<template>
10+
<UButton
11+
:to="`/database/${collection.dataSourceId}/${collection.id}`"
12+
:variant="route.params.collectionId === collection.id ? 'solid' : 'ghost'"
13+
>
14+
{{ collection.name }}
15+
</UButton>
16+
</template>

‎packages/playground/app/components/database/DataCollections.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script lang="ts" setup>
2+
const props = defineProps<{
3+
source: DataSource
4+
}>()
5+
6+
const store = useStore()
7+
8+
const { data: collections } = await store.DataCollection.queryMany({
9+
filter: c => c.dataSourceId === props.source.id,
10+
})
11+
</script>
12+
13+
<template>
14+
<div class="flex flex-col overflow-y-auto">
15+
<div class="opacity-50 p-2">
16+
Collections
17+
</div>
18+
19+
<DatabaseDataCollectionItem
20+
v-for="collection in collections"
21+
:key="collection.id"
22+
:collection
23+
/>
24+
</div>
25+
</template>

‎packages/playground/app/components/database/DataSourceItem.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts" setup>
2+
defineProps<{
3+
source: DataSource
4+
}>()
5+
6+
const route = useRoute()
7+
</script>
8+
9+
<template>
10+
<UButton
11+
:to="`/database/${source.id}`"
12+
:variant="route.params.sourceId === source.id ? 'solid' : 'ghost'"
13+
>
14+
{{ source.name }}
15+
</UButton>
16+
</template>

‎packages/playground/app/components/database/DataSources.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script lang="ts" setup>
2+
const store = useStore()
3+
const { data: sources } = await store.DataSource.queryMany()
4+
</script>
5+
6+
<template>
7+
<div class="flex flex-col overflow-y-auto">
8+
<div class="opacity-50 p-2">
9+
Data Sources
10+
</div>
11+
12+
<DatabaseDataSourceItem
13+
v-for="source in sources"
14+
:key="source.id"
15+
:source
16+
/>
17+
</div>
18+
</template>

‎packages/playground/app/pages/database.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script lang="ts" setup>
2+
const store = useStore()
3+
4+
// Load all messages
5+
const queries = await Promise.all([
6+
store.DataSource.queryMany(),
7+
store.DataCollection.queryMany(),
8+
store.DataField.queryMany(),
9+
])
10+
11+
async function refresh() {
12+
await Promise.all(queries.map(q => q.refresh()))
13+
}
14+
</script>
15+
16+
<template>
17+
<div class="flex flex-col h-full">
18+
<div class="flex items-center gap-2 p-2">
19+
<UIcon
20+
name="lucide:database"
21+
/>
22+
23+
<h1>Database</h1>
24+
25+
<UButton
26+
icon="lucide:refresh-cw"
27+
label="Refresh"
28+
size="xs"
29+
@click="refresh()"
30+
/>
31+
</div>
32+
33+
<div class="flex-1 min-h-0 flex divide-x divide-default items-stretch border border-default rounded-md m-2">
34+
<DatabaseDataSources class="w-60 p-2" />
35+
<NuxtPage class="flex-1 min-w-0" />
36+
</div>
37+
</div>
38+
</template>

‎packages/playground/app/pages/database/[sourceId].vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script lang="ts" setup>
2+
const route = useRoute()
3+
const store = useStore()
4+
const { data: source } = await store.DataSource.queryFirst(() => ({
5+
filter: s => s.id === route.params.sourceId,
6+
}))
7+
</script>
8+
9+
<template>
10+
<div v-if="source" class="flex-1 min-h-0 flex divide-x divide-default items-stretch">
11+
<DatabaseDataCollections
12+
:source
13+
class="w-60 p-2"
14+
/>
15+
<NuxtPage class="flex-1 min-w-0" />
16+
</div>
17+
</template>

‎packages/playground/app/pages/database/[sourceId]/[collectionId].vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script lang="ts" setup>
2+
const route = useRoute()
3+
const store = useStore()
4+
const { data: collection } = await store.DataCollection.queryFirst(() => ({
5+
filter: c => c.id === route.params.collectionId,
6+
}))
7+
</script>
8+
9+
<template>
10+
<div v-if="collection" class="flex flex-col">
11+
<div>
12+
<div class="p-4">
13+
{{ collection.name }}
14+
</div>
15+
</div>
16+
17+
<UTable
18+
:data="collection.fields"
19+
:columns="[
20+
{
21+
accessorKey: 'id',
22+
header: 'ID',
23+
},
24+
{
25+
accessorKey: 'name',
26+
header: 'Name',
27+
},
28+
{
29+
accessorKey: 'type',
30+
header: 'Type',
31+
},
32+
{
33+
accessorKey: 'nullable',
34+
header: 'Nullable',
35+
},
36+
]"
37+
class="flex-1 min-h-0"
38+
>
39+
<template #nullable-cell="{ row }">
40+
<USwitch
41+
:model-value="row.original.nullable"
42+
:label="row.original.nullable ? 'Yes' : 'No'"
43+
@update:model-value="value => row.original.$update({ nullable: value })"
44+
/>
45+
</template>
46+
</UTable>
47+
</div>
48+
</template>

‎packages/playground/app/pages/database/[sourceId]/index.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script lang="ts" setup>
2+
3+
</script>
4+
5+
<template>
6+
<div class="flex flex-col gap-2 items-center justify-center">
7+
<UIcon
8+
name="lucide:database"
9+
/>
10+
<div>Select a collection</div>
11+
</div>
12+
</template>

0 commit comments

Comments
 (0)