Skip to content

Commit 00018dd

Browse files
author
Adelino Ngomacha
committed
feat: add database form page
1 parent 4f9bedc commit 00018dd

File tree

6 files changed

+189
-171
lines changed

6 files changed

+189
-171
lines changed

‎libs/components/Dashboard/Settings/Forms/DatabaseForm.vue

+185
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<form>
7+
<main class="border-b border-gray-900/10">
8+
<!-- Settings forms -->
9+
<div class="divide-y divide-gray-900/10">
10+
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
11+
<div>
12+
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
13+
MySQL
14+
</h2>
15+
<p class="mt-1 text-sm leading-6 text-gray-600">
16+
Update your MySQL driver settings.
17+
</p>
18+
</div>
19+
20+
<div class="md:col-span-2">
21+
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
22+
<div class="sm:col-span-3">
23+
<label
24+
for="mysql-host"
25+
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
26+
>Host</label>
27+
<div class="mt-2">
28+
<input
29+
id="mysql-host"
30+
type="text"
31+
name="name"
32+
value="stacks"
33+
class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
34+
>
35+
</div>
36+
</div>
37+
38+
<div class="sm:col-span-3">
39+
<label
40+
for="mysql-port"
41+
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
42+
>Port</label>
43+
<div class="mt-2">
44+
<input
45+
id="mysql-port"
46+
type="text"
47+
name="name"
48+
value="3306"
49+
class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
50+
>
51+
</div>
52+
</div>
53+
54+
<div class="sm:col-span-3">
55+
<label
56+
for="mysql-username"
57+
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
58+
>Username</label>
59+
<div class="mt-2">
60+
<input
61+
id="mysql-username"
62+
type="text"
63+
value="root"
64+
class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
65+
>
66+
</div>
67+
</div>
68+
69+
<div class="sm:col-span-3">
70+
<label
71+
for="mysql-password"
72+
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
73+
>Password</label>
74+
<div class="mt-2">
75+
<input
76+
id="mysql-password"
77+
type="text"
78+
name="last-name"
79+
autocomplete="family-name"
80+
class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
81+
>
82+
</div>
83+
</div>
84+
85+
<div class="sm:col-span-full">
86+
<label
87+
for="mysql-password"
88+
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
89+
>Database</label>
90+
<div class="mt-2">
91+
<input
92+
id="mysql-password"
93+
type="text"
94+
name="last-name"
95+
autocomplete="family-name"
96+
class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
97+
>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
104+
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
105+
<div>
106+
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
107+
SQLite
108+
</h2>
109+
<p class="mt-1 text-sm leading-6 text-gray-600">
110+
Update your SQLite driver settings.
111+
</p>
112+
</div>
113+
114+
<div class="md:col-span-2">
115+
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
116+
<div class="sm:col-span-3">
117+
<label
118+
for="sqlite-host"
119+
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
120+
>Host</label>
121+
<div class="mt-2">
122+
<input
123+
id="sqlite-host"
124+
type="text"
125+
name="name"
126+
value="127.0.0.1"
127+
class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
128+
>
129+
</div>
130+
</div>
131+
132+
<div class="sm:col-span-3">
133+
<label
134+
for="sqlite-prefix"
135+
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
136+
>Prefix</label>
137+
<div class="mt-2">
138+
<input
139+
id="sqlite-prefix"
140+
type="text"
141+
name="name"
142+
value="sqlite"
143+
class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
144+
>
145+
</div>
146+
</div>
147+
148+
<div class="sm:col-span-full">
149+
<label
150+
for="mysql-password"
151+
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
152+
>Database</label>
153+
<div class="mt-2">
154+
<input
155+
id="mysql-password"
156+
type="text"
157+
name="last-name"
158+
autocomplete="family-name"
159+
value="stacks"
160+
class="block w-full px-4 py-2 text-gray-900 border border-gray-300 rounded-md shadow-sm required:border-red-500 dark:bg-blue-gray-800 dark:text-gray-200 dark:text-gray-100 dark:border-gray-600 focus:border-none focus:ring-2 focus:ring-blue-500"
161+
>
162+
</div>
163+
</div>
164+
</div>
165+
</div>
166+
</div>
167+
</div>
168+
</main>
169+
<div class="mt-6 flex items-center justify-end gap-x-6">
170+
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">
171+
Cancel
172+
</button>
173+
<Button
174+
type="submit"
175+
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
176+
>
177+
Save
178+
</Button>
179+
</div>
180+
</form>
181+
</template>
182+
183+
<style scoped>
184+
185+
</style>

‎libs/components/Dashboard/Settings/SettingsFormManager.vue

+2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import AppForm from './Forms/AppForm.vue'
55
import CacheForm from './Forms/CacheForm.vue'
66
import CliForm from './Forms/CLIForm.vue'
77
import CloudForm from './Forms/CloudForm.vue'
8+
import DatabaseForm from './Forms/DatabaseForm.vue'
89
910
const props = defineProps({
1011
name: String,
@@ -120,6 +121,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
120121
<template v-else-if="name === 'cache'"><CacheForm /></template>
121122
<template v-else-if="name === 'cli'"><CliForm /></template>
122123
<template v-else-if="name === 'cloud'"><CloudForm /></template>
124+
<template v-else-if="name === 'database'"><DatabaseForm /></template>
123125
<template v-else>
124126
<div class="text-center">
125127
<div class="i-heroicons-cog-8-tooth text-gray-400 w-12 h-12 dark:text-gray-200 transition-all duration-150 ease-in-out" />

‎libs/components/Dashboard/SettingsSidebar.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
<li>
7272
<RouterLink to="database" class="sidebar-links group flex items-center justify-between">
7373
<div class="flex items-center gap-x-2">
74-
<div class="i-heroicons-square-3-stack-3d text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
74+
<div class="i-heroicons-circle-stack text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
7575
Database
7676
</div>
7777
<div class="i-heroicons-chevron-right text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out self-end" />

‎resources/views/dashboard/settings/database.vue

-169
This file was deleted.

‎storage/framework/types/components.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ declare module 'vue' {
2323
ComingSoon: typeof import('./../../../libs/components/Marketing/ComingSoon.vue')['default']
2424
Container: typeof import('./../../../libs/components/Container.vue')['default']
2525
Counter: typeof import('./../../../libs/components/Buttons/Counter.vue')['default']
26+
DatabaseForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/DatabaseForm.vue')['default']
2627
DeploymentHistory: typeof import('./../../../libs/components/Dashboard/Deployments/DeploymentHistory.vue')['default']
2728
DeploymentList: typeof import('./../../../libs/components/Dashboard/Deployments/DeploymentList.vue')['default']
2829
DeployScript: typeof import('./../../../libs/components/Dashboard/Deployments/DeployScript.vue')['default']

‎storage/framework/types/dashboard-router.d.ts

-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ declare module 'vue-router/auto-routes' {
4242
'/requests/': RouteRecordInfo<'/requests/', '/requests', Record<never, never>, Record<never, never>>,
4343
'/settings/[name]': RouteRecordInfo<'/settings/[name]', '/settings/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
4444
'/settings/billing': RouteRecordInfo<'/settings/billing', '/settings/billing', Record<never, never>, Record<never, never>>,
45-
'/settings/database': RouteRecordInfo<'/settings/database', '/settings/database', Record<never, never>, Record<never, never>>,
4645
'/settings/mail': RouteRecordInfo<'/settings/mail', '/settings/mail', Record<never, never>, Record<never, never>>,
4746
'/settings/queue': RouteRecordInfo<'/settings/queue', '/settings/queue', Record<never, never>, Record<never, never>>,
4847
'/settings/services': RouteRecordInfo<'/settings/services', '/settings/services', Record<never, never>, Record<never, never>>,

0 commit comments

Comments
 (0)