Feat v0.2.3 sdk tasks (#7)
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com> Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit was merged in pull request #7.
This commit is contained in:
397
packages/tasks/js/main.js
Normal file
397
packages/tasks/js/main.js
Normal file
@@ -0,0 +1,397 @@
|
||||
/**
|
||||
* Tasks — Surface Entry Point (v0.1.0)
|
||||
*
|
||||
* Task management surface using the v0.2.3 SDK:
|
||||
* sw.api.ext('tasks') — scoped API client
|
||||
* sw.ui.* — primitive components
|
||||
* sw.slots — statusbar widget
|
||||
* sw.actions — create-task action
|
||||
*/
|
||||
(async function () {
|
||||
'use strict';
|
||||
|
||||
var mount = document.getElementById('extension-mount');
|
||||
if (!mount) return;
|
||||
|
||||
var base = window.__BASE__ || '';
|
||||
var ver = window.__VERSION__ || '0';
|
||||
|
||||
// ── Boot SDK ───────────────────────────────
|
||||
try {
|
||||
if (!window.preact) {
|
||||
var { h, render } = await import(base + '/js/sw/vendor/preact.module.js');
|
||||
var hooksModule = await import(base + '/js/sw/vendor/hooks.module.js');
|
||||
var htmModule = await import(base + '/js/sw/vendor/htm.module.js');
|
||||
window.preact = { h, render };
|
||||
window.hooks = hooksModule;
|
||||
window.html = htmModule.default.bind(h);
|
||||
}
|
||||
var sdk = await import(base + '/js/sw/sdk/index.js?v=' + ver);
|
||||
await sdk.boot();
|
||||
} catch (e) {
|
||||
mount.innerHTML = '<p style="color:var(--danger);padding:24px;">SDK boot failed: ' + e.message + '</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
var { html } = window;
|
||||
var { useState, useEffect, useCallback, useRef } = hooks;
|
||||
var { render } = preact;
|
||||
|
||||
// ── SDK modules ────────────────────────────
|
||||
var api = sw.api.ext('tasks');
|
||||
var { Button, FormField, Dialog, Spinner, Dropdown, Tabs, Banner } = sw.ui;
|
||||
|
||||
// ── Constants ──────────────────────────────
|
||||
var STATUSES = ['todo', 'in_progress', 'done', 'cancelled'];
|
||||
var PRIORITIES = ['low', 'medium', 'high', 'urgent'];
|
||||
|
||||
var STATUS_LABELS = {
|
||||
todo: 'To Do', in_progress: 'In Progress', done: 'Done', cancelled: 'Cancelled'
|
||||
};
|
||||
var PRIORITY_COLORS = {
|
||||
low: 'var(--text-3)', medium: 'var(--accent)', high: 'var(--warning)', urgent: 'var(--danger)'
|
||||
};
|
||||
|
||||
// ═══════════════════════════════════════════
|
||||
// TaskForm — create / edit dialog
|
||||
// ═══════════════════════════════════════════
|
||||
|
||||
function TaskForm({ task, onSave, onClose }) {
|
||||
var [title, setTitle] = useState(task ? task.title : '');
|
||||
var [desc, setDesc] = useState(task ? task.description : '');
|
||||
var [status, setStatus] = useState(task ? task.status : STATUSES[0]);
|
||||
var [priority, setPriority] = useState(task ? task.priority : 'medium');
|
||||
var [dueDate, setDueDate] = useState(task ? task.due_date : '');
|
||||
var [tags, setTags] = useState(task ? task.tags : '');
|
||||
var [saving, setSaving] = useState(false);
|
||||
var [error, setError] = useState('');
|
||||
|
||||
async function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
if (!title.trim()) { setError('Title is required'); return; }
|
||||
setSaving(true);
|
||||
setError('');
|
||||
try {
|
||||
var data = { title: title.trim(), description: desc, status, priority, due_date: dueDate, tags };
|
||||
if (task) {
|
||||
await api.put('/items/' + task.id, data);
|
||||
} else {
|
||||
await api.post('/items', data);
|
||||
}
|
||||
onSave();
|
||||
} catch (err) {
|
||||
setError(err.message || 'Save failed');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return html`
|
||||
<${Dialog} open onClose=${onClose} title=${task ? 'Edit Task' : 'New Task'}>
|
||||
<form onSubmit=${handleSubmit} class="task-form">
|
||||
${error && html`<${Banner} variant="danger" text=${error} />`}
|
||||
<${FormField} label="Title" required>
|
||||
<input type="text" value=${title} onInput=${e => setTitle(e.target.value)}
|
||||
placeholder="What needs to be done?" autofocus />
|
||||
<//>
|
||||
<${FormField} label="Description">
|
||||
<textarea rows="3" value=${desc} onInput=${e => setDesc(e.target.value)}
|
||||
placeholder="Details (optional)" />
|
||||
<//>
|
||||
<div class="task-form__row">
|
||||
<${FormField} label="Status">
|
||||
<select value=${status} onChange=${e => setStatus(e.target.value)}>
|
||||
${STATUSES.map(s => html`<option value=${s}>${STATUS_LABELS[s] || s}</option>`)}
|
||||
</select>
|
||||
<//>
|
||||
<${FormField} label="Priority">
|
||||
<select value=${priority} onChange=${e => setPriority(e.target.value)}>
|
||||
${PRIORITIES.map(p => html`<option value=${p}>${p}</option>`)}
|
||||
</select>
|
||||
<//>
|
||||
</div>
|
||||
<div class="task-form__row">
|
||||
<${FormField} label="Due Date">
|
||||
<input type="date" value=${dueDate} onInput=${e => setDueDate(e.target.value)} />
|
||||
<//>
|
||||
<${FormField} label="Tags">
|
||||
<input type="text" value=${tags} onInput=${e => setTags(e.target.value)}
|
||||
placeholder="comma-separated" />
|
||||
<//>
|
||||
</div>
|
||||
<div class="task-form__actions">
|
||||
<${Button} variant="ghost" type="button" onClick=${onClose}>Cancel<//>
|
||||
<${Button} variant="primary" type="submit" disabled=${saving}>
|
||||
${saving ? 'Saving…' : (task ? 'Update' : 'Create')}
|
||||
<//>
|
||||
</div>
|
||||
</form>
|
||||
<//>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
// ═══════════════════════════════════════════
|
||||
// TaskList — filterable task table
|
||||
// ═══════════════════════════════════════════
|
||||
|
||||
function TaskList({ items, loading, onEdit, onRefresh }) {
|
||||
var [filter, setFilter] = useState('all');
|
||||
|
||||
var filtered = items;
|
||||
if (filter !== 'all') {
|
||||
filtered = items.filter(function(t) { return t.status === filter; });
|
||||
}
|
||||
|
||||
async function handleDelete(id) {
|
||||
if (!confirm('Delete this task?')) return;
|
||||
await api.del('/items/' + id);
|
||||
onRefresh();
|
||||
}
|
||||
|
||||
async function handleQuickStatus(id, newStatus) {
|
||||
await api.put('/items/' + id, { status: newStatus });
|
||||
onRefresh();
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="task-list">
|
||||
<div class="task-list__filters">
|
||||
<select value=${filter} onChange=${e => setFilter(e.target.value)} class="task-filter">
|
||||
<option value="all">All</option>
|
||||
${STATUSES.map(s => html`<option value=${s}>${STATUS_LABELS[s] || s}</option>`)}
|
||||
</select>
|
||||
<span class="task-list__count">${filtered.length} task${filtered.length !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
|
||||
${loading && html`<div class="task-list__loading"><${Spinner} size="md" /></div>`}
|
||||
|
||||
${!loading && filtered.length === 0 && html`
|
||||
<div class="task-list__empty">No tasks${filter !== 'all' ? ' matching filter' : ''}. Create one to get started.</div>
|
||||
`}
|
||||
|
||||
${!loading && filtered.map(function(t) {
|
||||
return html`
|
||||
<div class="task-card" key=${t.id}>
|
||||
<div class="task-card__header">
|
||||
<span class="task-card__priority" style="color:${PRIORITY_COLORS[t.priority] || 'var(--text-3)'}">
|
||||
●
|
||||
</span>
|
||||
<span class="task-card__title" onClick=${() => onEdit(t)}>${t.title}</span>
|
||||
<span class="task-card__status task-card__status--${t.status}">
|
||||
${STATUS_LABELS[t.status] || t.status}
|
||||
</span>
|
||||
</div>
|
||||
${t.description && html`
|
||||
<div class="task-card__desc">${t.description}</div>
|
||||
`}
|
||||
<div class="task-card__footer">
|
||||
${t.due_date && html`<span class="task-card__due">Due: ${t.due_date}</span>`}
|
||||
${t.tags && html`<span class="task-card__tags">${t.tags}</span>`}
|
||||
<div class="task-card__actions">
|
||||
${t.status !== 'done' && html`
|
||||
<button class="task-btn task-btn--sm" onClick=${() => handleQuickStatus(t.id, 'done')}
|
||||
title="Mark done">✓</button>
|
||||
`}
|
||||
<button class="task-btn task-btn--sm task-btn--danger" onClick=${() => handleDelete(t.id)}
|
||||
title="Delete">×</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
// ═══════════════════════════════════════════
|
||||
// TaskBoard — kanban columns
|
||||
// ═══════════════════════════════════════════
|
||||
|
||||
function TaskBoard({ items, loading, onEdit, onRefresh }) {
|
||||
async function handleQuickStatus(id, newStatus) {
|
||||
await api.put('/items/' + id, { status: newStatus });
|
||||
onRefresh();
|
||||
}
|
||||
|
||||
return html`
|
||||
<div class="task-board">
|
||||
${loading && html`<div class="task-list__loading"><${Spinner} size="md" /></div>`}
|
||||
${!loading && STATUSES.map(function(status) {
|
||||
var col = items.filter(function(t) { return t.status === status; });
|
||||
return html`
|
||||
<div class="task-board__col" key=${status}>
|
||||
<div class="task-board__col-header">
|
||||
<span class="task-board__col-title">${STATUS_LABELS[status] || status}</span>
|
||||
<span class="task-board__col-count">${col.length}</span>
|
||||
</div>
|
||||
<div class="task-board__col-body">
|
||||
${col.map(function(t) {
|
||||
return html`
|
||||
<div class="task-board__card" key=${t.id} onClick=${() => onEdit(t)}>
|
||||
<div class="task-board__card-title">
|
||||
<span class="task-card__priority" style="color:${PRIORITY_COLORS[t.priority] || 'var(--text-3)'}">●</span>
|
||||
${t.title}
|
||||
</div>
|
||||
${t.due_date && html`<div class="task-board__card-due">Due: ${t.due_date}</div>`}
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
// ═══════════════════════════════════════════
|
||||
// TaskApp — root component
|
||||
// ═══════════════════════════════════════════
|
||||
|
||||
function TaskApp() {
|
||||
var [items, setItems] = useState([]);
|
||||
var [loading, setLoading] = useState(true);
|
||||
var [error, setError] = useState('');
|
||||
var [view, setView] = useState('list');
|
||||
var [editTask, setEditTask] = useState(null); // null = closed, {} = new, {id} = edit
|
||||
var [stats, setStats] = useState(null);
|
||||
|
||||
var loadItems = useCallback(async function () {
|
||||
setLoading(true);
|
||||
try {
|
||||
var res = await api.get('/items');
|
||||
setItems(res.data || res || []);
|
||||
setError('');
|
||||
} catch (err) {
|
||||
setError(err.message || 'Failed to load tasks');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
var loadStats = useCallback(async function () {
|
||||
try {
|
||||
var res = await api.get('/stats');
|
||||
setStats(res);
|
||||
} catch (_) {}
|
||||
}, []);
|
||||
|
||||
useEffect(function () {
|
||||
loadItems();
|
||||
loadStats();
|
||||
}, []);
|
||||
|
||||
// Live updates via event bus
|
||||
useEffect(function () {
|
||||
var off = sw.on('task.*', function () {
|
||||
loadItems();
|
||||
loadStats();
|
||||
});
|
||||
return off;
|
||||
}, []);
|
||||
|
||||
function handleSave() {
|
||||
setEditTask(null);
|
||||
loadItems();
|
||||
loadStats();
|
||||
}
|
||||
|
||||
var tabs = [
|
||||
{ id: 'list', label: 'List' },
|
||||
{ id: 'board', label: 'Board' },
|
||||
];
|
||||
|
||||
var Topbar = sw.shell?.Topbar;
|
||||
|
||||
return html`
|
||||
<div class="tasks-app">
|
||||
${Topbar ? html`
|
||||
<${Topbar} title="Tasks">
|
||||
${stats && html`<span class="tasks-stats">${stats.total || 0} total</span>`}
|
||||
<div class="tasks-view-tabs">
|
||||
${tabs.map(function(tab) {
|
||||
return html`<button key=${tab.id}
|
||||
class="tasks-view-tab ${view === tab.id ? 'tasks-view-tab--active' : ''}"
|
||||
onClick=${() => setView(tab.id)}>${tab.label}</button>`;
|
||||
})}
|
||||
</div>
|
||||
<${Button} variant="primary" size="sm" onClick=${() => setEditTask({})}>+ New Task<//>
|
||||
<//>
|
||||
` : html`
|
||||
<div class="tasks-header">
|
||||
<h1 class="tasks-title">Tasks</h1>
|
||||
<${Button} variant="primary" size="sm" onClick=${() => setEditTask({})}>+ New Task<//>
|
||||
</div>
|
||||
`}
|
||||
|
||||
${error && html`<${Banner} variant="danger" text=${error} />`}
|
||||
|
||||
${view === 'list' && html`
|
||||
<${TaskList} items=${items} loading=${loading}
|
||||
onEdit=${setEditTask} onRefresh=${loadItems} />
|
||||
`}
|
||||
|
||||
${view === 'board' && html`
|
||||
<${TaskBoard} items=${items} loading=${loading}
|
||||
onEdit=${setEditTask} onRefresh=${loadItems} />
|
||||
`}
|
||||
|
||||
${editTask !== null && html`
|
||||
<${TaskForm} task=${editTask.id ? editTask : null}
|
||||
onSave=${handleSave}
|
||||
onClose=${() => setEditTask(null)} />
|
||||
`}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
// ═══════════════════════════════════════════
|
||||
// Actions & Slots registration
|
||||
// ═══════════════════════════════════════════
|
||||
|
||||
// Register create-task action
|
||||
sw.actions.register('tasks.create', {
|
||||
label: 'Create Task',
|
||||
handler: function () {
|
||||
// Emit event that the app listens to
|
||||
sw.emit('tasks.open-create', {}, { localOnly: true });
|
||||
},
|
||||
});
|
||||
|
||||
// Statusbar widget
|
||||
function TaskStatusWidget() {
|
||||
var [count, setCount] = useState(null);
|
||||
|
||||
useEffect(function () {
|
||||
async function load() {
|
||||
try {
|
||||
var res = await api.get('/stats');
|
||||
var open = (res.counts || {}).todo || 0;
|
||||
var inProg = (res.counts || {}).in_progress || 0;
|
||||
setCount(open + inProg);
|
||||
} catch (_) {}
|
||||
}
|
||||
load();
|
||||
var off = sw.on('task.*', load);
|
||||
return off;
|
||||
}, []);
|
||||
|
||||
if (count === null) return null;
|
||||
return html`<span class="task-status-widget" title="Open tasks">${count} open task${count !== 1 ? 's' : ''}</span>`;
|
||||
}
|
||||
|
||||
sw.slots.register('statusbar', {
|
||||
id: 'tasks-open-count',
|
||||
component: TaskStatusWidget,
|
||||
priority: 50,
|
||||
});
|
||||
|
||||
|
||||
// ── Mount ──────────────────────────────────
|
||||
render(html`<${TaskApp} />`, mount);
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user