Guides: write a procedure in ShopDB, not beside it
The knowledgebase plugin is a link registry - a description, a URL and some keywords pointing at a document held somewhere else. That leaves the documents themselves as HTML files on a share: no search, no history, no way to know whether the copy pinned to a noticeboard is current, and no way for a technician to tick off where they are. A guide is stored as an ordered list of typed blocks rather than a blob of HTML, because three of the four things this feature exists for depend on it. A tickable step needs a stable id to be remembered; dark mode needs semantic markup rather than pasted colours; and print needs to know where a step begins so it does not split one across a page. Free HTML gives none of that and lets pasted styling fight the theme. Inline text is a restricted Markdown subset - bold, italic, inline code, links, line breaks - escaped BEFORE formatting, so nothing an author pasted can reach the DOM as markup. No fonts, sizes or colours: emphasis is semantic and the theme decides how it looks. That is what makes a guide written next year match one written today, and dark mode work without an author thinking about it. DRAFTS AND VERSIONS. The guide row is the working copy; every save that changes something writes an immutable revision; and a separate pointer says which revision READERS get. Without that pointer, editing a live procedure changes it under a technician who is halfway through following it. Publishing promotes an existing revision rather than snapshotting, so a publish with unsaved edits cannot ship a version nobody reviewed. Restoring writes a new revision with old content, so the record of what people were told in between survives. Saves dedup on a content hash covering title, summary, tags and blocks, so an autosave that changed nothing writes no version - otherwise the history fills with identical entries and hides the three edits that mattered. Progress lives in the browser, not the database: shopfloor PCs share a login, so per-user ticks would show one technician's progress to the next person on that bay, which reads as "already done". Keyed by guide and version, because step 4 of version 3 is not step 4 of version 2. Five permissions, and the split between edit and publish is the point: a technician can write a procedure up while somebody else decides it is fit for the floor. create-without-edit works too - an author may edit their own guide until it is published, after which other people are following it.
This commit is contained in:
cproudlock
240
plugins/guides/frontend/components/GuideBlocks.vue
Normal file
240
plugins/guides/frontend/components/GuideBlocks.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="gb-blocks" :class="{ 'gb-interactive': interactive }">
|
||||
<template v-for="(block, index) in blocks" :key="block.id || index">
|
||||
|
||||
<h2 v-if="block.type === 'heading'" :id="anchorFor(block)" class="gb-heading"
|
||||
v-html="inline(block.text)"></h2>
|
||||
|
||||
<p v-else-if="block.type === 'paragraph'" class="gb-para"
|
||||
v-html="inline(block.text)"></p>
|
||||
|
||||
<div v-else-if="block.type === 'step'" class="gb-step">
|
||||
<span class="gb-stepnum">Step {{ stepNumber(index) }}</span>
|
||||
<h3 v-if="block.title" v-html="inline(block.title)"></h3>
|
||||
<div v-if="block.text" v-html="inline(block.text)"></div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
The reason this feature exists. Interactive ONLY when viewing: in the
|
||||
editor a tick would be an edit, and an author clicking around their own
|
||||
draft would quietly change what the next reader sees as "done".
|
||||
-->
|
||||
<ul v-else-if="block.type === 'checklist'" class="gb-checklist">
|
||||
<li v-for="item in itemsOf(block)" :key="item.id" class="gb-check">
|
||||
<label>
|
||||
<input type="checkbox"
|
||||
:checked="isTicked(item.id)"
|
||||
:disabled="!interactive"
|
||||
@change="toggle(item.id, $event.target.checked)">
|
||||
<span :class="{ 'gb-done': interactive && isTicked(item.id) }"
|
||||
v-html="inline(item.text)"></span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul v-else-if="block.type === 'bullets'" class="gb-list">
|
||||
<li v-for="item in itemsOf(block)" :key="item.id" v-html="inline(item.text)"></li>
|
||||
</ul>
|
||||
|
||||
<ol v-else-if="block.type === 'numbers'" class="gb-list">
|
||||
<li v-for="item in itemsOf(block)" :key="item.id" v-html="inline(item.text)"></li>
|
||||
</ol>
|
||||
|
||||
<div v-else-if="block.type === 'callout'"
|
||||
class="gb-callout" :class="'gb-' + (block.variant || 'info')">
|
||||
<strong v-if="block.title">{{ block.title }}</strong>
|
||||
<div v-html="inline(block.text)"></div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="block.type === 'code'" class="gb-code">
|
||||
<div class="gb-codehead">
|
||||
<span class="gb-lang">{{ block.language || 'text' }}</span>
|
||||
<span v-if="block.caption" class="gb-caption">{{ block.caption }}</span>
|
||||
<!-- Copies the code ONLY: no caption, no prompt. A prompt glued to a
|
||||
copied command is how somebody ends up pasting "PS C:\>" into a
|
||||
terminal. -->
|
||||
<button type="button" class="gb-copy" @click="copy(block)">
|
||||
{{ copied === block.id ? 'Copied' : 'Copy' }}
|
||||
</button>
|
||||
</div>
|
||||
<pre><code>{{ block.text }}</code></pre>
|
||||
</div>
|
||||
|
||||
<figure v-else-if="block.type === 'image'" class="gb-figure">
|
||||
<img :src="block.url" :alt="block.alt || ''" loading="lazy">
|
||||
<figcaption v-if="block.caption">{{ block.caption }}</figcaption>
|
||||
</figure>
|
||||
|
||||
<div v-else-if="block.type === 'table'" class="gb-tablewrap">
|
||||
<table class="gb-table">
|
||||
<thead v-if="block.header && block.header.length">
|
||||
<tr><th v-for="(cell, c) in block.header" :key="c" v-html="inline(cell)"></th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, r) in (block.rows || [])" :key="r">
|
||||
<td v-for="(cell, c) in row" :key="c" v-html="inline(cell)"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- An unknown type renders as nothing rather than as an error. A guide
|
||||
written against a newer version must stay readable on an older one. -->
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { renderInline } from '../utils/inline.js'
|
||||
|
||||
const props = defineProps({
|
||||
blocks: { type: Array, default: () => [] },
|
||||
// Live checkboxes belong to the viewer only.
|
||||
interactive: { type: Boolean, default: false },
|
||||
ticked: { type: Object, default: () => ({}) },
|
||||
})
|
||||
const emit = defineEmits(['toggle'])
|
||||
|
||||
const copied = ref('')
|
||||
|
||||
function inline (text) {
|
||||
return renderInline(text)
|
||||
}
|
||||
|
||||
// Items may be plain strings (bullets) or objects with ids (checklists). One
|
||||
// shape here so the template does not branch on it.
|
||||
function itemsOf (block) {
|
||||
return (block.items || []).map((item, index) =>
|
||||
typeof item === 'string'
|
||||
? { id: (block.id || 'b') + '-' + index, text: item }
|
||||
: item)
|
||||
}
|
||||
|
||||
function isTicked (itemid) {
|
||||
return Boolean(props.ticked[itemid])
|
||||
}
|
||||
|
||||
function toggle (itemid, checked) {
|
||||
if (!props.interactive) return
|
||||
emit('toggle', itemid, checked)
|
||||
}
|
||||
|
||||
// Steps number themselves by position among steps, so inserting a paragraph
|
||||
// between two of them does not renumber anything by hand.
|
||||
const stepIndex = computed(() => {
|
||||
const map = {}
|
||||
let n = 0
|
||||
props.blocks.forEach((block, index) => {
|
||||
if (block.type === 'step') { n += 1; map[index] = n }
|
||||
})
|
||||
return map
|
||||
})
|
||||
function stepNumber (index) {
|
||||
return stepIndex.value[index] || 1
|
||||
}
|
||||
|
||||
function anchorFor (block) {
|
||||
return 'g-' + (block.id || '')
|
||||
}
|
||||
|
||||
async function copy (block) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(block.text || '')
|
||||
copied.value = block.id
|
||||
setTimeout(() => { copied.value = '' }, 2000)
|
||||
} catch (err) {
|
||||
// Clipboard needs a secure context. Select the text instead of failing
|
||||
// silently, so the tech can copy it by hand.
|
||||
const node = document.querySelector('.gb-code pre')
|
||||
if (node && window.getSelection) {
|
||||
const range = document.createRange()
|
||||
range.selectNodeContents(node)
|
||||
const selection = window.getSelection()
|
||||
selection.removeAllRanges()
|
||||
selection.addRange(range)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Every colour is a theme token. Nothing here is a literal, which is what makes
|
||||
dark mode work with no dark-mode code. */
|
||||
.gb-blocks { line-height: 1.65; }
|
||||
.gb-heading { margin: 1.6rem 0 0.6rem; font-size: 1.35rem; color: var(--text); }
|
||||
.gb-para { margin: 0 0 0.9rem; color: var(--text); }
|
||||
|
||||
.gb-step {
|
||||
border-left: 3px solid var(--primary);
|
||||
padding: 0.6rem 0 0.6rem 1rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
.gb-stepnum {
|
||||
display: inline-block; font-size: 0.72rem; text-transform: uppercase;
|
||||
letter-spacing: 0.06em; color: var(--primary); font-weight: 600;
|
||||
}
|
||||
.gb-step h3 { margin: 0.2rem 0 0.4rem; font-size: 1.05rem; }
|
||||
|
||||
.gb-checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
|
||||
.gb-check { margin: 0.35rem 0; }
|
||||
.gb-check label { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; }
|
||||
.gb-interactive .gb-check label:hover { color: var(--primary); }
|
||||
.gb-check input { margin-top: 0.28rem; flex: none; width: 1rem; height: 1rem; }
|
||||
.gb-done { opacity: 0.55; text-decoration: line-through; }
|
||||
|
||||
.gb-list { margin: 0 0 1rem 1.2rem; }
|
||||
.gb-list li { margin: 0.25rem 0; }
|
||||
|
||||
.gb-callout {
|
||||
border-left: 4px solid var(--info, var(--primary));
|
||||
background: var(--surface-2, rgba(127, 127, 127, 0.08));
|
||||
padding: 0.75rem 1rem; margin: 0 0 1rem; border-radius: 4px;
|
||||
}
|
||||
.gb-callout strong { display: block; margin-bottom: 0.25rem; }
|
||||
.gb-warning { border-left-color: var(--warning, #d9822b); }
|
||||
.gb-success { border-left-color: var(--success, #2e9e5b); }
|
||||
|
||||
.gb-code { margin: 0 0 1rem; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
|
||||
.gb-codehead {
|
||||
display: flex; align-items: center; gap: 0.6rem;
|
||||
padding: 0.3rem 0.6rem; background: var(--surface-2, rgba(127,127,127,0.08));
|
||||
border-bottom: 1px solid var(--border); font-size: 0.75rem;
|
||||
}
|
||||
.gb-lang { text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); }
|
||||
.gb-caption { color: var(--text-light); }
|
||||
.gb-copy {
|
||||
margin-left: auto; font-size: 0.72rem; padding: 0.15rem 0.5rem;
|
||||
border: 1px solid var(--border); background: transparent;
|
||||
color: var(--text-light); border-radius: 3px; cursor: pointer;
|
||||
}
|
||||
.gb-copy:hover { border-color: var(--primary); color: var(--primary); }
|
||||
.gb-code pre {
|
||||
margin: 0; padding: 0.7rem 0.8rem; overflow-x: auto;
|
||||
font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.84rem;
|
||||
/* WRAP rather than clip: these guides are full of long UNC paths, and a
|
||||
line that scrolls out of sight is a command somebody copies half of. */
|
||||
white-space: pre-wrap; word-break: break-word;
|
||||
}
|
||||
|
||||
.gb-figure { margin: 0 0 1.2rem; }
|
||||
.gb-figure img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 4px; }
|
||||
.gb-figure figcaption { font-size: 0.8rem; color: var(--text-light); margin-top: 0.35rem; }
|
||||
|
||||
.gb-tablewrap { overflow-x: auto; margin: 0 0 1.2rem; }
|
||||
.gb-table { border-collapse: collapse; width: 100%; }
|
||||
.gb-table th, .gb-table td {
|
||||
border: 1px solid var(--border); padding: 0.45rem 0.6rem; text-align: left;
|
||||
vertical-align: top; font-size: 0.9rem;
|
||||
}
|
||||
.gb-table th { background: var(--surface-2, rgba(127,127,127,0.08)); }
|
||||
|
||||
@media print {
|
||||
/* Paper has no hover, no clipboard and no theme. */
|
||||
.gb-copy { display: none; }
|
||||
.gb-step, .gb-callout, .gb-code, .gb-figure { break-inside: avoid; }
|
||||
.gb-check input { /* keep the box, printed empty, so it can be ticked by hand */ }
|
||||
.gb-done { opacity: 1; text-decoration: none; }
|
||||
.gb-code pre { white-space: pre-wrap; }
|
||||
}
|
||||
</style>
|
||||
42
plugins/guides/frontend/routes.js
Normal file
42
plugins/guides/frontend/routes.js
Normal file
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* Guides plugin routes.
|
||||
*
|
||||
* Three views, and the split between the last two is deliberate: reading a
|
||||
* guide and editing one are different jobs with different rights, and the
|
||||
* checkboxes are live in exactly one of them.
|
||||
*
|
||||
* meta.plugin = 'guides' so the ADR-009 router guard redirects when the backend
|
||||
* plugin is disabled. Every route requires auth because every guides API route
|
||||
* is behind JWT plus a guides.* permission.
|
||||
*/
|
||||
export default [
|
||||
{
|
||||
path: 'guides',
|
||||
name: 'guides',
|
||||
component: () => import('./views/GuidesList.vue'),
|
||||
meta: { requiresAuth: true, plugin: 'guides' }
|
||||
},
|
||||
{
|
||||
path: 'guides/new',
|
||||
name: 'guide-new',
|
||||
component: () => import('./views/GuideEditor.vue'),
|
||||
meta: { requiresAuth: true, plugin: 'guides' }
|
||||
},
|
||||
{
|
||||
path: 'guides/:slug',
|
||||
name: 'guide-view',
|
||||
component: () => import('./views/GuideView.vue'),
|
||||
meta: { requiresAuth: true, plugin: 'guides' }
|
||||
},
|
||||
{
|
||||
path: 'guides/:guideid/edit',
|
||||
name: 'guide-edit',
|
||||
component: () => import('./views/GuideEditor.vue'),
|
||||
meta: { requiresAuth: true, plugin: 'guides' }
|
||||
}
|
||||
]
|
||||
|
||||
// No full-screen routes: every view renders inside AppLayout. Declared so
|
||||
// routes.gen.js can read `.toplevel` off the module without Rollup warning
|
||||
// about a missing export.
|
||||
export const toplevel = []
|
||||
82
plugins/guides/frontend/utils/inline.js
Normal file
82
plugins/guides/frontend/utils/inline.js
Normal file
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* Inline text rendering for guide blocks.
|
||||
*
|
||||
* A guide stores its text as a RESTRICTED Markdown subset - bold, italic,
|
||||
* inline code, links, line breaks - and nothing else. This turns that into
|
||||
* HTML.
|
||||
*
|
||||
* ESCAPE FIRST, THEN FORMAT. The order is the whole security model: every
|
||||
* angle bracket and ampersand becomes an entity before any pattern is applied,
|
||||
* so no markup an author pasted can survive into the DOM. There is no path here
|
||||
* that emits a tag the code below did not write itself.
|
||||
*
|
||||
* The restriction is not only about safety. Pasted rich text carries fonts and
|
||||
* hardcoded colours, which then fight the theme - black text on a dark
|
||||
* background, and nobody can say why. Emphasis is semantic; the stylesheet
|
||||
* decides how it looks. That is what makes dark mode work without an author
|
||||
* thinking about it, and why a guide written next year still matches one
|
||||
* written today.
|
||||
*/
|
||||
|
||||
function escapeHtml (text) {
|
||||
return String(text == null ? '' : text)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''')
|
||||
}
|
||||
|
||||
// Only http(s) and mailto. A javascript: or data: URL in a link is the one way
|
||||
// an author could otherwise smuggle script past the escaping above.
|
||||
function safeHref (url) {
|
||||
const trimmed = String(url || '').trim()
|
||||
if (/^(https?:|mailto:)/i.test(trimmed)) return trimmed
|
||||
if (trimmed.startsWith('/')) return trimmed // in-app link
|
||||
return null
|
||||
}
|
||||
|
||||
export function renderInline (text) {
|
||||
let html = escapeHtml(text)
|
||||
|
||||
// Inline code first, so formatting characters inside `code` stay literal -
|
||||
// a path like C:\**temp** should not turn half of itself bold.
|
||||
const codeSpans = []
|
||||
html = html.replace(/`([^`]+)`/g, (match, code) => {
|
||||
codeSpans.push(code)
|
||||
return '\u0000CODE' + (codeSpans.length - 1) + '\u0000'
|
||||
})
|
||||
|
||||
// [label](url). The URL pattern allows ONE level of balanced parentheses so
|
||||
// real links survive - Wikipedia-style /wiki/Foo_(bar) is the common case,
|
||||
// and a naive [^)]+ silently truncates it into a broken link.
|
||||
html = html.replace(/\[([^\]]+)\]\(((?:[^()\s]|\([^()\s]*\))+)\)/g, (match, label, url) => {
|
||||
const href = safeHref(url)
|
||||
if (!href) return label
|
||||
const external = /^https?:/i.test(href)
|
||||
return '<a href="' + escapeHtml(href) + '"' +
|
||||
(external ? ' target="_blank" rel="noopener noreferrer"' : '') +
|
||||
'>' + label + '</a>'
|
||||
})
|
||||
|
||||
// **bold** then *italic*, longest marker first so **x** is not read as
|
||||
// *(*x*)*.
|
||||
html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
|
||||
html = html.replace(/(^|[^*])\*([^*]+)\*(?!\*)/g, '$1<em>$2</em>')
|
||||
|
||||
html = html.replace(/\n/g, '<br>')
|
||||
|
||||
html = html.replace(/\u0000CODE(\d+)\u0000/g, (match, index) =>
|
||||
'<code>' + codeSpans[Number(index)] + '</code>')
|
||||
|
||||
return html
|
||||
}
|
||||
|
||||
/** Plain text, for titles and anywhere markup would be noise. */
|
||||
export function stripInline (text) {
|
||||
return String(text == null ? '' : text)
|
||||
.replace(/`([^`]+)`/g, '$1')
|
||||
.replace(/\[([^\]]+)\]\([^)\s]+\)/g, '$1')
|
||||
.replace(/\*\*([^*]+)\*\*/g, '$1')
|
||||
.replace(/\*([^*]+)\*/g, '$1')
|
||||
}
|
||||
427
plugins/guides/frontend/views/GuideEditor.vue
Normal file
427
plugins/guides/frontend/views/GuideEditor.vue
Normal file
@@ -0,0 +1,427 @@
|
||||
<template>
|
||||
<div class="ge" @paste="onPaste" @dragover.prevent @drop.prevent="onDrop">
|
||||
<div class="page-header">
|
||||
<h2>{{ isNew ? 'New guide' : 'Edit guide' }}</h2>
|
||||
<div class="ge-actions">
|
||||
<button type="button" class="ge-btn" @click="save()" :disabled="saving">
|
||||
{{ saving ? 'Saving...' : 'Save' }}
|
||||
</button>
|
||||
<button v-if="!isNew && canpublish" type="button" class="ge-btn ge-primary"
|
||||
@click="publish" :disabled="saving">
|
||||
{{ guide.ispublished ? 'Publish changes' : 'Publish' }}
|
||||
</button>
|
||||
<button v-if="!isNew && canpublish && guide.ispublished" type="button"
|
||||
class="ge-btn" @click="unpublish">Withdraw</button>
|
||||
<router-link v-if="!isNew && guide.slug" class="ge-btn"
|
||||
:to="{ name: 'guide-view', params: { slug: guide.slug } }">
|
||||
View
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="message" class="settings-success">{{ message }}</div>
|
||||
<div v-if="error" class="error-message">{{ error }}</div>
|
||||
|
||||
<div class="ge-fields">
|
||||
<label class="ge-field">
|
||||
<span>Title</span>
|
||||
<input v-model="guide.title" type="text" placeholder="What is this guide for?">
|
||||
</label>
|
||||
<label class="ge-field">
|
||||
<span>Summary</span>
|
||||
<input v-model="guide.summary" type="text"
|
||||
placeholder="One line, shown in the list and in search results">
|
||||
</label>
|
||||
<label class="ge-field">
|
||||
<span>Tags</span>
|
||||
<input v-model="guide.tags" type="text"
|
||||
placeholder="Comma separated, e.g. pxe, share, backups">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ge-blocks">
|
||||
<div v-for="(block, index) in blocks" :key="block.id" class="ge-block">
|
||||
<div class="ge-blockbar">
|
||||
<span class="ge-type">{{ block.type }}</span>
|
||||
<select v-if="block.type === 'callout'" v-model="block.variant" class="ge-mini">
|
||||
<option value="info">info</option>
|
||||
<option value="warning">warning</option>
|
||||
<option value="success">success</option>
|
||||
</select>
|
||||
<input v-if="block.type === 'code'" v-model="block.language"
|
||||
class="ge-mini" placeholder="language">
|
||||
<input v-if="block.type === 'code'" v-model="block.caption"
|
||||
class="ge-mini" placeholder="caption (optional)">
|
||||
<div class="ge-blockbtns">
|
||||
<button type="button" @click="move(index, -1)" :disabled="index === 0">Up</button>
|
||||
<button type="button" @click="move(index, 1)"
|
||||
:disabled="index === blocks.length - 1">Down</button>
|
||||
<button type="button" class="ge-del" @click="remove(index)">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input v-if="block.type === 'step'" v-model="block.title" class="ge-steptitle"
|
||||
placeholder="Step title">
|
||||
|
||||
<textarea v-if="hasText(block)" v-model="block.text" class="ge-text"
|
||||
:rows="block.type === 'code' ? 6 : 3"
|
||||
:placeholder="placeholderFor(block)"></textarea>
|
||||
|
||||
<div v-if="hasItems(block)" class="ge-items">
|
||||
<div v-for="(item, i) in block.items" :key="item.id" class="ge-item">
|
||||
<input v-model="item.text" :placeholder="'Item ' + (i + 1)">
|
||||
<button type="button" @click="removeItem(block, i)">x</button>
|
||||
</div>
|
||||
<button type="button" class="ge-additem" @click="addItem(block)">Add item</button>
|
||||
</div>
|
||||
|
||||
<div v-if="block.type === 'image'" class="ge-image">
|
||||
<img v-if="block.url" :src="block.url" alt="">
|
||||
<input v-model="block.caption" placeholder="Caption (optional)">
|
||||
<input v-model="block.alt" placeholder="Alt text, for anyone who cannot see it">
|
||||
</div>
|
||||
|
||||
<div v-if="block.type === 'table'" class="ge-tableedit">
|
||||
<textarea v-model="block.raw" rows="4" @input="parseTable(block)"
|
||||
placeholder="One row per line, cells separated by | Header | Header Cell | Cell"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ge-add">
|
||||
<span>Add:</span>
|
||||
<button v-for="type in blocktypes" :key="type" type="button"
|
||||
@click="add(type)">{{ type }}</button>
|
||||
<label class="ge-upload">
|
||||
image file
|
||||
<input type="file" accept="image/*" hidden @change="onFilePick">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p class="ge-hint">
|
||||
Paste or drag an image straight onto this page to add it. Text supports
|
||||
**bold**, *italic*, `code` and [links](https://example.com).
|
||||
</p>
|
||||
|
||||
<div v-if="!isNew && revisions.length" class="ge-revisions">
|
||||
<h3>Version history</h3>
|
||||
<div v-for="rev in revisions" :key="rev.guiderevisionid" class="ge-rev">
|
||||
<span class="ge-revnum">v{{ rev.revision }}</span>
|
||||
<span class="ge-revwhen">{{ formatDate(rev.createdat) }}</span>
|
||||
<span v-if="rev.ispublished" class="ge-revpub">published</span>
|
||||
<span class="ge-revnote">{{ rev.note }}</span>
|
||||
<button type="button" @click="restore(rev)">Restore</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import api from '@/api'
|
||||
import { apiError } from '@/utils/apiError'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const blocktypes = ['heading', 'paragraph', 'step', 'checklist', 'bullets',
|
||||
'numbers', 'callout', 'code', 'table']
|
||||
|
||||
const guide = reactive({ guideid: null, title: '', summary: '', tags: '',
|
||||
slug: '', ispublished: false })
|
||||
const blocks = ref([])
|
||||
const revisions = ref([])
|
||||
const saving = ref(false)
|
||||
const message = ref('')
|
||||
const error = ref('')
|
||||
|
||||
const isNew = computed(() => !guide.guideid)
|
||||
const canpublish = computed(() => auth.hasPermission?.('guides.publish') ?? false)
|
||||
|
||||
// Stable ids are what make a tick rememberable between visits, so every block
|
||||
// and every item gets one at creation and keeps it for life.
|
||||
function newid () {
|
||||
if (window.crypto?.randomUUID) return window.crypto.randomUUID().slice(0, 8)
|
||||
return Math.random().toString(36).slice(2, 10)
|
||||
}
|
||||
|
||||
function hasText (block) {
|
||||
return ['heading', 'paragraph', 'step', 'callout', 'code'].includes(block.type)
|
||||
}
|
||||
function hasItems (block) {
|
||||
return ['checklist', 'bullets', 'numbers'].includes(block.type)
|
||||
}
|
||||
function placeholderFor (block) {
|
||||
if (block.type === 'code') return 'The command, exactly as it should be run'
|
||||
if (block.type === 'callout') return 'The thing somebody needs to know before they carry on'
|
||||
return 'Text'
|
||||
}
|
||||
|
||||
function add (type) {
|
||||
const block = { id: newid(), type }
|
||||
if (hasItems(block)) block.items = [{ id: newid(), text: '' }]
|
||||
if (type === 'callout') block.variant = 'info'
|
||||
if (type === 'table') { block.raw = ''; block.header = []; block.rows = [] }
|
||||
blocks.value.push(block)
|
||||
}
|
||||
|
||||
function remove (index) { blocks.value.splice(index, 1) }
|
||||
|
||||
function move (index, delta) {
|
||||
const target = index + delta
|
||||
if (target < 0 || target >= blocks.value.length) return
|
||||
const [block] = blocks.value.splice(index, 1)
|
||||
blocks.value.splice(target, 0, block)
|
||||
}
|
||||
|
||||
function addItem (block) { block.items.push({ id: newid(), text: '' }) }
|
||||
function removeItem (block, index) { block.items.splice(index, 1) }
|
||||
|
||||
// Tables are edited as pipe-separated lines: quick to type, quick to paste out
|
||||
// of a spreadsheet, and no grid widget to maintain.
|
||||
function parseTable (block) {
|
||||
const lines = (block.raw || '').split('\n').filter(l => l.trim())
|
||||
const rows = lines.map(line => line.split('|').map(cell => cell.trim()))
|
||||
block.header = rows.length ? rows[0] : []
|
||||
block.rows = rows.slice(1)
|
||||
}
|
||||
|
||||
async function uploadImage (file) {
|
||||
const form = new FormData()
|
||||
form.append('file', file)
|
||||
if (guide.guideid) form.append('guideid', guide.guideid)
|
||||
const response = await api.post('/guides/images', form,
|
||||
{ headers: { 'Content-Type': 'multipart/form-data' } })
|
||||
return response.data?.data || response.data
|
||||
}
|
||||
|
||||
async function insertImage (file) {
|
||||
error.value = ''
|
||||
try {
|
||||
const image = await uploadImage(file)
|
||||
blocks.value.push({ id: newid(), type: 'image', url: image.url,
|
||||
caption: '', alt: '' })
|
||||
} catch (err) {
|
||||
error.value = apiError(err, 'Could not upload that image')
|
||||
}
|
||||
}
|
||||
|
||||
// Paste and drop are the two ways people actually add a screenshot. Both end up
|
||||
// in the same place, and neither requires finding a file on disk first.
|
||||
function onPaste (event) {
|
||||
const items = Array.from(event.clipboardData?.items || [])
|
||||
const imageItem = items.find(item => item.type.startsWith('image/'))
|
||||
if (!imageItem) return
|
||||
event.preventDefault()
|
||||
const file = imageItem.getAsFile()
|
||||
if (file) insertImage(file)
|
||||
}
|
||||
|
||||
function onDrop (event) {
|
||||
const file = Array.from(event.dataTransfer?.files || [])
|
||||
.find(f => f.type.startsWith('image/'))
|
||||
if (file) insertImage(file)
|
||||
}
|
||||
|
||||
function onFilePick (event) {
|
||||
const file = event.target.files?.[0]
|
||||
if (file) insertImage(file)
|
||||
event.target.value = ''
|
||||
}
|
||||
|
||||
function payload () {
|
||||
return {
|
||||
title: guide.title,
|
||||
summary: guide.summary || '',
|
||||
tags: guide.tags || '',
|
||||
blocks: blocks.value,
|
||||
}
|
||||
}
|
||||
|
||||
async function save (quiet) {
|
||||
saving.value = true
|
||||
error.value = ''
|
||||
message.value = ''
|
||||
try {
|
||||
if (isNew.value) {
|
||||
const response = await api.post('/guides', payload())
|
||||
const created = response.data?.data || response.data
|
||||
Object.assign(guide, { guideid: created.guideid, slug: created.slug,
|
||||
ispublished: false })
|
||||
router.replace({ name: 'guide-edit', params: { guideid: created.guideid } })
|
||||
message.value = 'Guide created'
|
||||
} else {
|
||||
const response = await api.put('/guides/' + guide.guideid, payload())
|
||||
const saved = response.data?.data || response.data
|
||||
guide.slug = saved.slug
|
||||
// 'No changes to save' is a real outcome, not a failure: an unchanged
|
||||
// save must not manufacture a version.
|
||||
message.value = response.data?.message || 'Saved'
|
||||
}
|
||||
await loadRevisions()
|
||||
} catch (err) {
|
||||
error.value = apiError(err, 'Could not save this guide')
|
||||
} finally {
|
||||
saving.value = false
|
||||
if (!quiet) setTimeout(() => { message.value = '' }, 2500)
|
||||
}
|
||||
}
|
||||
|
||||
async function publish () {
|
||||
await save(true)
|
||||
try {
|
||||
const response = await api.post('/guides/' + guide.guideid + '/publish')
|
||||
guide.ispublished = true
|
||||
message.value = response.data?.message || 'Published'
|
||||
await loadRevisions()
|
||||
} catch (err) {
|
||||
error.value = apiError(err, 'Could not publish this guide')
|
||||
}
|
||||
}
|
||||
|
||||
async function unpublish () {
|
||||
try {
|
||||
await api.post('/guides/' + guide.guideid + '/unpublish')
|
||||
guide.ispublished = false
|
||||
message.value = 'Withdrawn from readers'
|
||||
await loadRevisions()
|
||||
} catch (err) {
|
||||
error.value = apiError(err, 'Could not withdraw this guide')
|
||||
}
|
||||
}
|
||||
|
||||
async function restore (rev) {
|
||||
try {
|
||||
const response = await api.post(
|
||||
'/guides/' + guide.guideid + '/restore/' + rev.guiderevisionid)
|
||||
const restored = response.data?.data || response.data
|
||||
blocks.value = restored.blocks || []
|
||||
Object.assign(guide, { title: restored.title, summary: restored.summary || '',
|
||||
tags: (restored.tags || []).join(', ') })
|
||||
message.value = response.data?.message || 'Restored'
|
||||
await loadRevisions()
|
||||
} catch (err) {
|
||||
error.value = apiError(err, 'Could not restore that version')
|
||||
}
|
||||
}
|
||||
|
||||
async function loadRevisions () {
|
||||
if (!guide.guideid) return
|
||||
try {
|
||||
const response = await api.get('/guides/' + guide.guideid + '/revisions')
|
||||
revisions.value = response.data?.data || response.data || []
|
||||
} catch (err) {
|
||||
revisions.value = []
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate (value) {
|
||||
return value ? new Date(value).toLocaleString() : ''
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const guideid = route.params.guideid
|
||||
if (!guideid) return
|
||||
try {
|
||||
const response = await api.get('/guides/' + guideid + '/working')
|
||||
const data = response.data?.data || response.data
|
||||
Object.assign(guide, {
|
||||
guideid: data.guideid, title: data.title, summary: data.summary || '',
|
||||
tags: (data.tags || []).join(', '), slug: data.slug,
|
||||
ispublished: data.ispublished,
|
||||
})
|
||||
blocks.value = (data.blocks || []).map(block => {
|
||||
if (block.type === 'table' && !block.raw) {
|
||||
const rows = [block.header || [], ...(block.rows || [])]
|
||||
block.raw = rows.filter(r => r.length).map(r => r.join(' | ')).join('\n')
|
||||
}
|
||||
return block
|
||||
})
|
||||
await loadRevisions()
|
||||
} catch (err) {
|
||||
error.value = apiError(err, 'Could not load this guide')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; }
|
||||
.ge-actions { display: flex; gap: 0.4rem; }
|
||||
.ge-btn {
|
||||
font-size: 0.8rem; padding: 0.3rem 0.7rem; border: 1px solid var(--primary);
|
||||
color: var(--primary); background: transparent; border-radius: 4px;
|
||||
cursor: pointer; text-decoration: none;
|
||||
}
|
||||
.ge-primary { background: var(--primary); color: #fff; }
|
||||
.ge-btn:disabled { opacity: 0.5; cursor: default; }
|
||||
|
||||
.ge-fields { display: grid; gap: 0.6rem; margin: 0.8rem 0 1.2rem; max-width: 45rem; }
|
||||
.ge-field { display: grid; gap: 0.2rem; }
|
||||
.ge-field span { font-size: 0.78rem; color: var(--text-light); }
|
||||
.ge-field input {
|
||||
padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 4px;
|
||||
background: var(--surface, transparent); color: var(--text);
|
||||
}
|
||||
|
||||
.ge-block {
|
||||
border: 1px solid var(--border); border-radius: 5px; padding: 0.6rem;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.ge-blockbar { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
|
||||
.ge-type {
|
||||
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
|
||||
color: var(--text-light);
|
||||
}
|
||||
.ge-mini {
|
||||
font-size: 0.75rem; padding: 0.15rem 0.35rem; border: 1px solid var(--border);
|
||||
border-radius: 3px; background: var(--surface, transparent); color: var(--text);
|
||||
max-width: 10rem;
|
||||
}
|
||||
.ge-blockbtns { margin-left: auto; display: flex; gap: 0.25rem; }
|
||||
.ge-blockbtns button {
|
||||
font-size: 0.72rem; padding: 0.12rem 0.4rem; border: 1px solid var(--border);
|
||||
background: transparent; color: var(--text-light); border-radius: 3px; cursor: pointer;
|
||||
}
|
||||
.ge-del:hover { border-color: var(--danger, #c0392b); color: var(--danger, #c0392b); }
|
||||
|
||||
.ge-text, .ge-steptitle, .ge-tableedit textarea {
|
||||
width: 100%; padding: 0.45rem 0.55rem; border: 1px solid var(--border);
|
||||
border-radius: 4px; background: var(--surface, transparent); color: var(--text);
|
||||
font-family: inherit; font-size: 0.9rem;
|
||||
}
|
||||
.ge-steptitle { margin-bottom: 0.4rem; }
|
||||
.ge-items { display: grid; gap: 0.3rem; }
|
||||
.ge-item { display: flex; gap: 0.3rem; }
|
||||
.ge-item input {
|
||||
flex: 1; padding: 0.35rem 0.5rem; border: 1px solid var(--border);
|
||||
border-radius: 4px; background: var(--surface, transparent); color: var(--text);
|
||||
}
|
||||
.ge-additem, .ge-add button, .ge-upload {
|
||||
font-size: 0.75rem; padding: 0.2rem 0.55rem; border: 1px solid var(--border);
|
||||
background: transparent; color: var(--text-light); border-radius: 3px;
|
||||
cursor: pointer; justify-self: start;
|
||||
}
|
||||
.ge-image img { max-width: 20rem; display: block; margin-bottom: 0.4rem;
|
||||
border: 1px solid var(--border); border-radius: 4px; }
|
||||
.ge-image input { width: 100%; margin-bottom: 0.3rem; padding: 0.3rem 0.5rem;
|
||||
border: 1px solid var(--border); border-radius: 4px;
|
||||
background: var(--surface, transparent); color: var(--text); }
|
||||
|
||||
.ge-add { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin: 1rem 0 0.4rem; }
|
||||
.ge-add > span { font-size: 0.78rem; color: var(--text-light); }
|
||||
.ge-hint { font-size: 0.78rem; color: var(--text-light); }
|
||||
|
||||
.ge-revisions { margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
|
||||
.ge-rev { display: flex; gap: 0.6rem; align-items: center; font-size: 0.8rem;
|
||||
padding: 0.25rem 0; }
|
||||
.ge-revnum { font-weight: 600; }
|
||||
.ge-revwhen, .ge-revnote { color: var(--text-light); }
|
||||
.ge-revpub { font-size: 0.68rem; padding: 0.05rem 0.35rem; border-radius: 3px;
|
||||
border: 1px solid var(--primary); color: var(--primary); }
|
||||
.ge-rev button { margin-left: auto; font-size: 0.72rem; padding: 0.12rem 0.45rem;
|
||||
border: 1px solid var(--border); background: transparent;
|
||||
color: var(--text-light); border-radius: 3px; cursor: pointer; }
|
||||
</style>
|
||||
220
plugins/guides/frontend/views/GuideView.vue
Normal file
220
plugins/guides/frontend/views/GuideView.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="gv">
|
||||
<div v-if="loading" class="gv-loading">Loading...</div>
|
||||
<div v-else-if="error" class="error-message">{{ error }}</div>
|
||||
|
||||
<template v-else-if="guide">
|
||||
<div class="gv-head">
|
||||
<div class="gv-headmain">
|
||||
<h1>{{ guide.title }}</h1>
|
||||
<p v-if="guide.summary" class="gv-summary">{{ guide.summary }}</p>
|
||||
<div class="gv-meta">
|
||||
<span v-if="guide.isdraftpreview" class="gv-badge gv-draft">Draft preview</span>
|
||||
<span v-else class="gv-badge">Version {{ guide.revision }}</span>
|
||||
<span v-for="tag in guide.tags" :key="tag" class="gv-tag"
|
||||
@click="$router.push({ name: 'guides', query: { tag } })">{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gv-actions">
|
||||
<button type="button" class="gv-btn" @click="print">Print</button>
|
||||
<router-link v-if="guide.canedit" class="gv-btn"
|
||||
:to="{ name: 'guide-edit', params: { guideid: guide.guideid } }">
|
||||
Edit
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- An editor needs to know there is newer work than what readers see,
|
||||
without leaving the page to find out. -->
|
||||
<div v-if="guide.hasunpublishedchanges && guide.canedit" class="gv-notice">
|
||||
There are unpublished changes. Readers are seeing version {{ guide.revision }}.
|
||||
</div>
|
||||
|
||||
<div v-if="totalChecks" class="gv-progress">
|
||||
<div class="gv-progressbar">
|
||||
<div class="gv-progressfill" :style="{ width: progressPercent + '%' }"></div>
|
||||
</div>
|
||||
<span class="gv-progresstext">{{ tickedCount }} of {{ totalChecks }} done</span>
|
||||
<button v-if="tickedCount" type="button" class="gv-reset" @click="resetProgress">
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<GuideBlocks :blocks="guide.blocks" :interactive="true"
|
||||
:ticked="ticked" @toggle="toggle" />
|
||||
|
||||
<div class="gv-foot">
|
||||
<span>Version {{ guide.revision }}</span>
|
||||
<span v-if="guide.publishedat">Published {{ formatDate(guide.publishedat) }}</span>
|
||||
<span class="gv-printedon">Printed {{ today }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import api from '@/api'
|
||||
import { apiError } from '@/utils/apiError'
|
||||
import GuideBlocks from '../components/GuideBlocks.vue'
|
||||
|
||||
const route = useRoute()
|
||||
const guide = ref(null)
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
const ticked = ref({})
|
||||
|
||||
const today = new Date().toLocaleDateString()
|
||||
|
||||
/**
|
||||
* Progress lives in the BROWSER, not the database.
|
||||
*
|
||||
* Shopfloor PCs share a login. Storing progress per user would mean one
|
||||
* technician's ticks appearing for the next person on that bay, which is worse
|
||||
* than useless on a procedure - it reads as "already done". Per browser, each
|
||||
* station keeps its own place, and the Reset button is right there.
|
||||
*
|
||||
* Keyed by guide id and version: a new version invalidates old ticks, because
|
||||
* step 4 of version 3 is not step 4 of version 2.
|
||||
*/
|
||||
function storageKey () {
|
||||
return guide.value
|
||||
? 'guides.progress.' + guide.value.guideid + '.v' + guide.value.revision
|
||||
: null
|
||||
}
|
||||
|
||||
function loadProgress () {
|
||||
const key = storageKey()
|
||||
if (!key) return
|
||||
try {
|
||||
ticked.value = JSON.parse(window.localStorage.getItem(key) || '{}')
|
||||
} catch (err) {
|
||||
ticked.value = {}
|
||||
}
|
||||
}
|
||||
|
||||
function saveProgress () {
|
||||
const key = storageKey()
|
||||
if (!key) return
|
||||
try {
|
||||
window.localStorage.setItem(key, JSON.stringify(ticked.value))
|
||||
} catch (err) {
|
||||
// Private window, or storage disabled. The checkboxes still work for this
|
||||
// visit; they just will not be remembered. Not worth an error message.
|
||||
}
|
||||
}
|
||||
|
||||
function toggle (itemid, checked) {
|
||||
if (checked) ticked.value = { ...ticked.value, [itemid]: true }
|
||||
else {
|
||||
const next = { ...ticked.value }
|
||||
delete next[itemid]
|
||||
ticked.value = next
|
||||
}
|
||||
saveProgress()
|
||||
}
|
||||
|
||||
function resetProgress () {
|
||||
ticked.value = {}
|
||||
saveProgress()
|
||||
}
|
||||
|
||||
const totalChecks = computed(() => {
|
||||
let total = 0
|
||||
for (const block of guide.value?.blocks || []) {
|
||||
if (block.type === 'checklist') total += (block.items || []).length
|
||||
}
|
||||
return total
|
||||
})
|
||||
const tickedCount = computed(() => Object.keys(ticked.value).length)
|
||||
const progressPercent = computed(() =>
|
||||
totalChecks.value ? Math.round((tickedCount.value / totalChecks.value) * 100) : 0)
|
||||
|
||||
function formatDate (value) {
|
||||
return value ? new Date(value).toLocaleDateString() : ''
|
||||
}
|
||||
|
||||
function print () {
|
||||
window.print()
|
||||
}
|
||||
|
||||
async function load () {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const response = await api.get('/guides/' + route.params.slug)
|
||||
guide.value = response.data?.data || response.data
|
||||
loadProgress()
|
||||
} catch (err) {
|
||||
error.value = apiError(err, 'Could not load this guide')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
watch(() => route.params.slug, load)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gv { max-width: 60rem; }
|
||||
.gv-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; }
|
||||
.gv-headmain { flex: 1; }
|
||||
.gv-head h1 { margin: 0 0 0.3rem; }
|
||||
.gv-summary { color: var(--text-light); margin: 0 0 0.5rem; }
|
||||
.gv-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
|
||||
.gv-badge {
|
||||
font-size: 0.72rem; padding: 0.1rem 0.45rem; border-radius: 3px;
|
||||
border: 1px solid var(--border); color: var(--text-light);
|
||||
}
|
||||
.gv-draft { border-color: var(--warning, #d9822b); color: var(--warning, #d9822b); }
|
||||
.gv-tag {
|
||||
font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 999px;
|
||||
background: var(--surface-2, rgba(127,127,127,0.1)); cursor: pointer;
|
||||
}
|
||||
.gv-tag:hover { color: var(--primary); }
|
||||
.gv-actions { display: flex; gap: 0.4rem; }
|
||||
.gv-btn {
|
||||
font-size: 0.8rem; padding: 0.3rem 0.7rem; border: 1px solid var(--primary);
|
||||
color: var(--primary); background: transparent; border-radius: 4px;
|
||||
cursor: pointer; text-decoration: none;
|
||||
}
|
||||
.gv-btn:hover { background: var(--primary); color: #fff; }
|
||||
|
||||
.gv-notice {
|
||||
border-left: 4px solid var(--warning, #d9822b);
|
||||
background: var(--surface-2, rgba(127,127,127,0.08));
|
||||
padding: 0.5rem 0.8rem; margin: 0.5rem 0 1rem; font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.gv-progress { display: flex; align-items: center; gap: 0.7rem; margin: 1rem 0 1.4rem; }
|
||||
.gv-progressbar {
|
||||
flex: 1; height: 6px; border-radius: 3px; overflow: hidden;
|
||||
background: var(--surface-2, rgba(127,127,127,0.15));
|
||||
}
|
||||
.gv-progressfill { height: 100%; background: var(--primary); transition: width 0.2s; }
|
||||
.gv-progresstext { font-size: 0.78rem; color: var(--text-light); white-space: nowrap; }
|
||||
.gv-reset {
|
||||
font-size: 0.72rem; background: none; border: none; color: var(--text-light);
|
||||
cursor: pointer; text-decoration: underline;
|
||||
}
|
||||
|
||||
.gv-foot {
|
||||
margin-top: 2rem; padding-top: 0.6rem; border-top: 1px solid var(--border);
|
||||
display: flex; gap: 1rem; font-size: 0.75rem; color: var(--text-light);
|
||||
}
|
||||
.gv-printedon { display: none; }
|
||||
|
||||
@media print {
|
||||
/* A printed guide is a worksheet: no controls, everything visible, and the
|
||||
footer says which version it was so a stale printout on a noticeboard can
|
||||
be spotted. */
|
||||
.gv-actions, .gv-progress, .gv-notice, .gv-reset { display: none !important; }
|
||||
.gv-printedon { display: inline; }
|
||||
.gv { max-width: none; }
|
||||
.gv-head h1 { font-size: 1.6rem; }
|
||||
.gv-foot { border-top: 1px solid #999; }
|
||||
}
|
||||
</style>
|
||||
163
plugins/guides/frontend/views/GuidesList.vue
Normal file
163
plugins/guides/frontend/views/GuidesList.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="gl">
|
||||
<div class="page-header">
|
||||
<h2>Guides</h2>
|
||||
<router-link v-if="cancreate" class="gl-new" :to="{ name: 'guide-new' }">
|
||||
New guide
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="gl-filters">
|
||||
<input v-model="search" type="search" class="gl-search"
|
||||
placeholder="Search titles, summaries, tags and content..."
|
||||
@input="debouncedLoad">
|
||||
<div v-if="tags.length" class="gl-tags">
|
||||
<button type="button" class="gl-tag" :class="{ 'gl-tagon': !activeTag }"
|
||||
@click="setTag('')">All</button>
|
||||
<button v-for="tag in tags" :key="tag.tag" type="button"
|
||||
class="gl-tag" :class="{ 'gl-tagon': activeTag === tag.tag }"
|
||||
@click="setTag(tag.tag)">
|
||||
{{ tag.tag }} <span class="gl-count">{{ tag.count }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="gl-loading">Loading...</div>
|
||||
<div v-else-if="error" class="error-message">{{ error }}</div>
|
||||
<div v-else-if="!guides.length" class="gl-empty">
|
||||
<p v-if="search || activeTag">Nothing matches that.</p>
|
||||
<p v-else>No guides yet.</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="gl-grid">
|
||||
<router-link v-for="guide in guides" :key="guide.guideid" class="gl-card"
|
||||
:to="{ name: 'guide-view', params: { slug: guide.slug } }">
|
||||
<div class="gl-cardhead">
|
||||
<h3>{{ guide.title }}</h3>
|
||||
<!-- Drafts are visible here only to people who can edit them, so the
|
||||
badge is a working state rather than a warning. -->
|
||||
<span v-if="!guide.ispublished" class="gl-draft">Draft</span>
|
||||
</div>
|
||||
<p v-if="guide.summary" class="gl-summary">{{ guide.summary }}</p>
|
||||
<div class="gl-cardfoot">
|
||||
<span v-for="tag in guide.tags" :key="tag" class="gl-minitag">{{ tag }}</span>
|
||||
<span v-if="guide.checklistitems" class="gl-checks">
|
||||
{{ guide.checklistitems }} steps to tick
|
||||
</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import api from '@/api'
|
||||
import { apiError } from '@/utils/apiError'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const guides = ref([])
|
||||
const tags = ref([])
|
||||
const search = ref('')
|
||||
const activeTag = ref('')
|
||||
const loading = ref(true)
|
||||
const error = ref('')
|
||||
|
||||
// computed, not a one-off read: permissions may not be loaded yet at setup.
|
||||
const cancreate = computed(() => auth.hasPermission?.('guides.create') ?? false)
|
||||
|
||||
let timer = null
|
||||
function debouncedLoad () {
|
||||
clearTimeout(timer)
|
||||
timer = setTimeout(load, 250)
|
||||
}
|
||||
|
||||
function setTag (tag) {
|
||||
activeTag.value = tag
|
||||
router.replace({ query: tag ? { tag } : {} })
|
||||
load()
|
||||
}
|
||||
|
||||
async function load () {
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const params = {}
|
||||
if (search.value.trim()) params.q = search.value.trim()
|
||||
if (activeTag.value) params.tag = activeTag.value
|
||||
const response = await api.get('/guides', { params })
|
||||
guides.value = response.data?.data || response.data || []
|
||||
} catch (err) {
|
||||
error.value = apiError(err, 'Could not load guides')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadTags () {
|
||||
try {
|
||||
const response = await api.get('/guides/tags')
|
||||
tags.value = response.data?.data || response.data || []
|
||||
} catch (err) {
|
||||
tags.value = []
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
activeTag.value = route.query.tag || ''
|
||||
load()
|
||||
loadTags()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-header { display: flex; align-items: center; justify-content: space-between; }
|
||||
.gl-new {
|
||||
font-size: 0.82rem; padding: 0.35rem 0.8rem; border-radius: 4px;
|
||||
background: var(--primary); color: #fff; text-decoration: none;
|
||||
}
|
||||
.gl-filters { margin: 0.8rem 0 1.2rem; }
|
||||
.gl-search {
|
||||
width: 100%; max-width: 34rem; padding: 0.45rem 0.6rem;
|
||||
border: 1px solid var(--border); border-radius: 4px;
|
||||
background: var(--surface, transparent); color: var(--text);
|
||||
}
|
||||
.gl-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
|
||||
.gl-tag {
|
||||
font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px;
|
||||
border: 1px solid var(--border); background: transparent;
|
||||
color: var(--text-light); cursor: pointer;
|
||||
}
|
||||
.gl-tagon { border-color: var(--primary); color: var(--primary); }
|
||||
.gl-count { opacity: 0.6; }
|
||||
|
||||
.gl-grid {
|
||||
display: grid; gap: 0.8rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
|
||||
}
|
||||
.gl-card {
|
||||
display: block; padding: 0.9rem 1rem; border: 1px solid var(--border);
|
||||
border-radius: 6px; text-decoration: none; color: inherit;
|
||||
background: var(--surface, transparent);
|
||||
}
|
||||
.gl-card:hover { border-color: var(--primary); }
|
||||
.gl-cardhead { display: flex; align-items: baseline; gap: 0.5rem; }
|
||||
.gl-cardhead h3 { margin: 0; font-size: 1rem; flex: 1; }
|
||||
.gl-draft {
|
||||
font-size: 0.68rem; padding: 0.05rem 0.4rem; border-radius: 3px;
|
||||
border: 1px solid var(--warning, #d9822b); color: var(--warning, #d9822b);
|
||||
}
|
||||
.gl-summary { margin: 0.4rem 0 0.6rem; font-size: 0.85rem; color: var(--text-light); }
|
||||
.gl-cardfoot { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
|
||||
.gl-minitag {
|
||||
font-size: 0.68rem; padding: 0.05rem 0.4rem; border-radius: 999px;
|
||||
background: var(--surface-2, rgba(127,127,127,0.1)); color: var(--text-light);
|
||||
}
|
||||
.gl-checks { font-size: 0.7rem; color: var(--text-light); margin-left: auto; }
|
||||
.gl-empty, .gl-loading { color: var(--text-light); padding: 1.5rem 0; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user