Ohjeet-moduuli: Confluence-tyylinen tietopankki asiakaspalvelijoille
Uusi moduuli "Ohjeet" jossa ylläpitäjä voi kirjoittaa ohjeita asiakaspalvelijoille miten asioita tehdään. Ominaisuudet: - Korttipohjainen listanäkymä (grid) hakutoiminnolla ja kategoriasuodatuksella - Markdown-editori toolbarilla (B, I, H2, H3, listat, linkit, koodi, lainaukset) - Esikatselu-toggle muokkausnäkymässä - Artikkelien lukunäkymä renderoitulla Markdownilla - Kategorioiden hallinta (lisää/poista) - Tagit ja kiinnitys (pinned) -toiminto - Oikeushallinta: kaikki lukevat, admin luo/muokkaa/poistaa - Moduuli näkyy/piiloutuu yrityskohtaisista asetuksista - Muutokset kirjautuvat muutoslokiin Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
122
index.html
122
index.html
@@ -81,6 +81,7 @@
|
||||
<button class="tab active" data-tab="customers">Asiakkaat</button>
|
||||
<button class="tab" data-tab="leads">Liidit</button>
|
||||
<button class="tab" data-tab="tekniikka">Tekniikka</button>
|
||||
<button class="tab" data-tab="ohjeet">Ohjeet</button>
|
||||
<button class="tab" data-tab="archive">Arkisto</button>
|
||||
<button class="tab" data-tab="changelog">Muutosloki</button>
|
||||
<button class="tab" data-tab="settings" id="tab-settings" style="display:none">API</button>
|
||||
@@ -325,6 +326,107 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Ohjeet -->
|
||||
<div class="tab-content" id="tab-content-ohjeet">
|
||||
<div class="main-container">
|
||||
|
||||
<!-- Listanäkymä -->
|
||||
<div id="guides-list-view">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;gap:0.75rem;flex-wrap:wrap;">
|
||||
<div class="search-bar" style="flex:1;max-width:400px;">
|
||||
<input type="text" id="guide-search-input" placeholder="Hae ohjeista...">
|
||||
</div>
|
||||
<div style="display:flex;gap:0.5rem;align-items:center;">
|
||||
<select id="guide-category-filter" style="padding:8px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;">
|
||||
<option value="">Kaikki kategoriat</option>
|
||||
</select>
|
||||
<button class="btn-primary" id="btn-add-guide" style="display:none;">+ Uusi ohje</button>
|
||||
<button class="btn-secondary" id="btn-manage-guide-cats" style="display:none;" title="Hallinnoi kategorioita">⚙ Kategoriat</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="guides-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;"></div>
|
||||
<div id="no-guides" class="empty-state" style="display:none;">
|
||||
<p>Ei ohjeita vielä.</p>
|
||||
<p class="empty-hint">Ylläpitäjä voi lisätä ohjeita "+ Uusi ohje" -napista.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lukunäkymä -->
|
||||
<div id="guide-read-view" style="display:none;">
|
||||
<div style="margin-bottom:1rem;">
|
||||
<button class="btn-secondary" id="btn-guide-back">← Takaisin</button>
|
||||
</div>
|
||||
<div class="table-card" style="padding:2rem 2.5rem;">
|
||||
<div style="margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #f0f2f5;">
|
||||
<h1 id="guide-read-title" style="font-size:1.6rem;color:var(--primary-color);margin-bottom:0.5rem;"></h1>
|
||||
<div id="guide-read-meta" style="font-size:0.82rem;color:#888;display:flex;gap:1rem;flex-wrap:wrap;"></div>
|
||||
</div>
|
||||
<div id="guide-read-content" class="guide-content" style="line-height:1.7;font-size:0.95rem;"></div>
|
||||
<div id="guide-read-tags" style="margin-top:1.5rem;padding-top:1rem;border-top:1px solid #f0f2f5;"></div>
|
||||
<div id="guide-read-actions" style="margin-top:1rem;display:none;">
|
||||
<button class="btn-secondary" id="btn-edit-guide">✎ Muokkaa</button>
|
||||
<button class="btn-link" style="color:#dc2626;margin-left:0.5rem;" id="btn-delete-guide">🗑 Poista</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Muokkausnäkymä -->
|
||||
<div id="guide-edit-view" style="display:none;">
|
||||
<div style="margin-bottom:1rem;">
|
||||
<button class="btn-secondary" id="btn-guide-edit-cancel">← Peruuta</button>
|
||||
</div>
|
||||
<div class="table-card" style="padding:1.5rem 2rem;">
|
||||
<h2 id="guide-edit-title" style="color:var(--primary-color);margin-bottom:1rem;">Uusi ohje</h2>
|
||||
<form id="guide-form">
|
||||
<input type="hidden" id="guide-form-id">
|
||||
<div class="form-group" style="margin-bottom:1rem;">
|
||||
<label for="guide-form-title">Otsikko *</label>
|
||||
<input type="text" id="guide-form-title" required placeholder="Ohjeen otsikko">
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
|
||||
<div class="form-group">
|
||||
<label for="guide-form-category">Kategoria</label>
|
||||
<select id="guide-form-category">
|
||||
<option value="">Ei kategoriaa</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="guide-form-tags">Tagit (pilkulla erotettuna)</label>
|
||||
<input type="text" id="guide-form-tags" placeholder="vpn, asennus, ohje">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom:0.5rem;">
|
||||
<label>Sisältö (Markdown)</label>
|
||||
<div id="guide-editor-toolbar" style="display:flex;gap:0.25rem;margin-bottom:0.5rem;flex-wrap:wrap;">
|
||||
<button type="button" class="guide-tb-btn" data-md="bold" title="Lihavointi"><strong>B</strong></button>
|
||||
<button type="button" class="guide-tb-btn" data-md="italic" title="Kursiivi"><em>I</em></button>
|
||||
<button type="button" class="guide-tb-btn" data-md="h2" title="Otsikko">H2</button>
|
||||
<button type="button" class="guide-tb-btn" data-md="h3" title="Alaotsikko">H3</button>
|
||||
<button type="button" class="guide-tb-btn" data-md="ul" title="Lista">• Lista</button>
|
||||
<button type="button" class="guide-tb-btn" data-md="ol" title="Numeroitu lista">1. Lista</button>
|
||||
<button type="button" class="guide-tb-btn" data-md="link" title="Linkki">🔗</button>
|
||||
<button type="button" class="guide-tb-btn" data-md="code" title="Koodi"></></button>
|
||||
<button type="button" class="guide-tb-btn" data-md="quote" title="Lainaus">❝</button>
|
||||
<span style="flex:1;"></span>
|
||||
<button type="button" class="guide-tb-btn" id="btn-guide-preview-toggle">Esikatselu</button>
|
||||
</div>
|
||||
<textarea id="guide-form-content" rows="20" style="font-family:'SF Mono',Monaco,Consolas,monospace;font-size:0.88rem;line-height:1.6;resize:vertical;min-height:300px;" placeholder="Kirjoita Markdown-muodossa..."></textarea>
|
||||
<div id="guide-preview-pane" class="guide-content" style="display:none;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;min-height:300px;background:#fafbfc;"></div>
|
||||
</div>
|
||||
<label style="display:flex;align-items:center;gap:0.5rem;margin:0.75rem 0;font-size:0.9rem;cursor:pointer;">
|
||||
<input type="checkbox" id="guide-form-pinned"> Kiinnitetty (näkyy aina listauksen alussa)
|
||||
</label>
|
||||
<div style="padding:1rem 0 0 0;border-top:1px solid #eee;display:flex;gap:0.5rem;">
|
||||
<button type="submit" class="btn-primary">Tallenna</button>
|
||||
<button type="button" class="btn-secondary" id="guide-form-cancel">Peruuta</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab: Arkisto -->
|
||||
<div class="tab-content" id="tab-content-archive">
|
||||
<div class="main-container">
|
||||
@@ -779,6 +881,9 @@
|
||||
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
|
||||
<input type="checkbox" data-module="changelog" checked> Muutosloki
|
||||
</label>
|
||||
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
|
||||
<input type="checkbox" data-module="ohjeet"> Ohjeet
|
||||
</label>
|
||||
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
|
||||
<input type="checkbox" data-module="settings" checked> Asetukset / API
|
||||
</label>
|
||||
@@ -1316,6 +1421,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ohjeet: Kategorianhallinta-modal -->
|
||||
<div id="guide-cat-modal" class="modal" style="display:none">
|
||||
<div class="modal-content" style="max-width:500px;">
|
||||
<div class="modal-header">
|
||||
<h2>Ohjekategoriat</h2>
|
||||
<button class="modal-close" id="guide-cat-modal-close">×</button>
|
||||
</div>
|
||||
<div style="padding:1.5rem;">
|
||||
<div id="guide-cat-list" style="margin-bottom:1rem;"></div>
|
||||
<div style="display:flex;gap:0.5rem;">
|
||||
<input type="text" id="guide-cat-new-name" placeholder="Uusi kategoria..." style="flex:1;padding:8px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.9rem;">
|
||||
<button class="btn-primary" id="btn-guide-cat-add">Lisää</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user