-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathemployee_form.html
115 lines (108 loc) · 5.52 KB
/
employee_form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<!-- This is for using Thymeleaf -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Employee Form</title>
<!-- Compiled and minified CSS -->
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css" integrity="sha512-kFvq3/sL6+a1a6uc5ei6HGbIRZh+vOc6RJtyOwQmffcbxLPlaVJQ2j+0yV7XmfBXdiA1ln7JnCOftDjVstifCg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" integrity="sha512-wK0QgJLEuVNG1B0lHcV7zYim5rsCYm7cn/YfAx0u6ixCJiNjDCq+zFqET/9Of/vO1LbZ/lz6wPQ6ZgmU2dV7Hg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body style="max-width: 1020px; margin: 16px auto; padding: 16px" class="bg-dark opacity-75">
<h1 th:if="${editMode}" class="text-light pb-2">Edit Employee</h1>
<h1 th:unless="${editMode}" class="text-light pb-2">Create Employee</h1>
<!-- Bootstrap alert component with close button -->
<div th:if="${message}" id="popup-data">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<span >[[${message}]]</span>
<button type="button" class="btn-close-waring justify-content-md-end" style="color:red;float:right" onclick="document.getElementById('popup-data').remove();" aria-label="Close"><i class="bi bi-x-lg"></i></button>
</div>
</div>
<!-- Thymeleaf variable with a value -->
<!-- The th:action="@{/saveEmployee}" expression directs the form to POST to the /saveEmployee endpoint.
The th:object="${employee}" expression declares the model object to use for collecting the form data.
The three form fields, expressed with th:field, correspond to the fields in the Employee object. -->
<form th:action="@{/saveEmployee}" th:object="${employee}" method="post" class="bg-white shadow-lg p-3 ms-5">
<div class="row">
<span th:if="${editMode}"><input type="hidden" id="id" th:field="*{id}"></span>
<div class="input-field col s6">
<label for="first_name">First Name</label>
<input id="first_name" type="text" class="validate form-control" th:field="*{firstName}" required>
</div>
<div class="input-field col s6">
<label for="last_name">Last Name</label>
<input id="last_name" type="text" class="form-control validate" th:field="*{lastName}" required>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<label for="email">Email</label>
<input id="email" type="email" class="form-control validate" th:field="*{email}" required>
</div>
<div class="input-field col s6">
<label for="phoneNumber">Phone Number</label>
<input id="phoneNumber" type="tel" pattern="^\(?([0-9]{3})\)?[-.]?([0-9]{3})[-.]?([0-9]{4})$" class="form-control validate" th:field="*{phoneNumber}" required>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<label for="address">Address</label>
<input id="address" type="text" class="form-control validate" th:field="*{address}" required>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<label for="jobRole">Job Role</label>
<input id="jobRole" type="text" class="form-control validate" th:field="*{jobRole}" required>
</div>
<div class="input-field col s6">
<label for="department">Department</label>
<input id="department" type="text" class="form-control validate" th:field="*{department}" required>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<label for="panNumber">Pan Number</label>
<input id="panNumber" type="text" pattern="^[A-Z]{5}[0-9]{4}[A-Z]$" class="form-control validate" th:field="*{panNumber}" required>
</div>
<div class="input-field col s6">
<label for="emergencyContact">Emergency Contact</label>
<input id="emergencyContact" type="tel" pattern="^\(?([0-9]{3})\)?[-.]?([0-9]{3})[-.]?([0-9]{4})$" class="form-control validate" th:field="*{emergencyContact}">
</div>
</div>
<div class="row">
<div class="input-field col s6">
<label for="startDate">Start Date</label>
<input id="startDate" type="date" class="form-control validate" th:field="*{startDate}" required>
</div>
<div class="input-field col s6">
<label for="salary">Salary</label>
<input id="salary" type="text" pattern="\d+(\.\d{2})?" class="form-control validate" th:field="*{salary}" required>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<label for="highestQualification">Highest Qualification</label>
<input id="highestQualification" type="text" class="form-control validate" th:field="*{highestQualification}" required>
</div>
<div class="input-field col s6">
<label for="experience">Experience</label>
<input id="experience" type="text" class="form-control validate" th:field="*{experience}">
</div>
</div>
<br>
<button type="submit" class="btn btn-primary" th:text="${editMode} ? 'Update' : 'Create'"></button>
<a href="/" class="btn btn-secondary">Cancel</a>
</form>
<!-- The link which sends GET request to "/" -->
<a th:href="@{/}" class="pt-2 ps-3 text-light fs-1 fw-semibold">Back</a>
</body>
<script th:inline="javascript">
var msg1 = [[${message}]];
console.log(msg1);
</script>
</html>