|
@@ -8,7 +8,7 @@
|
|
|
<template v-if="actionArguments.length > 0">
|
|
<template v-if="actionArguments.length > 0">
|
|
|
|
|
|
|
|
<template v-for="arg in actionArguments" :key="arg.name">
|
|
<template v-for="arg in actionArguments" :key="arg.name">
|
|
|
- <label :for="arg.name">
|
|
|
|
|
|
|
+ <label :for="arg.type === 'checklist' ? undefined : arg.name">
|
|
|
{{ formatLabel(arg.title) }}
|
|
{{ formatLabel(arg.title) }}
|
|
|
</label>
|
|
</label>
|
|
|
|
|
|
|
@@ -25,6 +25,10 @@
|
|
|
:choices="arg.choices" :model-value="getArgumentValue(arg)" :required="arg.required"
|
|
:choices="arg.choices" :model-value="getArgumentValue(arg)" :required="arg.required"
|
|
|
@update:model-value="handleChoiceUpdate(arg, $event)" />
|
|
@update:model-value="handleChoiceUpdate(arg, $event)" />
|
|
|
|
|
|
|
|
|
|
+ <ChoiceChecklist v-else-if="arg.type === 'checklist'" :id="arg.name" :name="arg.name"
|
|
|
|
|
+ :choices="arg.choices" :model-value="getArgumentValue(arg)" :required="arg.required"
|
|
|
|
|
+ @update:model-value="handleChecklistUpdate(arg, $event)" />
|
|
|
|
|
+
|
|
|
<component v-else :is="getInputComponent(arg)" :id="arg.name" :name="arg.name"
|
|
<component v-else :is="getInputComponent(arg)" :id="arg.name" :name="arg.name"
|
|
|
:value="(arg.type === 'checkbox' || arg.type === 'confirmation') ? undefined : getArgumentValue(arg)"
|
|
:value="(arg.type === 'checkbox' || arg.type === 'confirmation') ? undefined : getArgumentValue(arg)"
|
|
|
:checked="(arg.type === 'checkbox' || arg.type === 'confirmation') ? getArgumentValue(arg) : undefined"
|
|
:checked="(arg.type === 'checkbox' || arg.type === 'confirmation') ? getArgumentValue(arg) : undefined"
|
|
@@ -65,6 +69,7 @@ import { ref, onMounted, onBeforeUnmount, onUnmounted, nextTick } from 'vue'
|
|
|
import { useRouter } from 'vue-router'
|
|
import { useRouter } from 'vue-router'
|
|
|
import { requestReconnectNow } from '../../../js/websocket.js'
|
|
import { requestReconnectNow } from '../../../js/websocket.js'
|
|
|
import ChoiceCombobox from '../components/ChoiceCombobox.vue'
|
|
import ChoiceCombobox from '../components/ChoiceCombobox.vue'
|
|
|
|
|
+import ChoiceChecklist from '../components/ChoiceChecklist.vue'
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
const router = useRouter()
|
|
|
|
|
|
|
@@ -140,6 +145,8 @@ async function setup() {
|
|
|
} else {
|
|
} else {
|
|
|
argValues.value[arg.name] = false
|
|
argValues.value[arg.name] = false
|
|
|
}
|
|
}
|
|
|
|
|
+ } else if (arg.type === 'checklist') {
|
|
|
|
|
+ argValues.value[arg.name] = paramValue !== null ? paramValue : arg.defaultValue || ''
|
|
|
} else {
|
|
} else {
|
|
|
argValues.value[arg.name] = paramValue !== null ? paramValue : arg.defaultValue || ''
|
|
argValues.value[arg.name] = paramValue !== null ? paramValue : arg.defaultValue || ''
|
|
|
}
|
|
}
|
|
@@ -238,6 +245,20 @@ function handleChange(arg, event) {
|
|
|
validateArgument(arg, event.target.value)
|
|
validateArgument(arg, event.target.value)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+function getValidationElement(arg) {
|
|
|
|
|
+ if (arg.type === 'checklist') {
|
|
|
|
|
+ return document.getElementById(`${arg.name}-value`)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ return document.getElementById(arg.name)
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+function handleChecklistUpdate(arg, value) {
|
|
|
|
|
+ argValues.value[arg.name] = value
|
|
|
|
|
+ updateUrlWithArg(arg.name, value)
|
|
|
|
|
+ validateArgument(arg, value)
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
function handleChoiceUpdate(arg, value) {
|
|
function handleChoiceUpdate(arg, value) {
|
|
|
argValues.value[arg.name] = value
|
|
argValues.value[arg.name] = value
|
|
|
updateUrlWithArg(arg.name, value)
|
|
updateUrlWithArg(arg.name, value)
|
|
@@ -251,7 +272,7 @@ async function validateArgument(arg, value) {
|
|
|
|
|
|
|
|
// Skip validation for datetime - backend will handle mangling values without seconds
|
|
// Skip validation for datetime - backend will handle mangling values without seconds
|
|
|
if (arg.type === 'datetime') {
|
|
if (arg.type === 'datetime') {
|
|
|
- const inputElement = document.getElementById(arg.name)
|
|
|
|
|
|
|
+ const inputElement = getValidationElement(arg)
|
|
|
if (inputElement) {
|
|
if (inputElement) {
|
|
|
inputElement.setCustomValidity('')
|
|
inputElement.setCustomValidity('')
|
|
|
}
|
|
}
|
|
@@ -261,7 +282,7 @@ async function validateArgument(arg, value) {
|
|
|
|
|
|
|
|
// Skip validation for checkbox and confirmation - they're always valid
|
|
// Skip validation for checkbox and confirmation - they're always valid
|
|
|
if (arg.type === 'checkbox' || arg.type === 'confirmation') {
|
|
if (arg.type === 'checkbox' || arg.type === 'confirmation') {
|
|
|
- const inputElement = document.getElementById(arg.name)
|
|
|
|
|
|
|
+ const inputElement = getValidationElement(arg)
|
|
|
if (inputElement) {
|
|
if (inputElement) {
|
|
|
inputElement.setCustomValidity('')
|
|
inputElement.setCustomValidity('')
|
|
|
}
|
|
}
|
|
@@ -279,8 +300,7 @@ async function validateArgument(arg, value) {
|
|
|
|
|
|
|
|
const validation = await window.client.validateArgumentType(validateArgumentTypeArgs)
|
|
const validation = await window.client.validateArgumentType(validateArgumentTypeArgs)
|
|
|
|
|
|
|
|
- // Get the input element to set custom validity
|
|
|
|
|
- const inputElement = document.getElementById(arg.name)
|
|
|
|
|
|
|
+ const inputElement = getValidationElement(arg)
|
|
|
|
|
|
|
|
if (validation.valid) {
|
|
if (validation.valid) {
|
|
|
delete formErrors.value[arg.name]
|
|
delete formErrors.value[arg.name]
|
|
@@ -297,8 +317,7 @@ async function validateArgument(arg, value) {
|
|
|
}
|
|
}
|
|
|
} catch (err) {
|
|
} catch (err) {
|
|
|
console.warn('Validation failed:', err)
|
|
console.warn('Validation failed:', err)
|
|
|
- // On error, clear any custom validity
|
|
|
|
|
- const inputElement = document.getElementById(arg.name)
|
|
|
|
|
|
|
+ const inputElement = getValidationElement(arg)
|
|
|
if (inputElement) {
|
|
if (inputElement) {
|
|
|
inputElement.setCustomValidity('')
|
|
inputElement.setCustomValidity('')
|
|
|
}
|
|
}
|
|
@@ -393,7 +412,7 @@ function saveBrowserSuggestions() {
|
|
|
const value = argValues.value[arg.name]
|
|
const value = argValues.value[arg.name]
|
|
|
|
|
|
|
|
// Only save non-empty values for non-checkbox/confirmation/password types
|
|
// Only save non-empty values for non-checkbox/confirmation/password types
|
|
|
- if (value && value !== '' && arg.type !== 'checkbox' && arg.type !== 'confirmation' && arg.type !== 'password') {
|
|
|
|
|
|
|
+ if (value && value !== '' && arg.type !== 'checkbox' && arg.type !== 'confirmation' && arg.type !== 'checklist' && arg.type !== 'password') {
|
|
|
try {
|
|
try {
|
|
|
const key = `olivetin-suggestions-${arg.suggestionsBrowserKey}`
|
|
const key = `olivetin-suggestions-${arg.suggestionsBrowserKey}`
|
|
|
const stored = localStorage.getItem(key)
|
|
const stored = localStorage.getItem(key)
|
|
@@ -467,7 +486,7 @@ async function handleSubmit(event) {
|
|
|
|
|
|
|
|
for (const arg of actionArguments.value) {
|
|
for (const arg of actionArguments.value) {
|
|
|
const value = argValues.value[arg.name]
|
|
const value = argValues.value[arg.name]
|
|
|
- const inputElement = document.getElementById(arg.name)
|
|
|
|
|
|
|
+ const inputElement = getValidationElement(arg)
|
|
|
|
|
|
|
|
if (arg.required && (!value || value === '')) {
|
|
if (arg.required && (!value || value === '')) {
|
|
|
formErrors.value[arg.name] = 'This field is required'
|
|
formErrors.value[arg.name] = 'This field is required'
|