feat: add app edit page with pre-populated form
Add /apps/[id]/edit route that loads existing app data into the form, allowing users to update app properties. Adds edit pencil button to AppCard (visible on hover) and i18n keys for both EN and RU.
This commit is contained in:
@@ -68,11 +68,12 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<a
|
||||
href={app.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="card-hover group flex flex-col rounded-xl border border-border bg-card p-4 transition-colors hover:border-primary/50"
|
||||
<div
|
||||
role="link"
|
||||
tabindex="0"
|
||||
onclick={() => window.open(app.url, '_blank', 'noopener,noreferrer')}
|
||||
onkeydown={(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') window.open(app.url, '_blank', 'noopener,noreferrer'); }}
|
||||
class="card-hover group flex cursor-pointer flex-col rounded-xl border border-border bg-card p-4 transition-colors hover:border-primary/50"
|
||||
title={app.description ?? app.name}
|
||||
>
|
||||
<div class="mb-3 flex items-start justify-between">
|
||||
@@ -93,7 +94,29 @@
|
||||
<span class="text-xs font-bold">{app.name.charAt(0).toUpperCase()}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<AppHealthBadge status={currentStatus} />
|
||||
<div class="flex items-center gap-1.5">
|
||||
<a
|
||||
href="/apps/{app.id}/edit"
|
||||
onclick={(e: MouseEvent) => e.stopPropagation()}
|
||||
class="rounded-md p-1 text-muted-foreground opacity-0 transition-all hover:bg-accent hover:text-foreground group-hover:opacity-100"
|
||||
title={$t('app.edit')}
|
||||
>
|
||||
<svg
|
||||
class="h-3.5 w-3.5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
|
||||
<path d="m15 5 4 4" />
|
||||
</svg>
|
||||
</a>
|
||||
<AppHealthBadge status={currentStatus} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="truncate text-sm font-semibold text-card-foreground transition-colors group-hover:text-primary">
|
||||
@@ -123,4 +146,4 @@
|
||||
{app.category}
|
||||
</span>
|
||||
{/if}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -14,12 +14,13 @@
|
||||
interface Props {
|
||||
form: SuperValidated<AppSchema>;
|
||||
action?: string;
|
||||
mode?: 'create' | 'edit';
|
||||
}
|
||||
|
||||
let { form: formData, action = '?/create' }: Props = $props();
|
||||
let { form: formData, action = '?/create', mode = 'create' }: Props = $props();
|
||||
|
||||
const { form, errors, enhance, submitting } = superForm(formData, {
|
||||
resetForm: true
|
||||
resetForm: mode === 'create'
|
||||
});
|
||||
|
||||
let showAdvanced = $state(false);
|
||||
@@ -383,7 +384,7 @@
|
||||
{#if $submitting}
|
||||
{$t('app.saving')}
|
||||
{:else}
|
||||
{$t('app.save')}
|
||||
{mode === 'edit' ? $t('app.update') : $t('app.save')}
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user