[Enhancement] Add sorting, pagination, and new attributes to sources index table (#510)

* WIP - started improving handling of sorting for sources index table

* WIP - Added UI to table to indicate sort column and direction

* Refactored toggle liveview into a livecomponent

* Added sorting for all table attrs

* Added pagination to the sources table

* Added tests for updated liveviews and live components

* Add tests for new helper methods

* Added fancy new CSS to my sources table

* Added size to sources table

* Adds relative div to ensure that sorting arrow doesn't run away

* Fixed da tests

assets/js/alpine_helpers.js

@@ -40,5 +40,9 @@ window.dispatchFor = (elementOrId, eventName, detail = {}) => {
   const element =
     typeof elementOrId === 'string' ? document.getElementById(elementOrId) : elementOrId
 
-  element.dispatchEvent(new CustomEvent(eventName, { detail }))
+  // This is needed to ensure the DOM has updated before dispatching the event.
+  // Doing so ensures that the latest DOM state is what's sent to the server
+  setTimeout(() => {
+    element.dispatchEvent(new Event(eventName, { bubbles: true, detail }))
+  }, 0)
 }

assets/js/app.js

@@ -47,29 +47,6 @@ let liveSocket = new LiveSocket(document.body.dataset.socketPath, Socket, {
           }
         })
       }
-    },
-    'formless-input': {
-      mounted() {
-        const subscribedEvents = this.el.dataset.subscribe.split(' ')
-        const eventName = this.el.dataset.eventName || ''
-        const identifier = this.el.dataset.identifier || ''
-
-        subscribedEvents.forEach((domEvent) => {
-          this.el.addEventListener(domEvent, () => {
-            // This ensures that the event is pushed to the server after the input value has been updated
-            // so that the server has the most up-to-date value
-            setTimeout(() => {
-              this.pushEvent('formless-input', {
-                value: this.el.value,
-                id: identifier,
-                event: eventName,
-                dom_id: this.el.id,
-                dom_event: domEvent
-              })
-            }, 0)
-          })
-        })
-      }
     }
   }
 })