feat: add filtering to all entity list pages
- Tracking configs: filter by name + provider type - Template configs: filter by name + provider type - Command configs: filter by name + provider type - Notification trackers: filter by name + provider - Command trackers: filter by name + provider - Targets: filter by name (type filtering already existed) - Nav badge counts include system-owned entities (user_id=0) - Shows "no items match filter" vs "no items yet" empty states
This commit is contained in:
@@ -22,7 +22,13 @@
|
||||
|
||||
let loaded = $state(false);
|
||||
let loadError = $state('');
|
||||
let notificationTrackers = $state<Tracker[]>([]);
|
||||
let allNotificationTrackers = $state<Tracker[]>([]);
|
||||
let filterText = $state('');
|
||||
let filterProviderId = $state(0);
|
||||
let notificationTrackers = $derived(allNotificationTrackers.filter(t =>
|
||||
(!filterText || t.name.toLowerCase().includes(filterText.toLowerCase())) &&
|
||||
(!filterProviderId || t.provider_id === filterProviderId)
|
||||
));
|
||||
let providers = $derived(providersCache.items);
|
||||
const providerItems = $derived(providers.map(p => ({ value: p.id, label: p.name, icon: p.icon || 'mdiServer', desc: p.type })));
|
||||
let targets = $derived(targetsCache.items);
|
||||
@@ -91,7 +97,7 @@
|
||||
async function load() {
|
||||
loadError = '';
|
||||
try {
|
||||
[notificationTrackers] = await Promise.all([
|
||||
[allNotificationTrackers] = await Promise.all([
|
||||
api('/notification-trackers'),
|
||||
providersCache.fetch(), targetsCache.fetch(),
|
||||
trackingConfigsCache.fetch(), templateConfigsCache.fetch(),
|
||||
@@ -366,10 +372,29 @@
|
||||
{/if}
|
||||
|
||||
{#if loaded && !loadError}
|
||||
{#if notificationTrackers.length === 0 && !showForm}
|
||||
|
||||
{#if !showForm && allNotificationTrackers.length > 0}
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<input type="text" bind:value={filterText} placeholder={t('common.filterByName')}
|
||||
class="flex-1 px-3 py-1.5 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<select bind:value={filterProviderId}
|
||||
class="px-3 py-1.5 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
|
||||
<option value={0}>{t('common.allProviders')}</option>
|
||||
{#each providers as p}
|
||||
<option value={p.id}>{p.name} ({p.type})</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if allNotificationTrackers.length === 0 && !showForm}
|
||||
<Card>
|
||||
<EmptyState icon="mdiRadar" message={t('notificationTracker.noTrackers')} />
|
||||
</Card>
|
||||
{:else if notificationTrackers.length === 0 && !showForm}
|
||||
<Card>
|
||||
<EmptyState icon="mdiFilterOff" message={t('common.noFilterResults')} />
|
||||
</Card>
|
||||
{:else if !showForm}
|
||||
<div class="space-y-3 stagger-children">
|
||||
{#each notificationTrackers as tracker}
|
||||
|
||||
Reference in New Issue
Block a user