sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add job details modal for Letzshop jobs tab

Browse Source 
- Replace browser alert with proper modal for job details view
- Show job info, status, records, timestamps in modal
- Display export file details (languages, file sizes) for export jobs
- Include error_details in API response for export and order_sync jobs
- Add selectedJobDetails state and showJobDetailsModal flag

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2025-12-20 23:20:16 +01:00
parent 9d88588d7a
commit cef80af561
3 changed files with 166 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/services/letzshop/order_service.py
View File

@@ -705,6 +705,7 @@ class LetzshopOrderService:
"records_processed": log.records_processed or 0,
"records_succeeded": log.records_succeeded or 0,
"records_failed": log.records_failed or 0,
"error_details": log.error_details,
}
)
@@ -733,6 +734,7 @@ class LetzshopOrderService:
"records_processed": log.records_processed or 0,
"records_succeeded": log.records_succeeded or 0,
"records_failed": log.records_failed or 0,
"error_details": log.error_details, # Include export file details
}
)

159
app/templates/admin/partials/letzshop-jobs-table.html
View File

@@ -178,3 +178,162 @@
</div>
</div>
</div>
<!-- Job Details Modal -->
<div
x-show="showJobDetailsModal"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 z-30 flex items-center justify-center bg-black bg-opacity-50"
@click.self="showJobDetailsModal = false"
x-cloak
>
<div
x-show="showJobDetailsModal"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-start="opacity-0 transform scale-95"
x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-95"
class="w-full max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-xl"
>
<!-- Header -->
<header class="flex justify-between items-center px-6 py-4 border-b dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Job Details</h3>
<button
@click="showJobDetailsModal = false"
class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
>
<span x-html="$icon('close', 'w-5 h-5')"></span>
</button>
</header>
<!-- Body -->
<div class="px-6 py-4 space-y-4">
<!-- Job Info Grid -->
<div class="grid grid-cols-2 gap-4 text-sm">
<div>
<span class="font-medium text-gray-600 dark:text-gray-400">Job ID:</span>
<span class="ml-2 text-gray-900 dark:text-gray-100">#<span x-text="selectedJobDetails?.id"></span></span>
</div>
<div>
<span class="font-medium text-gray-600 dark:text-gray-400">Type:</span>
<span class="ml-2">
<span
class="px-2 py-0.5 text-xs font-medium rounded-full"
:class="{
'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300': selectedJobDetails?.type === 'import',
'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300': selectedJobDetails?.type === 'export',
'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-300': selectedJobDetails?.type === 'historical_import',
'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300': selectedJobDetails?.type === 'order_sync'
}"
x-text="selectedJobDetails?.type === 'import' ? 'Product Import' : selectedJobDetails?.type === 'export' ? 'Product Export' : selectedJobDetails?.type === 'historical_import' ? 'Historical Import' : 'Order Sync'"
></span>
</span>
</div>
<div>
<span class="font-medium text-gray-600 dark:text-gray-400">Status:</span>
<span class="ml-2">
<span
class="px-2 py-0.5 text-xs font-semibold rounded-full"
:class="{
'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-300': selectedJobDetails?.status === 'pending',
'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': selectedJobDetails?.status === 'processing',
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': selectedJobDetails?.status === 'completed' || selectedJobDetails?.status === 'success',
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': selectedJobDetails?.status === 'failed',
'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': selectedJobDetails?.status === 'completed_with_errors' || selectedJobDetails?.status === 'partial'
}"
x-text="selectedJobDetails?.status?.replace(/_/g, ' ').toUpperCase()"
></span>
</span>
</div>
<div>
<span class="font-medium text-gray-600 dark:text-gray-400">Vendor:</span>
<span class="ml-2 text-gray-900 dark:text-gray-100" x-text="selectedJobDetails?.vendor_code || selectedJobDetails?.vendor_name || selectedVendor?.name || '-'"></span>
</div>
</div>
<!-- Records Info -->
<div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Records</h4>
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<div class="text-2xl font-bold text-green-600 dark:text-green-400" x-text="selectedJobDetails?.records_succeeded || 0"></div>
<div class="text-xs text-gray-500 dark:text-gray-400">Succeeded</div>
</div>
<div>
<div class="text-2xl font-bold text-gray-600 dark:text-gray-300" x-text="selectedJobDetails?.records_processed || 0"></div>
<div class="text-xs text-gray-500 dark:text-gray-400">Processed</div>
</div>
<div>
<div class="text-2xl font-bold text-red-600 dark:text-red-400" x-text="selectedJobDetails?.records_failed || 0"></div>
<div class="text-xs text-gray-500 dark:text-gray-400">Failed</div>
</div>
</div>
</div>
<!-- Timestamps -->
<div class="text-sm space-y-2">
<div class="flex justify-between">
<span class="font-medium text-gray-600 dark:text-gray-400">Started:</span>
<span class="text-gray-900 dark:text-gray-100" x-text="formatDate(selectedJobDetails?.started_at || selectedJobDetails?.created_at)"></span>
</div>
<div class="flex justify-between">
<span class="font-medium text-gray-600 dark:text-gray-400">Completed:</span>
<span class="text-gray-900 dark:text-gray-100" x-text="selectedJobDetails?.completed_at ? formatDate(selectedJobDetails?.completed_at) : 'In progress...'"></span>
</div>
<div class="flex justify-between">
<span class="font-medium text-gray-600 dark:text-gray-400">Duration:</span>
<span class="text-gray-900 dark:text-gray-100" x-text="formatDuration(selectedJobDetails?.started_at || selectedJobDetails?.created_at, selectedJobDetails?.completed_at)"></span>
</div>
</div>
<!-- Export Details (for export jobs) -->
<template x-if="selectedJobDetails?.type === 'export' && selectedJobDetails?.error_details">
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
<h4 class="font-medium text-blue-700 dark:text-blue-300 mb-2">Export Details</h4>
<p class="text-sm text-blue-600 dark:text-blue-400 mb-2">
Products exported: <span class="font-medium" x-text="selectedJobDetails?.error_details?.products_exported || 0"></span>
</p>
<template x-if="selectedJobDetails?.error_details?.files">
<div class="space-y-1">
<template x-for="file in selectedJobDetails.error_details.files" :key="file.language">
<div class="text-xs flex justify-between items-center py-1 border-b border-blue-100 dark:border-blue-800 last:border-0">
<span class="font-medium text-blue-700 dark:text-blue-300" x-text="file.language?.toUpperCase()"></span>
<span x-show="file.error" class="text-red-600 dark:text-red-400" x-text="'Failed: ' + file.error"></span>
<span x-show="!file.error" class="text-blue-600 dark:text-blue-400">
<span x-text="file.filename"></span>
<span class="text-gray-400 ml-1">(<span x-text="(file.size_bytes / 1024).toFixed(1)"></span> KB)</span>
</span>
</div>
</template>
</div>
</template>
</div>
</template>
<!-- Error Details -->
<template x-if="selectedJobDetails?.error_message || (selectedJobDetails?.error_details?.error && selectedJobDetails?.type !== 'export')">
<div class="bg-red-50 dark:bg-red-900/20 rounded-lg p-4">
<h4 class="font-medium text-red-700 dark:text-red-300 mb-2">Error</h4>
<p class="text-sm text-red-600 dark:text-red-400" x-text="selectedJobDetails?.error_message || selectedJobDetails?.error_details?.error"></p>
</div>
</template>
</div>
<!-- Footer -->
<footer class="px-6 py-4 border-t dark:border-gray-700 flex justify-end">
<button
@click="showJobDetailsModal = false"
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none"
>
Close
</button>
</footer>
</div>
</div>

8
static/admin/js/marketplace-letzshop.js
View File

@@ -129,7 +129,9 @@ function adminMarketplaceLetzshop() {
showTrackingModal: false,
showOrderModal: false,
showResolveModal: false,
showJobDetailsModal: false,
selectedOrder: null,
selectedJobDetails: null,
selectedExceptionForResolve: null,
trackingForm: { tracking_number: '', tracking_provider: '' },
resolveForm: { product_id: null, product_name: '', notes: '', bulk_resolve: false },
@@ -1412,12 +1414,12 @@ function adminMarketplaceLetzshop() {
},
/**
* View job details
* View job details in modal
*/
viewJobDetails(job) {
// For now, just log - could open a modal
marketplaceLetzshopLog.info('View job details:', job);
alert(`Job #${job.id}\nType: ${job.type}\nStatus: ${job.status}\nRecords: ${job.records_succeeded}/${job.records_processed}`);
this.selectedJobDetails = job;
this.showJobDetailsModal = true;
},
/**