115 lines
5.5 KiB
Vue
115 lines
5.5 KiB
Vue
<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>
|