mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-23 01:51:09 -05:00
Add test utilities and state machine diagrams for FSM models
- Introduced reusable test utilities in `backend/tests/utils` for FSM transitions, HTMX interactions, and common scenarios. - Added factory functions for creating test submissions, parks, rides, and photo submissions. - Implemented assertion helpers for verifying state changes, toast notifications, and transition logs. - Created comprehensive state machine diagrams for all FSM-enabled models in `docs/STATE_DIAGRAMS.md`, detailing states, transitions, and guard conditions.
This commit is contained in:
pacnpal
@@ -2,60 +2,99 @@
|
||||
|
||||
<h1 class="mb-6 text-2xl font-bold text-gray-900 dark:text-gray-200">Moderation Dashboard</h1>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-6" x-data="{ activeTab: 'submissions' }">
|
||||
<!-- Tab Navigation -->
|
||||
<div class="flex items-center justify-between p-4 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
|
||||
<div class="flex items-center space-x-4">
|
||||
<a href="{% url 'moderation:submission_list' %}?status=PENDING"
|
||||
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'PENDING' or not request.GET.status %}bg-blue-100 text-blue-900 dark:bg-blue-900/40 dark:text-blue-400{% else %}text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300{% endif %}"
|
||||
hx-get="{% url 'moderation:submission_list' %}?status=PENDING"
|
||||
hx-target="#dashboard-content"
|
||||
hx-push-url="true"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2.5 text-lg fas fa-clock"></i>
|
||||
<span>Pending</span>
|
||||
</a>
|
||||
|
||||
<a href="{% url 'moderation:submission_list' %}?status=APPROVED"
|
||||
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'APPROVED' %}bg-blue-100 text-blue-900 dark:bg-blue-900/40 dark:text-blue-400{% else %}text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300{% endif %}"
|
||||
hx-get="{% url 'moderation:submission_list' %}?status=APPROVED"
|
||||
hx-target="#dashboard-content"
|
||||
hx-push-url="true"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2.5 text-lg fas fa-check"></i>
|
||||
<span>Approved</span>
|
||||
</a>
|
||||
|
||||
<a href="{% url 'moderation:submission_list' %}?status=REJECTED"
|
||||
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'REJECTED' %}bg-blue-100 text-blue-900 dark:bg-blue-900/40 dark:text-blue-400{% else %}text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300{% endif %}"
|
||||
hx-get="{% url 'moderation:submission_list' %}?status=REJECTED"
|
||||
hx-target="#dashboard-content"
|
||||
hx-push-url="true"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2.5 text-lg fas fa-times"></i>
|
||||
<span>Rejected</span>
|
||||
</a>
|
||||
|
||||
<a href="{% url 'moderation:submission_list' %}?status=ESCALATED"
|
||||
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'ESCALATED' %}bg-blue-100 text-blue-900 dark:bg-blue-900/40 dark:text-blue-400{% else %}text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300{% endif %}"
|
||||
hx-get="{% url 'moderation:submission_list' %}?status=ESCALATED"
|
||||
hx-target="#dashboard-content"
|
||||
hx-push-url="true"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2.5 text-lg fas fa-exclamation-triangle"></i>
|
||||
<span>Escalated</span>
|
||||
</a>
|
||||
<!-- Submissions Tab -->
|
||||
<button type="button"
|
||||
@click="activeTab = 'submissions'"
|
||||
:class="activeTab === 'submissions' ? 'bg-blue-100 text-blue-900 dark:bg-blue-900/40 dark:text-blue-400' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300'"
|
||||
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200">
|
||||
<i class="mr-2.5 text-lg fas fa-file-alt"></i>
|
||||
<span>Submissions</span>
|
||||
</button>
|
||||
|
||||
<!-- History Tab -->
|
||||
<button type="button"
|
||||
@click="activeTab = 'history'"
|
||||
:class="activeTab === 'history' ? 'bg-blue-100 text-blue-900 dark:bg-blue-900/40 dark:text-blue-400' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300'"
|
||||
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200">
|
||||
<i class="mr-2.5 text-lg fas fa-history"></i>
|
||||
<span>History</span>
|
||||
</button>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="w-px h-8 bg-gray-200 dark:bg-gray-700" x-show="activeTab === 'submissions'"></div>
|
||||
|
||||
<!-- Status Filters (only visible in Submissions tab) -->
|
||||
<template x-if="activeTab === 'submissions'">
|
||||
<div class="flex items-center space-x-2">
|
||||
<a href="{% url 'moderation:submission_list' %}?status=PENDING"
|
||||
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'PENDING' or not request.GET.status %}bg-blue-100 text-blue-900 dark:bg-blue-900/40 dark:text-blue-400{% else %}text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300{% endif %}"
|
||||
hx-get="{% url 'moderation:submission_list' %}?status=PENDING"
|
||||
hx-target="#dashboard-content"
|
||||
hx-push-url="true"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2.5 text-lg fas fa-clock"></i>
|
||||
<span>Pending</span>
|
||||
</a>
|
||||
|
||||
<a href="{% url 'moderation:submission_list' %}?status=APPROVED"
|
||||
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'APPROVED' %}bg-blue-100 text-blue-900 dark:bg-blue-900/40 dark:text-blue-400{% else %}text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300{% endif %}"
|
||||
hx-get="{% url 'moderation:submission_list' %}?status=APPROVED"
|
||||
hx-target="#dashboard-content"
|
||||
hx-push-url="true"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2.5 text-lg fas fa-check"></i>
|
||||
<span>Approved</span>
|
||||
</a>
|
||||
|
||||
<a href="{% url 'moderation:submission_list' %}?status=REJECTED"
|
||||
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'REJECTED' %}bg-blue-100 text-blue-900 dark:bg-blue-900/40 dark:text-blue-400{% else %}text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300{% endif %}"
|
||||
hx-get="{% url 'moderation:submission_list' %}?status=REJECTED"
|
||||
hx-target="#dashboard-content"
|
||||
hx-push-url="true"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2.5 text-lg fas fa-times"></i>
|
||||
<span>Rejected</span>
|
||||
</a>
|
||||
|
||||
<a href="{% url 'moderation:submission_list' %}?status=ESCALATED"
|
||||
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 {% if request.GET.status == 'ESCALATED' %}bg-blue-100 text-blue-900 dark:bg-blue-900/40 dark:text-blue-400{% else %}text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300{% endif %}"
|
||||
hx-get="{% url 'moderation:submission_list' %}?status=ESCALATED"
|
||||
hx-target="#dashboard-content"
|
||||
hx-push-url="true"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2.5 text-lg fas fa-exclamation-triangle"></i>
|
||||
<span>Escalated</span>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<button class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 text-gray-600 dark:text-gray-400 hover:text-blue-900 hover:bg-blue-100 dark:hover:text-blue-400 dark:hover:bg-blue-900/40"
|
||||
hx-get="{{ request.get_full_path }}"
|
||||
hx-target="#dashboard-content"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2.5 text-lg fas fa-sync-alt"></i>
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- View Full History Link (visible in History tab) -->
|
||||
<a href="{% url 'moderation:history' %}"
|
||||
x-show="activeTab === 'history'"
|
||||
x-cloak
|
||||
class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 text-blue-600 dark:text-blue-400 hover:text-blue-900 hover:bg-blue-100 dark:hover:text-blue-300 dark:hover:bg-blue-900/40">
|
||||
<i class="mr-2.5 text-lg fas fa-external-link-alt"></i>
|
||||
<span>Full History</span>
|
||||
</a>
|
||||
|
||||
<button class="flex items-center px-4 py-2.5 rounded-lg font-medium transition-all duration-200 text-gray-600 dark:text-gray-400 hover:text-blue-900 hover:bg-blue-100 dark:hover:text-blue-400 dark:hover:bg-blue-900/40"
|
||||
hx-get="{{ request.get_full_path }}"
|
||||
hx-target="#dashboard-content"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2.5 text-lg fas fa-sync-alt"></i>
|
||||
<span>Refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
|
||||
<!-- Submissions Tab Panel -->
|
||||
<div x-show="activeTab === 'submissions'" class="p-6 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
|
||||
<form class="mb-6"
|
||||
x-data="{ showFilters: false }"
|
||||
hx-get="{% url 'moderation:submission_list' %}"
|
||||
@@ -63,7 +102,7 @@
|
||||
hx-trigger="change from:select"
|
||||
hx-push-url="true"
|
||||
aria-label="Submission filters">
|
||||
|
||||
|
||||
<!-- Mobile Filter Toggle -->
|
||||
<button type="button"
|
||||
class="flex items-center w-full gap-2 p-3 mb-4 font-medium text-left text-gray-700 transition-colors duration-200 bg-gray-100 rounded-lg md:hidden dark:text-gray-300 dark:bg-gray-900"
|
||||
@@ -83,7 +122,7 @@
|
||||
:class="{'hidden md:grid': !showFilters, 'grid': showFilters}"
|
||||
role="group"
|
||||
aria-label="Filter controls">
|
||||
|
||||
|
||||
<div class="relative">
|
||||
<label id="submission-type-label"
|
||||
class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
@@ -150,28 +189,60 @@
|
||||
{% include "moderation/partials/submission_list.html" with submissions=submissions user=user %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History Tab Panel -->
|
||||
<div x-show="activeTab === 'history'" x-cloak>
|
||||
<div id="dashboard-history-container"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}"
|
||||
hx-trigger="intersect once"
|
||||
hx-target="this"
|
||||
hx-swap="innerHTML"
|
||||
hx-indicator="#dashboard-history-loading">
|
||||
<!-- Initial Loading State -->
|
||||
<div class="p-6 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
|
||||
<div id="dashboard-history-loading" class="flex flex-col items-center justify-center py-8">
|
||||
<i class="mb-2 text-2xl text-blue-500 fas fa-spinner fa-spin"></i>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Loading history...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- History Detail Modal -->
|
||||
{% include 'moderation/partials/history_detail_modal.html' %}
|
||||
</div>
|
||||
|
||||
<div id="toast-container"
|
||||
x-data="{
|
||||
show: false,
|
||||
<div id="toast-container"
|
||||
data-toast
|
||||
x-data="{
|
||||
show: false,
|
||||
message: '',
|
||||
type: 'success',
|
||||
icon: 'check',
|
||||
color: 'green',
|
||||
showToast(msg, icn = 'check', clr = 'green') {
|
||||
this.message = msg;
|
||||
this.icon = icn;
|
||||
this.color = clr;
|
||||
showToast(data) {
|
||||
if (typeof data === 'string') {
|
||||
this.message = data;
|
||||
this.type = 'success';
|
||||
} else {
|
||||
this.message = data.message || 'Action completed';
|
||||
this.type = data.type || 'success';
|
||||
}
|
||||
// Set icon based on type
|
||||
this.icon = this.type === 'success' ? 'check' :
|
||||
this.type === 'error' ? 'times' :
|
||||
this.type === 'warning' ? 'exclamation-triangle' :
|
||||
this.type === 'info' ? 'info-circle' : 'check';
|
||||
this.show = true;
|
||||
setTimeout(() => this.show = false, 3000);
|
||||
}
|
||||
}"
|
||||
@submission-approved.window="showToast('Submission approved successfully', 'check', 'green')"
|
||||
@submission-rejected.window="showToast('Submission rejected', 'times', 'red')"
|
||||
@submission-escalated.window="showToast('Submission escalated', 'exclamation-triangle', 'yellow')"
|
||||
@submission-updated.window="showToast('Changes saved successfully', 'check', 'blue')"
|
||||
@show-toast.window="showToast($event.detail)"
|
||||
@submission-approved.window="showToast({message: 'Submission approved successfully', type: 'success'})"
|
||||
@submission-rejected.window="showToast({message: 'Submission rejected', type: 'error'})"
|
||||
@submission-escalated.window="showToast({message: 'Submission escalated', type: 'warning'})"
|
||||
@submission-updated.window="showToast({message: 'Changes saved successfully', type: 'info'})"
|
||||
class="fixed z-50 bottom-4 right-4">
|
||||
|
||||
|
||||
<div x-show="show"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 translate-y-full"
|
||||
@@ -182,15 +253,15 @@
|
||||
class="flex items-center w-full max-w-xs p-4 text-gray-400 bg-gray-800 rounded-lg shadow">
|
||||
<div class="inline-flex items-center justify-center shrink-0 w-8 h-8 rounded-lg"
|
||||
:class="{
|
||||
'text-green-400 bg-green-900/40': color === 'green',
|
||||
'text-red-400 bg-red-900/40': color === 'red',
|
||||
'text-yellow-400 bg-yellow-900/40': color === 'yellow',
|
||||
'text-blue-400 bg-blue-900/40': color === 'blue'
|
||||
'text-green-400 bg-green-900/40': type === 'success',
|
||||
'text-red-400 bg-red-900/40': type === 'error',
|
||||
'text-yellow-400 bg-yellow-900/40': type === 'warning',
|
||||
'text-blue-400 bg-blue-900/40': type === 'info'
|
||||
}">
|
||||
<i class="fas" :class="'fa-' + icon"></i>
|
||||
</div>
|
||||
<div class="ml-3 text-sm font-normal" x-text="message"></div>
|
||||
<button type="button"
|
||||
<button type="button"
|
||||
class="ml-auto -mx-1.5 -my-1.5 text-gray-400 hover:text-gray-300 rounded-lg p-1.5 inline-flex h-8 w-8"
|
||||
@click="show = false">
|
||||
<i class="fas fa-times"></i>
|
||||
@@ -199,23 +270,59 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Handle HX-Trigger headers from FSMTransitionView for toast notifications
|
||||
document.body.addEventListener('htmx:afterOnLoad', function(evt) {
|
||||
const triggerHeader = evt.detail.xhr.getResponseHeader('HX-Trigger');
|
||||
if (triggerHeader) {
|
||||
try {
|
||||
const triggers = JSON.parse(triggerHeader);
|
||||
if (triggers.showToast) {
|
||||
window.dispatchEvent(new CustomEvent('show-toast', { detail: triggers.showToast }));
|
||||
}
|
||||
} catch (e) {
|
||||
// Handle non-JSON trigger headers (simple event names)
|
||||
console.debug('Non-JSON HX-Trigger header:', triggerHeader);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Handle HX-Trigger headers on error responses for toast notifications
|
||||
document.body.addEventListener('htmx:responseError', function(evt) {
|
||||
const triggerHeader = evt.detail.xhr.getResponseHeader('HX-Trigger');
|
||||
if (triggerHeader) {
|
||||
try {
|
||||
const triggers = JSON.parse(triggerHeader);
|
||||
if (triggers.showToast) {
|
||||
window.dispatchEvent(new CustomEvent('show-toast', { detail: triggers.showToast }));
|
||||
}
|
||||
} catch (e) {
|
||||
// Handle non-JSON trigger headers (simple event names)
|
||||
console.debug('Non-JSON HX-Trigger header:', triggerHeader);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Fallback: Handle legacy URL-based toast dispatching for backward compatibility
|
||||
document.body.addEventListener('htmx:afterRequest', function(evt) {
|
||||
if (evt.detail.successful) {
|
||||
const path = evt.detail.requestConfig.path;
|
||||
let event;
|
||||
|
||||
if (path.includes('approve')) {
|
||||
event = new CustomEvent('submission-approved');
|
||||
} else if (path.includes('reject')) {
|
||||
event = new CustomEvent('submission-rejected');
|
||||
} else if (path.includes('escalate')) {
|
||||
event = new CustomEvent('submission-escalated');
|
||||
} else if (path.includes('edit')) {
|
||||
event = new CustomEvent('submission-updated');
|
||||
}
|
||||
|
||||
if (event) {
|
||||
window.dispatchEvent(event);
|
||||
|
||||
// Only dispatch if it's an old-style URL (not FSM transition URL)
|
||||
if (!path.includes('/transition/')) {
|
||||
if (path.includes('approve')) {
|
||||
event = new CustomEvent('submission-approved');
|
||||
} else if (path.includes('reject')) {
|
||||
event = new CustomEvent('submission-rejected');
|
||||
} else if (path.includes('escalate')) {
|
||||
event = new CustomEvent('submission-escalated');
|
||||
} else if (path.includes('edit')) {
|
||||
event = new CustomEvent('submission-updated');
|
||||
}
|
||||
|
||||
if (event) {
|
||||
window.dispatchEvent(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
177
backend/templates/moderation/partials/editsubmission_row.html
Normal file
177
backend/templates/moderation/partials/editsubmission_row.html
Normal file
@@ -0,0 +1,177 @@
|
||||
{% load moderation_tags %}
|
||||
{% load fsm_tags %}
|
||||
|
||||
<div class="p-6 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50 {% if transition_success %}animate-flash-success{% endif %}"
|
||||
id="submission-{{ object.id }}"
|
||||
data-submission-id="{{ object.id }}"
|
||||
x-data="{
|
||||
showSuccess: false,
|
||||
isEditing: false,
|
||||
status: '{{ object.changes.status|default:"" }}',
|
||||
category: '{{ object.changes.category|default:"" }}',
|
||||
showCoasterFields: {% if object.changes.category == 'RC' %}true{% else %}false{% endif %},
|
||||
init() {
|
||||
this.$watch('category', value => {
|
||||
this.showCoasterFields = value === 'RC';
|
||||
});
|
||||
}
|
||||
}">
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||||
<!-- Left Column: Header & Status -->
|
||||
<div class="md:col-span-1">
|
||||
<div class="submission-header">
|
||||
<h3 class="flex items-center gap-3 text-lg font-semibold text-gray-900 dark:text-gray-300">
|
||||
{% include 'htmx/status_with_actions.html' with object=object user=user show_badge=True badge_only=True %}
|
||||
</h3>
|
||||
<div class="mt-3 text-gray-600 dark:text-gray-400">
|
||||
<div class="flex items-center mb-2">
|
||||
<i class="w-5 mr-2 fas fa-file-alt"></i>
|
||||
{{ object.get_content_type_display }} -
|
||||
{% if object.submission_type == 'CREATE' %}New{% else %}Edit{% endif %}
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
<i class="w-5 mr-2 fas fa-user"></i>
|
||||
{{ object.user.username }}
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
<i class="w-5 mr-2 fas fa-clock"></i>
|
||||
{{ object.created_at|date:"M d, Y H:i" }}
|
||||
</div>
|
||||
{% if object.handled_by %}
|
||||
<div class="flex items-center">
|
||||
<i class="w-5 mr-2 fas fa-user-shield"></i>
|
||||
{{ object.handled_by.username }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Middle Column: Content Details -->
|
||||
<div class="md:col-span-2">
|
||||
{% if object.content_object %}
|
||||
<div class="p-4 mb-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-gray-300">Current Object:</div>
|
||||
<div class="mt-1.5 text-gray-600 dark:text-gray-400">
|
||||
{{ object.content_object }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if object.reason %}
|
||||
<div class="p-4 mb-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-gray-300">Reason:</div>
|
||||
<div class="mt-1.5 text-gray-600 dark:text-gray-400">{{ object.reason }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- View Mode: Show key changes -->
|
||||
<div x-show="!isEditing">
|
||||
<div class="grid grid-cols-1 gap-3 md:grid-cols-2">
|
||||
{% for field, value in object.changes.items %}
|
||||
{% if field != 'model_name' and field != 'latitude' and field != 'longitude' and field != 'street_address' and field != 'city' and field != 'state' and field != 'postal_code' and field != 'country' and field != 'location' %}
|
||||
<div class="p-4 bg-gray-100 border rounded-lg dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50">
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-gray-300">
|
||||
{{ field|title }}:
|
||||
</div>
|
||||
<div class="mt-1.5 text-gray-600 dark:text-gray-400">
|
||||
{% if field == 'opening_date' or field == 'closing_date' or field == 'status_since' %}
|
||||
{{ value|date:"Y-m-d" }}
|
||||
{% elif field == 'size_acres' %}
|
||||
{{ value }} acres
|
||||
{% elif field == 'website' %}
|
||||
<a href="{{ value }}" target="_blank" class="text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
|
||||
{{ value }}
|
||||
</a>
|
||||
{% elif field == 'park' %}
|
||||
{% with park_name=value|get_object_name:'parks.Park' %}
|
||||
{{ park_name }}
|
||||
{% endwith %}
|
||||
{% elif field == 'designer' %}
|
||||
{% with designer_name=value|get_object_name:'designers.Designer' %}
|
||||
{{ designer_name|default:'None' }}
|
||||
{% endwith %}
|
||||
{% elif field == 'manufacturer' %}
|
||||
{% with manufacturer_name=value|get_object_name:'companies.Manufacturer' %}
|
||||
{{ manufacturer_name|default:'None' }}
|
||||
{% endwith %}
|
||||
{% elif field == 'ride_model' %}
|
||||
{% with model_name=value|get_object_name:'rides.RideModel' %}
|
||||
{{ model_name|default:'None' }}
|
||||
{% endwith %}
|
||||
{% elif field == 'category' %}
|
||||
{{ value|get_category_display }}
|
||||
{% elif field == 'stats' %}
|
||||
<div class="space-y-2">
|
||||
{% if value.height_ft %}<div>Height: {{ value.height_ft }} ft</div>{% endif %}
|
||||
{% if value.length_ft %}<div>Length: {{ value.length_ft }} ft</div>{% endif %}
|
||||
{% if value.speed_mph %}<div>Speed: {{ value.speed_mph }} mph</div>{% endif %}
|
||||
{% if value.inversions %}<div>Inversions: {{ value.inversions }}</div>{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
{{ value }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Review Notes -->
|
||||
{% if object.notes %}
|
||||
<div class="p-4 mt-4 border rounded-lg bg-blue-50 dark:bg-blue-900/30 border-blue-200/50 dark:border-blue-700/50">
|
||||
<div class="text-sm font-medium text-blue-900 dark:text-blue-300">Review Notes:</div>
|
||||
<div class="mt-1.5 text-blue-800 dark:text-blue-200">{{ object.notes }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- FSM Actions -->
|
||||
{% if object.status == 'PENDING' or object.status == 'ESCALATED' and user.role in 'ADMIN','SUPERUSER' %}
|
||||
<div class="mt-6 review-notes" x-data="{ showNotes: false }">
|
||||
<div x-show="showNotes"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 transform -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 transform translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 transform translate-y-0"
|
||||
x-transition:leave-end="opacity-0 transform -translate-y-2">
|
||||
<textarea name="notes"
|
||||
class="w-full px-4 py-3 text-gray-900 bg-white border rounded-lg resize-none dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Add review notes (optional)"
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 mt-4 action-buttons">
|
||||
<button class="inline-flex items-center px-4 py-2.5 font-medium text-gray-700 transition-all duration-200 bg-gray-100 rounded-lg hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white shadow-xs hover:shadow-md"
|
||||
@click="showNotes = !showNotes">
|
||||
<i class="mr-2 fas fa-comment-alt"></i>
|
||||
Add Notes
|
||||
</button>
|
||||
|
||||
<button class="inline-flex items-center px-4 py-2.5 font-medium text-gray-700 transition-all duration-200 bg-gray-100 rounded-lg hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white shadow-xs hover:shadow-md"
|
||||
@click="isEditing = !isEditing">
|
||||
<i class="mr-2 fas fa-edit"></i>
|
||||
Edit
|
||||
</button>
|
||||
|
||||
<!-- History Button -->
|
||||
<button type="button"
|
||||
class="inline-flex items-center px-4 py-2.5 font-medium text-gray-700 transition-all duration-200 bg-gray-100 rounded-lg hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white shadow-xs hover:shadow-md"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}?model_type=editsubmission&object_id={{ object.id }}"
|
||||
hx-target="#history-detail-body"
|
||||
hx-swap="innerHTML"
|
||||
@click="$dispatch('open-history-modal')">
|
||||
<i class="mr-2 fas fa-history"></i>
|
||||
History
|
||||
</button>
|
||||
|
||||
<!-- FSM-based transition actions -->
|
||||
{% include 'htmx/status_with_actions.html' with object=object user=user target_id="submission-"|add:object.id|stringformat:"s" show_badge=False %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,129 @@
|
||||
{% comment %}
|
||||
FSM History Detail Content Partial Template
|
||||
|
||||
Content for the history detail modal, loaded via HTMX.
|
||||
|
||||
Required context:
|
||||
- log: StateLog object with transition details
|
||||
{% endcomment %}
|
||||
|
||||
{% if log %}
|
||||
<div class="space-y-4">
|
||||
<!-- Log ID and Timestamp -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-900/50">
|
||||
<dt class="text-xs font-medium text-gray-500 uppercase dark:text-gray-400">Log ID</dt>
|
||||
<dd class="mt-1 text-sm font-semibold text-gray-900 dark:text-white">#{{ log.id }}</dd>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-900/50">
|
||||
<dt class="text-xs font-medium text-gray-500 uppercase dark:text-gray-400">Timestamp</dt>
|
||||
<dd class="mt-1 text-sm font-semibold text-gray-900 dark:text-white">{{ log.timestamp|date:"M d, Y H:i:s" }}</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Model and Object -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-900/50">
|
||||
<dt class="text-xs font-medium text-gray-500 uppercase dark:text-gray-400">Model Type</dt>
|
||||
<dd class="mt-1">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
|
||||
{{ log.content_type.model|title }}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-900/50">
|
||||
<dt class="text-xs font-medium text-gray-500 uppercase dark:text-gray-400">Object ID</dt>
|
||||
<dd class="mt-1 text-sm font-semibold text-gray-900 dark:text-white">#{{ log.object_id }}</dd>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Transition Name -->
|
||||
<div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-900/50">
|
||||
<dt class="text-xs font-medium text-gray-500 uppercase dark:text-gray-400">Transition</dt>
|
||||
<dd class="mt-1">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium text-purple-800 bg-purple-100 rounded-full dark:bg-purple-900/30 dark:text-purple-300">
|
||||
<i class="mr-1 fas fa-exchange-alt"></i>
|
||||
{{ log.transition|default:"—" }}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<!-- State Transition -->
|
||||
<div class="p-4 border rounded-lg border-gray-200/50 dark:border-gray-700/50">
|
||||
<dt class="mb-3 text-xs font-medium text-gray-500 uppercase dark:text-gray-400">State Transition</dt>
|
||||
<dd class="flex items-center justify-center gap-4">
|
||||
{% with from_state=log.source_state %}
|
||||
<span class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-full
|
||||
{% if from_state == 'PENDING' %}
|
||||
bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300
|
||||
{% elif from_state == 'APPROVED' %}
|
||||
bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
|
||||
{% elif from_state == 'REJECTED' %}
|
||||
bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300
|
||||
{% elif from_state == 'ESCALATED' %}
|
||||
bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300
|
||||
{% elif from_state == 'IN_PROGRESS' or from_state == 'PROCESSING' or from_state == 'UNDER_REVIEW' %}
|
||||
bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300
|
||||
{% elif from_state == 'COMPLETED' or from_state == 'RESOLVED' %}
|
||||
bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
|
||||
{% else %}
|
||||
bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300
|
||||
{% endif %}">
|
||||
{{ from_state|default:"—" }}
|
||||
</span>
|
||||
{% endwith %}
|
||||
|
||||
<i class="text-gray-400 fas fa-arrow-right"></i>
|
||||
|
||||
{% with to_state=log.state %}
|
||||
<span class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-full
|
||||
{% if to_state == 'PENDING' %}
|
||||
bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300
|
||||
{% elif to_state == 'APPROVED' %}
|
||||
bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
|
||||
{% elif to_state == 'REJECTED' %}
|
||||
bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300
|
||||
{% elif to_state == 'ESCALATED' %}
|
||||
bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300
|
||||
{% elif to_state == 'IN_PROGRESS' or to_state == 'PROCESSING' or to_state == 'UNDER_REVIEW' %}
|
||||
bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300
|
||||
{% elif to_state == 'COMPLETED' or to_state == 'RESOLVED' %}
|
||||
bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
|
||||
{% else %}
|
||||
bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300
|
||||
{% endif %}">
|
||||
{{ to_state|default:"—" }}
|
||||
</span>
|
||||
{% endwith %}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<!-- User -->
|
||||
<div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-900/50">
|
||||
<dt class="text-xs font-medium text-gray-500 uppercase dark:text-gray-400">Performed By</dt>
|
||||
<dd class="flex items-center mt-1">
|
||||
<i class="mr-2 text-gray-400 fas fa-user"></i>
|
||||
<span class="text-sm font-semibold text-gray-900 dark:text-white">{{ log.by.username|default:"System" }}</span>
|
||||
{% if log.by %}
|
||||
<span class="ml-2 text-xs text-gray-500 dark:text-gray-400">(ID: {{ log.by.id }})</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
</div>
|
||||
|
||||
<!-- Description/Reason -->
|
||||
{% if log.description %}
|
||||
<div class="p-3 rounded-lg bg-gray-50 dark:bg-gray-900/50">
|
||||
<dt class="text-xs font-medium text-gray-500 uppercase dark:text-gray-400">Description/Reason</dt>
|
||||
<dd class="mt-1 text-sm text-gray-700 dark:text-gray-300">{{ log.description }}</dd>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="flex flex-col items-center justify-center py-8">
|
||||
<div class="flex items-center justify-center w-16 h-16 mb-4 text-gray-400 bg-gray-100 rounded-full dark:bg-gray-700">
|
||||
<i class="text-2xl fas fa-exclamation-triangle"></i>
|
||||
</div>
|
||||
<h3 class="mb-1 text-sm font-medium text-gray-900 dark:text-gray-300">Details not found</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Unable to load transition details.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -0,0 +1,80 @@
|
||||
{% comment %}
|
||||
FSM History Detail Modal Partial Template
|
||||
|
||||
Modal for displaying detailed transition information with Alpine.js visibility control.
|
||||
|
||||
Context:
|
||||
- Loaded via HTMX when "View" button is clicked
|
||||
- Modal content populated in #history-detail-body
|
||||
{% endcomment %}
|
||||
|
||||
<div id="history-detail-modal"
|
||||
x-data="{ open: false }"
|
||||
x-show="open"
|
||||
x-cloak
|
||||
@open-history-modal.window="open = true"
|
||||
@keydown.escape.window="open = false"
|
||||
class="fixed inset-0 z-50 overflow-y-auto"
|
||||
aria-labelledby="history-detail-title"
|
||||
role="dialog"
|
||||
aria-modal="true">
|
||||
|
||||
<!-- Backdrop -->
|
||||
<div class="fixed inset-0 transition-opacity bg-gray-500/75 dark:bg-gray-900/75"
|
||||
x-show="open"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="open = false"
|
||||
aria-hidden="true"></div>
|
||||
|
||||
<!-- Modal Container -->
|
||||
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
|
||||
<!-- Modal Panel -->
|
||||
<div class="relative w-full max-w-2xl overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl dark:bg-gray-800 sm:my-8"
|
||||
x-show="open"
|
||||
x-transition:enter="ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave="ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
||||
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
@click.stop>
|
||||
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<h3 id="history-detail-title" class="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
<i class="mr-2 text-blue-500 fas fa-history"></i>
|
||||
Transition Details
|
||||
</h3>
|
||||
<button type="button"
|
||||
class="p-2 text-gray-400 transition-colors duration-150 rounded-lg hover:text-gray-500 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-700"
|
||||
@click="open = false"
|
||||
aria-label="Close modal">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Body -->
|
||||
<div id="history-detail-body" class="px-6 py-4">
|
||||
<!-- Content loaded via HTMX -->
|
||||
<div class="flex items-center justify-center py-8">
|
||||
<i class="text-2xl text-gray-400 fas fa-spinner fa-spin"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Footer -->
|
||||
<div class="flex items-center justify-end px-6 py-4 space-x-3 border-t border-gray-200 dark:border-gray-700">
|
||||
<button type="button"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 transition-colors duration-150 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
@click="open = false">
|
||||
<i class="mr-2 fas fa-times"></i>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
192
backend/templates/moderation/partials/history_filters.html
Normal file
192
backend/templates/moderation/partials/history_filters.html
Normal file
@@ -0,0 +1,192 @@
|
||||
{% comment %}
|
||||
FSM History Filter Form Partial Template
|
||||
|
||||
Provides HTMX-driven filtering for history table with model type, state,
|
||||
date range, and user filters.
|
||||
|
||||
Context:
|
||||
- request: Django request object for accessing current filter values
|
||||
{% endcomment %}
|
||||
|
||||
<form id="history-filters"
|
||||
class="p-4 mb-4 bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-trigger="submit"
|
||||
hx-indicator="#history-loading"
|
||||
x-data="{ showFilters: true }">
|
||||
|
||||
<!-- Mobile Filter Toggle -->
|
||||
<button type="button"
|
||||
class="flex items-center w-full gap-2 mb-4 font-medium text-left text-gray-700 md:hidden dark:text-gray-300"
|
||||
@click="showFilters = !showFilters"
|
||||
:aria-expanded="showFilters"
|
||||
aria-controls="history-filter-controls">
|
||||
<i class="fas" :class="showFilters ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
|
||||
<span>Filter Options</span>
|
||||
</button>
|
||||
|
||||
<!-- Filter Controls -->
|
||||
<div id="history-filter-controls"
|
||||
class="grid gap-4 transition-all duration-200 md:grid-cols-6"
|
||||
:class="{'hidden md:grid': !showFilters, 'grid': showFilters}"
|
||||
role="group"
|
||||
aria-label="History filter controls">
|
||||
|
||||
<!-- Search Input -->
|
||||
<div class="relative md:col-span-2">
|
||||
<label for="filter-search"
|
||||
class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Search
|
||||
</label>
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<i class="text-gray-400 fas fa-search"></i>
|
||||
</div>
|
||||
<input type="text"
|
||||
id="filter-search"
|
||||
name="q"
|
||||
value="{{ request.GET.q|default:'' }}"
|
||||
placeholder="Search transitions, users, states..."
|
||||
class="w-full py-2 pl-10 pr-3 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="#history-filters"
|
||||
hx-trigger="keyup changed delay:300ms, search"
|
||||
hx-indicator="#history-loading">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Model Type Filter -->
|
||||
<div class="relative">
|
||||
<label for="filter-model-type"
|
||||
class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Model Type
|
||||
</label>
|
||||
<select id="filter-model-type"
|
||||
name="model_type"
|
||||
class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="#history-filters"
|
||||
hx-trigger="change"
|
||||
hx-indicator="#history-loading">
|
||||
<option value="">All Models</option>
|
||||
<option value="editsubmission" {% if request.GET.model_type == 'editsubmission' %}selected{% endif %}>Edit Submission</option>
|
||||
<option value="photosubmission" {% if request.GET.model_type == 'photosubmission' %}selected{% endif %}>Photo Submission</option>
|
||||
<option value="moderationreport" {% if request.GET.model_type == 'moderationreport' %}selected{% endif %}>Moderation Report</option>
|
||||
<option value="moderationqueue" {% if request.GET.model_type == 'moderationqueue' %}selected{% endif %}>Moderation Queue</option>
|
||||
<option value="bulkoperation" {% if request.GET.model_type == 'bulkoperation' %}selected{% endif %}>Bulk Operation</option>
|
||||
<option value="park" {% if request.GET.model_type == 'park' %}selected{% endif %}>Park</option>
|
||||
<option value="ride" {% if request.GET.model_type == 'ride' %}selected{% endif %}>Ride</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- State Filter -->
|
||||
<div class="relative">
|
||||
<label for="filter-state"
|
||||
class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
State
|
||||
</label>
|
||||
<select id="filter-state"
|
||||
name="state"
|
||||
class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="#history-filters"
|
||||
hx-trigger="change"
|
||||
hx-indicator="#history-loading">
|
||||
<option value="">All States</option>
|
||||
<option value="PENDING" {% if request.GET.state == 'PENDING' %}selected{% endif %}>Pending</option>
|
||||
<option value="APPROVED" {% if request.GET.state == 'APPROVED' %}selected{% endif %}>Approved</option>
|
||||
<option value="REJECTED" {% if request.GET.state == 'REJECTED' %}selected{% endif %}>Rejected</option>
|
||||
<option value="ESCALATED" {% if request.GET.state == 'ESCALATED' %}selected{% endif %}>Escalated</option>
|
||||
<option value="UNDER_REVIEW" {% if request.GET.state == 'UNDER_REVIEW' %}selected{% endif %}>Under Review</option>
|
||||
<option value="RESOLVED" {% if request.GET.state == 'RESOLVED' %}selected{% endif %}>Resolved</option>
|
||||
<option value="IN_PROGRESS" {% if request.GET.state == 'IN_PROGRESS' %}selected{% endif %}>In Progress</option>
|
||||
<option value="COMPLETED" {% if request.GET.state == 'COMPLETED' %}selected{% endif %}>Completed</option>
|
||||
<option value="CANCELLED" {% if request.GET.state == 'CANCELLED' %}selected{% endif %}>Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Start Date Filter -->
|
||||
<div class="relative">
|
||||
<label for="filter-start-date"
|
||||
class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
Start Date
|
||||
</label>
|
||||
<input type="date"
|
||||
id="filter-start-date"
|
||||
name="start_date"
|
||||
value="{{ request.GET.start_date|default:'' }}"
|
||||
class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="#history-filters"
|
||||
hx-trigger="change"
|
||||
hx-indicator="#history-loading">
|
||||
</div>
|
||||
|
||||
<!-- End Date Filter -->
|
||||
<div class="relative">
|
||||
<label for="filter-end-date"
|
||||
class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
End Date
|
||||
</label>
|
||||
<input type="date"
|
||||
id="filter-end-date"
|
||||
name="end_date"
|
||||
value="{{ request.GET.end_date|default:'' }}"
|
||||
class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="#history-filters"
|
||||
hx-trigger="change"
|
||||
hx-indicator="#history-loading">
|
||||
</div>
|
||||
|
||||
<!-- User ID Filter -->
|
||||
<div class="relative">
|
||||
<label for="filter-user-id"
|
||||
class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-400">
|
||||
User ID
|
||||
</label>
|
||||
<input type="text"
|
||||
id="filter-user-id"
|
||||
name="user_id"
|
||||
value="{{ request.GET.user_id|default:'' }}"
|
||||
placeholder="Enter user ID"
|
||||
class="w-full px-3 py-2 text-gray-900 bg-white border rounded-lg dark:text-gray-300 dark:bg-gray-900 border-gray-200/50 dark:border-gray-700/50 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex items-center justify-end gap-3 pt-4 mt-4 border-t border-gray-200/50 dark:border-gray-700/50"
|
||||
:class="{'hidden md:flex': !showFilters, 'flex': showFilters}">
|
||||
|
||||
<!-- Clear Filters Button -->
|
||||
<button type="button"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 transition-colors duration-150 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-indicator="#history-loading"
|
||||
onclick="document.getElementById('history-filters').reset();">
|
||||
<i class="mr-2 fas fa-times"></i>
|
||||
Clear Filters
|
||||
</button>
|
||||
|
||||
<!-- Apply Filters Button -->
|
||||
<button type="submit"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white transition-colors duration-150 bg-blue-600 rounded-lg hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
|
||||
<i class="mr-2 fas fa-filter"></i>
|
||||
Apply Filters
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
158
backend/templates/moderation/partials/history_pagination.html
Normal file
158
backend/templates/moderation/partials/history_pagination.html
Normal file
@@ -0,0 +1,158 @@
|
||||
{% comment %}
|
||||
FSM History Pagination Partial Template
|
||||
|
||||
HTMX-based pagination controls for history table with state preservation.
|
||||
|
||||
Required context:
|
||||
- page_obj: Django Paginator page object
|
||||
{% endcomment %}
|
||||
|
||||
{% if page_obj.has_other_pages %}
|
||||
<nav class="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-900/50 border-t border-gray-200/50 dark:border-gray-700/50"
|
||||
role="navigation"
|
||||
aria-label="History pagination">
|
||||
|
||||
<!-- Mobile Pagination -->
|
||||
<div class="flex justify-between flex-1 sm:hidden">
|
||||
{% if page_obj.has_previous %}
|
||||
<button type="button"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}?page={{ page_obj.previous_page_number }}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="#history-filters"
|
||||
hx-indicator="#history-loading">
|
||||
<i class="mr-2 fas fa-chevron-left"></i>
|
||||
Previous
|
||||
</button>
|
||||
{% else %}
|
||||
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 rounded-md cursor-not-allowed dark:bg-gray-700 dark:text-gray-500 dark:border-gray-600">
|
||||
<i class="mr-2 fas fa-chevron-left"></i>
|
||||
Previous
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% if page_obj.has_next %}
|
||||
<button type="button"
|
||||
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}?page={{ page_obj.next_page_number }}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="#history-filters"
|
||||
hx-indicator="#history-loading">
|
||||
Next
|
||||
<i class="ml-2 fas fa-chevron-right"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-400 bg-gray-100 border border-gray-300 rounded-md cursor-not-allowed dark:bg-gray-700 dark:text-gray-500 dark:border-gray-600">
|
||||
Next
|
||||
<i class="ml-2 fas fa-chevron-right"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Desktop Pagination -->
|
||||
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-400">
|
||||
Showing
|
||||
<span class="font-medium">{{ page_obj.start_index }}</span>
|
||||
to
|
||||
<span class="font-medium">{{ page_obj.end_index }}</span>
|
||||
of
|
||||
<span class="font-medium">{{ page_obj.paginator.count }}</span>
|
||||
results
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<nav class="inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
|
||||
<!-- Previous Button -->
|
||||
{% if page_obj.has_previous %}
|
||||
<button type="button"
|
||||
class="relative inline-flex items-center px-2 py-2 text-gray-400 bg-white border border-gray-300 rounded-l-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}?page={{ page_obj.previous_page_number }}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="#history-filters"
|
||||
hx-indicator="#history-loading"
|
||||
aria-label="Previous page">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<span class="relative inline-flex items-center px-2 py-2 text-gray-300 bg-gray-100 border border-gray-300 rounded-l-md cursor-not-allowed dark:bg-gray-700 dark:text-gray-500 dark:border-gray-600">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
<!-- Page Numbers -->
|
||||
{% for num in page_obj.paginator.page_range %}
|
||||
{% if page_obj.number == num %}
|
||||
<span class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-white bg-blue-600 border border-blue-600 z-10 dark:bg-blue-700 dark:border-blue-700"
|
||||
aria-current="page">
|
||||
{{ num }}
|
||||
</span>
|
||||
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
|
||||
<button type="button"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}?page={{ num }}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="#history-filters"
|
||||
hx-indicator="#history-loading">
|
||||
{{ num }}
|
||||
</button>
|
||||
{% elif num == 1 %}
|
||||
<button type="button"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}?page=1"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="#history-filters"
|
||||
hx-indicator="#history-loading">
|
||||
1
|
||||
</button>
|
||||
{% elif num == page_obj.paginator.num_pages %}
|
||||
<button type="button"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}?page={{ num }}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="#history-filters"
|
||||
hx-indicator="#history-loading">
|
||||
{{ num }}
|
||||
</button>
|
||||
{% elif num == 2 or num == page_obj.paginator.num_pages|add:'-1' %}
|
||||
<span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:border-gray-600">
|
||||
...
|
||||
</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<!-- Next Button -->
|
||||
{% if page_obj.has_next %}
|
||||
<button type="button"
|
||||
class="relative inline-flex items-center px-2 py-2 text-gray-400 bg-white border border-gray-300 rounded-r-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}?page={{ page_obj.next_page_number }}"
|
||||
hx-target="#history-table-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-include="#history-filters"
|
||||
hx-indicator="#history-loading"
|
||||
aria-label="Next page">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<span class="relative inline-flex items-center px-2 py-2 text-gray-300 bg-gray-100 border border-gray-300 rounded-r-md cursor-not-allowed dark:bg-gray-700 dark:text-gray-500 dark:border-gray-600">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading Indicator for Pagination -->
|
||||
<div id="pagination-loading" class="absolute inset-0 flex items-center justify-center bg-white/75 dark:bg-gray-800/75 htmx-indicator">
|
||||
<i class="text-2xl text-blue-500 fas fa-spinner fa-spin"></i>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
173
backend/templates/moderation/partials/history_table.html
Normal file
173
backend/templates/moderation/partials/history_table.html
Normal file
@@ -0,0 +1,173 @@
|
||||
{% comment %}
|
||||
FSM History Table Partial Template
|
||||
|
||||
Displays FSM transition logs in a responsive table format with HTMX integration.
|
||||
|
||||
Required context:
|
||||
- history_logs: QuerySet or list of StateLog objects
|
||||
|
||||
Optional context:
|
||||
- show_model_column: Boolean to show/hide model type column (default: True)
|
||||
- show_object_link: Boolean to make object IDs clickable (default: True)
|
||||
- compact: Boolean for compact layout (default: False)
|
||||
- page_obj: Paginator page object for pagination
|
||||
{% endcomment %}
|
||||
|
||||
<div id="history-table-container" class="overflow-hidden bg-white border rounded-lg dark:bg-gray-800 border-gray-200/50 dark:border-gray-700/50">
|
||||
<!-- Loading Indicator -->
|
||||
<div id="history-loading" class="flex items-center justify-center py-8 htmx-indicator">
|
||||
<i class="mr-2 text-blue-500 fas fa-spinner fa-spin"></i>
|
||||
<span class="text-gray-600 dark:text-gray-400">Loading history...</span>
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead class="bg-gray-50 dark:bg-gray-900/50">
|
||||
<tr>
|
||||
<th scope="col" class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase dark:text-gray-400 {% if compact %}px-2 py-2{% endif %}">
|
||||
Timestamp
|
||||
</th>
|
||||
{% if show_model_column|default:True %}
|
||||
<th scope="col" class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase dark:text-gray-400 {% if compact %}px-2 py-2{% endif %}">
|
||||
Model
|
||||
</th>
|
||||
{% endif %}
|
||||
<th scope="col" class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase dark:text-gray-400 {% if compact %}px-2 py-2{% endif %}">
|
||||
Object ID
|
||||
</th>
|
||||
<th scope="col" class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase dark:text-gray-400 {% if compact %}px-2 py-2{% endif %}">
|
||||
Transition
|
||||
</th>
|
||||
<th scope="col" class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase dark:text-gray-400 {% if compact %}px-2 py-2{% endif %}">
|
||||
From
|
||||
</th>
|
||||
<th scope="col" class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase dark:text-gray-400 {% if compact %}px-2 py-2{% endif %}">
|
||||
To
|
||||
</th>
|
||||
<th scope="col" class="px-4 py-3 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase dark:text-gray-400 {% if compact %}px-2 py-2{% endif %}">
|
||||
User
|
||||
</th>
|
||||
<th scope="col" class="px-4 py-3 text-xs font-semibold tracking-wider text-center text-gray-600 uppercase dark:text-gray-400 {% if compact %}px-2 py-2{% endif %}">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="history-tbody" class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
|
||||
{% for log in history_logs %}
|
||||
<tr id="history-row-{{ log.id }}" class="transition-colors duration-150 hover:bg-gray-50 dark:hover:bg-gray-700/50">
|
||||
<td class="px-4 py-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-300 {% if compact %}px-2 py-2{% endif %}">
|
||||
<div class="flex items-center">
|
||||
<i class="mr-2 text-gray-400 fas fa-clock"></i>
|
||||
{{ log.timestamp|date:"M d, Y H:i" }}
|
||||
</div>
|
||||
</td>
|
||||
{% if show_model_column|default:True %}
|
||||
<td class="px-4 py-3 whitespace-nowrap {% if compact %}px-2 py-2{% endif %}">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900/30 dark:text-blue-300">
|
||||
{{ log.content_type.model|title }}
|
||||
</span>
|
||||
</td>
|
||||
{% endif %}
|
||||
<td class="px-4 py-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-300 {% if compact %}px-2 py-2{% endif %}">
|
||||
{% if show_object_link|default:True %}
|
||||
<a href="#" class="text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">
|
||||
#{{ log.object_id }}
|
||||
</a>
|
||||
{% else %}
|
||||
#{{ log.object_id }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap {% if compact %}px-2 py-2{% endif %}">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium text-purple-800 bg-purple-100 rounded-full dark:bg-purple-900/30 dark:text-purple-300">
|
||||
<i class="mr-1 fas fa-exchange-alt"></i>
|
||||
{{ log.transition|default:"—" }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap {% if compact %}px-2 py-2{% endif %}">
|
||||
{% with from_state=log.source_state %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full
|
||||
{% if from_state == 'PENDING' %}
|
||||
bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300
|
||||
{% elif from_state == 'APPROVED' %}
|
||||
bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
|
||||
{% elif from_state == 'REJECTED' %}
|
||||
bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300
|
||||
{% elif from_state == 'ESCALATED' %}
|
||||
bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300
|
||||
{% elif from_state == 'IN_PROGRESS' or from_state == 'PROCESSING' or from_state == 'UNDER_REVIEW' %}
|
||||
bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300
|
||||
{% elif from_state == 'COMPLETED' or from_state == 'RESOLVED' %}
|
||||
bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
|
||||
{% elif from_state == 'CANCELLED' or from_state == 'DISMISSED' %}
|
||||
bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300
|
||||
{% else %}
|
||||
bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300
|
||||
{% endif %}">
|
||||
{{ from_state|default:"—" }}
|
||||
</span>
|
||||
{% endwith %}
|
||||
</td>
|
||||
<td class="px-4 py-3 whitespace-nowrap {% if compact %}px-2 py-2{% endif %}">
|
||||
{% with to_state=log.state %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium rounded-full
|
||||
{% if to_state == 'PENDING' %}
|
||||
bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300
|
||||
{% elif to_state == 'APPROVED' %}
|
||||
bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
|
||||
{% elif to_state == 'REJECTED' %}
|
||||
bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300
|
||||
{% elif to_state == 'ESCALATED' %}
|
||||
bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300
|
||||
{% elif to_state == 'IN_PROGRESS' or to_state == 'PROCESSING' or to_state == 'UNDER_REVIEW' %}
|
||||
bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300
|
||||
{% elif to_state == 'COMPLETED' or to_state == 'RESOLVED' %}
|
||||
bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300
|
||||
{% elif to_state == 'CANCELLED' or to_state == 'DISMISSED' %}
|
||||
bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300
|
||||
{% else %}
|
||||
bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300
|
||||
{% endif %}">
|
||||
{{ to_state|default:"—" }}
|
||||
</span>
|
||||
{% endwith %}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-700 whitespace-nowrap dark:text-gray-300 {% if compact %}px-2 py-2{% endif %}">
|
||||
<div class="flex items-center">
|
||||
<i class="mr-2 text-gray-400 fas fa-user"></i>
|
||||
{{ log.by.username|default:"System" }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-center whitespace-nowrap {% if compact %}px-2 py-2{% endif %}">
|
||||
<button type="button"
|
||||
class="inline-flex items-center px-2.5 py-1.5 text-xs font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors duration-150"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}?id={{ log.id }}"
|
||||
hx-target="#history-detail-body"
|
||||
hx-swap="innerHTML"
|
||||
@click="$dispatch('open-history-modal')">
|
||||
<i class="mr-1 fas fa-eye"></i>
|
||||
View
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="{% if show_model_column|default:True %}8{% else %}7{% endif %}" class="px-4 py-12 text-center">
|
||||
<div class="flex flex-col items-center justify-center">
|
||||
<div class="flex items-center justify-center w-16 h-16 mb-4 text-gray-400 bg-gray-100 rounded-full dark:bg-gray-700">
|
||||
<i class="text-2xl fas fa-history"></i>
|
||||
</div>
|
||||
<h3 class="mb-1 text-sm font-medium text-gray-900 dark:text-gray-300">No history found</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">No state transitions have been recorded yet.</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if page_obj %}
|
||||
{% include "moderation/partials/history_pagination.html" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -1,3 +1,4 @@
|
||||
{% load fsm_tags %}
|
||||
<div class="p-6 submission-card" id="submission-{{ submission.id }}">
|
||||
<div class="mb-4 submission-header">
|
||||
<div>
|
||||
@@ -56,54 +57,23 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if submission.status == 'PENDING' or submission.status == 'ESCALATED' and user.role in 'ADMIN,SUPERUSER' %}
|
||||
{% if submission.status == 'PENDING' or submission.status == 'ESCALATED' and user.role in 'ADMIN','SUPERUSER' %}
|
||||
<div class="mt-4 review-notes" x-data="{ showNotes: false }">
|
||||
<textarea x-show="showNotes"
|
||||
name="notes"
|
||||
class="w-full p-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="Add review notes (optional)"
|
||||
rows="3"></textarea>
|
||||
|
||||
|
||||
<div class="flex items-center justify-end gap-3 mt-4 action-buttons">
|
||||
<button class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
@click="showNotes = !showNotes">
|
||||
<i class="mr-2 fas fa-comment-alt"></i>
|
||||
Add Notes
|
||||
</button>
|
||||
|
||||
{% if submission.status != 'ESCALATED' or user.role in 'ADMIN,SUPERUSER' %}
|
||||
<button class="btn-approve"
|
||||
hx-post="{% url 'moderation:approve_photo' submission.id %}"
|
||||
hx-target="#submission-{{ submission.id }}"
|
||||
hx-include="closest .review-notes"
|
||||
hx-confirm="Are you sure you want to approve this photo?"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2 fas fa-check"></i>
|
||||
Approve
|
||||
</button>
|
||||
|
||||
<button class="btn-reject"
|
||||
hx-post="{% url 'moderation:reject_photo' submission.id %}"
|
||||
hx-target="#submission-{{ submission.id }}"
|
||||
hx-include="closest .review-notes"
|
||||
hx-confirm="Are you sure you want to reject this photo?"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2 fas fa-times"></i>
|
||||
Reject
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
{% if user.role == 'MODERATOR' and submission.status != 'ESCALATED' %}
|
||||
<button class="btn-escalate"
|
||||
hx-post="{% url 'moderation:escalate_photo' submission.id %}"
|
||||
hx-target="#submission-{{ submission.id }}"
|
||||
hx-include="closest .review-notes"
|
||||
hx-confirm="Are you sure you want to escalate this photo?"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2 fas fa-arrow-up"></i>
|
||||
Escalate
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<!-- FSM-based transition actions -->
|
||||
{% include 'htmx/status_with_actions.html' with object=submission user=user target_id="submission-"|add:submission.id|stringformat:"s" show_badge=False %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
{% load fsm_tags %}
|
||||
|
||||
<div class="p-6 submission-card {% if transition_success %}animate-flash-success{% endif %}"
|
||||
id="submission-{{ object.id }}"
|
||||
data-photo-submission-id="{{ object.id }}">
|
||||
<div class="mb-4 submission-header">
|
||||
<div>
|
||||
<h3 class="flex items-center gap-2 text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{% include 'htmx/status_with_actions.html' with object=object user=user show_badge=True badge_only=True %}
|
||||
Photo for {{ object.content_object }}
|
||||
</h3>
|
||||
<div class="mt-1 submission-meta">
|
||||
<span class="inline-flex items-center">
|
||||
<i class="mr-1 fas fa-user"></i>
|
||||
{{ object.user.username }}
|
||||
</span>
|
||||
<span class="mx-2">*</span>
|
||||
<span class="inline-flex items-center">
|
||||
<i class="mr-1 fas fa-clock"></i>
|
||||
{{ object.created_at|date:"M d, Y H:i" }}
|
||||
</span>
|
||||
{% if object.date_taken %}
|
||||
<span class="mx-2">*</span>
|
||||
<span class="inline-flex items-center">
|
||||
<i class="mr-1 fas fa-calendar"></i>
|
||||
Taken: {{ object.date_taken|date:"M d, Y" }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Photo display -->
|
||||
<div class="mt-4 overflow-hidden bg-gray-100 rounded-lg aspect-w-16 aspect-h-9 dark:bg-gray-800">
|
||||
<img src="{{ object.photo.url }}"
|
||||
alt="{{ object.caption|default:'Submitted photo' }}"
|
||||
class="object-contain w-full h-full">
|
||||
</div>
|
||||
|
||||
{% if object.caption %}
|
||||
<div class="p-4 mt-2 rounded-lg bg-gray-50 dark:bg-gray-700/50">
|
||||
<div class="text-sm font-medium text-gray-700 dark:text-gray-300">Caption:</div>
|
||||
<div class="mt-1 text-gray-600 dark:text-gray-400">{{ object.caption }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if object.notes %}
|
||||
<div class="p-4 mt-4 border rounded-lg bg-blue-50 dark:bg-blue-900/30 border-blue-200/50 dark:border-blue-700/50">
|
||||
<div class="text-sm font-medium text-blue-900 dark:text-blue-300">Review Notes:</div>
|
||||
<div class="mt-1.5 text-blue-800 dark:text-blue-200">{{ object.notes }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- FSM Actions -->
|
||||
{% if object.status == 'PENDING' or object.status == 'ESCALATED' and user.role in 'ADMIN','SUPERUSER' %}
|
||||
<div class="mt-4 review-notes" x-data="{ showNotes: false }">
|
||||
<textarea x-show="showNotes"
|
||||
name="notes"
|
||||
class="w-full p-3 border border-gray-300 rounded-lg resize-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
||||
placeholder="Add review notes (optional)"
|
||||
rows="3"></textarea>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 mt-4 action-buttons">
|
||||
<button class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
@click="showNotes = !showNotes">
|
||||
<i class="mr-2 fas fa-comment-alt"></i>
|
||||
Add Notes
|
||||
</button>
|
||||
|
||||
<!-- History Button -->
|
||||
<button type="button"
|
||||
class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
||||
hx-get="{% url 'moderation:moderation-reports-all-history' %}?model_type=photosubmission&object_id={{ object.id }}"
|
||||
hx-target="#history-detail-body"
|
||||
hx-swap="innerHTML"
|
||||
@click="$dispatch('open-history-modal')">
|
||||
<i class="mr-2 fas fa-history"></i>
|
||||
History
|
||||
</button>
|
||||
|
||||
<!-- FSM-based transition actions -->
|
||||
{% include 'htmx/status_with_actions.html' with object=object user=user target_id="submission-"|add:object.id|stringformat:"s" show_badge=False %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -1,5 +1,6 @@
|
||||
{% load moderation_tags %}
|
||||
{% load static %}
|
||||
{% load fsm_tags %}
|
||||
|
||||
{% block extra_head %}
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
@@ -409,9 +410,9 @@
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if submission.status == 'PENDING' or submission.status == 'ESCALATED' and user.role in 'ADMIN,SUPERUSER' %}
|
||||
{% if submission.status == 'PENDING' or submission.status == 'ESCALATED' and user.role in 'ADMIN','SUPERUSER' %}
|
||||
<div class="mt-6 review-notes" x-data="{ showNotes: false }">
|
||||
<div x-show="showNotes"
|
||||
<div x-show="showNotes"
|
||||
x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 transform -translate-y-2"
|
||||
x-transition:enter-end="opacity-100 transform translate-y-0"
|
||||
@@ -424,7 +425,7 @@
|
||||
rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 action-buttons">
|
||||
<div class="flex items-center justify-end gap-3 mt-4 action-buttons">
|
||||
<button class="inline-flex items-center px-4 py-2.5 font-medium text-gray-700 transition-all duration-200 bg-gray-100 rounded-lg hover:bg-gray-200 hover:text-gray-900 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white shadow-xs hover:shadow-md"
|
||||
@click="showNotes = !showNotes">
|
||||
<i class="mr-2 fas fa-comment-alt"></i>
|
||||
@@ -436,40 +437,9 @@
|
||||
<i class="mr-2 fas fa-edit"></i>
|
||||
Edit
|
||||
</button>
|
||||
|
||||
{% if submission.status != 'ESCALATED' or user.role in 'ADMIN,SUPERUSER' %}
|
||||
<button class="inline-flex items-center px-4 py-2.5 font-medium text-white transition-all duration-200 bg-green-600 rounded-lg hover:bg-green-500 dark:bg-green-700 dark:hover:bg-green-600 shadow-xs hover:shadow-md"
|
||||
hx-post="{% url 'moderation:approve_submission' submission.id %}"
|
||||
hx-target="#submissions-content"
|
||||
hx-include="closest .review-notes"
|
||||
hx-confirm="Are you sure you want to approve this submission?"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2 fas fa-check"></i>
|
||||
Approve
|
||||
</button>
|
||||
|
||||
<button class="inline-flex items-center px-4 py-2.5 font-medium text-white transition-all duration-200 bg-red-600 rounded-lg hover:bg-red-500 dark:bg-red-700 dark:hover:bg-red-600 shadow-xs hover:shadow-md"
|
||||
hx-post="{% url 'moderation:reject_submission' submission.id %}"
|
||||
hx-target="#submissions-content"
|
||||
hx-include="closest .review-notes"
|
||||
hx-confirm="Are you sure you want to reject this submission?"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2 fas fa-times"></i>
|
||||
Reject
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
{% if user.role == 'MODERATOR' and submission.status != 'ESCALATED' %}
|
||||
<button class="inline-flex items-center px-4 py-2.5 font-medium text-white transition-all duration-200 bg-yellow-600 rounded-lg hover:bg-yellow-500 dark:bg-yellow-700 dark:hover:bg-yellow-600 shadow-xs hover:shadow-md"
|
||||
hx-post="{% url 'moderation:escalate_submission' submission.id %}"
|
||||
hx-target="#submissions-content"
|
||||
hx-include="closest .review-notes"
|
||||
hx-confirm="Are you sure you want to escalate this submission?"
|
||||
hx-indicator="#loading-indicator">
|
||||
<i class="mr-2 fas fa-arrow-up"></i>
|
||||
Escalate
|
||||
</button>
|
||||
{% endif %}
|
||||
<!-- FSM-based transition actions -->
|
||||
{% include 'htmx/status_with_actions.html' with object=submission user=user target_id="submission-"|add:submission.id|stringformat:"s" show_badge=False %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user