implements crud app
This commit is contained in:
John Ritsema
38
templates/companies.html
Normal file
38
templates/companies.html
Normal file
@@ -0,0 +1,38 @@
|
||||
<div id="companies">
|
||||
<div id="processing" class="htmx-indicator">Processing...</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||
<div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
|
||||
<div class="overflow-hidden">
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
hx-get="/company/add"
|
||||
hx-target="#table-body"
|
||||
hx-swap="outerHTML"
|
||||
hx-indicator="#processing"
|
||||
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=""
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<table class="min-w-full text-left text-sm font-light">
|
||||
<thead class="border-b font-medium dark:border-neutral-500">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-4">#</th>
|
||||
<th scope="col" class="px-6 py-4">Company</th>
|
||||
<th scope="col" class="px-6 py-4">Contact</th>
|
||||
<th scope="col" class="px-6 py-4">Country</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
{{range .}}
|
||||
{{ template "row.html". }}
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
6
templates/company-add.html
Normal file
6
templates/company-add.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<tbody id="table-body">
|
||||
{{ template "row-add.html" . }}
|
||||
{{range .}}
|
||||
{{ template "row.html". }}
|
||||
{{end}}
|
||||
</tbody>
|
||||
21
templates/index.html
Normal file
21
templates/index.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<script src="https://unpkg.com/htmx.org@1.9.2"></script>
|
||||
<link href="/css/output.css" rel="stylesheet" />
|
||||
<title>Go + HTMX + Tailwind</title>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="md:container md:mx-auto">
|
||||
<h1 class="text-3xl">Go + HTMX + Tailwind Example</h1>
|
||||
<br/>
|
||||
<span class="text-xl">Companies</span>
|
||||
<div>{{ template "companies.html" . }}</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
51
templates/row-add.html
Normal file
51
templates/row-add.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<tr id="datarow-add" class="border-b dark:border-neutral-500">
|
||||
<td class="whitespace-nowrap px-6 py-4"></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-add=""
|
||||
name="company"
|
||||
value=""
|
||||
/>
|
||||
</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-add=""
|
||||
name="contact"
|
||||
value=""
|
||||
/>
|
||||
</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-add=""
|
||||
name="country"
|
||||
value=""
|
||||
/>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-1 py-1">
|
||||
<a
|
||||
hx-post="/company/"
|
||||
hx-target="#companies"
|
||||
hx-indicator="#processing"
|
||||
hx-include="input[data-include-add]"
|
||||
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
|
||||
>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-1 py-1">
|
||||
<a
|
||||
hx-get="/company/"
|
||||
hx-target="#companies"
|
||||
hx-indicator="#processing"
|
||||
class="inline-flex items-center h-8 px-4 m-2 text-sm text-red-100 transition-colors duration-150 bg-red-700 rounded-lg focus:shadow-outline hover:bg-red-800"
|
||||
href=""
|
||||
>Cancel</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
53
templates/row-edit.html
Normal file
53
templates/row-edit.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<tr id="datarow-{{.ID}}" class="border-b dark:border-neutral-500">
|
||||
<td class="whitespace-nowrap px-6 py-4">{{.ID}}</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="company"
|
||||
value="{{.Company}}"
|
||||
/>
|
||||
</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="contact"
|
||||
value="{{.Contact}}"
|
||||
/>
|
||||
</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="country"
|
||||
value="{{.Country}}"
|
||||
/>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-1 py-1">
|
||||
<a
|
||||
hx-put="/company/{{.ID}}"
|
||||
hx-target="#datarow-{{.ID}}"
|
||||
hx-swap="outerHTML"
|
||||
hx-indicator="#processing"
|
||||
hx-include="input[data-include-edit='{{.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
|
||||
>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-1 py-1">
|
||||
<a
|
||||
hx-get="/company/{{.ID}}"
|
||||
hx-target="#datarow-{{.ID}}"
|
||||
hx-swap="outerHTML"
|
||||
hx-indicator="#processing"
|
||||
class="inline-flex items-center h-8 px-4 m-2 text-sm text-red-100 transition-colors duration-150 bg-red-700 rounded-lg focus:shadow-outline hover:bg-red-800"
|
||||
href=""
|
||||
>Cancel</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
29
templates/row.html
Normal file
29
templates/row.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<tr id="datarow-{{.ID}}" class="border-b dark:border-neutral-500">
|
||||
<td class="whitespace-nowrap px-6 py-4">{{.ID}}</td>
|
||||
<td class="whitespace-nowrap px-6 py-4">{{.Company}}</td>
|
||||
<td class="whitespace-nowrap px-6 py-4">{{.Contact}}</td>
|
||||
<td class="whitespace-nowrap px-6 py-4">{{.Country}}</td>
|
||||
<td class="whitespace-nowrap px-1 py-1">
|
||||
<a
|
||||
hx-get="/company/edit/{{.ID}}"
|
||||
hx-target="#datarow-{{.ID}}"
|
||||
hx-swap="outerHTML"
|
||||
hx-indicator="#processing"
|
||||
class="hover:underline text-blue-700"
|
||||
href=""
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-1 py-1">
|
||||
<a
|
||||
hx-delete="/company/{{.ID}}"
|
||||
hx-target="#companies"
|
||||
hx-confirm="Are you sure you want to delete {{.Company}}?"
|
||||
hx-indicator="#processing"
|
||||
class="hover:underline text-blue-700"
|
||||
href=""
|
||||
>Delete</a
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
Reference in New Issue
Block a user