dave/rfd-fyi
1
0
Fork 0
mirror of https://github.com/davegallant/rfd-fyi.git synced 2025-08-07 00:58:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add filter with highlighting

Browse Source
This commit is contained in:
Dave Gallant
2022-08-18 03:47:48 +00:00
parent 4ed267df0b
commit 4df9bb1044
1 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/App.vue
View File

@@ -1,5 +1,11 @@
<template> <template>
<body> <body>
<input
class="form-control bg-dark text-light"
type="text"
placeholder="Search"
v-model="filter"
/>
<table class="table table-dark table-hover"> <table class="table table-dark table-hover">
<thead> <thead>
<tr> <tr>
@@ -17,13 +23,17 @@
:is-full-page="false" :is-full-page="false"
> >
</loading> </loading>
<tr scope="row" v-for="topic in topics" :key="topic.topic_id"> <tr
scope="row"
v-for="(topic, index) in filteredTopics"
:key="`topic.topic_id-${index}`"
>
<td scope="col"> <td scope="col">
<a <a
:href="'https://forums.redflagdeals.com' + topic.web_path" href="'https://forums.redflagdeals.com' + topic.web_path"
target="_blank" target="_blank"
>{{ topic.title }}</a v-html="highlightMatches(topic.title)"
> ></a>
</td> </td>
<td scope="col">{{ topic.total_views }}</td> <td scope="col">{{ topic.total_views }}</td>
<td scope="col">{{ formatDate(topic.last_post_time) }}</td> <td scope="col">{{ formatDate(topic.last_post_time) }}</td>
@@ -44,6 +54,7 @@ export default {
return { return {
topics: [], topics: [],
isLoading: false, isLoading: false,
filter: "",
}; };
}, },
mounted() { mounted() {
@@ -65,6 +76,24 @@ export default {
return moment(String(v)).format("hh:mm A z (MM/DD)"); return moment(String(v)).format("hh:mm A z (MM/DD)");
}; };
}, },
filteredTopics() {
return this.topics.filter((row) => {
const titles = row.title.toString().toLowerCase();
const searchTerm = this.filter.toLowerCase();
return titles.includes(searchTerm);
});
},
highlightMatches() {
return (v) => {
if (this.filter == "") return v;
const matchExists = v.toLowerCase().includes(this.filter.toLowerCase());
if (!matchExists) return v;
const re = new RegExp(this.filter, "ig");
return v.replace(re, (matchedText) => `<mark>${matchedText}</mark>`);
};
},
}, },
components: { components: {
Loading, Loading,