|
|
|
@ -1,5 +1,6 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
import type { PropType } from "vue" |
|
|
|
import type { SelectItem } from "@nuxt/ui" |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
task: { type: Object as PropType<any>, default: null }, |
|
|
|
@ -29,6 +30,23 @@ const form = reactive({ |
|
|
|
|
|
|
|
const saving = ref(false) |
|
|
|
const error = ref("") |
|
|
|
const showAdvanced = ref(false) |
|
|
|
|
|
|
|
const typeItems: SelectItem[] = [ |
|
|
|
{ label: "Function", value: "function" }, |
|
|
|
{ label: "HTTP Request", value: "http" }, |
|
|
|
] |
|
|
|
|
|
|
|
const httpMethodItems: SelectItem[] = [ |
|
|
|
{ label: "GET", value: "GET" }, |
|
|
|
{ label: "POST", value: "POST" }, |
|
|
|
{ label: "PUT", value: "PUT" }, |
|
|
|
{ label: "DELETE", value: "DELETE" }, |
|
|
|
] |
|
|
|
|
|
|
|
const functionItems = computed<SelectItem[]>(() => |
|
|
|
props.registeredFunctions.map((f) => ({ label: f, value: f })) |
|
|
|
) |
|
|
|
|
|
|
|
const cronPresets = [ |
|
|
|
{ label: "Every minute", value: "* * * * *" }, |
|
|
|
@ -68,37 +86,51 @@ async function save() { |
|
|
|
saving.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function onOverlayClick(e: MouseEvent) { |
|
|
|
if ((e.target as HTMLElement).dataset.overlay === "true") { |
|
|
|
emit("close") |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<UModal :open="true" @close="emit('close')"> |
|
|
|
<template #header> |
|
|
|
<div |
|
|
|
data-overlay="true" |
|
|
|
class="fixed inset-0 z-50 flex items-start justify-center pt-[10vh] bg-black/40" |
|
|
|
@click="onOverlayClick" |
|
|
|
> |
|
|
|
<div class="bg-white rounded-xl shadow-xl w-full max-w-lg max-h-[80vh] overflow-y-auto"> |
|
|
|
<!-- Header --> |
|
|
|
<div class="flex items-center justify-between px-6 py-4 border-b"> |
|
|
|
<h2 class="text-lg font-semibold">{{ isEdit ? 'Edit' : 'Create' }} Task</h2> |
|
|
|
</template> |
|
|
|
<UButton |
|
|
|
variant="ghost" |
|
|
|
color="neutral" |
|
|
|
size="sm" |
|
|
|
icon="i-lucide-x" |
|
|
|
square |
|
|
|
@click="emit('close')" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="space-y-4 p-4"> |
|
|
|
<UAlert v-if="error" color="red" :title="error" /> |
|
|
|
<!-- Body --> |
|
|
|
<div class="space-y-4 p-6"> |
|
|
|
<div v-if="error" class="bg-red-50 text-red-700 rounded-lg px-4 py-3 text-sm"> |
|
|
|
{{ error }} |
|
|
|
</div> |
|
|
|
|
|
|
|
<div> |
|
|
|
<label class="block text-sm font-medium mb-1">Name</label> |
|
|
|
<UFormField label="Name" required> |
|
|
|
<UInput v-model="form.name" placeholder="Task name" /> |
|
|
|
</div> |
|
|
|
</UFormField> |
|
|
|
|
|
|
|
<div> |
|
|
|
<label class="block text-sm font-medium mb-1">Type</label> |
|
|
|
<USelect |
|
|
|
v-model="form.type" |
|
|
|
:options="[ |
|
|
|
{ label: 'Function', value: 'function' }, |
|
|
|
{ label: 'HTTP Request', value: 'http' }, |
|
|
|
]" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<UFormField label="Type" required> |
|
|
|
<USelect v-model="form.type" :items="typeItems" /> |
|
|
|
</UFormField> |
|
|
|
|
|
|
|
<div> |
|
|
|
<label class="block text-sm font-medium mb-1">Cron Expression</label> |
|
|
|
<UFormField label="Cron Expression" required> |
|
|
|
<UInput v-model="form.cronExpression" placeholder="0 9 * * *" /> |
|
|
|
<div class="flex gap-1 mt-1 flex-wrap"> |
|
|
|
<div class="flex gap-1 mt-1.5 flex-wrap"> |
|
|
|
<UButton |
|
|
|
v-for="preset in cronPresets" |
|
|
|
:key="preset.value" |
|
|
|
@ -109,86 +141,80 @@ async function save() { |
|
|
|
{{ preset.label }} |
|
|
|
</UButton> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</UFormField> |
|
|
|
|
|
|
|
<!-- Function fields --> |
|
|
|
<template v-if="form.type === 'function'"> |
|
|
|
<div> |
|
|
|
<label class="block text-sm font-medium mb-1">Function</label> |
|
|
|
<UFormField label="Function" required> |
|
|
|
<USelect |
|
|
|
v-model="form.functionName" |
|
|
|
:options="registeredFunctions.map((f: string) => ({ label: f, value: f }))" |
|
|
|
:items="functionItems" |
|
|
|
placeholder="Select function" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<label class="block text-sm font-medium mb-1">Payload (JSON)</label> |
|
|
|
</UFormField> |
|
|
|
<UFormField label="Payload (JSON)"> |
|
|
|
<UInput v-model="form.functionPayload" placeholder='{"key": "value"}' /> |
|
|
|
</div> |
|
|
|
</UFormField> |
|
|
|
</template> |
|
|
|
|
|
|
|
<!-- HTTP fields --> |
|
|
|
<template v-if="form.type === 'http'"> |
|
|
|
<div class="grid grid-cols-4 gap-2"> |
|
|
|
<div class="col-span-1"> |
|
|
|
<label class="block text-sm font-medium mb-1">Method</label> |
|
|
|
<USelect |
|
|
|
v-model="form.httpMethod" |
|
|
|
:options="['GET','POST','PUT','DELETE'].map(m => ({ label: m, value: m }))" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="col-span-3"> |
|
|
|
<label class="block text-sm font-medium mb-1">URL</label> |
|
|
|
<div class="grid grid-cols-4 gap-3"> |
|
|
|
<UFormField label="Method" class="col-span-1"> |
|
|
|
<USelect v-model="form.httpMethod" :items="httpMethodItems" /> |
|
|
|
</UFormField> |
|
|
|
<UFormField label="URL" required class="col-span-3"> |
|
|
|
<UInput v-model="form.httpUrl" placeholder="https://example.com/api" /> |
|
|
|
</UFormField> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<label class="block text-sm font-medium mb-1">Headers (JSON)</label> |
|
|
|
<UFormField label="Headers (JSON)"> |
|
|
|
<UInput v-model="form.httpHeaders" placeholder='{"Authorization": "Bearer ..."}' /> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<label class="block text-sm font-medium mb-1">Body</label> |
|
|
|
<UInput v-model="form.httpBody" /> |
|
|
|
</div> |
|
|
|
</UFormField> |
|
|
|
<UFormField label="Body"> |
|
|
|
<UTextarea v-model="form.httpBody" :rows="3" /> |
|
|
|
</UFormField> |
|
|
|
</template> |
|
|
|
|
|
|
|
<!-- Advanced settings --> |
|
|
|
<details class="border rounded-lg p-3"> |
|
|
|
<summary class="text-sm font-medium cursor-pointer">Advanced</summary> |
|
|
|
<div class="space-y-3 mt-3"> |
|
|
|
<label class="flex items-center gap-2"> |
|
|
|
<input type="checkbox" v-model="form.catchUp" /> |
|
|
|
<span class="text-sm">Catch up missed executions after restart</span> |
|
|
|
</label> |
|
|
|
<label class="flex items-center gap-2"> |
|
|
|
<input type="checkbox" v-model="form.enabled" /> |
|
|
|
<span class="text-sm">Enabled</span> |
|
|
|
</label> |
|
|
|
<div class="grid grid-cols-3 gap-3"> |
|
|
|
<div> |
|
|
|
<label class="block text-xs font-medium mb-1">Max Retries</label> |
|
|
|
<UInput v-model.number="form.maxRetries" type="number" min="0" /> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<label class="block text-xs font-medium mb-1">Retry Delay (s)</label> |
|
|
|
<UInput v-model.number="form.retryDelaySeconds" type="number" min="1" /> |
|
|
|
<div class="border rounded-lg"> |
|
|
|
<button |
|
|
|
type="button" |
|
|
|
class="w-full flex items-center justify-between px-4 py-2.5 text-sm font-medium hover:bg-gray-50 rounded-lg transition-colors" |
|
|
|
@click="showAdvanced = !showAdvanced" |
|
|
|
> |
|
|
|
<span>Advanced</span> |
|
|
|
<UIcon |
|
|
|
:name="showAdvanced ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'" |
|
|
|
class="size-4 text-gray-400" |
|
|
|
/> |
|
|
|
</button> |
|
|
|
<div v-if="showAdvanced" class="space-y-4 px-4 pb-4 border-t pt-4"> |
|
|
|
<div class="flex flex-col gap-3"> |
|
|
|
<UCheckbox v-model="form.catchUp" label="Catch up missed executions after restart" /> |
|
|
|
<UCheckbox v-model="form.enabled" label="Enabled" /> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<label class="block text-xs font-medium mb-1">Timeout (s)</label> |
|
|
|
<UInput v-model.number="form.timeoutSeconds" type="number" min="1" /> |
|
|
|
<div class="grid grid-cols-3 gap-3"> |
|
|
|
<UFormField label="Max Retries"> |
|
|
|
<UInput v-model.number="form.maxRetries" type="number" :min="0" /> |
|
|
|
</UFormField> |
|
|
|
<UFormField label="Retry Delay (s)"> |
|
|
|
<UInput v-model.number="form.retryDelaySeconds" type="number" :min="1" /> |
|
|
|
</UFormField> |
|
|
|
<UFormField label="Timeout (s)"> |
|
|
|
<UInput v-model.number="form.timeoutSeconds" type="number" :min="1" /> |
|
|
|
</UFormField> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</details> |
|
|
|
</div> |
|
|
|
|
|
|
|
<template #footer> |
|
|
|
<div class="flex justify-end gap-2"> |
|
|
|
<!-- Footer --> |
|
|
|
<div class="flex justify-end gap-2 px-6 py-4 border-t bg-gray-50 rounded-b-xl"> |
|
|
|
<UButton variant="ghost" @click="emit('close')">Cancel</UButton> |
|
|
|
<UButton :loading="saving" @click="save"> |
|
|
|
{{ isEdit ? 'Update' : 'Create' }} |
|
|
|
</UButton> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</UModal> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
