Sep 11 - Reupload the code
This commit is contained in:
@@ -0,0 +1,453 @@
|
||||
{% extends "base_authenticated.html" %} {% set page_title = "Edit Employee" %}
|
||||
{% block title %}{{ page_title }}{% endblock %} {% block extra_head %}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="{{ url_for('static', filename='css/employees.css') }}"
|
||||
/>
|
||||
<style>
|
||||
.form-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
background: #ffffff;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
background: #f8fafc;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #f59e0b, #d97706);
|
||||
}
|
||||
|
||||
.form-header h2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-header h2 i {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.employee-info {
|
||||
background: #fef3c7;
|
||||
border: 1px solid #fbbf24;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.employee-info h3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #92400e;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.employee-info p {
|
||||
color: #92400e;
|
||||
font-size: 0.875rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.form-body {
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-label.required::after {
|
||||
content: " *";
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 75%;
|
||||
padding: 1rem 1.25rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #f59e0b;
|
||||
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
.form-input.error {
|
||||
border-color: #dc2626;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
font-size: 0.875rem;
|
||||
color: #6b7280;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: flex-end;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.form-container {
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.form-container {
|
||||
max-width: 90%;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %} {% block content %}
|
||||
<div class="employees-page">
|
||||
<!-- Page Header -->
|
||||
<div class="employees-header">
|
||||
<div class="header-content">
|
||||
<div class="header-navigation">
|
||||
<a href="{{ url_for('employees.employees') }}" class="back-button">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
Back to Employees
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h1><i class="fas fa-user-edit"></i> Edit Employee</h1>
|
||||
<p class="header-description">
|
||||
Update employee information in the system
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Container -->
|
||||
<div class="form-container">
|
||||
<div class="form-header">
|
||||
<h2>
|
||||
<i class="fas fa-user-edit"></i>
|
||||
Employee Information
|
||||
</h2>
|
||||
|
||||
<div class="employee-info">
|
||||
<h3>
|
||||
<i class="fas fa-info-circle"></i>
|
||||
Current Employee
|
||||
</h3>
|
||||
<p><strong>{{ employee.full_name }}</strong> (ID: {{ employee.id }})</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-body">
|
||||
<form method="POST" id="editEmployeeForm">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<!-- Employee ID and Contract ID Row -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="employee_id" class="form-label required"
|
||||
>Employee ID</label
|
||||
>
|
||||
<input
|
||||
type="number"
|
||||
id="employee_id"
|
||||
name="employee_id"
|
||||
class="form-input"
|
||||
required
|
||||
min="1"
|
||||
placeholder="Enter unique employee ID"
|
||||
value="{{ request.form.get('employee_id', employee.id) }}"
|
||||
/>
|
||||
<div class="form-help">Must be a unique numeric identifier</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contract_id" class="form-label">Project</label>
|
||||
<select
|
||||
id="contract_id"
|
||||
name="contract_id"
|
||||
class="form-input"
|
||||
required
|
||||
>
|
||||
<option value="">-- Select Project --</option>
|
||||
{% for project in projects %}
|
||||
<option
|
||||
value="{{ project.id }}"
|
||||
{% if request.form.get('contract_id') == project.id|string or (not request.form.get('contract_id') and employee.contractId == project.id) %}selected{% endif %}
|
||||
>
|
||||
{{ project.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div class="form-help">
|
||||
Select the project this employee will be assigned to
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- First Name and Last Name Row -->
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="first_name" class="form-label required"
|
||||
>First Name</label
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="first_name"
|
||||
name="first_name"
|
||||
class="form-input"
|
||||
required
|
||||
maxlength="50"
|
||||
placeholder="Enter first name"
|
||||
value="{{ request.form.get('first_name', employee.firstName) }}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="last_name" class="form-label required">Last Name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="last_name"
|
||||
name="last_name"
|
||||
class="form-input"
|
||||
required
|
||||
maxlength="50"
|
||||
placeholder="Enter last name"
|
||||
value="{{ request.form.get('last_name', employee.lastName) }}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Job Title -->
|
||||
<div class="form-group">
|
||||
<label for="title" class="form-label">Job Title</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
class="form-input"
|
||||
maxlength="20"
|
||||
placeholder="Enter job title (optional)"
|
||||
value="{{ request.form.get('title', employee.title or '') }}"
|
||||
/>
|
||||
<div class="form-help">Optional field, maximum 20 characters</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="form-actions">
|
||||
<a href="{{ url_for('employees.employees') }}" class="btn btn-secondary">
|
||||
<i class="fas fa-times"></i>
|
||||
Cancel
|
||||
</a>
|
||||
<button type="submit" class="btn btn-warning">
|
||||
<i class="fas fa-save"></i>
|
||||
Update Employee
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %} {% block extra_scripts %}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const form = document.getElementById("editEmployeeForm");
|
||||
const employeeIdInput = document.getElementById("employee_id");
|
||||
const firstNameInput = document.getElementById("first_name");
|
||||
const lastNameInput = document.getElementById("last_name");
|
||||
|
||||
// Store original values for change detection
|
||||
const originalValues = {
|
||||
employee_id: employeeIdInput.value,
|
||||
first_name: firstNameInput.value,
|
||||
last_name: lastNameInput.value,
|
||||
title: document.getElementById("title").value,
|
||||
contract_id: document.getElementById("contract_id").value,
|
||||
};
|
||||
|
||||
// Form validation
|
||||
form.addEventListener("submit", function (e) {
|
||||
let isValid = true;
|
||||
|
||||
// Clear previous error states
|
||||
document.querySelectorAll(".form-input").forEach((input) => {
|
||||
input.classList.remove("error");
|
||||
});
|
||||
|
||||
// Validate Employee ID
|
||||
if (!employeeIdInput.value.trim()) {
|
||||
employeeIdInput.classList.add("error");
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Validate First Name
|
||||
if (!firstNameInput.value.trim()) {
|
||||
firstNameInput.classList.add("error");
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Validate Last Name
|
||||
if (!lastNameInput.value.trim()) {
|
||||
lastNameInput.classList.add("error");
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
e.preventDefault();
|
||||
alert("Please fill in all required fields.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if any changes were made
|
||||
const currentValues = {
|
||||
employee_id: employeeIdInput.value,
|
||||
first_name: firstNameInput.value,
|
||||
last_name: lastNameInput.value,
|
||||
title: document.getElementById("title").value,
|
||||
contract_id: document.getElementById("contract_id").value,
|
||||
};
|
||||
|
||||
let hasChanges = false;
|
||||
for (let key in originalValues) {
|
||||
if (originalValues[key] !== currentValues[key]) {
|
||||
hasChanges = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!hasChanges) {
|
||||
e.preventDefault();
|
||||
alert(
|
||||
"No changes detected. Please modify at least one field to update the employee."
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Confirm update if employee ID changed
|
||||
if (originalValues.employee_id !== currentValues.employee_id) {
|
||||
if (
|
||||
!confirm(
|
||||
`You are changing the Employee ID from ${originalValues.employee_id} to ${currentValues.employee_id}. This may affect attendance records. Are you sure?`
|
||||
)
|
||||
) {
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-capitalize names
|
||||
[firstNameInput, lastNameInput].forEach((input) => {
|
||||
input.addEventListener("input", function () {
|
||||
const words = this.value.split(" ");
|
||||
const capitalizedWords = words.map((word) => {
|
||||
if (word.length > 0) {
|
||||
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
|
||||
}
|
||||
return word;
|
||||
});
|
||||
this.value = capitalizedWords.join(" ");
|
||||
});
|
||||
});
|
||||
|
||||
// Employee ID validation
|
||||
employeeIdInput.addEventListener("input", function () {
|
||||
// Remove any non-numeric characters
|
||||
this.value = this.value.replace(/[^0-9]/g, "");
|
||||
|
||||
// Remove leading zeros
|
||||
if (this.value.length > 1) {
|
||||
this.value = this.value.replace(/^0+/, "");
|
||||
}
|
||||
});
|
||||
|
||||
const contractIdSelect = document.getElementById("contract_id");
|
||||
contractIdSelect.addEventListener("change", function () {
|
||||
if (this.value) {
|
||||
this.classList.remove("error");
|
||||
// Remove the yellow highlight for changes
|
||||
this.style.borderLeft = "";
|
||||
}
|
||||
});
|
||||
|
||||
if (!contractIdSelect.value) {
|
||||
contractIdSelect.classList.add("error");
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
// Highlight changed fields
|
||||
function highlightChanges() {
|
||||
Object.keys(originalValues).forEach((key) => {
|
||||
const input = document.getElementById(key);
|
||||
if (input && input.value !== originalValues[key]) {
|
||||
input.style.borderLeft = "4px solid #f59e0b";
|
||||
} else if (input) {
|
||||
input.style.borderLeft = "";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add change detection
|
||||
document.querySelectorAll(".form-input").forEach((input) => {
|
||||
input.addEventListener("input", highlightChanges);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user