У меня есть некоторые проблемы с тем, как я буду реализовывать всплывающее окно со ссылкой. В настоящее время я использую Spring-boot с Thymeleaf
. Я планирую реализовать всплывающее окно после нажатия кнопки «Редактировать». В настоящее время он отображается на новой вкладке.
Вот HTML-код:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="template::header">
</head>
<body>
<div class="d-flex" id="wrapper">
<div th:insert="template::sidebar">
</div>
<div id="page-content-wrapper">
<nav th:insert="template::navbar">
</nav>
<div class="container-fluid">
<h1> Employee List </h1>
<a href="/admin/employees/new">Add new Employee</a><br/><br/>
<table border="1" cellpadding="10">
<thead>
<tr>
<th> Employee Name </th>
<th> Designation </th>
<th> Credentials </th>
<th> Department </th>
<th> Image </th>
<th> Image filename </th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr th:each="employee: ${employees}">
<td th:text="${employee.name}"></td>
<td th:text="${employee.designation}"></td>
<td th:text="${employee.credentials}"></td>
<td th:text="${employee.departmentName == null} ? 'Empty' : ${employee.departmentName}"></td>
<td><img th:src="@{'/uploads/' + ${employee.image_fn}}"/></td>
<td th:text="${employee.image_fn}"></td>
<td>
<a th:href="@{'/admin/employees/edit/' + ${employee.name}}" th:target="_blank"><button type="button" class="btn btn-primary">Edit</button></a> <!--Edit Button must launch a pop up window, but is currently launching only on new tab-->
<!-- -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#empDeleteConfirm">Delete</button>
<a th:href="@{'/admin/employees/imageUpload/' + ${employee.name}}">Upload Image</a>
</td>
<div class="modal fade" id="empDeleteConfirm" tabindex="-1" role="dialog" aria-labelledby="empDeleteConfirm" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="empDeleteConfirm">Are you sure?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you want to delete this employee?
</div>
<div class="modal-footer">
<a th:href="@{'/admin/employees/delete/' + ${employee.name}}"><button type="button" class="btn btn-primary">Delete</button></a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</tr>
</tbody>
</table>
<!-- Modal -->
</div>
</div>
</div>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
</body>
</html>
Вот окно, которое будет отображаться во всплывающем окне:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="template::header">
</head>
<body>
<div class="d-flex" id="wrapper">
<!-- <div th:insert="template::sidebar">
</div> -->
<div id="page-content-wrapper">
<!-- <nav th:insert="template::navbar">
</nav> -->
<div class="container-fluid" align="center">
<h1> Edit Employee </h1>
<form action="#" th:action="@{/admin/employees/update}" th:object="${employee}" method="post" th:fragment="empEdit">
<table border="0" cellpadding="10">
<td><input type="hidden" th:field="*{name}"/></td>
<td><input type="hidden" th:field="*{image_fn}"/></td>
<tr>
<td> Designation: </td>
<td><input type="text" th:field="*{designation}"/></td>
</tr>
<tr>
<td> Credentials: </td>
<td><input type="text" th:field="*{credentials}"/></td>
</tr>
<tr>
<select th:field="*{department}">
<option th:each="department: ${departments}" th:value="${department.name}" th:text="${department.description}"></option>
</select>
</tr>
<tr>
<td><button type="submit">Save</button></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
</body>
</html>
Использование этихконтроллер:
import com.ppt.contentmanagementsystem.dao.DepartmentDAO;
import com.ppt.contentmanagementsystem.dao.EmployeeDAO;
import com.ppt.contentmanagementsystem.model.Department;
import com.ppt.contentmanagementsystem.model.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.List;
import java.util.Optional;
@Controller
public class EmployeeVC {
@Autowired
EmployeeDAO employeeDAO;
@Autowired
DepartmentDAO departmentDAO;
@GetMapping("/admin/employees")
public String employeesHomePage(Model model){
List<Employee> employees = employeeDAO.getAllEmployees();
model.addAttribute("employees", employees);
model.addAttribute("title", "Employees");
return "employeeHome";
}
@GetMapping("/admin/employees/new")
public String newEmployeePage(Model model){
Employee employee = new Employee();
List<Department> departments = departmentDAO.getAllDepartments();
model.addAttribute("employee", employee);
model.addAttribute("departments", departments);
return "employeeNew";
}
@PostMapping("/admin/employees/new")
public String addEmployeePage(@ModelAttribute("employee") Employee employee){
employeeDAO.addEmployee(employee);
return "redirect:/admin/employees";
}
@GetMapping("/admin/employees/edit/{id}")
public String editEmployeePage(Model model, @PathVariable String id){
Optional<Employee> eopt = employeeDAO.getEmployee(id);
Employee employee = eopt.get();
List<Department> departments = departmentDAO.getAllDepartments();
model.addAttribute("employee", employee);
model.addAttribute("departments", departments);
model.addAttribute("title", "Employee Edit");
return "employeeEdit";
}
@GetMapping("/admin/employees/imageUpload/{id}")
public String uploadEmployeeImagePage(Model model, @PathVariable String id){
Optional<Employee> eopt = employeeDAO.getEmployee(id);
Employee employee = eopt.get();
model.addAttribute("employee", employee);
model.addAttribute("title", "Employee Image");
return "employeeImage";
}
@PostMapping("/admin/employees/imageUpload")
public String updateEmployeeImage(@ModelAttribute("employee") Employee employee, @RequestParam("imageFile") MultipartFile imageFile) throws IOException{
employeeDAO.saveEmployeeImage(employee, imageFile);
return "redirect:/admin/employees";
}
@PostMapping("/admin/employees/update")
public String updateEmployeePage(@ModelAttribute("employee") Employee employee){
employeeDAO.updateEmployee(employee);
return "redirect:/admin/employees";
}
@GetMapping("/admin/employees/delete/{id}")
public String deleteEmployeePage(@PathVariable String id){
employeeDAO.deleteEmployee(id);
return "redirect:/admin/employees";
}
}