fix: resolve JavaScript errors in code quality dashboard

Fix multiple JavaScript errors on code quality dashboard pages:

Issues Fixed:
1. ReferenceError: getAccessToken is not defined
   - Changed to use apiClient.get() and apiClient.post() from api-client.js
   - Properly uses existing authentication infrastructure

2. ReferenceError: dark/isSideMenuOpen/currentPage is not defined
   - Extended base data() function using spread operator
   - Inherits all base Alpine.js state from init-alpine.js

3. RegExp validation error
   - Not directly addressed but likely resolved by proper Alpine initialization

Changes:
- static/admin/js/code-quality-dashboard.js:
  * Spread ...data() to inherit base Alpine.js state
  * Set currentPage: 'code-quality' for navigation highlighting
  * Use apiClient.get('/admin/code-quality/stats') for API calls
  * Use apiClient.post('/admin/code-quality/scan') for scan triggers
  * Simplified error handling with apiClient error messages

- static/admin/js/code-quality-violations.js:
  * Spread ...data() to inherit base Alpine.js state
  * Set currentPage: 'code-quality' for navigation highlighting
  * Use apiClient.get('/admin/code-quality/violations', params) for API calls
  * Simplified query parameter building using object instead of URLSearchParams

Testing:
- Dashboard should now load without JavaScript errors
- API calls should work with proper authentication
- Dark mode toggle and sidebar menu should function correctly
- Navigation highlighting should work properly

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-28 10:31:23 +01:00
parent 9db0da25ec
commit 13f0094743
2 changed files with 39 additions and 53 deletions

View File

@@ -5,6 +5,13 @@
function codeQualityDashboard() {
return {
// Extend base data
...data(),
// Set current page for navigation
currentPage: 'code-quality',
// Dashboard-specific data
loading: false,
scanning: false,
error: null,
@@ -35,24 +42,16 @@ function codeQualityDashboard() {
this.error = null;
try {
const response = await fetch('/api/v1/admin/code-quality/stats', {
headers: {
'Authorization': `Bearer ${getAccessToken()}`
}
});
if (!response.ok) {
if (response.status === 401) {
window.location.href = '/admin/login';
return;
}
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
this.stats = await response.json();
const stats = await apiClient.get('/admin/code-quality/stats');
this.stats = stats;
} catch (err) {
console.error('Failed to load stats:', err);
this.error = err.message;
// Redirect to login if unauthorized
if (err.message.includes('Unauthorized')) {
window.location.href = '/admin/login';
}
} finally {
this.loading = false;
}
@@ -64,24 +63,7 @@ function codeQualityDashboard() {
this.successMessage = null;
try {
const response = await fetch('/api/v1/admin/code-quality/scan', {
method: 'POST',
headers: {
'Authorization': `Bearer ${getAccessToken()}`,
'Content-Type': 'application/json'
}
});
if (!response.ok) {
if (response.status === 401) {
window.location.href = '/admin/login';
return;
}
const errorData = await response.json();
throw new Error(errorData.detail || `HTTP ${response.status}`);
}
const scan = await response.json();
const scan = await apiClient.post('/admin/code-quality/scan');
this.successMessage = `Scan completed: ${scan.total_violations} violations found (${scan.errors} errors, ${scan.warnings} warnings)`;
// Reload stats after scan
@@ -94,6 +76,11 @@ function codeQualityDashboard() {
} catch (err) {
console.error('Failed to run scan:', err);
this.error = err.message;
// Redirect to login if unauthorized
if (err.message.includes('Unauthorized')) {
window.location.href = '/admin/login';
}
} finally {
this.scanning = false;
}

View File

@@ -5,6 +5,13 @@
function codeQualityViolations() {
return {
// Extend base data
...data(),
// Set current page for navigation
currentPage: 'code-quality',
// Violations-specific data
loading: false,
error: null,
violations: [],
@@ -38,31 +45,18 @@ function codeQualityViolations() {
try {
// Build query params
const params = new URLSearchParams({
const params = {
page: this.pagination.page.toString(),
page_size: this.pagination.page_size.toString()
});
};
if (this.filters.severity) params.append('severity', this.filters.severity);
if (this.filters.status) params.append('status', this.filters.status);
if (this.filters.rule_id) params.append('rule_id', this.filters.rule_id);
if (this.filters.file_path) params.append('file_path', this.filters.file_path);
if (this.filters.severity) params.severity = this.filters.severity;
if (this.filters.status) params.status = this.filters.status;
if (this.filters.rule_id) params.rule_id = this.filters.rule_id;
if (this.filters.file_path) params.file_path = this.filters.file_path;
const response = await fetch(`/api/v1/admin/code-quality/violations?${params.toString()}`, {
headers: {
'Authorization': `Bearer ${getAccessToken()}`
}
});
const data = await apiClient.get('/admin/code-quality/violations', params);
if (!response.ok) {
if (response.status === 401) {
window.location.href = '/admin/login';
return;
}
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
const data = await response.json();
this.violations = data.violations;
this.pagination = {
page: data.page,
@@ -76,6 +70,11 @@ function codeQualityViolations() {
} catch (err) {
console.error('Failed to load violations:', err);
this.error = err.message;
// Redirect to login if unauthorized
if (err.message.includes('Unauthorized')) {
window.location.href = '/admin/login';
}
} finally {
this.loading = false;
}