87 lines
5.4 KiB
HTML
87 lines
5.4 KiB
HTML
<div class="bg-white shadow rounded-lg p-4 sm:p-6 lg:p-8 mb-8">
|
|
<div class="mb-4 flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-gray-900">User Management</h3>
|
|
<p class="text-sm text-gray-500">Add, edit or remove people from the tracker.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
<div class="overflow-x-auto rounded-lg">
|
|
<div class="align-middle inline-block min-w-full">
|
|
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col"
|
|
class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Name
|
|
</th>
|
|
<th scope="col"
|
|
class="p-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
<div class="relative max-w-xs ml-auto">
|
|
<div
|
|
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
|
<svg class="w-4 h-4 text-gray-500" aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
|
<path stroke="currentColor" stroke-linecap="round"
|
|
stroke-linejoin="round" stroke-width="2"
|
|
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"></path>
|
|
</svg>
|
|
</div>
|
|
<input type="search" id="people-search"
|
|
class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-cyan-500 focus:border-cyan-500 shadow-sm"
|
|
placeholder="Search users..."
|
|
_="on input show <tbody>tr/> in closest <table/> when its textContent.toLowerCase() contains my value.toLowerCase()">
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200" id="new-person" hx-target="closest tr"
|
|
hx-swap="outerHTML swap:0.5s">
|
|
{% for p in people %}
|
|
{{ render_partial('partials/person.html', person_id=p['PersonId'], name=p['Name'])}}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="w-full mt-6 bg-gray-50 p-4 rounded-lg border border-gray-100" hx-post="{{ url_for('create_person') }}"
|
|
hx-swap="beforeend" hx-target="#new-person" _="on htmx:afterRequest
|
|
render #notification-template with (message: 'User added') then append it to #notifications-container
|
|
then call _hyperscript.processNode(#notifications-container)
|
|
then reset() me">
|
|
<div class="flex flex-col sm:flex-row gap-4 items-end justify-end">
|
|
<div class="grow w-full sm:w-auto max-w-sm">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1" for="person-name">
|
|
New user
|
|
</label>
|
|
<div class="relative rounded-md shadow-sm">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
|
|
fill="currentColor" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<input id="person-name"
|
|
class="focus:ring-cyan-500 focus:border-cyan-500 block w-full pl-10 p-2 sm:text-sm border-gray-300 rounded-lg bg-gray-50"
|
|
type="text" name="name" placeholder="Full Name">
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="w-full sm:w-auto flex items-center justify-center text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-sm px-5 py-2.5 transition-colors shadow-sm"
|
|
type="submit">
|
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd"
|
|
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
|
|
clip-rule="evenodd"></path>
|
|
</svg>
|
|
Add User
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div> |