292 lines
23 KiB
JavaScript
292 lines
23 KiB
JavaScript
 
|
// Top-level pages: Home, My work, Inbox, Search, Team, Workspace, Admin, and the user menu.
|
|||
|
|
import { html, useState, useEffect, useRef } from '../vendor/preact-htm.mjs';
|
|||
|
|
import { api } from './api.js';
|
|||
|
|
import { state, update, useStore, navigate, boardPath, loadUsers, loadTree, toast, setTheme } from './store.js';
|
|||
|
|
import { Icon, Avatar, Spinner, Empty, timeAgo, fmtDate, parseDate, ymd, todayStr, textOn, openModal, closePopover, Menu, RichText, useMobile, confirmDialog, promptDialog } from './ui.js';
|
|||
|
|
import { NewBoardModal } from './sidebar.js';
|
|||
|
|
|
|||
|
|
function PageHead({ title, sub, children }) {
|
|||
|
|
const mobile = useMobile();
|
|||
|
|
return html`<header class="page-head">
|
|||
|
|
${mobile ? html`<button class="icon-btn" onClick=${() => update({ sidebarOpen: true })}><${Icon} name="menu" size=${20} /></button>` : null}
|
|||
|
|
<div class="grow"><h1>${title}</h1>${sub ? html`<p class="muted">${sub}</p>` : null}</div>${children}</header>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Home ────────────────────────────────────────────────
|
|||
|
|
export function HomePage() {
|
|||
|
|
const s = useStore();
|
|||
|
|
const [work, setWork] = useState(null);
|
|||
|
|
useEffect(() => { api.get('/api/mywork').then(setWork).catch(() => setWork([])); }, []);
|
|||
|
|
const hour = new Date().getHours();
|
|||
|
|
const greet = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
|
|||
|
|
const favs = s.boards.filter((b) => s.favorites.includes(b.id));
|
|||
|
|
const recent = s.boards.slice().reverse().slice(0, 8);
|
|||
|
|
const open = (work || []).filter((w) => !w.status?.done);
|
|||
|
|
const overdue = open.filter((w) => w.date && w.date.slice(0, 10) < todayStr()).length;
|
|||
|
|
const today = open.filter((w) => w.date && w.date.slice(0, 10) === todayStr()).length;
|
|||
|
|
const wsName = (id) => s.workspaces.find((w) => w.id === id)?.name;
|
|||
|
|
return html`<div class="page home">
|
|||
|
|
<${PageHead} title=${`${greet}, ${s.me.name.split(' ')[0]}!`} sub="Quickly access your recent boards, inbox and work." />
|
|||
|
|
<div class="home-grid">
|
|||
|
|
<section class="card home-stats">
|
|||
|
|
<button class="stat" onClick=${() => navigate('/my-work')}><span class="stat-n">${work ? open.length : '–'}</span><span class="muted">Open items assigned to you</span></button>
|
|||
|
|
<button class="stat" onClick=${() => navigate('/my-work')}><span class="stat-n" style=${{ color: overdue ? 'var(--red)' : undefined }}>${work ? overdue : '–'}</span><span class="muted">Overdue</span></button>
|
|||
|
|
<button class="stat" onClick=${() => navigate('/my-work')}><span class="stat-n">${work ? today : '–'}</span><span class="muted">Due today</span></button>
|
|||
|
|
<button class="stat" onClick=${() => navigate('/inbox')}><span class="stat-n">${s.unread}</span><span class="muted">Unread notifications</span></button>
|
|||
|
|
</section>
|
|||
|
|
${favs.length ? html`<section><h3 class="section-title"><${Icon} name="star" /> Favorites</h3>
|
|||
|
|
<div class="board-cards">${favs.map((b) => html`<${BoardCard} key=${b.id} b=${b} ws=${wsName(b.workspace_id)} />`)}</div></section>` : null}
|
|||
|
|
<section><h3 class="section-title">Boards</h3>
|
|||
|
|
<div class="board-cards">
|
|||
|
|
${recent.map((b) => html`<${BoardCard} key=${b.id} b=${b} ws=${wsName(b.workspace_id)} />`)}
|
|||
|
|
<button class="board-card new" onClick=${() => openModal(NewBoardModal, { workspaceId: s.currentWorkspace || s.workspaces[0]?.id })}><${Icon} name="plus" size=${28} /><span>New board</span></button>
|
|||
|
|
</div></section>
|
|||
|
|
</div>
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
function BoardCard({ b, ws }) {
|
|||
|
|
return html`<button class="board-card" onClick=${() => navigate(boardPath(b.id))}>
|
|||
|
|
<div class="bc-preview"><i /><i /><i /><i /></div>
|
|||
|
|
<div class="bc-name"><${Icon} name="board" size=${14} /> ${b.name}</div>
|
|||
|
|
<div class="muted small">${ws}</div></button>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── My work ─────────────────────────────────────────────
|
|||
|
|
export function MyWorkPage() {
|
|||
|
|
const s = useStore();
|
|||
|
|
const [items, setItems] = useState(null);
|
|||
|
|
const [showDone, setShowDone] = useState(false);
|
|||
|
|
const [q, setQ] = useState('');
|
|||
|
|
const [who, setWho] = useState(s.route.q?.user || s.me.id);
|
|||
|
|
const load = () => api.get(`/api/mywork${who !== s.me.id ? `?user=${who}` : ''}`).then(setItems);
|
|||
|
|
useEffect(() => { setItems(null); load(); }, [who]);
|
|||
|
|
useEffect(() => { const fn = () => load(); window.addEventListener('wb:board-changed', fn); return () => window.removeEventListener('wb:board-changed', fn); }, [who]);
|
|||
|
|
const t = todayStr();
|
|||
|
|
const d = new Date(); const endWeek = new Date(d); endWeek.setDate(d.getDate() + (7 - d.getDay()));
|
|||
|
|
const endNext = new Date(endWeek); endNext.setDate(endWeek.getDate() + 7);
|
|||
|
|
const buckets = [
|
|||
|
|
['Past dates', (x) => x < t, 'var(--red)'], ['Today', (x) => x === t, 'var(--green)'], ['This week', (x) => x > t && x <= ymd(endWeek), 'var(--primary)'],
|
|||
|
|
['Next week', (x) => x > ymd(endWeek) && x <= ymd(endNext), '#a25ddc'], ['Later', (x) => x > ymd(endNext), '#fdab3d'],
|
|||
|
|
];
|
|||
|
|
const list = (items || []).filter((i) => (showDone || !i.status?.done) && (!q || (i.name + i.board_name).toLowerCase().includes(q.toLowerCase())));
|
|||
|
|
const toggleDone = async (it) => {
|
|||
|
|
// Flip to the first "done" label (or back to empty).
|
|||
|
|
const data = state.boardData[it.board_id] || await api.get(`/api/boards/${it.board_id}`);
|
|||
|
|
const col = data.columns.find((c) => c.id === it.status_column);
|
|||
|
|
if (!col) return toast('That board has no status column', 'error');
|
|||
|
|
const doneLabel = col.settings.labels.find((l) => l.done || /^done$/i.test(l.name));
|
|||
|
|
if (!doneLabel) return toast(`"${col.title}" has no Done label`, 'error');
|
|||
|
|
await api.patch(`/api/items/${it.id}`, { vals: { [col.id]: it.status?.done ? null : doneLabel.id } });
|
|||
|
|
load();
|
|||
|
|
};
|
|||
|
|
const Row = ({ it }) => html`<div class="mw-row ${it.status?.done ? 'done' : ''}">
|
|||
|
|
<button class="mw-check ${it.status?.done ? 'on' : ''}" onClick=${() => toggleDone(it)} title="Mark done"><${Icon} name="check" size=${12} /></button>
|
|||
|
|
<button class="mw-name" onClick=${() => navigate(boardPath(it.board_id, { itemId: it.id }))}>${it.name}${it.parent_name ? html`<span class="muted small"> · in ${it.parent_name}</span>` : null}</button>
|
|||
|
|
<span class="mw-board muted small"><span class="dot" style=${{ background: it.group_color }} />${it.board_name}${it.group ? ` › ${it.group}` : ''}</span>
|
|||
|
|
${it.status ? html`<span class="mw-status" style=${{ background: it.status.color, color: textOn(it.status.color) }}>${it.status.name}</span>` : html`<span class="mw-status empty" />`}
|
|||
|
|
<span class="mw-date ${it.date && it.date.slice(0, 10) < t && !it.status?.done ? 'overdue' : ''}">${it.date ? fmtDate(it.date) : ''}</span>
|
|||
|
|
</div>`;
|
|||
|
|
return html`<div class="page mywork">
|
|||
|
|
<${PageHead} title="My work" sub="Everything assigned to you, across every board.">
|
|||
|
|
<select class="input sm" value=${who} onChange=${(e) => setWho(e.target.value)} title="View someone else's work">
|
|||
|
|
${s.users.filter((u) => u.active).map((u) => html`<option value=${u.id}>${u.id === s.me.id ? 'Me' : u.name}</option>`)}</select>
|
|||
|
|
<//>
|
|||
|
|
<div class="toolbar">
|
|||
|
|
<div class="tb-search"><${Icon} name="search" /><input placeholder="Search" value=${q} onInput=${(e) => setQ(e.target.value)} /></div>
|
|||
|
|
<label class="check-row"><input type="checkbox" checked=${showDone} onChange=${(e) => setShowDone(e.target.checked)} /> Show done items</label>
|
|||
|
|
</div>
|
|||
|
|
${!items ? html`<${Spinner} />` : !list.length ? html`<${Empty} icon="work" title="You're all caught up"><p class="muted">Items show up here when someone assigns you in a People column.</p><//>` : html`
|
|||
|
|
${buckets.map(([title, test, color]) => { const rows = list.filter((i) => i.date && test(i.date.slice(0, 10))).sort((a, b) => a.date.localeCompare(b.date));
|
|||
|
|
return rows.length ? html`<section key=${title} class="mw-group"><h3 style=${{ color }}>${title} <span class="muted small">${rows.length}</span></h3>${rows.map((it) => html`<${Row} key=${it.id} it=${it} />`)}</section>` : null; })}
|
|||
|
|
${(() => { const rows = list.filter((i) => !i.date); return rows.length ? html`<section class="mw-group"><h3 style=${{ color: 'var(--muted)' }}>Without a date <span class="muted small">${rows.length}</span></h3>${rows.map((it) => html`<${Row} key=${it.id} it=${it} />`)}</section>` : null; })()}
|
|||
|
|
`}
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Inbox ───────────────────────────────────────────────
|
|||
|
|
export function InboxPage() {
|
|||
|
|
const s = useStore();
|
|||
|
|
const [rows, setRows] = useState(null);
|
|||
|
|
const [filter, setFilter] = useState('all');
|
|||
|
|
const load = () => api.get('/api/notifications').then(setRows);
|
|||
|
|
useEffect(() => { load(); const fn = () => load(); window.addEventListener('wb:notifications', fn); return () => window.removeEventListener('wb:notifications', fn); }, []);
|
|||
|
|
const mark = async (ids, unread = false) => { const r = await api.post('/api/notifications/read', { ids, unread }); update({ unread: r.unread }); load(); };
|
|||
|
|
const markAll = async () => { const r = await api.post('/api/notifications/read', { all: true }); update({ unread: r.unread }); load(); };
|
|||
|
|
const shown = (rows || []).filter((n) => filter === 'all' || (filter === 'unread' ? !n.read : n.kind === filter));
|
|||
|
|
const icon = { mention: 'message', update: 'message', reply: 'reply', assigned: 'person', like: 'thumb', automation: 'bolt' };
|
|||
|
|
return html`<div class="page inbox">
|
|||
|
|
<${PageHead} title="Inbox" sub="Mentions, assignments, replies and automation alerts.">
|
|||
|
|
<button class="btn ghost sm" onClick=${markAll} disabled=${!s.unread}>Mark all as read</button>
|
|||
|
|
<//>
|
|||
|
|
<div class="row gap wrap">${[['all', 'All'], ['unread', 'Unread'], ['mention', 'Mentions'], ['assigned', 'Assigned'], ['automation', 'Automations']].map(([k, l]) => html`
|
|||
|
|
<button key=${k} class="chip-btn ${filter === k ? 'on' : ''}" onClick=${() => setFilter(k)}>${l}</button>`)}</div>
|
|||
|
|
${!rows ? html`<${Spinner} />` : !shown.length ? html`<${Empty} icon="bell" title="Nothing new"><p class="muted">When someone mentions or assigns you, it shows up here.</p><//>` : html`<div class="notif-list">
|
|||
|
|
${shown.map((n) => html`<div key=${n.id} class="notif ${n.read ? '' : 'unread'}" onClick=${() => { if (!n.read) mark([n.id]); if (n.board_id) navigate(boardPath(n.board_id, { itemId: n.item_id || undefined })); }}>
|
|||
|
|
<div class="notif-av"><${Avatar} user=${s.usersById[n.actor_id] || (n.actor_id ? null : { name: '⚡', email: 'auto' })} size=${36} /><span class="notif-kind"><${Icon} name=${icon[n.kind] || 'bell'} size=${11} /></span></div>
|
|||
|
|
<div class="notif-body"><div><${RichText} text=${n.text.replace(/@\[([^\]]+)\]\([\w-]+\)/g, '@$1')} /></div>
|
|||
|
|
<div class="muted small">${n.board_name || ''}${n.item_name ? ` › ${n.item_name}` : ''} · ${timeAgo(n.created_at)}</div></div>
|
|||
|
|
<button class="icon-btn" title=${n.read ? 'Mark unread' : 'Mark read'} onClick=${(e) => { e.stopPropagation(); mark([n.id], !!n.read); }}><span class="read-dot ${n.read ? '' : 'on'}" /></button>
|
|||
|
|
</div>`)}</div>`}
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Search ──────────────────────────────────────────────
|
|||
|
|
export function SearchPage() {
|
|||
|
|
const s = useStore();
|
|||
|
|
const [q, setQ] = useState(s.route.q?.q || '');
|
|||
|
|
const [res, setRes] = useState(null);
|
|||
|
|
const t = useRef();
|
|||
|
|
useEffect(() => {
|
|||
|
|
clearTimeout(t.current);
|
|||
|
|
if (q.trim().length < 2) { setRes(null); return; }
|
|||
|
|
t.current = setTimeout(() => { api.get(`/api/search?q=${encodeURIComponent(q)}`).then(setRes); history.replaceState({}, '', `/search?q=${encodeURIComponent(q)}`); }, 200);
|
|||
|
|
}, [q]);
|
|||
|
|
return html`<div class="page search-page">
|
|||
|
|
<${PageHead} title="Search everything" />
|
|||
|
|
<div class="big-search"><${Icon} name="search" size=${20} /><input placeholder="Search items, boards and updates" value=${q} onInput=${(e) => setQ(e.target.value)} autofocus /></div>
|
|||
|
|
${res ? html`
|
|||
|
|
${res.boards.length ? html`<h3 class="section-title">Boards</h3>${res.boards.map((b) => html`<button key=${b.id} class="result" onClick=${() => navigate(boardPath(b.id))}><${Icon} name="board" /> ${b.name}</button>`)}` : null}
|
|||
|
|
${res.items.length ? html`<h3 class="section-title">Items</h3>${res.items.map((i) => html`<button key=${i.id} class="result" onClick=${() => navigate(boardPath(i.board_id, { itemId: i.id }))}>
|
|||
|
|
<span class="dot" style=${{ background: i.group_color || 'var(--muted)' }} /><span class="grow">${i.name}</span><span class="muted small">${i.board_name}${i.group_title ? ` › ${i.group_title}` : ''}</span></button>`)}` : null}
|
|||
|
|
${res.updates.length ? html`<h3 class="section-title">Updates</h3>${res.updates.map((u) => html`<button key=${u.id} class="result update-result" onClick=${() => navigate(boardPath(u.board_id, { itemId: u.item_id }))}>
|
|||
|
|
<${Avatar} user=${s.usersById[u.user_id]} size=${24} /><span class="grow clamp2">${u.body.replace(/@\[([^\]]+)\]\([\w-]+\)/g, '@$1')}</span><span class="muted small">${u.item_name} · ${timeAgo(u.created_at)}</span></button>`)}` : null}
|
|||
|
|
${!res.boards.length && !res.items.length && !res.updates.length ? html`<p class="muted pad">No results for "${q}".</p>` : null}
|
|||
|
|
` : html`<p class="muted pad">Type at least two characters.</p>`}
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Team ────────────────────────────────────────────────
|
|||
|
|
export function PeoplePage() {
|
|||
|
|
const s = useStore();
|
|||
|
|
const [q, setQ] = useState('');
|
|||
|
|
useEffect(() => { loadUsers(); }, []);
|
|||
|
|
const users = s.users.filter((u) => (u.name + u.email).toLowerCase().includes(q.toLowerCase())).sort((a, b) => b.active - a.active);
|
|||
|
|
return html`<div class="page people">
|
|||
|
|
<${PageHead} title="Team" sub=${`${s.users.filter((u) => u.active).length} people`}>
|
|||
|
|
${s.me.role === 'admin' ? html`<button class="btn primary sm" onClick=${async () => {
|
|||
|
|
const email = await promptDialog({ title: 'Add a teammate', label: 'Their company email — they sign in with Google the first time they visit.', placeholder: 'name@waterschurch.org', confirm: 'Add' });
|
|||
|
|
if (email) { try { await api.post('/api/users', { email }); loadUsers(); toast('Added'); } catch (e) { toast(e.message, 'error'); } }
|
|||
|
|
}}><${Icon} name="plus" /> Add person</button>` : null}
|
|||
|
|
<//>
|
|||
|
|
<div class="tb-search wide"><${Icon} name="search" /><input placeholder="Search people" value=${q} onInput=${(e) => setQ(e.target.value)} /></div>
|
|||
|
|
<div class="people-grid">${users.map((u) => html`<div key=${u.id} class="person-card ${u.active ? '' : 'inactive'}">
|
|||
|
|
<${Avatar} user=${u} size=${56} />
|
|||
|
|
<strong>${u.name}</strong><span class="muted small">${u.title || (u.role === 'admin' ? 'Admin' : 'Member')}</span>
|
|||
|
|
<a class="muted small" href=${'mailto:' + u.email}>${u.email}</a>
|
|||
|
|
<button class="btn ghost sm" onClick=${() => navigate(`/my-work?user=${u.id}`)}>Assigned work</button>
|
|||
|
|
</div>`)}</div>
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Workspace overview ──────────────────────────────────
|
|||
|
|
export function WorkspacePage({ workspaceId }) {
|
|||
|
|
const s = useStore();
|
|||
|
|
const ws = s.workspaces.find((w) => w.id === workspaceId);
|
|||
|
|
if (!ws) return html`<${Empty} title="Workspace not found" />`;
|
|||
|
|
const boards = s.boards.filter((b) => b.workspace_id === ws.id);
|
|||
|
|
return html`<div class="page">
|
|||
|
|
<${PageHead} title=${ws.name} sub=${ws.description || `${boards.length} boards`}>
|
|||
|
|
<button class="btn primary sm" onClick=${() => openModal(NewBoardModal, { workspaceId: ws.id })}><${Icon} name="plus" /> New board</button><//>
|
|||
|
|
<div class="board-cards">${boards.map((b) => html`<${BoardCard} key=${b.id} b=${b} ws=${s.folders.find((f) => f.id === b.folder_id)?.name || ''} />`)}</div>
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── Admin ───────────────────────────────────────────────
|
|||
|
|
export function AdminPage() {
|
|||
|
|
const s = useStore();
|
|||
|
|
const [tab, setTab] = useState(s.route.tab || 'people');
|
|||
|
|
useEffect(() => { loadUsers(); }, []);
|
|||
|
|
if (s.me.role !== 'admin') return html`<${Empty} icon="shield" title="Admins only" />`;
|
|||
|
|
return html`<div class="page admin">
|
|||
|
|
<${PageHead} title="Administration" />
|
|||
|
|
<nav class="panel-tabs">
|
|||
|
|
<button class=${tab === 'people' ? 'active' : ''} onClick=${() => setTab('people')}>People & access</button>
|
|||
|
|
<button class=${tab === 'import' ? 'active' : ''} onClick=${() => setTab('import')}>Import from monday.com</button>
|
|||
|
|
</nav>
|
|||
|
|
${tab === 'people' ? html`<${AdminPeople} />` : html`<${MondayImport} />`}
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function AdminPeople() {
|
|||
|
|
const s = useStore();
|
|||
|
|
const patch = async (u, p) => { try { await api.patch(`/api/users/${u.id}`, p); loadUsers(); } catch (e) { toast(e.message, 'error'); } };
|
|||
|
|
return html`<div class="card"><table class="admin-table">
|
|||
|
|
<thead><tr><th>Person</th><th>Email</th><th>Role</th><th>Last seen</th><th>Access</th></tr></thead>
|
|||
|
|
<tbody>${s.users.map((u) => html`<tr key=${u.id} class=${u.active ? '' : 'inactive'}>
|
|||
|
|
<td><span class="row gap"><${Avatar} user=${u} size=${26} />${u.name}</span></td>
|
|||
|
|
<td class="muted">${u.email}</td>
|
|||
|
|
<td><select class="input sm" value=${u.role} disabled=${u.id === s.me.id} onChange=${(e) => patch(u, { role: e.target.value })}><option value="member">Member</option><option value="admin">Admin</option></select></td>
|
|||
|
|
<td class="muted small">${u.last_seen ? timeAgo(u.last_seen) : 'never signed in'}</td>
|
|||
|
|
<td>${u.id === s.me.id ? html`<span class="muted small">you</span>` : html`<button class="btn ghost sm" onClick=${async () => {
|
|||
|
|
if (u.active && !(await confirmDialog({ title: `Remove ${u.name}'s access?`, body: 'They are signed out everywhere and can no longer sign in. Their items and updates stay.', confirm: 'Remove access' }))) return;
|
|||
|
|
patch(u, { active: !u.active });
|
|||
|
|
}}>${u.active ? 'Deactivate' : 'Reactivate'}</button>`}</td>
|
|||
|
|
</tr>`)}</tbody></table>
|
|||
|
|
<p class="muted small pad">Anyone with an allowed company Google account can sign in and becomes a member. Admins can manage people, delete workspaces and run imports.</p>
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function MondayImport() {
|
|||
|
|
const [token, setToken] = useState('');
|
|||
|
|
const [boards, setBoards] = useState(null);
|
|||
|
|
const [sel, setSel] = useState([]);
|
|||
|
|
const [status, setStatus] = useState(null);
|
|||
|
|
const [busy, setBusy] = useState(false);
|
|||
|
|
const poll = useRef();
|
|||
|
|
const refresh = () => api.get('/api/admin/import/monday').then((st) => { setStatus(st); if (!st.running) { clearInterval(poll.current); if (st.finishedAt) loadTree(); } });
|
|||
|
|
useEffect(() => { refresh(); return () => clearInterval(poll.current); }, []);
|
|||
|
|
const list = async () => {
|
|||
|
|
setBusy(true);
|
|||
|
|
try { const b = await api.post('/api/admin/import/monday/boards', { token }); setBoards(b); setSel(b.filter((x) => !x.imported).map((x) => x.id)); }
|
|||
|
|
catch (e) { toast(e.message, 'error'); }
|
|||
|
|
setBusy(false);
|
|||
|
|
};
|
|||
|
|
const start = async () => {
|
|||
|
|
try { await api.post('/api/admin/import/monday', { token, boardIds: sel }); clearInterval(poll.current); poll.current = setInterval(refresh, 1500); refresh(); }
|
|||
|
|
catch (e) { toast(e.message, 'error'); }
|
|||
|
|
};
|
|||
|
|
return html`<div class="card import-card">
|
|||
|
|
<h3>Bring your boards over from monday.com</h3>
|
|||
|
|
<ol class="steps">
|
|||
|
|
<li>In monday.com, click your avatar → <b>Developers</b> → <b>My access tokens</b> → <b>Show</b>, and copy the token.</li>
|
|||
|
|
<li>Paste it below and load your boards. Pick which ones to bring over.</li>
|
|||
|
|
<li>Everything comes across: workspaces, folders, groups, columns, items, subitems, updates and files. People are matched by email and claim their assignments the first time they sign in.</li>
|
|||
|
|
</ol>
|
|||
|
|
<div class="row gap"><input class="input grow" type="password" placeholder="monday.com API token" value=${token} onInput=${(e) => setToken(e.target.value)} autocomplete="off" />
|
|||
|
|
<button class="btn" disabled=${!token || busy} onClick=${list}>${busy ? 'Loading…' : 'Load boards'}</button></div>
|
|||
|
|
<p class="muted small">The token is only used for this import and is never stored.</p>
|
|||
|
|
${boards ? html`<div class="import-list">
|
|||
|
|
<label class="check-row"><input type="checkbox" checked=${sel.length === boards.filter((b) => !b.imported).length} onChange=${(e) => setSel(e.target.checked ? boards.filter((b) => !b.imported).map((b) => b.id) : [])} /> <b>All boards</b> (${boards.length})</label>
|
|||
|
|
${boards.map((b) => html`<label key=${b.id} class="check-row ${b.imported ? 'muted' : ''}">
|
|||
|
|
<input type="checkbox" disabled=${b.imported} checked=${sel.includes(b.id)} onChange=${(e) => setSel(e.target.checked ? [...sel, b.id] : sel.filter((x) => x !== b.id))} />
|
|||
|
|
${b.name} <span class="muted small">${b.workspace} · ${b.items ?? '?'} items${b.imported ? ' · already imported' : ''}</span></label>`)}
|
|||
|
|
</div>
|
|||
|
|
<button class="btn primary" disabled=${!sel.length || status?.running} onClick=${start}>Import ${sel.length} board${sel.length === 1 ? '' : 's'}</button>` : null}
|
|||
|
|
${status && (status.running || status.log.length) ? html`<div class="import-log">
|
|||
|
|
<div class="row gap"><strong>${status.running ? 'Importing…' : status.error ? 'Import failed' : 'Import finished'}</strong>${status.running ? html`<${Spinner} />` : null}
|
|||
|
|
<span class="muted small">${status.counts.boards || 0} boards · ${status.counts.items || 0} items · ${status.counts.updates || 0} updates · ${status.counts.files || 0} files</span></div>
|
|||
|
|
<pre>${status.log.slice(-200).join('\n')}</pre></div>` : null}
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ─── User menu ───────────────────────────────────────────
|
|||
|
|
export function UserMenu() {
|
|||
|
|
const s = useStore();
|
|||
|
|
const signOut = async () => { await api.post('/api/auth/logout'); location.href = '/'; };
|
|||
|
|
return html`<div class="user-menu">
|
|||
|
|
<div class="um-head"><${Avatar} user=${s.me} size=${40} /><div><strong>${s.me.name}</strong><div class="muted small">${s.me.email}</div></div></div>
|
|||
|
|
<${Menu} items=${[
|
|||
|
|
{ label: 'Edit my name', icon: 'edit', onClick: async () => { const n = await promptDialog({ title: 'Your name', value: s.me.name }); if (n) { const me = await api.patch('/api/me', { name: n }); update({ me }); loadUsers(); } } },
|
|||
|
|
{ label: 'My work', icon: 'work', onClick: () => navigate('/my-work') },
|
|||
|
|
{ divider: true },
|
|||
|
|
{ label: 'Light theme', icon: 'sun', active: s.theme === 'light', onClick: () => setTheme('light') },
|
|||
|
|
{ label: 'Dark theme', icon: 'moon', active: s.theme === 'dark', onClick: () => setTheme('dark') },
|
|||
|
|
{ label: 'Night theme', icon: 'moon', active: s.theme === 'night', onClick: () => setTheme('night') },
|
|||
|
|
{ label: 'Match system', icon: 'gear', active: s.theme === 'system', onClick: () => setTheme('system') },
|
|||
|
|
{ divider: true },
|
|||
|
|
s.me.role === 'admin' && { label: 'Administration', icon: 'shield', onClick: () => navigate('/admin') },
|
|||
|
|
{ label: 'Sign out', icon: 'logout', onClick: signOut },
|
|||
|
|
]} />
|
|||
|
|
</div>`;
|
|||
|
|
}
|