297 lines
12 KiB
HTML
297 lines
12 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
{% load i18n %}
|
|
{% load standards_filters %}
|
|
|
|
{% block title %}{% trans "Department Standards" %} - {{ department.name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid px-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1 class="h3 mb-0">{{ department.name }}</h1>
|
|
<p class="text-muted mb-0">{% trans "Standards Compliance" %}</p>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
{% if is_px_admin %}
|
|
<a href="{% url 'standards:standard_create' department_id=department.id %}" class="btn btn-primary">
|
|
<i class="fas fa-plus me-2"></i>{% trans "Add Standard" %}
|
|
</a>
|
|
{% endif %}
|
|
<a href="{% url 'standards:dashboard' %}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-arrow-left me-2"></i>{% trans "Back to Dashboard" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search -->
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<input type="text" class="form-control" id="searchInput"
|
|
placeholder="{% trans 'Search standards...' %}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Standards Table -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title mb-0">{% trans "Standards List" %}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover" id="standardsTable">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Code" %}</th>
|
|
<th>{% trans "Title" %}</th>
|
|
<th>{% trans "Status" %}</th>
|
|
<th>{% trans "Evidence" %}</th>
|
|
<th>{% trans "Actions" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in standards_data %}
|
|
<tr data-standard-id="{{ item.standard.id }}"
|
|
data-compliance-id="{% if item.compliance %}{{ item.compliance.id }}{% endif %}">
|
|
<td><strong>{{ item.standard.code }}</strong></td>
|
|
<td>
|
|
<a href="{% url 'standards:standard_detail' pk=item.standard.id %}">
|
|
{{ item.standard.title }}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
{% if item.compliance %}
|
|
<span class="badge {% if item.compliance.status == 'met' %}bg-success{% elif item.compliance.status == 'partially_met' %}bg-warning{% elif item.compliance.status == 'not_met' %}bg-danger{% else %}bg-secondary{% endif %}">
|
|
{{ item.compliance.get_status_display }}
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">{% trans "Not Assessed" %}</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-info">
|
|
<i class="fas fa-paperclip me-1"></i>
|
|
{{ item.attachment_count }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
{% if item.compliance %}
|
|
<button class="btn btn-sm btn-primary"
|
|
onclick="openAssessModal('{{ item.compliance.id }}')">
|
|
<i class="fas fa-edit me-1"></i>{% trans "Assess" %}
|
|
</button>
|
|
{% else %}
|
|
<button class="btn btn-sm btn-success"
|
|
onclick="createAndAssess('{{ item.standard.id }}')">
|
|
<i class="fas fa-plus me-1"></i>{% trans "Assess" %}
|
|
</button>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="5" class="text-center text-muted">
|
|
{% trans "No standards found" %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Compliance Assessment Modal -->
|
|
<div class="modal fade" id="assessmentModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">{% trans "Compliance Assessment" %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<form id="assessmentForm">
|
|
<div class="modal-body">
|
|
<input type="hidden" id="complianceId" name="compliance_id">
|
|
|
|
<div class="mb-3">
|
|
<label for="status" class="form-label">
|
|
{% trans "Compliance Status" %} <span class="text-danger">*</span>
|
|
</label>
|
|
<select class="form-select" id="status" name="status" required>
|
|
<option value="not_assessed">{% trans "Not Assessed" %}</option>
|
|
<option value="met">{% trans "Met" %}</option>
|
|
<option value="partially_met">{% trans "Partially Met" %}</option>
|
|
<option value="not_met">{% trans "Not Met" %}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="last_assessed_date" class="form-label">
|
|
{% trans "Assessment Date" %}
|
|
</label>
|
|
<input type="date" class="form-control" id="last_assessed_date" name="last_assessed_date">
|
|
<small class="form-text text-muted">
|
|
{% trans "Auto-filled with today's date" %}
|
|
</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="assessor" class="form-label">{% trans "Assessor" %}</label>
|
|
<input type="text" class="form-control" id="assessor" name="assessor" readonly>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="notes" class="form-label">{% trans "Notes" %}</label>
|
|
<textarea class="form-control" id="notes" name="notes" rows="3"
|
|
placeholder="{% trans 'Add any notes about the assessment...' %}"></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="evidence_summary" class="form-label">{% trans "Evidence Summary" %}</label>
|
|
<textarea class="form-control" id="evidence_summary" name="evidence_summary" rows="3"
|
|
placeholder="{% trans 'Summarize the evidence supporting this assessment...' %}"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
|
|
{% trans "Cancel" %}
|
|
</button>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="fas fa-save me-2"></i>{% trans "Save Assessment" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let modalInstance = null;
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Bootstrap modal
|
|
const modalElement = document.getElementById('assessmentModal');
|
|
if (modalElement) {
|
|
modalInstance = new bootstrap.Modal(modalElement);
|
|
}
|
|
|
|
// Set today's date
|
|
const today = new Date().toISOString().split('T')[0];
|
|
document.getElementById('last_assessed_date').value = today;
|
|
document.getElementById('assessor').value = '{{ user.get_full_name|default:user.username }}';
|
|
|
|
// Filter functionality
|
|
const searchInput = document.getElementById('searchInput');
|
|
const table = document.getElementById('standardsTable');
|
|
|
|
function filterTable() {
|
|
const searchText = searchInput.value.toLowerCase();
|
|
const rows = table.querySelectorAll('tbody tr');
|
|
|
|
rows.forEach(row => {
|
|
const text = row.textContent.toLowerCase();
|
|
const matchesSearch = text.includes(searchText);
|
|
|
|
if (matchesSearch) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
searchInput.addEventListener('input', filterTable);
|
|
|
|
// Form submission
|
|
const form = document.getElementById('assessmentForm');
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
submitAssessment();
|
|
});
|
|
});
|
|
|
|
function getCookie(name) {
|
|
let cookieValue = null;
|
|
if (document.cookie && document.cookie !== '') {
|
|
const cookies = document.cookie.split(';');
|
|
for (let i = 0; i < cookies.length; i++) {
|
|
const cookie = cookies[i].trim();
|
|
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
|
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return cookieValue;
|
|
}
|
|
|
|
function createAndAssess(standardId) {
|
|
// Create compliance record first
|
|
fetch(`/standards/api/compliance/create/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': getCookie('csrftoken'),
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
standard_id: standardId,
|
|
department_id: '{{ department.id }}'
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Open modal with new compliance ID
|
|
openAssessModal(data.compliance_id);
|
|
} else {
|
|
alert('{% trans "Error creating compliance record" %}: ' + (data.error || ''));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
alert('{% trans "Error creating compliance record" %}: ' + error);
|
|
});
|
|
}
|
|
|
|
function openAssessModal(complianceId) {
|
|
document.getElementById('complianceId').value = complianceId;
|
|
modalInstance.show();
|
|
}
|
|
|
|
function submitAssessment() {
|
|
const form = document.getElementById('assessmentForm');
|
|
const formData = new FormData(form);
|
|
|
|
fetch(`/standards/api/compliance/update/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': getCookie('csrftoken'),
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
compliance_id: formData.get('compliance_id'),
|
|
status: formData.get('status'),
|
|
notes: formData.get('notes'),
|
|
evidence_summary: formData.get('evidence_summary'),
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
modalInstance.hide();
|
|
// Reload page to show updated status
|
|
location.reload();
|
|
} else {
|
|
alert('{% trans "Error updating compliance" %}: ' + (data.error || ''));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
alert('{% trans "Error updating compliance" %}: ' + error);
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|