From 38db883b4c237b88905284bc7e8292e46469cae2 Mon Sep 17 00:00:00 2001
From: "Harry (hjbdev)" <harry@hjb.dev>
Date: Tue, 8 Apr 2025 22:37:31 +0100
Subject: [PATCH] service name generation

---
 resources/js/pages/services/Create.vue | 27 ++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/resources/js/pages/services/Create.vue b/resources/js/pages/services/Create.vue
index f681d51..3a9e0a1 100644
--- a/resources/js/pages/services/Create.vue
+++ b/resources/js/pages/services/Create.vue
@@ -8,6 +8,7 @@ import ServiceCategory, { DescriptionMap as serviceCategoryDescriptions } from '
 import AppLayout from '@/layouts/AppLayout.vue';
 import { Head, useForm } from '@inertiajs/vue3';
 import { AppWindowIcon, ArchiveIcon, DatabaseIcon, DatabaseZapIcon, DoorOpenIcon } from 'lucide-vue-next';
+import { watch } from 'vue';
 
 const props = defineProps({
     services: Object,
@@ -36,6 +37,28 @@ function getIcon(category) {
             return null;
     }
 }
+
+function generateServiceName() {
+    let str = '';
+
+    if (form.category) {
+        str += form.category.toLowerCase() + '-';
+    }
+
+    if (form.service) {
+        str += form.service.toLowerCase() + '-';
+    }
+
+    if (form.version) {
+        str += form.version.toLowerCase();
+    }
+
+    return str;
+}
+
+watch([() => form.category, () => form.service, () => form.version], () => {
+    form.name = generateServiceName();
+});
 </script>
 
 <template>
@@ -88,9 +111,9 @@ function getIcon(category) {
 
             <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-for="(version, versionKey) in services[form.category][form.service].versions"
                     v-model="form.version"
-                    :value="version.name"
+                    :value="versionKey"
                     name="version"
                     class="py-3"
                 >