CSV Import
This commit is contained in:
James Pattinson
126
api/main.py
126
api/main.py
@@ -10,6 +10,8 @@ from typing import List, Optional
|
||||
import mysql.connector
|
||||
from mysql.connector import Error
|
||||
import os
|
||||
import csv
|
||||
import io
|
||||
from contextlib import contextmanager
|
||||
|
||||
# Configuration
|
||||
@@ -93,6 +95,18 @@ class Subscription(BaseModel):
|
||||
member_email: EmailStr
|
||||
active: bool = True
|
||||
|
||||
class BulkImportRequest(BaseModel):
|
||||
csv_data: str
|
||||
list_ids: List[int]
|
||||
|
||||
class BulkImportResult(BaseModel):
|
||||
total_rows: int
|
||||
processed_rows: int
|
||||
created_members: int
|
||||
updated_members: int
|
||||
subscriptions_added: int
|
||||
errors: List[str]
|
||||
|
||||
# Routes
|
||||
@app.get("/")
|
||||
async def root():
|
||||
@@ -365,6 +379,118 @@ async def unsubscribe_member(list_email: EmailStr, member_email: EmailStr, token
|
||||
cursor.close()
|
||||
return {"message": "Unsubscribed successfully"}
|
||||
|
||||
@app.post("/bulk-import", response_model=BulkImportResult)
|
||||
async def bulk_import_members(bulk_request: BulkImportRequest, token: str = Depends(verify_token)):
|
||||
"""Bulk import members from CSV data and subscribe them to specified lists"""
|
||||
|
||||
result = BulkImportResult(
|
||||
total_rows=0,
|
||||
processed_rows=0,
|
||||
created_members=0,
|
||||
updated_members=0,
|
||||
subscriptions_added=0,
|
||||
errors=[]
|
||||
)
|
||||
|
||||
with get_db() as conn:
|
||||
cursor = conn.cursor(dictionary=True)
|
||||
|
||||
try:
|
||||
# Verify all list_ids exist
|
||||
if bulk_request.list_ids:
|
||||
placeholders = ','.join(['%s'] * len(bulk_request.list_ids))
|
||||
cursor.execute(f"SELECT list_id FROM lists WHERE list_id IN ({placeholders})", bulk_request.list_ids)
|
||||
existing_lists = [row['list_id'] for row in cursor.fetchall()]
|
||||
|
||||
invalid_lists = set(bulk_request.list_ids) - set(existing_lists)
|
||||
if invalid_lists:
|
||||
raise HTTPException(status_code=400, detail=f"Invalid list IDs: {list(invalid_lists)}")
|
||||
|
||||
# Parse CSV data
|
||||
csv_reader = csv.DictReader(io.StringIO(bulk_request.csv_data))
|
||||
|
||||
# Validate CSV headers - we need at least Name and Email
|
||||
if not csv_reader.fieldnames or 'Name' not in csv_reader.fieldnames or 'Email' not in csv_reader.fieldnames:
|
||||
raise HTTPException(status_code=400, detail="CSV must contain 'Name' and 'Email' columns")
|
||||
|
||||
for row_num, row in enumerate(csv_reader, start=1):
|
||||
result.total_rows += 1
|
||||
|
||||
try:
|
||||
name = row.get('Name', '').strip()
|
||||
email = row.get('Email', '').strip()
|
||||
|
||||
# Skip rows without email (name is optional)
|
||||
if not email:
|
||||
result.errors.append(f"Row {row_num}: Missing email address")
|
||||
continue
|
||||
|
||||
# Basic email validation
|
||||
if '@' not in email or '.' not in email.split('@')[1]:
|
||||
result.errors.append(f"Row {row_num}: Invalid email format: {email}")
|
||||
continue
|
||||
|
||||
# Use email as name if no name provided
|
||||
if not name:
|
||||
name = email.split('@')[0] # Use the part before @ as a default name
|
||||
|
||||
# Check if member exists
|
||||
cursor.execute("SELECT member_id FROM members WHERE email = %s", (email,))
|
||||
existing_member = cursor.fetchone()
|
||||
|
||||
if existing_member:
|
||||
# Update existing member's name if we have a better name (not auto-generated from email)
|
||||
should_update_name = (
|
||||
row.get('Name', '').strip() and # We have a name in the CSV
|
||||
name != email.split('@')[0] # It's not the auto-generated name
|
||||
)
|
||||
if should_update_name:
|
||||
cursor.execute("UPDATE members SET name = %s WHERE member_id = %s", (name, existing_member['member_id']))
|
||||
if cursor.rowcount > 0:
|
||||
result.updated_members += 1
|
||||
member_id = existing_member['member_id']
|
||||
else:
|
||||
# Create new member
|
||||
cursor.execute(
|
||||
"INSERT INTO members (name, email, active) VALUES (%s, %s, %s)",
|
||||
(name, email, True)
|
||||
)
|
||||
member_id = cursor.lastrowid
|
||||
result.created_members += 1
|
||||
|
||||
# Subscribe to selected lists
|
||||
for list_id in bulk_request.list_ids:
|
||||
try:
|
||||
cursor.execute(
|
||||
"INSERT INTO list_members (list_id, member_id, active) VALUES (%s, %s, %s)",
|
||||
(list_id, member_id, True)
|
||||
)
|
||||
result.subscriptions_added += 1
|
||||
except Error as e:
|
||||
if "Duplicate entry" in str(e):
|
||||
# Member already subscribed to this list - not an error
|
||||
pass
|
||||
else:
|
||||
result.errors.append(f"Row {row_num}: Failed to subscribe to list {list_id}: {str(e)}")
|
||||
|
||||
result.processed_rows += 1
|
||||
|
||||
except Exception as e:
|
||||
result.errors.append(f"Row {row_num}: {str(e)}")
|
||||
continue
|
||||
|
||||
# Commit all changes
|
||||
conn.commit()
|
||||
cursor.close()
|
||||
|
||||
return result
|
||||
|
||||
except HTTPException:
|
||||
raise
|
||||
except Exception as e:
|
||||
cursor.close()
|
||||
raise HTTPException(status_code=500, detail=f"Bulk import failed: {str(e)}")
|
||||
|
||||
if __name__ == "__main__":
|
||||
import uvicorn
|
||||
uvicorn.run(app, host="0.0.0.0", port=8000)
|
||||
|
||||
189
web/index.html
189
web/index.html
@@ -96,10 +96,16 @@
|
||||
<span>Click the "Lists" button next to any member to manage their subscriptions</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button class="btn btn-primary" id="addMemberBtn">
|
||||
<i class="fas fa-plus"></i>
|
||||
Add Member
|
||||
</button>
|
||||
<button class="btn btn-secondary" id="showBulkImportBtn">
|
||||
<i class="fas fa-upload"></i>
|
||||
Bulk Import CSV
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="data-table">
|
||||
@@ -273,6 +279,189 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bulk Import Modal -->
|
||||
<div class="modal modal-large" id="bulkImportModal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3>Bulk Import Members from CSV</h3>
|
||||
<button class="modal-close" id="bulkImportModalClose">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Step 1: File Upload -->
|
||||
<div class="import-step" id="importStep1">
|
||||
<h4><i class="fas fa-upload"></i> Step 1: Upload CSV File</h4>
|
||||
<p class="text-muted">Upload a CSV file containing member information. The file must have 'Name' and 'Email' columns.</p>
|
||||
|
||||
<div class="file-upload-area" id="fileUploadArea">
|
||||
<div class="file-upload-content">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
<p>Click to select a CSV file or drag and drop</p>
|
||||
<input type="file" id="csvFileInput" accept=".csv" style="display: none;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="file-info" id="fileInfo" style="display: none;">
|
||||
<div class="file-details">
|
||||
<i class="fas fa-file-csv"></i>
|
||||
<span id="fileName">file.csv</span>
|
||||
<span id="fileSize" class="text-muted">(0 KB)</span>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-secondary" id="removeFileBtn">
|
||||
<i class="fas fa-times"></i> Remove
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="csv-format-help">
|
||||
<h5><i class="fas fa-info-circle"></i> CSV Format</h5>
|
||||
<p>Your CSV file should look like this:</p>
|
||||
<div class="code-example">
|
||||
<code>Name,Email,Delivery,Member since<br>
|
||||
Ahmed Ajzan,ahmedajzan@doctors.org.uk,,2025-04-06T18:44:26.819454<br>
|
||||
Alan Bailey,abgower@icloud.com,,2025-04-06T18:44:26.824446</code>
|
||||
</div>
|
||||
<p class="text-muted text-sm">Only the 'Name' and 'Email' columns are required. Additional columns will be ignored.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Preview -->
|
||||
<div class="import-step" id="importStep2" style="display: none;">
|
||||
<h4><i class="fas fa-eye"></i> Step 2: Preview Data</h4>
|
||||
<p class="text-muted">Review the data that will be imported:</p>
|
||||
|
||||
<div class="preview-stats" id="previewStats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" id="totalRowsCount">0</span>
|
||||
<span class="stat-label">Total Rows</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" id="validRowsCount">0</span>
|
||||
<span class="stat-label">Valid Rows</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" id="errorRowsCount">0</span>
|
||||
<span class="stat-label">Errors</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview-table-container" id="previewTableContainer">
|
||||
<table class="table table-sm" id="previewTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Row</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="previewTableBody">
|
||||
<!-- Dynamic content -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="error-list" id="errorList" style="display: none;">
|
||||
<div class="error-header">
|
||||
<h5><i class="fas fa-exclamation-triangle"></i> Errors Found</h5>
|
||||
<button type="button" class="btn btn-sm btn-secondary" id="toggleErrorsBtn">
|
||||
<span id="errorToggleText">Show All</span>
|
||||
<i class="fas fa-chevron-down" id="errorToggleIcon"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="error-summary" id="errorSummary">
|
||||
<!-- Summary will be shown here -->
|
||||
</div>
|
||||
<div class="error-details" id="errorDetails" style="display: none;">
|
||||
<div class="error-table-container">
|
||||
<table class="table table-sm" id="errorTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Row</th>
|
||||
<th>Issue</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Raw Data</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="errorTableBody">
|
||||
<!-- Dynamic content -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: List Selection -->
|
||||
<div class="import-step" id="importStep3" style="display: none;">
|
||||
<h4><i class="fas fa-list"></i> Step 3: Select Mailing Lists</h4>
|
||||
<p class="text-muted">Choose which mailing lists these members should be subscribed to:</p>
|
||||
|
||||
<div class="list-selection" id="listSelection">
|
||||
<!-- Dynamic content -->
|
||||
</div>
|
||||
|
||||
<div class="selection-info">
|
||||
<p class="text-muted text-sm">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
If a member already exists, they will be added to the selected lists (existing subscriptions will be preserved).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: Import Results -->
|
||||
<div class="import-step" id="importStep4" style="display: none;">
|
||||
<h4><i class="fas fa-check-circle"></i> Step 4: Import Complete</h4>
|
||||
|
||||
<div class="import-results" id="importResults">
|
||||
<div class="result-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" id="processedCount">0</span>
|
||||
<span class="stat-label">Processed</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" id="createdCount">0</span>
|
||||
<span class="stat-label">Created</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" id="updatedCount">0</span>
|
||||
<span class="stat-label">Updated</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" id="subscriptionsCount">0</span>
|
||||
<span class="stat-label">Subscriptions</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-errors" id="resultErrors" style="display: none;">
|
||||
<h5><i class="fas fa-exclamation-triangle"></i> Import Errors</h5>
|
||||
<ul id="resultErrorList">
|
||||
<!-- Dynamic content -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn btn-secondary" id="bulkImportBackBtn" style="display: none;">
|
||||
<i class="fas fa-arrow-left"></i> Back
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" id="bulkImportCancelBtn">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="bulkImportNextBtn" disabled>
|
||||
Next <i class="fas fa-arrow-right"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" id="bulkImportBtn" style="display: none;">
|
||||
<i class="fas fa-upload"></i> Import Members
|
||||
</button>
|
||||
<button type="button" class="btn btn-success" id="bulkImportDoneBtn" style="display: none;">
|
||||
<i class="fas fa-check"></i> Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation Modal -->
|
||||
<div class="modal" id="confirmModal">
|
||||
<div class="modal-content">
|
||||
|
||||
@@ -405,16 +405,23 @@ body {
|
||||
/* Action buttons in tables */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-1);
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.action-buttons .btn {
|
||||
padding: var(--space-1) var(--space-2);
|
||||
font-size: var(--font-size-sm);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Ensure actions column is wide enough */
|
||||
.table th:last-child,
|
||||
.table td:last-child {
|
||||
min-width: 220px;
|
||||
width: 220px;
|
||||
min-width: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
/* Subscriptions Grid */
|
||||
@@ -548,6 +555,11 @@ body {
|
||||
padding: var(--space-4) var(--space-6) var(--space-6);
|
||||
}
|
||||
|
||||
/* Forms inside modals need proper padding */
|
||||
.modal form {
|
||||
padding: var(--space-4) var(--space-6) 0;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-group {
|
||||
margin-bottom: var(--space-5);
|
||||
@@ -684,14 +696,19 @@ body {
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.action-buttons .btn {
|
||||
padding: var(--space-1) var(--space-2);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.table th:last-child,
|
||||
.table td:last-child {
|
||||
min-width: auto;
|
||||
width: auto;
|
||||
min-width: 180px;
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -854,6 +871,339 @@ body {
|
||||
.mt-4 { margin-top: var(--space-4); }
|
||||
.hidden { display: none; }
|
||||
|
||||
/* Bulk Import Styles */
|
||||
.modal-large .modal-content {
|
||||
max-width: 800px;
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
.import-step {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.import-step h4 {
|
||||
color: var(--gray-800);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--space-4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.file-upload-area {
|
||||
border: 2px dashed var(--gray-300);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--space-8);
|
||||
text-align: center;
|
||||
transition: var(--transition);
|
||||
cursor: pointer;
|
||||
background: var(--gray-50);
|
||||
}
|
||||
|
||||
.file-upload-area:hover {
|
||||
border-color: var(--primary-color);
|
||||
background: rgba(37, 99, 235, 0.05);
|
||||
}
|
||||
|
||||
.file-upload-area.dragover {
|
||||
border-color: var(--primary-color);
|
||||
background: rgba(37, 99, 235, 0.05);
|
||||
}
|
||||
|
||||
.file-upload-content i {
|
||||
font-size: var(--font-size-3xl);
|
||||
color: var(--gray-400);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.file-upload-content p {
|
||||
color: var(--gray-600);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-4);
|
||||
background: var(--gray-50);
|
||||
border-radius: var(--border-radius);
|
||||
margin-top: var(--space-4);
|
||||
}
|
||||
|
||||
.file-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.file-details i {
|
||||
color: var(--success-color);
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.csv-format-help {
|
||||
margin-top: var(--space-6);
|
||||
padding: var(--space-4);
|
||||
background: var(--gray-50);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.csv-format-help h5 {
|
||||
color: var(--gray-800);
|
||||
margin-bottom: var(--space-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.code-example {
|
||||
background: var(--gray-800);
|
||||
color: var(--gray-100);
|
||||
padding: var(--space-4);
|
||||
border-radius: var(--border-radius);
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: var(--font-size-sm);
|
||||
margin: var(--space-3) 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.preview-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: var(--space-4);
|
||||
background: var(--gray-50);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: var(--font-size-2xl);
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: var(--space-1);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--gray-600);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.preview-table-container {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--gray-200);
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.preview-table-container .table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.preview-table-container .table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--gray-50);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.error-list {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.error-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.error-list h5 {
|
||||
color: var(--danger-color);
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.error-list ul {
|
||||
color: var(--danger-color);
|
||||
margin-left: var(--space-5);
|
||||
}
|
||||
|
||||
.error-summary {
|
||||
color: var(--danger-color);
|
||||
font-size: var(--font-size-sm);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.error-table-container {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
border-radius: var(--border-radius);
|
||||
margin-top: var(--space-3);
|
||||
}
|
||||
|
||||
.error-table-container .table {
|
||||
margin-bottom: 0;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.error-table-container .table th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--danger-color);
|
||||
border-bottom: 2px solid rgba(239, 68, 68, 0.2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.error-table-container .table td {
|
||||
border-color: rgba(239, 68, 68, 0.1);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.raw-data-cell {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: var(--font-size-xs);
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.raw-data-cell:hover {
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.list-selection {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.list-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--space-3);
|
||||
background: var(--gray-50);
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.list-checkbox:hover {
|
||||
background: var(--gray-100);
|
||||
}
|
||||
|
||||
.list-checkbox input[type="checkbox"] {
|
||||
margin-right: var(--space-3);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.list-checkbox-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.list-checkbox-name {
|
||||
font-weight: 500;
|
||||
color: var(--gray-800);
|
||||
}
|
||||
|
||||
.list-checkbox-email {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--gray-600);
|
||||
}
|
||||
|
||||
.selection-info {
|
||||
padding: var(--space-4);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.import-results {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: var(--space-4);
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
.result-stats .stat-item {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.result-stats .stat-value {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.result-errors {
|
||||
text-align: left;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
border-radius: var(--border-radius);
|
||||
padding: var(--space-4);
|
||||
}
|
||||
|
||||
.result-errors h5 {
|
||||
color: var(--danger-color);
|
||||
margin-bottom: var(--space-3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.result-errors ul {
|
||||
color: var(--danger-color);
|
||||
margin-left: var(--space-5);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
/* Row status indicators for preview table */
|
||||
.row-status {
|
||||
font-size: var(--font-size-xs);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.row-status.valid {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.row-status.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
|
||||
@@ -184,6 +184,19 @@ class APIClient {
|
||||
method: 'DELETE'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Bulk import members from CSV data
|
||||
*/
|
||||
async bulkImportMembers(csvData, listIds) {
|
||||
return this.request('/bulk-import', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
csv_data: csvData,
|
||||
list_ids: listIds
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -45,6 +45,11 @@ class MailingListApp {
|
||||
this.handleLogin();
|
||||
}
|
||||
});
|
||||
|
||||
// Bulk import button
|
||||
document.getElementById('showBulkImportBtn').addEventListener('click', () => {
|
||||
uiManager.showBulkImportModal();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -50,6 +50,9 @@ class UIManager {
|
||||
this.showListModal();
|
||||
});
|
||||
|
||||
// Initialize bulk import listeners
|
||||
this.initializeBulkImportListeners();
|
||||
|
||||
document.getElementById('addMemberBtn').addEventListener('click', () => {
|
||||
this.showMemberModal();
|
||||
});
|
||||
@@ -634,6 +637,546 @@ class UIManager {
|
||||
return link;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show bulk import modal
|
||||
*/
|
||||
showBulkImportModal() {
|
||||
this.resetBulkImportModal();
|
||||
this.showModal(document.getElementById('bulkImportModal'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset bulk import modal state
|
||||
*/
|
||||
resetBulkImportModal() {
|
||||
// Reset to step 1
|
||||
document.querySelectorAll('.import-step').forEach(step => {
|
||||
step.style.display = 'none';
|
||||
});
|
||||
document.getElementById('importStep1').style.display = 'block';
|
||||
|
||||
// Reset button states
|
||||
document.getElementById('bulkImportBackBtn').style.display = 'none';
|
||||
document.getElementById('bulkImportNextBtn').style.display = 'inline-block';
|
||||
document.getElementById('bulkImportNextBtn').disabled = true;
|
||||
document.getElementById('bulkImportBtn').style.display = 'none';
|
||||
document.getElementById('bulkImportDoneBtn').style.display = 'none';
|
||||
|
||||
// Clear file input
|
||||
document.getElementById('csvFileInput').value = '';
|
||||
document.getElementById('fileInfo').style.display = 'none';
|
||||
|
||||
// Reset parsed data
|
||||
this.csvData = null;
|
||||
this.parsedRows = [];
|
||||
this.currentStep = 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize bulk import event listeners
|
||||
*/
|
||||
initializeBulkImportListeners() {
|
||||
const fileUploadArea = document.getElementById('fileUploadArea');
|
||||
const csvFileInput = document.getElementById('csvFileInput');
|
||||
const nextBtn = document.getElementById('bulkImportNextBtn');
|
||||
const backBtn = document.getElementById('bulkImportBackBtn');
|
||||
const importBtn = document.getElementById('bulkImportBtn');
|
||||
const doneBtn = document.getElementById('bulkImportDoneBtn');
|
||||
const removeFileBtn = document.getElementById('removeFileBtn');
|
||||
|
||||
// File upload area click
|
||||
fileUploadArea.addEventListener('click', () => {
|
||||
csvFileInput.click();
|
||||
});
|
||||
|
||||
// File input change
|
||||
csvFileInput.addEventListener('change', (e) => {
|
||||
this.handleFileSelection(e.target.files[0]);
|
||||
});
|
||||
|
||||
// Remove file button
|
||||
removeFileBtn.addEventListener('click', () => {
|
||||
this.removeSelectedFile();
|
||||
});
|
||||
|
||||
// Drag and drop
|
||||
fileUploadArea.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
fileUploadArea.classList.add('dragover');
|
||||
});
|
||||
|
||||
fileUploadArea.addEventListener('dragleave', () => {
|
||||
fileUploadArea.classList.remove('dragover');
|
||||
});
|
||||
|
||||
fileUploadArea.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
fileUploadArea.classList.remove('dragover');
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0) {
|
||||
this.handleFileSelection(files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
// Navigation buttons
|
||||
nextBtn.addEventListener('click', () => {
|
||||
this.handleBulkImportNext();
|
||||
});
|
||||
|
||||
backBtn.addEventListener('click', () => {
|
||||
this.handleBulkImportBack();
|
||||
});
|
||||
|
||||
importBtn.addEventListener('click', () => {
|
||||
this.handleBulkImportSubmit();
|
||||
});
|
||||
|
||||
doneBtn.addEventListener('click', () => {
|
||||
this.closeModal(document.getElementById('bulkImportModal'));
|
||||
// Reload data to show imported members
|
||||
if (window.app) {
|
||||
window.app.loadData();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle file selection
|
||||
*/
|
||||
handleFileSelection(file) {
|
||||
if (!file) return;
|
||||
|
||||
if (!file.name.toLowerCase().endsWith('.csv')) {
|
||||
this.showNotification('Please select a CSV file', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
this.csvData = e.target.result;
|
||||
this.displayFileInfo(file);
|
||||
this.parseCSVPreview();
|
||||
document.getElementById('bulkImportNextBtn').disabled = false;
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
/**
|
||||
* Display file information
|
||||
*/
|
||||
displayFileInfo(file) {
|
||||
document.getElementById('fileName').textContent = file.name;
|
||||
document.getElementById('fileSize').textContent = `(${this.formatFileSize(file.size)})`;
|
||||
document.getElementById('fileInfo').style.display = 'flex';
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove selected file
|
||||
*/
|
||||
removeSelectedFile() {
|
||||
document.getElementById('csvFileInput').value = '';
|
||||
document.getElementById('fileInfo').style.display = 'none';
|
||||
document.getElementById('bulkImportNextBtn').disabled = true;
|
||||
this.csvData = null;
|
||||
this.parsedRows = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Format file size in human readable format
|
||||
*/
|
||||
formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse CSV for preview
|
||||
*/
|
||||
parseCSVPreview() {
|
||||
if (!this.csvData) return;
|
||||
|
||||
const lines = this.csvData.trim().split('\n');
|
||||
if (lines.length < 2) {
|
||||
this.showNotification('CSV file must contain at least a header and one data row', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Parse header
|
||||
const headers = this.parseCSVLine(lines[0]);
|
||||
const nameIndex = headers.findIndex(h => h.toLowerCase().includes('name'));
|
||||
const emailIndex = headers.findIndex(h => h.toLowerCase().includes('email'));
|
||||
|
||||
if (nameIndex === -1 || emailIndex === -1) {
|
||||
this.showNotification('CSV must contain Name and Email columns', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
this.parsedRows = [];
|
||||
this.csvHeaders = headers;
|
||||
let validRows = 0;
|
||||
let errorRows = 0;
|
||||
|
||||
// Parse data rows
|
||||
for (let i = 1; i < lines.length; i++) {
|
||||
const rawLine = lines[i].trim();
|
||||
if (!rawLine) continue; // Skip empty lines
|
||||
|
||||
const values = this.parseCSVLine(rawLine);
|
||||
const name = (values[nameIndex] || '').trim();
|
||||
const email = (values[emailIndex] || '').trim();
|
||||
|
||||
// Determine error type and message
|
||||
let error = null;
|
||||
let isValid = true;
|
||||
|
||||
if (!email) {
|
||||
error = 'Missing email address';
|
||||
isValid = false;
|
||||
} else if (!this.isValidEmail(email)) {
|
||||
error = 'Invalid email format';
|
||||
isValid = false;
|
||||
}
|
||||
// Note: Missing name is OK - we'll use the email as display name if needed
|
||||
|
||||
const row = {
|
||||
index: i,
|
||||
name,
|
||||
email,
|
||||
valid: isValid,
|
||||
error,
|
||||
rawLine,
|
||||
parsedValues: values,
|
||||
headers: headers
|
||||
};
|
||||
|
||||
this.parsedRows.push(row);
|
||||
if (isValid) validRows++;
|
||||
else errorRows++;
|
||||
}
|
||||
|
||||
// Update preview stats
|
||||
document.getElementById('totalRowsCount').textContent = this.parsedRows.length;
|
||||
document.getElementById('validRowsCount').textContent = validRows;
|
||||
document.getElementById('errorRowsCount').textContent = errorRows;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse a CSV line handling quoted values
|
||||
*/
|
||||
parseCSVLine(line) {
|
||||
const result = [];
|
||||
let current = '';
|
||||
let inQuotes = false;
|
||||
|
||||
for (let i = 0; i < line.length; i++) {
|
||||
const char = line[i];
|
||||
|
||||
if (char === '"') {
|
||||
inQuotes = !inQuotes;
|
||||
} else if (char === ',' && !inQuotes) {
|
||||
result.push(current.trim());
|
||||
current = '';
|
||||
} else {
|
||||
current += char;
|
||||
}
|
||||
}
|
||||
|
||||
result.push(current.trim());
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Simple email validation
|
||||
*/
|
||||
isValidEmail(email) {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return emailRegex.test(email);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle next button click
|
||||
*/
|
||||
handleBulkImportNext() {
|
||||
if (this.currentStep === 1) {
|
||||
this.showStep2Preview();
|
||||
} else if (this.currentStep === 2) {
|
||||
this.showStep3ListSelection();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle back button click
|
||||
*/
|
||||
handleBulkImportBack() {
|
||||
if (this.currentStep === 2) {
|
||||
this.showStep1Upload();
|
||||
} else if (this.currentStep === 3) {
|
||||
this.showStep2Preview();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show step 1 (upload)
|
||||
*/
|
||||
showStep1Upload() {
|
||||
document.querySelectorAll('.import-step').forEach(step => {
|
||||
step.style.display = 'none';
|
||||
});
|
||||
document.getElementById('importStep1').style.display = 'block';
|
||||
|
||||
document.getElementById('bulkImportBackBtn').style.display = 'none';
|
||||
document.getElementById('bulkImportNextBtn').style.display = 'inline-block';
|
||||
document.getElementById('bulkImportBtn').style.display = 'none';
|
||||
|
||||
this.currentStep = 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show step 2 (preview)
|
||||
*/
|
||||
showStep2Preview() {
|
||||
document.querySelectorAll('.import-step').forEach(step => {
|
||||
step.style.display = 'none';
|
||||
});
|
||||
document.getElementById('importStep2').style.display = 'block';
|
||||
|
||||
document.getElementById('bulkImportBackBtn').style.display = 'inline-block';
|
||||
document.getElementById('bulkImportNextBtn').style.display = 'inline-block';
|
||||
document.getElementById('bulkImportBtn').style.display = 'none';
|
||||
|
||||
this.renderPreviewTable();
|
||||
this.currentStep = 2;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show step 3 (list selection)
|
||||
*/
|
||||
showStep3ListSelection() {
|
||||
document.querySelectorAll('.import-step').forEach(step => {
|
||||
step.style.display = 'none';
|
||||
});
|
||||
document.getElementById('importStep3').style.display = 'block';
|
||||
|
||||
document.getElementById('bulkImportBackBtn').style.display = 'inline-block';
|
||||
document.getElementById('bulkImportNextBtn').style.display = 'none';
|
||||
document.getElementById('bulkImportBtn').style.display = 'inline-block';
|
||||
|
||||
this.renderListSelection();
|
||||
this.currentStep = 3;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render preview table
|
||||
*/
|
||||
renderPreviewTable() {
|
||||
const tbody = document.getElementById('previewTableBody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
// Show first 10 rows for preview
|
||||
const previewRows = this.parsedRows.slice(0, 10);
|
||||
|
||||
previewRows.forEach(row => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td>${row.index}</td>
|
||||
<td>${this.escapeHtml(row.name)}</td>
|
||||
<td>${this.escapeHtml(row.email)}</td>
|
||||
<td>
|
||||
<span class="row-status ${row.valid ? 'valid' : 'error'}">
|
||||
${row.valid ? 'Valid' : 'Error'}
|
||||
</span>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
});
|
||||
|
||||
// Show errors if any
|
||||
const errors = this.parsedRows.filter(row => !row.valid);
|
||||
if (errors.length > 0) {
|
||||
document.getElementById('errorList').style.display = 'block';
|
||||
this.renderErrorDisplay(errors);
|
||||
} else {
|
||||
document.getElementById('errorList').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render error display with expandable details
|
||||
*/
|
||||
renderErrorDisplay(errors) {
|
||||
// Update error summary
|
||||
const errorSummary = document.getElementById('errorSummary');
|
||||
const errorTypes = {};
|
||||
|
||||
errors.forEach(error => {
|
||||
const type = error.error;
|
||||
errorTypes[type] = (errorTypes[type] || 0) + 1;
|
||||
});
|
||||
|
||||
const summaryText = Object.entries(errorTypes)
|
||||
.map(([type, count]) => `${count} ${type.toLowerCase()}`)
|
||||
.join(', ');
|
||||
|
||||
errorSummary.innerHTML = `
|
||||
<p><strong>${errors.length}</strong> rows have issues: ${summaryText}</p>
|
||||
<p class="text-muted text-sm">These rows will be skipped during import. Click "Show All" to see details.</p>
|
||||
`;
|
||||
|
||||
// Render error table
|
||||
const errorTableBody = document.getElementById('errorTableBody');
|
||||
errorTableBody.innerHTML = '';
|
||||
|
||||
errors.forEach(row => {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td class="font-medium">${row.index + 1}</td>
|
||||
<td class="font-medium">${this.escapeHtml(row.error)}</td>
|
||||
<td>${this.escapeHtml(row.name || '-')}</td>
|
||||
<td>${this.escapeHtml(row.email || '-')}</td>
|
||||
<td class="raw-data-cell" title="${this.escapeHtml(row.rawLine)}">${this.escapeHtml(row.rawLine)}</td>
|
||||
`;
|
||||
errorTableBody.appendChild(tr);
|
||||
});
|
||||
|
||||
// Setup toggle functionality
|
||||
this.setupErrorToggle();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup error toggle functionality
|
||||
*/
|
||||
setupErrorToggle() {
|
||||
const toggleBtn = document.getElementById('toggleErrorsBtn');
|
||||
const errorDetails = document.getElementById('errorDetails');
|
||||
const toggleText = document.getElementById('errorToggleText');
|
||||
const toggleIcon = document.getElementById('errorToggleIcon');
|
||||
|
||||
// Remove existing listener to prevent duplicates
|
||||
const newToggleBtn = toggleBtn.cloneNode(true);
|
||||
toggleBtn.parentNode.replaceChild(newToggleBtn, toggleBtn);
|
||||
|
||||
newToggleBtn.addEventListener('click', () => {
|
||||
const isHidden = errorDetails.style.display === 'none';
|
||||
|
||||
if (isHidden) {
|
||||
errorDetails.style.display = 'block';
|
||||
toggleText.textContent = 'Hide Details';
|
||||
toggleIcon.className = 'fas fa-chevron-up';
|
||||
} else {
|
||||
errorDetails.style.display = 'none';
|
||||
toggleText.textContent = 'Show All';
|
||||
toggleIcon.className = 'fas fa-chevron-down';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Render list selection checkboxes
|
||||
*/
|
||||
renderListSelection() {
|
||||
const container = document.getElementById('listSelection');
|
||||
container.innerHTML = '';
|
||||
|
||||
if (!window.app || !window.app.lists) {
|
||||
container.innerHTML = '<p class="text-muted">No mailing lists available</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
window.app.lists.forEach(list => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'list-checkbox';
|
||||
div.innerHTML = `
|
||||
<input type="checkbox" id="list_${list.list_id}" value="${list.list_id}">
|
||||
<div class="list-checkbox-label">
|
||||
<span class="list-checkbox-name">${this.escapeHtml(list.list_name)}</span>
|
||||
<span class="list-checkbox-email">${this.escapeHtml(list.list_email)}</span>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(div);
|
||||
|
||||
// Make the whole div clickable
|
||||
div.addEventListener('click', (e) => {
|
||||
if (e.target.type !== 'checkbox') {
|
||||
const checkbox = div.querySelector('input[type="checkbox"]');
|
||||
checkbox.checked = !checkbox.checked;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle bulk import submission
|
||||
*/
|
||||
async handleBulkImportSubmit() {
|
||||
const selectedLists = Array.from(document.querySelectorAll('#listSelection input[type="checkbox"]:checked'))
|
||||
.map(cb => parseInt(cb.value));
|
||||
|
||||
if (selectedLists.length === 0) {
|
||||
this.showNotification('Please select at least one mailing list', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.setLoading(true);
|
||||
|
||||
const result = await apiClient.bulkImportMembers(this.csvData, selectedLists);
|
||||
|
||||
this.showStep4Results(result);
|
||||
|
||||
} catch (error) {
|
||||
this.handleError(error, 'Bulk import failed');
|
||||
} finally {
|
||||
this.setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show step 4 (results)
|
||||
*/
|
||||
showStep4Results(result) {
|
||||
document.querySelectorAll('.import-step').forEach(step => {
|
||||
step.style.display = 'none';
|
||||
});
|
||||
document.getElementById('importStep4').style.display = 'block';
|
||||
|
||||
document.getElementById('bulkImportBackBtn').style.display = 'none';
|
||||
document.getElementById('bulkImportNextBtn').style.display = 'none';
|
||||
document.getElementById('bulkImportBtn').style.display = 'none';
|
||||
document.getElementById('bulkImportDoneBtn').style.display = 'inline-block';
|
||||
|
||||
// Update result stats
|
||||
document.getElementById('processedCount').textContent = result.processed_rows;
|
||||
document.getElementById('createdCount').textContent = result.created_members;
|
||||
document.getElementById('updatedCount').textContent = result.updated_members;
|
||||
document.getElementById('subscriptionsCount').textContent = result.subscriptions_added;
|
||||
|
||||
// Show errors if any
|
||||
if (result.errors && result.errors.length > 0) {
|
||||
document.getElementById('resultErrors').style.display = 'block';
|
||||
const errorList = document.getElementById('resultErrorList');
|
||||
errorList.innerHTML = '';
|
||||
|
||||
result.errors.forEach(error => {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = error;
|
||||
errorList.appendChild(li);
|
||||
});
|
||||
} else {
|
||||
document.getElementById('resultErrors').style.display = 'none';
|
||||
}
|
||||
|
||||
this.currentStep = 4;
|
||||
|
||||
// Show success notification
|
||||
this.showNotification(
|
||||
`Successfully imported ${result.processed_rows} members with ${result.subscriptions_added} subscriptions`,
|
||||
'success'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML to prevent XSS
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user