106 lines
5.9 KiB
TypeScript
106 lines
5.9 KiB
TypeScript
import type { Component } from 'solid-js';
|
|
import { createSignal, Show, For, createEffect } from 'solid-js';
|
|
import { Portal } from 'solid-js/web';
|
|
import { X, FileBox, CheckCircle2 } from 'lucide-solid';
|
|
import { pb, COLLECTIONS } from '../../utils/db';
|
|
|
|
interface TemplateLoadModalProps {
|
|
show: boolean;
|
|
onClose: () => void;
|
|
onLoad: (template: any) => void;
|
|
}
|
|
|
|
const TemplateLoadModal: Component<TemplateLoadModalProps> = (props) => {
|
|
const [templates, setTemplates] = createSignal<any[]>([]);
|
|
const [isLoading, setIsLoading] = createSignal(false);
|
|
|
|
createEffect(() => {
|
|
if (props.show) {
|
|
loadTemplates();
|
|
}
|
|
});
|
|
|
|
const loadTemplates = async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const records = await pb.collection(COLLECTIONS.TEMPLATES).getFullList({
|
|
sort: '-created'
|
|
});
|
|
setTemplates(records);
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert('Failed to load templates.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Show when={props.show}>
|
|
<Portal>
|
|
<div class="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-background/80 backdrop-blur-sm p-4 animate-in fade-in duration-200">
|
|
<div class="bg-card w-full max-w-2xl max-h-[85vh] flex flex-col rounded-3xl shadow-premium border border-border overflow-hidden animate-in zoom-in-95 duration-200">
|
|
<div class="flex items-center justify-between p-6 border-b border-border">
|
|
<div class="flex items-center gap-3">
|
|
<div class="p-2 bg-primary/10 text-primary rounded-xl">
|
|
<FileBox class="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-black text-foreground">Load Template</h3>
|
|
<p class="text-[10px] uppercase font-bold text-muted-foreground tracking-wider mt-0.5">Select a template to edit</p>
|
|
</div>
|
|
</div>
|
|
<button onClick={props.onClose} class="p-2 hover:bg-muted rounded-xl transition-colors">
|
|
<X class="w-5 h-5 text-muted-foreground" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex-1 flex flex-col p-6 gap-6 overflow-hidden">
|
|
{/* Templates List */}
|
|
<div class="flex-1 flex flex-col min-h-0 space-y-3">
|
|
<label class="text-xs font-black text-muted-foreground uppercase tracking-wider">Saved Templates</label>
|
|
<div class="flex-1 overflow-y-auto space-y-3 bg-muted/10 border border-border/50 rounded-2xl p-4">
|
|
<Show
|
|
when={!isLoading()}
|
|
fallback={<div class="py-12 text-center text-muted-foreground text-sm font-medium">Loading templates...</div>}
|
|
>
|
|
<For each={templates()}>
|
|
{(record) => (
|
|
<div class="group flex items-center justify-between p-4 rounded-xl border border-border/60 bg-card hover:border-primary/50 hover:shadow-premium transition-all">
|
|
<div>
|
|
<h4 class="font-bold text-foreground">{record.name}</h4>
|
|
<p class="text-[10px] text-muted-foreground font-medium uppercase tracking-wider mt-1">
|
|
{record.items?.length || 0} Items • {new Date(record.created).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={() => {
|
|
props.onLoad(record);
|
|
props.onClose();
|
|
}}
|
|
class="flex items-center gap-2 px-4 py-2 bg-primary/10 text-primary border border-primary/20 rounded-lg text-xs font-bold shadow-sm hover:bg-primary hover:text-primary-foreground hover:border-primary transition-all"
|
|
>
|
|
<CheckCircle2 class="w-4 h-4" /> Load
|
|
</button>
|
|
</div>
|
|
)}
|
|
</For>
|
|
<Show when={templates().length === 0}>
|
|
<div class="py-12 flex flex-col items-center justify-center text-center text-muted-foreground/60 border-2 border-dashed border-border/60 rounded-xl bg-background/50 h-full">
|
|
<FileBox class="w-8 h-8 mb-3 opacity-50" />
|
|
<p class="text-sm font-medium">No saved templates found.</p>
|
|
</div>
|
|
</Show>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
</Show>
|
|
);
|
|
};
|
|
|
|
export default TemplateLoadModal;
|