1
0
mirror of https://github.com/amir20/dozzle.git synced 2026-01-03 11:35:00 +01:00

Adds debounce for search

This commit is contained in:
Amir Raminfar
2022-08-18 18:57:39 -07:00
parent b1bc706de2
commit be7c154d6b

View File

@@ -1,10 +1,11 @@
import { ref, computed, Ref } from "vue";
import { useDebounce } from "@vueuse/core";
import { VisibleLogEntry } from "@/types/VisibleLogEntry";
const searchFilter = ref<string>("");
const debouncedSearchFilter = useDebounce(searchFilter);
const showSearch = ref(false);
import { VisibleLogEntry } from "@/types/VisibleLogEntry";
function matchRecord(record: Record<string, any>, regex: RegExp): boolean {
for (const key in record) {
const value = record[key];
@@ -20,13 +21,13 @@ function matchRecord(record: Record<string, any>, regex: RegExp): boolean {
export function useSearchFilter() {
const regex = computed(() => {
const isSmartCase = searchFilter.value === searchFilter.value.toLowerCase();
return isSmartCase ? new RegExp(searchFilter.value, "i") : new RegExp(searchFilter.value);
const isSmartCase = debouncedSearchFilter.value === debouncedSearchFilter.value.toLowerCase();
return isSmartCase ? new RegExp(debouncedSearchFilter.value, "i") : new RegExp(debouncedSearchFilter.value);
});
function filteredMessages(messages: Ref<VisibleLogEntry[]>) {
return computed(() => {
if (searchFilter.value) {
if (debouncedSearchFilter.value) {
try {
return messages.value.filter((d) => {
if (d.isSimple()) {
@@ -52,7 +53,7 @@ export function useSearchFilter() {
function markSearch(log: string): string;
function markSearch(log: string[]): string[];
function markSearch(log: string | string[]) {
if (!searchFilter.value) {
if (!debouncedSearchFilter.value) {
return log;
}
if (Array.isArray(log)) {