server/frontend/fic/src/lib/components/NavTags.svelte

50 lines
1.3 KiB
Svelte

<script>
import {
Badge,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Icon,
} from '@sveltestrap/sveltestrap';
import { my } from '$lib/stores/my.js';
import { tags } from '$lib/stores/mythemes.js';
let filter = "";
</script>
<Dropdown nav inNavbar>
<DropdownToggle nav caret>
<Icon name="tags" />
Tags
</DropdownToggle>
<DropdownMenu class="niceborder" end>
<input
type="text"
class="dropdown-item"
placeholder="Filtrer"
bind:value={filter}
>
<div>
{#each Object.keys($tags).sort(function (a, b) { return a.toLowerCase().localeCompare(b.toLowerCase()); }) as itag, index}
{#if (filter === "" && $tags[itag].count > 1) || (filter !== "" && itag.toLowerCase().indexOf(filter.toLowerCase()) >= 0)}
<DropdownItem href="tags/{itag}">
#{itag}
<Badge>
{#if $my && $my.team_id}{$tags[itag].solved}/{/if}{$tags[itag].count}
</Badge>
</DropdownItem>
{/if}
{/each}
</div>
</DropdownMenu>
</Dropdown>
<style>
div {
overflow-y: auto;
max-height: calc(66vh - 100px);
}
</style>