145 lines
9.4 KiB
Plaintext
145 lines
9.4 KiB
Plaintext
{{- /*gotype: crud-generator/html_components.Table*/ -}}
|
|
{{ define "table" }}
|
|
<div id="tableDisplay" aria-live="polite">
|
|
{{$entityUrl := .EntityUrl}}
|
|
<div>
|
|
{{ if .ShowBack }}
|
|
<button {{template "buttonStyle"}}
|
|
data-hx-get="{{.BackUrl}}"
|
|
data-hx-target="body"
|
|
data-hx-push-url="true"
|
|
>Back
|
|
</button>
|
|
{{ end }}
|
|
</div>
|
|
<form data-hx-get="{{$entityUrl}}"
|
|
data-hx-target="body"
|
|
data-hx-swap="outerHTML"
|
|
data-hx-push-url="true"
|
|
data-hx-include="input, select"
|
|
>
|
|
<input type="hidden" name="orderBy" value="{{.OrderBy}}">
|
|
<input type="hidden" name="orderDirection" value="{{.OrderDirection}}">
|
|
<input type="hidden" name="pageNumber" value="{{.Pagination.Page}}">
|
|
|
|
<div id="itemTable" class="mx-auto max-w-screen-2xl sm:px-4 lg:px-12">
|
|
<!-- Start coding here -->
|
|
<div class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden">
|
|
<div class="flex flex-col md:flex-row items-center justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
|
|
<div class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0">
|
|
<button type="button"
|
|
data-hx-get="{{.CreateItemUrl}}"
|
|
data-hx-target="body"
|
|
data-hx-push-url="false"
|
|
id="createItemButton"
|
|
class="flex items-center justify-center text-white bg-blue-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-primary-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-primary-800"
|
|
>
|
|
<svg class="h-3.5 w-3.5 mr-2" fill="currentColor" viewbox="0 0 20 20"
|
|
xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<path clip-rule="evenodd" fill-rule="evenodd"
|
|
d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/>
|
|
</svg>
|
|
Add
|
|
</button>
|
|
</div>
|
|
<div>
|
|
{{ template "selectInput" .FilterSelect}}
|
|
</div>
|
|
<label for="table-search" class="sr-only">Search</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 rtl:inset-r-0 start-0 flex items-center ps-3 pointer-events-none">
|
|
<svg class="w-4 h-4 text-gray-500 dark:text-gray-400" 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"/>
|
|
</svg>
|
|
</div>
|
|
<input id="filterValueInput" name="filterValue" value="{{.FilterValue}}" type="text"
|
|
class="block p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg w-80 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
|
placeholder="Filter input">
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
|
|
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
|
<tr>
|
|
{{ range .Headers}}
|
|
<th scope="col" class="px-4 py-3">
|
|
<a
|
|
href="#"
|
|
data-hx-get="{{$entityUrl}}?orderBy={{.}}&orderDirection={{if eq $.OrderDirection "desc"}}asc{{else}}desc{{end}}"
|
|
data-hx-params="not orderBy,orderDirection"
|
|
>
|
|
<div class="flex items-center">
|
|
{{.}}
|
|
<svg class="w-3 h-3 ms-1.5" aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg" fill="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"/>
|
|
</svg>
|
|
</div>
|
|
</a>
|
|
</th>
|
|
{{end}}
|
|
<th scope="col" class="px-4 py-3">
|
|
<span class="sr-only">Actions</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{ range .Rows }}
|
|
{{ template "tableRow" . }}
|
|
{{ end }}
|
|
</tbody>
|
|
</table>
|
|
<nav class="flex items-center flex-column flex-wrap md:flex-row justify-between pt-4 py-2 px-2"
|
|
aria-label="Table navigation">
|
|
<span class="text-sm font-normal text-gray-500 dark:text-gray-400 mb-4 md:mb-0 block w-full md:inline md:w-auto">Showing <span
|
|
class="font-semibold text-gray-900 dark:text-white">{{.Pagination.CurrenItemStart}}-{{.Pagination.CurrentItemEnd}}</span> of <span
|
|
class="font-semibold text-gray-900 dark:text-white">{{.Pagination.TotalNumberOfItems}}</span></span>
|
|
<ul class="inline-flex -space-x-px rtl:space-x-reverse text-sm h-8">
|
|
<li>
|
|
{{if .Pagination.PreviousDisabled}}
|
|
<div
|
|
class="{{ template "disabledPaginationButtonStyle"}} rounded-s-lg">
|
|
Previous
|
|
</div>
|
|
{{ else }}
|
|
<a href="#"
|
|
id="previous"
|
|
data-hx-get="{{$entityUrl}}?pageNumber={{.Pagination.PreviousPage}}"
|
|
data-hx-params="not pageNumber"
|
|
class="{{template "paginationButtonStyle"}} rounded-s-lg">Previous</a>
|
|
{{ end }}
|
|
</li>
|
|
<li>
|
|
{{ if .Pagination.NextDisabled }}
|
|
<div
|
|
class="{{ template "disabledPaginationButtonStyle"}} rounded-e-lg">
|
|
Next
|
|
</div>
|
|
{{ else }}
|
|
<a href="#"
|
|
id="next"
|
|
data-hx-get="{{$entityUrl}}?pageNumber={{.Pagination.NextPage}}"
|
|
data-hx-params="not pageNumber"
|
|
class="{{template "paginationButtonStyle"}} rounded-e-lg">Next</a>
|
|
{{ end }}
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{ define "disabledPaginationButtonStyle" }}
|
|
flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-gray-300 border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400
|
|
{{end}}
|
|
|
|
{{define "paginationButtonStyle"}}
|
|
flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white
|
|
{{end}}
|