dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-28 10:45:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Search function for the Keyboard Shortcuts #239

Browse Source
This commit is contained in:
Jan Prochazka
2022-03-03 12:29:20 +01:00
parent be90241091
commit 8d7c7481b4
2 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/buttons/CloseSearchButton.svelte
View File

@@ -4,15 +4,17 @@
import InlineButton from './InlineButton.svelte'; import InlineButton from './InlineButton.svelte';
export let filter; export let filter;
export let showDisabled = false;
</script> </script>
{#if filter} {#if filter || showDisabled}
<InlineButton <InlineButton
on:click on:click
on:click={() => { on:click={() => {
filter = ''; filter = '';
}} }}
title="Clear filter" title="Clear filter"
disabled={!filter}
> >
<FontIcon icon="icon close" /> <FontIcon icon="icon close" />
</InlineButton> </InlineButton>

41
packages/web/src/tabs/CommandListTab.svelte
View File

@@ -3,7 +3,11 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import { filterName } from 'dbgate-tools';
import _ from 'lodash'; import _ from 'lodash';
import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
import SearchInput from '../elements/SearchInput.svelte';
import TableControl from '../elements/TableControl.svelte'; import TableControl from '../elements/TableControl.svelte';
import CommandModal from '../modals/CommandModal.svelte'; import CommandModal from '../modals/CommandModal.svelte';
@@ -11,25 +15,38 @@
import { commandsCustomized } from '../stores'; import { commandsCustomized } from '../stores';
$: commandList = _.sortBy(_.values($commandsCustomized), ['category', 'name']); $: commandList = _.sortBy(_.values($commandsCustomized), ['category', 'name']);
let filter;
</script> </script>
<div class="wrapper"> <div class="wrapper">
<TableControl <div class="flex">
clickable <SearchInput placeholder="Search in commands (by category, name, shortcut or id)" bind:value={filter} />
rows={commandList} <CloseSearchButton bind:filter showDisabled />
columns={[ </div>
{ header: 'Category', fieldName: 'category' },
{ header: 'Name', fieldName: 'name' }, <div class="table-wrapper">
{ header: 'Keyboard shortcut', fieldName: 'keyText', isHighlighted: row => row.customKeyboardShortcut }, <TableControl
{ header: 'commandId', fieldName: 'id' }, clickable
]} rows={commandList.filter(cmd => filterName(filter, cmd['category'], cmd['name'], cmd['keyText'], cmd['id']))}
on:clickrow={e => showModal(CommandModal, { command: e.detail })} columns={[
/> { header: 'Category', fieldName: 'category' },
{ header: 'Name', fieldName: 'name' },
{ header: 'Keyboard shortcut', fieldName: 'keyText', isHighlighted: row => row.customKeyboardShortcut },
{ header: 'commandId', fieldName: 'id' },
]}
on:clickrow={e => showModal(CommandModal, { command: e.detail })}
/>
</div>
</div> </div>
<style> <style>
.wrapper { .wrapper {
overflow: auto;
flex: 1; flex: 1;
display: flex;
flex-direction: column;
}
.table-wrapper {
overflow: auto;
display: flex;
} }
</style> </style>