enum fix, create form wip

app/Console/Commands/GenerateJSEnums.php

@@ -69,6 +69,14 @@ class GenerateJSEnums extends Command
                 $js .= "\n";
             }
 
+            if (method_exists($enum, 'getDescription')) {
+                $values = $enum::toArray();
+                $descriptions = array_map(fn($key) => $enum::getDescription($key), $values);
+                $js .= 'export const DescriptionMap = ';
+                $js .= json_encode($descriptions, JSON_PRETTY_PRINT) . "\n";
+                $js .= "\n";
+            }
+
             if (method_exists($enum, 'colours')) {
                 $colours = $enum::colours();
                 $js .= 'export const ColourMap = ';

app/Enums/ServiceCategory.php

@@ -13,4 +13,20 @@ enum ServiceCategory: string
     case GATEWAY = 'gateway';
     case STORAGE = 'storage';
     case CACHE = 'cache';
+
+    public static function getDescription(ServiceCategory|string $category) {
+        if (is_string($category)) {
+            $category = ServiceCategory::from($category);
+        }
+        if (! $category instanceof ServiceCategory) {
+            throw new \InvalidArgumentException('Invalid category provided');
+        }
+        return match ($category) {
+            self::APPLICATION => 'The base container image for your application',
+            self::DATABASE => 'Postgres or MySQL',
+            self::GATEWAY => 'The gateway is the first point of contact for your application',
+            self::STORAGE => 'S3 or S3-compatible service',
+            self::CACHE => 'Redis, Memcached or similar',
+        };
+    }
 }

resources/js/enums/DeploymentStatus.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:18:32
+// Published at 2025-04-01 16:27:12
 
 export default {
     "PENDING": "pending",

resources/js/enums/FirewallRuleStatus.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:18:32
+// Published at 2025-04-01 16:27:12
 
 export default {
     "NOT_APPLIED": "not-applied",

resources/js/enums/OrganisationRole.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:18:32
+// Published at 2025-04-01 16:27:12
 
 export default {
     "ADMIN": "admin",

resources/js/enums/RepositoryType.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:18:32
+// Published at 2025-04-01 16:27:12
 
 export default {
     "GIT": "git"

resources/js/enums/ServerProvider.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:18:32
+// Published at 2025-04-01 16:27:12
 
 export default {
     "HETZNER": "hetzner",

resources/js/enums/ServerStatus.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:18:32
+// Published at 2025-04-01 16:27:12
 
 export default {
     "WAITING_FOR_PROVIDER": "waiting-for-provider",

resources/js/enums/ServiceCategory.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:18:32
+// Published at 2025-04-01 16:27:12
 
 export default {
     "DATABASE": "database",
@@ -9,3 +9,11 @@ export default {
     "CACHE": "cache"
 }
 
+export const DescriptionMap = {
+    "DATABASE": "Postgres or MySQL",
+    "APPLICATION": "The base container image for your application",
+    "GATEWAY": "The gateway is the first point of contact for your application",
+    "STORAGE": "S3 or S3-compatible service",
+    "CACHE": "Redis, Memcached or similar"
+}
+

resources/js/enums/ServiceStatus.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:18:32
+// Published at 2025-04-01 16:27:12
 
 export default {
     "NOT_INSTALLED": "not-installed",

resources/js/enums/ServiceType.js

@@ -1,5 +1,5 @@
 // This is a generated file. 
-// Published at 2025-04-01 16:18:32
+// Published at 2025-04-01 16:27:12
 
 export default {
     "FRANKENPHP": "frankenphp",

resources/js/pages/services/Create.vue

@@ -1,13 +1,14 @@
 <script setup>
-import RadioButton from '@/components/RadioButton.vue';
 import { Button } from '@/components/ui/button';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { Head, router, useForm } from '@inertiajs/vue3';
+import { Head, useForm } from '@inertiajs/vue3';
-import { watch } from 'vue';
+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';
 
-const props = defineProps({
+const props = defineProps({});
-
-});
 
 const form = useForm({
     name: null,
@@ -32,14 +33,34 @@ const form = useForm({
             },
             {
                 title: 'Create',
-            }
+            },
         ]"
     >
         <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
+            <div class="flex gap-2">
+                <RadioButton
+                    v-for="(category, categoryKey) in ServiceCategory"
+                    v-model="form.category"
+                    :value="category"
+                    name="category"
+                >
+                    <h4 class="text-lg font-semibold tracking-tighter">{{ category }}</h4>
+                    <p class="text-sm">{{ serviceCategoryDescriptions[categoryKey] }}</p>
+                </RadioButton>
+            </div>
 
-          
+            <div class="grid gap-2">
-            <div>
+                <Label for="name">Name</Label>
-                
+                <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">