refactor: provider descriptor registry — eliminate provider-specific hardcoding
Replace all if/else chains keyed on provider type strings with a descriptor-driven architecture. Each provider type (immich, gitea, planka, scheduler, nut, google_photos) has a descriptor in frontend/src/lib/providers/ that declares config fields, event tracking fields, collection metadata, validation, and hooks. Components now use getDescriptor(type) and render dynamically. Dashboard provider card shows provider name + type when global filter is active. Grid-items derived from registry.
This commit is contained in:
@@ -4,26 +4,28 @@
|
||||
import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
import IconPicker from '$lib/components/IconPicker.svelte';
|
||||
import MdiIcon from '$lib/components/MdiIcon.svelte';
|
||||
import IconGridSelect from '$lib/components/IconGridSelect.svelte';
|
||||
import { providerTypeItems } from '$lib/grid-items';
|
||||
import { getDescriptor, buildProviderFormDefaults } from '$lib/providers';
|
||||
|
||||
let providerType = $state('immich');
|
||||
let name = $state('');
|
||||
let icon = $state('');
|
||||
let url = $state('');
|
||||
let apiKey = $state('');
|
||||
let externalDomain = $state('');
|
||||
let form = $state(buildProviderFormDefaults());
|
||||
let error = $state('');
|
||||
let testing = $state(false);
|
||||
let saving = $state(false);
|
||||
let descriptor = $derived(getDescriptor(form.type));
|
||||
|
||||
async function testAndSave() {
|
||||
if (!url || !apiKey) { error = t('providers.urlApiKeyRequired'); return; }
|
||||
const desc = descriptor;
|
||||
if (!desc) { error = 'Select a provider type'; return; }
|
||||
const { config, error: buildError } = desc.buildConfig(form, false);
|
||||
if (buildError) { error = t(buildError); snackError(error); return; }
|
||||
|
||||
testing = true; error = '';
|
||||
let createdId: number | null = null;
|
||||
try {
|
||||
const provider = await api('/providers', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ type: providerType, name: name || 'Immich', icon, config: { url, api_key: apiKey, external_domain: externalDomain || undefined } }),
|
||||
body: JSON.stringify({ type: form.type, name: form.name || desc.defaultName, icon: form.icon, config }),
|
||||
});
|
||||
createdId = provider.id;
|
||||
const result = await api(`/providers/${provider.id}/test`, { method: 'POST' });
|
||||
@@ -44,12 +46,16 @@
|
||||
}
|
||||
|
||||
async function saveWithoutTest() {
|
||||
if (!url || !apiKey) { error = t('providers.urlApiKeyRequired'); return; }
|
||||
const desc = descriptor;
|
||||
if (!desc) { error = 'Select a provider type'; return; }
|
||||
const { config, error: buildError } = desc.buildConfig(form, false);
|
||||
if (buildError) { error = t(buildError); snackError(error); return; }
|
||||
|
||||
saving = true; error = '';
|
||||
try {
|
||||
await api('/providers', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ type: providerType, name: name || 'Immich', icon, config: { url, api_key: apiKey, external_domain: externalDomain || undefined } }),
|
||||
body: JSON.stringify({ type: form.type, name: form.name || desc.defaultName, icon: form.icon, config }),
|
||||
});
|
||||
snackSuccess(t('snack.providerSaved'));
|
||||
window.location.href = '/providers';
|
||||
@@ -66,30 +72,46 @@
|
||||
|
||||
<Card>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">{t('providers.type')}</label>
|
||||
<IconGridSelect items={providerTypeItems()} bind:value={form.type} columns={2} />
|
||||
</div>
|
||||
<div>
|
||||
<label for="prv-name" class="block text-sm font-medium mb-1">{t('providers.name')}</label>
|
||||
<div class="flex gap-2">
|
||||
<IconPicker value={icon} onselect={(v: string) => icon = v} />
|
||||
<input id="prv-name" bind:value={name} placeholder="My Immich Server" class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<IconPicker value={form.icon} onselect={(v: string) => form.icon = v} />
|
||||
<input id="prv-name" bind:value={form.name} placeholder={descriptor?.defaultName || ''} class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if providerType === 'immich'}
|
||||
{#if descriptor?.hasUrl}
|
||||
<div>
|
||||
<label for="prv-url" class="block text-sm font-medium mb-1">{t('providers.url')}</label>
|
||||
<input id="prv-url" type="url" bind:value={url} required placeholder={t('providers.urlPlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="prv-key" class="block text-sm font-medium mb-1">{t('providers.apiKey')}</label>
|
||||
<input id="prv-key" type="password" bind:value={apiKey} required autocomplete="off" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="prv-ext" class="block text-sm font-medium mb-1">{t('providers.externalDomain')} <span class="text-xs text-[var(--color-muted-foreground)]">({t('providers.optional')})</span></label>
|
||||
<input id="prv-ext" type="url" bind:value={externalDomain} placeholder="https://photos.example.com" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('providers.externalDomainHint')}</p>
|
||||
<input id="prv-url" type="url" bind:value={form.url} required placeholder={descriptor.urlPlaceholder || t('providers.urlPlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each descriptor?.configFields ?? [] as field (field.key)}
|
||||
<div>
|
||||
<label for="prv-{field.key}" class="block text-sm font-medium mb-1">
|
||||
{t(field.label)}
|
||||
{#if field.optional}<span class="text-xs text-[var(--color-muted-foreground)]">({t('providers.optional')})</span>{/if}
|
||||
</label>
|
||||
{#if field.type === 'number'}
|
||||
<input id="prv-{field.key}" type="number" bind:value={form[field.key]} min={field.min} max={field.max}
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
{:else}
|
||||
<input id="prv-{field.key}" type={field.type} bind:value={form[field.key]}
|
||||
required={field.required === true || field.required === 'create-only'}
|
||||
placeholder={field.placeholder || ''} autocomplete="off"
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
{/if}
|
||||
{#if field.hint}
|
||||
<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t(field.hint)}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#if error}
|
||||
<p class="text-sm text-[var(--color-error-fg)]">{error}</p>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user