sorting for event and app list

packages/builder/src/pages/builder/portal/account/auditLogs/index.svelte

@@ -27,7 +27,6 @@
   import TimeRenderer from "./_components/TimeRenderer.svelte"
   import AppColumnRenderer from "./_components/AppColumnRenderer.svelte"
   import { cloneDeep } from "lodash"
-  import { Utils } from "@budibase/frontend-core"
 
   const schema = {
     date: { width: "0.8fr" },
@@ -87,11 +86,17 @@
   $: userPage = $userPageInfo.page
   $: logsPage = $logsPageInfo.page
 
-  $: enrichedList = enrich($users.data || [], selectedUsers)
+  $: enrichedList = enrich($users.data || [], selectedUsers, "_id")
-  $: sortedList = sort(enrichedList)
+  $: sortedList = sort(enrichedList, "email")
+
+  $: sortedEvents = sort(
+    enrich(parseEventObject($auditLogs.events), selectedEvents, "id"),
+    "id"
+  )
+  // below is not sorting yet
+  $: sortedApps = enrich($apps, selectedApps, "appId")
 
   const debounce = value => {
-    console.log(value)
     clearTimeout(timer)
     timer = setTimeout(() => {
       logSearchTerm = value
@@ -155,20 +160,20 @@
     }
   }
 
-  const enrich = (list, selected) => {
+  const enrich = (list, selected, key) => {
     return list.map(item => {
       return {
         ...item,
-        selected: selected.find(x => x === item._id) != null,
+        selected: selected.find(x => x === item[key]) != null,
       }
     })
   }
 
-  const sort = list => {
+  const sort = (list, key) => {
     let sortedList = list.slice()
     sortedList?.sort((a, b) => {
       if (a.selected === b.selected) {
-        return a["email"] < b["email"] ? -1 : 1
+        return a[key] < b[key] ? -1 : 1
       } else if (a.selected) {
         return -1
       } else if (b.selected) {
@@ -179,6 +184,16 @@
     return sortedList
   }
 
+  const parseEventObject = obj => {
+    // convert obj which is an object of key value pairs to an array of objects
+    // with the key as the id and the value as the name
+    if (obj) {
+      return Object.entries(obj).map(([id, label]) => {
+        return { id, label }
+      })
+    }
+  }
+
   const viewDetails = detail => {
     selectedLog = detail
     sidePanelVisible = true
@@ -259,7 +274,7 @@
         label="App"
         getOptionValue={app => app.instance._id}
         getOptionLabel={app => app.name}
-        options={$apps}
+        options={sortedApps}
         bind:value={selectedApps}
       />
     </div>
@@ -267,9 +282,9 @@
       <Multiselect
         customPopoverHeight="500px"
         autocomplete
-        getOptionValue={event => event[0]}
+        getOptionValue={event => event.id}
-        getOptionLabel={event => event[1]}
+        getOptionLabel={event => event.label}
-        options={Object.entries($auditLogs.events)}
+        options={sortedEvents}
         placeholder="All events"
         label="Event"
         bind:value={selectedEvents}