fix: address all code review findings
- Extract shared permission logic into boardPermissions.ts utility - Fix DnD drag revert: add dirty flag to prevent overwrite - Wrap OAuth group sync in Prisma transaction (N+1 fix) - Add empty widgetIds validation in widget reorder API - Add invalidateAll() after guest toggle PATCH - Replace console.error with user-visible error banners - Extract WidgetCreationForm component (DraggableSection was 448 lines) - Remove unused boardId prop from DraggableSection - Always include OAuth state parameter + validate in callback - Clean up copyLink timer on component destroy - Add type-specific widget config validation in addWidget action
This commit is contained in:
@@ -0,0 +1,270 @@
|
||||
<script lang="ts">
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
sectionId: string;
|
||||
apps: Array<{ id: string; name: string }>;
|
||||
onSubmit: (sectionId: string, widgetData: string) => void;
|
||||
}
|
||||
|
||||
let { sectionId, apps, onSubmit }: Props = $props();
|
||||
|
||||
// Widget form state
|
||||
let selectedWidgetType = $state('app');
|
||||
let selectedAppId = $state('');
|
||||
|
||||
// Bookmark fields
|
||||
let bookmarkUrl = $state('');
|
||||
let bookmarkLabel = $state('');
|
||||
let bookmarkIcon = $state('');
|
||||
let bookmarkDescription = $state('');
|
||||
|
||||
// Note fields
|
||||
let noteContent = $state('');
|
||||
let noteFormat = $state<'markdown' | 'text'>('markdown');
|
||||
|
||||
// Embed fields
|
||||
let embedUrl = $state('');
|
||||
let embedHeight = $state(300);
|
||||
|
||||
// Status fields
|
||||
let statusLabel = $state('');
|
||||
let statusAppIds = $state<string[]>([]);
|
||||
|
||||
function resetForm() {
|
||||
selectedWidgetType = 'app';
|
||||
selectedAppId = '';
|
||||
bookmarkUrl = '';
|
||||
bookmarkLabel = '';
|
||||
bookmarkIcon = '';
|
||||
bookmarkDescription = '';
|
||||
noteContent = '';
|
||||
noteFormat = 'markdown';
|
||||
embedUrl = '';
|
||||
embedHeight = 300;
|
||||
statusLabel = '';
|
||||
statusAppIds = [];
|
||||
}
|
||||
|
||||
function handleSubmitWidget() {
|
||||
let widgetData: Record<string, unknown> = { type: selectedWidgetType };
|
||||
|
||||
switch (selectedWidgetType) {
|
||||
case 'app':
|
||||
if (!selectedAppId) return;
|
||||
widgetData.appId = selectedAppId;
|
||||
break;
|
||||
case 'bookmark':
|
||||
if (!bookmarkUrl || !bookmarkLabel) return;
|
||||
widgetData.url = bookmarkUrl;
|
||||
widgetData.label = bookmarkLabel;
|
||||
if (bookmarkIcon) widgetData.icon = bookmarkIcon;
|
||||
if (bookmarkDescription) widgetData.description = bookmarkDescription;
|
||||
break;
|
||||
case 'note':
|
||||
if (!noteContent) return;
|
||||
widgetData.content = noteContent;
|
||||
widgetData.format = noteFormat;
|
||||
break;
|
||||
case 'embed':
|
||||
if (!embedUrl) return;
|
||||
widgetData.url = embedUrl;
|
||||
widgetData.height = embedHeight;
|
||||
break;
|
||||
case 'status':
|
||||
if (statusAppIds.length === 0) return;
|
||||
widgetData.appIds = statusAppIds;
|
||||
if (statusLabel) widgetData.label = statusLabel;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
onSubmit(sectionId, JSON.stringify(widgetData));
|
||||
resetForm();
|
||||
}
|
||||
|
||||
function toggleStatusApp(appId: string) {
|
||||
if (statusAppIds.includes(appId)) {
|
||||
statusAppIds = statusAppIds.filter((id) => id !== appId);
|
||||
} else {
|
||||
statusAppIds = [...statusAppIds, appId];
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mb-3 rounded-lg border border-border bg-muted/50 p-3">
|
||||
<!-- Widget Type Selector -->
|
||||
<div class="mb-3">
|
||||
<label for="widget-type-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">
|
||||
Widget Type
|
||||
</label>
|
||||
<select
|
||||
id="widget-type-{sectionId}"
|
||||
bind:value={selectedWidgetType}
|
||||
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
||||
>
|
||||
<option value="app">App</option>
|
||||
<option value="bookmark">Bookmark</option>
|
||||
<option value="note">Note</option>
|
||||
<option value="embed">Embed</option>
|
||||
<option value="status">Status</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Type-specific config forms -->
|
||||
{#if selectedWidgetType === 'app'}
|
||||
<div>
|
||||
<label for="widget-app-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">
|
||||
{$t('widget.select_app')}
|
||||
</label>
|
||||
<select
|
||||
id="widget-app-{sectionId}"
|
||||
bind:value={selectedAppId}
|
||||
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
||||
>
|
||||
<option value="">{$t('widget.choose_app')}</option>
|
||||
{#each apps as app (app.id)}
|
||||
<option value={app.id}>{app.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{:else if selectedWidgetType === 'bookmark'}
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label for="bm-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
|
||||
<input
|
||||
id="bm-url-{sectionId}"
|
||||
type="url"
|
||||
bind:value={bookmarkUrl}
|
||||
placeholder="https://example.com"
|
||||
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="bm-label-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Label</label>
|
||||
<input
|
||||
id="bm-label-{sectionId}"
|
||||
type="text"
|
||||
bind:value={bookmarkLabel}
|
||||
placeholder="My Bookmark"
|
||||
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="bm-icon-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Icon (optional)</label>
|
||||
<input
|
||||
id="bm-icon-{sectionId}"
|
||||
type="text"
|
||||
bind:value={bookmarkIcon}
|
||||
placeholder="e.g. an emoji or icon name"
|
||||
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="bm-desc-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Description (optional)</label>
|
||||
<input
|
||||
id="bm-desc-{sectionId}"
|
||||
type="text"
|
||||
bind:value={bookmarkDescription}
|
||||
placeholder="A short description"
|
||||
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{:else if selectedWidgetType === 'note'}
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="note-format-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Format</label>
|
||||
<select
|
||||
id="note-format-{sectionId}"
|
||||
bind:value={noteFormat}
|
||||
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
||||
>
|
||||
<option value="markdown">Markdown</option>
|
||||
<option value="text">Plain Text</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="note-content-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Content</label>
|
||||
<textarea
|
||||
id="note-content-{sectionId}"
|
||||
bind:value={noteContent}
|
||||
rows="4"
|
||||
placeholder="Write your note here..."
|
||||
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
{:else if selectedWidgetType === 'embed'}
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div class="sm:col-span-2">
|
||||
<label for="embed-url-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">URL</label>
|
||||
<input
|
||||
id="embed-url-{sectionId}"
|
||||
type="url"
|
||||
bind:value={embedUrl}
|
||||
placeholder="https://example.com/embed"
|
||||
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label for="embed-height-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Height (px)</label>
|
||||
<input
|
||||
id="embed-height-{sectionId}"
|
||||
type="number"
|
||||
bind:value={embedHeight}
|
||||
min="100"
|
||||
max="2000"
|
||||
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{:else if selectedWidgetType === 'status'}
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label for="status-label-{sectionId}" class="mb-1 block text-sm font-medium text-foreground">Label (optional)</label>
|
||||
<input
|
||||
id="status-label-{sectionId}"
|
||||
type="text"
|
||||
bind:value={statusLabel}
|
||||
placeholder="e.g. Production Services"
|
||||
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span class="mb-1 block text-sm font-medium text-foreground">Select Apps</span>
|
||||
<div class="max-h-40 space-y-1 overflow-y-auto rounded-lg border border-input bg-background p-2">
|
||||
{#each apps as app (app.id)}
|
||||
<label class="flex items-center gap-2 rounded px-2 py-1 text-sm text-foreground hover:bg-accent">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={statusAppIds.includes(app.id)}
|
||||
onchange={() => toggleStatusApp(app.id)}
|
||||
class="h-4 w-4 rounded border-input accent-primary"
|
||||
/>
|
||||
{app.name}
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{#if statusAppIds.length > 0}
|
||||
<p class="mt-1 text-xs text-muted-foreground">{statusAppIds.length} app(s) selected</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-3">
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleSubmitWidget}
|
||||
class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50"
|
||||
>
|
||||
{$t('common.add')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user