innocuous-symmetry/go-htmx-tailwind-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

set up better ux for using categories

Browse Source
This commit is contained in:
Mikayla Dobson
2024-03-13 03:06:23 +00:00
parent 4fd0e72a86
commit 066e6d2a09
12 changed files with 107 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
templates/items/entity-edit.html
View File

@@ -1,39 +1,40 @@
<tr id="datarow-{{.ID}}" class="datarow border-b dark:border-neutral-500">
<td class="whitespace-nowrap px-6 py-4">
<input hidden disabled type="text" name="id" value="{{.ID}}" data-include-edit="{{.ID}}" />
<input class="data-input-{{.ID}}" hidden disabled type="text" name="id" value="{{.ID}}" data-include-edit="{{.ID}}" />
<span>{{.ID}}</span>
</td>
<td class="whitespace-nowrap px-6 py-4">
<input
type="text"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="data-input-{{.ID}} shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
data-include-edit="{{.ID}}"
name="name"
value="{{.Name}}"
/>
</td>
<td class="whitespace-nowrap px-6 py-4">
<input
type="text"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
data-include-edit="{{.ID}}"
name="stage"
value="{{.Stage}}"
/>
<select class="data-input-{{.ID}}" id="packing-stage-selector-{{.ID}}" data-include-edit="{{.ID}}" value="{{.Stage}}" name="stage">
<option value="0">Essentials</option>
<option value="1">Stage One</option>
<option value="2">Stage Two</option>
<option value="3">Stage Three</option>
<option value="4">Determine Later</option>
</select>
</td>
<td class="whitespace-nowrap px-6 py-4">
<select class="data-input-{{.ID}}" id="category-selector-{{.ID}}" data-include-edit="{{.ID}}" value="{{.Category}}" name="category">
<option value="0">Bedroom</option>
<option value="1">Bathroom</option>
<option value="2">Kitchen</option>
<option value="3">Office</option>
<option value="4">Living Room</option>
<option value="5">Other</option>
</select>
</td>
<td class="whitespace-nowrap px-6 py-4">
<input
type="text"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
data-include-edit="{{.ID}}"
name="category"
value="{{.Category}}"
/>
</td>
<td class="whitespace-nowrap px-6 py-4">
<input
type="text"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="data-input-{{.ID}} shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
data-include-edit="{{.ID}}"
name="description"
value="{{.Description}}"
@@ -42,7 +43,7 @@
<td class="whitespace-nowrap px-6 py-4">
<input
type="text"
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="data-input-{{.ID}} shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
data-include-edit="{{.ID}}"
name="notes"
value="{{.Notes}}"
@@ -54,7 +55,7 @@
hx-target="#datarow-{{.ID}}"
hx-swap="outerHTML"
hx-indicator="#processing"
hx-include="input[data-include-edit='{{.ID}}']"
hx-include=".data-input-{{.ID}}"
class="inline-flex items-center h-8 px-4 m-2 text-sm text-blue-100 transition-colors duration-150 bg-blue-700 rounded-lg focus:shadow-outline hover:bg-blue-800"
href=""
>Save</a
@@ -71,4 +72,13 @@
>Cancel</a
>
</td>
<script>
document.getElementById("category-selector-{{.ID}}").onchange = (e) => {
console.log(e.target.value);
}
document.getElementById("packing-stage-selector-{{.ID}}").onchange = (e) => {
console.log(e.target.value);
}
</script>
</tr>