feat: enhance Letzshop jobs and order management

- Add job cancellation and retry functionality
- Improve jobs table with better status display
- Add background task improvements
- Update Letzshop order service
- Update documentation

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-21 14:12:26 +01:00
parent 5c0c92e94b
commit a118edced5
7 changed files with 163 additions and 9 deletions

View File

@@ -52,6 +52,7 @@
<thead>
<tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-700">
<th class="px-4 py-3">ID</th>
<th class="px-4 py-3">Vendor</th>
<th class="px-4 py-3">Type</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Records</th>
@@ -63,7 +64,7 @@
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
<template x-if="loadingJobs && jobs.length === 0">
<tr>
<td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
<td colspan="8" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
<span x-html="$icon('spinner', 'w-6 h-6 mx-auto mb-2')"></span>
<p>Loading jobs...</p>
</td>
@@ -71,7 +72,7 @@
</template>
<template x-if="!loadingJobs && jobs.length === 0">
<tr>
<td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
<td colspan="8" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
<span x-html="$icon('collection', 'w-12 h-12 mx-auto mb-2 text-gray-300')"></span>
<p class="font-medium">No jobs found</p>
<p class="text-sm mt-1">Import products or sync orders to see job history</p>
@@ -83,6 +84,9 @@
<td class="px-4 py-3 text-sm font-medium">
<span x-text="'#' + job.id"></span>
</td>
<td class="px-4 py-3 text-sm">
<span x-text="job.vendor_code || job.vendor_name || '-'"></span>
</td>
<td class="px-4 py-3">
<span
class="px-2 py-1 text-xs font-medium rounded-full"
@@ -154,26 +158,59 @@
</table>
</div>
<!-- Pagination -->
<div x-show="jobsPagination.total > jobsPagination.per_page" class="flex items-center justify-between mt-4 pt-4 border-t dark:border-gray-700">
<!-- Numbered Pagination -->
<div x-show="jobsPagination.total > jobsPagination.per_page" class="flex flex-col sm:flex-row items-center justify-between gap-4 mt-4 pt-4 border-t dark:border-gray-700">
<span class="text-sm text-gray-600 dark:text-gray-400">
Showing <span x-text="((jobsPagination.page - 1) * jobsPagination.per_page) + 1"></span>-<span x-text="Math.min(jobsPagination.page * jobsPagination.per_page, jobsPagination.total)"></span> of <span x-text="jobsPagination.total"></span> jobs
</span>
<div class="flex items-center gap-2">
<div class="flex items-center gap-1">
{# First page #}
<button
@click="jobsPagination.page = 1; loadJobs()"
:disabled="jobsPagination.page <= 1"
class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
title="First page"
>
<span x-html="$icon('chevron-double-left', 'w-4 h-4')"></span>
</button>
{# Previous page #}
<button
@click="jobsPagination.page--; loadJobs()"
:disabled="jobsPagination.page <= 1"
class="px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50"
class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
title="Previous page"
>
<span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
</button>
{# Page numbers #}
<template x-for="p in getPageNumbers()" :key="p">
<button
@click="goToPage(p)"
class="px-3 py-1 text-sm font-medium rounded-md border transition-colors"
:class="p === jobsPagination.page
? 'bg-purple-600 text-white border-purple-600 dark:bg-purple-500 dark:border-purple-500'
: 'text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600'"
x-text="p"
></button>
</template>
{# Next page #}
<button
@click="jobsPagination.page++; loadJobs()"
:disabled="jobsPagination.page * jobsPagination.per_page >= jobsPagination.total"
class="px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50"
:disabled="jobsPagination.page >= jobsTotalPages"
class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
title="Next page"
>
<span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
</button>
{# Last page #}
<button
@click="jobsPagination.page = jobsTotalPages; loadJobs()"
:disabled="jobsPagination.page >= jobsTotalPages"
class="px-2 py-1 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
title="Last page"
>
<span x-html="$icon('chevron-double-right', 'w-4 h-4')"></span>
</button>
</div>
</div>
</div>