Skip to content

Commit 0e33dd6

Browse files
clifordpereiraclifordpereira
committed
feat: Implement user logout and simplify dashboard and resource pages by removing navigation, creation UI, and replacing the dashboard content with a placeholder.
1 parent 064c810 commit 0e33dd6

File tree

4 files changed

+53
-149
lines changed

4 files changed

+53
-149
lines changed

‎playground/app/layouts/dashboard.vue‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ const collapsed = ref(false)
1010
1111
// Get available resources from schemas
1212
const { schemas } = await useResourceSchemas()
13-
const resourceNames = Object.keys(schemas.value || {})
13+
const resourceNames = computed(() => Object.keys(schemas.value || {}))
1414
1515
// Dynamically create navigation links based on available resources
16-
const links = [[{
16+
const links = computed(() => [[{
1717
label: 'Home',
1818
icon: 'i-lucide-house',
1919
to: '/dashboard',
@@ -24,7 +24,7 @@ const links = [[{
2424
label: 'Resources',
2525
icon: 'i-lucide-database',
2626
defaultOpen: true,
27-
children: resourceNames.map(resource => ({
27+
children: resourceNames.value.map(resource => ({
2828
label: resource.charAt(0).toUpperCase() + resource.slice(1),
2929
to: `/resource/${resource}`,
3030
onSelect: () => {
@@ -41,12 +41,12 @@ const links = [[{
4141
icon: 'i-lucide-bug',
4242
to: 'https://github.com/clifordpereira/nuxt-auto-crud/issues',
4343
target: '_blank',
44-
}]] satisfies NavigationMenuItem[][]
44+
}]] satisfies NavigationMenuItem[][])
4545
4646
const groups = computed(() => [{
4747
id: 'links',
4848
label: 'Go to',
49-
items: links.flat(),
49+
items: links.value.flat(),
5050
}, {
5151
id: 'code',
5252
label: 'Code',
@@ -132,10 +132,8 @@ onMounted(async () => {
132132
</template>
133133
</UDashboardSidebar>
134134

135-
<UDashboardSearch :groups="groups" />
136-
137-
<slot />
138-
139-
<NotificationsSlideover />
135+
<UDashboardPanel>
136+
<slot />
137+
</UDashboardPanel>
140138
</UDashboardGroup>
141139
</template>

‎playground/app/layouts/default.vue‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
<!-- eslint-disable vue/multi-word-component-names -->
2+
<script setup lang="ts">
3+
const { loggedIn, clear } = useUserSession()
4+
5+
async function onLogout() {
6+
await clear()
7+
await navigateTo('/')
8+
}
9+
</script>
210
<template>
311
<div class="min-h-screen bg-gray-200 dark:bg-gray-950">
412
<header class="bg-white dark:bg-gray-800 shadow">
@@ -11,13 +19,25 @@
1119
Nuxt Auto CRUD (Full Stack Example)
1220
</div>
1321
<nav>
14-
<LoginModal
15-
label="Admin Login"
16-
color="neutral"
17-
variant="ghost"
18-
size="md"
19-
class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2"
20-
/>
22+
<template v-if="loggedIn">
23+
<UButton
24+
label="Logout"
25+
color="neutral"
26+
variant="ghost"
27+
size="md"
28+
class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2"
29+
@click="onLogout"
30+
/>
31+
</template>
32+
<template v-else>
33+
<LoginModal
34+
label="Admin Login"
35+
color="neutral"
36+
variant="ghost"
37+
size="md"
38+
class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white px-3 py-2"
39+
/>
40+
</template>
2141
</nav>
2242
</div>
2343
</header>

‎playground/app/pages/dashboard.vue‎

Lines changed: 7 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,108 +1,16 @@
1-
<!-- eslint-disable vue/multi-word-component-names -->
21
<script setup lang="ts">
3-
import type { DropdownMenuItem } from '@nuxt/ui'
4-
5-
const { isNotificationsSlideoverOpen } = useDashboard()
6-
72
definePageMeta({
83
layout: 'dashboard',
94
middleware: 'auth',
105
})
11-
12-
// Get available resources from schemas
13-
const { schemas } = await useResourceSchemas()
14-
const resourceNames = Object.keys(schemas.value || {})
15-
16-
// Dynamically create dropdown items based on available resources
17-
const iconMap: Record<string, string> = {
18-
users: 'i-lucide-user-plus',
19-
}
20-
21-
const items = [[
22-
...resourceNames.map(resource => ({
23-
label: `New ${resource.slice(0, -1)}`,
24-
icon: iconMap[resource] || 'i-lucide-plus',
25-
to: `/resource/${resource}`,
26-
})),
27-
]] satisfies DropdownMenuItem[][]
286
</script>
297

308
<template>
31-
<UDashboardPanel id="home">
32-
<template #header>
33-
<UDashboardNavbar
34-
title="Home"
35-
:ui="{ right: 'gap-3' }"
36-
>
37-
<template #leading>
38-
<UDashboardSidebarCollapse />
39-
</template>
40-
41-
<template #right>
42-
<UTooltip
43-
text="Notifications"
44-
:shortcuts="['N']"
45-
>
46-
<UButton
47-
color="neutral"
48-
variant="ghost"
49-
square
50-
@click="isNotificationsSlideoverOpen = true"
51-
>
52-
<UChip
53-
color="error"
54-
inset
55-
>
56-
<UIcon
57-
name="i-lucide-bell"
58-
class="size-5 shrink-0"
59-
/>
60-
</UChip>
61-
</UButton>
62-
</UTooltip>
63-
64-
<UDropdownMenu :items="items">
65-
<UButton
66-
icon="i-lucide-plus"
67-
size="md"
68-
class="rounded-full"
69-
/>
70-
</UDropdownMenu>
71-
</template>
72-
</UDashboardNavbar>
73-
</template>
74-
75-
<template #body>
76-
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
77-
<UCard>
78-
<template #header>
79-
<h3 class="text-lg font-semibold">
80-
Getting Started
81-
</h3>
82-
</template>
83-
<p class="text-gray-600 dark:text-gray-400 mb-4">
84-
Welcome to the Nuxt Auto CRUD playground. This application demonstrates how to automatically generate CRUD APIs and interfaces from your database schema.
85-
</p>
86-
<ul class="list-disc list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
87-
<li><strong>Manage Resources:</strong> Use the sidebar to navigate to your resources.</li>
88-
<li><strong>Create Data:</strong> Click the "New" button in the top right or on any resource page to add data.</li>
89-
<li><strong>Permissions:</strong> Log in as 'admin' for full access, or 'user' for restricted access.</li>
90-
</ul>
91-
</UCard>
92-
<UCard>
93-
<template #header>
94-
<h3 class="text-lg font-semibold">
95-
Features
96-
</h3>
97-
</template>
98-
<ul class="list-disc list-inside space-y-2 text-sm text-gray-600 dark:text-gray-400">
99-
<li><strong>Auto-generated APIs:</strong> CRUD endpoints created automatically from Drizzle schema.</li>
100-
<li><strong>Authentication:</strong> Built-in session management and role-based access control.</li>
101-
<li><strong>Dynamic UI:</strong> Tables and forms generated on-the-fly based on data types.</li>
102-
<li><strong>Relations:</strong> Automatic handling of relationships (e.g., User -> Posts).</li>
103-
</ul>
104-
</UCard>
105-
</div>
106-
</template>
107-
</UDashboardPanel>
9+
<div class="flex items-center justify-center h-full">
10+
<div class="text-center">
11+
<UIcon name="i-heroicons-wrench-screwdriver" class="w-16 h-16 mx-auto text-gray-400 mb-4" />
12+
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">Under Construction</h1>
13+
<p class="mt-2 text-gray-500">This dashboard is currently being built.</p>
14+
</div>
15+
</div>
10816
</template>

‎playground/app/pages/resource/[...slug].vue‎

Lines changed: 11 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<!-- eslint-disable vue/multi-word-component-names -->
22
<script setup lang="ts">
3-
import pluralize from 'pluralize'
4-
53
definePageMeta({
64
middleware: ['auth'],
75
layout: 'dashboard',
@@ -18,35 +16,15 @@ const schema = computed(() => (resource.value ? getSchema(resource.value) : unde
1816
</script>
1917

2018
<template>
21-
<UDashboardPanel>
22-
<UDashboardNavbar
23-
:title="resource ? pluralize(resource).charAt(0).toUpperCase() + pluralize(resource).slice(1) : 'Resource'"
24-
>
25-
<template #leading>
26-
<UDashboardSidebarCollapse />
27-
</template>
28-
29-
<template #right>
30-
<CrudCreateRow
31-
v-if="schema && resource"
32-
:resource="resource"
33-
:schema="schema"
34-
/>
35-
</template>
36-
</UDashboardNavbar>
37-
38-
<UDashboardPanelContent>
39-
<CrudTable
40-
v-if="schema && resource"
41-
:resource="resource"
42-
:schema="schema"
43-
/>
44-
<div
45-
v-else
46-
class="p-4 text-red-500"
47-
>
48-
Schema not found for resource: {{ resource }}
49-
</div>
50-
</UDashboardPanelContent>
51-
</UDashboardPanel>
19+
<CrudTable
20+
v-if="schema && resource"
21+
:resource="resource"
22+
:schema="schema"
23+
/>
24+
<div
25+
v-else
26+
class="p-4 text-red-500"
27+
>
28+
Schema not found for resource: {{ resource }}
29+
</div>
5230
</template>

0 commit comments

Comments
 (0)