96 lines
6.0 KiB
HTML
96 lines
6.0 KiB
HTML
{{ define "forms_pattern.html" }}
|
|
{{ template "demo_doc_start" . }}
|
|
{{ template "demo_masthead" (dict "label" "Pattern Demo" "title" .Title "lead" "Tabbed/step-based forms with datalist suggestions, inline validation, and explicit review/confirm workflow." "back_url" "/" "back_text" "← Back to catalog") }}
|
|
|
|
<section class="panel" id="forms-mode">
|
|
<div class="panel-head"><h2>Mode Switch (Tabs)</h2></div>
|
|
<div class="segmented">
|
|
<a class="segment {{ if eq .Mode "register" }}active{{ end }}" href="{{ index .ModeURLs "register" }}">Manual register</a>
|
|
<a class="segment {{ if eq .Mode "import" }}active{{ end }}" href="{{ index .ModeURLs "import" }}">Import-assisted</a>
|
|
</div>
|
|
<p class="meta" style="margin-top:10px;">Tabs preserve entered values while changing workflow mode.</p>
|
|
</section>
|
|
|
|
<section class="panel" id="forms-steps">
|
|
<div class="panel-head"><h2>Step Flow</h2></div>
|
|
<div class="segmented">
|
|
<a class="segment {{ if eq .Step "edit" }}active{{ end }}" href="{{ index .StepURLs "edit" }}">Edit</a>
|
|
<a class="segment {{ if eq .Step "review" }}active{{ end }}" href="{{ index .StepURLs "review" }}">Review</a>
|
|
<a class="segment {{ if eq .Step "confirm" }}active{{ end }}" href="{{ index .StepURLs "confirm" }}">Done</a>
|
|
</div>
|
|
{{ if .Message }}<div class="notice" style="margin-top:12px;">{{ .Message }}</div>{{ end }}
|
|
</section>
|
|
|
|
<section class="panel" id="forms-contract">
|
|
<div class="panel-head"><h2>Form Contract Demo</h2></div>
|
|
<form class="forms-grid" method="get" action="/patterns/forms#forms-contract">
|
|
<input type="hidden" name="mode" value="{{ .Mode }}">
|
|
<input type="hidden" name="step" value="review">
|
|
|
|
<label>Server serial {{ if index .FieldErrors "server_serial" }}<span class="field-error">{{ index .FieldErrors "server_serial" }}</span>{{ end }}
|
|
<input class="{{ if index .FieldErrors "server_serial" }}input-error{{ end }}" name="server_serial" value="{{ .ServerSerial }}" list="forms-server-list" placeholder="SRV-001">
|
|
<datalist id="forms-server-list">{{ range .ServerOptions }}<option value="{{ . }}"></option>{{ end }}</datalist>
|
|
</label>
|
|
|
|
<label>Location / slot {{ if index .FieldErrors "location" }}<span class="field-error">{{ index .FieldErrors "location" }}</span>{{ end }}
|
|
<input class="{{ if index .FieldErrors "location" }}input-error{{ end }}" name="location" value="{{ .Location }}" list="forms-location-list" placeholder="AOC#1">
|
|
<datalist id="forms-location-list">{{ range .LocationOptions }}<option value="{{ . }}"></option>{{ end }}</datalist>
|
|
</label>
|
|
|
|
<label>Component serial {{ if index .FieldErrors "component_serial" }}<span class="field-error">{{ index .FieldErrors "component_serial" }}</span>{{ end }}
|
|
<input class="{{ if index .FieldErrors "component_serial" }}input-error{{ end }}" name="component_serial" value="{{ .ComponentSerial }}" list="forms-component-list" placeholder="NIC-AX210-001">
|
|
<datalist id="forms-component-list">{{ range .ComponentOptions }}<option value="{{ . }}"></option>{{ end }}</datalist>
|
|
</label>
|
|
|
|
<label>Event date {{ if index .FieldErrors "event_date" }}<span class="field-error">{{ index .FieldErrors "event_date" }}</span>{{ end }}
|
|
<input class="{{ if index .FieldErrors "event_date" }}input-error{{ end }}" type="date" name="event_date" value="{{ .EventDate }}">
|
|
</label>
|
|
|
|
<label class="full-row">Details
|
|
<textarea name="details" rows="3" placeholder="Optional human-readable note">{{ .Details }}</textarea>
|
|
</label>
|
|
|
|
<label class="full-row">Import file (demo control)
|
|
<input type="file" name="upload" accept=".csv,text/csv,application/json">
|
|
<span class="meta">UI-only demo control: actual upload/parse flow is demonstrated in Import/Export pattern.</span>
|
|
</label>
|
|
|
|
<label class="checkbox-row full-row"><input type="checkbox" checked> Show suggestions from full query scope (not current page only)</label>
|
|
<label class="checkbox-row full-row"><input type="checkbox"> Allow force action on ambiguous match (requires explicit review)</label>
|
|
|
|
<div class="button-demo-row full-row">
|
|
<button class="btn btn-primary" type="submit">Review</button>
|
|
<a class="btn btn-secondary" href="{{ index .StepURLs "edit" }}">Stay in edit</a>
|
|
<a class="btn btn-ghost" href="/patterns/forms#forms-contract">Reset</a>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
{{ if or (eq .Step "review") (eq .Step "confirm") }}
|
|
<section class="panel" id="forms-review">
|
|
<div class="panel-head"><h2>{{ if eq .Step "confirm" }}Result Summary{{ else }}Review Summary{{ end }}</h2></div>
|
|
<div class="table-wrap">
|
|
<table class="ui-table">
|
|
<tbody>
|
|
<tr><th style="width:30%;">Mode</th><td>{{ .Mode }}</td></tr>
|
|
<tr><th>Server serial</th><td>{{ if .ServerSerial }}{{ .ServerSerial }}{{ else }}<span class="meta">—</span>{{ end }}</td></tr>
|
|
<tr><th>Location</th><td>{{ if .Location }}{{ .Location }}{{ else }}<span class="meta">—</span>{{ end }}</td></tr>
|
|
<tr><th>Component serial</th><td>{{ if .ComponentSerial }}{{ .ComponentSerial }}{{ else }}<span class="meta">—</span>{{ end }}</td></tr>
|
|
<tr><th>Date</th><td>{{ .EventDate }}</td></tr>
|
|
<tr><th>Details</th><td>{{ if .Details }}{{ .Details }}{{ else }}<span class="meta">No note</span>{{ end }}</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="button-demo-row" style="margin-top:12px;">
|
|
{{ if eq .Step "review" }}
|
|
<a class="btn btn-secondary" href="{{ index .StepURLs "edit" }}">Back to edit</a>
|
|
<a class="btn btn-primary" href="{{ index .StepURLs "confirm" }}">Confirm</a>
|
|
{{ else }}
|
|
<a class="btn btn-primary" href="{{ index .StepURLs "edit" }}">Start new</a>
|
|
{{ end }}
|
|
</div>
|
|
</section>
|
|
{{ end }}
|
|
{{ template "demo_doc_end" . }}
|
|
{{ end }}
|