egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added searching functionality

Browse Source
This commit is contained in:
Daniel
2023-05-08 18:05:39 +03:30
parent a2023e19ef
commit 1c45c6934d
6 changed files with 230 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Modal/DeleteCollection.tsx
+1
View File
@@ -44,6 +44,7 @@ export default function AddCollection({
</p>
<input
autoFocus
value={inputField}
onChange={(e) => setInputField(e.target.value)}
type="text"
components/Navbar.tsx
+6 -19
View File
@@ -8,7 +8,6 @@ import { signOut } from "next-auth/react";
import { useSession } from "next-auth/react";
import {
faPlus,
faMagnifyingGlass,
faCircleUser,
faSliders,
faArrowRightFromBracket,
@@ -17,11 +16,12 @@ import {
} from "@fortawesome/free-solid-svg-icons";
import { useEffect, useState } from "react";
import Dropdown from "@/components/Dropdown";
import Modal from "./Modal";
import AddLink from "./Modal/AddLink";
import ClickAwayHandler from "./ClickAwayHandler";
import Sidebar from "./Sidebar";
import Modal from "@/components/Modal";
import AddLink from "@/components/Modal/AddLink";
import ClickAwayHandler from "@/components/ClickAwayHandler";
import Sidebar from "@/components/Sidebar";
import { useRouter } from "next/router";
import Search from "@/components/Search";
export default function () {
const { data: session } = useSession();
@@ -57,20 +57,7 @@ export default function () {
>
<FontAwesomeIcon icon={faBars} className="w-5 h-5" />
</div>
<div className="flex items-center relative">
<label
htmlFor="search-box"
className="inline-flex w-fit absolute right-0 cursor-pointer select-none rounded-md p-1 text-sky-500"
>
<FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
</label>
<input
id="search-box"
type="text"
placeholder="Search for Links"
className="border border-sky-100 rounded-md pr-6 w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-1"
/>
</div>
<Search />
<div className="flex items-center gap-2">
<div
onClick={toggleLinkModal}
components/Search.tsx
+106
View File
@@ -0,0 +1,106 @@
import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useState } from "react";
import ClickAwayHandler from "./ClickAwayHandler";
import useSearchSettingsStore from "@/store/search";
import { useRouter } from "next/router";
export default function Search() {
const router = useRouter();
const [searchBox, setSearchBox] = useState(
false || router.pathname == "/search"
);
const { searchSettings, toggleCheckbox, setSearchQuery } =
useSearchSettingsStore();
return (
<ClickAwayHandler onClickOutside={() => setSearchBox(false)}>
<div
className="flex items-center relative"
onClick={() => setSearchBox(true)}
>
<label
htmlFor="search-box"
className="inline-flex w-fit absolute right-0 pointer-events-none rounded-md p-1 text-sky-500"
>
<FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
</label>
<input
id="search-box"
type="text"
placeholder="Search for Links"
value={searchSettings.query}
onChange={(e) => setSearchQuery(e.target.value)}
onFocus={() => router.push("/search")}
autoFocus={searchBox}
className="border border-sky-100 rounded-md pr-6 w-60 focus:border-sky-500 sm:focus:w-80 hover:border-sky-500 duration-100 outline-none p-1"
/>
{searchBox ? (
<div className="absolute flex flex-wrap items-baseline justify-between gap-2 top-9 left-0 shadow-md bg-gray-50 rounded-md p-2 z-10 border border-sky-100 w-60 sm:w-80">
<p className="text-sky-900">Filter by:</p>
<div className="flex gap-1 text-sm font-bold flex-wrap text-sky-500">
<label className="cursor-pointer">
<input
type="checkbox"
checked={searchSettings.filter.name}
onChange={() => toggleCheckbox("name")}
className="peer sr-only"
/>
<span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Name
</span>
</label>
<label className="cursor-pointer">
<input
type="checkbox"
checked={searchSettings.filter.url}
onChange={() => toggleCheckbox("url")}
className="peer sr-only"
/>
<span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Link
</span>
</label>
<label className="cursor-pointer">
<input
type="checkbox"
checked={searchSettings.filter.title}
onChange={() => toggleCheckbox("title")}
className="peer sr-only"
/>
<span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Title
</span>
</label>
<label className="cursor-pointer">
<input
type="checkbox"
checked={searchSettings.filter.collection}
onChange={() => toggleCheckbox("collection")}
className="peer sr-only"
/>
<span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Collection
</span>
</label>
<label className="cursor-pointer">
<input
type="checkbox"
checked={searchSettings.filter.tags}
onChange={() => toggleCheckbox("tags")}
className="peer sr-only"
/>
<span className="text-sky-900 peer-checked:bg-sky-500 text-xs hover:bg-sky-200 duration-75 peer-checked:text-white rounded p-1 select-none">
Tags
</span>
</label>
</div>
</div>
) : null}
</div>
</ClickAwayHandler>
);
}