Converted search filters to not be vue based

resources/js/components/add-remove-rows.js

@@ -0,0 +1,31 @@
+import {onChildEvent} from "../services/dom";
+
+/**
+ * AddRemoveRows
+ * Allows easy row add/remove controls onto a table.
+ * Needs a model row to use when adding a new row.
+ * @extends {Component}
+ */
+class AddRemoveRows {
+    setup() {
+        this.modelRow = this.$refs.model;
+        this.addButton = this.$refs.add;
+        this.removeSelector = this.$opts.removeSelector;
+        this.setupListeners();
+    }
+
+    setupListeners() {
+        this.addButton.addEventListener('click', e => {
+            const clone = this.modelRow.cloneNode(true);
+            clone.classList.remove('hidden');
+            this.modelRow.parentNode.insertBefore(clone, this.modelRow);
+        });
+
+        onChildEvent(this.$el, this.removeSelector, 'click', (e) => {
+            const row = e.target.closest('tr');
+            row.remove();
+        });
+    }
+}
+
+export default AddRemoveRows;

resources/js/components/optional-input.js

@@ -0,0 +1,28 @@
+import {onSelect} from "../services/dom";
+
+class OptionalInput {
+    setup() {
+        this.removeButton = this.$refs.remove;
+        this.showButton = this.$refs.show;
+        this.input = this.$refs.input;
+        this.setupListeners();
+    }
+
+    setupListeners() {
+        onSelect(this.removeButton, () => {
+            this.input.value = '';
+            this.input.classList.add('hidden');
+            this.removeButton.classList.add('hidden');
+            this.showButton.classList.remove('hidden');
+        });
+
+        onSelect(this.showButton, () => {
+            this.input.classList.remove('hidden');
+            this.removeButton.classList.remove('hidden');
+            this.showButton.classList.add('hidden');
+        });
+    }
+
+}
+
+export default OptionalInput;