harry/keystone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Validation, service form improvements

Browse Source
This commit is contained in:
Harry (hjbdev)
2025-04-08 22:33:05 +01:00
parent 628d6a14ed
commit d924d418c7
4 changed files with 164 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/enums/FirewallRuleStatus.js
View File

@@ -1,7 +1,7 @@
// This is a generated file.
export default {
"UNINSTALLED": "uninstalled",
"NOT_INSTALLED": "not-installed",
"INSTALLED": "installed",
"FAILED": "failed",
"REMOVED": "removed"

59
resources/js/pages/services/Create.vue
View File

@@ -1,20 +1,23 @@
<script setup>
import InputError from '@/components/InputError.vue';
import RadioButton from '@/components/RadioButton.vue';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import ServiceCategory, { DescriptionMap as serviceCategoryDescriptions } from '@/enums/ServiceCategory';
import AppLayout from '@/layouts/AppLayout.vue';
import { Head, useForm } from '@inertiajs/vue3';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import InputError from '@/components/InputError.vue';
import ServiceCategory, { DescriptionMap as serviceCategoryDescriptions } from '@/enums/ServiceCategory';
import RadioButton from '@/components/RadioButton.vue';
import { AppWindowIcon, ArchiveIcon, DatabaseIcon, DatabaseZapIcon, DoorOpenIcon } from 'lucide-vue-next';
const props = defineProps({});
const props = defineProps({
services: Object,
});
const form = useForm({
name: null,
category: null,
type: null,
service: null,
version: null,
});
function getIcon(category) {
@@ -55,38 +58,54 @@ function getIcon(category) {
]"
>
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-2">
<div class="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
<RadioButton
v-for="(category, categoryKey) in ServiceCategory"
v-model="form.category"
:value="category"
name="category"
class="py-3 flex gap-3"
class="flex gap-3 py-3"
>
<component :is="getIcon(category)" class="size-5" />
<div>
<h4 class="text-lg font-semibold tracking-tighter leading-none mb-1">{{ category }}</h4>
<h4 class="mb-1 text-lg font-semibold leading-none tracking-tighter">{{ category }}</h4>
<p class="text-sm">{{ serviceCategoryDescriptions[categoryKey] }}</p>
</div>
</RadioButton>
</div>
<div v-if="form.category" class="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
<RadioButton
v-for="service in services[form.category]"
v-model="form.service"
:value="service.name"
name="service"
class="py-3"
>
<h4 class="mb-1 text-lg font-semibold leading-none tracking-tighter">{{ service.name }}</h4>
</RadioButton>
</div>
<div v-if="form.service" class="grid gap-2 md:grid-cols-2 lg:grid-cols-3">
<RadioButton
v-for="version in services[form.category][form.service].versions"
v-model="form.version"
:value="version.name"
name="version"
class="py-3"
>
<h4 class="mb-1 text-lg font-semibold leading-none tracking-tighter">{{ version.name }}</h4>
</RadioButton>
</div>
<div class="grid gap-2">
<Label for="name">Name</Label>
<Input
id="name"
type="text"
required
autofocus
:tabindex="1"
v-model="form.name"
placeholder="postgres-db"
/>
<Input id="name" type="text" required autofocus :tabindex="1" v-model="form.name" placeholder="postgres-db" />
<InputError :message="form.errors.name" />
</div>
<div class="flex items-center justify-end">
<Button @click="form.post(route('servers.store', { organisation: $page.props.organisation.id }))">Submit</Button>
<Button @click="form.post(route('services.store', { organisation: $page.props.organisation.id, server: $page.props.server.id }))">Submit</Button>
</div>
</div>
</AppLayout>