feat: Adds employee form and table view, begins user form and table view.

This commit is contained in:
2025-01-07 14:05:40 -05:00
parent e3f150b32c
commit 08a0a8e1a3
15 changed files with 366 additions and 93 deletions

View File

@@ -58,6 +58,19 @@ nav {
padding: 50px 0; padding: 50px 0;
} }
form {
padding: 50px 0;
text-align: center;
}
form label {
padding: 15px;
}
form input {
margin-bottom: 15px;
}
.login-form { .login-form {
padding: 50px 0; padding: 50px 0;
text-align: center; text-align: center;
@@ -70,3 +83,64 @@ nav {
.login-form input { .login-form input {
margin-bottom: 15px; margin-bottom: 15px;
} }
table {
width: 100%;
}
table, th, td {
border: 1px solid grey;
border-collapse: collapse;
}
td, th {
padding: 5px 15px;
}
.employee-form {
margin: 20px auto;
width: 50%;
background-color: #aeb6bf;
padding: 20px;
border-radius: 25px;
}
.employee-form label {
color: #555;
font-weight: bold;
}
input[type=submit] {
padding: 5px 20px;
}
input[type=text], input[type=password] {
padding: 5px;
}
.btn-delete {
display: inline-block;
color: red;
text-align: center;
cursor: pointer;
}
.btn-delete img {
width: 20px;
height: 20px;
}
.btn-delete img:hover {
background-color: #555;
}
.toggle img {
background-color: inherit;
width: 60px;
height: 30px;
cursor: pointer;
}
.toggle img:hover {
background-color: #555;
}

View File

@@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 -6 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -0,0 +1,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 -6 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg version="1.1" id="_x32_"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512"
xml:space="preserve"
fill="#ff2600"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<style type="text/css"> .st0{fill:#ff2600;} </style>
<g>
<path class="st0" d="M88.594,464.731C90.958,491.486,113.368,512,140.234,512h231.523c26.858,0,49.276-20.514,51.641-47.269 l25.642-335.928H62.952L88.594,464.731z M420.847,154.93l-23.474,307.496c-1.182,13.37-12.195,23.448-25.616,23.448H140.234 c-13.42,0-24.434-10.078-25.591-23.132L91.145,154.93H420.847z"></path> <path class="st0" d="M182.954,435.339c5.877-0.349,10.35-5.4,9.992-11.269l-10.137-202.234c-0.358-5.876-5.401-10.349-11.278-9.992 c-5.877,0.357-10.35,5.409-9.993,11.277l10.137,202.234C172.033,431.231,177.085,435.696,182.954,435.339z"></path> <path class="st0" d="M256,435.364c5.885,0,10.656-4.763,10.656-10.648V222.474c0-5.885-4.771-10.648-10.656-10.648 c-5.885,0-10.657,4.763-10.657,10.648v202.242C245.344,430.601,250.115,435.364,256,435.364z"></path> <path class="st0" d="M329.046,435.339c5.878,0.357,10.921-4.108,11.278-9.984l10.129-202.234c0.348-5.868-4.116-10.92-9.993-11.277 c-5.877-0.357-10.92,4.116-11.277,9.992L319.054,424.07C318.697,429.938,323.17,434.99,329.046,435.339z"></path> <path class="st0" d="M439.115,64.517c0,0-34.078-5.664-43.34-8.479c-8.301-2.526-80.795-13.566-80.795-13.566l-2.722-19.297 C310.388,9.857,299.484,0,286.642,0h-30.651H225.34c-12.825,0-23.728,9.857-25.616,23.175l-2.721,19.297 c0,0-72.469,11.039-80.778,13.566c-9.261,2.815-43.357,8.479-43.357,8.479C62.544,67.365,55.332,77.172,55.332,88.38v21.926h200.66 h200.676V88.38C456.668,77.172,449.456,67.365,439.115,64.517z M276.318,38.824h-40.636c-3.606,0-6.532-2.925-6.532-6.532 s2.926-6.532,6.532-6.532h40.636c3.606,0,6.532,2.925,6.532,6.532S279.924,38.824,276.318,38.824z"></path>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@@ -0,0 +1,42 @@
<table id="employee-table">
<tr>
<th>Name</th>
<th>Active</th>
<th></th>
</tr>
#for(employee in employees):
<tr id="employee_#(employee.id)">
<td>#capitalized(employee.firstName) #capitalized(employee.lastName)</td>
<td style="width: 10%; text-align: center;">
#if(employee.active):
<a class="toggle"
hx-post="/employees/#(employee.id)/toggle-active"
hx-target="#employee-table"
hx-swap="outerHTML"
>
<img src="images/toggle-on.svg" alt="Active">
</a>
#else:
<a class="toggle"
hx-post="/employees/#(employee.id)/toggle-active"
hx-target="#employee-table"
hx-swap="outerHTML"
>
<img src="images/toggle-off.svg" alt="Active">
</a>
#endif
</td>
<td style="width: 30px;">
<a class="btn-delete"
hx-delete="/employees/#(employee.id)"
hx-target="#employee-table"
hx-swap="outerHTML"
hx-confirm="Are you sure you want to delete this employee?"
>
<img src="images/trash-can.svg" alt="Delete">
</a>
</td>
</tr>
#endfor
</table>

View File

@@ -0,0 +1,22 @@
<div id="home-conent" class="container">
<div class="container">
<h1>Employees</h1>
<br>
<p>Employees are who purchase orders can be generated for.</p>
<br>
</div>
<form class="employee-form"
hx-post="/employees"
hx-target="#employee-table"
hx-swap="outerHTML"
>
<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName" placeholder="First Name" autofocus required>
<br>
<label for="lastName">Last Name</label>
<input type="text" id="lastName" name="lastName" placeholder="Last Name" required>
<br>
<input type="submit" value="Create">
</form>
#extend("employee-table")
</div>

35
Resources/Views/home.leaf Normal file
View File

@@ -0,0 +1,35 @@
<div id="content">
<header>
<div class="container">
#extend("logo")
#extend("navbar")
</div>
</header>
<section class="content">
<div class="container">
<nav>
<ul class="nav-links">
<li>
<a hx-get="/users"
hx-target="#home-content"
hx-swap="outerHTML"
>
Users
</a>
</li>
<li>
<a hx-get="/employees"
hx-target="#home-content"
hx-swap="outerHTML"
>
Employees
</a>
</li>
</ul>
</nav>
</div>
<div id="home-content" class="container">
<p>We're in!</p>
</div>
</section>
</div>

View File

@@ -1,17 +0,0 @@
<div id="content">
<header>
<div class="container">
<div id="logo">HHE - Purchase Orders</div>
<nav>
<ul class="nav-links">
<li><a hx-post="logout" hx-target="#content" hx-trigger="click" hx-swap="outerHTML">Logout</a></li>
</ul>
</nav>
</div>
</header>
<section class="content">
<div class="container">
<p>We're in!</p>
</div>
</section>
</div>

View File

@@ -1,7 +1,7 @@
<div id="content"> <div id="content">
<header> <header>
<div class="container"> <div class="container">
<div id="logo">HHE - Purchase Orders</div> #extend("logo")
</div> </div>
</header> </header>

View File

@@ -0,0 +1 @@
<div id="logo">HHE - Purchase Orders</div>

View File

@@ -0,0 +1,5 @@
<nav>
<ul class="nav-links">
<li><a hx-post="logout" hx-target="#content" hx-trigger="click" hx-swap="outerHTML">Logout</a></li>
</ul>
</nav>

View File

@@ -0,0 +1,19 @@
<div id="home-content" class="container">
<div class="container">
<h1>Users</h1>
<p>Users are people that can login and generate puchase orders for employees.</p>
<br>
</div>
<table>
<tr>
<th>Username</th>
<th>Email</th>
</tr>
#for(user in users):
<tr>
<td>#(user.username)</td>
<td>#(user.email)</td>
</tr>
#endfor
</table>
</div>

View File

@@ -30,6 +30,7 @@ struct ApiController: RouteCollection {
purchaseOrders.get(use: purchaseOrdersIndex(req:)) purchaseOrders.get(use: purchaseOrdersIndex(req:))
purchaseOrders.post(use: createPurchaseOrder(req:)) purchaseOrders.post(use: createPurchaseOrder(req:))
users.get(use: usersIndex(req:))
users.post(use: createUser(req:)) users.post(use: createUser(req:))
users.group("login") { users.group("login") {
$0.get(use: self.login(req:)) $0.get(use: self.login(req:))
@@ -168,6 +169,11 @@ struct ApiController: RouteCollection {
return token return token
} }
@Sendable
func usersIndex(req: Request) async throws -> [User.DTO] {
try await User.query(on: req.db).all().map { $0.toDTO() }
}
// MARK: - Vendors // MARK: - Vendors
@Sendable @Sendable

View File

@@ -0,0 +1,126 @@
import Fluent
import Leaf
import Vapor
struct ViewController: RouteCollection {
private let api = ApiController()
func boot(routes: any RoutesBuilder) throws {
let protected = routes.grouped(User.credentialsAuthenticator(), User.redirectMiddleware(path: "login"))
let login = routes.grouped("login")
let employees = protected.grouped("employees")
// MARK: - Non-protected routes.
routes.get(use: index(req:))
login.get(use: getLogin(req:))
login.post(use: postLogin(req:))
routes.post("logout", use: logout(req:))
// MARK: Protected routes.
protected.get("home", use: home(req:))
protected.get("users", use: users(req:))
employees.get(use: employees(req:))
employees.post(use: postEmployeeForm(req:))
employees.group(":employeeID") {
$0.delete(use: deleteEmployee(req:))
$0.post("toggle-active", use: toggleActiveEmployee(req:))
}
}
@Sendable
func index(req: Request) async throws -> View {
try await req.view.render("index")
}
@Sendable
func getLogin(req: Request) async throws -> View {
try await req.view.render("login")
}
@Sendable
func postLogin(req: Request) async throws -> View {
let content = try req.content.decode(UserForm.self)
guard let user = try await User.query(on: req.db)
.filter(\.$username == content.username)
.first()
else {
throw Abort(.badRequest, reason: "User not found.")
}
guard try user.verify(password: content.password) else {
throw Abort(.unauthorized, reason: "Invalid password.")
}
req.auth.login(user)
req.logger.debug("User logged in: \(user.toDTO())")
return try await req.view.render("home")
}
@Sendable
func logout(req: Request) async throws -> View {
req.auth.logout(User.self)
return try await req.view.render("login")
}
@Sendable
func home(req: Request) async throws -> View {
try await req.view.render("home")
}
@Sendable
func users(req: Request) async throws -> View {
let users = try await api.usersIndex(req: req)
return try await req.view.render("users", ["users": users])
}
@Sendable
func employees(req: Request) async throws -> View {
let employees = try await api.getSortedEmployees(req: req)
return try await req.view.render("employees", ["employees": employees])
}
@Sendable
func postEmployeeForm(req: Request) async throws -> View {
_ = try await api.createEmployee(req: req)
let employees = try await api.getSortedEmployees(req: req)
return try await req.view.render("employee-table", ["employees": employees])
}
@Sendable
func toggleActiveEmployee(req: Request) async throws -> View {
guard let employee = try await Employee.find(req.parameters.get("employeeID"), on: req.db) else {
throw Abort(.notFound)
}
employee.active.toggle()
try await employee.save(on: req.db)
let employees = try await api.getSortedEmployees(req: req)
return try await req.view.render("employee-table", ["employees": employees])
}
@Sendable
func deleteEmployee(req: Request) async throws -> View {
_ = try await api.deleteEmployee(req: req)
let employees = try await api.getSortedEmployees(req: req)
return try await req.view.render("employee-table", ["employees": employees])
}
}
private struct UserForm: Content {
let username: String
let password: String
}
private extension ApiController {
func getSortedEmployees(req: Request) async throws -> [Employee.DTO] {
var employees = try await employeesIndex(req: req)
employees.sort { ($0.active ?? false) && !($1.active ?? false) }
employees.sort { ($0.lastName ?? "") < ($1.lastName ?? "") }
return employees
}
}

View File

@@ -2,80 +2,6 @@ import Fluent
import Vapor import Vapor
func routes(_ app: Application) throws { func routes(_ app: Application) throws {
let redirectMiddleware = User.redirectMiddleware(path: "login")
// let protected = app.grouped(redirectMiddleware)
let credentialsProtected = app.grouped(User.credentialsAuthenticator(), redirectMiddleware)
app.get { req async throws in
try await req.view.render(
"index",
Index(showNavLinks: false)
)
}
app.get("login") { req async throws -> View in
req.logger.info("login")
return try await req.view.render("login")
}
app.post("logout") { req async throws -> View in
req.auth.logout(User.self)
return try await req.view.render("login")
}
app.post("login") { req async throws -> View in
let content = try req.content.decode(UserForm.self)
guard let user = try await User.query(on: req.db)
.filter(\.$username == content.username)
.first()
else {
throw Abort(.badRequest, reason: "User not found.")
}
guard try user.verify(password: content.password) else {
throw Abort(.unauthorized, reason: "Invalid password.")
}
req.auth.login(user)
req.logger.debug("User: \(user.toDTO())")
return try await req.view.render("logged-in")
}
credentialsProtected.get("home") { req async throws in
req.logger.info("home")
return try await req.view.render("logged-in")
}
// TODO: Remove.
credentialsProtected.get("logged-in") { _ in
"Hello, logged-in!"
}
// app.get("index") { req async throws -> View in
//
// }
app.get("hello") { _ async -> String in
"Hello, world!"
}
try app.register(collection: ApiController()) try app.register(collection: ApiController())
} try app.register(collection: ViewController())
struct Index: Content {
let title: String
let showNavLinks: Bool
init(
title: String = "HHE - Purchase Orders",
showNavLinks: Bool
) {
self.title = title
self.showNavLinks = showNavLinks
}
}
struct UserForm: Content {
let username: String
let password: String
} }