mirror of
https://github.com/abhinavxd/libredesk.git
synced 2025-11-03 13:33:32 +00:00
refactor: simplify checkbox event handling in webhook form
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user