first commit
This commit is contained in:
114
resources/js/Pages/Databases/TargetDatabaseForm.vue
Normal file
114
resources/js/Pages/Databases/TargetDatabaseForm.vue
Normal file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<AppLayout>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">
|
||||
{{ database?.id ? 'Редактирование' : 'Создание' }} целевой БД
|
||||
</h2>
|
||||
</template>
|
||||
|
||||
<Card class="max-w-2xl">
|
||||
<template #content>
|
||||
<form @submit.prevent="submit" class="flex flex-col gap-4">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium mb-1">Название *</label>
|
||||
<InputText id="name" v-model="form.name" class="w-full" :class="{ 'p-invalid': form.errors.name }" />
|
||||
<small class="p-error">{{ form.errors.name }}</small>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="host" class="block text-sm font-medium mb-1">Хост *</label>
|
||||
<InputText id="host" v-model="form.host" class="w-full" :class="{ 'p-invalid': form.errors.host }" />
|
||||
<small class="p-error">{{ form.errors.host }}</small>
|
||||
</div>
|
||||
<div>
|
||||
<label for="port" class="block text-sm font-medium mb-1">Порт *</label>
|
||||
<InputText id="port" v-model="form.port" class="w-full" :class="{ 'p-invalid': form.errors.port }" />
|
||||
<small class="p-error">{{ form.errors.port }}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="database" class="block text-sm font-medium mb-1">Имя базы данных *</label>
|
||||
<InputText id="database" v-model="form.database" class="w-full" :class="{ 'p-invalid': form.errors.database }" />
|
||||
<small class="p-error">{{ form.errors.database }}</small>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium mb-1">Пользователь *</label>
|
||||
<InputText id="username" v-model="form.username" class="w-full" :class="{ 'p-invalid': form.errors.username }" />
|
||||
<small class="p-error">{{ form.errors.username }}</small>
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium mb-1">
|
||||
Пароль {{ database?.id ? '(оставьте пустым для сохранения текущего)' : '*' }}
|
||||
</label>
|
||||
<Password id="password" v-model="form.password" class="w-full" :class="{ 'p-invalid': form.errors.password }"
|
||||
:feedback="false" toggle-mask />
|
||||
<small class="p-error">{{ form.errors.password }}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label for="driver" class="block text-sm font-medium mb-1">Драйвер</label>
|
||||
<Dropdown id="driver" v-model="form.driver"
|
||||
:options="[
|
||||
{ label: 'PostgreSQL', value: 'pgsql' },
|
||||
{ label: 'Microsoft SQL Server', value: 'mssql' }
|
||||
]"
|
||||
optionLabel="label" optionValue="value"
|
||||
class="w-full" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="description" class="block text-sm font-medium mb-1">Описание</label>
|
||||
<InputText id="description" v-model="form.description" class="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 pt-4">
|
||||
<Button type="submit" label="Сохранить" icon="pi pi-check" :loading="form.processing" />
|
||||
<Link :href="route('databases.target.index')">
|
||||
<Button type="button" label="Отмена" severity="secondary" />
|
||||
</Link>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Card>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useForm, Link } from '@inertiajs/vue3';
|
||||
import AppLayout from '@/Layouts/AppLayout.vue';
|
||||
import Card from 'primevue/card';
|
||||
import InputText from 'primevue/inputtext';
|
||||
import Textarea from 'primevue/textarea';
|
||||
import Button from 'primevue/button';
|
||||
import Password from 'primevue/password';
|
||||
import Dropdown from 'primevue/dropdown';
|
||||
|
||||
const props = defineProps({
|
||||
database: Object,
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
name: props.database?.name || '',
|
||||
host: props.database?.host || '',
|
||||
port: props.database?.port || 5432,
|
||||
database: props.database?.database || '',
|
||||
username: props.database?.username || '',
|
||||
password: '',
|
||||
driver: props.database?.driver || 'pgsql',
|
||||
description: props.database?.description || '',
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
if (props.database?.id) {
|
||||
form.put(route('databases.target.update', props.database.id));
|
||||
} else {
|
||||
form.post(route('databases.target.store'));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user