feat: Moves employee views to their own controller, updates css, and employee table view.

Public/css/main.css

@@ -118,16 +118,25 @@ input[type=text], input[type=password] {
   padding: 5px;
 }
 
-.btn-delete {
+.btn {
-  display: inline-block;
-  color: red;
-  text-align: center;
   cursor: pointer;
 }
 
+.btn-edit img {
+  position: fixed;
+  right: 30px;
+  width: 30px;
+  height: 30px;
+}
+
+.btn img:hover {
+  background-color: #555;
+}
+
 .btn-delete img {
   width: 20px;
   height: 20px;
+  margin-top: 5px;
 }
 
 .btn-delete img:hover {

Public/images/pencil.svg

@@ -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 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>

Resources/Views/employee-form.leaf

@@ -0,0 +1,45 @@
+<form class="employee-form"
+      id="employee-form"
+      #if(employee.id):
+      hx-put="/employees/#(employee.id)"
+      #else:
+      hx-post="/employees"
+      #endif
+      #if(employee.id):
+      hx-target="#home-content"
+      #else:
+      hx-target="#employee-table"
+      #endif
+      #if(oob):
+      hx-swap-oob="outerHTML"
+      #endif
+      >
+  <label for="firstName">First Name</label>
+  <input type="text"
+         id="firstName"
+         name="firstName"
+         placeholder="First Name"
+         autofocus
+         required
+         #if(employee.firstName): value=#(employee.firstName) #endif
+         >
+  <br>
+  <label for="lastName">Last Name</label>
+  <input type="text"
+         id="lastName"
+         name="lastName"
+         placeholder="Last Name"
+         required
+         #if(employee.lastName): value=#(employee.lastName) #endif
+         >
+  <br>
+  <input type="submit" value=#if(employee.id): Update #else: Create #endif>
+  #if(employee.id):
+  <button hx-get="/employees/form"
+          hx-target="#employee-form"
+          hx-swap="outerHTML"
+          >
+    Reset
+  </button>
+  #endif
+</form>

Resources/Views/employee-table.leaf

@@ -26,8 +26,8 @@
       </a>
       #endif
     </td>
-    <td style="width: 30px;">
+    <td style="width: 100px;">
-        <a class="btn-delete"
+        <a class="btn btn-delete"
                 hx-delete="/employees/#(employee.id)"
                 hx-target="#employee-table"
                 hx-swap="outerHTML"
@@ -35,6 +35,11 @@
                 >
           <img src="images/trash-can.svg" alt="Delete">
         </a>
+        <a class="btn btn-edit" hx-get="/employees/#(employee.id)"
+           hx-target="#employee-form"
+           >
+           <img src="images/pencil.svg", alt="Edit">
+        </a>
     </td>
 
   </tr>

Resources/Views/employees.leaf

@@ -1,22 +1,10 @@
-<div id="home-conent" class="container">
+<div id="home-content" class="container" #if(oob): hx-swap-oob="outerHTML" #endif>
   <div class="container">
     <h1>Employees</h1>
     <br>
     <p>Employees are who purchase orders can be generated for.</p>
     <br>
   </div>
-  <form class="employee-form"
+  #extend("employee-form", 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>

Resources/Views/user-table.leaf

@@ -0,0 +1,12 @@
+<table id="user-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>

Resources/Views/users.leaf

@@ -1,19 +1,9 @@
 <div id="home-content" class="container">
   <div class="container">
     <h1>Users</h1>
+    <br>
     <p>Users are people that can login and generate puchase orders for employees.</p>
     <br>
   </div>
-  <table>
+  #extend("user-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>

Sources/App/Controllers/EmployeeViewController.swift

@@ -0,0 +1,111 @@
+import Fluent
+import Leaf
+import Vapor
+
+struct EmployeeViewController: RouteCollection {
+
+  private let api = ApiController()
+
+  func boot(routes: any RoutesBuilder) throws {
+    let employees = routes.protected.grouped("employees")
+
+    // MARK: Protected routes.
+
+    employees.get(use: employees(req:))
+    employees.get("form", use: employeeForm(req:))
+    employees.post(use: postEmployeeForm(req:))
+    employees.group(":employeeID") {
+      $0.get(use: editEmployee(req:))
+      $0.delete(use: deleteEmployee(req:))
+      $0.put(use: updateEmployee(req:))
+      $0.post("toggle-active", use: toggleActiveEmployee(req:))
+    }
+  }
+
+  @Sendable
+  func employees(req: Request) async throws -> View {
+    return try await req.view.render("employees", EmployeesCTX(api: api, req: req))
+  }
+
+  @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])
+  }
+
+  @Sendable
+  func editEmployee(req: Request) async throws -> View {
+    guard let employee = try await Employee.find(req.parameters.get("employeeID"), on: req.db) else {
+      throw Abort(.notFound)
+    }
+    return try await req.view.render("employee-form", EmployeeFormCTX(employee: employee.toDTO()))
+  }
+
+  @Sendable
+  func updateEmployee(req: Request) async throws -> View {
+    _ = try await api.updateEmployee(req: req)
+    return try await req.view.render("employees", EmployeesCTX(oob: true, api: api, req: req))
+  }
+
+  @Sendable
+  func employeeForm(req: Request) async throws -> View {
+    try await req.view.render("employee-form", EmployeeFormCTX())
+  }
+
+}
+
+private struct EmployeesCTX: Content {
+  let oob: Bool
+  let employees: [Employee.DTO]
+  let form: EmployeeFormCTX
+
+  init(
+    oob: Bool = false,
+    employee: Employee? = nil,
+    api: ApiController,
+    req: Request
+  ) async throws {
+    self.oob = oob
+    self.employees = try await api.getSortedEmployees(req: req)
+    self.form = .init(employee: employee.map { $0.toDTO() })
+  }
+}
+
+private struct EmployeeFormCTX: Content {
+  let employee: Employee.DTO?
+  let oob: Bool
+
+  init(employee: Employee.DTO? = nil) {
+    self.employee = employee
+    self.oob = employee != nil
+  }
+}
+
+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
+  }
+}

Sources/App/Controllers/ViewController.swift

@@ -7,9 +7,8 @@ struct ViewController: RouteCollection {
   private let api = ApiController()
 
   func boot(routes: any RoutesBuilder) throws {
-    let protected = routes.grouped(User.credentialsAuthenticator(), User.redirectMiddleware(path: "login"))
+    let protected = routes.protected
     let login = routes.grouped("login")
-    let employees = protected.grouped("employees")
 
     // MARK: - Non-protected routes.
 
@@ -23,12 +22,7 @@ struct ViewController: RouteCollection {
     protected.get("home", use: home(req:))
     protected.get("users", use: users(req:))
 
-    employees.get(use: employees(req:))
+    try routes.register(collection: EmployeeViewController())
-    employees.post(use: postEmployeeForm(req:))
-    employees.group(":employeeID") {
-      $0.delete(use: deleteEmployee(req:))
-      $0.post("toggle-active", use: toggleActiveEmployee(req:))
-    }
   }
 
   @Sendable
@@ -66,6 +60,8 @@ struct ViewController: RouteCollection {
     return try await req.view.render("login")
   }
 
+  // TODO: Add route parameters for active route / tab.
+
   @Sendable
   func home(req: Request) async throws -> View {
     try await req.view.render("home")
@@ -77,50 +73,9 @@ struct ViewController: RouteCollection {
     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
-  }
-}

Sources/App/Extensions/RouteBuilder+protected.swift

@@ -0,0 +1,10 @@
+import Vapor
+
+extension RoutesBuilder {
+
+  // Used to ensure views are protected, redirects users to the login page if they're
+  // not authenticated.
+  var protected: any RoutesBuilder {
+    grouped(User.credentialsAuthenticator(), User.redirectMiddleware(path: "login"))
+  }
+}

Sources/App/Models/Employee.swift

@@ -2,6 +2,8 @@ import Fluent
 import struct Foundation.UUID
 import Vapor
 
+// TODO: Add soft-delete??
+
 /// The employee database model.
 ///
 /// An employee is someone that PO's can be generated for. They can be either a field