nngo/GOV_QR_Codes_Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Delete Employee button

Browse Source
This commit is contained in:
nngo
2025-08-27 21:26:12 -04:00
parent 41b10a5a03
commit 18bc24d428
3 changed files with 338 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/employees.html
+201 -144
View File
@@ -1,13 +1,11 @@
{% extends "base_authenticated.html" %}
{% set page_title = "Employee Management" %}
{% block title %}{{ page_title }}{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/employees.css') }}">
{% endblock %}
{% block content %}
{% extends "base_authenticated.html" %} {% set page_title = "Employee
Management" %} {% block title %}{{ page_title }}{% endblock %} {% block
extra_head %}
<link
rel="stylesheet"
href="{{ url_for('static', filename='css/employees.css') }}"
/>
{% endblock %} {% block content %}
<div class="employees-page">
<!-- Page Header -->
<div class="employees-header">
@@ -18,13 +16,13 @@
Back to Dashboard
</a>
</div>
<h1><i class="fas fa-users"></i> Employee Management</h1>
<p class="header-description">
Manage employee records and view attendance statistics
</p>
</div>
<div class="header-actions">
{% if session.role == 'admin' %}
<a href="{{ url_for('create_employee') }}" class="btn btn-primary">
@@ -46,7 +44,7 @@
<p>Total Employees</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-id-badge"></i>
@@ -56,7 +54,7 @@
<p>With Job Titles</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-briefcase"></i>
@@ -66,7 +64,7 @@
<p>Unique Job Titles</p>
</div>
</div>
{% if search %}
<div class="stat-card search-results">
<div class="stat-icon">
@@ -84,19 +82,23 @@
<div class="search-section">
<form method="GET" class="search-form">
<div class="search-input-group">
<input
type="text"
name="search"
value="{{ search }}"
<input
type="text"
name="search"
value="{{ search }}"
placeholder="Search by name, employee ID, or job title..."
class="search-input"
autocomplete="off"
>
/>
<button type="submit" class="search-btn">
<i class="fas fa-search"></i>
</button>
{% if search %}
<a href="{{ url_for('employees') }}" class="clear-search-btn" title="Clear search">
<a
href="{{ url_for('employees') }}"
class="clear-search-btn"
title="Clear search"
>
<i class="fas fa-times"></i>
</a>
{% endif %}
@@ -108,17 +110,13 @@
<div class="employees-table-container">
<div class="table-header">
<h2>
{% if search %}
Search Results for "{{ search }}"
{% else %}
All Employees
{% endif %}
{% if search %} Search Results for "{{ search }}" {% else %} All
Employees {% endif %}
</h2>
<div class="table-info">
Showing {{ employees.items|length }} of {{ employees.total }} employees
{% if employees.pages > 1 %}
(Page {{ employees.page }} of {{ employees.pages }})
{% endif %}
{% if employees.pages > 1 %} (Page {{ employees.page }} of {{
employees.pages }}) {% endif %}
</div>
</div>
@@ -137,12 +135,14 @@
<tbody>
{% for employee in employees.items %}
<tr class="employee-row" data-employee-id="{{ employee.id }}">
<td class="row-number">{{ loop.index + (employees.page - 1) * employees.per_page }}</td>
<td class="row-number">
{{ loop.index + (employees.page - 1) * employees.per_page }}
</td>
<td class="employee-id">
<span class="id-badge">{{ employee.id }}</span>
</td>
<td class="employee-name">
<div class="name-container">
<div class="avatar">
@@ -154,38 +154,44 @@
</div>
</div>
</td>
<td class="employee-title">
{% if employee.title %}
<span class="title-badge">{{ employee.title }}</span>
<span class="title-badge">{{ employee.title }}</span>
{% else %}
<span class="no-title">No Title</span>
<span class="no-title">No Title</span>
{% endif %}
</td>
<td class="contract-id">
<span class="contract-badge">{{ employee.contractId }}</span>
</td>
<td class="actions">
<div class="action-buttons">
<a href="{{ url_for('employee_detail', employee_index=employee.index) }}"
class="btn btn-sm btn-info"
title="View Details">
<a
href="{{ url_for('employee_detail', employee_index=employee.index) }}"
class="btn btn-sm btn-info"
title="View Details"
>
<i class="fas fa-eye"></i>
</a>
{% if session.role == 'admin' %}
<a href="{{ url_for('edit_employee', employee_index=employee.index) }}"
class="btn btn-sm btn-warning"
title="Edit Employee">
<a
href="{{ url_for('edit_employee', employee_index=employee.index) }}"
class="btn btn-sm btn-warning"
title="Edit Employee"
>
<i class="fas fa-edit"></i>
</a>
<button class="btn btn-sm btn-danger delete-btn"
data-employee-index="{{ employee.index }}"
data-employee-name="{{ employee.full_name }}"
title="Delete Employee">
<button
class="btn btn-sm btn-danger delete-btn"
data-employee-index="{{ employee.index }}"
data-employee-name="{{ employee.full_name }}"
title="Delete Employee"
>
<i class="fas fa-trash"></i>
</button>
{% endif %}
@@ -205,41 +211,44 @@
<!-- Previous Page -->
{% if employees.has_prev %}
<li>
<a href="{{ url_for('employees', page=employees.prev_num, search=search) }}"
class="pagination-link">
<a
href="{{ url_for('employees', page=employees.prev_num, search=search) }}"
class="pagination-link"
>
<i class="fas fa-chevron-left"></i>
Previous
</a>
</li>
{% endif %}
<!-- Page Numbers -->
{% for page_num in employees.iter_pages() %}
{% if page_num %}
{% if page_num != employees.page %}
<li>
<a href="{{ url_for('employees', page=page_num, search=search) }}"
class="pagination-link">
{{ page_num }}
</a>
</li>
{% else %}
<li>
<span class="pagination-link current">{{ page_num }}</span>
</li>
{% endif %}
{% else %}
<li>
<span class="pagination-link">…</span>
</li>
{% endif %}
{% endfor %}
{% for page_num in employees.iter_pages() %} {% if page_num %} {% if
page_num != employees.page %}
<li>
<a
href="{{ url_for('employees', page=page_num, search=search) }}"
class="pagination-link"
>
{{ page_num }}
</a>
</li>
{% else %}
<li>
<span class="pagination-link current">{{ page_num }}</span>
</li>
{% endif %} {% else %}
<li>
<span class="pagination-link">…</span>
</li>
{% endif %} {% endfor %}
<!-- Next Page -->
{% if employees.has_next %}
<li>
<a href="{{ url_for('employees', page=employees.next_num, search=search) }}"
class="pagination-link">
<a
href="{{ url_for('employees', page=employees.next_num, search=search) }}"
class="pagination-link"
>
Next
<i class="fas fa-chevron-right"></i>
</a>
@@ -257,18 +266,15 @@
<i class="fas fa-users-slash"></i>
</div>
<h3>
{% if search %}
No employees found for "{{ search }}"
{% else %}
No employees found
{% endif %}
{% if search %} No employees found for "{{ search }}" {% else %} No
employees found {% endif %}
</h3>
<p>
{% if search %}
Try adjusting your search terms or <a href="{{ url_for('employees') }}">view all employees</a>.
{% else %}
Get started by <a href="{{ url_for('create_employee') }}">adding your first employee</a>.
{% endif %}
{% if search %} Try adjusting your search terms or
<a href="{{ url_for('employees') }}">view all employees</a>. {% else %}
Get started by
<a href="{{ url_for('create_employee') }}">adding your first employee</a
>. {% endif %}
</p>
</div>
{% endif %}
@@ -285,15 +291,19 @@
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete employee <strong id="deleteEmployeeName"></strong>?</p>
<p>
Are you sure you want to delete employee
<strong id="deleteEmployeeName"></strong>?
</p>
<p class="warning-text">
<i class="fas fa-warning"></i>
This action cannot be undone. The employee will be permanently removed from the system.
This action cannot be undone. The employee will be permanently removed
from the system.
</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-modal="deleteModal">Cancel</button>
<form id="deleteForm" method="POST" style="display: inline;">
<form id="deleteForm" method="POST" style="display: inline">
<button type="submit" class="btn btn-danger">
<i class="fas fa-trash"></i>
Delete Employee
@@ -302,73 +312,120 @@
</div>
</div>
</div>
{% endblock %}
{% block extra_scripts %}
{% endblock %} {% block extra_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener("DOMContentLoaded", function () {
console.log("🔄 Employee page JavaScript loaded");
// Delete button functionality
const deleteButtons = document.querySelectorAll('.delete-btn');
const deleteModal = document.getElementById('deleteModal');
const deleteForm = document.getElementById('deleteForm');
const deleteEmployeeName = document.getElementById('deleteEmployeeName');
deleteButtons.forEach(button => {
button.addEventListener('click', function() {
const employeeIndex = this.getAttribute('data-employee-index');
const employeeName = this.getAttribute('data-employee-name');
deleteEmployeeName.textContent = employeeName;
deleteForm.action = `/employees/${employeeIndex}/delete`;
deleteModal.style.display = 'flex';
});
});
// Modal close functionality
document.querySelectorAll('[data-modal]').forEach(element => {
element.addEventListener('click', function() {
const modalId = this.getAttribute('data-modal');
document.getElementById(modalId).style.display = 'none';
});
});
// Close modal when clicking outside
deleteModal.addEventListener('click', function(e) {
if (e.target === this) {
this.style.display = 'none';
const deleteButtons = document.querySelectorAll(".delete-btn");
const deleteModal = document.getElementById("deleteModal");
const deleteForm = document.getElementById("deleteForm");
const deleteEmployeeName = document.getElementById("deleteEmployeeName");
console.log(`📊 Found ${deleteButtons.length} delete buttons`);
console.log("🔍 Delete modal:", deleteModal);
console.log("📝 Delete form:", deleteForm);
deleteButtons.forEach((button) => {
button.addEventListener("click", function (event) {
event.preventDefault();
event.stopPropagation();
const employeeIndex = this.getAttribute("data-employee-index");
const employeeName = this.getAttribute("data-employee-name");
console.log(
`🗑️ Delete button clicked for employee: ${employeeName} (Index: ${employeeIndex})`
);
if (deleteEmployeeName) {
deleteEmployeeName.textContent = employeeName;
}
if (deleteForm) {
deleteForm.action = `/employees/${employeeIndex}/delete`;
console.log(`📋 Form action set to: ${deleteForm.action}`);
}
if (deleteModal) {
deleteModal.style.display = "flex";
deleteModal.style.visibility = "visible";
deleteModal.style.opacity = "1";
console.log("✅ Modal should be visible now");
}
});
});
// Search form auto-submit with debouncing
const searchInput = document.querySelector('.search-input');
// Enhanced modal close functionality
document.querySelectorAll("[data-modal]").forEach((element) => {
element.addEventListener("click", function (event) {
event.preventDefault();
const modalId = this.getAttribute("data-modal");
const modal = document.getElementById(modalId);
if (modal) {
modal.style.display = "none";
modal.style.visibility = "hidden";
modal.style.opacity = "0";
console.log(`❌ Modal ${modalId} closed`);
}
});
});
// Close modal when clicking outside
if (deleteModal) {
deleteModal.addEventListener("click", function (e) {
if (e.target === this) {
this.style.display = "none";
this.style.visibility = "hidden";
this.style.opacity = "0";
console.log("❌ Modal closed by clicking outside");
}
});
}
// Enhanced form submission logging
if (deleteForm) {
deleteForm.addEventListener("submit", function (event) {
console.log(`🚀 Form submitting to: ${this.action}`);
console.log("📊 Form method:", this.method);
});
}
// Search form auto-submit with debouncing (unchanged)
const searchInput = document.querySelector(".search-input");
let searchTimeout;
searchInput.addEventListener('input', function() {
if (searchInput) {
searchInput.addEventListener("input", function () {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
if (this.value.length >= 3 || this.value.length === 0) {
this.form.submit();
}
if (this.value.length >= 3 || this.value.length === 0) {
this.form.submit();
}
}, 500);
});
// Highlight search terms
});
}
// Highlight search terms (unchanged)
const searchTerm = "{{ search }}";
if (searchTerm) {
highlightSearchTerms(searchTerm);
highlightSearchTerms(searchTerm);
}
function highlightSearchTerms(term) {
const elements = document.querySelectorAll('.employee-name h4, .employee-name p, .employee-title .title-badge, .employee-id .id-badge');
const regex = new RegExp(`(${term})`, 'gi');
elements.forEach(element => {
const text = element.textContent;
if (text.toLowerCase().includes(term.toLowerCase())) {
element.innerHTML = text.replace(regex, '<mark>$1</mark>');
}
});
const elements = document.querySelectorAll(
".employee-name h4, .employee-name p, .employee-title .title-badge, .employee-id .id-badge"
);
const regex = new RegExp(`(${term})`, "gi");
elements.forEach((element) => {
const text = element.textContent;
if (text.toLowerCase().includes(term.toLowerCase())) {
element.innerHTML = text.replace(regex, "<mark>$1</mark>");
}
});
}
});
});
</script>
{% endblock %}
{% endblock %}