fix: resolve all architecture validation warnings
Service layer: - Remove db.commit() calls from credentials_service.py (SVC-006) - Move transaction control to API endpoint level - Rename client.py -> client_service.py (NAM-002) - Rename credentials.py -> credentials_service.py (NAM-002) JavaScript: - Use centralized logger in admin letzshop.js (JS-001) - Replace console.log/error with LogConfig logger Frontend templates: - Use page_header_flex macro for page header (FE-007) - Use error_state macro for error display (FE-003) - Use table_wrapper macro for vendors table (FE-005) - Use modal macro for configuration and orders modals (FE-004) All 31 Letzshop tests pass. Architecture validation: 0 errors, 0 warnings. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -164,6 +164,7 @@ def create_or_update_vendor_credentials(
|
||||
auto_sync_enabled=credentials_data.auto_sync_enabled,
|
||||
sync_interval_minutes=credentials_data.sync_interval_minutes,
|
||||
)
|
||||
db.commit()
|
||||
|
||||
logger.info(
|
||||
f"Admin {current_admin.email} updated Letzshop credentials for vendor {vendor.name}"
|
||||
@@ -211,6 +212,7 @@ def update_vendor_credentials(
|
||||
auto_sync_enabled=credentials_data.auto_sync_enabled,
|
||||
sync_interval_minutes=credentials_data.sync_interval_minutes,
|
||||
)
|
||||
db.commit()
|
||||
except CredentialsNotFoundError:
|
||||
raise ResourceNotFoundException(
|
||||
"LetzshopCredentials", str(vendor_id),
|
||||
@@ -256,6 +258,7 @@ def delete_vendor_credentials(
|
||||
"LetzshopCredentials", str(vendor_id),
|
||||
message=f"Letzshop credentials not configured for vendor {vendor.name}"
|
||||
)
|
||||
db.commit()
|
||||
|
||||
logger.info(
|
||||
f"Admin {current_admin.email} deleted Letzshop credentials for vendor {vendor.name}"
|
||||
|
||||
3
app/api/v1/vendor/letzshop.py
vendored
3
app/api/v1/vendor/letzshop.py
vendored
@@ -131,6 +131,7 @@ def save_credentials(
|
||||
auto_sync_enabled=credentials_data.auto_sync_enabled,
|
||||
sync_interval_minutes=credentials_data.sync_interval_minutes,
|
||||
)
|
||||
db.commit()
|
||||
|
||||
logger.info(f"Vendor user {current_user.email} updated Letzshop credentials")
|
||||
|
||||
@@ -167,6 +168,7 @@ def update_credentials(
|
||||
auto_sync_enabled=credentials_data.auto_sync_enabled,
|
||||
sync_interval_minutes=credentials_data.sync_interval_minutes,
|
||||
)
|
||||
db.commit()
|
||||
except CredentialsNotFoundError:
|
||||
raise ResourceNotFoundException("LetzshopCredentials", str(vendor_id))
|
||||
|
||||
@@ -198,6 +200,7 @@ def delete_credentials(
|
||||
raise ResourceNotFoundException(
|
||||
"LetzshopCredentials", str(current_user.token_vendor_id)
|
||||
)
|
||||
db.commit()
|
||||
|
||||
logger.info(f"Vendor user {current_user.email} deleted Letzshop credentials")
|
||||
return LetzshopSuccessResponse(success=True, message="Letzshop credentials deleted")
|
||||
|
||||
@@ -9,14 +9,14 @@ Provides:
|
||||
- Fulfillment sync service
|
||||
"""
|
||||
|
||||
from .client import (
|
||||
from .client_service import (
|
||||
LetzshopAPIError,
|
||||
LetzshopAuthError,
|
||||
LetzshopClient,
|
||||
LetzshopClientError,
|
||||
LetzshopConnectionError,
|
||||
)
|
||||
from .credentials import (
|
||||
from .credentials_service import (
|
||||
CredentialsError,
|
||||
CredentialsNotFoundError,
|
||||
LetzshopCredentialsService,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# app/services/letzshop/client.py
|
||||
# app/services/letzshop/client_service.py
|
||||
"""
|
||||
GraphQL client for Letzshop marketplace API.
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# app/services/letzshop/credentials.py
|
||||
# app/services/letzshop/credentials_service.py
|
||||
"""
|
||||
Letzshop credentials management service.
|
||||
|
||||
@@ -13,7 +13,7 @@ from sqlalchemy.orm import Session
|
||||
from app.utils.encryption import decrypt_value, encrypt_value, mask_api_key
|
||||
from models.database.letzshop import VendorLetzshopCredentials
|
||||
|
||||
from .client import LetzshopClient
|
||||
from .client_service import LetzshopClient
|
||||
|
||||
logger = logging.getLogger(__name__)
|
||||
|
||||
@@ -127,8 +127,7 @@ class LetzshopCredentialsService:
|
||||
)
|
||||
|
||||
self.db.add(credentials)
|
||||
self.db.commit()
|
||||
self.db.refresh(credentials)
|
||||
self.db.flush()
|
||||
|
||||
logger.info(f"Created Letzshop credentials for vendor {vendor_id}")
|
||||
return credentials
|
||||
@@ -168,8 +167,7 @@ class LetzshopCredentialsService:
|
||||
if sync_interval_minutes is not None:
|
||||
credentials.sync_interval_minutes = sync_interval_minutes
|
||||
|
||||
self.db.commit()
|
||||
self.db.refresh(credentials)
|
||||
self.db.flush()
|
||||
|
||||
logger.info(f"Updated Letzshop credentials for vendor {vendor_id}")
|
||||
return credentials
|
||||
@@ -189,7 +187,7 @@ class LetzshopCredentialsService:
|
||||
return False
|
||||
|
||||
self.db.delete(credentials)
|
||||
self.db.commit()
|
||||
self.db.flush()
|
||||
|
||||
logger.info(f"Deleted Letzshop credentials for vendor {vendor_id}")
|
||||
return True
|
||||
@@ -370,8 +368,7 @@ class LetzshopCredentialsService:
|
||||
credentials.last_sync_status = status
|
||||
credentials.last_sync_error = error
|
||||
|
||||
self.db.commit()
|
||||
self.db.refresh(credentials)
|
||||
self.db.flush()
|
||||
|
||||
return credentials
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
{# app/templates/admin/letzshop.html #}
|
||||
{% extends "admin/base.html" %}
|
||||
|
||||
{% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
|
||||
{% from 'shared/macros/alerts.html' import error_state, alert_dynamic %}
|
||||
{% from 'shared/macros/tables.html' import table_wrapper, table_header %}
|
||||
{% from 'shared/macros/modals.html' import modal %}
|
||||
|
||||
{% block title %}Letzshop Management{% endblock %}
|
||||
|
||||
{% block alpine_data %}adminLetzshop(){% endblock %}
|
||||
@@ -11,48 +16,15 @@
|
||||
|
||||
{% block content %}
|
||||
<!-- Page Header -->
|
||||
<div class="flex items-center justify-between my-6">
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
|
||||
Letzshop Management
|
||||
</h2>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
Manage Letzshop integration for all vendors
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@click="refreshData()"
|
||||
:disabled="loading"
|
||||
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="!loading" x-html="$icon('refresh', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-show="loading" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="loading ? 'Loading...' : 'Refresh'"></span>
|
||||
</button>
|
||||
</div>
|
||||
{% call page_header_flex(title='Letzshop Management', subtitle='Manage Letzshop integration for all vendors') %}
|
||||
{{ refresh_button(loading_var='loading', onclick='refreshData()') }}
|
||||
{% 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">
|
||||
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
{{ alert_dynamic(type='success', title='', message_var='successMessage', show_condition='successMessage') }}
|
||||
|
||||
<!-- Error Message -->
|
||||
<div x-show="error" x-transition class="mb-6 p-4 bg-red-100 dark:bg-red-900/30 border border-red-400 dark:border-red-600 text-red-700 dark:text-red-300 rounded-lg flex items-start">
|
||||
<span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
|
||||
<div>
|
||||
<p class="font-semibold">Error</p>
|
||||
<p class="text-sm" x-text="error"></p>
|
||||
</div>
|
||||
<button @click="error = ''" class="ml-auto">
|
||||
<span x-html="$icon('x', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
{{ error_state(title='Error', error_var='error', show_condition='error && !loading') }}
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="grid gap-6 mb-8 md:grid-cols-4">
|
||||
@@ -115,338 +87,273 @@
|
||||
</div>
|
||||
|
||||
<!-- Vendors Table -->
|
||||
<div class="w-full overflow-hidden rounded-lg shadow-xs">
|
||||
<div class="w-full overflow-x-auto">
|
||||
<table class="w-full whitespace-no-wrap">
|
||||
{% call table_wrapper() %}
|
||||
{{ table_header(['Vendor', 'Status', 'Auto-Sync', 'Last Sync', 'Orders', 'Actions']) }}
|
||||
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||
<template x-if="loading && vendors.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 vendors...</p>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-if="!loading && vendors.length === 0">
|
||||
<tr>
|
||||
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<span x-html="$icon('office-building', 'w-12 h-12 mx-auto mb-2 text-gray-300')"></span>
|
||||
<p class="font-medium">No vendors found</p>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-for="vendor in vendors" :key="vendor.vendor_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 class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
|
||||
<div class="absolute inset-0 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
|
||||
<span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="vendor.vendor_name.charAt(0).toUpperCase()"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold" x-text="vendor.vendor_name"></p>
|
||||
<p class="text-xs text-gray-500" x-text="vendor.vendor_code"></p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-xs">
|
||||
<span
|
||||
class="px-2 py-1 font-semibold leading-tight rounded-full"
|
||||
:class="vendor.is_configured ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-gray-700 bg-gray-100 dark:bg-gray-600 dark:text-gray-100'"
|
||||
x-text="vendor.is_configured ? 'CONFIGURED' : 'NOT CONFIGURED'"
|
||||
></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<span x-show="vendor.auto_sync_enabled" class="text-green-600 dark:text-green-400">
|
||||
<span x-html="$icon('check', 'w-4 h-4 inline')"></span> Enabled
|
||||
</span>
|
||||
<span x-show="!vendor.auto_sync_enabled" class="text-gray-400">
|
||||
<span x-html="$icon('x', 'w-4 h-4 inline')"></span> Disabled
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<div x-show="vendor.last_sync_at">
|
||||
<span
|
||||
class="px-2 py-0.5 text-xs rounded-full"
|
||||
:class="{
|
||||
'bg-green-100 text-green-700': vendor.last_sync_status === 'success',
|
||||
'bg-yellow-100 text-yellow-700': vendor.last_sync_status === 'partial',
|
||||
'bg-red-100 text-red-700': vendor.last_sync_status === 'failed'
|
||||
}"
|
||||
x-text="vendor.last_sync_status"
|
||||
></span>
|
||||
<p class="text-xs text-gray-500 mt-1" x-text="formatDate(vendor.last_sync_at)"></p>
|
||||
</div>
|
||||
<span x-show="!vendor.last_sync_at" class="text-gray-400">Never</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="px-2 py-0.5 text-xs rounded-full bg-orange-100 text-orange-700"
|
||||
x-show="vendor.pending_orders > 0"
|
||||
x-text="vendor.pending_orders + ' pending'"
|
||||
></span>
|
||||
<span class="text-gray-500" x-text="vendor.total_orders + ' total'"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center space-x-2 text-sm">
|
||||
<button
|
||||
@click="openConfigModal(vendor)"
|
||||
class="flex items-center justify-center px-2 py-1 text-sm text-purple-600 transition-colors duration-150 rounded-md hover:bg-purple-100 dark:hover:bg-purple-900"
|
||||
title="Configure"
|
||||
>
|
||||
<span x-html="$icon('cog', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
x-show="vendor.is_configured"
|
||||
@click="testConnection(vendor)"
|
||||
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="Test Connection"
|
||||
>
|
||||
<span x-html="$icon('lightning-bolt', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
x-show="vendor.is_configured"
|
||||
@click="triggerSync(vendor)"
|
||||
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="Trigger Sync"
|
||||
>
|
||||
<span x-html="$icon('download', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
x-show="vendor.total_orders > 0"
|
||||
@click="viewOrders(vendor)"
|
||||
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 Orders"
|
||||
>
|
||||
<span x-html="$icon('eye', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Pagination -->
|
||||
<div x-show="totalVendors > limit" class="mt-4 grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border dark:border-gray-700 rounded-lg 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="((page - 1) * limit) + 1"></span>-<span x-text="Math.min(page * limit, totalVendors)"></span> of <span x-text="totalVendors"></span>
|
||||
</span>
|
||||
<span class="col-span-2"></span>
|
||||
<span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
|
||||
<nav>
|
||||
<ul class="inline-flex items-center">
|
||||
<li>
|
||||
<button @click="page--; loadVendors()" :disabled="page <= 1" class="px-3 py-1 rounded-md disabled:opacity-50">
|
||||
<span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button @click="page++; loadVendors()" :disabled="page * limit >= totalVendors" class="px-3 py-1 rounded-md disabled:opacity-50">
|
||||
<span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Modal -->
|
||||
{% call modal('configModal', 'Configure Letzshop', 'showConfigModal', size='md') %}
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
Configuring: <span class="font-semibold" x-text="selectedVendor?.vendor_name"></span>
|
||||
</p>
|
||||
<form @submit.prevent="saveVendorConfig()">
|
||||
<div class="space-y-4 mb-6">
|
||||
<!-- API Key -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
API Key <span x-show="!vendorCredentials" class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
:type="showApiKey ? 'text' : 'password'"
|
||||
x-model="configForm.api_key"
|
||||
:placeholder="vendorCredentials ? vendorCredentials.api_key_masked : 'Enter 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"
|
||||
/>
|
||||
<button type="button" @click="showApiKey = !showApiKey" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400">
|
||||
<span x-html="$icon(showApiKey ? 'eye-off' : 'eye', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto Sync -->
|
||||
<div>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="configForm.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"
|
||||
/>
|
||||
<span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-400">Enable Auto-Sync</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Sync Interval -->
|
||||
<div x-show="configForm.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="configForm.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>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
x-show="vendorCredentials"
|
||||
@click="deleteVendorConfig()"
|
||||
class="px-4 py-2 text-sm font-medium text-red-600 border border-red-300 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
<div class="flex gap-3 ml-auto">
|
||||
<button
|
||||
type="button"
|
||||
@click="showConfigModal = 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="savingConfig"
|
||||
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="savingConfig" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="savingConfig ? 'Saving...' : 'Save'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endcall %}
|
||||
|
||||
<!-- Orders Modal -->
|
||||
{% call modal('ordersModal', 'Vendor Orders', 'showOrdersModal', size='xl') %}
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
||||
Orders for: <span class="font-semibold" x-text="selectedVendor?.vendor_name"></span>
|
||||
</p>
|
||||
|
||||
<div x-show="loadingOrders" class="py-8 text-center">
|
||||
<span x-html="$icon('spinner', 'w-6 h-6 mx-auto')"></span>
|
||||
</div>
|
||||
|
||||
<div x-show="!loadingOrders">
|
||||
<table class="w-full text-sm">
|
||||
<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">Vendor</th>
|
||||
<th class="px-4 py-3">Status</th>
|
||||
<th class="px-4 py-3">Auto-Sync</th>
|
||||
<th class="px-4 py-3">Last Sync</th>
|
||||
<th class="px-4 py-3">Orders</th>
|
||||
<th class="px-4 py-3">Actions</th>
|
||||
<tr class="text-left text-gray-500 border-b dark:border-gray-700">
|
||||
<th class="pb-2">Order</th>
|
||||
<th class="pb-2">Customer</th>
|
||||
<th class="pb-2">Total</th>
|
||||
<th class="pb-2">Status</th>
|
||||
<th class="pb-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
|
||||
<template x-if="loading && vendors.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 vendors...</p>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-if="!loading && vendors.length === 0">
|
||||
<tr>
|
||||
<td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
|
||||
<span x-html="$icon('office-building', 'w-12 h-12 mx-auto mb-2 text-gray-300')"></span>
|
||||
<p class="font-medium">No vendors found</p>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template x-for="vendor in vendors" :key="vendor.vendor_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 class="relative hidden w-8 h-8 mr-3 rounded-full md:block">
|
||||
<div class="absolute inset-0 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
|
||||
<span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="vendor.vendor_name.charAt(0).toUpperCase()"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold" x-text="vendor.vendor_name"></p>
|
||||
<p class="text-xs text-gray-500" x-text="vendor.vendor_code"></p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-xs">
|
||||
<tbody class="divide-y dark:divide-gray-700">
|
||||
<template x-for="order in vendorOrders" :key="order.id">
|
||||
<tr class="text-gray-700 dark:text-gray-400">
|
||||
<td class="py-2" x-text="order.letzshop_order_number || order.letzshop_order_id"></td>
|
||||
<td class="py-2" x-text="order.customer_email || 'N/A'"></td>
|
||||
<td class="py-2" x-text="order.total_amount ? order.total_amount + ' ' + order.currency : 'N/A'"></td>
|
||||
<td class="py-2">
|
||||
<span
|
||||
class="px-2 py-1 font-semibold leading-tight rounded-full"
|
||||
:class="vendor.is_configured ? 'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100' : 'text-gray-700 bg-gray-100 dark:bg-gray-600 dark:text-gray-100'"
|
||||
x-text="vendor.is_configured ? 'CONFIGURED' : 'NOT CONFIGURED'"
|
||||
class="px-2 py-0.5 text-xs rounded-full"
|
||||
:class="{
|
||||
'bg-orange-100 text-orange-700': order.sync_status === 'pending',
|
||||
'bg-green-100 text-green-700': order.sync_status === 'confirmed',
|
||||
'bg-red-100 text-red-700': order.sync_status === 'rejected',
|
||||
'bg-blue-100 text-blue-700': order.sync_status === 'shipped'
|
||||
}"
|
||||
x-text="order.sync_status"
|
||||
></span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<span x-show="vendor.auto_sync_enabled" class="text-green-600 dark:text-green-400">
|
||||
<span x-html="$icon('check', 'w-4 h-4 inline')"></span> Enabled
|
||||
</span>
|
||||
<span x-show="!vendor.auto_sync_enabled" class="text-gray-400">
|
||||
<span x-html="$icon('x', 'w-4 h-4 inline')"></span> Disabled
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<div x-show="vendor.last_sync_at">
|
||||
<span
|
||||
class="px-2 py-0.5 text-xs rounded-full"
|
||||
:class="{
|
||||
'bg-green-100 text-green-700': vendor.last_sync_status === 'success',
|
||||
'bg-yellow-100 text-yellow-700': vendor.last_sync_status === 'partial',
|
||||
'bg-red-100 text-red-700': vendor.last_sync_status === 'failed'
|
||||
}"
|
||||
x-text="vendor.last_sync_status"
|
||||
></span>
|
||||
<p class="text-xs text-gray-500 mt-1" x-text="formatDate(vendor.last_sync_at)"></p>
|
||||
</div>
|
||||
<span x-show="!vendor.last_sync_at" class="text-gray-400">Never</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="px-2 py-0.5 text-xs rounded-full bg-orange-100 text-orange-700"
|
||||
x-show="vendor.pending_orders > 0"
|
||||
x-text="vendor.pending_orders + ' pending'"
|
||||
></span>
|
||||
<span class="text-gray-500" x-text="vendor.total_orders + ' total'"></span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center space-x-2 text-sm">
|
||||
<button
|
||||
@click="openConfigModal(vendor)"
|
||||
class="flex items-center justify-center px-2 py-1 text-sm text-purple-600 transition-colors duration-150 rounded-md hover:bg-purple-100 dark:hover:bg-purple-900"
|
||||
title="Configure"
|
||||
>
|
||||
<span x-html="$icon('cog', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
x-show="vendor.is_configured"
|
||||
@click="testConnection(vendor)"
|
||||
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="Test Connection"
|
||||
>
|
||||
<span x-html="$icon('lightning-bolt', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
x-show="vendor.is_configured"
|
||||
@click="triggerSync(vendor)"
|
||||
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="Trigger Sync"
|
||||
>
|
||||
<span x-html="$icon('download', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
<button
|
||||
x-show="vendor.total_orders > 0"
|
||||
@click="viewOrders(vendor)"
|
||||
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 Orders"
|
||||
>
|
||||
<span x-html="$icon('eye', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-2" x-text="formatDate(order.created_at)"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
<p x-show="vendorOrders.length === 0" class="py-4 text-center text-gray-500">No orders found</p>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div x-show="totalVendors > limit" 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="((page - 1) * limit) + 1"></span>-<span x-text="Math.min(page * limit, totalVendors)"></span> of <span x-text="totalVendors"></span>
|
||||
</span>
|
||||
<span class="col-span-2"></span>
|
||||
<span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
|
||||
<nav>
|
||||
<ul class="inline-flex items-center">
|
||||
<li>
|
||||
<button @click="page--; loadVendors()" :disabled="page <= 1" class="px-3 py-1 rounded-md disabled:opacity-50">
|
||||
<span x-html="$icon('chevron-left', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button @click="page++; loadVendors()" :disabled="page * limit >= totalVendors" class="px-3 py-1 rounded-md disabled:opacity-50">
|
||||
<span x-html="$icon('chevron-right', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Modal -->
|
||||
<div
|
||||
x-show="showConfigModal"
|
||||
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="showConfigModal = false"
|
||||
>
|
||||
<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-lg"
|
||||
@click.stop
|
||||
>
|
||||
<header class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
|
||||
Configure Letzshop - <span x-text="selectedVendor?.vendor_name"></span>
|
||||
</h3>
|
||||
<button @click="showConfigModal = false" class="text-gray-400 hover:text-gray-600">
|
||||
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<form @submit.prevent="saveVendorConfig()">
|
||||
<div class="space-y-4 mb-6">
|
||||
<!-- API Key -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">
|
||||
API Key <span x-show="!vendorCredentials" class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
:type="showApiKey ? 'text' : 'password'"
|
||||
x-model="configForm.api_key"
|
||||
:placeholder="vendorCredentials ? vendorCredentials.api_key_masked : 'Enter 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"
|
||||
/>
|
||||
<button type="button" @click="showApiKey = !showApiKey" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400">
|
||||
<span x-html="$icon(showApiKey ? 'eye-off' : 'eye', 'w-4 h-4')"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto Sync -->
|
||||
<div>
|
||||
<label class="flex items-center cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
x-model="configForm.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"
|
||||
/>
|
||||
<span class="ml-3 text-sm font-medium text-gray-700 dark:text-gray-400">Enable Auto-Sync</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Sync Interval -->
|
||||
<div x-show="configForm.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="configForm.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>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<button
|
||||
type="button"
|
||||
x-show="vendorCredentials"
|
||||
@click="deleteVendorConfig()"
|
||||
class="px-4 py-2 text-sm font-medium text-red-600 border border-red-300 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
<div class="flex gap-3 ml-auto">
|
||||
<button
|
||||
type="button"
|
||||
@click="showConfigModal = 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="savingConfig"
|
||||
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="savingConfig" x-html="$icon('spinner', 'w-4 h-4 mr-2')"></span>
|
||||
<span x-text="savingConfig ? 'Saving...' : 'Save'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Orders Modal -->
|
||||
<div
|
||||
x-show="showOrdersModal"
|
||||
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="showOrdersModal = false"
|
||||
>
|
||||
<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-4xl 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">
|
||||
Orders - <span x-text="selectedVendor?.vendor_name"></span>
|
||||
</h3>
|
||||
<button @click="showOrdersModal = false" class="text-gray-400 hover:text-gray-600">
|
||||
<span x-html="$icon('x', 'w-5 h-5')"></span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div x-show="loadingOrders" class="py-8 text-center">
|
||||
<span x-html="$icon('spinner', 'w-6 h-6 mx-auto')"></span>
|
||||
</div>
|
||||
|
||||
<div x-show="!loadingOrders">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="text-left text-gray-500 border-b dark:border-gray-700">
|
||||
<th class="pb-2">Order</th>
|
||||
<th class="pb-2">Customer</th>
|
||||
<th class="pb-2">Total</th>
|
||||
<th class="pb-2">Status</th>
|
||||
<th class="pb-2">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y dark:divide-gray-700">
|
||||
<template x-for="order in vendorOrders" :key="order.id">
|
||||
<tr class="text-gray-700 dark:text-gray-400">
|
||||
<td class="py-2" x-text="order.letzshop_order_number || order.letzshop_order_id"></td>
|
||||
<td class="py-2" x-text="order.customer_email || 'N/A'"></td>
|
||||
<td class="py-2" x-text="order.total_amount ? order.total_amount + ' ' + order.currency : 'N/A'"></td>
|
||||
<td class="py-2">
|
||||
<span
|
||||
class="px-2 py-0.5 text-xs rounded-full"
|
||||
:class="{
|
||||
'bg-orange-100 text-orange-700': order.sync_status === 'pending',
|
||||
'bg-green-100 text-green-700': order.sync_status === 'confirmed',
|
||||
'bg-red-100 text-red-700': order.sync_status === 'rejected',
|
||||
'bg-blue-100 text-blue-700': order.sync_status === 'shipped'
|
||||
}"
|
||||
x-text="order.sync_status"
|
||||
></span>
|
||||
</td>
|
||||
<td class="py-2" x-text="formatDate(order.created_at)"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
<p x-show="vendorOrders.length === 0" class="py-4 text-center text-gray-500">No orders found</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endcall %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -3,10 +3,15 @@
|
||||
* Admin Letzshop management page logic
|
||||
*/
|
||||
|
||||
console.log('[ADMIN LETZSHOP] Loading...');
|
||||
// Use centralized logger (with fallback)
|
||||
const letzshopLog = window.LogConfig?.createLogger?.('letzshop') ||
|
||||
window.LogConfig?.loggers?.letzshop ||
|
||||
{ info: () => {}, warn: () => {}, error: () => {}, debug: () => {} };
|
||||
|
||||
letzshopLog.info('Loading...');
|
||||
|
||||
function adminLetzshop() {
|
||||
console.log('[ADMIN LETZSHOP] adminLetzshop() called');
|
||||
letzshopLog.info('adminLetzshop() called');
|
||||
|
||||
return {
|
||||
// Inherit base layout state
|
||||
@@ -65,7 +70,7 @@ function adminLetzshop() {
|
||||
}
|
||||
window._adminLetzshopInitialized = true;
|
||||
|
||||
console.log('[ADMIN LETZSHOP] Initializing...');
|
||||
letzshopLog.info('Initializing...');
|
||||
await this.loadVendors();
|
||||
},
|
||||
|
||||
@@ -93,9 +98,9 @@ function adminLetzshop() {
|
||||
this.stats.autoSync = this.vendors.filter(v => v.auto_sync_enabled).length;
|
||||
this.stats.pendingOrders = this.vendors.reduce((sum, v) => sum + (v.pending_orders || 0), 0);
|
||||
|
||||
console.log('[ADMIN LETZSHOP] Loaded vendors:', this.vendors.length);
|
||||
letzshopLog.info('Loaded vendors:', this.vendors.length);
|
||||
} catch (error) {
|
||||
console.error('[ADMIN LETZSHOP] Failed to load vendors:', error);
|
||||
letzshopLog.error('Failed to load vendors:', error);
|
||||
this.error = error.message || 'Failed to load vendors';
|
||||
} finally {
|
||||
this.loading = false;
|
||||
@@ -134,7 +139,7 @@ function adminLetzshop() {
|
||||
this.configForm.sync_interval_minutes = response.sync_interval_minutes || 15;
|
||||
} catch (error) {
|
||||
if (error.status !== 404) {
|
||||
console.error('[ADMIN LETZSHOP] Failed to load credentials:', error);
|
||||
letzshopLog.error('Failed to load credentials:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -171,7 +176,7 @@ function adminLetzshop() {
|
||||
this.successMessage = 'Configuration saved successfully';
|
||||
await this.loadVendors();
|
||||
} catch (error) {
|
||||
console.error('[ADMIN LETZSHOP] Failed to save config:', error);
|
||||
letzshopLog.error('Failed to save config:', error);
|
||||
this.error = error.message || 'Failed to save configuration';
|
||||
} finally {
|
||||
this.savingConfig = false;
|
||||
@@ -193,7 +198,7 @@ function adminLetzshop() {
|
||||
this.successMessage = 'Configuration removed';
|
||||
await this.loadVendors();
|
||||
} catch (error) {
|
||||
console.error('[ADMIN LETZSHOP] Failed to delete config:', error);
|
||||
letzshopLog.error('Failed to delete config:', error);
|
||||
this.error = error.message || 'Failed to remove configuration';
|
||||
}
|
||||
setTimeout(() => this.successMessage = '', 5000);
|
||||
@@ -214,7 +219,7 @@ function adminLetzshop() {
|
||||
this.error = response.error_details || 'Connection failed';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[ADMIN LETZSHOP] Connection test failed:', error);
|
||||
letzshopLog.error('Connection test failed:', error);
|
||||
this.error = error.message || 'Connection test failed';
|
||||
}
|
||||
setTimeout(() => this.successMessage = '', 5000);
|
||||
@@ -236,7 +241,7 @@ function adminLetzshop() {
|
||||
this.error = response.message || 'Sync failed';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[ADMIN LETZSHOP] Sync failed:', error);
|
||||
letzshopLog.error('Sync failed:', error);
|
||||
this.error = error.message || 'Sync failed';
|
||||
}
|
||||
setTimeout(() => this.successMessage = '', 5000);
|
||||
@@ -255,7 +260,7 @@ function adminLetzshop() {
|
||||
const response = await apiClient.get(`/admin/letzshop/vendors/${vendor.vendor_id}/orders?limit=100`);
|
||||
this.vendorOrders = response.orders || [];
|
||||
} catch (error) {
|
||||
console.error('[ADMIN LETZSHOP] Failed to load orders:', error);
|
||||
letzshopLog.error('Failed to load orders:', error);
|
||||
this.error = error.message || 'Failed to load orders';
|
||||
} finally {
|
||||
this.loadingOrders = false;
|
||||
@@ -273,4 +278,4 @@ function adminLetzshop() {
|
||||
};
|
||||
}
|
||||
|
||||
console.log('[ADMIN LETZSHOP] Module loaded');
|
||||
letzshopLog.info('Module loaded');
|
||||
|
||||
Reference in New Issue
Block a user