Search function added
This commit is contained in:
+41
-17
@@ -106,30 +106,54 @@ function BrandMark({ size = 22 }) {
|
||||
);
|
||||
}
|
||||
|
||||
function TopBar({ me, dbUsers = [], isAdmin, tab, setTab, onAdd, onLogs, onLogout, onProfile, workspace }) {
|
||||
function TopBar({ me, dbUsers = [], isAdmin, tab, setTab, onAdd, onLogs, onLogout, onProfile, workspace, searchQuery, setSearchQuery, showSearch, onToggleSearch }) {
|
||||
return (
|
||||
<header className="topbar">
|
||||
<div className="topbar__left">
|
||||
<span className="topbar__brand"><BrandMark /><span>Dashy</span></span>
|
||||
<span className="topbar__divider" />
|
||||
<span className="topbar__workspace">{workspace ? workspace.name : 'loading…'}</span>
|
||||
{showSearch ? (
|
||||
<div className="topbar__search">
|
||||
<Icon.Search />
|
||||
<input
|
||||
className="topbar__search-input"
|
||||
autoFocus
|
||||
placeholder="Search tasks, descriptions, tags…"
|
||||
value={searchQuery}
|
||||
onChange={e => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
<IconBtn label="Close search" onClick={onToggleSearch}>
|
||||
<Icon.Close />
|
||||
</IconBtn>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<span className="topbar__brand"><BrandMark /><span>Dashy</span></span>
|
||||
<span className="topbar__divider" />
|
||||
<span className="topbar__workspace">{workspace ? workspace.name : 'loading…'}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<nav className="tabs" role="tablist">
|
||||
<Tab id="overview" label="Overview" tab={tab} setTab={setTab} />
|
||||
{dbUsers.map(u => (
|
||||
<Tab key={u.id} id={u.id} label={u.name} tab={tab} setTab={setTab} user={u} />
|
||||
))}
|
||||
{isAdmin && <Tab id="deleted" label="Deleted" tab={tab} setTab={setTab} />}
|
||||
</nav>
|
||||
{!showSearch && (
|
||||
<nav className="tabs" role="tablist">
|
||||
<Tab id="overview" label="Overview" tab={tab} setTab={setTab} />
|
||||
{dbUsers.map(u => (
|
||||
<Tab key={u.id} id={u.id} label={u.name} tab={tab} setTab={setTab} user={u} />
|
||||
))}
|
||||
{isAdmin && <Tab id="deleted" label="Deleted" tab={tab} setTab={setTab} />}
|
||||
</nav>
|
||||
)}
|
||||
|
||||
<div className="topbar__right">
|
||||
<button className="btn btn--soft" onClick={onAdd}>
|
||||
<Icon.Plus /> New task
|
||||
</button>
|
||||
<IconBtn label="Search">
|
||||
<Icon.Search />
|
||||
</IconBtn>
|
||||
{!showSearch && (
|
||||
<>
|
||||
<button className="btn btn--soft" onClick={onAdd}>
|
||||
<Icon.Plus /> New task
|
||||
</button>
|
||||
<IconBtn label="Search" onClick={onToggleSearch}>
|
||||
<Icon.Search />
|
||||
</IconBtn>
|
||||
</>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<IconBtn label="Audit log" onClick={onLogs}>
|
||||
<Icon.Logs />
|
||||
|
||||
Reference in New Issue
Block a user