Fix article editor

2026-03-26 17:34:10 -04:00
parent 3687003935
commit bc9000aad9
7 changed files with 390 additions and 26 deletions
@@ -3,8 +3,95 @@
 {% block page_title %}Activity Logs{% endblock %}

 {% block content %}
+
+<!-- ── Stats + Cleanup panel ───────────────────────────────────────────────── -->
+<div class="row g-3 mb-3">
+
+  <!-- Summary -->
+  <div class="col-lg-4">
+    <div class="card h-100">
+      <div class="card-header"><i class="bi bi-bar-chart me-2"></i>Log Summary</div>
+      <div class="card-body">
+        <div style="font-size:28px;font-weight:700;color:var(--text);">{{ '{:,}'.format(total) }}</div>
+        <div style="font-size:13px;color:var(--muted);margin-bottom:12px;">total log entries</div>
+        {% if oldest %}
+        <div style="font-size:12px;color:var(--muted);">
+          <i class="bi bi-calendar3 me-1"></i>Oldest entry:
+          <span style="color:var(--text);">{{ oldest.strftime('%b %d, %Y') }}</span>
+        </div>
+        {% endif %}
+        <hr style="border-color:var(--border);margin:12px 0;">
+        <div style="font-size:12px;color:var(--muted);">Entries eligible for cleanup:</div>
+        <div class="mt-2" style="font-size:13px;">
+          {% for days, count in counts_by_retention.items() %}
+          <div class="d-flex justify-content-between align-items-center py-1"
+               style="border-bottom:1px solid var(--border);">
+            <span style="color:var(--muted);">Older than {{ days }} days</span>
+            <span style="font-weight:600;color:{% if count > 0 %}var(--warning){% else %}var(--success){% endif %};">
+              {{ '{:,}'.format(count) }}
+            </span>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Cleanup -->
+  <div class="col-lg-8">
+    <div class="card h-100">
+      <div class="card-header d-flex align-items-center gap-2">
+        <i class="bi bi-trash3 me-1"></i>Clean Up Old Logs
+        <span style="font-size:11px;color:var(--muted);font-weight:400;">— permanently deletes entries older than the selected threshold</span>
+      </div>
+      <div class="card-body">
+        <p style="font-size:13px;color:var(--muted);margin-bottom:16px;">
+          Select a retention period. All activity log entries older than that threshold will be
+          <strong style="color:var(--danger);">permanently deleted</strong> and cannot be recovered.
+          This action is itself logged before the deletion runs.
+        </p>
+        <div class="row g-3">
+          {% set options = [
+            (7,  'danger',  'bi-lightning-charge', 'Last 7 days',  'Aggressive — keeps only the past week'),
+            (30, 'warning', 'bi-calendar-week',    'Last 30 days', 'Recommended for busy systems'),
+            (60, 'info',    'bi-calendar-month',   'Last 60 days', 'Balanced retention'),
+            (90, 'success', 'bi-calendar3',        'Last 90 days', 'Conservative — keeps 3 months'),
+          ] %}
+          {% for days, colour, icon, label, hint in options %}
+          <div class="col-6 col-lg-3">
+            <form method="POST" action="{{ url_for('admin.activity_logs') }}"
+                  onsubmit="return confirmCleanup({{ days }}, {{ counts_by_retention[days] }})">
+              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+              <input type="hidden" name="days" value="{{ days }}"/>
+              <button type="submit" class="btn btn-sm w-100 d-flex flex-column align-items-center py-3 gap-1"
+                      style="background:rgba(var(--{{ colour }}-rgb, 100,100,100),.08);
+                             border:1px solid rgba(var(--{{ colour }}-rgb, 100,100,100),.25);
+                             color:var(--{{ colour }});"
+                      {% if counts_by_retention[days] == 0 %}disabled title="No entries to delete"{% endif %}>
+                <i class="bi {{ icon }}" style="font-size:20px;"></i>
+                <span style="font-size:13px;font-weight:600;">{{ label }}</span>
+                <span style="font-size:11px;opacity:.75;">
+                  {{ '{:,}'.format(counts_by_retention[days]) }} to delete
+                </span>
+                <span style="font-size:10px;opacity:.6;text-align:center;line-height:1.3;">{{ hint }}</span>
+              </button>
+            </form>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ── Log table ────────────────────────────────────────────────────────────── -->
 <div class="card">
-  <div class="card-header"><i class="bi bi-list-ul me-2"></i>System Activity Log</div>
+  <div class="card-header">
+    <i class="bi bi-list-ul me-2"></i>System Activity Log
+    <span style="font-size:12px;color:var(--muted);">
+      — page {{ logs.page }} of {{ logs.pages }} ({{ '{:,}'.format(logs.total) }} entries)
+    </span>
+  </div>
  <div class="card-body p-0">
    <table class="table mb-0">
      <thead>
@@ -25,17 +112,28 @@
          </td>
          <td>
            <span class="mono" style="font-size:11px;
-              color:{% if 'create' in log.action %}var(--success){% elif 'delete' in log.action or 'deactivate' in log.action %}var(--danger){% elif 'update' in log.action or 'edit' in log.action or 'change' in log.action %}var(--warning){% elif 'login' in log.action %}var(--accent3){% else %}var(--muted){% endif %};">
+              color:{% if 'create' in log.action %}var(--success)
+                    {% elif 'delete' in log.action or 'deactivate' in log.action %}var(--danger)
+                    {% elif 'update' in log.action or 'edit' in log.action or 'change' in log.action %}var(--warning)
+                    {% elif 'login' in log.action %}var(--accent3)
+                    {% elif 'cleanup' in log.action %}var(--danger)
+                    {% else %}var(--muted){% endif %};">
              {{ log.action }}
            </span>
          </td>
          <td style="font-size:13px;">
-            {% if log.user %}{{ log.user.full_name }}<br><span style="font-size:11px;color:var(--muted);">{{ log.user.email }}</span>{% else %}<span style="color:var(--muted);">System</span>{% endif %}
+            {% if log.user %}
+              {{ log.user.full_name }}<br>
+              <span style="font-size:11px;color:var(--muted);">{{ log.user.email }}</span>
+            {% else %}
+              <span style="color:var(--muted);">System</span>
+            {% endif %}
          </td>
          <td style="font-size:12px;color:var(--muted);">
            {{ log.entity_type or '—' }}{% if log.entity_id %} <span class="mono">#{{ log.entity_id }}</span>{% endif %}
          </td>
-          <td style="font-size:12px;color:var(--muted);max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
+          <td style="font-size:12px;color:var(--muted);max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
+              title="{{ log.details or '' }}">
            {{ log.details or '—' }}
          </td>
          <td style="font-size:11px;color:var(--muted);font-family:'Space Mono',monospace;">
@@ -53,8 +151,13 @@
        <li class="page-item"><a class="page-link" href="{{ url_for('admin.activity_logs', page=logs.prev_num) }}">‹ Prev</a></li>
        {% endif %}
        {% for p in logs.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
-          {% if p %}<li class="page-item {% if p==logs.page %}active{% endif %}"><a class="page-link" href="{{ url_for('admin.activity_logs', page=p) }}">{{ p }}</a></li>
-          {% else %}<li class="page-item disabled"><span class="page-link">…</span></li>{% endif %}
+          {% if p %}
+          <li class="page-item {% if p==logs.page %}active{% endif %}">
+            <a class="page-link" href="{{ url_for('admin.activity_logs', page=p) }}">{{ p }}</a>
+          </li>
+          {% else %}
+          <li class="page-item disabled"><span class="page-link">…</span></li>
+          {% endif %}
        {% endfor %}
        {% if logs.has_next %}
        <li class="page-item"><a class="page-link" href="{{ url_for('admin.activity_logs', page=logs.next_num) }}">Next ›</a></li>
@@ -62,6 +165,17 @@
      </ul></nav>
    </div>
    {% endif %}
+
  </div>
 </div>
-{% endblock %}
+
+<script>
+function confirmCleanup(days, count) {
+  if (count === 0) return false;
+  return confirm(
+    'Delete ' + count.toLocaleString() + ' log entr' + (count === 1 ? 'y' : 'ies') +
+    ' older than ' + days + ' days?\n\nThis cannot be undone.'
+  );
+}
+</script>
+{% endblock %}
@@ -246,7 +246,7 @@ tinymce.init({
  images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
    const fd = new FormData();
    fd.append('file', blobInfo.blob(), blobInfo.filename());
-    fetch('/admin/kb/upload-image', { method: 'POST', credentials: 'same-origin', body: fd })
+    fetch('/admin/kb/upload-image', { method: 'POST', credentials: 'same-origin', headers: { 'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content }, body: fd })
      .then(r => { if (!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })
      .then(j => { if (j.location) resolve(j.location); else reject({ message: j.error || 'Upload failed', remove: true }); })
      .catch(err => reject({ message: String(err), remove: true }));
@@ -374,7 +374,7 @@ function deleteAtt(attId, deleteUrl, filename) {
  const row = document.getElementById('att-row-' + attId);
  if (row) { row.style.opacity = '0.4'; row.style.pointerEvents = 'none'; }

-  fetch(deleteUrl, { method: 'POST', credentials: 'same-origin' })
+  fetch(deleteUrl, { method: 'POST', credentials: 'same-origin', headers: { 'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content } })
    .then(r => r.json())
    .then(data => {
      if (data.ok) {
@@ -445,6 +445,7 @@ function doSave(asDraft) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', window.location.pathname);
  xhr.withCredentials = true;
+  xhr.setRequestHeader('X-CSRFToken', document.querySelector('meta[name="csrf-token"]').content);

  xhr.upload.onprogress = ev => {
    if (ev.lengthComputable && pendingFiles.length > 0) {
@@ -3,9 +3,60 @@
 {% block page_title %}Knowledge Base Management{% endblock %}

 {% block content %}
+
+<!-- Filter bar -->
+<form method="GET" action="{{ url_for('admin.kb_list') }}" class="card mb-3">
+  <div class="card-body py-2">
+    <div class="row g-2 align-items-center">
+      <div class="col-12 col-sm">
+        <div style="position:relative;">
+          <i class="bi bi-search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px;"></i>
+          <input type="text" name="q" value="{{ q }}" placeholder="Search title or tags…"
+                 class="form-control form-control-sm" style="padding-left:30px;">
+        </div>
+      </div>
+      <div class="col-6 col-sm-auto">
+        <select name="category" class="form-select form-select-sm" style="min-width:140px;">
+          <option value="">All categories</option>
+          {% for cat in categories %}
+          <option value="{{ cat }}" {% if cat == sel_category %}selected{% endif %}>
+            {{ cat.replace('_',' ').title() }}
+          </option>
+          {% endfor %}
+        </select>
+      </div>
+      <div class="col-6 col-sm-auto">
+        <select name="author_id" class="form-select form-select-sm" style="min-width:140px;">
+          <option value="">All authors</option>
+          {% for author in authors %}
+          <option value="{{ author.id }}" {% if sel_author_id == author.id|string %}selected{% endif %}>
+            {{ author.full_name }}
+          </option>
+          {% endfor %}
+        </select>
+      </div>
+      <div class="col-6 col-sm-auto">
+        <select name="published" class="form-select form-select-sm" style="min-width:130px;">
+          <option value=""    {% if sel_published == ''    %}selected{% endif %}>All statuses</option>
+          <option value="yes" {% if sel_published == 'yes' %}selected{% endif %}>Published</option>
+          <option value="no"  {% if sel_published == 'no'  %}selected{% endif %}>Draft</option>
+        </select>
+      </div>
+      <div class="col-auto">
+        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
+        {% if q or sel_category or sel_author_id or sel_published %}
+        <a href="{{ url_for('admin.kb_list') }}" class="btn btn-secondary btn-sm ms-1">Clear</a>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</form>
+
 <div class="card">
  <div class="card-header d-flex align-items-center justify-content-between">
-    <span><i class="bi bi-journal-text me-2"></i>Articles <span style="font-size:12px;color:var(--muted);">({{ articles|length }})</span></span>
+    <span><i class="bi bi-journal-text me-2"></i>Articles
+      <span style="font-size:12px;color:var(--muted);">({{ articles|length }} result{{ 's' if articles|length != 1 }})</span>
+    </span>
    <a href="{{ url_for('admin.kb_new') }}" class="btn btn-primary btn-sm">
      <i class="bi bi-plus-lg me-1"></i>New Article
    </a>
@@ -65,7 +116,12 @@
    {% else %}
    <div class="p-5 text-center" style="color:var(--muted);">
      <i class="bi bi-journal-x" style="font-size:40px;display:block;margin-bottom:12px;"></i>
-      No articles yet. <a href="{{ url_for('admin.kb_new') }}" style="color:var(--accent3);">Create your first article →</a>
+      {% if q or sel_category or sel_author_id or sel_published %}
+        No articles match your filters.
+        <a href="{{ url_for('admin.kb_list') }}" style="color:var(--accent3);display:block;margin-top:8px;">Clear filters</a>
+      {% else %}
+        No articles yet. <a href="{{ url_for('admin.kb_new') }}" style="color:var(--accent3);">Create your first article →</a>
+      {% endif %}
    </div>
    {% endif %}
  </div>