mirror of
https://github.com/Dictionarry-Hub/profilarr.git
synced 2026-01-23 03:11:01 +01:00
336 lines
12 KiB
Svelte
336 lines
12 KiB
Svelte
<script lang="ts">
|
|
import { Save, Trash2, Loader2 } from 'lucide-svelte';
|
|
import Modal from '$ui/modal/Modal.svelte';
|
|
import { enhance } from '$app/forms';
|
|
import { alertStore } from '$alerts/store';
|
|
import type { DatabaseInstance } from '$db/queries/databaseInstances.ts';
|
|
|
|
// Props
|
|
export let mode: 'create' | 'edit';
|
|
export let instance: DatabaseInstance | undefined = undefined;
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
export let form: any = undefined;
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
export let data: any = undefined;
|
|
|
|
// Loading state
|
|
let isLoading = false;
|
|
|
|
// Form values
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
let name = (form as any)?.values?.name ?? (mode === 'edit' ? instance?.name : data?.formData?.name) ?? '';
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
let repositoryUrl =
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(form as any)?.values?.repository_url ??
|
|
(mode === 'edit' ? instance?.repository_url : '') ??
|
|
'';
|
|
let branch = (form as any)?.values?.branch ?? (mode === 'create' ? data?.formData?.branch : '') ?? '';
|
|
let personalAccessToken = (form as any)?.values?.personal_access_token ?? (mode === 'edit' ? instance?.personal_access_token : data?.formData?.personalAccessToken) ?? '';
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
let syncStrategy =
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(form as any)?.values?.sync_strategy ??
|
|
(mode === 'edit' ? instance?.sync_strategy : (data?.formData?.syncStrategy ? parseInt(data.formData.syncStrategy) : 60)) ??
|
|
60;
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
let autoPull = (form as any)?.values?.auto_pull ?? (mode === 'edit' ? instance?.auto_pull : (data?.formData?.autoPull === '1' ? 1 : (data?.formData?.autoPull === '0' ? 0 : 1))) ?? 1;
|
|
|
|
// Delete modal state
|
|
let showDeleteModal = false;
|
|
let deleteFormElement: HTMLFormElement;
|
|
|
|
// Display text based on mode
|
|
$: title = mode === 'create' ? 'Link Database' : 'Edit Database';
|
|
$: description =
|
|
mode === 'create'
|
|
? 'Link a Profilarr Compliant Database from a Git repository'
|
|
: `Update the configuration for ${instance?.name || 'this database'}`;
|
|
$: submitButtonText = mode === 'create' ? 'Link Database' : 'Save Changes';
|
|
$: successMessage =
|
|
mode === 'create' ? 'Database linked successfully!' : 'Database updated successfully!';
|
|
$: errorMessage = mode === 'create' ? 'Failed to link database' : 'Failed to update database';
|
|
</script>
|
|
|
|
<div class="space-y-8 p-8">
|
|
<div class="space-y-3">
|
|
<h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-50">{title}</h1>
|
|
<p class="text-lg text-neutral-600 dark:text-neutral-400">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
|
|
<form
|
|
method="POST"
|
|
class="space-y-6"
|
|
use:enhance={() => {
|
|
isLoading = true;
|
|
return async ({ result, update }) => {
|
|
if (result.type === 'failure' && result.data) {
|
|
alertStore.add('error', (result.data as { error?: string }).error || errorMessage);
|
|
} else if (result.type === 'redirect') {
|
|
// Don't show success message if redirecting to bruh page
|
|
if (result.location && !result.location.includes('/databases/bruh')) {
|
|
alertStore.add('success', successMessage);
|
|
}
|
|
}
|
|
await update();
|
|
isLoading = false;
|
|
};
|
|
}}
|
|
>
|
|
<!-- Database Details -->
|
|
<div
|
|
class="rounded-lg border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900"
|
|
>
|
|
<h2 class="mb-4 text-lg font-semibold text-neutral-900 dark:text-neutral-50">
|
|
Database Details
|
|
</h2>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Name -->
|
|
<div>
|
|
<label
|
|
for="name"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Name <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
bind:value={name}
|
|
required
|
|
placeholder="e.g., Main Database, 4K Profiles"
|
|
class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
|
|
/>
|
|
<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
|
|
A friendly name to identify this database
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Repository URL -->
|
|
<div>
|
|
<label
|
|
for="repository_url"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Repository URL <span class="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="url"
|
|
id="repository_url"
|
|
name="repository_url"
|
|
bind:value={repositoryUrl}
|
|
required
|
|
disabled={mode === 'edit'}
|
|
placeholder="https://github.com/username/database"
|
|
class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:cursor-not-allowed disabled:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500 dark:disabled:bg-neutral-900"
|
|
/>
|
|
{#if mode === 'edit'}
|
|
<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
|
|
Repository URL cannot be changed after linking
|
|
</p>
|
|
{:else}
|
|
<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
|
|
Git repository URL containing the PCD manifest
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Branch -->
|
|
{#if mode === 'create'}
|
|
<div>
|
|
<label
|
|
for="branch"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Branch
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="branch"
|
|
name="branch"
|
|
bind:value={branch}
|
|
placeholder="main"
|
|
class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
|
|
/>
|
|
<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
|
|
Branch to checkout on link. Leave empty to use the default branch. You can change this later.
|
|
</p>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Personal Access Token -->
|
|
<div>
|
|
<label
|
|
for="personal_access_token"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Personal Access Token (Optional)
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="personal_access_token"
|
|
name="personal_access_token"
|
|
bind:value={personalAccessToken}
|
|
placeholder="ghp_..."
|
|
class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100 dark:placeholder-neutral-500"
|
|
/>
|
|
<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
|
|
Required for private repositories to clone and for developers to push back to GitHub.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sync Settings -->
|
|
<div
|
|
class="rounded-lg border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-neutral-900"
|
|
>
|
|
<h2 class="mb-4 text-lg font-semibold text-neutral-900 dark:text-neutral-50">
|
|
Sync Settings
|
|
</h2>
|
|
|
|
<div class="space-y-4">
|
|
<!-- Sync Strategy -->
|
|
<div>
|
|
<label
|
|
for="sync_strategy"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Sync Strategy
|
|
</label>
|
|
<select
|
|
id="sync_strategy"
|
|
name="sync_strategy"
|
|
bind:value={syncStrategy}
|
|
class="mt-1 block w-full rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-100"
|
|
>
|
|
<option value={0}>Manual (no auto-sync)</option>
|
|
<option value={5}>Every 5 minutes</option>
|
|
<option value={15}>Every 15 minutes</option>
|
|
<option value={30}>Every 30 minutes</option>
|
|
<option value={60}>Every hour</option>
|
|
<option value={360}>Every 6 hours</option>
|
|
<option value={720}>Every 12 hours</option>
|
|
<option value={1440}>Every 24 hours</option>
|
|
</select>
|
|
<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
|
|
How often to check for updates from the remote repository
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Auto Pull -->
|
|
<div class="flex items-start gap-3">
|
|
<input
|
|
type="checkbox"
|
|
id="auto_pull"
|
|
name="auto_pull"
|
|
bind:checked={autoPull}
|
|
value="1"
|
|
class="mt-0.5 h-4 w-4 rounded border-neutral-300 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-neutral-700 dark:bg-neutral-800"
|
|
/>
|
|
<div>
|
|
<label
|
|
for="auto_pull"
|
|
class="block text-sm font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Automatically pull updates
|
|
</label>
|
|
<p class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
|
|
If enabled, updates will be pulled automatically. If disabled, you'll only receive
|
|
notifications when updates are available.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex flex-wrap items-center justify-end gap-3">
|
|
{#if mode === 'edit'}
|
|
<a
|
|
href="/databases/{instance?.id}"
|
|
class="flex items-center gap-2 rounded-lg border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-800"
|
|
>
|
|
Cancel
|
|
</a>
|
|
{/if}
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading}
|
|
class="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600"
|
|
>
|
|
{#if isLoading}
|
|
<Loader2 size={14} class="animate-spin" />
|
|
{mode === 'create' ? 'Linking...' : 'Saving...'}
|
|
{:else}
|
|
<Save size={14} />
|
|
{submitButtonText}
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Delete Section (Edit Mode Only) -->
|
|
{#if mode === 'edit'}
|
|
<div
|
|
class="rounded-lg border border-red-200 bg-red-50 p-6 dark:border-red-800 dark:bg-red-950/40"
|
|
>
|
|
<h2 class="text-lg font-semibold text-red-700 dark:text-red-300">Danger Zone</h2>
|
|
<p class="mt-2 text-sm text-red-600 dark:text-red-400">
|
|
Once you unlink this database, there is no going back. All local data will be removed.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
on:click={() => (showDeleteModal = true)}
|
|
class="mt-4 flex items-center gap-2 rounded-lg border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-700 transition-colors hover:bg-red-50 dark:border-red-700 dark:bg-neutral-900 dark:text-red-300 dark:hover:bg-red-900"
|
|
>
|
|
<Trash2 size={14} />
|
|
Unlink Database
|
|
</button>
|
|
|
|
<form
|
|
bind:this={deleteFormElement}
|
|
method="POST"
|
|
action="?/delete"
|
|
class="hidden"
|
|
use:enhance={() => {
|
|
return async ({ result, update }) => {
|
|
if (result.type === 'failure' && result.data) {
|
|
alertStore.add(
|
|
'error',
|
|
(result.data as { error?: string }).error || 'Failed to unlink database'
|
|
);
|
|
} else if (result.type === 'redirect') {
|
|
alertStore.add('success', 'Database unlinked successfully');
|
|
}
|
|
await update();
|
|
};
|
|
}}
|
|
>
|
|
<!-- Empty form, just for submission -->
|
|
</form>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
{#if mode === 'edit'}
|
|
<Modal
|
|
open={showDeleteModal}
|
|
header="Unlink Database"
|
|
bodyMessage={`Are you sure you want to unlink "${instance?.name}"? This action cannot be undone and all local data will be permanently removed.`}
|
|
confirmText="Unlink"
|
|
cancelText="Cancel"
|
|
confirmDanger={true}
|
|
on:confirm={() => {
|
|
showDeleteModal = false;
|
|
deleteFormElement?.requestSubmit();
|
|
}}
|
|
on:cancel={() => (showDeleteModal = false)}
|
|
/>
|
|
{/if}
|