add scroll on tables

henriquepw · Oct 26, 2024 · 8f06781 · 8f06781
1 parent ae708e0
commit 8f06781
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 57 deletions.
diff --git a/web/view/pages/clients_page.templ b/web/view/pages/clients_page.templ
@@ -16,14 +16,14 @@ templ clientRow(i types.Client) {
 	<td>
 		{ i.Email }
 	</td>
-	<td>
+	<td class="whitespace-nowrap">
 		{ i.Phone }
 	</td>
 }
 
 templ ClientsPage(boosted bool, items []types.Client) {
 	@layout.Dashbaord("Painel", boosted) {
-		<div x-data={ fmt.Sprintf("{createOpen: false, client: null, count: %d}", len(items)) }>
+		<div x-data={ fmt.Sprintf("{createOpen: true, client: null, count: %d}", len(items)) }>
 			@layout.PageHeader("Clientes", []ui.BreadcrumbItem{
 				{Label: "Clientes", Href: "/clients"},
 			}) {
@@ -32,25 +32,23 @@ templ ClientsPage(boosted bool, items []types.Client) {
 				</button>
 			}
 			@layout.WithPageLoad() {
-				<section class="w-full card p-0 overflow-hidden">
-					<table class="table-auto w-full">
-						<thead class="bg-gray-2">
-							<tr>
-								<td>Cliente</td>
-								<td>Email</td>
-								<td>Whatsapp</td>
+				@ui.Table() {
+					<thead class="bg-gray-2">
+						<tr>
+							<td>Cliente</td>
+							<td>Email</td>
+							<td>Whatsapp</td>
+						</tr>
+					</thead>
+					<tbody id="clients">
+						@ui.TEmpty("Nenhum cliente cadastrado", 3)
+						for _, i := range items {
+							<tr id={ "client-" + i.ID } class="group [&.htmx-request]:hidden">
+								@clientRow(i)
 							</tr>
-						</thead>
-						<tbody id="clients">
-							@ui.TEmpty("Nenhum cliente cadastrado", 3)
-							for _, i := range items {
-								<tr id={ "client-" + i.ID } class="group [&.htmx-request]:hidden">
-									@clientRow(i)
-								</tr>
-							}
-						</tbody>
-					</table>
-				</section>
+						}
+					</tbody>
+				}
 			}
 			@ui.Modal("createOpen", "createOpen=false", "Novo Cliente") {
 				@ClientCreateForm(types.ClientCreateDTO{}, nil)

diff --git a/web/view/pages/employees_page.templ b/web/view/pages/employees_page.templ
@@ -63,27 +63,25 @@ templ EmployeesPage(boosted bool, items []types.Employee) {
 				</button>
 			}
 			@layout.WithPageLoad() {
-				<section class="w-full card p-0 overflow-hidden">
-					<table class="table-auto w-full">
-						<thead class="bg-gray-2">
-							<tr>
-								<td class="md:hidden">Funcionário</td>
-								<td class="hidden md:table-cell">Cargo</td>
-								<td class="hidden md:table-cell">Nome</td>
-								<td class="hidden md:table-cell">Email</td>
-								<td></td>
+				@ui.Table() {
+					<thead class="bg-gray-2">
+						<tr>
+							<td class="md:hidden">Funcionário</td>
+							<td class="hidden md:table-cell">Cargo</td>
+							<td class="hidden md:table-cell">Nome</td>
+							<td class="hidden md:table-cell">Email</td>
+							<td></td>
+						</tr>
+					</thead>
+					<tbody id="employees">
+						@ui.TEmpty("Nenhum cliente cadastrado", 4)
+						for _, i := range items {
+							<tr id={ "employee-" + i.ID } class="group [&.htmx-request]:hidden">
+								@employeeRow(i)
 							</tr>
-						</thead>
-						<tbody id="employees">
-							@ui.TEmpty("Nenhum cliente cadastrado", 4)
-							for _, i := range items {
-								<tr id={ "employee-" + i.ID } class="group [&.htmx-request]:hidden">
-									@employeeRow(i)
-								</tr>
-							}
-						</tbody>
-					</table>
-				</section>
+						}
+					</tbody>
+				}
 			}
 			@ui.Modal("createOpen", "createOpen=false", "Novo Funcionário") {
 				@EmployeeCreateForm(types.EmployeeCreateDTO{}, nil)

diff --git a/web/view/pages/procedures_page.templ b/web/view/pages/procedures_page.templ
@@ -47,24 +47,22 @@ templ ProceduresPage(boosted bool, items []types.Procedure) {
 				</button>
 			}
 			@layout.WithPageLoad() {
-				<section class="w-full card p-0 overflow-hidden">
-					<table class="table-auto w-full">
-						<thead class="bg-gray-2">
-							<tr>
-								<td class="w-full">Procimento</td>
-								<td></td>
+				@ui.Table() {
+					<thead class="bg-gray-2">
+						<tr>
+							<td class="w-full">Procedimento</td>
+							<td></td>
+						</tr>
+					</thead>
+					<tbody id="procedures">
+						@ui.TEmpty("Nenhum procedimento cadastrado", 2)
+						for _, p := range items {
+							<tr id={ "procedure-" + p.ID } class="group [&.htmx-request]:hidden">
+								@procedureRow(p)
 							</tr>
-						</thead>
-						<tbody id="procedures">
-							@ui.TEmpty("Nenhum procedimento cadastrado", 2)
-							for _, p := range items {
-								<tr id={ "procedure-" + p.ID } class="group [&.htmx-request]:hidden">
-									@procedureRow(p)
-								</tr>
-							}
-						</tbody>
-					</table>
-				</section>
+						}
+					</tbody>
+				}
 			}
 			@ui.Modal("createOpen", "createOpen=false", "Novo Procedimento") {
 				@ProcedureCreateForm("", nil)

diff --git a/web/view/ui/table.templ b/web/view/ui/table.templ
@@ -13,3 +13,11 @@ templ TEmpty(msg string, columns int) {
 		</tr>
 	</template>
 }
+
+templ Table(className ...string) {
+	<div class={ "card p-0 overflow-auto min-w-full w-0",className }>
+		<table class="table-auto w-full">
+			{ children... }
+		</table>
+	</div>
+}