Files
keystone/resources/js/pages/applications/Edit.vue
Harry Bayliss 5b977c1f41
Some checks failed
CI / Lint (push) Failing after 22s
CI / Tests (push) Failing after 33s
wowowowowo
2026-05-28 15:15:41 +01:00

143 lines
5.7 KiB
Vue

<script setup lang="ts">
import InputError from "@/components/InputError.vue";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import AppLayout from "@/layouts/AppLayout.vue";
import { Head, router, useForm } from "@inertiajs/vue3";
const props = defineProps<{
application: Record<string, any>;
repositoryTypes: Record<string, string>;
sourceProviders: Record<string, any>[];
}>();
const form = useForm({
name: props.application.name,
source_provider_id: props.application.source_provider_id ?? "",
repository_type: props.application.repository_type ?? "git",
repository_url: props.application.repository_url,
default_branch: props.application.default_branch,
});
const destroyApplication = (): void => {
if (!window.confirm(`Delete ${props.application.name}? This removes its environments too.`)) {
return;
}
router.delete(
route("applications.destroy", {
organisation: props.application.organisation_id,
application: props.application.id,
}),
);
};
</script>
<template>
<Head :title="`Edit ${application.name}`" />
<AppLayout
:breadcrumbs="[
{
title: 'Applications',
href: route('applications.index', { organisation: $page.props.organisation.id }),
},
{
title: application.name,
href: route('applications.show', {
organisation: $page.props.organisation.id,
application: application.id,
}),
},
{ title: 'Edit' },
]"
>
<form
class="flex h-full max-w-3xl flex-1 flex-col gap-5 p-4"
@submit.prevent="
form.put(
route('applications.update', {
organisation: $page.props.organisation.id,
application: application.id,
}),
)
"
>
<div>
<h2 class="text-3xl font-bold tracking-tight">Edit Application</h2>
<p class="mt-1 text-sm text-muted-foreground">
Update repository metadata used when resolving deploy targets.
</p>
</div>
<Card>
<CardHeader>
<CardTitle>Repository</CardTitle>
</CardHeader>
<CardContent class="grid gap-4">
<div class="grid gap-2">
<Label for="repository_type">Repository type</Label>
<select
id="repository_type"
v-model="form.repository_type"
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
required
>
<option
v-for="(type, key) in repositoryTypes"
:key="key"
:value="type"
>
{{ type }}
</option>
</select>
<InputError :message="form.errors.repository_type" />
</div>
<div class="grid gap-2">
<Label for="source_provider_id">Source provider</Label>
<select
id="source_provider_id"
v-model="form.source_provider_id"
class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
>
<option value="">No provider</option>
<option
v-for="provider in sourceProviders"
:key="provider.id"
:value="provider.id"
>
{{ provider.name }} · {{ provider.type }}
</option>
</select>
<InputError :message="form.errors.source_provider_id" />
</div>
<div class="grid gap-2">
<Label for="name">Name</Label>
<Input id="name" v-model="form.name" required />
<InputError :message="form.errors.name" />
</div>
<div class="grid gap-2">
<Label for="repository_url">Repository SSH URL</Label>
<Input id="repository_url" v-model="form.repository_url" required />
<InputError :message="form.errors.repository_url" />
</div>
<div class="grid gap-2">
<Label for="default_branch">Default branch</Label>
<Input id="default_branch" v-model="form.default_branch" required />
<InputError :message="form.errors.default_branch" />
</div>
</CardContent>
</Card>
<div class="flex flex-wrap justify-between gap-2">
<Button type="button" variant="destructive" @click="destroyApplication">
Delete application
</Button>
<Button type="submit" :disabled="form.processing">Save changes</Button>
</div>
</form>
</AppLayout>
</template>