index.gohtml 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. {{define "index.html"}}
  2. {% extends 'layout.html' %}
  3. {{ block "content" . }}
  4. {% include 'archive_ui.html' %}
  5. <form action="/contacts" method="get" class="tool-bar">
  6. <label for="search">Search Term</label>
  7. <input id="search" type="search" name="q" value="{{ .request.args.get 'q' }}"
  8. hx-get="/contacts"
  9. hx-trigger="search, keyup delay:200ms changed"
  10. hx-target="tbody"
  11. hx-push-url="true"
  12. hx-indicator="#spinner"/>
  13. <img style="height: 20px" id="spinner" class="htmx-indicator" src="/static/img/spinning-circles.svg"/>
  14. <input type="submit" value="Search"/>
  15. </form>
  16. <form x-data="{ selected: [] }">
  17. <template
  18. x-if="selected.length > 0">
  19. <div class="box info tool-bar flxed top">
  20. <slot x-text="selected.length"></slot>
  21. contacts selected
  22. <button type="button" class="bad bg color border"
  23. @click="confirm(`Delete ${selected.length} contacts?`) &&
  24. htmx.ajax('DELETE', '/contacts', { source: $root, target: document.body })"
  25. >Delete</button>
  26. <hr aria-orientation="vertical">
  27. <button type="button" @click="selected = []">Cancel</button>
  28. </div>
  29. </template>
  30. <table>
  31. <thead>
  32. <tr>
  33. <th></th>
  34. <th>First</th>
  35. <th>Last</th>
  36. <th>Phone</th>
  37. <th>Email</th>
  38. <th></th>
  39. </tr>
  40. </thead>
  41. <tbody>
  42. {% include 'rows.html' %}
  43. </tbody>
  44. </table>
  45. <button hx-delete="/contacts"
  46. hx-confirm="Are you sure you want to delete these contacts?"
  47. hx-target="body">
  48. Delete Selected Contacts
  49. </button>
  50. </form>
  51. <p>
  52. <a href="/contacts/new">Add Contact</a>
  53. <span hx-get="/contacts/count" hx-trigger="revealed">
  54. <img id="spinner" style="height: 20px" class="htmx-indicator" src="/static/img/spinning-circles.svg"/>
  55. </span>
  56. </p>
  57. {{ end }}
  58. {{end}}