Seach filter and better search

Levminer · Aug 18, 2022 · 87f3db0 · 87f3db0
1 parent c93ef95
commit 87f3db0
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 6 deletions.
diff --git a/interface/components/searchFilter.svelte b/interface/components/searchFilter.svelte
@@ -0,0 +1,26 @@
+<Popover let:open>
+	<PopoverButton>
+		<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+		</svg>
+	</PopoverButton>
+	<Transition enter="transition ease-out duration-200" enterFrom="opacity-0 translate-y-1" enterTo="opacity-100 translate-y-0" leave="transition ease-in duration-150" leaveFrom="opacity-100 translate-y-0" leaveTo="opacity-0 translate-y-1">
+		<PopoverPanel class="absolute left-1/2 z-10 mt-1 w-52 -translate-x-1/2 transform">
+			<div class="overflow-hidden rounded-xl text-xl font-medium text-black shadow-2xl">
+				<div class="relative bg-white py-3">
+					<div>
+						<input type="checkbox" bind:checked={$settings.searchFilter.name} tabindex="-1" id="checkbox0" name="Search for names" class="checkbox" /> Name
+					</div>
+					<div>
+						<input type="checkbox" bind:checked={$settings.searchFilter.description} tabindex="-1" id="checkbox1" name="Search for desciptions" class="checkbox" /> Desciption
+					</div>
+				</div>
+			</div>
+		</PopoverPanel>
+	</Transition>
+</Popover>
+
+<script lang="ts">
+	import { Popover, PopoverButton, PopoverPanel, Transition } from "@rgossiaux/svelte-headlessui"
+	import { settings } from "../stores/settings"
+</script>
diff --git a/interface/libraries/types.d.ts b/interface/libraries/types.d.ts
@@ -31,6 +31,11 @@ declare global {
 		importData: null | string
 	}
 
+	interface LibSearchQuery {
+		name: string
+		description: string
+	}
+
 	interface LibSettings {
 		info: {
 			version: string
@@ -57,6 +62,11 @@ declare global {
 		searchHistory: {
 			latest: string
 		}
+
+		searchFilter: {
+			name: boolean
+			description: boolean
+		}
 	}
 
 	/** Query selector element types */

diff --git a/interface/stores/settings.ts b/interface/stores/settings.ts
@@ -27,6 +27,11 @@ const defaultSettings: LibSettings = {
 	searchHistory: {
 		latest: null,
 	},
+
+	searchFilter: {
+		name: true,
+		description: false,
+	},
 }
 
 export const settings: Writable<LibSettings> = writable(localStorage.settings ? JSON.parse(localStorage.settings) : defaultSettings)

diff --git a/interface/windows/codes/codes.svelte b/interface/windows/codes/codes.svelte
@@ -8,9 +8,9 @@
 
 			<input on:keyup={search} class="search input w-96 pl-12 pr-12" type="text" />
 
-			<svg xmlns="http://www.w3.org/2000/svg" class="relative right-9 h-6 w-6 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-				<path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-			</svg>
+			<div class="relative right-9 top-0.5">
+				<SearchFilter />
+			</div>
 		</div>
 	</div>
 	<div class="content mx-auto flex w-4/5 flex-col items-center justify-center rounded-2xl p-10">
@@ -88,6 +88,7 @@
 	import { onMount, onDestroy } from "svelte"
 	import { stopCodesRefresher, search, chooseImportFile, loadCodes } from "./index"
 	import { navigate, open } from "../../libraries/navigate"
+	import SearchFilter from "../../components/searchFilter.svelte"
 
 	onMount(() => {
 		loadCodes()

diff --git a/interface/windows/codes/index.ts b/interface/windows/codes/index.ts
@@ -8,7 +8,7 @@ import { getState, setState } from "../../stores/state"
 
 const settings = getSettings()
 let codesRefresher: NodeJS.Timer
-let searchQuery: string[] = []
+let searchQuery: LibSearchQuery[] = []
 let saveText: string = ""
 let savedCodes = false
 
@@ -108,7 +108,10 @@ export const generateCodeElements = (data: LibImportFile) => {
 			}
 
 			// add to query
-			searchQuery.push(`${issuers[i].toLowerCase().trim()}`)
+			searchQuery.push({
+				name: `${issuers[i].toLowerCase().trim()}`,
+				description: `${names[i].toLowerCase().trim()}`,
+			})
 
 			// generate token
 			const token = new TOTP({
@@ -225,7 +228,17 @@ export const search = () => {
 
 	// search algorithm
 	for (let i = 0; i < searchQuery.length; i++) {
-		if (!searchQuery[i].startsWith(input)) {
+		let searchParameter: boolean
+
+		if (settings.searchFilter.name === true && settings.searchFilter.description === false) {
+			searchParameter = searchQuery[i].name.startsWith(input)
+		} else if (settings.searchFilter.description === true && settings.searchFilter.name === false) {
+			searchParameter = searchQuery[i].description.startsWith(input)
+		} else {
+			searchParameter = `${searchQuery[i].name} ${searchQuery[i].description}`.includes(input)
+		}
+
+		if (!searchParameter) {
 			const div = document.querySelector(`#codes${[i]}`)
 			div.style.display = "none"