Initial controller/views for webhooks management

resources/js/components/index.js

@@ -50,6 +50,7 @@ import templateManager from "./template-manager.js"
 import toggleSwitch from "./toggle-switch.js"
 import triLayout from "./tri-layout.js"
 import userSelect from "./user-select.js"
+import webhookEvents from "./webhook-events";
 import wysiwygEditor from "./wysiwyg-editor.js"
 
 const componentMapping = {
@@ -105,6 +106,7 @@ const componentMapping = {
     "toggle-switch": toggleSwitch,
     "tri-layout": triLayout,
     "user-select": userSelect,
+    "webhook-events": webhookEvents,
     "wysiwyg-editor": wysiwygEditor,
 };
 

resources/js/components/webhook-events.js

@@ -0,0 +1,32 @@
+
+/**
+ * Webhook Events
+ * Manages dynamic selection control in the webhook form interface.
+ * @extends {Component}
+ */
+class WebhookEvents {
+
+    setup() {
+        this.checkboxes = this.$el.querySelectorAll('input[type="checkbox"]');
+        this.allCheckbox = this.$refs.all;
+
+        this.$el.addEventListener('change', event => {
+            if (event.target.checked && event.target === this.allCheckbox) {
+                this.deselectIndividualEvents();
+            } else if (event.target.checked) {
+                this.allCheckbox.checked = false;
+            }
+        });
+    }
+
+    deselectIndividualEvents() {
+        for (const checkbox of this.checkboxes) {
+            if (checkbox !== this.allCheckbox) {
+                checkbox.checked = false;
+            }
+        }
+    }
+
+}
+
+export default WebhookEvents;