wowowowowo

resources/js/pages/applications/Create.vue

@@ -1,13 +1,21 @@
-<script setup>
+<script setup lang="ts">
 import InputError from "@/components/InputError.vue";
 import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, 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, useForm } from "@inertiajs/vue3";
+import { Head, Link, useForm } from "@inertiajs/vue3";
+
+defineProps<{
+    sourceProviders: Record<string, any>[];
+    repositoryTypes: Record<string, string>;
+}>();
 
 const form = useForm({
     name: "",
+    source_provider_id: "",
+    repository_type: "git",
     repository_url: "",
     default_branch: "main",
     environment_name: "production",
@@ -31,7 +39,7 @@ const form = useForm({
         ]"
     >
         <form
-            class="flex h-full max-w-2xl flex-1 flex-col gap-5 p-4"
+            class="flex h-full max-w-3xl flex-1 flex-col gap-5 p-4"
             @submit.prevent="
                 form.post(
                     route('applications.store', { organisation: $page.props.organisation.id }),
@@ -42,6 +50,67 @@ const form = useForm({
                 <h2 class="text-3xl font-bold tracking-tight">Create Application</h2>
             </div>
 
+            <Card>
+                <CardHeader>
+                    <CardTitle>Repository access</CardTitle>
+                    <CardDescription>
+                        Keystone will generate a deploy key after creation.
+                    </CardDescription>
+                </CardHeader>
+                <CardContent class="grid gap-3 text-sm">
+                    <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 v-if="sourceProviders.length" 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 v-else class="flex flex-wrap items-center justify-between gap-3 rounded-md border border-dashed p-3">
+                        <span class="text-muted-foreground">
+                            No source provider is configured yet. SSH URLs still work, but adding a
+                            provider documents which Git host this repository belongs to.
+                        </span>
+                        <Button
+                            :as="Link"
+                            size="sm"
+                            variant="secondary"
+                            :href="route('source-providers.create', { organisation: $page.props.organisation.id })"
+                        >
+                            Add provider
+                        </Button>
+                    </div>
+                </CardContent>
+            </Card>
+
             <div class="grid gap-2">
                 <Label for="name">Name</Label>
                 <Input