feat: #135 add support for generated secrets in templates

Author: bohdan-shulha

Diff for: package-lock.json

@@ -28,6 +28,8 @@
     },
     "dependencies": {
         "dayjs": "^1.11.11",
+        "handlebars": "^4.7.8",
+        "lodash.set": "^4.3.2",
         "swrv": "^1.0.4"
     },
     "lint-staged": {

Diff for: package.json

@@ -1,16 +1,10 @@
 <script setup>
-import InputError from "@/Components/InputError.vue";
-import InputLabel from "@/Components/InputLabel.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import AppLayout from "@/Layouts/AppLayout.vue";
-import TextInput from "@/Components/TextInput.vue";
 import ActionSection from "@/Components/ActionSection.vue";
 import { useForm } from "@inertiajs/vue3";
-import FormField from "@/Components/FormField.vue";
-import Select from "@/Components/Select.vue";
 import SecondaryButton from "@/Components/SecondaryButton.vue";
-import TextArea from "@/Components/TextArea.vue";
-import { computed, effect, reactive } from "vue";
+import { reactive } from "vue";
 import ServiceDetailsForm from "@/Pages/Services/Partials/ServiceDetailsForm.vue";
 import DeploymentData from "@/Pages/Services/Partials/DeploymentData.vue";
 import TemplatePicker from "@/Pages/Services/Partials/TemplatePicker.vue";

Diff for: resources/js/Pages/Services/Create.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, effect, ref } from "vue";
 import TextInput from "@/Components/TextInput.vue";
 import TextArea from "@/Components/TextArea.vue";
 import FormField from "@/Components/FormField.vue";
@@ -12,12 +12,14 @@ const props = defineProps({
 });
 
 const itemName = computed(() => {
-    if (props.scope) {
-        return `${props.scope}/${props.item.name}`;
-    }
-
-    return props.item.name;
+    return `${props.scope}/${props.item.name}`;
 });
+
+const isCollapsibleOpen = ref(false);
+
+const toggleCollapsible = () => {
+    isCollapsibleOpen.value = !isCollapsibleOpen.value;
+};
 </script>
 
 <template>
@@ -43,6 +45,47 @@ const itemName = computed(() => {
         </template>
     </div>
 
+    <div
+        v-else-if="item.type === 'collapsible'"
+        class="w-full my-2"
+        v-auto-animate
+    >
+        <button
+            @click="toggleCollapsible"
+            class="flex items-center text-sm font-medium text-gray-700 hover:text-gray-900"
+        >
+            <span class="w-full nowrap">{{
+                item.label || "Advanced Options"
+            }}</span>
+            <svg
+                :class="{ 'rotate-180': isCollapsibleOpen }"
+                class="w-5 h-5 transition-transform duration-200"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+            >
+                <path
+                    fill-rule="evenodd"
+                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                    clip-rule="evenodd"
+                />
+            </svg>
+        </button>
+        <div v-if="isCollapsibleOpen" class="mt-2 flex flex-col gap-4">
+            <template
+                v-for="subItem in item.items"
+                :key="'collapsible-' + subItem.id"
+            >
+                <DynamicForm
+                    :item="subItem"
+                    :form="form"
+                    :errors="errors"
+                    :scope="scope"
+                />
+            </template>
+        </div>
+    </div>
+
     <template v-else>
         <FormField class="w-full" :error="errors[itemName]">
             <template #label>{{ item.label }}</template>