feat(guide): tabbed markdown reader — retire CRUD GuidesView (Phase 2, Refs #1)
New GuideReader.svelte: nav tree (apps→modules) + tabbed markdown (marked),
audience-gated server-side (admins see internal tabs, badged). Replaces the old
DB-CRUD GuidesView. Consumes GET /api/v1/guide/nav + /modules/{module}.
Deployed to guide.bcos.dev.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+1
-1
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/hiveiq_logo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HiveOps Guide Admin</title>
|
||||
<title>HiveIQ Guide</title>
|
||||
<script src="/config.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Generated
+14
-1
@@ -8,7 +8,8 @@
|
||||
"name": "hiveops-guide-frontend",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"axios": "^1.6.0"
|
||||
"axios": "^1.6.0",
|
||||
"marked": "^12.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
@@ -1578,6 +1579,18 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.5.5"
|
||||
}
|
||||
},
|
||||
"node_modules/marked": {
|
||||
"version": "12.0.2",
|
||||
"resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz",
|
||||
"integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"marked": "bin/marked.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 18"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
"vite": "^5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.6.0"
|
||||
"axios": "^1.6.0",
|
||||
"marked": "^12.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { authApi, setToken, getToken, clearToken } from './lib/api';
|
||||
import { toasts } from './lib/stores';
|
||||
import GuidesView from './components/Guides/GuidesView.svelte';
|
||||
import GuideReader from './components/GuideReader.svelte';
|
||||
|
||||
let authenticated = false;
|
||||
let checking = true;
|
||||
@@ -53,7 +53,7 @@
|
||||
<div class="login-logo">
|
||||
<img src="/hiveiq_logo.png" alt="HiveIQ" />
|
||||
</div>
|
||||
<h1>Guide Admin</h1>
|
||||
<h1>HiveIQ Guide</h1>
|
||||
<p class="login-sub">Sign in with your HiveOps account</p>
|
||||
|
||||
{#if loginError}
|
||||
@@ -74,7 +74,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<GuidesView on:logout={logout} />
|
||||
<GuideReader on:logout={logout} />
|
||||
{/if}
|
||||
|
||||
<!-- Toast notifications -->
|
||||
|
||||
@@ -0,0 +1,235 @@
|
||||
<script lang="ts">
|
||||
import { onMount, createEventDispatcher } from 'svelte';
|
||||
import { marked } from 'marked';
|
||||
import { fetchNav, fetchModule } from '../lib/api';
|
||||
import type { NavApp, ModuleView } from '../lib/api';
|
||||
import { addToast } from '../lib/stores';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let nav: NavApp[] = [];
|
||||
let loadingNav = true;
|
||||
let module: ModuleView | null = null;
|
||||
let loadingModule = false;
|
||||
let activeModuleKey = '';
|
||||
let activeTab = 0;
|
||||
let search = '';
|
||||
|
||||
marked.setOptions({ gfm: true, breaks: false });
|
||||
const render = (md: string): string => marked.parse(md, { async: false }) as string;
|
||||
|
||||
// pretty app label: "platform" → "Platform", "agent-proxy" → "Agent Proxy"
|
||||
const appLabel = (a: string) =>
|
||||
a.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
|
||||
$: filtered = !search.trim()
|
||||
? nav
|
||||
: nav
|
||||
.map(a => ({
|
||||
...a,
|
||||
modules: a.modules.filter(m =>
|
||||
(m.title + ' ' + m.module).toLowerCase().includes(search.toLowerCase())
|
||||
),
|
||||
}))
|
||||
.filter(a => a.modules.length > 0);
|
||||
|
||||
async function loadNav() {
|
||||
loadingNav = true;
|
||||
try {
|
||||
nav = await fetchNav();
|
||||
// auto-select the first module
|
||||
const first = nav.find(a => a.modules.length)?.modules[0];
|
||||
if (first) selectModule(first.module);
|
||||
} catch (e: any) {
|
||||
addToast('error', 'Failed to load guides', e?.response?.data?.message ?? e?.message ?? '');
|
||||
} finally {
|
||||
loadingNav = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function selectModule(key: string) {
|
||||
if (key === activeModuleKey && module) return;
|
||||
activeModuleKey = key;
|
||||
loadingModule = true;
|
||||
module = null;
|
||||
try {
|
||||
module = await fetchModule(key);
|
||||
activeTab = 0;
|
||||
} catch (e: any) {
|
||||
addToast('error', 'Failed to load module', e?.response?.data?.message ?? e?.message ?? '');
|
||||
} finally {
|
||||
loadingModule = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(loadNav);
|
||||
</script>
|
||||
|
||||
<div class="reader">
|
||||
<!-- Nav sidebar -->
|
||||
<aside class="side">
|
||||
<div class="side-head">
|
||||
<img src="/hiveiq_logo.png" alt="HiveIQ" class="side-logo" />
|
||||
<span class="side-title">Guide</span>
|
||||
</div>
|
||||
|
||||
<div class="side-search">
|
||||
<input type="text" placeholder="Search guides…" bind:value={search} />
|
||||
</div>
|
||||
|
||||
<nav class="side-nav">
|
||||
{#if loadingNav}
|
||||
<div class="side-msg">Loading…</div>
|
||||
{:else if filtered.length === 0}
|
||||
<div class="side-msg">No guides found.</div>
|
||||
{:else}
|
||||
{#each filtered as app (app.app)}
|
||||
<div class="nav-group">
|
||||
<div class="nav-group-label">{appLabel(app.app)}</div>
|
||||
{#each app.modules as m (m.module)}
|
||||
<button
|
||||
class="nav-item"
|
||||
class:active={m.module === activeModuleKey}
|
||||
on:click={() => selectModule(m.module)}
|
||||
title={m.module}
|
||||
>
|
||||
{m.title}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</nav>
|
||||
|
||||
<button class="side-logout" on:click={() => dispatch('logout')}>Sign out</button>
|
||||
</aside>
|
||||
|
||||
<!-- Content -->
|
||||
<main class="content">
|
||||
{#if loadingModule}
|
||||
<div class="content-msg"><div class="spinner"></div></div>
|
||||
{:else if !module}
|
||||
<div class="content-msg">Select a guide from the left.</div>
|
||||
{:else}
|
||||
<div class="content-head">
|
||||
<div class="content-title">{module.title}</div>
|
||||
<div class="content-key">{module.module}</div>
|
||||
</div>
|
||||
|
||||
{#if module.tabs.length > 1}
|
||||
<div class="tabs" role="tablist">
|
||||
{#each module.tabs as t, i}
|
||||
<button
|
||||
class="tab"
|
||||
class:active={activeTab === i}
|
||||
role="tab"
|
||||
aria-selected={activeTab === i}
|
||||
on:click={() => (activeTab = i)}
|
||||
>
|
||||
{t.tab}
|
||||
{#if t.audience === 'internal'}<span class="tab-int">internal</span>{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="body">
|
||||
{#if module.tabs[activeTab]}
|
||||
{#if module.tabs[activeTab].audience === 'internal'}
|
||||
<div class="int-banner">Internal — visible to admins only</div>
|
||||
{/if}
|
||||
<div class="md">{@html render(module.tabs[activeTab].body)}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.reader { display: flex; height: 100vh; overflow: hidden; font-size: 14px; }
|
||||
|
||||
/* ── Sidebar ─────────────────────────────────────────── */
|
||||
.side {
|
||||
width: 264px; min-width: 264px;
|
||||
background: linear-gradient(180deg, #081651 0%, #1c49b8 100%);
|
||||
display: flex; flex-direction: column;
|
||||
box-shadow: 2px 0 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
.side-head { display: flex; align-items: center; gap: 0.6rem; padding: 1.25rem 1.25rem 0.75rem; }
|
||||
.side-logo { height: 26px; width: auto; filter: brightness(0) invert(1); }
|
||||
.side-title { color: white; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.3px; }
|
||||
|
||||
.side-search { padding: 0.25rem 1rem 0.75rem; }
|
||||
.side-search input {
|
||||
width: 100%; padding: 0.45rem 0.7rem; border-radius: 6px;
|
||||
border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.12);
|
||||
color: white; font-size: 0.85rem;
|
||||
}
|
||||
.side-search input::placeholder { color: rgba(255,255,255,0.6); }
|
||||
.side-search input:focus { outline: none; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.18); }
|
||||
|
||||
.side-nav { flex: 1; overflow-y: auto; padding: 0.25rem 0 1rem; }
|
||||
.side-msg { color: rgba(255,255,255,0.7); font-size: 0.85rem; padding: 0.75rem 1.25rem; }
|
||||
|
||||
.nav-group { margin-bottom: 0.5rem; }
|
||||
.nav-group-label {
|
||||
color: rgba(255,255,255,0.55); font-size: 0.7rem; font-weight: 700;
|
||||
text-transform: uppercase; letter-spacing: 0.06em; padding: 0.5rem 1.25rem 0.25rem;
|
||||
}
|
||||
.nav-item {
|
||||
display: block; width: 100%; text-align: left;
|
||||
background: none; border: none; border-left: 3px solid transparent;
|
||||
color: rgba(255,255,255,0.82); font-size: 0.85rem;
|
||||
padding: 0.4rem 1.25rem 0.4rem 1.5rem; cursor: pointer;
|
||||
}
|
||||
.nav-item:hover { background: rgba(255,255,255,0.08); color: white; }
|
||||
.nav-item.active { background: rgba(255,255,255,0.14); color: white; border-left-color: white; font-weight: 600; }
|
||||
|
||||
.side-logout {
|
||||
margin: 0.5rem 1rem 1rem; padding: 0.5rem; border-radius: 6px;
|
||||
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
|
||||
color: white; font-size: 0.82rem; cursor: pointer;
|
||||
}
|
||||
.side-logout:hover { background: rgba(255,255,255,0.2); }
|
||||
|
||||
/* ── Content ─────────────────────────────────────────── */
|
||||
.content { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f5f6fa; }
|
||||
.content-msg { flex: 1; display: flex; align-items: center; justify-content: center; color: #6b7280; }
|
||||
.spinner { width: 32px; height: 32px; border: 3px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%; animation: spin 0.7s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.content-head {
|
||||
background: linear-gradient(180deg, #081651 0%, #1c49b8 100%);
|
||||
padding: 1.1rem 1.75rem; flex-shrink: 0;
|
||||
}
|
||||
.content-title { color: white; font-size: 1.3rem; font-weight: 700; }
|
||||
.content-key { color: rgba(255,255,255,0.6); font-size: 0.78rem; margin-top: 2px; font-family: ui-monospace, monospace; }
|
||||
|
||||
.tabs { display: flex; gap: 2px; padding: 0 1.5rem; background: #eef1f6; border-bottom: 1px solid #e2e8f0; flex-shrink: 0; overflow-x: auto; }
|
||||
.tab { background: transparent; border: none; border-bottom: 2px solid transparent; padding: 0.65rem 1rem; font-size: 0.85rem; font-weight: 600; color: #64748b; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; }
|
||||
.tab:hover { color: #1e293b; }
|
||||
.tab.active { color: #1c49b8; border-bottom-color: #1c49b8; }
|
||||
.tab-int { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; border-radius: 4px; padding: 1px 4px; }
|
||||
|
||||
.body { flex: 1; overflow-y: auto; padding: 1.5rem 1.75rem 3rem; }
|
||||
.int-banner { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 0.8rem; border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 1rem; }
|
||||
|
||||
.md { max-width: 860px; color: #1f2937; line-height: 1.6; }
|
||||
.md :global(h1), .md :global(h2), .md :global(h3) { color: #0f172a; font-weight: 700; line-height: 1.3; margin: 1.4rem 0 0.6rem; }
|
||||
.md :global(h1) { font-size: 1.4rem; }
|
||||
.md :global(h2) { font-size: 1.15rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3rem; }
|
||||
.md :global(h3) { font-size: 1rem; }
|
||||
.md :global(p) { margin: 0.5rem 0; }
|
||||
.md :global(ul), .md :global(ol) { margin: 0.5rem 0; padding-left: 1.4rem; }
|
||||
.md :global(li) { margin: 0.25rem 0; }
|
||||
.md :global(a) { color: #2563eb; text-decoration: none; }
|
||||
.md :global(a:hover) { text-decoration: underline; }
|
||||
.md :global(code) { background: #eef2f7; border: 1px solid #e2e8f0; border-radius: 4px; padding: 0.05rem 0.3rem; font-size: 0.85em; font-family: ui-monospace, monospace; }
|
||||
.md :global(pre) { background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 0.9rem 1rem; overflow-x: auto; }
|
||||
.md :global(pre code) { background: none; border: none; color: inherit; padding: 0; }
|
||||
.md :global(blockquote) { border-left: 3px solid #cbd5e1; margin: 0.75rem 0; padding: 0.25rem 0 0.25rem 0.9rem; color: #475569; background: #f8fafc; }
|
||||
.md :global(table) { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.85rem; }
|
||||
.md :global(th), .md :global(td) { border: 1px solid #e5e7eb; padding: 0.4rem 0.6rem; text-align: left; }
|
||||
.md :global(th) { background: #f9fafb; font-weight: 600; color: #374151; }
|
||||
.md :global(hr) { border: none; border-top: 1px solid #e5e7eb; margin: 1.25rem 0; }
|
||||
</style>
|
||||
@@ -1,347 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import api from '../../lib/api';
|
||||
import { addToast } from '../../lib/stores';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
interface Guide {
|
||||
id: number;
|
||||
pageKey: string;
|
||||
contentJson: string;
|
||||
enabled: boolean;
|
||||
updatedBy: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string | null;
|
||||
}
|
||||
|
||||
let guides: Guide[] = [];
|
||||
let loading = true;
|
||||
let filterSidebarCollapsed = true;
|
||||
let searchInput = '';
|
||||
let search = '';
|
||||
$: hasActiveFilters = !!search;
|
||||
$: filtered = guides.filter(g =>
|
||||
!search || g.pageKey.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
function clearAllFilters() { search = ''; searchInput = ''; }
|
||||
|
||||
let searchTimer: ReturnType<typeof setTimeout>;
|
||||
function handleSearchInput() { clearTimeout(searchTimer); searchTimer = setTimeout(() => { search = searchInput; }, 350); }
|
||||
|
||||
let panelOpen = false;
|
||||
let editingGuide: Guide | null = null;
|
||||
let submitting = false;
|
||||
let formError = '';
|
||||
let jsonError = '';
|
||||
let fPageKey = '';
|
||||
let fContentJson = '';
|
||||
let fEnabled = true;
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
try {
|
||||
const res = await api.get<Guide[]>('/api/v1/admin/guides');
|
||||
guides = res.data;
|
||||
} catch (e: any) {
|
||||
addToast('error', 'Failed to load guides', e?.response?.data?.error ?? '');
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editingGuide = null; fPageKey = ''; fContentJson = ''; fEnabled = true;
|
||||
formError = ''; jsonError = ''; panelOpen = true;
|
||||
}
|
||||
|
||||
function openEdit(g: Guide) {
|
||||
editingGuide = g; fPageKey = g.pageKey;
|
||||
try { fContentJson = JSON.stringify(JSON.parse(g.contentJson), null, 2); } catch { fContentJson = g.contentJson; }
|
||||
fEnabled = g.enabled; formError = ''; jsonError = ''; panelOpen = true;
|
||||
}
|
||||
|
||||
function validateJson(): boolean {
|
||||
try { JSON.parse(fContentJson); jsonError = ''; return true; }
|
||||
catch (e: any) { jsonError = 'Invalid JSON: ' + (e?.message ?? 'parse error'); return false; }
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (!fPageKey.trim()) { formError = 'Page key is required.'; return; }
|
||||
if (!fContentJson.trim()) { formError = 'Content JSON is required.'; return; }
|
||||
if (!validateJson()) return;
|
||||
submitting = true; formError = '';
|
||||
try {
|
||||
if (editingGuide) {
|
||||
await api.put(`/api/v1/admin/guides/${editingGuide.pageKey}`, { contentJson: fContentJson, enabled: fEnabled });
|
||||
addToast('success', 'Guide updated', fPageKey);
|
||||
} else {
|
||||
await api.post('/api/v1/admin/guides', { pageKey: fPageKey.trim(), contentJson: fContentJson, enabled: fEnabled });
|
||||
addToast('success', 'Guide created', fPageKey);
|
||||
}
|
||||
panelOpen = false; load();
|
||||
} catch (e: any) {
|
||||
formError = e?.response?.data?.error ?? 'An error occurred.';
|
||||
} finally { submitting = false; }
|
||||
}
|
||||
|
||||
async function toggleEnabled(g: Guide) {
|
||||
try {
|
||||
await api.put(`/api/v1/admin/guides/${g.pageKey}`, { contentJson: g.contentJson, enabled: !g.enabled });
|
||||
g.enabled = !g.enabled; guides = [...guides];
|
||||
} catch (e: any) {
|
||||
addToast('error', 'Failed to update guide', e?.response?.data?.error ?? '');
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(iso: string | null): string {
|
||||
if (!iso) return '—';
|
||||
return new Date(iso).toLocaleDateString('en-ZA', { month: 'short', day: 'numeric', year: 'numeric' });
|
||||
}
|
||||
|
||||
onMount(load);
|
||||
</script>
|
||||
|
||||
<div class="page-wrapper">
|
||||
<div class="header">
|
||||
<div class="header-text">
|
||||
<h1>Guide Admin</h1>
|
||||
<p>Manage in-app help guides by page key — no code deploy needed to update content.</p>
|
||||
</div>
|
||||
<div class="header-controls">
|
||||
<button class="btn-logout" on:click={() => dispatch('logout')}>Sign out</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="page-body">
|
||||
<div class="filter-sidebar" class:sidebar-collapsed={filterSidebarCollapsed}>
|
||||
<div class="filter-sidebar-toggle-bar" class:bar-filters-active={hasActiveFilters}>
|
||||
{#if !filterSidebarCollapsed}
|
||||
<span class="filter-sidebar-title">Filters</span>
|
||||
<div class="toggle-bar-right">
|
||||
<span class="sidebar-stat-pill">{filtered.length}</span>
|
||||
<button class="sidebar-toggle-btn" on:click={() => filterSidebarCollapsed = true}>◀</button>
|
||||
</div>
|
||||
{:else}
|
||||
<button class="sidebar-toggle-btn" on:click={() => filterSidebarCollapsed = false}>▶</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if !filterSidebarCollapsed}
|
||||
<div class="filter-sidebar-content">
|
||||
{#if hasActiveFilters}
|
||||
<button class="sidebar-clear-all-btn" on:click={clearAllFilters}>✕ Clear all</button>
|
||||
{/if}
|
||||
<div class="filter-section">
|
||||
<label class="filter-section-label">Search</label>
|
||||
<input type="text" placeholder="Page key…" bind:value={searchInput} on:input={handleSearchInput} class="search-input" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="page-right">
|
||||
{#if hasActiveFilters}
|
||||
<div class="active-filters">
|
||||
<span class="active-filters-label">Filters:</span>
|
||||
{#if search}
|
||||
<span class="filter-tag">
|
||||
<span class="filter-tag-dot"></span>
|
||||
"{search}"
|
||||
<button class="filter-tag-remove" on:click={() => { search = ''; searchInput = ''; }}>×</button>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="content-frame">
|
||||
<div class="page-main">
|
||||
<div class="toolbar">
|
||||
<span class="toolbar-count">{filtered.length} guide{filtered.length !== 1 ? 's' : ''}</span>
|
||||
<div class="toolbar-right">
|
||||
<button class="btn btn-primary btn-sm" on:click={openCreate}>+ New Guide</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="loading-msg">Loading guides…</div>
|
||||
{:else if filtered.length === 0}
|
||||
<div class="empty-msg">{guides.length === 0 ? 'No guides yet. Click "+ New Guide" to create one.' : 'No guides match the current filters.'}</div>
|
||||
{:else}
|
||||
<div class="table-card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Page Key</th>
|
||||
<th>Status</th>
|
||||
<th>Last Updated</th>
|
||||
<th>Updated By</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each filtered as g (g.id)}
|
||||
<tr>
|
||||
<td class="key-cell"><code>{g.pageKey}</code></td>
|
||||
<td>
|
||||
<button class="status-toggle" class:enabled={g.enabled} on:click={() => toggleEnabled(g)}>
|
||||
{g.enabled ? 'Enabled' : 'Disabled'}
|
||||
</button>
|
||||
</td>
|
||||
<td class="muted-cell">{formatDate(g.updatedAt ?? g.createdAt)}</td>
|
||||
<td class="muted-cell">{g.updatedBy ?? '—'}</td>
|
||||
<td class="actions">
|
||||
<button class="btn-sm btn-edit" on:click={() => openEdit(g)}>Edit</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if panelOpen}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
|
||||
<div class="panel-overlay" on:click={() => panelOpen = false}></div>
|
||||
<div class="panel" role="dialog" aria-modal="true">
|
||||
<div class="panel-header">
|
||||
<div class="panel-header-text">
|
||||
<div class="panel-title">{editingGuide ? 'Edit Guide' : 'New Guide'}</div>
|
||||
<div class="panel-subtitle">{editingGuide ? editingGuide.pageKey : 'Create a new in-app guide'}</div>
|
||||
</div>
|
||||
<button class="panel-close" on:click={() => panelOpen = false}>✕</button>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
{#if formError}<div class="form-error">{formError}</div>{/if}
|
||||
|
||||
<div class="form-group">
|
||||
<label>Page Key</label>
|
||||
<input class="form-input" type="text" bind:value={fPageKey} placeholder="e.g. devices.list" disabled={!!editingGuide} />
|
||||
<span class="field-hint">Unique identifier used by the SPA to fetch this guide.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Enabled</label>
|
||||
<label class="toggle-label">
|
||||
<input type="checkbox" bind:checked={fEnabled} />
|
||||
<span>{fEnabled ? 'Guide is visible to users' : 'Guide is hidden'}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Content JSON</label>
|
||||
<textarea
|
||||
class="form-textarea" class:json-error-border={!!jsonError}
|
||||
bind:value={fContentJson} rows={22}
|
||||
placeholder={`{\n "title": "Page Name",\n "subtitle": "How this page works",\n "sections": [\n {\n "icon": "🔍",\n "heading": "Section Title",\n "steps": [\n { "text": "Step description." }\n ]\n }\n ]\n}`}
|
||||
on:blur={validateJson}
|
||||
></textarea>
|
||||
{#if jsonError}<span class="json-error-msg">{jsonError}</span>{/if}
|
||||
<span class="field-hint">Must be valid JSON: title, subtitle, sections[].</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<button class="btn btn-secondary btn-sm" on:click={() => panelOpen = false} disabled={submitting}>Cancel</button>
|
||||
<button class="btn btn-primary btn-sm" on:click={submit} disabled={submitting}>
|
||||
{submitting ? 'Saving…' : editingGuide ? 'Save Changes' : 'Create Guide'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.page-wrapper { display: flex; flex-direction: column; height: 100vh; overflow: hidden; padding: 24px 24px 0; }
|
||||
.page-body { display: flex; flex: 1; overflow: hidden; min-height: 0; margin: 0 0 16px; }
|
||||
|
||||
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-shrink: 0; }
|
||||
.header-text h1 { font-size: 1.25rem; font-weight: 700; color: #111827; }
|
||||
.header-text p { font-size: 0.82rem; color: #6b7280; margin-top: 2px; }
|
||||
.header-controls { display: flex; align-items: center; gap: 0.5rem; }
|
||||
.btn-logout { background: none; border: 1px solid #d1d5db; border-radius: 6px; padding: 5px 12px; font-size: 0.82rem; color: #6b7280; cursor: pointer; }
|
||||
.btn-logout:hover { background: #f3f4f6; }
|
||||
|
||||
.page-right { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; padding: 0.65rem; gap: 0.5rem; }
|
||||
.content-frame { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; background: white; }
|
||||
.page-main { flex: 1; overflow-y: auto; padding: 16px 24px 24px; min-width: 0; display: flex; flex-direction: column; }
|
||||
|
||||
.filter-sidebar { width: 220px; min-width: 220px; background: #f8f9fa; border-right: 1px solid #dee2e6; display: flex; flex-direction: column; overflow: hidden; transition: width 0.2s ease, min-width 0.2s ease; flex-shrink: 0; }
|
||||
.filter-sidebar.sidebar-collapsed { width: 40px; min-width: 40px; }
|
||||
.filter-sidebar-toggle-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.65rem; border-bottom: 1px solid #dee2e6; background: #eef2f7; flex-shrink: 0; min-height: 36px; }
|
||||
.bar-filters-active { background: #dbeafe !important; border-bottom-color: #93c5fd !important; }
|
||||
.bar-filters-active .filter-sidebar-title { color: #1e40af !important; }
|
||||
.filter-sidebar-title { font-size: var(--font-size-label); font-weight: 700; color: #374151; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.toggle-bar-right { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
|
||||
.sidebar-stat-pill { font-size: var(--font-size-tiny); background: #e0e7ff; border: 1px solid #c7d2fe; color: #3730a3; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
|
||||
.sidebar-toggle-btn { background: none; border: 1px solid #d1d5db; border-radius: 4px; padding: 1px 6px; cursor: pointer; font-size: 0.82rem; color: #6b7280; line-height: 1.4; flex-shrink: 0; margin-left: auto; }
|
||||
.sidebar-toggle-btn:hover { background: #e5e7eb; border-color: #9ca3af; }
|
||||
.filter-sidebar-content { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.75rem 0.65rem; overflow-y: auto; flex: 1; }
|
||||
.filter-section { display: flex; flex-direction: column; gap: 0.3rem; }
|
||||
.filter-section-label { font-size: var(--font-size-tiny); font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.search-input { padding: 0.4rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: var(--font-size-body-sm); width: 100%; background: white; }
|
||||
.search-input:focus { outline: none; border-color: #3b82f6; }
|
||||
.sidebar-clear-all-btn { border: none; background: #fee2e2; color: #dc2626; border-radius: 4px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: var(--font-size-tiny); font-weight: 600; text-align: left; }
|
||||
.sidebar-clear-all-btn:hover { background: #fecaca; }
|
||||
|
||||
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; flex-shrink: 0; }
|
||||
.active-filters-label { font-size: var(--font-size-tiny); font-weight: 600; color: #555; margin-right: 0.25rem; }
|
||||
.filter-tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.6rem; background: white; border: 1px solid #ddd; border-left: 3px solid #6b7280; border-radius: 4px; font-size: var(--font-size-tiny); font-weight: 500; color: #333; }
|
||||
.filter-tag-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6b7280; flex-shrink: 0; }
|
||||
.filter-tag-remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: none; background: #e5e7eb; color: #374151; font-size: 0.7rem; cursor: pointer; }
|
||||
.filter-tag-remove:hover { background: #f44336; color: white; }
|
||||
|
||||
.loading-msg, .empty-msg { padding: 2rem; text-align: center; color: #6b7280; }
|
||||
|
||||
.toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-shrink: 0; }
|
||||
.toolbar-count { font-size: var(--font-size-body-sm); color: #6b7280; }
|
||||
.toolbar-right { display: flex; gap: 0.5rem; }
|
||||
|
||||
.table-card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
||||
.table-container { overflow-x: auto; overflow-y: auto; flex: 1; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead { background: #f9fafb; }
|
||||
th { color: #374151; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; border-bottom: 2px solid #e5e7eb; padding: 0.6rem 0.75rem; text-align: left; }
|
||||
td { border-bottom: 1px solid #f3f4f6; color: #1f2937; padding: 0.55rem 0.75rem; font-size: var(--font-size-label); }
|
||||
tbody tr:hover { background: #eff6ff; }
|
||||
.key-cell code { font-size: 0.82rem; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px; padding: 2px 6px; color: #2563eb; }
|
||||
.muted-cell { color: #9ca3af; white-space: nowrap; }
|
||||
.actions { white-space: nowrap; display: flex; gap: 0.4rem; justify-content: flex-end; }
|
||||
.btn-sm { border: none; border-radius: 5px; padding: 0.3rem 0.65rem; cursor: pointer; font-size: 0.8rem; font-weight: 500; }
|
||||
.btn-edit { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }
|
||||
.btn-edit:hover { background: #e5e7eb; }
|
||||
.status-toggle { padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 0.15s; background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
|
||||
.status-toggle.enabled { background: #dcfce7; color: #166534; border-color: #86efac; }
|
||||
.status-toggle:hover { opacity: 0.8; }
|
||||
|
||||
.panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 999; cursor: pointer; }
|
||||
.panel { position: fixed; top: 0; right: 0; width: 560px; height: 100vh; background: white; z-index: 1000; display: flex; flex-direction: column; box-shadow: -4px 0 20px rgba(0,0,0,0.15); animation: panelIn 0.25s ease; overflow: hidden; }
|
||||
@keyframes panelIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
|
||||
.panel-header { background: linear-gradient(180deg, #081651 0%, #1c49b8 100%); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
|
||||
.panel-header-text { flex: 1; min-width: 0; }
|
||||
.panel-title { color: white; font-size: 1rem; font-weight: 700; }
|
||||
.panel-subtitle { color: rgba(255,255,255,0.65); font-size: 0.78rem; margin-top: 2px; }
|
||||
.panel-close { background: rgba(255,255,255,0.15); border: none; color: white; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.panel-close:hover { background: rgba(255,255,255,0.3); }
|
||||
.panel-body { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
|
||||
.panel-footer { border-top: 1px solid #e5e7eb; padding: 1rem 1.5rem; display: flex; justify-content: flex-end; gap: 0.75rem; flex-shrink: 0; background: #f9fafb; }
|
||||
|
||||
.form-error { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 6px; color: #b91c1c; font-size: var(--font-size-body-sm); padding: 0.6rem 0.75rem; }
|
||||
.form-group { display: flex; flex-direction: column; gap: 0.35rem; }
|
||||
.form-group label { font-size: var(--font-size-label); font-weight: 600; color: #374151; }
|
||||
.form-input { padding: 0.55rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: var(--font-size-body-sm); color: #1f2937; background: white; width: 100%; }
|
||||
.form-input:disabled { background: #f9fafb; color: #6b7280; cursor: not-allowed; }
|
||||
.form-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
|
||||
.form-textarea { padding: 0.55rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-family: 'Courier New', monospace; font-size: 0.78rem; color: #1f2937; resize: vertical; line-height: 1.5; width: 100%; background: white; }
|
||||
.form-textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
|
||||
.form-textarea.json-error-border { border-color: #ef4444; }
|
||||
.json-error-msg { font-size: 0.75rem; color: #dc2626; }
|
||||
.field-hint { font-size: var(--font-size-tiny); color: #9ca3af; margin-top: 2px; }
|
||||
.toggle-label { display: flex; align-items: center; gap: 0.5rem; font-size: var(--font-size-body-sm); color: #374151; cursor: pointer; }
|
||||
.toggle-label input { width: 15px; height: 15px; cursor: pointer; }
|
||||
</style>
|
||||
@@ -31,3 +31,22 @@ export const authApi = axios.create({
|
||||
});
|
||||
|
||||
export default api;
|
||||
|
||||
// ── Guide content API ──────────────────────────────────────
|
||||
export interface NavTab { tab: string; order: number; audience: string; }
|
||||
export interface NavModule { module: string; title: string; tabs: NavTab[]; }
|
||||
export interface NavApp { app: string; modules: NavModule[]; }
|
||||
export interface ModuleTab { tab: string; order: number; audience: string; body: string; }
|
||||
export interface ModuleView { module: string; title: string; tabs: ModuleTab[]; }
|
||||
|
||||
/** apps → modules → tabs (audience-filtered server-side by the caller's role). */
|
||||
export async function fetchNav(): Promise<NavApp[]> {
|
||||
const res = await api.get('/api/v1/guide/nav');
|
||||
return res.data;
|
||||
}
|
||||
|
||||
/** one module with its tabs (markdown bodies). */
|
||||
export async function fetchModule(module: string): Promise<ModuleView> {
|
||||
const res = await api.get(`/api/v1/guide/modules/${encodeURIComponent(module)}`);
|
||||
return res.data;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user