Skip to content

Commit

Permalink
feat: add database form page
Browse files Browse the repository at this point in the history
  • Loading branch information
Adelino Ngomacha committed Jun 23, 2024
1 parent 4f9bedc commit 00018dd
Show file tree
Hide file tree
Showing 6 changed files with 189 additions and 171 deletions.
185 changes: 185 additions & 0 deletions libs/components/Dashboard/Settings/Forms/DatabaseForm.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
<script setup lang="ts">
</script>

<template>
<form>
<main class="border-b border-gray-900/10">
<!-- Settings forms -->
<div class="divide-y divide-gray-900/10">
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
<div>
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
MySQL
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your MySQL driver settings.
</p>
</div>

<div class="md:col-span-2">
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
<div class="sm:col-span-3">
<label
for="mysql-host"
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
>Host</label>
<div class="mt-2">
<input
id="mysql-host"
type="text"
name="name"
value="stacks"
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"
>
</div>
</div>

<div class="sm:col-span-3">
<label
for="mysql-port"
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
>Port</label>
<div class="mt-2">
<input
id="mysql-port"
type="text"
name="name"
value="3306"
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"
>
</div>
</div>

<div class="sm:col-span-3">
<label
for="mysql-username"
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
>Username</label>
<div class="mt-2">
<input
id="mysql-username"
type="text"
value="root"
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"
>
</div>
</div>

<div class="sm:col-span-3">
<label
for="mysql-password"
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
>Password</label>
<div class="mt-2">
<input
id="mysql-password"
type="text"
name="last-name"
autocomplete="family-name"
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"
>
</div>
</div>

<div class="sm:col-span-full">
<label
for="mysql-password"
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
>Database</label>
<div class="mt-2">
<input
id="mysql-password"
type="text"
name="last-name"
autocomplete="family-name"
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"
>
</div>
</div>
</div>
</div>
</div>

<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
<div>
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
SQLite
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your SQLite driver settings.
</p>
</div>

<div class="md:col-span-2">
<div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
<div class="sm:col-span-3">
<label
for="sqlite-host"
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
>Host</label>
<div class="mt-2">
<input
id="sqlite-host"
type="text"
name="name"
value="127.0.0.1"
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"
>
</div>
</div>

<div class="sm:col-span-3">
<label
for="sqlite-prefix"
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
>Prefix</label>
<div class="mt-2">
<input
id="sqlite-prefix"
type="text"
name="name"
value="sqlite"
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"
>
</div>
</div>

<div class="sm:col-span-full">
<label
for="mysql-password"
class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100"
>Database</label>
<div class="mt-2">
<input
id="mysql-password"
type="text"
name="last-name"
autocomplete="family-name"
value="stacks"
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"
>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="mt-6 flex items-center justify-end gap-x-6">
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">
Cancel
</button>
<Button
type="submit"
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"
>
Save
</Button>
</div>
</form>
</template>

<style scoped>
</style>
2 changes: 2 additions & 0 deletions libs/components/Dashboard/Settings/SettingsFormManager.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import AppForm from './Forms/AppForm.vue'
import CacheForm from './Forms/CacheForm.vue'
import CliForm from './Forms/CLIForm.vue'
import CloudForm from './Forms/CloudForm.vue'
import DatabaseForm from './Forms/DatabaseForm.vue'
const props = defineProps({
name: String,
Expand Down Expand Up @@ -120,6 +121,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
<template v-else-if="name === 'cache'"><CacheForm /></template>
<template v-else-if="name === 'cli'"><CliForm /></template>
<template v-else-if="name === 'cloud'"><CloudForm /></template>
<template v-else-if="name === 'database'"><DatabaseForm /></template>
<template v-else>
<div class="text-center">
<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" />
Expand Down
2 changes: 1 addition & 1 deletion libs/components/Dashboard/SettingsSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
<li>
<RouterLink to="database" class="sidebar-links group flex items-center justify-between">
<div class="flex items-center gap-x-2">
<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" />
<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" />
Database
</div>
<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" />
Expand Down
169 changes: 0 additions & 169 deletions resources/views/dashboard/settings/database.vue
View file

This file was deleted.

1 change: 1 addition & 0 deletions storage/framework/types/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ declare module 'vue' {
ComingSoon: typeof import('./../../../libs/components/Marketing/ComingSoon.vue')['default']
Container: typeof import('./../../../libs/components/Container.vue')['default']
Counter: typeof import('./../../../libs/components/Buttons/Counter.vue')['default']
DatabaseForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/DatabaseForm.vue')['default']
DeploymentHistory: typeof import('./../../../libs/components/Dashboard/Deployments/DeploymentHistory.vue')['default']
DeploymentList: typeof import('./../../../libs/components/Dashboard/Deployments/DeploymentList.vue')['default']
DeployScript: typeof import('./../../../libs/components/Dashboard/Deployments/DeployScript.vue')['default']
Expand Down
1 change: 0 additions & 1 deletion storage/framework/types/dashboard-router.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ declare module 'vue-router/auto-routes' {
'/requests/': RouteRecordInfo<'/requests/', '/requests', Record<never, never>, Record<never, never>>,
'/settings/[name]': RouteRecordInfo<'/settings/[name]', '/settings/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
'/settings/billing': RouteRecordInfo<'/settings/billing', '/settings/billing', Record<never, never>, Record<never, never>>,
'/settings/database': RouteRecordInfo<'/settings/database', '/settings/database', Record<never, never>, Record<never, never>>,
'/settings/mail': RouteRecordInfo<'/settings/mail', '/settings/mail', Record<never, never>, Record<never, never>>,
'/settings/queue': RouteRecordInfo<'/settings/queue', '/settings/queue', Record<never, never>, Record<never, never>>,
'/settings/services': RouteRecordInfo<'/settings/services', '/settings/services', Record<never, never>, Record<never, never>>,
Expand Down

0 comments on commit 00018dd

Please sign in to comment.