form generator
This commit is contained in:
JACS
parent
80ae1c4f91
commit
58bd5490e2
7 changed files with 593 additions and 2 deletions
|
|
@ -0,0 +1,272 @@
|
|||
<!-- Form Generator: renders a full HTML form from a FormtablerFormDefinition -->
|
||||
{{define "formtabler_generator"}}
|
||||
<div class="card{{if defaultVal "" .Class}} {{.Class}}{{end}}">
|
||||
{{if .Title}}
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{.Title}}</h3>
|
||||
</div>
|
||||
{{end}}
|
||||
<div class="card-body">
|
||||
<form
|
||||
id="{{defaultVal "form-generator" .ID}}"
|
||||
method="{{defaultVal "POST" .Method}}"
|
||||
{{if .Action}}action="{{.Action}}"{{end}}
|
||||
{{if .Class}}class="{{.Class}}"{{end}}
|
||||
{{if .Enctype}}enctype="{{.Enctype}}"{{end}}
|
||||
{{if .NoValidate}}novalidate{{end}}
|
||||
>
|
||||
{{if .SuccessMessage}}
|
||||
<div class="alert alert-success" role="alert">
|
||||
{{.SuccessMessage}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if .FieldsetTitle}}
|
||||
<fieldset class="form-fieldset">
|
||||
<legend>{{.FieldsetTitle}}</legend>
|
||||
{{if .FieldsetDescription}}<p class="text-secondary mb-3">{{.FieldsetDescription}}</p>{{end}}
|
||||
{{end}}
|
||||
|
||||
{{if gt .Columns 1}}
|
||||
<div class="row">
|
||||
{{end}}
|
||||
|
||||
{{$cols := .Columns}}
|
||||
{{$layout := .Layout}}
|
||||
{{range $i, $field := .Fields}}
|
||||
{{if and (gt $cols 1) (eq $layout "horizontal")}}
|
||||
<div class="col-md-6 mb-3">
|
||||
{{else if gt $cols 1}}
|
||||
{{if eq $cols 2}}
|
||||
<div class="col-md-6 mb-3">
|
||||
{{else}}
|
||||
<div class="col-md-4 mb-3">
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
{{if eq $field.Type "hidden"}}
|
||||
<input type="hidden" name="{{$field.Name}}" value="{{$field.Value}}">
|
||||
{{else if or (eq $field.Type "select") (eq $field.Type "multiselect")}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<select
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-select{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
{{if $field.Required}}required{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
{{if $field.Autofocus}}autofocus{{end}}
|
||||
{{if eq $field.Type "multiselect"}}multiple{{end}}
|
||||
>
|
||||
{{if not $field.Multiple}}<option value="">{{defaultVal "Select..." $field.Placeholder}}</option>{{end}}
|
||||
{{range $field.Options}}
|
||||
<option value="{{.Value}}"{{if .Selected}} selected{{end}}{{if .Disabled}} disabled{{end}}>{{.Label}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
{{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "textarea"}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<textarea
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-control{{if $field.Success}} is-valid{{end}}{{if $field.Error}} is-invalid{{end}}{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
placeholder="{{defaultVal "" $field.Placeholder}}"
|
||||
{{if $field.Required}}required{{end}}
|
||||
{{if $field.Readonly}}readonly{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
{{if $field.Autofocus}}autofocus{{end}}
|
||||
{{if $field.MaxLength}}maxlength="{{$field.MaxLength}}"{{end}}
|
||||
{{if $field.MinLength}}minlength="{{$field.MinLength}}"{{end}}
|
||||
>{{$field.Value}}</textarea>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
{{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "checkbox"}}
|
||||
<div class="mb-3">
|
||||
<div class="form-label">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</div>
|
||||
{{if $field.Options}}
|
||||
{{range $field.Options}}
|
||||
<label class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="{{$field.Name}}"
|
||||
value="{{.Value}}"
|
||||
{{if .Checked}}checked{{end}}
|
||||
{{if .Disabled}}disabled{{end}}
|
||||
>
|
||||
<span class="form-check-label">{{.Label}}</span>
|
||||
</label>
|
||||
{{end}}
|
||||
{{else}}
|
||||
<label class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="{{$field.Name}}"
|
||||
value="1"
|
||||
{{if eq $field.Value "true"}}checked{{end}}
|
||||
>
|
||||
<span class="form-check-label">{{defaultVal "Yes" $field.Placeholder}}</span>
|
||||
</label>
|
||||
{{end}}
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "radio"}}
|
||||
<div class="mb-3">
|
||||
<div class="form-label">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</div>
|
||||
{{range $field.Options}}
|
||||
<label class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="radio"
|
||||
name="{{$field.Name}}"
|
||||
value="{{.Value}}"
|
||||
{{if .Checked}}checked{{end}}
|
||||
{{if .Disabled}}disabled{{end}}
|
||||
>
|
||||
<span class="form-check-label">{{.Label}}</span>
|
||||
</label>
|
||||
{{end}}
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "toggle"}}
|
||||
<div class="mb-3">
|
||||
<label class="form-check form-switch">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
name="{{$field.Name}}"
|
||||
{{if eq $field.Value "true"}}checked{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
>
|
||||
<span class="form-check-label">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</span>
|
||||
</label>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "file"}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<input
|
||||
type="file"
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-control{{if $field.Success}} is-valid{{end}}{{if $field.Error}} is-invalid{{end}}{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
{{if $field.Required}}required{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
{{if $field.Multiple}}multiple{{end}}
|
||||
{{if $field.Accept}}accept="{{$field.Accept}}"{{end}}
|
||||
>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
{{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "color"}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<input
|
||||
type="color"
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-control form-control-color{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
value="{{defaultVal "#206bc4" $field.Value}}"
|
||||
{{if $field.Required}}required{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "range"}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<input
|
||||
type="range"
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-range{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
value="{{defaultVal "50" $field.Value}}"
|
||||
{{if $field.Min}}min="{{$field.Min}}"{{end}}
|
||||
{{if $field.Max}}max="{{$field.Max}}"{{end}}
|
||||
{{if $field.Step}}step="{{$field.Step}}"{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
</div>
|
||||
{{else if eq $field.Type "phone"}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>
|
||||
</span>
|
||||
<input
|
||||
type="tel"
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-control{{if $field.Success}} is-valid{{end}}{{if $field.Error}} is-invalid{{end}}{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
placeholder="{{defaultVal "" $field.Placeholder}}"
|
||||
value="{{$field.Value}}"
|
||||
{{if $field.Required}}required{{end}}
|
||||
{{if $field.Readonly}}readonly{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
{{if $field.Autofocus}}autofocus{{end}}
|
||||
{{if $field.Pattern}}pattern="{{$field.Pattern}}"{{end}}
|
||||
{{if $field.MaxLength}}maxlength="{{$field.MaxLength}}"{{end}}
|
||||
>
|
||||
</div>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
{{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
|
||||
</div>
|
||||
{{else}}
|
||||
{{/* Default: text, email, number, url, date, datetime-local, password, and any unknown type */}}
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
|
||||
<input
|
||||
type="{{$field.Type}}"
|
||||
id="field-{{$field.Name}}"
|
||||
name="{{$field.Name}}"
|
||||
class="form-control{{if $field.Success}} is-valid{{end}}{{if $field.Error}} is-invalid{{end}}{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
|
||||
placeholder="{{defaultVal "" $field.Placeholder}}"
|
||||
value="{{$field.Value}}"
|
||||
{{if $field.Required}}required{{end}}
|
||||
{{if $field.Readonly}}readonly{{end}}
|
||||
{{if $field.Disabled}}disabled{{end}}
|
||||
{{if $field.Autofocus}}autofocus{{end}}
|
||||
{{if $field.Pattern}}pattern="{{$field.Pattern}}"{{end}}
|
||||
{{if $field.MaxLength}}maxlength="{{$field.MaxLength}}"{{end}}
|
||||
{{if $field.MinLength}}minlength="{{$field.MinLength}}"{{end}}
|
||||
{{if $field.Min}}min="{{$field.Min}}"{{end}}
|
||||
{{if $field.Max}}max="{{$field.Max}}"{{end}}
|
||||
{{if $field.Step}}step="{{$field.Step}}"{{end}}
|
||||
>
|
||||
{{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
|
||||
{{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if and (gt $cols 1) (eq $layout "horizontal")}}
|
||||
</div>
|
||||
{{else if gt $cols 1}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
{{if gt .Columns 1}}
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
{{if .FieldsetTitle}}
|
||||
</fieldset>
|
||||
{{end}}
|
||||
|
||||
<div class="form-footer{{if .FieldsetTitle}} mt-2{{end}}">
|
||||
<button type="submit" class="btn btn-primary">{{defaultVal "Submit" .SubmitText}}</button>
|
||||
{{if .ShowReset}}
|
||||
<button type="reset" class="btn btn-link link-secondary ms-auto">{{defaultVal "Reset" .ResetText}}</button>
|
||||
{{end}}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue