tracker/templates/usecases.html

{{define "content"}}
<div class="uc-page">
{{with .UseCases}}{{if .Selected}}{{with .Selected}}
<a href="/use-cases">← Use cases ทั้งหมด</a>
<header class="uc-heading"><div><p class="uc-eyebrow">{{range .Modules}}{{moduleLabel $.UseCases.ModuleNames .}} · {{end}}{{.Phase}}</p><h1>{{.ID}} {{.Name}}</h1></div><a href="/files/docs/agent/use-cases/README.md" target="_blank" rel="noopener">ดูเอกสารต้นฉบับ ↗</a></header>
<div class="uc-facts"><section><h3>ผู้เกี่ยวข้อง</h3><p>{{range .Actors}}<span class="uc-chip">{{.}}</span> {{end}}</p></section><section><h3>เริ่มเมื่อ</h3><p>{{.Start}}</p></section><section><h3>ผลลัพธ์</h3><p>{{.Outcome}}</p></section></div>
{{with .Review}}<aside class="uc-review-notice"><strong>ข้อสังเกตจากการทบทวน · {{thaiDate .Date}}</strong><p>{{.Note}}</p><p>ข้อเสนอการทบทวน · ดูสถานะยืนยันปัจจุบันที่ Development approval ด้านล่าง</p><a href="/files/docs/agent/16-use-case-review-2026-10-31.md">อ่านผลทบทวนทั้งหมดและคำถามที่ต้องยืนยัน</a></aside>{{end}}
<script type="application/json" id="uc-source-diagram">{{.DraftJSON}}</script>
<section class="uc-editor" id="uc-editor" data-uid="{{.ID}}" data-source-hash="{{.SourceHash}}" aria-label="ตัวแก้ไข workflow diagram">
 <div class="uc-toolbar uc-toolbar-primary"><div><strong>Workflow diagram</strong><span class="uc-draft">Editable draft</span></div><span id="uc-status" role="status" aria-live="polite">Loading…</span><button type="button" id="uc-save" disabled>Save diagram</button></div>
 <div class="uc-toolbar uc-toolbar-tools">
  <div class="uc-tool-group"><span class="uc-tool-label">Shapes</span><label class="uc-sr-only" for="uc-add-type">Shape type</label><select id="uc-add-type"><option value="process">Process</option><option value="decision">Decision</option><option value="start">Start</option><option value="end">End</option></select><button type="button" id="uc-add">+ Add shape</button><button type="button" id="uc-connect" aria-pressed="false">Connect</button></div>
  <div class="uc-tool-group"><span class="uc-tool-label">Edit</span><button type="button" id="uc-undo" disabled>Undo</button><button type="button" id="uc-redo" disabled>Redo</button></div>
  <div class="uc-tool-group"><span class="uc-tool-label">View</span><label class="uc-sr-only" for="uc-zoom">Zoom</label><select id="uc-zoom"><option value="fit" selected>Fit to view</option><option value="0.1">10%</option><option value="0.25">25%</option><option value="0.5">50%</option><option value="0.75">75%</option><option value="1">100%</option><option value="1.25">125%</option><option value="1.5">150%</option></select><button type="button" id="uc-layout-horizontal">Arrange horizontally</button><button type="button" id="uc-fit">Fit to view</button></div>
  <details class="uc-more"><summary>More ⋯</summary><div><button type="button" id="uc-export-png">Export PNG…</button><button type="button" id="uc-export">Export JSON</button><button type="button" id="uc-reload">Reload saved diagram</button><button type="button" id="uc-reset">Reset to source steps</button></div></details>
 </div>
 <p class="uc-help" id="uc-help">ลาก shape ตามกริด 20 หน่วย · เส้นเชื่อมหักมุม 90° · ลากจุดวงกลมด้านขวาเพื่อเชื่อม shape · เลือก shape หรือเส้นเพื่อแก้ไข · เชื่อม shape: เลือกต้นทางแล้วปลายทาง · Ctrl + เลื่อนล้อเมาส์เพื่อซูม · ลากพื้นที่ว่างหรือเลื่อนเพื่อเลื่อนมุมมอง</p>
 <div class="uc-workspace"><div class="uc-canvas" id="uc-canvas" tabindex="0" aria-label="พื้นที่ diagram เลื่อนดูได้"><svg id="uc-svg" xmlns="http://www.w3.org/2000/svg" role="group" aria-label="Workflow diagram"></svg></div>
 <form id="uc-properties" class="uc-properties" onsubmit="return false"><h3>Properties</h3><p id="uc-empty">Select a shape or connection</p><fieldset id="uc-node-fields" hidden><legend>Shape</legend><label>Title<input id="uc-title" maxlength="500"></label><label>Description<textarea id="uc-description" rows="7" maxlength="20000"></textarea></label><label>Type<select id="uc-type"><option value="start">Start</option><option value="end">End</option><option value="process">Process</option><option value="decision">Decision</option></select></label></fieldset><fieldset id="uc-edge-fields" hidden><legend>Connection</legend><label>Label<input id="uc-label" maxlength="2000"></label><label>Source<select id="uc-source"></select></label><label>Target<select id="uc-target"></select></label><label>Start marker<select id="uc-tail"><option value="none">None</option><option value="arrow">Arrow</option><option value="open">Open arrow</option><option value="diamond">Diamond</option></select></label><label>End marker<select id="uc-head"><option value="none">None</option><option value="arrow">Arrow</option><option value="open">Open arrow</option><option value="diamond">Diamond</option></select></label></fieldset><button type="button" id="uc-delete" hidden>Delete selected</button><p class="uc-help">บันทึกส่วนกลางเพื่อให้คนอื่นเห็นการแก้ไข ทุกคนที่เข้า tracker ได้สามารถแก้ไขได้</p></form></div>
 <div class="uc-review-panels">
  <section class="uc-approval uc-review-card" aria-labelledby="uc-approval-heading">
   <header class="uc-review-card-head"><div class="uc-review-card-title"><span class="uc-review-icon" aria-hidden="true">✓</span><div><h3 id="uc-approval-heading">Development approval</h3><p>ยืนยันความถูกต้องก่อนนำไปพัฒนาระบบ</p></div></div><span id="uc-approval-badge" class="uc-approval-badge">Loading…</span></header>
   <div class="uc-review-card-body">
    <p id="uc-approval-status" class="uc-review-notice" role="status">กำลังตรวจสถานะการยืนยัน…</p>
    <dl id="uc-approval-meta" class="uc-approval-meta" hidden><div><dt>Reviewed by</dt><dd id="uc-approved-by">—</dd></div><div><dt>Reviewed at</dt><dd id="uc-approved-at">—</dd></div><div><dt>Approved revision</dt><dd id="uc-approved-revision">—</dd></div></dl>
    <div id="uc-approved-note-box" class="uc-approved-note" hidden><span>Review note</span><p id="uc-approved-note"></p></div>
    <form id="uc-approval-form" class="uc-review-form"><div class="uc-review-fields"><label>Reviewer <span class="uc-required" aria-hidden="true">*</span><input id="uc-reviewer" name="reviewer" required maxlength="200" autocomplete="name" placeholder="ชื่อผู้ตรวจสอบ"></label><label>Review note <span class="uc-field-optional">Optional</span><textarea id="uc-approval-note" maxlength="4000" rows="3" placeholder="สรุปสิ่งที่ตรวจหรือหมายเหตุเพิ่มเติม"></textarea></label></div><label class="uc-approval-confirm"><input id="uc-approval-confirm" type="checkbox" required><span>ตรวจเนื้อหาและ diagram แล้ว ยืนยันให้ใช้พัฒนาระบบได้</span></label><footer class="uc-review-form-footer"><p>การแก้ไขหรือ rollback จะต้องยืนยันใหม่</p><button type="submit" id="uc-approve" disabled>Approve use case</button></footer></form>
    <details class="uc-approval-audit"><summary>Approval history <span id="uc-approval-history-count" class="uc-review-count">0</span></summary><ol id="uc-approval-history" class="uc-audit-list"></ol><p id="uc-approval-history-empty" class="uc-review-empty-note">ยังไม่มีการยืนยัน Use case นี้</p></details>
   </div>
  </section>
  <details class="uc-history uc-review-card" id="uc-history" open>
   <summary class="uc-history-heading"><span class="uc-review-card-title"><span class="uc-review-icon" aria-hidden="true">↶</span><span><strong>Revision history</strong><span class="uc-review-subtitle">ประวัติการบันทึกและย้อนกลับ</span></span></span><span id="uc-history-count" class="uc-review-count">—</span><span class="uc-history-chevron" aria-hidden="true">⌄</span></summary>
   <div class="uc-review-card-body"><div class="uc-history-tools"><span class="uc-current-revision">Current <b id="uc-current-revision">—</b></span><button type="button" id="uc-refresh-history">↻ Refresh</button></div>
    <div id="uc-history-empty" class="uc-review-empty" hidden><span aria-hidden="true">↶</span><strong>No revisions yet</strong><p>กด Save diagram เพื่อเก็บเวอร์ชันแรก<br>แล้วเลือก Restore เพื่อย้อนกลับได้ภายหลัง</p></div>
    <div id="uc-history-table" class="uc-history-table"><table><thead><tr><th scope="col">Revision</th><th scope="col">Saved at</th><th scope="col">Details</th><th scope="col" class="uc-history-actions-heading">Actions</th></tr></thead><tbody id="uc-history-rows"></tbody></table></div>
    <p id="uc-history-status" class="uc-history-status" role="status"></p><p class="uc-history-footnote">Restore จะสร้าง revision ใหม่ โดยเก็บประวัติเดิมไว้ครบ</p>
   </div>
  </details>
 </div>
 <dialog id="uc-export-dialog" class="uc-export-dialog" aria-labelledby="uc-export-heading"><form id="uc-export-form"><header class="uc-export-header"><span class="uc-review-icon" aria-hidden="true">↗</span><div><h3 id="uc-export-heading">Export PNG</h3><p>ส่งออก diagram ทั้งหมด พร้อมข้อความและเส้นเชื่อม</p></div><button type="button" id="uc-export-close" aria-label="Close export dialog">×</button></header><fieldset class="uc-export-options"><legend>Background</legend><label><input type="radio" name="background" value="white" checked><span class="uc-export-swatch uc-export-white" aria-hidden="true"></span><span><strong>White</strong><small>พื้นหลังสีขาว</small></span></label><label><input type="radio" name="background" value="transparent"><span class="uc-export-swatch uc-export-transparent" aria-hidden="true"></span><span><strong>Transparent</strong><small>พื้นหลังโปร่งใส</small></span></label></fieldset><p id="uc-export-status" role="status" aria-live="polite">PNG · Full diagram · ไม่รวมกริดและจุดลาก</p><footer><button type="button" id="uc-export-cancel">Cancel</button><button type="submit" id="uc-export-download">Download PNG</button></footer></form></dialog>
 <noscript>ต้องเปิด JavaScript เพื่อแก้ไข diagram อ่านขั้นตอนต้นฉบับได้ด้านล่าง</noscript>
</section>
<div class="uc-source"><details open><summary>ขั้นตอนจากต้นฉบับ ({{len .Flow}} ขั้นตอน)</summary><ol>{{range .Flow}}<li><strong>{{index . 0}}</strong><p>{{index . 1}}</p></li>{{end}}</ol></details><section><h3>Use cases ที่สัมพันธ์กัน</h3>{{range .Relations}}<p>{{index . 0}} <a href="/use-cases/{{index . 1}}">{{index . 1}}</a></p>{{else}}<p>ไม่มีความสัมพันธ์ที่ระบุไว้</p>{{end}}<h3>หน้าจออ้างอิง</h3><p>{{range .Screens}}<code>{{.}}</code> {{else}}—{{end}}</p></section></div>
{{end}}{{else}}
<header class="uc-heading"><div><p class="uc-eyebrow">ฐานข้อมูลกระบวนการ · TNSU EMS</p><h1>Use cases</h1><p>ค้นหาขั้นตอน ผู้เกี่ยวข้อง และออกแบบ workflow diagram ร่วมกัน</p></div><div><strong>{{.Total}}</strong> Use cases · {{len .Modules}} modules</div></header>
<nav class="uc-tabs" aria-label="กลุ่ม Use cases">{{range .Tabs}}<a href="{{.Href}}" {{if eq $.UseCases.Channel .Key}}aria-current="page"{{end}}>{{.Label}} <span>{{.Count}}</span></a>{{end}}</nav>
<p class="uc-help">การจัดกลุ่มเบื้องต้นจากผู้เกี่ยวข้องและชื่อระบบในต้นฉบับ · หนึ่ง Use case อยู่ได้หลายแท็บ · ไม่ใช่การยืนยันขอบเขตหน้าจอหรือ API</p>
<form method="get" class="uc-filters"><input type="hidden" name="channel" value="{{.Channel}}"><label>ค้นหา<input name="q" value="{{.Query}}" placeholder="รหัส ชื่อ หรือข้อความในขั้นตอน"></label><label>Module<select name="module"><option value="">ทุก module</option>{{range $code,$m:=.Modules}}<option value="{{$code}}" {{if eq $.UseCases.Module $code}}selected{{end}}>{{$m.Name}} ({{len $m.IDs}})</option>{{end}}</select></label><label>ผู้เกี่ยวข้อง<select name="actor"><option value="">ทุกคน</option>{{range .Actors}}<option {{if eq $.UseCases.Actor .}}selected{{end}}>{{.}}</option>{{end}}</select></label><button type="submit">ค้นหา</button><a href="/use-cases">ล้างตัวกรอง</a></form>
<div class="uc-table-actions"><p>พบ {{len .Items}} รายการ · {{len .Groups}} modules</p><div><button type="button" data-uc-expand-all>Expand all</button><button type="button" data-uc-collapse-all>Collapse all</button></div></div>
<div class="uc-table-wrap"><table class="uc-table" id="uc-module-table"><thead><tr><th scope="col">รหัส</th><th scope="col">Use case</th><th scope="col">กลุ่มงาน</th><th scope="col">Module</th><th scope="col">ผู้เกี่ยวข้อง</th><th scope="col">ขั้นตอน</th><th scope="col">Approval</th><th scope="col">รายละเอียด</th></tr></thead>
{{range .Groups}}<tbody data-uc-module="{{.Code}}"><tr class="uc-module-header"><th colspan="8"><button type="button" data-uc-toggle="{{.Code}}" aria-expanded="true"><span data-uc-chevron aria-hidden="true">▾</span><span class="uc-module-name">{{.Name}}</span><span class="uc-eyebrow">{{.Group}} · {{len .Items}} Use cases</span></button></th></tr>
{{range .Items}}<tr class="uc-row"><td><a class="uc-code" href="/use-cases/{{.ID}}">{{.ID}}</a></td><td><a class="uc-name" href="/use-cases/{{.ID}}">{{.Name}}</a><p class="uc-eyebrow">{{.Phase}}</p></td><td><div class="uc-channel-tags" title="{{range .ChannelReasons}}{{.}}; {{end}}">{{range .Channels}}<span class="uc-chip">{{if eq . "frontend"}}Frontend{{else if eq . "backoffice"}}Backoffice{{else}}Integration{{end}}</span>{{else}}<span class="uc-chip">รอจัดกลุ่ม</span>{{end}}</div></td><td>{{range .Modules}}<a class="uc-module-link" href="/use-cases?module={{.}}"><span>{{moduleLabel $.UseCases.ModuleNames .}}</span></a>{{end}}</td><td>{{range .Actors}}<span class="uc-actor">{{.}}</span>{{end}}</td><td class="uc-count">{{len .Flow}}</td><td><span class="uc-approval-badge" data-approval-state="{{.ApprovalState}}">{{if .Approved}}Approved{{else if eq .ApprovalState "stale"}}Needs reapproval{{else if eq .ApprovalState "unavailable"}}Unavailable{{else}}Not approved{{end}}</span></td><td><a class="uc-open" href="/use-cases/{{.ID}}">Open workflow →</a></td></tr>{{end}}</tbody>{{else}}<tbody><tr><td colspan="8">ไม่พบ Use case ที่ตรงกับตัวกรอง</td></tr></tbody>{{end}}</table></div>
{{end}}{{end}}</div>
{{end}}