799 lines
32 KiB
HTML
799 lines
32 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Customers (Rolodex) - Delphi Database{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h2><i class="bi bi-person-rolodex"></i> Customers (Rolodex)</h2>
|
|
<div>
|
|
<button class="btn btn-success" id="addCustomerBtn">
|
|
<i class="bi bi-plus-circle"></i> New Customer (Ctrl+N)
|
|
</button>
|
|
<button class="btn btn-info" id="statsBtn">
|
|
<i class="bi bi-graph-up"></i> Statistics
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search and Filter Panel -->
|
|
<div class="card customer-search-panel mb-3">
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<label for="searchInput" class="form-label">Search Customers</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="Name, ID, City, Email...">
|
|
<button class="btn btn-outline-secondary" type="button" id="searchBtn">
|
|
<i class="bi bi-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="groupFilter" class="form-label">Group Filter</label>
|
|
<select class="form-select" id="groupFilter">
|
|
<option value="">All Groups</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="stateFilter" class="form-label">State Filter</label>
|
|
<select class="form-select" id="stateFilter">
|
|
<option value="">All States</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="phoneSearch" class="form-label">Phone Search</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="phoneSearch" placeholder="Phone number...">
|
|
<button class="btn btn-outline-secondary" type="button" id="phoneSearchBtn">
|
|
<i class="bi bi-telephone"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customer List -->
|
|
<div class="card customer-table-container">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover" id="customersTable">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Group</th>
|
|
<th>City, State</th>
|
|
<th>Phone</th>
|
|
<th>Email</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="customersTableBody">
|
|
<!-- Customer rows will be populated here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav aria-label="Customer pagination">
|
|
<ul class="pagination justify-content-center" id="pagination">
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Customer Modal -->
|
|
<div class="modal fade customer-modal" id="customerModal" tabindex="-1" aria-labelledby="customerModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="customerModalLabel">Customer Details</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="customerForm">
|
|
<div class="row g-3">
|
|
<!-- Customer ID and Basic Info -->
|
|
<div class="col-md-6">
|
|
<div class="card customer-form-section">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">Basic Information</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="customerId" class="form-label">Customer ID *</label>
|
|
<input type="text" class="form-control" id="customerId" name="id" required>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label for="prefix" class="form-label">Prefix</label>
|
|
<input type="text" class="form-control" id="prefix" name="prefix" placeholder="Mr., Ms., Dr.">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="suffix" class="form-label">Suffix</label>
|
|
<input type="text" class="form-control" id="suffix" name="suffix" placeholder="Jr., Sr., M.D.">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="first" class="form-label">First Name</label>
|
|
<input type="text" class="form-control" id="first" name="first">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="middle" class="form-label">Middle Name</label>
|
|
<input type="text" class="form-control" id="middle" name="middle">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="last" class="form-label">Last Name / Company *</label>
|
|
<input type="text" class="form-control" id="last" name="last" required>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label for="title" class="form-label">Title</label>
|
|
<input type="text" class="form-control" id="title" name="title" placeholder="President, Attorney">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="group" class="form-label">Group</label>
|
|
<input type="text" class="form-control" id="group" name="group" placeholder="Client, Personal">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address Information -->
|
|
<div class="col-md-6">
|
|
<div class="card customer-form-section">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">Address Information</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="a1" class="form-label">Address Line 1</label>
|
|
<input type="text" class="form-control" id="a1" name="a1">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="a2" class="form-label">Address Line 2</label>
|
|
<input type="text" class="form-control" id="a2" name="a2">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="a3" class="form-label">Address Line 3</label>
|
|
<input type="text" class="form-control" id="a3" name="a3">
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label for="city" class="form-label">City</label>
|
|
<input type="text" class="form-control" id="city" name="city">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="abrev" class="form-label">State</label>
|
|
<input type="text" class="form-control" id="abrev" name="abrev" placeholder="TX" maxlength="2">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="zip" class="form-label">ZIP Code</label>
|
|
<input type="text" class="form-control" id="zip" name="zip">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact & Legal Info -->
|
|
<div class="col-12">
|
|
<div class="card customer-form-section">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">Contact & Legal Information</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<label for="email" class="form-label">Email</label>
|
|
<input type="email" class="form-control" id="email" name="email">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="dob" class="form-label">Date of Birth</label>
|
|
<input type="date" class="form-control" id="dob" name="dob">
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="ss_number" class="form-label">Social Security #</label>
|
|
<input type="text" class="form-control" id="ss_number" name="ss_number" placeholder="###-##-####">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="legal_status" class="form-label">Legal Status</label>
|
|
<input type="text" class="form-control" id="legal_status" name="legal_status" placeholder="Petitioner">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phone Numbers -->
|
|
<div class="col-12">
|
|
<div class="card customer-form-section">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0">Phone Numbers</h6>
|
|
<button type="button" class="btn btn-sm btn-success" id="addPhoneBtn">
|
|
<i class="bi bi-plus"></i> Add Phone
|
|
</button>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="phoneNumbers">
|
|
<!-- Phone numbers will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Memo -->
|
|
<div class="col-12">
|
|
<div class="card customer-form-section">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">Memo / Notes (Alt+M)</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<textarea class="form-control" id="memo" name="memo" rows="4" placeholder="Enter notes and comments here..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel (Esc)</button>
|
|
<button type="button" class="btn btn-danger delete-customer-btn" id="deleteCustomerBtn">
|
|
<i class="bi bi-trash"></i> Delete (Del)
|
|
</button>
|
|
<button type="button" class="btn btn-primary" id="saveCustomerBtn">
|
|
<i class="bi bi-check-circle"></i> Save (Ctrl+S)
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Modal -->
|
|
<div class="modal fade" id="statsModal" tabindex="-1" aria-labelledby="statsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="statsModalLabel">Customer Database Statistics</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" id="statsContent">
|
|
<!-- Statistics will be loaded here -->
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Customer management functionality
|
|
let currentPage = 0;
|
|
let currentSearch = '';
|
|
let isEditing = false;
|
|
let editingCustomerId = null;
|
|
|
|
// Helper function for authenticated API calls
|
|
function getAuthHeaders() {
|
|
const token = localStorage.getItem('auth_token');
|
|
return {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Content-Type': 'application/json'
|
|
};
|
|
}
|
|
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Check authentication first
|
|
const token = localStorage.getItem('auth_token');
|
|
if (!token) {
|
|
window.location.href = '/login';
|
|
return;
|
|
}
|
|
|
|
loadCustomers();
|
|
loadGroups();
|
|
loadStates();
|
|
setupEventListeners();
|
|
});
|
|
|
|
function setupEventListeners() {
|
|
// Search functionality
|
|
document.getElementById('searchBtn').addEventListener('click', performSearch);
|
|
document.getElementById('searchInput').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') performSearch();
|
|
});
|
|
|
|
// Phone search
|
|
document.getElementById('phoneSearchBtn').addEventListener('click', performPhoneSearch);
|
|
document.getElementById('phoneSearch').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') performPhoneSearch();
|
|
});
|
|
|
|
// Modal buttons
|
|
document.getElementById('addCustomerBtn').addEventListener('click', showAddCustomerModal);
|
|
document.getElementById('saveCustomerBtn').addEventListener('click', saveCustomer);
|
|
document.getElementById('deleteCustomerBtn').addEventListener('click', deleteCustomer);
|
|
document.getElementById('addPhoneBtn').addEventListener('click', addPhoneField);
|
|
document.getElementById('statsBtn').addEventListener('click', showStats);
|
|
|
|
// Form validation
|
|
document.getElementById('customerId').addEventListener('blur', validateCustomerId);
|
|
}
|
|
|
|
async function loadCustomers(page = 0, search = '') {
|
|
try {
|
|
const params = new URLSearchParams({
|
|
skip: page * 50,
|
|
limit: 50
|
|
});
|
|
|
|
if (search) params.append('search', search);
|
|
|
|
const response = await fetch(`/api/customers/?${params}`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to load customers');
|
|
|
|
const customers = await response.json();
|
|
displayCustomers(customers);
|
|
|
|
} catch (error) {
|
|
console.error('Error loading customers:', error);
|
|
showAlert('Error loading customers: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function displayCustomers(customers) {
|
|
const tbody = document.getElementById('customersTableBody');
|
|
tbody.innerHTML = '';
|
|
|
|
customers.forEach(customer => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${customer.id}</td>
|
|
<td>${formatName(customer)}</td>
|
|
<td>${customer.group || ''}</td>
|
|
<td>${formatLocation(customer)}</td>
|
|
<td>${formatPhones(customer.phone_numbers)}</td>
|
|
<td>${customer.email || ''}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-primary" onclick="editCustomer('${customer.id}')">
|
|
<i class="bi bi-pencil"></i> Edit
|
|
</button>
|
|
<button class="btn btn-sm btn-info" onclick="viewCustomer('${customer.id}')">
|
|
<i class="bi bi-eye"></i> View
|
|
</button>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
function formatName(customer) {
|
|
const parts = [];
|
|
if (customer.prefix) parts.push(customer.prefix);
|
|
if (customer.first) parts.push(customer.first);
|
|
if (customer.middle) parts.push(customer.middle);
|
|
parts.push(customer.last);
|
|
if (customer.suffix) parts.push(customer.suffix);
|
|
return parts.join(' ');
|
|
}
|
|
|
|
function formatLocation(customer) {
|
|
const parts = [];
|
|
if (customer.city) parts.push(customer.city);
|
|
if (customer.abrev) parts.push(customer.abrev);
|
|
return parts.join(', ');
|
|
}
|
|
|
|
function formatPhones(phones) {
|
|
if (!phones || phones.length === 0) return '';
|
|
return phones.map(p => `${p.location || 'Phone'}: ${p.phone}`).join('<br>');
|
|
}
|
|
|
|
async function loadGroups() {
|
|
try {
|
|
const response = await fetch('/api/customers/groups', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (response.ok) {
|
|
const groups = await response.json();
|
|
const select = document.getElementById('groupFilter');
|
|
groups.forEach(g => {
|
|
const option = document.createElement('option');
|
|
option.value = g.group;
|
|
option.textContent = g.group;
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading groups:', error);
|
|
}
|
|
}
|
|
|
|
async function loadStates() {
|
|
try {
|
|
const response = await fetch('/api/customers/states', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (response.ok) {
|
|
const states = await response.json();
|
|
const select = document.getElementById('stateFilter');
|
|
states.forEach(s => {
|
|
const option = document.createElement('option');
|
|
option.value = s.state;
|
|
option.textContent = s.state;
|
|
select.appendChild(option);
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading states:', error);
|
|
}
|
|
}
|
|
|
|
function performSearch() {
|
|
currentSearch = document.getElementById('searchInput').value;
|
|
currentPage = 0;
|
|
loadCustomers(currentPage, currentSearch);
|
|
}
|
|
|
|
async function performPhoneSearch() {
|
|
const phone = document.getElementById('phoneSearch').value;
|
|
if (!phone) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/customers/search/phone?phone=${encodeURIComponent(phone)}`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Phone search failed');
|
|
|
|
const results = await response.json();
|
|
displayPhoneSearchResults(results);
|
|
|
|
} catch (error) {
|
|
console.error('Phone search error:', error);
|
|
showAlert('Phone search failed: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function displayPhoneSearchResults(results) {
|
|
const tbody = document.getElementById('customersTableBody');
|
|
tbody.innerHTML = '';
|
|
|
|
results.forEach(result => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${result.customer.id}</td>
|
|
<td>${result.customer.name}</td>
|
|
<td>-</td>
|
|
<td>${result.customer.city}, ${result.customer.state}</td>
|
|
<td><strong>${result.location}: ${result.phone}</strong></td>
|
|
<td>-</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-primary" onclick="editCustomer('${result.customer.id}')">
|
|
<i class="bi bi-pencil"></i> Edit
|
|
</button>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
function showAddCustomerModal() {
|
|
isEditing = false;
|
|
editingCustomerId = null;
|
|
document.getElementById('customerModalLabel').textContent = 'Add New Customer';
|
|
document.getElementById('deleteCustomerBtn').classList.remove('show');
|
|
clearCustomerForm();
|
|
new bootstrap.Modal(document.getElementById('customerModal')).show();
|
|
}
|
|
|
|
async function editCustomer(customerId) {
|
|
try {
|
|
const response = await fetch(`/api/customers/${customerId}`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to load customer');
|
|
|
|
const customer = await response.json();
|
|
populateCustomerForm(customer);
|
|
|
|
isEditing = true;
|
|
editingCustomerId = customerId;
|
|
document.getElementById('customerModalLabel').textContent = 'Edit Customer';
|
|
document.getElementById('deleteCustomerBtn').classList.add('show');
|
|
document.getElementById('customerId').disabled = true;
|
|
|
|
new bootstrap.Modal(document.getElementById('customerModal')).show();
|
|
|
|
} catch (error) {
|
|
console.error('Error loading customer:', error);
|
|
showAlert('Error loading customer: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function viewCustomer(customerId) {
|
|
// Similar to editCustomer but make form read-only
|
|
editCustomer(customerId);
|
|
// TODO: Make form read-only for view mode
|
|
}
|
|
|
|
function populateCustomerForm(customer) {
|
|
const form = document.getElementById('customerForm');
|
|
const formData = new FormData(form);
|
|
|
|
// Populate basic fields
|
|
Object.keys(customer).forEach(key => {
|
|
const input = form.querySelector(`[name="${key}"]`);
|
|
if (input && customer[key] !== null) {
|
|
if (input.type === 'date' && customer[key]) {
|
|
input.value = customer[key];
|
|
} else {
|
|
input.value = customer[key] || '';
|
|
}
|
|
}
|
|
});
|
|
|
|
// Populate phone numbers
|
|
populatePhoneNumbers(customer.phone_numbers || []);
|
|
}
|
|
|
|
function populatePhoneNumbers(phones) {
|
|
const container = document.getElementById('phoneNumbers');
|
|
container.innerHTML = '';
|
|
|
|
phones.forEach((phone, index) => {
|
|
addPhoneField(phone);
|
|
});
|
|
|
|
if (phones.length === 0) {
|
|
addPhoneField();
|
|
}
|
|
}
|
|
|
|
function addPhoneField(phone = null) {
|
|
const container = document.getElementById('phoneNumbers');
|
|
const phoneDiv = document.createElement('div');
|
|
phoneDiv.className = 'row mb-2 phone-entry';
|
|
|
|
phoneDiv.innerHTML = `
|
|
<div class="col-md-4">
|
|
<input type="text" class="form-control phone-location" placeholder="Location (Home, Office, Mobile)" value="${phone?.location || ''}">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control phone-number" placeholder="Phone Number" value="${phone?.phone || ''}">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button type="button" class="btn btn-outline-danger btn-sm remove-phone">
|
|
<i class="bi bi-dash"></i>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
// Add remove functionality
|
|
phoneDiv.querySelector('.remove-phone').addEventListener('click', function() {
|
|
phoneDiv.remove();
|
|
});
|
|
|
|
container.appendChild(phoneDiv);
|
|
}
|
|
|
|
async function saveCustomer() {
|
|
const form = document.getElementById('customerForm');
|
|
const formData = new FormData(form);
|
|
|
|
const customerData = {};
|
|
|
|
// Collect basic form data
|
|
for (let [key, value] of formData.entries()) {
|
|
if (value.trim() !== '') {
|
|
customerData[key] = value.trim();
|
|
}
|
|
}
|
|
|
|
// Validate required fields
|
|
if (!customerData.id || !customerData.last) {
|
|
showAlert('Customer ID and Last Name are required', 'danger');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const url = isEditing ? `/api/customers/${editingCustomerId}` : '/api/customers/';
|
|
const method = isEditing ? 'PUT' : 'POST';
|
|
|
|
const response = await fetch(url, {
|
|
method: method,
|
|
headers: getAuthHeaders(),
|
|
body: JSON.stringify(customerData)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.detail || 'Failed to save customer');
|
|
}
|
|
|
|
const customer = await response.json();
|
|
|
|
// Save phone numbers
|
|
await savePhoneNumbers(customer.id);
|
|
|
|
bootstrap.Modal.getInstance(document.getElementById('customerModal')).hide();
|
|
showAlert(isEditing ? 'Customer updated successfully' : 'Customer created successfully', 'success');
|
|
loadCustomers(currentPage, currentSearch);
|
|
|
|
} catch (error) {
|
|
console.error('Error saving customer:', error);
|
|
showAlert('Error saving customer: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
async function savePhoneNumbers(customerId) {
|
|
const phoneEntries = document.querySelectorAll('.phone-entry');
|
|
|
|
// First, get existing phones to update/delete
|
|
try {
|
|
const response = await fetch(`/api/customers/${customerId}/phones`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (response.ok) {
|
|
const existingPhones = await response.json();
|
|
// For simplicity, delete all existing phones and re-add
|
|
// In production, you'd want to be more sophisticated about updates
|
|
for (const phone of existingPhones) {
|
|
await fetch(`/api/customers/${customerId}/phones/${phone.id}`, {
|
|
method: 'DELETE',
|
|
headers: getAuthHeaders()
|
|
});
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Error managing existing phones:', error);
|
|
}
|
|
|
|
// Add new phones
|
|
for (const entry of phoneEntries) {
|
|
const location = entry.querySelector('.phone-location').value.trim();
|
|
const phone = entry.querySelector('.phone-number').value.trim();
|
|
|
|
if (phone) {
|
|
try {
|
|
await fetch(`/api/customers/${customerId}/phones`, {
|
|
method: 'POST',
|
|
headers: getAuthHeaders(),
|
|
body: JSON.stringify({
|
|
location: location || null,
|
|
phone: phone
|
|
})
|
|
});
|
|
} catch (error) {
|
|
console.error('Error saving phone:', error);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
async function deleteCustomer() {
|
|
if (!confirm('Are you sure you want to delete this customer? This action cannot be undone.')) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/customers/${editingCustomerId}`, {
|
|
method: 'DELETE',
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to delete customer');
|
|
|
|
bootstrap.Modal.getInstance(document.getElementById('customerModal')).hide();
|
|
showAlert('Customer deleted successfully', 'success');
|
|
loadCustomers(currentPage, currentSearch);
|
|
|
|
} catch (error) {
|
|
console.error('Error deleting customer:', error);
|
|
showAlert('Error deleting customer: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
async function validateCustomerId() {
|
|
const id = document.getElementById('customerId').value;
|
|
if (!id || isEditing) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/customers/${id}`, {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (response.ok) {
|
|
showAlert('Customer ID already exists', 'warning');
|
|
document.getElementById('customerId').focus();
|
|
}
|
|
} catch (error) {
|
|
// ID doesn't exist, which is good for new customers
|
|
}
|
|
}
|
|
|
|
async function showStats() {
|
|
try {
|
|
const response = await fetch('/api/customers/stats', {
|
|
headers: getAuthHeaders()
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to load statistics');
|
|
|
|
const stats = await response.json();
|
|
displayStats(stats);
|
|
|
|
} catch (error) {
|
|
console.error('Error loading stats:', error);
|
|
showAlert('Error loading statistics: ' + error.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function displayStats(stats) {
|
|
const content = document.getElementById('statsContent');
|
|
content.innerHTML = `
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Database Overview</h6>
|
|
<ul class="list-unstyled">
|
|
<li><strong>Total Customers:</strong> ${stats.total_customers}</li>
|
|
<li><strong>Phone Numbers:</strong> ${stats.total_phone_numbers}</li>
|
|
<li><strong>With Email:</strong> ${stats.customers_with_email}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Group Breakdown</h6>
|
|
<ul class="list-unstyled">
|
|
${stats.group_breakdown.map(g => `<li><strong>${g.group}:</strong> ${g.count}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
new bootstrap.Modal(document.getElementById('statsModal')).show();
|
|
}
|
|
|
|
function clearCustomerForm() {
|
|
document.getElementById('customerForm').reset();
|
|
document.getElementById('customerId').disabled = false;
|
|
document.getElementById('phoneNumbers').innerHTML = '';
|
|
addPhoneField();
|
|
}
|
|
|
|
function showAlert(message, type = 'info') {
|
|
// Create and show Bootstrap alert
|
|
const alertDiv = document.createElement('div');
|
|
alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
|
|
alertDiv.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
|
|
document.body.insertBefore(alertDiv, document.body.firstChild);
|
|
|
|
// Auto-dismiss after 5 seconds
|
|
setTimeout(() => {
|
|
if (alertDiv.parentNode) {
|
|
alertDiv.remove();
|
|
}
|
|
}, 5000);
|
|
}
|
|
</script>
|
|
{% endblock %} |