79 lines
2 KiB
Plaintext
79 lines
2 KiB
Plaintext
package put
|
|
|
|
import "github.com/tigorlazuardi/redmage/views/utils"
|
|
import "fmt"
|
|
|
|
type SlugInputData struct {
|
|
Error string
|
|
Value string
|
|
Valid string
|
|
HXSwapOOB bool
|
|
Disabled bool
|
|
DisabledText string
|
|
}
|
|
|
|
templ SlugInput(data SlugInputData) {
|
|
<label
|
|
id="slug-input-form"
|
|
class="form-control"
|
|
if data.HXSwapOOB {
|
|
hx-swap-oob="true"
|
|
}
|
|
>
|
|
<div class="label">
|
|
<span
|
|
class={ utils.CXX(
|
|
"label-text", true,
|
|
"text-error", data.Error != "",
|
|
"text-success", data.Valid != "",
|
|
) }
|
|
>Slug Identifier</span>
|
|
</div>
|
|
<input
|
|
id="slug-input-field"
|
|
if !data.Disabled {
|
|
x-data={ fmt.Sprintf(`{ init() { $el.setCustomValidity(%q) } }`, data.Error) }
|
|
}
|
|
name="slug"
|
|
type="text"
|
|
if !data.Disabled {
|
|
@change="$el.setCustomValidity('')"
|
|
}
|
|
class={ utils.CXX(
|
|
"input input-bordered", true,
|
|
"text-error", data.Error != "",
|
|
"text-success", data.Valid != "",
|
|
"input-error", data.Error != "",
|
|
"input-success", data.Valid != "",
|
|
) }
|
|
if data.Disabled {
|
|
disabled
|
|
} else {
|
|
hx-post="/htmx/devices/add/validate/slug"
|
|
hx-trigger="change, input delay:2s"
|
|
hx-target="#slug-input-form"
|
|
hx-target-409="#slug-input-form"
|
|
hx-swap="outerHTML"
|
|
placeholder="my-awesome-device"
|
|
title="Url Friendly Characters Only"
|
|
required
|
|
}
|
|
value={ data.Value }
|
|
/>
|
|
<div class="label">
|
|
<span class={ utils.CXX("label-text", true, "text-error", data.Error != "", "text-success", data.Valid != "") }>
|
|
if data.Valid != "" {
|
|
{ data.Valid }
|
|
} else if data.Error != "" {
|
|
{ data.Error }
|
|
} else if data.DisabledText != "" {
|
|
{ data.DisabledText }
|
|
} else {
|
|
URL friendly Unique identifier for the device.
|
|
Value must be lowercase english alphabet and supported separator is only 'dash' (-) and 'underscores' (_).
|
|
}
|
|
</span>
|
|
</div>
|
|
</label>
|
|
}
|