dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-21 04:46:02 +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

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

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