Implement search highlighting

packages/web-app-user-management/package.json

@@ -4,6 +4,7 @@
   "description": "ownCloud user management",
   "license": "AGPL-3.0",
   "dependencies": {
-    "email-validator": "^2.0.4"
+    "email-validator": "^2.0.4",
+    "mark.js": "^8.11.1"
   }
 }

packages/web-app-user-management/src/components/Groups/GroupsList.vue

@@ -1,5 +1,6 @@
 <template>
   <oc-table
+    ref="table"
     :sort-by="sortBy"
     :sort-dir="sortDir"
     :fields="fields"
@@ -53,6 +54,7 @@
 import { onBeforeUnmount, ref } from '@vue/composition-api'
 import { Registry } from '../../services'
 import Fuse from 'fuse.js'
+import Mark from 'mark.js'
 
 export default {
   name: 'GroupsList',
@@ -78,7 +80,8 @@ export default {
   data() {
     return {
       sortBy: 'displayName',
-      sortDir: 'asc'
+      sortDir: 'asc',
+      markInstance: null
     }
   },
   computed: {
@@ -126,6 +129,24 @@ export default {
       return this.selectedGroups.map((group) => group.id)
     }
   },
+  watch: {
+    searchTerm() {
+      if (!this.markInstance) {
+        return
+      }
+      this.markInstance.unmark()
+      this.markInstance.mark(this.searchTerm, {
+        element: 'span',
+        className: 'highlight-mark',
+        exclude: ['th *', 'tfoot *']
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.markInstance = new Mark(this.$refs.table.$el)
+    })
+  },
   methods: {
     filter(groups, searchTerm) {
       if (!(searchTerm || '').trim()) {
@@ -158,3 +179,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.highlight-mark {
+  background: yellow;
+}
+</style>

packages/web-app-user-management/src/components/Users/UsersList.vue

@@ -1,5 +1,6 @@
 <template>
   <oc-table
+    ref="table"
     :sort-by="sortBy"
     :sort-dir="sortDir"
     :fields="fields"
@@ -52,6 +53,7 @@
 import { onBeforeUnmount, ref } from '@vue/composition-api'
 import { Registry } from '../../services'
 import Fuse from 'fuse.js'
+import Mark from 'mark.js'
 
 export default {
   name: 'UsersList',
@@ -81,7 +83,8 @@ export default {
   data() {
     return {
       sortBy: 'onPremisesSamAccountName',
-      sortDir: 'asc'
+      sortDir: 'asc',
+      markInstance: null
     }
   },
   computed: {
@@ -145,6 +148,24 @@ export default {
       return this.selectedUsers.map((user) => user.id)
     }
   },
+  watch: {
+    searchTerm() {
+      if (!this.markInstance) {
+        return
+      }
+      this.markInstance.unmark()
+      this.markInstance.mark(this.searchTerm, {
+        element: 'span',
+        className: 'highlight-mark',
+        exclude: ['th *', 'tfoot *']
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.markInstance = new Mark(this.$refs.table.$el)
+    })
+  },
   methods: {
     filter(users, searchTerm) {
       if (!(searchTerm || '').trim()) {
@@ -188,3 +209,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.highlight-mark {
+  background: yellow;
+}
+</style>

yarn.lock

@@ -8941,6 +8941,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mark.js@npm:^8.11.1":
+  version: 8.11.1
+  resolution: "mark.js@npm:8.11.1"
+  checksum: aa6b9ae1c67245348d5b7abd253ef2acd6bb05c6be358d7d192416d964e42665fc10e0e865591c6f93ab9b57e8da1f23c23216e8ebddb580905ea7a0c0df15d4
+  languageName: node
+  linkType: hard
+
 "marked@npm:^4.0.12":
   version: 4.0.12
   resolution: "marked@npm:4.0.12"
@@ -13389,6 +13396,7 @@ __metadata:
   resolution: "user-management@workspace:packages/web-app-user-management"
   dependencies:
     email-validator: ^2.0.4
+    mark.js: ^8.11.1
   languageName: unknown
   linkType: soft