refactor: simplify checkbox event handling in webhook form

This commit is contained in:
Abhinav Raut
2025-06-15 13:22:27 +05:30
parent 88d719ec4f
commit d31fcb00b6

View File

@@ -29,35 +29,32 @@
<FormControl> <FormControl>
<div class="space-y-6"> <div class="space-y-6">
<div <div
v-for="eventGroup in webhookEvents" v-for="group in webhookEvents"
:key="eventGroup.name" :key="group.name"
class="rounded border border-border bg-card" class="rounded border border-border bg-card"
> >
<div class="border-b border-border bg-muted/30 px-5 py-3"> <div class="border-b border-border bg-muted/30 px-5 py-3">
<h4 class="font-medium text-card-foreground">{{ eventGroup.name }}</h4> <h4 class="font-medium text-card-foreground">{{ group.name }}</h4>
</div> </div>
<div class="p-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div class="p-5"> <div
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"> v-for="event in group.events"
<div :key="event.value"
v-for="event in eventGroup.events" class="flex items-start space-x-3"
:key="event.value" >
class="flex items-start space-x-3" <Checkbox
> :checked="componentField.modelValue?.includes(event.value)"
<Checkbox @update:checked="
:checked="componentField.modelValue?.includes(event.value)" (checked) =>
@update:checked=" handleEventChange(
(newValue) => checked,
handleEventChange( event.value,
newValue, handleChange,
event.value, componentField.modelValue
handleChange, )
componentField.modelValue "
) />
" <label class="font-normal text-sm">{{ event.label }}</label>
/>
<label class="font-normal text-sm">{{ event.label }}</label>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -163,16 +160,9 @@ const webhookEvents = ref([
} }
]) ])
// If checked add event to the list, if unchecked remove it and call handleChange
const handleEventChange = (checked, eventName, handleChange, currentEvents) => { const handleEventChange = (checked, eventName, handleChange, currentEvents) => {
const events = currentEvents || [] const events = currentEvents || []
let newEvents handleChange(checked ? [...events, eventName] : events.filter((e) => e !== eventName))
if (checked) {
newEvents = [...events, eventName]
} else {
newEvents = events.filter((event) => event !== eventName)
}
handleChange(newEvents)
} }
</script> </script>