feat: add unified admin Marketplace Letzshop page
- Add new Marketplace section in admin sidebar with Letzshop sub-item
- Remove old Import and Letzshop Orders items from Product Catalog
- Create unified Letzshop management page with 3 tabs:
- Products tab: Import/Export functionality
- Orders tab: Order management with confirm/reject/tracking
- Settings tab: API credentials and CSV URLs
- Add unified jobs table showing imports, exports, and order syncs
- Implement vendor autocomplete using Tom Select library (CDN + fallback)
- Add /vendors/{vendor_id}/jobs API endpoint for unified job listing
- Move database queries to service layer (LetzshopOrderService)
- Add LetzshopJobItem and LetzshopJobsListResponse schemas
- Include Tom Select CSS/JS assets as local fallback
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -31,6 +31,8 @@ from models.schema.letzshop import (
|
||||
LetzshopCredentialsCreate,
|
||||
LetzshopCredentialsResponse,
|
||||
LetzshopCredentialsUpdate,
|
||||
LetzshopJobItem,
|
||||
LetzshopJobsListResponse,
|
||||
LetzshopOrderListResponse,
|
||||
LetzshopOrderResponse,
|
||||
LetzshopSuccessResponse,
|
||||
@@ -478,3 +480,47 @@ def trigger_vendor_sync(
|
||||
message=f"Sync failed: {e}",
|
||||
errors=[str(e)],
|
||||
)
|
||||
|
||||
|
||||
# ============================================================================
|
||||
# Jobs (Unified view of imports, exports, and syncs)
|
||||
# ============================================================================
|
||||
|
||||
|
||||
@router.get(
|
||||
"/vendors/{vendor_id}/jobs",
|
||||
response_model=LetzshopJobsListResponse,
|
||||
)
|
||||
def list_vendor_letzshop_jobs(
|
||||
vendor_id: int = Path(..., description="Vendor ID"),
|
||||
job_type: str | None = Query(None, description="Filter: import, export, order_sync"),
|
||||
status: str | None = Query(None, description="Filter by status"),
|
||||
skip: int = Query(0, ge=0),
|
||||
limit: int = Query(20, ge=1, le=100),
|
||||
db: Session = Depends(get_db),
|
||||
current_admin: User = Depends(get_current_admin_api),
|
||||
):
|
||||
"""
|
||||
Get unified list of Letzshop-related jobs for a vendor.
|
||||
Combines product imports, exports, and order syncs.
|
||||
"""
|
||||
order_service = get_order_service(db)
|
||||
|
||||
try:
|
||||
order_service.get_vendor_or_raise(vendor_id)
|
||||
except VendorNotFoundError:
|
||||
raise ResourceNotFoundException("Vendor", str(vendor_id))
|
||||
|
||||
# Use service layer for database queries
|
||||
jobs_data, total = order_service.list_letzshop_jobs(
|
||||
vendor_id=vendor_id,
|
||||
job_type=job_type,
|
||||
status=status,
|
||||
skip=skip,
|
||||
limit=limit,
|
||||
)
|
||||
|
||||
# Convert dict data to Pydantic models
|
||||
jobs = [LetzshopJobItem(**job) for job in jobs_data]
|
||||
|
||||
return LetzshopJobsListResponse(jobs=jobs, total=total)
|
||||
|
||||
@@ -536,18 +536,26 @@ async def admin_marketplace_page(
|
||||
)
|
||||
|
||||
|
||||
@router.get("/letzshop", response_class=HTMLResponse, include_in_schema=False)
|
||||
async def admin_letzshop_page(
|
||||
# ============================================================================
|
||||
# MARKETPLACE INTEGRATION ROUTES
|
||||
# ============================================================================
|
||||
|
||||
|
||||
@router.get(
|
||||
"/marketplace/letzshop", response_class=HTMLResponse, include_in_schema=False
|
||||
)
|
||||
async def admin_marketplace_letzshop_page(
|
||||
request: Request,
|
||||
current_user: User = Depends(get_current_admin_from_cookie_or_header),
|
||||
db: Session = Depends(get_db),
|
||||
):
|
||||
"""
|
||||
Render Letzshop management page.
|
||||
Admin overview of Letzshop integration for all vendors.
|
||||
Render unified Letzshop management page.
|
||||
Combines products (import/export), orders, and settings management.
|
||||
Admin can select a vendor and manage their Letzshop integration.
|
||||
"""
|
||||
return templates.TemplateResponse(
|
||||
"admin/letzshop.html",
|
||||
"admin/marketplace-letzshop.html",
|
||||
{
|
||||
"request": request,
|
||||
"user": current_user,
|
||||
|
||||
@@ -19,6 +19,7 @@ from models.database.letzshop import (
|
||||
LetzshopSyncLog,
|
||||
VendorLetzshopCredentials,
|
||||
)
|
||||
from models.database.marketplace_import_job import MarketplaceImportJob
|
||||
from models.database.vendor import Vendor
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
@@ -316,3 +317,101 @@ class LetzshopOrderService:
|
||||
.all()
|
||||
)
|
||||
return items, total
|
||||
|
||||
# =========================================================================
|
||||
# Unified Jobs Operations
|
||||
# =========================================================================
|
||||
|
||||
def list_letzshop_jobs(
|
||||
self,
|
||||
vendor_id: int,
|
||||
job_type: str | None = None,
|
||||
status: str | None = None,
|
||||
skip: int = 0,
|
||||
limit: int = 20,
|
||||
) -> tuple[list[dict[str, Any]], int]:
|
||||
"""
|
||||
List unified Letzshop-related jobs for a vendor.
|
||||
|
||||
Combines product imports from marketplace_import_jobs and
|
||||
order syncs from letzshop_sync_logs.
|
||||
|
||||
Args:
|
||||
vendor_id: Vendor ID
|
||||
job_type: Filter by type ('import', 'order_sync', or None for all)
|
||||
status: Filter by status
|
||||
skip: Pagination offset
|
||||
limit: Pagination limit
|
||||
|
||||
Returns:
|
||||
Tuple of (jobs_list, total_count) where jobs_list contains dicts
|
||||
with id, type, status, created_at, started_at, completed_at,
|
||||
records_processed, records_succeeded, records_failed.
|
||||
"""
|
||||
jobs = []
|
||||
|
||||
# Product imports from marketplace_import_jobs
|
||||
if job_type in (None, "import"):
|
||||
import_query = self.db.query(MarketplaceImportJob).filter(
|
||||
MarketplaceImportJob.vendor_id == vendor_id,
|
||||
MarketplaceImportJob.marketplace == "Letzshop",
|
||||
)
|
||||
if status:
|
||||
import_query = import_query.filter(
|
||||
MarketplaceImportJob.status == status
|
||||
)
|
||||
|
||||
import_jobs = import_query.order_by(
|
||||
MarketplaceImportJob.created_at.desc()
|
||||
).all()
|
||||
|
||||
for job in import_jobs:
|
||||
jobs.append(
|
||||
{
|
||||
"id": job.id,
|
||||
"type": "import",
|
||||
"status": job.status,
|
||||
"created_at": job.created_at,
|
||||
"started_at": job.started_at,
|
||||
"completed_at": job.completed_at,
|
||||
"records_processed": job.total_processed or 0,
|
||||
"records_succeeded": (job.imported_count or 0)
|
||||
+ (job.updated_count or 0),
|
||||
"records_failed": job.error_count or 0,
|
||||
}
|
||||
)
|
||||
|
||||
# Order syncs from letzshop_sync_logs
|
||||
if job_type in (None, "order_sync"):
|
||||
sync_query = self.db.query(LetzshopSyncLog).filter(
|
||||
LetzshopSyncLog.vendor_id == vendor_id,
|
||||
LetzshopSyncLog.operation_type == "order_import",
|
||||
)
|
||||
if status:
|
||||
sync_query = sync_query.filter(LetzshopSyncLog.status == status)
|
||||
|
||||
sync_logs = sync_query.order_by(LetzshopSyncLog.created_at.desc()).all()
|
||||
|
||||
for log in sync_logs:
|
||||
jobs.append(
|
||||
{
|
||||
"id": log.id,
|
||||
"type": "order_sync",
|
||||
"status": log.status,
|
||||
"created_at": log.created_at,
|
||||
"started_at": log.started_at,
|
||||
"completed_at": log.completed_at,
|
||||
"records_processed": log.records_processed or 0,
|
||||
"records_succeeded": log.records_succeeded or 0,
|
||||
"records_failed": log.records_failed or 0,
|
||||
}
|
||||
)
|
||||
|
||||
# Sort all jobs by created_at descending
|
||||
jobs.sort(key=lambda x: x["created_at"], reverse=True)
|
||||
|
||||
# Get total count and apply pagination
|
||||
total = len(jobs)
|
||||
jobs = jobs[skip : skip + limit]
|
||||
|
||||
return jobs, total
|
||||
|
||||
334
app/templates/admin/marketplace-letzshop.html
Normal file
334
app/templates/admin/marketplace-letzshop.html
Normal file
@@ -0,0 +1,334 @@
|
||||
{# app/templates/admin/marketplace-letzshop.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
{% from 'shared/macros/tabs.html' import tabs_nav, tab_button, tab_panel, endtab_panel %}
|
||||
{% from 'shared/macros/alerts.html' import alert_dynamic, error_state %}
|
||||
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
|
||||
{# Import modals macro - custom modals below use inline definition for specialized forms #}
|
||||
{% from 'shared/macros/modals.html' import modal_simple %}
|
||||
|
||||
{% block title %}Letzshop Management{% endblock %}
|
||||
{% block alpine_data %}adminMarketplaceLetzshop(){% endblock %}
|
||||
|
||||
{% block extra_head %}
|
||||
<!-- Tom Select CSS with local fallback -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
|
||||
onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/vendor/tom-select.default.min.css') }}';"
|
||||
/>
|
||||
<style>
|
||||
/* Tom Select dark mode overrides */
|
||||
.dark .ts-wrapper .ts-control {
|
||||
background-color: rgb(55 65 81);
|
||||
border-color: rgb(75 85 99);
|
||||
color: rgb(209 213 219);
|
||||
}
|
||||
.dark .ts-wrapper .ts-control input {
|
||||
color: rgb(209 213 219);
|
||||
}
|
||||
.dark .ts-wrapper .ts-control input::placeholder {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
.dark .ts-dropdown {
|
||||
background-color: rgb(55 65 81);
|
||||
border-color: rgb(75 85 99);
|
||||
color: rgb(209 213 219);
|
||||
}
|
||||
.dark .ts-dropdown .option {
|
||||
color: rgb(209 213 219);
|
||||
}
|
||||
.dark .ts-dropdown .option.active {
|
||||
background-color: rgb(147 51 234);
|
||||
color: white;
|
||||
}
|
||||
.dark .ts-dropdown .option:hover {
|
||||
background-color: rgb(75 85 99);
|
||||
}
|
||||
.dark .ts-wrapper.focus .ts-control {
|
||||
border-color: rgb(147 51 234);
|
||||
box-shadow: 0 0 0 1px rgb(147 51 234);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Page Header with Vendor Selector -->
|
||||
{% call page_header_flex(title='Letzshop Management', subtitle='Manage Letzshop integration for vendors') %}
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Vendor Autocomplete (Tom Select) -->
|
||||
<div class="w-80">
|
||||
<select id="vendor-select" x-ref="vendorSelect" placeholder="Search vendor...">
|
||||
</select>
|
||||
</div>
|
||||
{{ refresh_button(loading_var='loading', onclick='refreshData()', variant='secondary') }}
|
||||
</div>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Success Message -->
|
||||
<div x-show="successMessage" x-transition class="mb-6 p-4 bg-green-100 dark:bg-green-900/30 border border-green-400 dark:border-green-600 text-green-700 dark:text-green-300 rounded-lg flex items-start">
|
||||
<span x-html="$icon('check-circle', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
|
||||
<div>
|
||||
<p class="font-semibold" x-text="successMessage"></p>
|
||||
</div>
|
||||
<button @click="successMessage = ''" class="ml-auto text-green-700 dark:text-green-300 hover:text-green-900">
|
||||
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
{{ error_state('Error', show_condition='error && !loading') }}
|
||||
|
||||
<!-- Vendor Required Warning -->
|
||||
<div x-show="!selectedVendor && !loading" class="mb-8 p-6 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
|
||||
<div class="flex items-center">
|
||||
<span x-html="$icon('exclamation', 'w-6 h-6 text-yellow-500 mr-3')"></span>
|
||||
<div>
|
||||
<h3 class="font-medium text-yellow-800 dark:text-yellow-200">Select a Vendor</h3>
|
||||
<p class="text-sm text-yellow-700 dark:text-yellow-300">Please select a vendor from the dropdown above to manage their Letzshop integration.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content (shown when vendor selected) -->
|
||||
<div x-show="selectedVendor" x-transition x-cloak>
|
||||
<!-- Vendor Info Bar -->
|
||||
<div class="mb-6 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-xs flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
|
||||
<span class="text-lg font-semibold text-purple-600 dark:text-purple-300" x-text="selectedVendor?.name?.charAt(0).toUpperCase()"></span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-800 dark:text-gray-200" x-text="selectedVendor?.name"></h3>
|
||||
<p class="text-sm text-gray-500" x-text="selectedVendor?.vendor_code"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Status Badge -->
|
||||
<span class="px-3 py-1 text-sm font-medium rounded-full"
|
||||
:class="letzshopStatus.is_configured ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300' : 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300'"
|
||||
x-text="letzshopStatus.is_configured ? 'Configured' : 'Not Configured'">
|
||||
</span>
|
||||
<!-- Auto-sync indicator -->
|
||||
<span x-show="letzshopStatus.auto_sync_enabled" class="px-3 py-1 text-sm font-medium rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300">
|
||||
Auto-sync
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
{% call tabs_nav(tab_var='activeTab') %}
|
||||
{{ tab_button('products', 'Products', tab_var='activeTab', icon='cube') }}
|
||||
{{ tab_button('orders', 'Orders', tab_var='activeTab', icon='shopping-cart', count_var='orderStats.pending') }}
|
||||
{{ tab_button('settings', 'Settings', tab_var='activeTab', icon='cog') }}
|
||||
{% endcall %}
|
||||
|
||||
<!-- Products Tab (Import + Export) -->
|
||||
{{ tab_panel('products', tab_var='activeTab') }}
|
||||
{% include 'admin/partials/letzshop-products-tab.html' %}
|
||||
{{ endtab_panel() }}
|
||||
|
||||
<!-- Orders Tab -->
|
||||
{{ tab_panel('orders', tab_var='activeTab') }}
|
||||
{% include 'admin/partials/letzshop-orders-tab.html' %}
|
||||
{{ endtab_panel() }}
|
||||
|
||||
<!-- Settings Tab -->
|
||||
{{ tab_panel('settings', tab_var='activeTab') }}
|
||||
{% include 'admin/partials/letzshop-settings-tab.html' %}
|
||||
{{ endtab_panel() }}
|
||||
|
||||
<!-- Unified Jobs Table (below all tabs) -->
|
||||
<div class="mt-8">
|
||||
{% include 'admin/partials/letzshop-jobs-table.html' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tracking Modal -->
|
||||
<div
|
||||
x-show="showTrackingModal"
|
||||
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-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
|
||||
@click.self="showTrackingModal = false"
|
||||
x-cloak
|
||||
>
|
||||
<div
|
||||
x-transition:enter="transition ease-out duration-150"
|
||||
x-transition:enter-start="opacity-0 transform translate-y-1/2"
|
||||
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 transform translate-y-1/2"
|
||||
class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-md"
|
||||
@click.stop
|
||||
>
|
||||
<header class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Set Tracking Information</h3>
|
||||
<button @click="showTrackingModal = false" class="text-gray-400 hover:text-gray-600">
|
||||
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<form @submit.prevent="submitTracking()">
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Tracking Number <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
x-model="trackingForm.tracking_number"
|
||||
required
|
||||
placeholder="1Z999AA10123456784"
|
||||
class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Carrier <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<select
|
||||
x-model="trackingForm.tracking_carrier"
|
||||
required
|
||||
class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
|
||||
>
|
||||
<option value="">Select carrier...</option>
|
||||
<option value="dhl">DHL</option>
|
||||
<option value="ups">UPS</option>
|
||||
<option value="fedex">FedEx</option>
|
||||
<option value="post_lu">Post Luxembourg</option>
|
||||
<option value="dpd">DPD</option>
|
||||
<option value="gls">GLS</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
@click="showTrackingModal = false"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="submittingTracking"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50"
|
||||
>
|
||||
<span x-show="submittingTracking" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="submittingTracking ? 'Saving...' : 'Save Tracking'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Order Details Modal -->
|
||||
<div
|
||||
x-show="showOrderModal"
|
||||
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-end bg-black bg-opacity-50 sm:items-center sm:justify-center"
|
||||
@click.self="showOrderModal = false"
|
||||
x-cloak
|
||||
>
|
||||
<div
|
||||
x-transition:enter="transition ease-out duration-150"
|
||||
x-transition:enter-start="opacity-0 transform translate-y-1/2"
|
||||
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 transform translate-y-1/2"
|
||||
class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-2xl max-h-[80vh] overflow-y-auto"
|
||||
@click.stop
|
||||
>
|
||||
<header class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Order Details</h3>
|
||||
<button @click="showOrderModal = false" class="text-gray-400 hover:text-gray-600">
|
||||
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div x-show="selectedOrder" class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="font-medium text-gray-600 dark:text-gray-400">Order Number:</span>
|
||||
<span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.letzshop_order_number"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-gray-600 dark:text-gray-400">Status:</span>
|
||||
<span
|
||||
class="ml-2 px-2 py-0.5 text-xs rounded-full"
|
||||
:class="{
|
||||
'bg-orange-100 text-orange-700': selectedOrder?.sync_status === 'pending',
|
||||
'bg-green-100 text-green-700': selectedOrder?.sync_status === 'confirmed',
|
||||
'bg-red-100 text-red-700': selectedOrder?.sync_status === 'rejected',
|
||||
'bg-blue-100 text-blue-700': selectedOrder?.sync_status === 'shipped'
|
||||
}"
|
||||
x-text="selectedOrder?.sync_status?.toUpperCase()"
|
||||
></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-gray-600 dark:text-gray-400">Customer:</span>
|
||||
<span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.customer_email"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-gray-600 dark:text-gray-400">Total:</span>
|
||||
<span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.total_amount + ' ' + selectedOrder?.currency"></span>
|
||||
</div>
|
||||
<div x-show="selectedOrder?.tracking_number">
|
||||
<span class="font-medium text-gray-600 dark:text-gray-400">Tracking:</span>
|
||||
<span class="ml-2 text-gray-700 dark:text-gray-300" x-text="selectedOrder?.tracking_number + ' (' + selectedOrder?.tracking_carrier + ')'"></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-gray-600 dark:text-gray-400">Created:</span>
|
||||
<span class="ml-2 text-gray-700 dark:text-gray-300" x-text="formatDate(selectedOrder?.created_at)"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="selectedOrder?.inventory_units?.length > 0">
|
||||
<h4 class="font-medium text-gray-700 dark:text-gray-300 mb-2">Items</h4>
|
||||
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">
|
||||
<template x-for="unit in selectedOrder?.inventory_units || []" :key="unit.id">
|
||||
<div class="flex justify-between text-sm py-1 border-b border-gray-200 dark:border-gray-600 last:border-0">
|
||||
<span class="text-gray-600 dark:text-gray-400" x-text="unit.id"></span>
|
||||
<span
|
||||
class="px-2 py-0.5 text-xs rounded-full"
|
||||
:class="unit.state === 'confirmed' ? 'bg-green-100 text-green-700' : 'bg-orange-100 text-orange-700'"
|
||||
x-text="unit.state"
|
||||
></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_scripts %}
|
||||
<!-- Tom Select JS with local fallback -->
|
||||
<script>
|
||||
(function() {
|
||||
var script = document.createElement('script');
|
||||
script.src = 'https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/js/tom-select.complete.min.js';
|
||||
script.onerror = function() {
|
||||
console.warn('Tom Select CDN failed, loading local copy...');
|
||||
var fallbackScript = document.createElement('script');
|
||||
fallbackScript.src = '{{ url_for("static", path="shared/js/vendor/tom-select.complete.min.js") }}';
|
||||
document.head.appendChild(fallbackScript);
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
})();
|
||||
</script>
|
||||
<script src="{{ url_for('static', path='admin/js/marketplace-letzshop.js') }}"></script>
|
||||
{% endblock %}
|
||||
177
app/templates/admin/partials/letzshop-jobs-table.html
Normal file
177
app/templates/admin/partials/letzshop-jobs-table.html
Normal file
@@ -0,0 +1,177 @@
|
||||
{# app/templates/admin/partials/letzshop-jobs-table.html #}
|
||||
{# Unified jobs table for admin Letzshop management - Import, Export, and Sync jobs #}
|
||||
|
||||
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Recent Jobs</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Product imports, exports, and order sync history</p>
|
||||
</div>
|
||||
<button
|
||||
@click="loadJobs()"
|
||||
:disabled="loadingJobs"
|
||||
class="flex items-center px-3 py-1.5 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 focus:outline-none disabled:opacity-50"
|
||||
>
|
||||
<span x-show="!loadingJobs" x-html="$icon('refresh', 'w-4 h-4 mr-1')"></span>
|
||||
<span x-show="loadingJobs" x-html="$icon('spinner', 'w-4 h-4 mr-1')"></span>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="mb-4 flex flex-wrap gap-3">
|
||||
<select
|
||||
x-model="jobsFilter.type"
|
||||
@change="loadJobs()"
|
||||
class="px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
|
||||
>
|
||||
<option value="">All Types</option>
|
||||
<option value="import">Product Import</option>
|
||||
<option value="export">Product Export</option>
|
||||
<option value="order_sync">Order Sync</option>
|
||||
</select>
|
||||
<select
|
||||
x-model="jobsFilter.status"
|
||||
@change="loadJobs()"
|
||||
class="px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="processing">Processing</option>
|
||||
<option value="completed">Completed</option>
|
||||
<option value="failed">Failed</option>
|
||||
<option value="completed_with_errors">Completed with Errors</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Jobs Table -->
|
||||
<div class="w-full overflow-x-auto">
|
||||
<table class="w-full whitespace-no-wrap">
|
||||
<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">Type</th>
|
||||
<th class="px-4 py-3">Status</th>
|
||||
<th class="px-4 py-3">Records</th>
|
||||
<th class="px-4 py-3">Started</th>
|
||||
<th class="px-4 py-3">Duration</th>
|
||||
<th class="px-4 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<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">
|
||||
<span x-html="$icon('spinner', 'w-6 h-6 mx-auto mb-2')"></span>
|
||||
<p>Loading jobs...</p>
|
||||
</td>
|
||||
</tr>
|
||||
</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">
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-for="job in jobs" :key="job.id + '-' + job.type">
|
||||
<tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
<td class="px-4 py-3 text-sm font-medium">
|
||||
<span x-text="'#' + job.id"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="px-2 py-1 text-xs font-medium rounded-full"
|
||||
:class="{
|
||||
'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300': job.type === 'import',
|
||||
'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300': job.type === 'export',
|
||||
'bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300': job.type === 'order_sync'
|
||||
}"
|
||||
>
|
||||
<span x-show="job.type === 'import'" x-html="$icon('cloud-download', 'inline w-3 h-3 mr-1')"></span>
|
||||
<span x-show="job.type === 'export'" x-html="$icon('upload', 'inline w-3 h-3 mr-1')"></span>
|
||||
<span x-show="job.type === 'order_sync'" x-html="$icon('refresh', 'inline w-3 h-3 mr-1')"></span>
|
||||
<span x-text="job.type === 'import' ? 'Import' : job.type === 'export' ? 'Export' : 'Order Sync'"></span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="px-2 py-1 text-xs font-semibold leading-tight rounded-full"
|
||||
:class="{
|
||||
'text-gray-700 bg-gray-100 dark:bg-gray-700 dark:text-gray-300': job.status === 'pending',
|
||||
'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': job.status === 'processing',
|
||||
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': job.status === 'completed' || job.status === 'success',
|
||||
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': job.status === 'failed',
|
||||
'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': job.status === 'completed_with_errors' || job.status === 'partial'
|
||||
}"
|
||||
x-text="job.status.replace(/_/g, ' ').toUpperCase()"
|
||||
></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-green-600 dark:text-green-400" x-text="job.records_succeeded || 0"></span>
|
||||
<span class="text-gray-400">/</span>
|
||||
<span x-text="job.records_processed || 0"></span>
|
||||
<span x-show="job.records_failed > 0" class="text-red-600 dark:text-red-400">
|
||||
(<span x-text="job.records_failed"></span> failed)
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<span x-text="formatDate(job.started_at || job.created_at)"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<span x-text="formatDuration(job.started_at, job.completed_at)"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center space-x-2">
|
||||
<button
|
||||
x-show="job.type === 'import' && (job.status === 'failed' || job.status === 'completed_with_errors')"
|
||||
@click="viewJobErrors(job)"
|
||||
class="flex items-center justify-center px-2 py-1 text-sm text-red-600 transition-colors duration-150 rounded-md hover:bg-red-100 dark:hover:bg-red-900"
|
||||
title="View Errors"
|
||||
>
|
||||
<span x-html="$icon('exclamation-circle', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
@click="viewJobDetails(job)"
|
||||
class="flex items-center justify-center px-2 py-1 text-sm text-gray-600 transition-colors duration-150 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
title="View Details"
|
||||
>
|
||||
<span x-html="$icon('eye', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</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">
|
||||
<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">
|
||||
<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"
|
||||
>
|
||||
<span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<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"
|
||||
>
|
||||
<span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
228
app/templates/admin/partials/letzshop-orders-tab.html
Normal file
228
app/templates/admin/partials/letzshop-orders-tab.html
Normal file
@@ -0,0 +1,228 @@
|
||||
{# app/templates/admin/partials/letzshop-orders-tab.html #}
|
||||
{# Orders tab for admin Letzshop management #}
|
||||
|
||||
<!-- Header with Import Button -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Orders</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">Manage Letzshop orders for this vendor</p>
|
||||
</div>
|
||||
<button
|
||||
@click="importOrders()"
|
||||
:disabled="!letzshopStatus.is_configured || importingOrders"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span x-show="!importingOrders" x-html="$icon('download', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-show="importingOrders" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="importingOrders ? 'Importing...' : 'Import Orders'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Status Cards -->
|
||||
<div class="grid gap-6 mb-8 md:grid-cols-4">
|
||||
<!-- Connection Status -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div :class="letzshopStatus.is_configured ? 'bg-green-100 dark:bg-green-900' : 'bg-gray-100 dark:bg-gray-700'" class="p-3 mr-4 rounded-full">
|
||||
<span x-html="$icon(letzshopStatus.is_configured ? 'check' : 'x', letzshopStatus.is_configured ? 'w-5 h-5 text-green-500' : 'w-5 h-5 text-gray-400')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Connection</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="letzshopStatus.is_configured ? 'Configured' : 'Not Configured'"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pending Orders -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-orange-500 bg-orange-100 rounded-full dark:bg-orange-900">
|
||||
<span x-html="$icon('clock', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Pending</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="orderStats.pending"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirmed Orders -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-green-500 bg-green-100 rounded-full dark:bg-green-900">
|
||||
<span x-html="$icon('check-circle', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Confirmed</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="orderStats.confirmed"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shipped Orders -->
|
||||
<div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:bg-blue-900">
|
||||
<span x-html="$icon('truck', 'w-5 h-5')"></span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Shipped</p>
|
||||
<p class="text-lg font-semibold text-gray-700 dark:text-gray-200" x-text="orderStats.shipped"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="mb-4 flex flex-wrap gap-4">
|
||||
<select
|
||||
x-model="ordersFilter"
|
||||
@change="loadOrders()"
|
||||
class="px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="confirmed">Confirmed</option>
|
||||
<option value="rejected">Rejected</option>
|
||||
<option value="shipped">Shipped</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Not Configured Warning -->
|
||||
<div x-show="!letzshopStatus.is_configured" class="mb-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
|
||||
<div class="flex items-center">
|
||||
<span x-html="$icon('exclamation', 'w-5 h-5 text-yellow-500 mr-3')"></span>
|
||||
<div>
|
||||
<h4 class="font-medium text-yellow-800 dark:text-yellow-200">API Not Configured</h4>
|
||||
<p class="text-sm text-yellow-700 dark:text-yellow-300">Configure the Letzshop API key in the Settings tab to import and manage orders.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Orders Table -->
|
||||
<div class="w-full overflow-hidden rounded-lg shadow-xs" x-show="letzshopStatus.is_configured">
|
||||
<div class="w-full overflow-x-auto">
|
||||
<table class="w-full whitespace-no-wrap">
|
||||
<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-800">
|
||||
<th class="px-4 py-3">Order</th>
|
||||
<th class="px-4 py-3">Customer</th>
|
||||
<th class="px-4 py-3">Total</th>
|
||||
<th class="px-4 py-3">Status</th>
|
||||
<th class="px-4 py-3">Date</th>
|
||||
<th class="px-4 py-3">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||
<template x-if="loadingOrders && orders.length === 0">
|
||||
<tr>
|
||||
<td colspan="6" 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 orders...</p>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-if="!loadingOrders && orders.length === 0">
|
||||
<tr>
|
||||
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<span x-html="$icon('inbox', 'w-12 h-12 mx-auto mb-2 text-gray-300')"></span>
|
||||
<p class="font-medium">No orders found</p>
|
||||
<p class="text-sm mt-1">Click "Import Orders" to fetch orders from Letzshop</p>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-for="order in orders" :key="order.id">
|
||||
<tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center text-sm">
|
||||
<div>
|
||||
<p class="font-semibold" x-text="order.letzshop_order_number || order.letzshop_order_id"></p>
|
||||
<p class="text-xs text-gray-500" x-text="'#' + order.id"></p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<p x-text="order.customer_email || 'N/A'"></p>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<span x-text="order.total_amount ? order.total_amount + ' ' + order.currency : 'N/A'"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-xs">
|
||||
<span
|
||||
class="px-2 py-1 font-semibold leading-tight rounded-full"
|
||||
:class="{
|
||||
'text-orange-700 bg-orange-100 dark:bg-orange-700 dark:text-orange-100': order.sync_status === 'pending',
|
||||
'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': order.sync_status === 'confirmed',
|
||||
'text-red-700 bg-red-100 dark:bg-red-700 dark:text-red-100': order.sync_status === 'rejected',
|
||||
'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': order.sync_status === 'shipped'
|
||||
}"
|
||||
x-text="order.sync_status.toUpperCase()"
|
||||
></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<span x-text="formatDate(order.created_at)"></span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center space-x-2 text-sm">
|
||||
<button
|
||||
x-show="order.sync_status === 'pending'"
|
||||
@click="confirmOrder(order)"
|
||||
class="flex items-center justify-center px-2 py-1 text-sm text-green-600 transition-colors duration-150 rounded-md hover:bg-green-100 dark:hover:bg-green-900"
|
||||
title="Confirm Order"
|
||||
>
|
||||
<span x-html="$icon('check', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
x-show="order.sync_status === 'pending'"
|
||||
@click="rejectOrder(order)"
|
||||
class="flex items-center justify-center px-2 py-1 text-sm text-red-600 transition-colors duration-150 rounded-md hover:bg-red-100 dark:hover:bg-red-900"
|
||||
title="Reject Order"
|
||||
>
|
||||
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
x-show="order.sync_status === 'confirmed'"
|
||||
@click="openTrackingModal(order)"
|
||||
class="flex items-center justify-center px-2 py-1 text-sm text-blue-600 transition-colors duration-150 rounded-md hover:bg-blue-100 dark:hover:bg-blue-900"
|
||||
title="Set Tracking"
|
||||
>
|
||||
<span x-html="$icon('truck', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
@click="viewOrderDetails(order)"
|
||||
class="flex items-center justify-center px-2 py-1 text-sm text-gray-600 transition-colors duration-150 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
title="View Details"
|
||||
>
|
||||
<span x-html="$icon('eye', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div x-show="totalOrders > ordersLimit" class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
|
||||
<span class="flex items-center col-span-3">
|
||||
Showing <span x-text="((ordersPage - 1) * ordersLimit) + 1" class="mx-1"></span>-<span x-text="Math.min(ordersPage * ordersLimit, totalOrders)" class="mx-1"></span> of <span x-text="totalOrders" class="mx-1"></span>
|
||||
</span>
|
||||
<span class="col-span-2"></span>
|
||||
<span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
|
||||
<nav aria-label="Table navigation">
|
||||
<ul class="inline-flex items-center">
|
||||
<li>
|
||||
<button
|
||||
@click="ordersPage--; loadOrders()"
|
||||
:disabled="ordersPage <= 1"
|
||||
class="px-3 py-1 rounded-md rounded-l-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||
>
|
||||
<span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
@click="ordersPage++; loadOrders()"
|
||||
:disabled="ordersPage * ordersLimit >= totalOrders"
|
||||
class="px-3 py-1 rounded-md rounded-r-lg focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||
>
|
||||
<span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
236
app/templates/admin/partials/letzshop-products-tab.html
Normal file
236
app/templates/admin/partials/letzshop-products-tab.html
Normal file
@@ -0,0 +1,236 @@
|
||||
{# app/templates/admin/partials/letzshop-products-tab.html #}
|
||||
{# Products tab for admin Letzshop management - Import & Export #}
|
||||
{% from 'shared/macros/inputs.html' import number_stepper %}
|
||||
|
||||
<div class="grid gap-6 md:grid-cols-2">
|
||||
<!-- Import Section -->
|
||||
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-6">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Import Products from Letzshop
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
||||
Import products from a Letzshop CSV feed into the marketplace catalog.
|
||||
</p>
|
||||
|
||||
<form @submit.prevent="startImport()">
|
||||
<!-- CSV URL -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
CSV URL <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
x-model="importForm.csv_url"
|
||||
type="url"
|
||||
required
|
||||
placeholder="https://letzshop.lu/feeds/products.csv"
|
||||
class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Quick Fill Buttons -->
|
||||
<div class="mb-4" x-show="selectedVendor?.letzshop_csv_url_fr || selectedVendor?.letzshop_csv_url_en || selectedVendor?.letzshop_csv_url_de">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Quick Fill
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
@click="quickFillImport('fr')"
|
||||
x-show="selectedVendor?.letzshop_csv_url_fr"
|
||||
class="flex items-center px-3 py-1.5 text-xs font-medium text-purple-600 bg-purple-100 dark:bg-purple-900/30 dark:text-purple-300 border border-purple-300 dark:border-purple-700 rounded-md hover:bg-purple-200 dark:hover:bg-purple-900/50 transition-colors"
|
||||
>
|
||||
<span class="fi fi-fr mr-1.5"></span>
|
||||
French
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="quickFillImport('en')"
|
||||
x-show="selectedVendor?.letzshop_csv_url_en"
|
||||
class="flex items-center px-3 py-1.5 text-xs font-medium text-purple-600 bg-purple-100 dark:bg-purple-900/30 dark:text-purple-300 border border-purple-300 dark:border-purple-700 rounded-md hover:bg-purple-200 dark:hover:bg-purple-900/50 transition-colors"
|
||||
>
|
||||
<span class="fi fi-gb mr-1.5"></span>
|
||||
English
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="quickFillImport('de')"
|
||||
x-show="selectedVendor?.letzshop_csv_url_de"
|
||||
class="flex items-center px-3 py-1.5 text-xs font-medium text-purple-600 bg-purple-100 dark:bg-purple-900/30 dark:text-purple-300 border border-purple-300 dark:border-purple-700 rounded-md hover:bg-purple-200 dark:hover:bg-purple-900/50 transition-colors"
|
||||
>
|
||||
<span class="fi fi-de mr-1.5"></span>
|
||||
German
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Language Selection -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Language
|
||||
</label>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<button
|
||||
type="button"
|
||||
@click="importForm.language = 'fr'"
|
||||
:class="importForm.language === 'fr'
|
||||
? 'bg-purple-100 dark:bg-purple-900/30 border-purple-500 text-purple-700 dark:text-purple-300'
|
||||
: 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300'"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<span class="fi fi-fr"></span>
|
||||
FR
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="importForm.language = 'de'"
|
||||
:class="importForm.language === 'de'
|
||||
? 'bg-purple-100 dark:bg-purple-900/30 border-purple-500 text-purple-700 dark:text-purple-300'
|
||||
: 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300'"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<span class="fi fi-de"></span>
|
||||
DE
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@click="importForm.language = 'en'"
|
||||
:class="importForm.language === 'en'
|
||||
? 'bg-purple-100 dark:bg-purple-900/30 border-purple-500 text-purple-700 dark:text-purple-300'
|
||||
: 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300'"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<span class="fi fi-gb"></span>
|
||||
EN
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Batch Size -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Batch Size
|
||||
</label>
|
||||
{{ number_stepper(model='importForm.batch_size', min=100, max=5000, step=100, label='Batch Size') }}
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
Products processed per batch (100-5000)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="importing || !importForm.csv_url"
|
||||
class="w-full flex items-center justify-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span x-show="!importing" x-html="$icon('cloud-download', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-show="importing" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="importing ? 'Starting Import...' : 'Start Import'"></span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Export Section -->
|
||||
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-6">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Export Products to Letzshop
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
||||
Generate a Letzshop-compatible CSV file from this vendor's product catalog.
|
||||
</p>
|
||||
|
||||
<!-- Language Selection -->
|
||||
<div class="mb-6">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Export Language
|
||||
</label>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
|
||||
Select the language for product titles and descriptions
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<button
|
||||
@click="exportLanguage = 'fr'"
|
||||
:class="exportLanguage === 'fr'
|
||||
? 'bg-purple-100 dark:bg-purple-900/30 border-purple-500 text-purple-700 dark:text-purple-300'
|
||||
: 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300'"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<span class="fi fi-fr"></span>
|
||||
Francais
|
||||
</button>
|
||||
<button
|
||||
@click="exportLanguage = 'de'"
|
||||
:class="exportLanguage === 'de'
|
||||
? 'bg-purple-100 dark:bg-purple-900/30 border-purple-500 text-purple-700 dark:text-purple-300'
|
||||
: 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300'"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<span class="fi fi-de"></span>
|
||||
Deutsch
|
||||
</button>
|
||||
<button
|
||||
@click="exportLanguage = 'en'"
|
||||
:class="exportLanguage === 'en'
|
||||
? 'bg-purple-100 dark:bg-purple-900/30 border-purple-500 text-purple-700 dark:text-purple-300'
|
||||
: 'bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300'"
|
||||
class="flex items-center gap-2 px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<span class="fi fi-gb"></span>
|
||||
English
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include Inactive -->
|
||||
<div class="mb-6">
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="exportIncludeInactive"
|
||||
class="form-checkbox h-5 w-5 text-purple-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:ring-purple-500"
|
||||
/>
|
||||
<span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-400">Include inactive products</span>
|
||||
</label>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-8">
|
||||
Export products that are currently marked as inactive
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Download Button -->
|
||||
<button
|
||||
@click="downloadExport()"
|
||||
:disabled="exporting"
|
||||
class="w-full flex items-center justify-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||
>
|
||||
<span x-show="!exporting" x-html="$icon('download', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-show="exporting" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="exporting ? 'Generating...' : 'Download CSV'"></span>
|
||||
</button>
|
||||
|
||||
<!-- CSV Info -->
|
||||
<div class="mt-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||
<h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CSV Format</h4>
|
||||
<ul class="text-xs text-gray-500 dark:text-gray-400 space-y-1">
|
||||
<li class="flex items-center">
|
||||
<span x-html="$icon('check', 'w-3 h-3 mr-2 text-green-500')"></span>
|
||||
Tab-separated values (TSV)
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span x-html="$icon('check', 'w-3 h-3 mr-2 text-green-500')"></span>
|
||||
UTF-8 encoding
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span x-html="$icon('check', 'w-3 h-3 mr-2 text-green-500')"></span>
|
||||
Google Shopping compatible
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<span x-html="$icon('check', 'w-3 h-3 mr-2 text-green-500')"></span>
|
||||
41 fields including price, stock, images
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
212
app/templates/admin/partials/letzshop-settings-tab.html
Normal file
212
app/templates/admin/partials/letzshop-settings-tab.html
Normal file
@@ -0,0 +1,212 @@
|
||||
{# app/templates/admin/partials/letzshop-settings-tab.html #}
|
||||
{# Settings tab for admin Letzshop management - API credentials and CSV URLs #}
|
||||
|
||||
<div class="grid gap-6 lg:grid-cols-2">
|
||||
<!-- API Configuration Card -->
|
||||
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-6">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Letzshop API Configuration
|
||||
</h3>
|
||||
|
||||
<form @submit.prevent="saveCredentials()">
|
||||
<!-- API Key -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
API Key <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
:type="showApiKey ? 'text' : 'password'"
|
||||
x-model="settingsForm.api_key"
|
||||
:placeholder="credentials ? credentials.api_key_masked : 'Enter Letzshop API key'"
|
||||
class="block w-full px-3 py-2 pr-10 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@click="showApiKey = !showApiKey"
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<span x-html="$icon(showApiKey ? 'eye-off' : 'eye', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
Get your API key from the Letzshop merchant portal
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Auto Sync -->
|
||||
<div class="mb-4">
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="settingsForm.auto_sync_enabled"
|
||||
class="form-checkbox h-5 w-5 text-purple-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:ring-purple-500"
|
||||
/>
|
||||
<span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-400">Enable Auto-Sync</span>
|
||||
</label>
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400 ml-8">
|
||||
Automatically import new orders periodically
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Sync Interval -->
|
||||
<div class="mb-6" x-show="settingsForm.auto_sync_enabled">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
Sync Interval
|
||||
</label>
|
||||
<select
|
||||
x-model="settingsForm.sync_interval_minutes"
|
||||
class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none"
|
||||
>
|
||||
<option value="15">Every 15 minutes</option>
|
||||
<option value="30">Every 30 minutes</option>
|
||||
<option value="60">Every hour</option>
|
||||
<option value="120">Every 2 hours</option>
|
||||
<option value="360">Every 6 hours</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Last Sync Info -->
|
||||
<div x-show="credentials" class="mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||
<h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Sync</h4>
|
||||
<div class="grid gap-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<p>
|
||||
<span class="font-medium">Status:</span>
|
||||
<span
|
||||
class="ml-2 px-2 py-0.5 text-xs rounded-full"
|
||||
:class="{
|
||||
'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300': credentials?.last_sync_status === 'success',
|
||||
'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300': credentials?.last_sync_status === 'partial',
|
||||
'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300': credentials?.last_sync_status === 'failed',
|
||||
'bg-gray-100 text-gray-700 dark:bg-gray-600 dark:text-gray-300': !credentials?.last_sync_status
|
||||
}"
|
||||
x-text="credentials?.last_sync_status || 'Never'"
|
||||
></span>
|
||||
</p>
|
||||
<p x-show="credentials?.last_sync_at">
|
||||
<span class="font-medium">Time:</span>
|
||||
<span class="ml-2" x-text="formatDate(credentials?.last_sync_at)"></span>
|
||||
</p>
|
||||
<p x-show="credentials?.last_sync_error" class="text-red-600 dark:text-red-400">
|
||||
<span class="font-medium">Error:</span>
|
||||
<span class="ml-2" x-text="credentials?.last_sync_error"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="savingCredentials"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||
>
|
||||
<span x-show="!savingCredentials" x-html="$icon('save', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-show="savingCredentials" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="savingCredentials ? 'Saving...' : 'Save Credentials'"></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="testConnection()"
|
||||
:disabled="testingConnection || !letzshopStatus.is_configured"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-gray-700 dark:text-gray-300 transition-colors duration-150 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none disabled:opacity-50"
|
||||
>
|
||||
<span x-show="!testingConnection" x-html="$icon('lightning-bolt', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-show="testingConnection" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="testingConnection ? 'Testing...' : 'Test Connection'"></span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
x-show="credentials"
|
||||
@click="deleteCredentials()"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-red-600 transition-colors duration-150 bg-white dark:bg-gray-800 border border-red-300 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none"
|
||||
>
|
||||
<span x-html="$icon('trash', 'w-4 h-4 mr-2')"></span>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CSV URLs Card -->
|
||||
<div class="bg-white rounded-lg shadow-xs dark:bg-gray-800">
|
||||
<div class="p-6">
|
||||
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Letzshop CSV URLs
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
||||
Configure the CSV feed URLs for product imports. These URLs are used for quick-fill in the Products tab.
|
||||
</p>
|
||||
|
||||
<form @submit.prevent="saveCsvUrls()">
|
||||
<!-- French CSV URL -->
|
||||
<div class="mb-4">
|
||||
<label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
<span class="fi fi-fr mr-2"></span>
|
||||
French CSV URL
|
||||
</label>
|
||||
<input
|
||||
x-model="settingsForm.letzshop_csv_url_fr"
|
||||
type="url"
|
||||
placeholder="https://letzshop.lu/feeds/products_fr.csv"
|
||||
class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- English CSV URL -->
|
||||
<div class="mb-4">
|
||||
<label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
<span class="fi fi-gb mr-2"></span>
|
||||
English CSV URL
|
||||
</label>
|
||||
<input
|
||||
x-model="settingsForm.letzshop_csv_url_en"
|
||||
type="url"
|
||||
placeholder="https://letzshop.lu/feeds/products_en.csv"
|
||||
class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- German CSV URL -->
|
||||
<div class="mb-6">
|
||||
<label class="flex items-center text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
<span class="fi fi-de mr-2"></span>
|
||||
German CSV URL
|
||||
</label>
|
||||
<input
|
||||
x-model="settingsForm.letzshop_csv_url_de"
|
||||
type="url"
|
||||
placeholder="https://letzshop.lu/feeds/products_de.csv"
|
||||
class="block w-full px-3 py-2 text-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md focus:border-purple-400 focus:outline-none focus:shadow-outline-purple"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Save Button -->
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="savingCsvUrls"
|
||||
class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
|
||||
>
|
||||
<span x-show="!savingCsvUrls" x-html="$icon('save', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-show="savingCsvUrls" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="savingCsvUrls ? 'Saving...' : 'Save CSV URLs'"></span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Info Box -->
|
||||
<div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
|
||||
<div class="flex">
|
||||
<span x-html="$icon('information-circle', 'w-5 h-5 text-blue-500 mr-2 flex-shrink-0')"></span>
|
||||
<div class="text-sm text-blue-700 dark:text-blue-300">
|
||||
<p class="font-medium">About CSV URLs</p>
|
||||
<p class="mt-1">These URLs should point to the vendor's product feed on Letzshop. The feed is typically provided by Letzshop as part of the merchant integration.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,8 +80,12 @@
|
||||
{% call section_content('productCatalog') %}
|
||||
{{ menu_item('marketplace-products', '/admin/marketplace-products', 'database', 'Marketplace Products') }}
|
||||
{{ menu_item('vendor-products', '/admin/vendor-products', 'cube', 'Vendor Products') }}
|
||||
{{ menu_item('marketplace', '/admin/marketplace', 'cloud-download', 'Import') }}
|
||||
{{ menu_item('letzshop', '/admin/letzshop', 'shopping-cart', 'Letzshop Orders') }}
|
||||
{% endcall %}
|
||||
|
||||
<!-- Marketplace Section -->
|
||||
{{ section_header('Marketplace', 'marketplace') }}
|
||||
{% call section_content('marketplace') %}
|
||||
{{ menu_item('marketplace-letzshop', '/admin/marketplace/letzshop', 'shopping-cart', 'Letzshop') }}
|
||||
{% endcall %}
|
||||
|
||||
<!-- Content Management Section -->
|
||||
|
||||
@@ -332,3 +332,29 @@ class LetzshopVendorListResponse(BaseModel):
|
||||
total: int
|
||||
skip: int
|
||||
limit: int
|
||||
|
||||
|
||||
# ============================================================================
|
||||
# Jobs Schemas (Unified view of imports, exports, and syncs)
|
||||
# ============================================================================
|
||||
|
||||
|
||||
class LetzshopJobItem(BaseModel):
|
||||
"""Schema for a unified job item (import, export, or order sync)."""
|
||||
|
||||
id: int
|
||||
type: str = Field(..., description="Job type: import, export, or order_sync")
|
||||
status: str = Field(..., description="Job status")
|
||||
created_at: datetime
|
||||
started_at: datetime | None = None
|
||||
completed_at: datetime | None = None
|
||||
records_processed: int = 0
|
||||
records_succeeded: int = 0
|
||||
records_failed: int = 0
|
||||
|
||||
|
||||
class LetzshopJobsListResponse(BaseModel):
|
||||
"""Schema for paginated jobs list."""
|
||||
|
||||
jobs: list[LetzshopJobItem]
|
||||
total: int
|
||||
|
||||
@@ -29,6 +29,7 @@ function data() {
|
||||
const defaultSections = {
|
||||
platformAdmin: true,
|
||||
productCatalog: false,
|
||||
marketplace: false,
|
||||
contentMgmt: false,
|
||||
devTools: false,
|
||||
platformHealth: false,
|
||||
@@ -66,7 +67,8 @@ function data() {
|
||||
// Product Catalog
|
||||
'marketplace-products': 'productCatalog',
|
||||
'vendor-products': 'productCatalog',
|
||||
marketplace: 'productCatalog',
|
||||
// Marketplace
|
||||
'marketplace-letzshop': 'marketplace',
|
||||
// Content Management
|
||||
'platform-homepage': 'contentMgmt',
|
||||
'content-pages': 'contentMgmt',
|
||||
|
||||
763
static/admin/js/marketplace-letzshop.js
Normal file
763
static/admin/js/marketplace-letzshop.js
Normal file
@@ -0,0 +1,763 @@
|
||||
// static/admin/js/marketplace-letzshop.js
|
||||
/**
|
||||
* Admin marketplace Letzshop management page logic
|
||||
* Unified page for Products (Import/Export), Orders, and Settings
|
||||
*/
|
||||
|
||||
// Use centralized logger
|
||||
const marketplaceLetzshopLog = window.LogConfig.createLogger('MARKETPLACE-LETZSHOP');
|
||||
|
||||
marketplaceLetzshopLog.info('Loading...');
|
||||
|
||||
function adminMarketplaceLetzshop() {
|
||||
marketplaceLetzshopLog.info('adminMarketplaceLetzshop() called');
|
||||
|
||||
return {
|
||||
// Inherit base layout state
|
||||
...data(),
|
||||
|
||||
// Set page identifier
|
||||
currentPage: 'marketplace-letzshop',
|
||||
|
||||
// Tab state
|
||||
activeTab: 'products',
|
||||
|
||||
// Loading states
|
||||
loading: false,
|
||||
importing: false,
|
||||
exporting: false,
|
||||
importingOrders: false,
|
||||
loadingOrders: false,
|
||||
loadingJobs: false,
|
||||
savingCredentials: false,
|
||||
savingCsvUrls: false,
|
||||
testingConnection: false,
|
||||
submittingTracking: false,
|
||||
|
||||
// Messages
|
||||
error: '',
|
||||
successMessage: '',
|
||||
|
||||
// Tom Select instance
|
||||
tomSelectInstance: null,
|
||||
|
||||
// Selected vendor
|
||||
selectedVendor: null,
|
||||
|
||||
// Letzshop status for selected vendor
|
||||
letzshopStatus: {
|
||||
is_configured: false,
|
||||
auto_sync_enabled: false,
|
||||
last_sync_at: null,
|
||||
last_sync_status: null
|
||||
},
|
||||
|
||||
// Credentials
|
||||
credentials: null,
|
||||
showApiKey: false,
|
||||
|
||||
// Import form
|
||||
importForm: {
|
||||
csv_url: '',
|
||||
language: 'fr',
|
||||
batch_size: 1000
|
||||
},
|
||||
|
||||
// Export settings
|
||||
exportLanguage: 'fr',
|
||||
exportIncludeInactive: false,
|
||||
|
||||
// Settings form
|
||||
settingsForm: {
|
||||
api_key: '',
|
||||
auto_sync_enabled: false,
|
||||
sync_interval_minutes: 15,
|
||||
letzshop_csv_url_fr: '',
|
||||
letzshop_csv_url_en: '',
|
||||
letzshop_csv_url_de: ''
|
||||
},
|
||||
|
||||
// Orders
|
||||
orders: [],
|
||||
totalOrders: 0,
|
||||
ordersPage: 1,
|
||||
ordersLimit: 20,
|
||||
ordersFilter: '',
|
||||
orderStats: { pending: 0, confirmed: 0, rejected: 0, shipped: 0 },
|
||||
|
||||
// Jobs
|
||||
jobs: [],
|
||||
jobsFilter: { type: '', status: '' },
|
||||
jobsPagination: { page: 1, per_page: 10, total: 0 },
|
||||
|
||||
// Modals
|
||||
showTrackingModal: false,
|
||||
showOrderModal: false,
|
||||
selectedOrder: null,
|
||||
trackingForm: { tracking_number: '', tracking_carrier: '' },
|
||||
|
||||
async init() {
|
||||
marketplaceLetzshopLog.info('init() called');
|
||||
|
||||
// Guard against multiple initialization
|
||||
if (window._marketplaceLetzshopInitialized) {
|
||||
marketplaceLetzshopLog.warn('Already initialized, skipping');
|
||||
return;
|
||||
}
|
||||
window._marketplaceLetzshopInitialized = true;
|
||||
|
||||
// Initialize Tom Select after a short delay to ensure DOM is ready
|
||||
this.$nextTick(() => {
|
||||
this.initTomSelect();
|
||||
});
|
||||
|
||||
marketplaceLetzshopLog.info('Initialization complete');
|
||||
},
|
||||
|
||||
/**
|
||||
* Initialize Tom Select for vendor autocomplete
|
||||
*/
|
||||
initTomSelect() {
|
||||
const selectEl = this.$refs.vendorSelect;
|
||||
if (!selectEl) {
|
||||
marketplaceLetzshopLog.error('Vendor select element not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Wait for TomSelect to be available
|
||||
if (typeof TomSelect === 'undefined') {
|
||||
marketplaceLetzshopLog.warn('TomSelect not loaded yet, retrying...');
|
||||
setTimeout(() => this.initTomSelect(), 100);
|
||||
return;
|
||||
}
|
||||
|
||||
marketplaceLetzshopLog.info('Initializing Tom Select');
|
||||
|
||||
this.tomSelectInstance = new TomSelect(selectEl, {
|
||||
valueField: 'id',
|
||||
labelField: 'name',
|
||||
searchField: ['name', 'vendor_code'],
|
||||
maxOptions: 50,
|
||||
placeholder: 'Search vendor by name or code...',
|
||||
load: async (query, callback) => {
|
||||
if (query.length < 2) {
|
||||
callback([]);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await apiClient.get(`/admin/vendors?search=${encodeURIComponent(query)}&limit=50`);
|
||||
const vendors = response.vendors.map(v => ({
|
||||
id: v.id,
|
||||
name: v.name,
|
||||
vendor_code: v.vendor_code
|
||||
}));
|
||||
callback(vendors);
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to search vendors:', error);
|
||||
callback([]);
|
||||
}
|
||||
},
|
||||
render: {
|
||||
option: (data, escape) => {
|
||||
return `<div class="flex justify-between items-center">
|
||||
<span>${escape(data.name)}</span>
|
||||
<span class="text-xs text-gray-400 ml-2">${escape(data.vendor_code)}</span>
|
||||
</div>`;
|
||||
},
|
||||
item: (data, escape) => {
|
||||
return `<div>${escape(data.name)} <span class="text-gray-400">(${escape(data.vendor_code)})</span></div>`;
|
||||
}
|
||||
},
|
||||
onChange: async (value) => {
|
||||
if (value) {
|
||||
await this.selectVendor(parseInt(value));
|
||||
} else {
|
||||
this.clearVendorSelection();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Handle vendor selection
|
||||
*/
|
||||
async selectVendor(vendorId) {
|
||||
marketplaceLetzshopLog.info('Selecting vendor:', vendorId);
|
||||
this.loading = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
// Load vendor details
|
||||
const vendor = await apiClient.get(`/admin/vendors/${vendorId}`);
|
||||
this.selectedVendor = vendor;
|
||||
|
||||
// Pre-fill settings form with CSV URLs
|
||||
this.settingsForm.letzshop_csv_url_fr = vendor.letzshop_csv_url_fr || '';
|
||||
this.settingsForm.letzshop_csv_url_en = vendor.letzshop_csv_url_en || '';
|
||||
this.settingsForm.letzshop_csv_url_de = vendor.letzshop_csv_url_de || '';
|
||||
|
||||
// Load Letzshop status and credentials
|
||||
await this.loadLetzshopStatus();
|
||||
|
||||
// Load orders and jobs
|
||||
await Promise.all([
|
||||
this.loadOrders(),
|
||||
this.loadJobs()
|
||||
]);
|
||||
|
||||
marketplaceLetzshopLog.info('Vendor loaded:', vendor.name);
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to load vendor:', error);
|
||||
this.error = error.message || 'Failed to load vendor';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Clear vendor selection
|
||||
*/
|
||||
clearVendorSelection() {
|
||||
this.selectedVendor = null;
|
||||
this.letzshopStatus = { is_configured: false };
|
||||
this.credentials = null;
|
||||
this.orders = [];
|
||||
this.jobs = [];
|
||||
this.settingsForm = {
|
||||
api_key: '',
|
||||
auto_sync_enabled: false,
|
||||
sync_interval_minutes: 15,
|
||||
letzshop_csv_url_fr: '',
|
||||
letzshop_csv_url_en: '',
|
||||
letzshop_csv_url_de: ''
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Load Letzshop status and credentials for selected vendor
|
||||
*/
|
||||
async loadLetzshopStatus() {
|
||||
if (!this.selectedVendor) return;
|
||||
|
||||
try {
|
||||
const response = await apiClient.get(`/admin/letzshop/vendors/${this.selectedVendor.id}/credentials`);
|
||||
this.credentials = response;
|
||||
this.letzshopStatus = {
|
||||
is_configured: true,
|
||||
auto_sync_enabled: response.auto_sync_enabled,
|
||||
last_sync_at: response.last_sync_at,
|
||||
last_sync_status: response.last_sync_status
|
||||
};
|
||||
this.settingsForm.auto_sync_enabled = response.auto_sync_enabled;
|
||||
this.settingsForm.sync_interval_minutes = response.sync_interval_minutes || 15;
|
||||
} catch (error) {
|
||||
if (error.status === 404) {
|
||||
// Not configured
|
||||
this.letzshopStatus = { is_configured: false };
|
||||
this.credentials = null;
|
||||
} else {
|
||||
marketplaceLetzshopLog.error('Failed to load Letzshop status:', error);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Refresh all data for selected vendor
|
||||
*/
|
||||
async refreshData() {
|
||||
if (!this.selectedVendor) return;
|
||||
await this.selectVendor(this.selectedVendor.id);
|
||||
},
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// PRODUCTS TAB - IMPORT
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/**
|
||||
* Quick fill import form from vendor CSV URLs
|
||||
*/
|
||||
quickFillImport(language) {
|
||||
if (!this.selectedVendor) return;
|
||||
|
||||
const urlMap = {
|
||||
'fr': this.selectedVendor.letzshop_csv_url_fr,
|
||||
'en': this.selectedVendor.letzshop_csv_url_en,
|
||||
'de': this.selectedVendor.letzshop_csv_url_de
|
||||
};
|
||||
|
||||
const url = urlMap[language];
|
||||
if (url) {
|
||||
this.importForm.csv_url = url;
|
||||
this.importForm.language = language;
|
||||
marketplaceLetzshopLog.info('Quick filled import form:', language, url);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Start product import
|
||||
*/
|
||||
async startImport() {
|
||||
if (!this.selectedVendor || !this.importForm.csv_url) return;
|
||||
|
||||
this.importing = true;
|
||||
this.error = '';
|
||||
this.successMessage = '';
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
vendor_id: this.selectedVendor.id,
|
||||
source_url: this.importForm.csv_url,
|
||||
marketplace: 'Letzshop',
|
||||
language: this.importForm.language,
|
||||
batch_size: this.importForm.batch_size
|
||||
};
|
||||
|
||||
await apiClient.post('/admin/marketplace-import-jobs', payload);
|
||||
|
||||
this.successMessage = 'Import job started successfully';
|
||||
this.importForm.csv_url = '';
|
||||
await this.loadJobs();
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to start import:', error);
|
||||
this.error = error.message || 'Failed to start import';
|
||||
} finally {
|
||||
this.importing = false;
|
||||
}
|
||||
},
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// PRODUCTS TAB - EXPORT
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/**
|
||||
* Download product export CSV
|
||||
*/
|
||||
async downloadExport() {
|
||||
if (!this.selectedVendor) return;
|
||||
|
||||
this.exporting = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
language: this.exportLanguage,
|
||||
include_inactive: this.exportIncludeInactive.toString()
|
||||
});
|
||||
|
||||
const url = `/api/v1/admin/vendors/${this.selectedVendor.id}/export/letzshop?${params}`;
|
||||
|
||||
// Create a link and trigger download
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `${this.selectedVendor.vendor_code}_letzshop_export.csv`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
this.successMessage = 'Export started';
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to export:', error);
|
||||
this.error = error.message || 'Failed to export products';
|
||||
} finally {
|
||||
this.exporting = false;
|
||||
}
|
||||
},
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// ORDERS TAB
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/**
|
||||
* Load orders for selected vendor
|
||||
*/
|
||||
async loadOrders() {
|
||||
if (!this.selectedVendor || !this.letzshopStatus.is_configured) {
|
||||
this.orders = [];
|
||||
this.totalOrders = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadingOrders = true;
|
||||
this.error = '';
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
skip: ((this.ordersPage - 1) * this.ordersLimit).toString(),
|
||||
limit: this.ordersLimit.toString()
|
||||
});
|
||||
|
||||
if (this.ordersFilter) {
|
||||
params.append('sync_status', this.ordersFilter);
|
||||
}
|
||||
|
||||
const response = await apiClient.get(`/admin/letzshop/vendors/${this.selectedVendor.id}/orders?${params}`);
|
||||
this.orders = response.orders || [];
|
||||
this.totalOrders = response.total || 0;
|
||||
|
||||
// Update order stats
|
||||
this.updateOrderStats();
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to load orders:', error);
|
||||
this.error = error.message || 'Failed to load orders';
|
||||
} finally {
|
||||
this.loadingOrders = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Update order stats based on current orders
|
||||
*/
|
||||
updateOrderStats() {
|
||||
// Reset stats
|
||||
this.orderStats = { pending: 0, confirmed: 0, rejected: 0, shipped: 0 };
|
||||
|
||||
// Count from orders list
|
||||
for (const order of this.orders) {
|
||||
if (this.orderStats.hasOwnProperty(order.sync_status)) {
|
||||
this.orderStats[order.sync_status]++;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Import orders from Letzshop
|
||||
*/
|
||||
async importOrders() {
|
||||
if (!this.selectedVendor || !this.letzshopStatus.is_configured) return;
|
||||
|
||||
this.importingOrders = true;
|
||||
this.error = '';
|
||||
this.successMessage = '';
|
||||
|
||||
try {
|
||||
await apiClient.post(`/admin/letzshop/vendors/${this.selectedVendor.id}/sync`);
|
||||
this.successMessage = 'Orders imported successfully';
|
||||
await this.loadOrders();
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to import orders:', error);
|
||||
this.error = error.message || 'Failed to import orders';
|
||||
} finally {
|
||||
this.importingOrders = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Confirm an order
|
||||
*/
|
||||
async confirmOrder(order) {
|
||||
if (!this.selectedVendor) return;
|
||||
|
||||
try {
|
||||
await apiClient.post(`/admin/letzshop/vendors/${this.selectedVendor.id}/orders/${order.id}/confirm`);
|
||||
this.successMessage = 'Order confirmed';
|
||||
await this.loadOrders();
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to confirm order:', error);
|
||||
this.error = error.message || 'Failed to confirm order';
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Reject an order
|
||||
*/
|
||||
async rejectOrder(order) {
|
||||
if (!this.selectedVendor) return;
|
||||
|
||||
if (!confirm('Are you sure you want to reject this order?')) return;
|
||||
|
||||
try {
|
||||
await apiClient.post(`/admin/letzshop/vendors/${this.selectedVendor.id}/orders/${order.id}/reject`);
|
||||
this.successMessage = 'Order rejected';
|
||||
await this.loadOrders();
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to reject order:', error);
|
||||
this.error = error.message || 'Failed to reject order';
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Open tracking modal
|
||||
*/
|
||||
openTrackingModal(order) {
|
||||
this.selectedOrder = order;
|
||||
this.trackingForm = {
|
||||
tracking_number: order.tracking_number || '',
|
||||
tracking_carrier: order.tracking_carrier || ''
|
||||
};
|
||||
this.showTrackingModal = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* Submit tracking information
|
||||
*/
|
||||
async submitTracking() {
|
||||
if (!this.selectedVendor || !this.selectedOrder) return;
|
||||
|
||||
this.submittingTracking = true;
|
||||
|
||||
try {
|
||||
await apiClient.post(
|
||||
`/admin/letzshop/vendors/${this.selectedVendor.id}/orders/${this.selectedOrder.id}/tracking`,
|
||||
this.trackingForm
|
||||
);
|
||||
this.successMessage = 'Tracking information saved';
|
||||
this.showTrackingModal = false;
|
||||
await this.loadOrders();
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to save tracking:', error);
|
||||
this.error = error.message || 'Failed to save tracking';
|
||||
} finally {
|
||||
this.submittingTracking = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* View order details
|
||||
*/
|
||||
viewOrderDetails(order) {
|
||||
this.selectedOrder = order;
|
||||
this.showOrderModal = true;
|
||||
},
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// SETTINGS TAB
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/**
|
||||
* Save Letzshop credentials
|
||||
*/
|
||||
async saveCredentials() {
|
||||
if (!this.selectedVendor) return;
|
||||
|
||||
this.savingCredentials = true;
|
||||
this.error = '';
|
||||
this.successMessage = '';
|
||||
|
||||
try {
|
||||
const payload = {
|
||||
auto_sync_enabled: this.settingsForm.auto_sync_enabled,
|
||||
sync_interval_minutes: parseInt(this.settingsForm.sync_interval_minutes)
|
||||
};
|
||||
|
||||
// Only include API key if it was provided (not just placeholder)
|
||||
if (this.settingsForm.api_key && this.settingsForm.api_key.length > 0) {
|
||||
payload.api_key = this.settingsForm.api_key;
|
||||
}
|
||||
|
||||
if (this.credentials) {
|
||||
// Update existing
|
||||
await apiClient.patch(`/admin/letzshop/vendors/${this.selectedVendor.id}/credentials`, payload);
|
||||
} else {
|
||||
// Create new (API key required)
|
||||
if (!payload.api_key) {
|
||||
this.error = 'API key is required for initial setup';
|
||||
this.savingCredentials = false;
|
||||
return;
|
||||
}
|
||||
await apiClient.post(`/admin/letzshop/vendors/${this.selectedVendor.id}/credentials`, payload);
|
||||
}
|
||||
|
||||
this.successMessage = 'Credentials saved successfully';
|
||||
this.settingsForm.api_key = ''; // Clear the input
|
||||
await this.loadLetzshopStatus();
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to save credentials:', error);
|
||||
this.error = error.message || 'Failed to save credentials';
|
||||
} finally {
|
||||
this.savingCredentials = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Test Letzshop connection
|
||||
*/
|
||||
async testConnection() {
|
||||
if (!this.selectedVendor || !this.letzshopStatus.is_configured) return;
|
||||
|
||||
this.testingConnection = true;
|
||||
this.error = '';
|
||||
this.successMessage = '';
|
||||
|
||||
try {
|
||||
await apiClient.post(`/admin/letzshop/vendors/${this.selectedVendor.id}/test`);
|
||||
this.successMessage = 'Connection test successful!';
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Connection test failed:', error);
|
||||
this.error = error.message || 'Connection test failed';
|
||||
} finally {
|
||||
this.testingConnection = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Delete Letzshop credentials
|
||||
*/
|
||||
async deleteCredentials() {
|
||||
if (!this.selectedVendor) return;
|
||||
|
||||
if (!confirm('Are you sure you want to remove the Letzshop configuration? This will disable all Letzshop features for this vendor.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await apiClient.delete(`/admin/letzshop/vendors/${this.selectedVendor.id}/credentials`);
|
||||
this.successMessage = 'Credentials removed';
|
||||
this.credentials = null;
|
||||
this.letzshopStatus = { is_configured: false };
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to delete credentials:', error);
|
||||
this.error = error.message || 'Failed to remove credentials';
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Save CSV URLs to vendor
|
||||
*/
|
||||
async saveCsvUrls() {
|
||||
if (!this.selectedVendor) return;
|
||||
|
||||
this.savingCsvUrls = true;
|
||||
this.error = '';
|
||||
this.successMessage = '';
|
||||
|
||||
try {
|
||||
await apiClient.patch(`/admin/vendors/${this.selectedVendor.id}`, {
|
||||
letzshop_csv_url_fr: this.settingsForm.letzshop_csv_url_fr || null,
|
||||
letzshop_csv_url_en: this.settingsForm.letzshop_csv_url_en || null,
|
||||
letzshop_csv_url_de: this.settingsForm.letzshop_csv_url_de || null
|
||||
});
|
||||
|
||||
// Update local vendor object
|
||||
this.selectedVendor.letzshop_csv_url_fr = this.settingsForm.letzshop_csv_url_fr;
|
||||
this.selectedVendor.letzshop_csv_url_en = this.settingsForm.letzshop_csv_url_en;
|
||||
this.selectedVendor.letzshop_csv_url_de = this.settingsForm.letzshop_csv_url_de;
|
||||
|
||||
this.successMessage = 'CSV URLs saved successfully';
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to save CSV URLs:', error);
|
||||
this.error = error.message || 'Failed to save CSV URLs';
|
||||
} finally {
|
||||
this.savingCsvUrls = false;
|
||||
}
|
||||
},
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// JOBS TABLE
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/**
|
||||
* Load jobs for selected vendor
|
||||
*/
|
||||
async loadJobs() {
|
||||
if (!this.selectedVendor) {
|
||||
this.jobs = [];
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadingJobs = true;
|
||||
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
skip: ((this.jobsPagination.page - 1) * this.jobsPagination.per_page).toString(),
|
||||
limit: this.jobsPagination.per_page.toString()
|
||||
});
|
||||
|
||||
if (this.jobsFilter.type) {
|
||||
params.append('job_type', this.jobsFilter.type);
|
||||
}
|
||||
if (this.jobsFilter.status) {
|
||||
params.append('status', this.jobsFilter.status);
|
||||
}
|
||||
|
||||
const response = await apiClient.get(`/admin/letzshop/vendors/${this.selectedVendor.id}/jobs?${params}`);
|
||||
this.jobs = response.jobs || [];
|
||||
this.jobsPagination.total = response.total || 0;
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to load jobs:', error);
|
||||
// Don't show error for jobs - not critical
|
||||
} finally {
|
||||
this.loadingJobs = false;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* View job details
|
||||
*/
|
||||
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}`);
|
||||
},
|
||||
|
||||
/**
|
||||
* View job errors
|
||||
*/
|
||||
async viewJobErrors(job) {
|
||||
if (job.type !== 'import') return;
|
||||
|
||||
try {
|
||||
const response = await apiClient.get(`/admin/marketplace-import-jobs/${job.id}/errors`);
|
||||
const errors = response.errors || [];
|
||||
|
||||
if (errors.length === 0) {
|
||||
alert('No error details available');
|
||||
return;
|
||||
}
|
||||
|
||||
// Show errors in alert for now
|
||||
const errorText = errors.slice(0, 10).map(e =>
|
||||
`Row ${e.row_number}: ${e.error_message}`
|
||||
).join('\n');
|
||||
|
||||
alert(`Import Errors (showing first 10):\n\n${errorText}`);
|
||||
} catch (error) {
|
||||
marketplaceLetzshopLog.error('Failed to load job errors:', error);
|
||||
this.error = 'Failed to load error details';
|
||||
}
|
||||
},
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// UTILITIES
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
/**
|
||||
* Format date for display
|
||||
*/
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return 'N/A';
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleString('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
} catch {
|
||||
return dateString;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Format duration between two dates
|
||||
*/
|
||||
formatDuration(startDate, endDate) {
|
||||
if (!startDate) return '-';
|
||||
if (!endDate) return 'In progress...';
|
||||
|
||||
try {
|
||||
const start = new Date(startDate);
|
||||
const end = new Date(endDate);
|
||||
const diffMs = end - start;
|
||||
|
||||
if (diffMs < 1000) return '<1s';
|
||||
if (diffMs < 60000) return `${Math.round(diffMs / 1000)}s`;
|
||||
if (diffMs < 3600000) return `${Math.round(diffMs / 60000)}m`;
|
||||
return `${Math.round(diffMs / 3600000)}h`;
|
||||
} catch {
|
||||
return '-';
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
2
static/shared/css/vendor/tom-select.default.min.css
vendored
Normal file
2
static/shared/css/vendor/tom-select.default.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
444
static/shared/js/vendor/tom-select.complete.min.js
generated
vendored
Normal file
444
static/shared/js/vendor/tom-select.complete.min.js
generated
vendored
Normal file
@@ -0,0 +1,444 @@
|
||||
/**
|
||||
* Tom Select v2.4.1
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
*/
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).TomSelect=t()}(this,(function(){"use strict"
|
||||
function e(e,t){e.split(/\s+/).forEach((e=>{t(e)}))}class t{constructor(){this._events={}}on(t,s){e(t,(e=>{const t=this._events[e]||[]
|
||||
t.push(s),this._events[e]=t}))}off(t,s){var i=arguments.length
|
||||
0!==i?e(t,(e=>{if(1===i)return void delete this._events[e]
|
||||
const t=this._events[e]
|
||||
void 0!==t&&(t.splice(t.indexOf(s),1),this._events[e]=t)})):this._events={}}trigger(t,...s){var i=this
|
||||
e(t,(e=>{const t=i._events[e]
|
||||
void 0!==t&&t.forEach((e=>{e.apply(i,s)}))}))}}const s=e=>(e=e.filter(Boolean)).length<2?e[0]||"":1==l(e)?"["+e.join("")+"]":"(?:"+e.join("|")+")",i=e=>{if(!o(e))return e.join("")
|
||||
let t="",s=0
|
||||
const i=()=>{s>1&&(t+="{"+s+"}")}
|
||||
return e.forEach(((n,o)=>{n!==e[o-1]?(i(),t+=n,s=1):s++})),i(),t},n=e=>{let t=Array.from(e)
|
||||
return s(t)},o=e=>new Set(e).size!==e.length,r=e=>(e+"").replace(/([\$\(\)\*\+\.\?\[\]\^\{\|\}\\])/gu,"\\$1"),l=e=>e.reduce(((e,t)=>Math.max(e,a(t))),0),a=e=>Array.from(e).length,c=e=>{if(1===e.length)return[[e]]
|
||||
let t=[]
|
||||
const s=e.substring(1)
|
||||
return c(s).forEach((function(s){let i=s.slice(0)
|
||||
i[0]=e.charAt(0)+i[0],t.push(i),i=s.slice(0),i.unshift(e.charAt(0)),t.push(i)})),t},d=[[0,65535]]
|
||||
let u,p
|
||||
const h={},g={"/":"⁄∕",0:"߀",a:"ⱥɐɑ",aa:"ꜳ",ae:"æǽǣ",ao:"ꜵ",au:"ꜷ",av:"ꜹꜻ",ay:"ꜽ",b:"ƀɓƃ",c:"ꜿƈȼↄ",d:"đɗɖᴅƌꮷԁɦ",e:"ɛǝᴇɇ",f:"ꝼƒ",g:"ǥɠꞡᵹꝿɢ",h:"ħⱨⱶɥ",i:"ɨı",j:"ɉȷ",k:"ƙⱪꝁꝃꝅꞣ",l:"łƚɫⱡꝉꝇꞁɭ",m:"ɱɯϻ",n:"ꞥƞɲꞑᴎлԉ",o:"øǿɔɵꝋꝍᴑ",oe:"œ",oi:"ƣ",oo:"ꝏ",ou:"ȣ",p:"ƥᵽꝑꝓꝕρ",q:"ꝗꝙɋ",r:"ɍɽꝛꞧꞃ",s:"ßȿꞩꞅʂ",t:"ŧƭʈⱦꞇ",th:"þ",tz:"ꜩ",u:"ʉ",v:"ʋꝟʌ",vy:"ꝡ",w:"ⱳ",y:"ƴɏỿ",z:"ƶȥɀⱬꝣ",hv:"ƕ"}
|
||||
for(let e in g){let t=g[e]||""
|
||||
for(let s=0;s<t.length;s++){let i=t.substring(s,s+1)
|
||||
h[i]=e}}const f=new RegExp(Object.keys(h).join("|")+"|[̀-ͯ·ʾʼ]","gu"),m=(e,t="NFKD")=>e.normalize(t),v=e=>Array.from(e).reduce(((e,t)=>e+y(t)),""),y=e=>(e=m(e).toLowerCase().replace(f,(e=>h[e]||"")),m(e,"NFC"))
|
||||
const O=e=>{const t={},s=(e,s)=>{const i=t[e]||new Set,o=new RegExp("^"+n(i)+"$","iu")
|
||||
s.match(o)||(i.add(r(s)),t[e]=i)}
|
||||
for(let t of function*(e){for(const[t,s]of e)for(let e=t;e<=s;e++){let t=String.fromCharCode(e),s=v(t)
|
||||
s!=t.toLowerCase()&&(s.length>3||0!=s.length&&(yield{folded:s,composed:t,code_point:e}))}}(e))s(t.folded,t.folded),s(t.folded,t.composed)
|
||||
return t},b=e=>{const t=O(e),i={}
|
||||
let o=[]
|
||||
for(let e in t){let s=t[e]
|
||||
s&&(i[e]=n(s)),e.length>1&&o.push(r(e))}o.sort(((e,t)=>t.length-e.length))
|
||||
const l=s(o)
|
||||
return p=new RegExp("^"+l,"u"),i},w=(e,t=1)=>(t=Math.max(t,e.length-1),s(c(e).map((e=>((e,t=1)=>{let s=0
|
||||
return e=e.map((e=>(u[e]&&(s+=e.length),u[e]||e))),s>=t?i(e):""})(e,t))))),_=(e,t=!0)=>{let n=e.length>1?1:0
|
||||
return s(e.map((e=>{let s=[]
|
||||
const o=t?e.length():e.length()-1
|
||||
for(let t=0;t<o;t++)s.push(w(e.substrs[t]||"",n))
|
||||
return i(s)})))},C=(e,t)=>{for(const s of t){if(s.start!=e.start||s.end!=e.end)continue
|
||||
if(s.substrs.join("")!==e.substrs.join(""))continue
|
||||
let t=e.parts
|
||||
const i=e=>{for(const s of t){if(s.start===e.start&&s.substr===e.substr)return!1
|
||||
if(1!=e.length&&1!=s.length){if(e.start<s.start&&e.end>s.start)return!0
|
||||
if(s.start<e.start&&s.end>e.start)return!0}}return!1}
|
||||
if(!(s.parts.filter(i).length>0))return!0}return!1}
|
||||
class S{parts
|
||||
substrs
|
||||
start
|
||||
end
|
||||
constructor(){this.parts=[],this.substrs=[],this.start=0,this.end=0}add(e){e&&(this.parts.push(e),this.substrs.push(e.substr),this.start=Math.min(e.start,this.start),this.end=Math.max(e.end,this.end))}last(){return this.parts[this.parts.length-1]}length(){return this.parts.length}clone(e,t){let s=new S,i=JSON.parse(JSON.stringify(this.parts)),n=i.pop()
|
||||
for(const e of i)s.add(e)
|
||||
let o=t.substr.substring(0,e-n.start),r=o.length
|
||||
return s.add({start:n.start,end:n.start+r,length:r,substr:o}),s}}const I=e=>{void 0===u&&(u=b(d)),e=v(e)
|
||||
let t="",s=[new S]
|
||||
for(let i=0;i<e.length;i++){let n=e.substring(i).match(p)
|
||||
const o=e.substring(i,i+1),r=n?n[0]:null
|
||||
let l=[],a=new Set
|
||||
for(const e of s){const t=e.last()
|
||||
if(!t||1==t.length||t.end<=i)if(r){const t=r.length
|
||||
e.add({start:i,end:i+t,length:t,substr:r}),a.add("1")}else e.add({start:i,end:i+1,length:1,substr:o}),a.add("2")
|
||||
else if(r){let s=e.clone(i,t)
|
||||
const n=r.length
|
||||
s.add({start:i,end:i+n,length:n,substr:r}),l.push(s)}else a.add("3")}if(l.length>0){l=l.sort(((e,t)=>e.length()-t.length()))
|
||||
for(let e of l)C(e,s)||s.push(e)}else if(i>0&&1==a.size&&!a.has("3")){t+=_(s,!1)
|
||||
let e=new S
|
||||
const i=s[0]
|
||||
i&&e.add(i.last()),s=[e]}}return t+=_(s,!0),t},A=(e,t)=>{if(e)return e[t]},k=(e,t)=>{if(e){for(var s,i=t.split(".");(s=i.shift())&&(e=e[s]););return e}},x=(e,t,s)=>{var i,n
|
||||
return e?(e+="",null==t.regex||-1===(n=e.search(t.regex))?0:(i=t.string.length/e.length,0===n&&(i+=.5),i*s)):0},F=(e,t)=>{var s=e[t]
|
||||
if("function"==typeof s)return s
|
||||
s&&!Array.isArray(s)&&(e[t]=[s])},L=(e,t)=>{if(Array.isArray(e))e.forEach(t)
|
||||
else for(var s in e)e.hasOwnProperty(s)&&t(e[s],s)},E=(e,t)=>"number"==typeof e&&"number"==typeof t?e>t?1:e<t?-1:0:(e=v(e+"").toLowerCase())>(t=v(t+"").toLowerCase())?1:t>e?-1:0
|
||||
class T{items
|
||||
settings
|
||||
constructor(e,t){this.items=e,this.settings=t||{diacritics:!0}}tokenize(e,t,s){if(!e||!e.length)return[]
|
||||
const i=[],n=e.split(/\s+/)
|
||||
var o
|
||||
return s&&(o=new RegExp("^("+Object.keys(s).map(r).join("|")+"):(.*)$")),n.forEach((e=>{let s,n=null,l=null
|
||||
o&&(s=e.match(o))&&(n=s[1],e=s[2]),e.length>0&&(l=this.settings.diacritics?I(e)||null:r(e),l&&t&&(l="\\b"+l)),i.push({string:e,regex:l?new RegExp(l,"iu"):null,field:n})})),i}getScoreFunction(e,t){var s=this.prepareSearch(e,t)
|
||||
return this._getScoreFunction(s)}_getScoreFunction(e){const t=e.tokens,s=t.length
|
||||
if(!s)return function(){return 0}
|
||||
const i=e.options.fields,n=e.weights,o=i.length,r=e.getAttrFn
|
||||
if(!o)return function(){return 1}
|
||||
const l=1===o?function(e,t){const s=i[0].field
|
||||
return x(r(t,s),e,n[s]||1)}:function(e,t){var s=0
|
||||
if(e.field){const i=r(t,e.field)
|
||||
!e.regex&&i?s+=1/o:s+=x(i,e,1)}else L(n,((i,n)=>{s+=x(r(t,n),e,i)}))
|
||||
return s/o}
|
||||
return 1===s?function(e){return l(t[0],e)}:"and"===e.options.conjunction?function(e){var i,n=0
|
||||
for(let s of t){if((i=l(s,e))<=0)return 0
|
||||
n+=i}return n/s}:function(e){var i=0
|
||||
return L(t,(t=>{i+=l(t,e)})),i/s}}getSortFunction(e,t){var s=this.prepareSearch(e,t)
|
||||
return this._getSortFunction(s)}_getSortFunction(e){var t,s=[]
|
||||
const i=this,n=e.options,o=!e.query&&n.sort_empty?n.sort_empty:n.sort
|
||||
if("function"==typeof o)return o.bind(this)
|
||||
const r=function(t,s){return"$score"===t?s.score:e.getAttrFn(i.items[s.id],t)}
|
||||
if(o)for(let t of o)(e.query||"$score"!==t.field)&&s.push(t)
|
||||
if(e.query){t=!0
|
||||
for(let e of s)if("$score"===e.field){t=!1
|
||||
break}t&&s.unshift({field:"$score",direction:"desc"})}else s=s.filter((e=>"$score"!==e.field))
|
||||
return s.length?function(e,t){var i,n
|
||||
for(let o of s){if(n=o.field,i=("desc"===o.direction?-1:1)*E(r(n,e),r(n,t)))return i}return 0}:null}prepareSearch(e,t){const s={}
|
||||
var i=Object.assign({},t)
|
||||
if(F(i,"sort"),F(i,"sort_empty"),i.fields){F(i,"fields")
|
||||
const e=[]
|
||||
i.fields.forEach((t=>{"string"==typeof t&&(t={field:t,weight:1}),e.push(t),s[t.field]="weight"in t?t.weight:1})),i.fields=e}return{options:i,query:e.toLowerCase().trim(),tokens:this.tokenize(e,i.respect_word_boundaries,s),total:0,items:[],weights:s,getAttrFn:i.nesting?k:A}}search(e,t){var s,i,n=this
|
||||
i=this.prepareSearch(e,t),t=i.options,e=i.query
|
||||
const o=t.score||n._getScoreFunction(i)
|
||||
e.length?L(n.items,((e,n)=>{s=o(e),(!1===t.filter||s>0)&&i.items.push({score:s,id:n})})):L(n.items,((e,t)=>{i.items.push({score:1,id:t})}))
|
||||
const r=n._getSortFunction(i)
|
||||
return r&&i.items.sort(r),i.total=i.items.length,"number"==typeof t.limit&&(i.items=i.items.slice(0,t.limit)),i}}const P=e=>null==e?null:N(e),N=e=>"boolean"==typeof e?e?"1":"0":e+"",j=e=>(e+"").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,"""),$=(e,t)=>{var s
|
||||
return function(i,n){var o=this
|
||||
s&&(o.loading=Math.max(o.loading-1,0),clearTimeout(s)),s=setTimeout((function(){s=null,o.loadedSearches[i]=!0,e.call(o,i,n)}),t)}},V=(e,t,s)=>{var i,n=e.trigger,o={}
|
||||
for(i of(e.trigger=function(){var s=arguments[0]
|
||||
if(-1===t.indexOf(s))return n.apply(e,arguments)
|
||||
o[s]=arguments},s.apply(e,[]),e.trigger=n,t))i in o&&n.apply(e,o[i])},q=(e,t=!1)=>{e&&(e.preventDefault(),t&&e.stopPropagation())},D=(e,t,s,i)=>{e.addEventListener(t,s,i)},H=(e,t)=>!!t&&(!!t[e]&&1===(t.altKey?1:0)+(t.ctrlKey?1:0)+(t.shiftKey?1:0)+(t.metaKey?1:0)),R=(e,t)=>{const s=e.getAttribute("id")
|
||||
return s||(e.setAttribute("id",t),t)},M=e=>e.replace(/[\\"']/g,"\\$&"),z=(e,t)=>{t&&e.append(t)},B=(e,t)=>{if(Array.isArray(e))e.forEach(t)
|
||||
else for(var s in e)e.hasOwnProperty(s)&&t(e[s],s)},K=e=>{if(e.jquery)return e[0]
|
||||
if(e instanceof HTMLElement)return e
|
||||
if(Q(e)){var t=document.createElement("template")
|
||||
return t.innerHTML=e.trim(),t.content.firstChild}return document.querySelector(e)},Q=e=>"string"==typeof e&&e.indexOf("<")>-1,G=(e,t)=>{var s=document.createEvent("HTMLEvents")
|
||||
s.initEvent(t,!0,!1),e.dispatchEvent(s)},U=(e,t)=>{Object.assign(e.style,t)},J=(e,...t)=>{var s=X(t);(e=Y(e)).map((e=>{s.map((t=>{e.classList.add(t)}))}))},W=(e,...t)=>{var s=X(t);(e=Y(e)).map((e=>{s.map((t=>{e.classList.remove(t)}))}))},X=e=>{var t=[]
|
||||
return B(e,(e=>{"string"==typeof e&&(e=e.trim().split(/[\t\n\f\r\s]/)),Array.isArray(e)&&(t=t.concat(e))})),t.filter(Boolean)},Y=e=>(Array.isArray(e)||(e=[e]),e),Z=(e,t,s)=>{if(!s||s.contains(e))for(;e&&e.matches;){if(e.matches(t))return e
|
||||
e=e.parentNode}},ee=(e,t=0)=>t>0?e[e.length-1]:e[0],te=(e,t)=>{if(!e)return-1
|
||||
t=t||e.nodeName
|
||||
for(var s=0;e=e.previousElementSibling;)e.matches(t)&&s++
|
||||
return s},se=(e,t)=>{B(t,((t,s)=>{null==t?e.removeAttribute(s):e.setAttribute(s,""+t)}))},ie=(e,t)=>{e.parentNode&&e.parentNode.replaceChild(t,e)},ne=(e,t)=>{if(null===t)return
|
||||
if("string"==typeof t){if(!t.length)return
|
||||
t=new RegExp(t,"i")}const s=e=>3===e.nodeType?(e=>{var s=e.data.match(t)
|
||||
if(s&&e.data.length>0){var i=document.createElement("span")
|
||||
i.className="highlight"
|
||||
var n=e.splitText(s.index)
|
||||
n.splitText(s[0].length)
|
||||
var o=n.cloneNode(!0)
|
||||
return i.appendChild(o),ie(n,i),1}return 0})(e):((e=>{1!==e.nodeType||!e.childNodes||/(script|style)/i.test(e.tagName)||"highlight"===e.className&&"SPAN"===e.tagName||Array.from(e.childNodes).forEach((e=>{s(e)}))})(e),0)
|
||||
s(e)},oe="undefined"!=typeof navigator&&/Mac/.test(navigator.userAgent)?"metaKey":"ctrlKey"
|
||||
var re={options:[],optgroups:[],plugins:[],delimiter:",",splitOn:null,persist:!0,diacritics:!0,create:null,createOnBlur:!1,createFilter:null,highlight:!0,openOnFocus:!0,shouldOpen:null,maxOptions:50,maxItems:null,hideSelected:null,duplicates:!1,addPrecedence:!1,selectOnTab:!1,preload:null,allowEmptyOption:!1,refreshThrottle:300,loadThrottle:300,loadingClass:"loading",dataAttr:null,optgroupField:"optgroup",valueField:"value",labelField:"text",disabledField:"disabled",optgroupLabelField:"label",optgroupValueField:"value",lockOptgroupOrder:!1,sortField:"$order",searchField:["text"],searchConjunction:"and",mode:null,wrapperClass:"ts-wrapper",controlClass:"ts-control",dropdownClass:"ts-dropdown",dropdownContentClass:"ts-dropdown-content",itemClass:"item",optionClass:"option",dropdownParent:null,controlInput:'<input type="text" autocomplete="off" size="1" />',copyClassesToDropdown:!1,placeholder:null,hidePlaceholder:null,shouldLoad:function(e){return e.length>0},render:{}}
|
||||
function le(e,t){var s=Object.assign({},re,t),i=s.dataAttr,n=s.labelField,o=s.valueField,r=s.disabledField,l=s.optgroupField,a=s.optgroupLabelField,c=s.optgroupValueField,d=e.tagName.toLowerCase(),u=e.getAttribute("placeholder")||e.getAttribute("data-placeholder")
|
||||
if(!u&&!s.allowEmptyOption){let t=e.querySelector('option[value=""]')
|
||||
t&&(u=t.textContent)}var p={placeholder:u,options:[],optgroups:[],items:[],maxItems:null}
|
||||
return"select"===d?(()=>{var t,d=p.options,u={},h=1
|
||||
let g=0
|
||||
var f=e=>{var t=Object.assign({},e.dataset),s=i&&t[i]
|
||||
return"string"==typeof s&&s.length&&(t=Object.assign(t,JSON.parse(s))),t},m=(e,t)=>{var i=P(e.value)
|
||||
if(null!=i&&(i||s.allowEmptyOption)){if(u.hasOwnProperty(i)){if(t){var a=u[i][l]
|
||||
a?Array.isArray(a)?a.push(t):u[i][l]=[a,t]:u[i][l]=t}}else{var c=f(e)
|
||||
c[n]=c[n]||e.textContent,c[o]=c[o]||i,c[r]=c[r]||e.disabled,c[l]=c[l]||t,c.$option=e,c.$order=c.$order||++g,u[i]=c,d.push(c)}e.selected&&p.items.push(i)}}
|
||||
p.maxItems=e.hasAttribute("multiple")?null:1,B(e.children,(e=>{var s,i,n
|
||||
"optgroup"===(t=e.tagName.toLowerCase())?((n=f(s=e))[a]=n[a]||s.getAttribute("label")||"",n[c]=n[c]||h++,n[r]=n[r]||s.disabled,n.$order=n.$order||++g,p.optgroups.push(n),i=n[c],B(s.children,(e=>{m(e,i)}))):"option"===t&&m(e)}))})():(()=>{const t=e.getAttribute(i)
|
||||
if(t)p.options=JSON.parse(t),B(p.options,(e=>{p.items.push(e[o])}))
|
||||
else{var r=e.value.trim()||""
|
||||
if(!s.allowEmptyOption&&!r.length)return
|
||||
const t=r.split(s.delimiter)
|
||||
B(t,(e=>{const t={}
|
||||
t[n]=e,t[o]=e,p.options.push(t)})),p.items=t}})(),Object.assign({},re,p,t)}var ae=0
|
||||
class ce extends(function(e){return e.plugins={},class extends e{constructor(...e){super(...e),this.plugins={names:[],settings:{},requested:{},loaded:{}}}static define(t,s){e.plugins[t]={name:t,fn:s}}initializePlugins(e){var t,s
|
||||
const i=this,n=[]
|
||||
if(Array.isArray(e))e.forEach((e=>{"string"==typeof e?n.push(e):(i.plugins.settings[e.name]=e.options,n.push(e.name))}))
|
||||
else if(e)for(t in e)e.hasOwnProperty(t)&&(i.plugins.settings[t]=e[t],n.push(t))
|
||||
for(;s=n.shift();)i.require(s)}loadPlugin(t){var s=this,i=s.plugins,n=e.plugins[t]
|
||||
if(!e.plugins.hasOwnProperty(t))throw new Error('Unable to find "'+t+'" plugin')
|
||||
i.requested[t]=!0,i.loaded[t]=n.fn.apply(s,[s.plugins.settings[t]||{}]),i.names.push(t)}require(e){var t=this,s=t.plugins
|
||||
if(!t.plugins.loaded.hasOwnProperty(e)){if(s.requested[e])throw new Error('Plugin has circular dependency ("'+e+'")')
|
||||
t.loadPlugin(e)}return s.loaded[e]}}}(t)){constructor(e,t){var s
|
||||
super(),this.order=0,this.isOpen=!1,this.isDisabled=!1,this.isReadOnly=!1,this.isInvalid=!1,this.isValid=!0,this.isLocked=!1,this.isFocused=!1,this.isInputHidden=!1,this.isSetup=!1,this.ignoreFocus=!1,this.ignoreHover=!1,this.hasOptions=!1,this.lastValue="",this.caretPos=0,this.loading=0,this.loadedSearches={},this.activeOption=null,this.activeItems=[],this.optgroups={},this.options={},this.userOptions={},this.items=[],this.refreshTimeout=null,ae++
|
||||
var i=K(e)
|
||||
if(i.tomselect)throw new Error("Tom Select already initialized on this element")
|
||||
i.tomselect=this,s=(window.getComputedStyle&&window.getComputedStyle(i,null)).getPropertyValue("direction")
|
||||
const n=le(i,t)
|
||||
this.settings=n,this.input=i,this.tabIndex=i.tabIndex||0,this.is_select_tag="select"===i.tagName.toLowerCase(),this.rtl=/rtl/i.test(s),this.inputId=R(i,"tomselect-"+ae),this.isRequired=i.required,this.sifter=new T(this.options,{diacritics:n.diacritics}),n.mode=n.mode||(1===n.maxItems?"single":"multi"),"boolean"!=typeof n.hideSelected&&(n.hideSelected="multi"===n.mode),"boolean"!=typeof n.hidePlaceholder&&(n.hidePlaceholder="multi"!==n.mode)
|
||||
var o=n.createFilter
|
||||
"function"!=typeof o&&("string"==typeof o&&(o=new RegExp(o)),o instanceof RegExp?n.createFilter=e=>o.test(e):n.createFilter=e=>this.settings.duplicates||!this.options[e]),this.initializePlugins(n.plugins),this.setupCallbacks(),this.setupTemplates()
|
||||
const r=K("<div>"),l=K("<div>"),a=this._render("dropdown"),c=K('<div role="listbox" tabindex="-1">'),d=this.input.getAttribute("class")||"",u=n.mode
|
||||
var p
|
||||
if(J(r,n.wrapperClass,d,u),J(l,n.controlClass),z(r,l),J(a,n.dropdownClass,u),n.copyClassesToDropdown&&J(a,d),J(c,n.dropdownContentClass),z(a,c),K(n.dropdownParent||r).appendChild(a),Q(n.controlInput)){p=K(n.controlInput)
|
||||
B(["autocorrect","autocapitalize","autocomplete","spellcheck"],(e=>{i.getAttribute(e)&&se(p,{[e]:i.getAttribute(e)})})),p.tabIndex=-1,l.appendChild(p),this.focus_node=p}else n.controlInput?(p=K(n.controlInput),this.focus_node=p):(p=K("<input/>"),this.focus_node=l)
|
||||
this.wrapper=r,this.dropdown=a,this.dropdown_content=c,this.control=l,this.control_input=p,this.setup()}setup(){const e=this,t=e.settings,s=e.control_input,i=e.dropdown,n=e.dropdown_content,o=e.wrapper,l=e.control,a=e.input,c=e.focus_node,d={passive:!0},u=e.inputId+"-ts-dropdown"
|
||||
se(n,{id:u}),se(c,{role:"combobox","aria-haspopup":"listbox","aria-expanded":"false","aria-controls":u})
|
||||
const p=R(c,e.inputId+"-ts-control"),h="label[for='"+(e=>e.replace(/['"\\]/g,"\\$&"))(e.inputId)+"']",g=document.querySelector(h),f=e.focus.bind(e)
|
||||
if(g){D(g,"click",f),se(g,{for:p})
|
||||
const t=R(g,e.inputId+"-ts-label")
|
||||
se(c,{"aria-labelledby":t}),se(n,{"aria-labelledby":t})}if(o.style.width=a.style.width,e.plugins.names.length){const t="plugin-"+e.plugins.names.join(" plugin-")
|
||||
J([o,i],t)}(null===t.maxItems||t.maxItems>1)&&e.is_select_tag&&se(a,{multiple:"multiple"}),t.placeholder&&se(s,{placeholder:t.placeholder}),!t.splitOn&&t.delimiter&&(t.splitOn=new RegExp("\\s*"+r(t.delimiter)+"+\\s*")),t.load&&t.loadThrottle&&(t.load=$(t.load,t.loadThrottle)),D(i,"mousemove",(()=>{e.ignoreHover=!1})),D(i,"mouseenter",(t=>{var s=Z(t.target,"[data-selectable]",i)
|
||||
s&&e.onOptionHover(t,s)}),{capture:!0}),D(i,"click",(t=>{const s=Z(t.target,"[data-selectable]")
|
||||
s&&(e.onOptionSelect(t,s),q(t,!0))})),D(l,"click",(t=>{var i=Z(t.target,"[data-ts-item]",l)
|
||||
i&&e.onItemSelect(t,i)?q(t,!0):""==s.value&&(e.onClick(),q(t,!0))})),D(c,"keydown",(t=>e.onKeyDown(t))),D(s,"keypress",(t=>e.onKeyPress(t))),D(s,"input",(t=>e.onInput(t))),D(c,"blur",(t=>e.onBlur(t))),D(c,"focus",(t=>e.onFocus(t))),D(s,"paste",(t=>e.onPaste(t)))
|
||||
const m=t=>{const n=t.composedPath()[0]
|
||||
if(!o.contains(n)&&!i.contains(n))return e.isFocused&&e.blur(),void e.inputState()
|
||||
n==s&&e.isOpen?t.stopPropagation():q(t,!0)},v=()=>{e.isOpen&&e.positionDropdown()}
|
||||
D(document,"mousedown",m),D(window,"scroll",v,d),D(window,"resize",v,d),this._destroy=()=>{document.removeEventListener("mousedown",m),window.removeEventListener("scroll",v),window.removeEventListener("resize",v),g&&g.removeEventListener("click",f)},this.revertSettings={innerHTML:a.innerHTML,tabIndex:a.tabIndex},a.tabIndex=-1,a.insertAdjacentElement("afterend",e.wrapper),e.sync(!1),t.items=[],delete t.optgroups,delete t.options,D(a,"invalid",(()=>{e.isValid&&(e.isValid=!1,e.isInvalid=!0,e.refreshState())})),e.updateOriginalInput(),e.refreshItems(),e.close(!1),e.inputState(),e.isSetup=!0,a.disabled?e.disable():a.readOnly?e.setReadOnly(!0):e.enable(),e.on("change",this.onChange),J(a,"tomselected","ts-hidden-accessible"),e.trigger("initialize"),!0===t.preload&&e.preload()}setupOptions(e=[],t=[]){this.addOptions(e),B(t,(e=>{this.registerOptionGroup(e)}))}setupTemplates(){var e=this,t=e.settings.labelField,s=e.settings.optgroupLabelField,i={optgroup:e=>{let t=document.createElement("div")
|
||||
return t.className="optgroup",t.appendChild(e.options),t},optgroup_header:(e,t)=>'<div class="optgroup-header">'+t(e[s])+"</div>",option:(e,s)=>"<div>"+s(e[t])+"</div>",item:(e,s)=>"<div>"+s(e[t])+"</div>",option_create:(e,t)=>'<div class="create">Add <strong>'+t(e.input)+"</strong>…</div>",no_results:()=>'<div class="no-results">No results found</div>',loading:()=>'<div class="spinner"></div>',not_loading:()=>{},dropdown:()=>"<div></div>"}
|
||||
e.settings.render=Object.assign({},i,e.settings.render)}setupCallbacks(){var e,t,s={initialize:"onInitialize",change:"onChange",item_add:"onItemAdd",item_remove:"onItemRemove",item_select:"onItemSelect",clear:"onClear",option_add:"onOptionAdd",option_remove:"onOptionRemove",option_clear:"onOptionClear",optgroup_add:"onOptionGroupAdd",optgroup_remove:"onOptionGroupRemove",optgroup_clear:"onOptionGroupClear",dropdown_open:"onDropdownOpen",dropdown_close:"onDropdownClose",type:"onType",load:"onLoad",focus:"onFocus",blur:"onBlur"}
|
||||
for(e in s)(t=this.settings[s[e]])&&this.on(e,t)}sync(e=!0){const t=this,s=e?le(t.input,{delimiter:t.settings.delimiter}):t.settings
|
||||
t.setupOptions(s.options,s.optgroups),t.setValue(s.items||[],!0),t.lastQuery=null}onClick(){var e=this
|
||||
if(e.activeItems.length>0)return e.clearActiveItems(),void e.focus()
|
||||
e.isFocused&&e.isOpen?e.blur():e.focus()}onMouseDown(){}onChange(){G(this.input,"input"),G(this.input,"change")}onPaste(e){var t=this
|
||||
t.isInputHidden||t.isLocked?q(e):t.settings.splitOn&&setTimeout((()=>{var e=t.inputValue()
|
||||
if(e.match(t.settings.splitOn)){var s=e.trim().split(t.settings.splitOn)
|
||||
B(s,(e=>{P(e)&&(this.options[e]?t.addItem(e):t.createItem(e))}))}}),0)}onKeyPress(e){var t=this
|
||||
if(!t.isLocked){var s=String.fromCharCode(e.keyCode||e.which)
|
||||
return t.settings.create&&"multi"===t.settings.mode&&s===t.settings.delimiter?(t.createItem(),void q(e)):void 0}q(e)}onKeyDown(e){var t=this
|
||||
if(t.ignoreHover=!0,t.isLocked)9!==e.keyCode&&q(e)
|
||||
else{switch(e.keyCode){case 65:if(H(oe,e)&&""==t.control_input.value)return q(e),void t.selectAll()
|
||||
break
|
||||
case 27:return t.isOpen&&(q(e,!0),t.close()),void t.clearActiveItems()
|
||||
case 40:if(!t.isOpen&&t.hasOptions)t.open()
|
||||
else if(t.activeOption){let e=t.getAdjacent(t.activeOption,1)
|
||||
e&&t.setActiveOption(e)}return void q(e)
|
||||
case 38:if(t.activeOption){let e=t.getAdjacent(t.activeOption,-1)
|
||||
e&&t.setActiveOption(e)}return void q(e)
|
||||
case 13:return void(t.canSelect(t.activeOption)?(t.onOptionSelect(e,t.activeOption),q(e)):(t.settings.create&&t.createItem()||document.activeElement==t.control_input&&t.isOpen)&&q(e))
|
||||
case 37:return void t.advanceSelection(-1,e)
|
||||
case 39:return void t.advanceSelection(1,e)
|
||||
case 9:return void(t.settings.selectOnTab&&(t.canSelect(t.activeOption)&&(t.onOptionSelect(e,t.activeOption),q(e)),t.settings.create&&t.createItem()&&q(e)))
|
||||
case 8:case 46:return void t.deleteSelection(e)}t.isInputHidden&&!H(oe,e)&&q(e)}}onInput(e){if(this.isLocked)return
|
||||
const t=this.inputValue()
|
||||
this.lastValue!==t&&(this.lastValue=t,""!=t?(this.refreshTimeout&&window.clearTimeout(this.refreshTimeout),this.refreshTimeout=((e,t)=>t>0?window.setTimeout(e,t):(e.call(null),null))((()=>{this.refreshTimeout=null,this._onInput()}),this.settings.refreshThrottle)):this._onInput())}_onInput(){const e=this.lastValue
|
||||
this.settings.shouldLoad.call(this,e)&&this.load(e),this.refreshOptions(),this.trigger("type",e)}onOptionHover(e,t){this.ignoreHover||this.setActiveOption(t,!1)}onFocus(e){var t=this,s=t.isFocused
|
||||
if(t.isDisabled||t.isReadOnly)return t.blur(),void q(e)
|
||||
t.ignoreFocus||(t.isFocused=!0,"focus"===t.settings.preload&&t.preload(),s||t.trigger("focus"),t.activeItems.length||(t.inputState(),t.refreshOptions(!!t.settings.openOnFocus)),t.refreshState())}onBlur(e){if(!1!==document.hasFocus()){var t=this
|
||||
if(t.isFocused){t.isFocused=!1,t.ignoreFocus=!1
|
||||
var s=()=>{t.close(),t.setActiveItem(),t.setCaret(t.items.length),t.trigger("blur")}
|
||||
t.settings.create&&t.settings.createOnBlur?t.createItem(null,s):s()}}}onOptionSelect(e,t){var s,i=this
|
||||
t.parentElement&&t.parentElement.matches("[data-disabled]")||(t.classList.contains("create")?i.createItem(null,(()=>{i.settings.closeAfterSelect&&i.close()})):void 0!==(s=t.dataset.value)&&(i.lastQuery=null,i.addItem(s),i.settings.closeAfterSelect&&i.close(),!i.settings.hideSelected&&e.type&&/click/.test(e.type)&&i.setActiveOption(t)))}canSelect(e){return!!(this.isOpen&&e&&this.dropdown_content.contains(e))}onItemSelect(e,t){var s=this
|
||||
return!s.isLocked&&"multi"===s.settings.mode&&(q(e),s.setActiveItem(t,e),!0)}canLoad(e){return!!this.settings.load&&!this.loadedSearches.hasOwnProperty(e)}load(e){const t=this
|
||||
if(!t.canLoad(e))return
|
||||
J(t.wrapper,t.settings.loadingClass),t.loading++
|
||||
const s=t.loadCallback.bind(t)
|
||||
t.settings.load.call(t,e,s)}loadCallback(e,t){const s=this
|
||||
s.loading=Math.max(s.loading-1,0),s.lastQuery=null,s.clearActiveOption(),s.setupOptions(e,t),s.refreshOptions(s.isFocused&&!s.isInputHidden),s.loading||W(s.wrapper,s.settings.loadingClass),s.trigger("load",e,t)}preload(){var e=this.wrapper.classList
|
||||
e.contains("preloaded")||(e.add("preloaded"),this.load(""))}setTextboxValue(e=""){var t=this.control_input
|
||||
t.value!==e&&(t.value=e,G(t,"update"),this.lastValue=e)}getValue(){return this.is_select_tag&&this.input.hasAttribute("multiple")?this.items:this.items.join(this.settings.delimiter)}setValue(e,t){V(this,t?[]:["change"],(()=>{this.clear(t),this.addItems(e,t)}))}setMaxItems(e){0===e&&(e=null),this.settings.maxItems=e,this.refreshState()}setActiveItem(e,t){var s,i,n,o,r,l,a=this
|
||||
if("single"!==a.settings.mode){if(!e)return a.clearActiveItems(),void(a.isFocused&&a.inputState())
|
||||
if("click"===(s=t&&t.type.toLowerCase())&&H("shiftKey",t)&&a.activeItems.length){for(l=a.getLastActive(),(n=Array.prototype.indexOf.call(a.control.children,l))>(o=Array.prototype.indexOf.call(a.control.children,e))&&(r=n,n=o,o=r),i=n;i<=o;i++)e=a.control.children[i],-1===a.activeItems.indexOf(e)&&a.setActiveItemClass(e)
|
||||
q(t)}else"click"===s&&H(oe,t)||"keydown"===s&&H("shiftKey",t)?e.classList.contains("active")?a.removeActiveItem(e):a.setActiveItemClass(e):(a.clearActiveItems(),a.setActiveItemClass(e))
|
||||
a.inputState(),a.isFocused||a.focus()}}setActiveItemClass(e){const t=this,s=t.control.querySelector(".last-active")
|
||||
s&&W(s,"last-active"),J(e,"active last-active"),t.trigger("item_select",e),-1==t.activeItems.indexOf(e)&&t.activeItems.push(e)}removeActiveItem(e){var t=this.activeItems.indexOf(e)
|
||||
this.activeItems.splice(t,1),W(e,"active")}clearActiveItems(){W(this.activeItems,"active"),this.activeItems=[]}setActiveOption(e,t=!0){e!==this.activeOption&&(this.clearActiveOption(),e&&(this.activeOption=e,se(this.focus_node,{"aria-activedescendant":e.getAttribute("id")}),se(e,{"aria-selected":"true"}),J(e,"active"),t&&this.scrollToOption(e)))}scrollToOption(e,t){if(!e)return
|
||||
const s=this.dropdown_content,i=s.clientHeight,n=s.scrollTop||0,o=e.offsetHeight,r=e.getBoundingClientRect().top-s.getBoundingClientRect().top+n
|
||||
r+o>i+n?this.scroll(r-i+o,t):r<n&&this.scroll(r,t)}scroll(e,t){const s=this.dropdown_content
|
||||
t&&(s.style.scrollBehavior=t),s.scrollTop=e,s.style.scrollBehavior=""}clearActiveOption(){this.activeOption&&(W(this.activeOption,"active"),se(this.activeOption,{"aria-selected":null})),this.activeOption=null,se(this.focus_node,{"aria-activedescendant":null})}selectAll(){const e=this
|
||||
if("single"===e.settings.mode)return
|
||||
const t=e.controlChildren()
|
||||
t.length&&(e.inputState(),e.close(),e.activeItems=t,B(t,(t=>{e.setActiveItemClass(t)})))}inputState(){var e=this
|
||||
e.control.contains(e.control_input)&&(se(e.control_input,{placeholder:e.settings.placeholder}),e.activeItems.length>0||!e.isFocused&&e.settings.hidePlaceholder&&e.items.length>0?(e.setTextboxValue(),e.isInputHidden=!0):(e.settings.hidePlaceholder&&e.items.length>0&&se(e.control_input,{placeholder:""}),e.isInputHidden=!1),e.wrapper.classList.toggle("input-hidden",e.isInputHidden))}inputValue(){return this.control_input.value.trim()}focus(){var e=this
|
||||
e.isDisabled||e.isReadOnly||(e.ignoreFocus=!0,e.control_input.offsetWidth?e.control_input.focus():e.focus_node.focus(),setTimeout((()=>{e.ignoreFocus=!1,e.onFocus()}),0))}blur(){this.focus_node.blur(),this.onBlur()}getScoreFunction(e){return this.sifter.getScoreFunction(e,this.getSearchOptions())}getSearchOptions(){var e=this.settings,t=e.sortField
|
||||
return"string"==typeof e.sortField&&(t=[{field:e.sortField}]),{fields:e.searchField,conjunction:e.searchConjunction,sort:t,nesting:e.nesting}}search(e){var t,s,i=this,n=this.getSearchOptions()
|
||||
if(i.settings.score&&"function"!=typeof(s=i.settings.score.call(i,e)))throw new Error('Tom Select "score" setting must be a function that returns a function')
|
||||
return e!==i.lastQuery?(i.lastQuery=e,t=i.sifter.search(e,Object.assign(n,{score:s})),i.currentResults=t):t=Object.assign({},i.currentResults),i.settings.hideSelected&&(t.items=t.items.filter((e=>{let t=P(e.id)
|
||||
return!(t&&-1!==i.items.indexOf(t))}))),t}refreshOptions(e=!0){var t,s,i,n,o,r,l,a,c,d
|
||||
const u={},p=[]
|
||||
var h=this,g=h.inputValue()
|
||||
const f=g===h.lastQuery||""==g&&null==h.lastQuery
|
||||
var m=h.search(g),v=null,y=h.settings.shouldOpen||!1,O=h.dropdown_content
|
||||
f&&(v=h.activeOption)&&(c=v.closest("[data-group]")),n=m.items.length,"number"==typeof h.settings.maxOptions&&(n=Math.min(n,h.settings.maxOptions)),n>0&&(y=!0)
|
||||
const b=(e,t)=>{let s=u[e]
|
||||
if(void 0!==s){let e=p[s]
|
||||
if(void 0!==e)return[s,e.fragment]}let i=document.createDocumentFragment()
|
||||
return s=p.length,p.push({fragment:i,order:t,optgroup:e}),[s,i]}
|
||||
for(t=0;t<n;t++){let e=m.items[t]
|
||||
if(!e)continue
|
||||
let n=e.id,l=h.options[n]
|
||||
if(void 0===l)continue
|
||||
let a=N(n),d=h.getOption(a,!0)
|
||||
for(h.settings.hideSelected||d.classList.toggle("selected",h.items.includes(a)),o=l[h.settings.optgroupField]||"",s=0,i=(r=Array.isArray(o)?o:[o])&&r.length;s<i;s++){o=r[s]
|
||||
let e=l.$order,t=h.optgroups[o]
|
||||
void 0===t?o="":e=t.$order
|
||||
const[i,a]=b(o,e)
|
||||
s>0&&(d=d.cloneNode(!0),se(d,{id:l.$id+"-clone-"+s,"aria-selected":null}),d.classList.add("ts-cloned"),W(d,"active"),h.activeOption&&h.activeOption.dataset.value==n&&c&&c.dataset.group===o.toString()&&(v=d)),a.appendChild(d),""!=o&&(u[o]=i)}}var w
|
||||
h.settings.lockOptgroupOrder&&p.sort(((e,t)=>e.order-t.order)),l=document.createDocumentFragment(),B(p,(e=>{let t=e.fragment,s=e.optgroup
|
||||
if(!t||!t.children.length)return
|
||||
let i=h.optgroups[s]
|
||||
if(void 0!==i){let e=document.createDocumentFragment(),s=h.render("optgroup_header",i)
|
||||
z(e,s),z(e,t)
|
||||
let n=h.render("optgroup",{group:i,options:e})
|
||||
z(l,n)}else z(l,t)})),O.innerHTML="",z(O,l),h.settings.highlight&&(w=O.querySelectorAll("span.highlight"),Array.prototype.forEach.call(w,(function(e){var t=e.parentNode
|
||||
t.replaceChild(e.firstChild,e),t.normalize()})),m.query.length&&m.tokens.length&&B(m.tokens,(e=>{ne(O,e.regex)})))
|
||||
var _=e=>{let t=h.render(e,{input:g})
|
||||
return t&&(y=!0,O.insertBefore(t,O.firstChild)),t}
|
||||
if(h.loading?_("loading"):h.settings.shouldLoad.call(h,g)?0===m.items.length&&_("no_results"):_("not_loading"),(a=h.canCreate(g))&&(d=_("option_create")),h.hasOptions=m.items.length>0||a,y){if(m.items.length>0){if(v||"single"!==h.settings.mode||null==h.items[0]||(v=h.getOption(h.items[0])),!O.contains(v)){let e=0
|
||||
d&&!h.settings.addPrecedence&&(e=1),v=h.selectable()[e]}}else d&&(v=d)
|
||||
e&&!h.isOpen&&(h.open(),h.scrollToOption(v,"auto")),h.setActiveOption(v)}else h.clearActiveOption(),e&&h.isOpen&&h.close(!1)}selectable(){return this.dropdown_content.querySelectorAll("[data-selectable]")}addOption(e,t=!1){const s=this
|
||||
if(Array.isArray(e))return s.addOptions(e,t),!1
|
||||
const i=P(e[s.settings.valueField])
|
||||
return null!==i&&!s.options.hasOwnProperty(i)&&(e.$order=e.$order||++s.order,e.$id=s.inputId+"-opt-"+e.$order,s.options[i]=e,s.lastQuery=null,t&&(s.userOptions[i]=t,s.trigger("option_add",i,e)),i)}addOptions(e,t=!1){B(e,(e=>{this.addOption(e,t)}))}registerOption(e){return this.addOption(e)}registerOptionGroup(e){var t=P(e[this.settings.optgroupValueField])
|
||||
return null!==t&&(e.$order=e.$order||++this.order,this.optgroups[t]=e,t)}addOptionGroup(e,t){var s
|
||||
t[this.settings.optgroupValueField]=e,(s=this.registerOptionGroup(t))&&this.trigger("optgroup_add",s,t)}removeOptionGroup(e){this.optgroups.hasOwnProperty(e)&&(delete this.optgroups[e],this.clearCache(),this.trigger("optgroup_remove",e))}clearOptionGroups(){this.optgroups={},this.clearCache(),this.trigger("optgroup_clear")}updateOption(e,t){const s=this
|
||||
var i,n
|
||||
const o=P(e),r=P(t[s.settings.valueField])
|
||||
if(null===o)return
|
||||
const l=s.options[o]
|
||||
if(null==l)return
|
||||
if("string"!=typeof r)throw new Error("Value must be set in option data")
|
||||
const a=s.getOption(o),c=s.getItem(o)
|
||||
if(t.$order=t.$order||l.$order,delete s.options[o],s.uncacheValue(r),s.options[r]=t,a){if(s.dropdown_content.contains(a)){const e=s._render("option",t)
|
||||
ie(a,e),s.activeOption===a&&s.setActiveOption(e)}a.remove()}c&&(-1!==(n=s.items.indexOf(o))&&s.items.splice(n,1,r),i=s._render("item",t),c.classList.contains("active")&&J(i,"active"),ie(c,i)),s.lastQuery=null}removeOption(e,t){const s=this
|
||||
e=N(e),s.uncacheValue(e),delete s.userOptions[e],delete s.options[e],s.lastQuery=null,s.trigger("option_remove",e),s.removeItem(e,t)}clearOptions(e){const t=(e||this.clearFilter).bind(this)
|
||||
this.loadedSearches={},this.userOptions={},this.clearCache()
|
||||
const s={}
|
||||
B(this.options,((e,i)=>{t(e,i)&&(s[i]=e)})),this.options=this.sifter.items=s,this.lastQuery=null,this.trigger("option_clear")}clearFilter(e,t){return this.items.indexOf(t)>=0}getOption(e,t=!1){const s=P(e)
|
||||
if(null===s)return null
|
||||
const i=this.options[s]
|
||||
if(null!=i){if(i.$div)return i.$div
|
||||
if(t)return this._render("option",i)}return null}getAdjacent(e,t,s="option"){var i
|
||||
if(!e)return null
|
||||
i="item"==s?this.controlChildren():this.dropdown_content.querySelectorAll("[data-selectable]")
|
||||
for(let s=0;s<i.length;s++)if(i[s]==e)return t>0?i[s+1]:i[s-1]
|
||||
return null}getItem(e){if("object"==typeof e)return e
|
||||
var t=P(e)
|
||||
return null!==t?this.control.querySelector(`[data-value="${M(t)}"]`):null}addItems(e,t){var s=this,i=Array.isArray(e)?e:[e]
|
||||
const n=(i=i.filter((e=>-1===s.items.indexOf(e))))[i.length-1]
|
||||
i.forEach((e=>{s.isPending=e!==n,s.addItem(e,t)}))}addItem(e,t){V(this,t?[]:["change","dropdown_close"],(()=>{var s,i
|
||||
const n=this,o=n.settings.mode,r=P(e)
|
||||
if((!r||-1===n.items.indexOf(r)||("single"===o&&n.close(),"single"!==o&&n.settings.duplicates))&&null!==r&&n.options.hasOwnProperty(r)&&("single"===o&&n.clear(t),"multi"!==o||!n.isFull())){if(s=n._render("item",n.options[r]),n.control.contains(s)&&(s=s.cloneNode(!0)),i=n.isFull(),n.items.splice(n.caretPos,0,r),n.insertAtCaret(s),n.isSetup){if(!n.isPending&&n.settings.hideSelected){let e=n.getOption(r),t=n.getAdjacent(e,1)
|
||||
t&&n.setActiveOption(t)}n.isPending||n.settings.closeAfterSelect||n.refreshOptions(n.isFocused&&"single"!==o),0!=n.settings.closeAfterSelect&&n.isFull()?n.close():n.isPending||n.positionDropdown(),n.trigger("item_add",r,s),n.isPending||n.updateOriginalInput({silent:t})}(!n.isPending||!i&&n.isFull())&&(n.inputState(),n.refreshState())}}))}removeItem(e=null,t){const s=this
|
||||
if(!(e=s.getItem(e)))return
|
||||
var i,n
|
||||
const o=e.dataset.value
|
||||
i=te(e),e.remove(),e.classList.contains("active")&&(n=s.activeItems.indexOf(e),s.activeItems.splice(n,1),W(e,"active")),s.items.splice(i,1),s.lastQuery=null,!s.settings.persist&&s.userOptions.hasOwnProperty(o)&&s.removeOption(o,t),i<s.caretPos&&s.setCaret(s.caretPos-1),s.updateOriginalInput({silent:t}),s.refreshState(),s.positionDropdown(),s.trigger("item_remove",o,e)}createItem(e=null,t=()=>{}){3===arguments.length&&(t=arguments[2]),"function"!=typeof t&&(t=()=>{})
|
||||
var s,i=this,n=i.caretPos
|
||||
if(e=e||i.inputValue(),!i.canCreate(e))return t(),!1
|
||||
i.lock()
|
||||
var o=!1,r=e=>{if(i.unlock(),!e||"object"!=typeof e)return t()
|
||||
var s=P(e[i.settings.valueField])
|
||||
if("string"!=typeof s)return t()
|
||||
i.setTextboxValue(),i.addOption(e,!0),i.setCaret(n),i.addItem(s),t(e),o=!0}
|
||||
return s="function"==typeof i.settings.create?i.settings.create.call(this,e,r):{[i.settings.labelField]:e,[i.settings.valueField]:e},o||r(s),!0}refreshItems(){var e=this
|
||||
e.lastQuery=null,e.isSetup&&e.addItems(e.items),e.updateOriginalInput(),e.refreshState()}refreshState(){const e=this
|
||||
e.refreshValidityState()
|
||||
const t=e.isFull(),s=e.isLocked
|
||||
e.wrapper.classList.toggle("rtl",e.rtl)
|
||||
const i=e.wrapper.classList
|
||||
var n
|
||||
i.toggle("focus",e.isFocused),i.toggle("disabled",e.isDisabled),i.toggle("readonly",e.isReadOnly),i.toggle("required",e.isRequired),i.toggle("invalid",!e.isValid),i.toggle("locked",s),i.toggle("full",t),i.toggle("input-active",e.isFocused&&!e.isInputHidden),i.toggle("dropdown-active",e.isOpen),i.toggle("has-options",(n=e.options,0===Object.keys(n).length)),i.toggle("has-items",e.items.length>0)}refreshValidityState(){var e=this
|
||||
e.input.validity&&(e.isValid=e.input.validity.valid,e.isInvalid=!e.isValid)}isFull(){return null!==this.settings.maxItems&&this.items.length>=this.settings.maxItems}updateOriginalInput(e={}){const t=this
|
||||
var s,i
|
||||
const n=t.input.querySelector('option[value=""]')
|
||||
if(t.is_select_tag){const o=[],r=t.input.querySelectorAll("option:checked").length
|
||||
function l(e,s,i){return e||(e=K('<option value="'+j(s)+'">'+j(i)+"</option>")),e!=n&&t.input.append(e),o.push(e),(e!=n||r>0)&&(e.selected=!0),e}t.input.querySelectorAll("option:checked").forEach((e=>{e.selected=!1})),0==t.items.length&&"single"==t.settings.mode?l(n,"",""):t.items.forEach((e=>{if(s=t.options[e],i=s[t.settings.labelField]||"",o.includes(s.$option)){l(t.input.querySelector(`option[value="${M(e)}"]:not(:checked)`),e,i)}else s.$option=l(s.$option,e,i)}))}else t.input.value=t.getValue()
|
||||
t.isSetup&&(e.silent||t.trigger("change",t.getValue()))}open(){var e=this
|
||||
e.isLocked||e.isOpen||"multi"===e.settings.mode&&e.isFull()||(e.isOpen=!0,se(e.focus_node,{"aria-expanded":"true"}),e.refreshState(),U(e.dropdown,{visibility:"hidden",display:"block"}),e.positionDropdown(),U(e.dropdown,{visibility:"visible",display:"block"}),e.focus(),e.trigger("dropdown_open",e.dropdown))}close(e=!0){var t=this,s=t.isOpen
|
||||
e&&(t.setTextboxValue(),"single"===t.settings.mode&&t.items.length&&t.inputState()),t.isOpen=!1,se(t.focus_node,{"aria-expanded":"false"}),U(t.dropdown,{display:"none"}),t.settings.hideSelected&&t.clearActiveOption(),t.refreshState(),s&&t.trigger("dropdown_close",t.dropdown)}positionDropdown(){if("body"===this.settings.dropdownParent){var e=this.control,t=e.getBoundingClientRect(),s=e.offsetHeight+t.top+window.scrollY,i=t.left+window.scrollX
|
||||
U(this.dropdown,{width:t.width+"px",top:s+"px",left:i+"px"})}}clear(e){var t=this
|
||||
if(t.items.length){var s=t.controlChildren()
|
||||
B(s,(e=>{t.removeItem(e,!0)})),t.inputState(),e||t.updateOriginalInput(),t.trigger("clear")}}insertAtCaret(e){const t=this,s=t.caretPos,i=t.control
|
||||
i.insertBefore(e,i.children[s]||null),t.setCaret(s+1)}deleteSelection(e){var t,s,i,n,o,r=this
|
||||
t=e&&8===e.keyCode?-1:1,s={start:(o=r.control_input).selectionStart||0,length:(o.selectionEnd||0)-(o.selectionStart||0)}
|
||||
const l=[]
|
||||
if(r.activeItems.length)n=ee(r.activeItems,t),i=te(n),t>0&&i++,B(r.activeItems,(e=>l.push(e)))
|
||||
else if((r.isFocused||"single"===r.settings.mode)&&r.items.length){const e=r.controlChildren()
|
||||
let i
|
||||
t<0&&0===s.start&&0===s.length?i=e[r.caretPos-1]:t>0&&s.start===r.inputValue().length&&(i=e[r.caretPos]),void 0!==i&&l.push(i)}if(!r.shouldDelete(l,e))return!1
|
||||
for(q(e,!0),void 0!==i&&r.setCaret(i);l.length;)r.removeItem(l.pop())
|
||||
return r.inputState(),r.positionDropdown(),r.refreshOptions(!1),!0}shouldDelete(e,t){const s=e.map((e=>e.dataset.value))
|
||||
return!(!s.length||"function"==typeof this.settings.onDelete&&!1===this.settings.onDelete(s,t))}advanceSelection(e,t){var s,i,n=this
|
||||
n.rtl&&(e*=-1),n.inputValue().length||(H(oe,t)||H("shiftKey",t)?(i=(s=n.getLastActive(e))?s.classList.contains("active")?n.getAdjacent(s,e,"item"):s:e>0?n.control_input.nextElementSibling:n.control_input.previousElementSibling)&&(i.classList.contains("active")&&n.removeActiveItem(s),n.setActiveItemClass(i)):n.moveCaret(e))}moveCaret(e){}getLastActive(e){let t=this.control.querySelector(".last-active")
|
||||
if(t)return t
|
||||
var s=this.control.querySelectorAll(".active")
|
||||
return s?ee(s,e):void 0}setCaret(e){this.caretPos=this.items.length}controlChildren(){return Array.from(this.control.querySelectorAll("[data-ts-item]"))}lock(){this.setLocked(!0)}unlock(){this.setLocked(!1)}setLocked(e=this.isReadOnly||this.isDisabled){this.isLocked=e,this.refreshState()}disable(){this.setDisabled(!0),this.close()}enable(){this.setDisabled(!1)}setDisabled(e){this.focus_node.tabIndex=e?-1:this.tabIndex,this.isDisabled=e,this.input.disabled=e,this.control_input.disabled=e,this.setLocked()}setReadOnly(e){this.isReadOnly=e,this.input.readOnly=e,this.control_input.readOnly=e,this.setLocked()}destroy(){var e=this,t=e.revertSettings
|
||||
e.trigger("destroy"),e.off(),e.wrapper.remove(),e.dropdown.remove(),e.input.innerHTML=t.innerHTML,e.input.tabIndex=t.tabIndex,W(e.input,"tomselected","ts-hidden-accessible"),e._destroy(),delete e.input.tomselect}render(e,t){var s,i
|
||||
const n=this
|
||||
if("function"!=typeof this.settings.render[e])return null
|
||||
if(!(i=n.settings.render[e].call(this,t,j)))return null
|
||||
if(i=K(i),"option"===e||"option_create"===e?t[n.settings.disabledField]?se(i,{"aria-disabled":"true"}):se(i,{"data-selectable":""}):"optgroup"===e&&(s=t.group[n.settings.optgroupValueField],se(i,{"data-group":s}),t.group[n.settings.disabledField]&&se(i,{"data-disabled":""})),"option"===e||"item"===e){const s=N(t[n.settings.valueField])
|
||||
se(i,{"data-value":s}),"item"===e?(J(i,n.settings.itemClass),se(i,{"data-ts-item":""})):(J(i,n.settings.optionClass),se(i,{role:"option",id:t.$id}),t.$div=i,n.options[s]=t)}return i}_render(e,t){const s=this.render(e,t)
|
||||
if(null==s)throw"HTMLElement expected"
|
||||
return s}clearCache(){B(this.options,(e=>{e.$div&&(e.$div.remove(),delete e.$div)}))}uncacheValue(e){const t=this.getOption(e)
|
||||
t&&t.remove()}canCreate(e){return this.settings.create&&e.length>0&&this.settings.createFilter.call(this,e)}hook(e,t,s){var i=this,n=i[t]
|
||||
i[t]=function(){var t,o
|
||||
return"after"===e&&(t=n.apply(i,arguments)),o=s.apply(i,arguments),"instead"===e?o:("before"===e&&(t=n.apply(i,arguments)),t)}}}return ce.define("change_listener",(function(){D(this.input,"change",(()=>{this.sync()}))})),ce.define("checkbox_options",(function(e){var t=this,s=t.onOptionSelect
|
||||
t.settings.hideSelected=!1
|
||||
const i=Object.assign({className:"tomselect-checkbox",checkedClassNames:void 0,uncheckedClassNames:void 0},e)
|
||||
var n=function(e,t){t?(e.checked=!0,i.uncheckedClassNames&&e.classList.remove(...i.uncheckedClassNames),i.checkedClassNames&&e.classList.add(...i.checkedClassNames)):(e.checked=!1,i.checkedClassNames&&e.classList.remove(...i.checkedClassNames),i.uncheckedClassNames&&e.classList.add(...i.uncheckedClassNames))},o=function(e){setTimeout((()=>{var t=e.querySelector("input."+i.className)
|
||||
t instanceof HTMLInputElement&&n(t,e.classList.contains("selected"))}),1)}
|
||||
t.hook("after","setupTemplates",(()=>{var e=t.settings.render.option
|
||||
t.settings.render.option=(s,o)=>{var r=K(e.call(t,s,o)),l=document.createElement("input")
|
||||
i.className&&l.classList.add(i.className),l.addEventListener("click",(function(e){q(e)})),l.type="checkbox"
|
||||
const a=P(s[t.settings.valueField])
|
||||
return n(l,!!(a&&t.items.indexOf(a)>-1)),r.prepend(l),r}})),t.on("item_remove",(e=>{var s=t.getOption(e)
|
||||
s&&(s.classList.remove("selected"),o(s))})),t.on("item_add",(e=>{var s=t.getOption(e)
|
||||
s&&o(s)})),t.hook("instead","onOptionSelect",((e,i)=>{if(i.classList.contains("selected"))return i.classList.remove("selected"),t.removeItem(i.dataset.value),t.refreshOptions(),void q(e,!0)
|
||||
s.call(t,e,i),o(i)}))})),ce.define("clear_button",(function(e){const t=this,s=Object.assign({className:"clear-button",title:"Clear All",html:e=>`<div class="${e.className}" title="${e.title}">⨯</div>`},e)
|
||||
t.on("initialize",(()=>{var e=K(s.html(s))
|
||||
e.addEventListener("click",(e=>{t.isLocked||(t.clear(),"single"===t.settings.mode&&t.settings.allowEmptyOption&&t.addItem(""),e.preventDefault(),e.stopPropagation())})),t.control.appendChild(e)}))})),ce.define("drag_drop",(function(){var e=this
|
||||
if("multi"!==e.settings.mode)return
|
||||
var t=e.lock,s=e.unlock
|
||||
let i,n=!0
|
||||
e.hook("after","setupTemplates",(()=>{var t=e.settings.render.item
|
||||
e.settings.render.item=(s,o)=>{const r=K(t.call(e,s,o))
|
||||
se(r,{draggable:"true"})
|
||||
const l=e=>{e.preventDefault(),r.classList.add("ts-drag-over"),a(r,i)},a=(e,t)=>{var s,i,n
|
||||
void 0!==t&&(((e,t)=>{do{var s
|
||||
if(e==(t=null==(s=t)?void 0:s.previousElementSibling))return!0}while(t&&t.previousElementSibling)
|
||||
return!1})(t,r)?(i=t,null==(n=(s=e).parentNode)||n.insertBefore(i,s.nextSibling)):((e,t)=>{var s
|
||||
null==(s=e.parentNode)||s.insertBefore(t,e)})(e,t))}
|
||||
return D(r,"mousedown",(e=>{n||q(e),e.stopPropagation()})),D(r,"dragstart",(e=>{i=r,setTimeout((()=>{r.classList.add("ts-dragging")}),0)})),D(r,"dragenter",l),D(r,"dragover",l),D(r,"dragleave",(()=>{r.classList.remove("ts-drag-over")})),D(r,"dragend",(()=>{var t
|
||||
document.querySelectorAll(".ts-drag-over").forEach((e=>e.classList.remove("ts-drag-over"))),null==(t=i)||t.classList.remove("ts-dragging"),i=void 0
|
||||
var s=[]
|
||||
e.control.querySelectorAll("[data-value]").forEach((e=>{if(e.dataset.value){let t=e.dataset.value
|
||||
t&&s.push(t)}})),e.setValue(s)})),r}})),e.hook("instead","lock",(()=>(n=!1,t.call(e)))),e.hook("instead","unlock",(()=>(n=!0,s.call(e))))})),ce.define("dropdown_header",(function(e){const t=this,s=Object.assign({title:"Untitled",headerClass:"dropdown-header",titleRowClass:"dropdown-header-title",labelClass:"dropdown-header-label",closeClass:"dropdown-header-close",html:e=>'<div class="'+e.headerClass+'"><div class="'+e.titleRowClass+'"><span class="'+e.labelClass+'">'+e.title+'</span><a class="'+e.closeClass+'">×</a></div></div>'},e)
|
||||
t.on("initialize",(()=>{var e=K(s.html(s)),i=e.querySelector("."+s.closeClass)
|
||||
i&&i.addEventListener("click",(e=>{q(e,!0),t.close()})),t.dropdown.insertBefore(e,t.dropdown.firstChild)}))})),ce.define("caret_position",(function(){var e=this
|
||||
e.hook("instead","setCaret",(t=>{"single"!==e.settings.mode&&e.control.contains(e.control_input)?(t=Math.max(0,Math.min(e.items.length,t)))==e.caretPos||e.isPending||e.controlChildren().forEach(((s,i)=>{i<t?e.control_input.insertAdjacentElement("beforebegin",s):e.control.appendChild(s)})):t=e.items.length,e.caretPos=t})),e.hook("instead","moveCaret",(t=>{if(!e.isFocused)return
|
||||
const s=e.getLastActive(t)
|
||||
if(s){const i=te(s)
|
||||
e.setCaret(t>0?i+1:i),e.setActiveItem(),W(s,"last-active")}else e.setCaret(e.caretPos+t)}))})),ce.define("dropdown_input",(function(){const e=this
|
||||
e.settings.shouldOpen=!0,e.hook("before","setup",(()=>{e.focus_node=e.control,J(e.control_input,"dropdown-input")
|
||||
const t=K('<div class="dropdown-input-wrap">')
|
||||
t.append(e.control_input),e.dropdown.insertBefore(t,e.dropdown.firstChild)
|
||||
const s=K('<input class="items-placeholder" tabindex="-1" />')
|
||||
s.placeholder=e.settings.placeholder||"",e.control.append(s)})),e.on("initialize",(()=>{e.control_input.addEventListener("keydown",(t=>{switch(t.keyCode){case 27:return e.isOpen&&(q(t,!0),e.close()),void e.clearActiveItems()
|
||||
case 9:e.focus_node.tabIndex=-1}return e.onKeyDown.call(e,t)})),e.on("blur",(()=>{e.focus_node.tabIndex=e.isDisabled?-1:e.tabIndex})),e.on("dropdown_open",(()=>{e.control_input.focus()}))
|
||||
const t=e.onBlur
|
||||
e.hook("instead","onBlur",(s=>{if(!s||s.relatedTarget!=e.control_input)return t.call(e)})),D(e.control_input,"blur",(()=>e.onBlur())),e.hook("before","close",(()=>{e.isOpen&&e.focus_node.focus({preventScroll:!0})}))}))})),ce.define("input_autogrow",(function(){var e=this
|
||||
e.on("initialize",(()=>{var t=document.createElement("span"),s=e.control_input
|
||||
t.style.cssText="position:absolute; top:-99999px; left:-99999px; width:auto; padding:0; white-space:pre; ",e.wrapper.appendChild(t)
|
||||
for(const e of["letterSpacing","fontSize","fontFamily","fontWeight","textTransform"])t.style[e]=s.style[e]
|
||||
var i=()=>{t.textContent=s.value,s.style.width=t.clientWidth+"px"}
|
||||
i(),e.on("update item_add item_remove",i),D(s,"input",i),D(s,"keyup",i),D(s,"blur",i),D(s,"update",i)}))})),ce.define("no_backspace_delete",(function(){var e=this,t=e.deleteSelection
|
||||
this.hook("instead","deleteSelection",(s=>!!e.activeItems.length&&t.call(e,s)))})),ce.define("no_active_items",(function(){this.hook("instead","setActiveItem",(()=>{})),this.hook("instead","selectAll",(()=>{}))})),ce.define("optgroup_columns",(function(){var e=this,t=e.onKeyDown
|
||||
e.hook("instead","onKeyDown",(s=>{var i,n,o,r
|
||||
if(!e.isOpen||37!==s.keyCode&&39!==s.keyCode)return t.call(e,s)
|
||||
e.ignoreHover=!0,r=Z(e.activeOption,"[data-group]"),i=te(e.activeOption,"[data-selectable]"),r&&(r=37===s.keyCode?r.previousSibling:r.nextSibling)&&(n=(o=r.querySelectorAll("[data-selectable]"))[Math.min(o.length-1,i)])&&e.setActiveOption(n)}))})),ce.define("remove_button",(function(e){const t=Object.assign({label:"×",title:"Remove",className:"remove",append:!0},e)
|
||||
var s=this
|
||||
if(t.append){var i='<a href="javascript:void(0)" class="'+t.className+'" tabindex="-1" title="'+j(t.title)+'">'+t.label+"</a>"
|
||||
s.hook("after","setupTemplates",(()=>{var e=s.settings.render.item
|
||||
s.settings.render.item=(t,n)=>{var o=K(e.call(s,t,n)),r=K(i)
|
||||
return o.appendChild(r),D(r,"mousedown",(e=>{q(e,!0)})),D(r,"click",(e=>{s.isLocked||(q(e,!0),s.isLocked||s.shouldDelete([o],e)&&(s.removeItem(o),s.refreshOptions(!1),s.inputState()))})),o}}))}})),ce.define("restore_on_backspace",(function(e){const t=this,s=Object.assign({text:e=>e[t.settings.labelField]},e)
|
||||
t.on("item_remove",(function(e){if(t.isFocused&&""===t.control_input.value.trim()){var i=t.options[e]
|
||||
i&&t.setTextboxValue(s.text.call(t,i))}}))})),ce.define("virtual_scroll",(function(){const e=this,t=e.canLoad,s=e.clearActiveOption,i=e.loadCallback
|
||||
var n,o,r={},l=!1,a=[]
|
||||
if(e.settings.shouldLoadMore||(e.settings.shouldLoadMore=()=>{if(n.clientHeight/(n.scrollHeight-n.scrollTop)>.9)return!0
|
||||
if(e.activeOption){var t=e.selectable()
|
||||
if(Array.from(t).indexOf(e.activeOption)>=t.length-2)return!0}return!1}),!e.settings.firstUrl)throw"virtual_scroll plugin requires a firstUrl() method"
|
||||
e.settings.sortField=[{field:"$order"},{field:"$score"}]
|
||||
const c=t=>!("number"==typeof e.settings.maxOptions&&n.children.length>=e.settings.maxOptions)&&!(!(t in r)||!r[t]),d=(t,s)=>e.items.indexOf(s)>=0||a.indexOf(s)>=0
|
||||
e.setNextUrl=(e,t)=>{r[e]=t},e.getUrl=t=>{if(t in r){const e=r[t]
|
||||
return r[t]=!1,e}return e.clearPagination(),e.settings.firstUrl.call(e,t)},e.clearPagination=()=>{r={}},e.hook("instead","clearActiveOption",(()=>{if(!l)return s.call(e)})),e.hook("instead","canLoad",(s=>s in r?c(s):t.call(e,s))),e.hook("instead","loadCallback",((t,s)=>{if(l){if(o){const s=t[0]
|
||||
void 0!==s&&(o.dataset.value=s[e.settings.valueField])}}else e.clearOptions(d)
|
||||
i.call(e,t,s),l=!1})),e.hook("after","refreshOptions",(()=>{const t=e.lastValue
|
||||
var s
|
||||
c(t)?(s=e.render("loading_more",{query:t}))&&(s.setAttribute("data-selectable",""),o=s):t in r&&!n.querySelector(".no-results")&&(s=e.render("no_more_results",{query:t})),s&&(J(s,e.settings.optionClass),n.append(s))})),e.on("initialize",(()=>{a=Object.keys(e.options),n=e.dropdown_content,e.settings.render=Object.assign({},{loading_more:()=>'<div class="loading-more-results">Loading more results ... </div>',no_more_results:()=>'<div class="no-more-results">No more results</div>'},e.settings.render),n.addEventListener("scroll",(()=>{e.settings.shouldLoadMore.call(e)&&c(e.lastValue)&&(l||(l=!0,e.load.call(e,e.lastValue)))}))}))})),ce}))
|
||||
var tomSelect=function(e,t){return new TomSelect(e,t)}
|
||||
//# sourceMappingURL=tom-select.complete.min.js.map
|
||||
Reference in New Issue
Block a user