Spaces:
Running
Running
File size: 6,126 Bytes
159f0e1 | 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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
document.addEventListener('DOMContentLoaded', () => {
// Add modal functionality
const addModal = document.querySelector('add-modal');
const addBtn = document.querySelector('data-table').shadowRoot.getElementById('addCustomerBtn');
addBtn.addEventListener('click', () => {
addModal.openModal();
});
// Handle new customer addition
document.addEventListener('add-customer', (e) => {
const newCustomer = e.detail;
addCustomerToTable(newCustomer);
});
function addCustomerToTable(customer) {
const tableBody = document.querySelector('data-table').shadowRoot.querySelector('tbody');
const row = document.createElement('tr');
row.innerHTML = `
<td>${customer.phone}</td>
<td>${customer.name}</td>
<td><a href="https://${customer.facebook}" target="_blank">${customer.facebook ? 'View' : ''}</a></td>
<td>${customer.date}</td>
<td>${customer.report1}</td>
<td>${customer.report2}</td>
<td>${customer.report3}</td>
<td class="actions">
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</td>
`;
tableBody.appendChild(row);
}
// Sample data - in real app this would come from API
const sampleData = [
{
phone: '0987654321',
name: 'Nguyen Van A',
facebook: 'facebook.com/nguyenvana',
date: '2023-05-15',
report1: 'Done',
report2: 'Pending',
report3: 'Not started'
},
{
phone: '0123456789',
name: 'Tran Thi B',
facebook: 'facebook.com/tranthib',
date: '2023-05-16',
report1: 'Done',
report2: 'Done',
report3: 'Pending'
}
];
// Role switching functionality
document.addEventListener('click', (e) => {
if (e.target.classList.contains('role-btn')) {
const buttons = document.querySelectorAll('.role-btn');
buttons.forEach(btn => {
btn.classList.remove('active');
btn.classList.add('inactive');
});
e.target.classList.remove('inactive');
e.target.classList.add('active');
// Here you would adjust UI based on role
const role = e.target.dataset.role;
console.log(`Switched to ${role} mode`);
}
});
// Initialize table with sample data
const tableBody = document.querySelector('data-table').shadowRoot.querySelector('tbody');
sampleData.forEach(item => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${item.phone}</td>
<td>${item.name}</td>
<td><a href="https://${item.facebook}" target="_blank">View</a></td>
<td>${item.date}</td>
<td>${item.report1}</td>
<td>${item.report2}</td>
<td>${item.report3}</td>
<td class="actions">
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</td>
`;
tableBody.appendChild(row);
});
// Add event listeners for table actions
tableBody.addEventListener('click', (e) => {
if (e.target.classList.contains('edit-btn')) {
const row = e.target.closest('tr');
const cells = row.querySelectorAll('td');
const customerData = {
phone: cells[0].textContent,
name: cells[1].textContent,
facebook: cells[2].querySelector('a')?.href.replace('https://', ''),
date: cells[3].textContent,
report1: cells[4].textContent,
report2: cells[5].textContent,
report3: cells[6].textContent
};
// Open modal with existing data
const modal = document.querySelector('add-modal');
modal.shadowRoot.getElementById('phone').value = customerData.phone;
modal.shadowRoot.getElementById('name').value = customerData.name;
modal.shadowRoot.getElementById('facebook').value = customerData.facebook || '';
modal.shadowRoot.getElementById('date').value = customerData.date;
modal.shadowRoot.getElementById('report1').value = customerData.report1;
modal.shadowRoot.getElementById('report2').value = customerData.report2;
modal.shadowRoot.getElementById('report3').value = customerData.report3;
modal.openModal();
// Remove old row after edit
modal.addEventListener('add-customer', () => {
row.remove();
}, { once: true });
} else if (e.target.classList.contains('delete-btn')) {
if (confirm('Are you sure you want to delete this customer?')) {
e.target.closest('tr').remove();
}
}
});
// Search functionality
const searchInput = document.querySelector('data-table').shadowRoot.querySelector('input');
searchInput.addEventListener('input', (e) => {
const searchTerm = e.target.value.toLowerCase();
const rows = tableBody.querySelectorAll('tr');
rows.forEach(row => {
const cells = row.querySelectorAll('td');
let rowMatches = false;
cells.forEach(cell => {
if (cell.textContent.toLowerCase().includes(searchTerm)) {
rowMatches = true;
}
});
row.style.display = rowMatches ? '' : 'none';
});
});
// Filter duplicates functionality
const filterBtn = document.querySelector('data-table').shadowRoot.querySelector('.filter-btn');
filterBtn.addEventListener('click', () => {
console.log('Filtering duplicates...');
// Implement duplicate filtering logic
});
}); |