-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
- ![]()
-
-
-
-
- {{ option.pagetitle }}
-
-
-
-
- ![]()
-
-
- {{ selectedProduct.pagetitle }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ formatPrice(newProductCost) }}
-
-
-
-
-
-
-
-
-
+ :duplicate-customer="duplicateCustomer"
+ :cancel-duplicate-dialog="cancelDuplicateDialog"
+ :use-duplicate-customer="useDuplicateCustomer"
+ :create-new-customer-anyway="createNewCustomerAnyway"
+ />
-
-
-
- {{ _('ms3_customer_duplicate_message') }}
-
-
-
- {{ _('customer_name') }}:
- {{ duplicateCustomer.first_name }} {{ duplicateCustomer.last_name }}
-
-
- Email:
- {{ duplicateCustomer.email }}
-
-
- {{ _('phone') }}:
- {{ duplicateCustomer.phone }}
-
-
- {{ _('orders') }}:
- {{ duplicateCustomer.orders_count }}
-
-
@@ -2239,279 +244,7 @@ onMounted(async () => {
text-align: center;
}
-/* Dialog / header utilities (tab-specific layout lives in components/order/) */
-.field {
- margin-bottom: 0;
-}
-
.mb-3 {
margin-bottom: 1rem;
}
-
-.w-full {
- width: 100%;
-}
-
-/* Edit product dialog styles */
-.edit-product-form .field label {
- display: block;
- margin-bottom: 0.5rem;
- font-weight: 500;
- color: var(--ms3-text-muted);
- font-size: 0.875rem;
-}
-
-.product-name-display {
- font-size: 1rem;
- font-weight: 500;
- color: var(--ms3-text-darkest);
- padding: 0.5rem;
- background: var(--ms3-bg-slate);
- border-radius: 0.25rem;
-}
-
-.cost-display {
- font-size: 1.125rem;
- font-weight: 600;
- color: var(--ms3-text-success);
- padding: 0.5rem;
- background: var(--ms3-bg-success);
- border-radius: 0.25rem;
- text-align: right;
-}
-
-/* Options editing styles */
-.options-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 0.5rem;
-}
-
-.options-header label {
- margin-bottom: 0 !important;
-}
-
-.options-mode-switch {
- display: flex;
- gap: 0.25rem;
-}
-
-.options-table {
- border: var(--ms3-border-width) solid var(--ms3-border-color);
- border-radius: 0.375rem;
- padding: var(--ms3-spacing-3);
- background: var(--ms3-bg-slate);
-}
-
-.options-row {
- display: flex;
- gap: 0.5rem;
- margin-bottom: 0.5rem;
- align-items: flex-start;
-}
-
-.options-row:last-of-type {
- margin-bottom: var(--ms3-spacing-3);
-}
-
-.options-type-select {
- flex: 0 0 6.25rem;
- min-width: 6.25rem;
-}
-
-.options-key-input {
- flex: 0 0 7.5rem;
- min-width: 6.25rem;
-}
-
-.options-value-input {
- flex: 1;
- min-width: 0;
-}
-
-.options-json {
- border: var(--ms3-border-width) solid var(--ms3-border-color);
- border-radius: 0.375rem;
- padding: 0.5rem;
- background: var(--ms3-bg-slate);
-}
-
-.options-json-textarea {
- font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
- font-size: 0.875rem;
-}
-
-.options-json-textarea.p-invalid {
- border-color: var(--ms3-text-danger);
-}
-
-.p-error {
- color: var(--ms3-text-danger);
- font-size: 0.75rem;
- margin-top: 0.25rem;
- display: block;
-}
-
-/* Add Product Dialog styles */
-.add-product-form .field label {
- display: block;
- margin-bottom: 0.5rem;
- font-weight: 500;
- color: var(--ms3-text-muted);
- font-size: 0.875rem;
-}
-
-.selected-product-details {
- border: var(--ms3-border-width) solid var(--ms3-border-color);
- border-radius: 0.5rem;
- padding: 1rem;
- background: var(--ms3-bg-slate);
-}
-
-.selected-product-header {
- display: flex;
- align-items: center;
- gap: var(--ms3-spacing-3);
- padding-bottom: var(--ms3-spacing-3);
- border-bottom: var(--ms3-border-width) solid var(--ms3-border-color);
-}
-
-.selected-product-image {
- width: 3.125rem;
- height: 3.125rem;
- object-fit: cover;
- border-radius: 0.25rem;
- border: var(--ms3-border-width) solid var(--ms3-border-color);
-}
-
-.selected-product-name {
- font-weight: 600;
- font-size: 1rem;
- color: var(--ms3-text-darkest);
-}
-
-.calculated-cost {
- font-size: 1.125rem;
- font-weight: 600;
- color: var(--ms3-text-success);
- padding: 0.5rem;
- background: var(--ms3-bg-success);
- border-radius: 0.25rem;
- text-align: right;
-}
-
-/* Duplicate customer dialog */
-.duplicate-customer-dialog {
- display: flex;
- flex-direction: column;
- gap: 1rem;
-}
-
-.duplicate-warning {
- display: flex;
- align-items: flex-start;
- gap: var(--ms3-spacing-3);
- padding: 1rem;
- background: var(--ms3-bg-warning);
- border-radius: 0.5rem;
-}
-
-.duplicate-warning i {
- color: var(--ms3-text-warning-accent);
- font-size: 1.5rem;
- flex-shrink: 0;
-}
-
-.duplicate-warning p {
- margin: 0;
- color: var(--ms3-text-warning);
- font-size: 0.875rem;
-}
-
-.duplicate-customer-info {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- padding: 1rem;
- background: var(--ms3-bg-slate);
- border-radius: 0.5rem;
-}
-
-.duplicate-customer-info .info-row {
- display: flex;
- gap: 0.5rem;
-}
-
-.duplicate-customer-info .info-label {
- color: var(--ms3-text-muted);
- font-size: 0.875rem;
- min-width: 6.25rem;
-}
-
-.duplicate-customer-info .info-value {
- color: var(--ms3-text-darkest);
- font-size: 0.875rem;
- font-weight: 500;
-}
-
-
-
diff --git a/vueManager/src/components/order/OrderAddProductDialog.vue b/vueManager/src/components/order/OrderAddProductDialog.vue
new file mode 100644
index 00000000..ed6bf44d
--- /dev/null
+++ b/vueManager/src/components/order/OrderAddProductDialog.vue
@@ -0,0 +1,265 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/vueManager/src/components/order/OrderDuplicateCustomerDialog.vue b/vueManager/src/components/order/OrderDuplicateCustomerDialog.vue
new file mode 100644
index 00000000..5316918b
--- /dev/null
+++ b/vueManager/src/components/order/OrderDuplicateCustomerDialog.vue
@@ -0,0 +1,134 @@
+
+
+
+
+
+
+
+
diff --git a/vueManager/src/components/order/OrderEditProductDialog.vue b/vueManager/src/components/order/OrderEditProductDialog.vue
new file mode 100644
index 00000000..6021010c
--- /dev/null
+++ b/vueManager/src/components/order/OrderEditProductDialog.vue
@@ -0,0 +1,359 @@
+
+
+
+
+
+
+
+
diff --git a/vueManager/src/composables/useOrderCostRecalc.js b/vueManager/src/composables/useOrderCostRecalc.js
new file mode 100644
index 00000000..eb6a36fc
--- /dev/null
+++ b/vueManager/src/composables/useOrderCostRecalc.js
@@ -0,0 +1,116 @@
+/**
+ * Order cost recalculation state and API (#212).
+ *
+ * @param {Object} deps
+ * @param {import('vue').Ref} deps.order
+ * @param {import('vue').ComputedRef} deps.orderId
+ * @param {import('vue').ComputedRef} deps.isCreateMode
+ * @param {Function} deps._
+ * @param {Object} deps.toast
+ */
+import { computed, ref, shallowRef } from 'vue'
+
+import request from '../request.js'
+
+export function useOrderCostRecalc(deps) {
+ const { order, orderId, isCreateMode, _, toast } = deps
+ const savedBaselineDeliveryId = ref(0)
+ const savedBaselinePaymentId = ref(0)
+ const recalculatingCost = ref(false)
+ /** @type {import('vue').ShallowRef} Warning codes from last recalculate API */
+ const costRecalcWarnings = shallowRef([])
+ const manualDeliveryCost = ref(null)
+
+ function syncShippingPaymentBaselineFromOrder() {
+ if (!order.value || isCreateMode.value) {
+ return
+ }
+ savedBaselineDeliveryId.value = Number.parseInt(order.value.delivery_id, 10) || 0
+ savedBaselinePaymentId.value = Number.parseInt(order.value.payment_id, 10) || 0
+ }
+
+ const hasUnsavedShippingPaymentChanges = computed(() => {
+ if (isCreateMode.value || !order.value) {
+ return false
+ }
+ const d = Number.parseInt(order.value.delivery_id, 10) || 0
+ const p = Number.parseInt(order.value.payment_id, 10) || 0
+
+ return d !== savedBaselineDeliveryId.value || p !== savedBaselinePaymentId.value
+ })
+
+ /**
+ * Берём поля заказа из ответа пересчёта без служебных ключей breakdown/warnings.
+ * @param {Record|null|undefined} raw
+ * @returns {{ orderPayload: Record, warnings: string[] }}
+ */
+ function stripRecalculateCostMeta(raw) {
+ if (!raw || typeof raw !== 'object') {
+ return { orderPayload: {}, warnings: [] }
+ }
+ const merged = /** @type {Record} */ ({ ...raw })
+ delete merged.breakdown
+ const w = merged.warnings
+ delete merged.warnings
+ return {
+ orderPayload: merged,
+ warnings: Array.isArray(w) ? w.map(String) : [],
+ }
+ }
+
+ /**
+ * Пересчитать стоимость заказа (Manager API, #212).
+ * @param {{ mode?: string, manual_delivery_cost?: number }} opts
+ */
+ async function recalculateOrderCost(opts = {}) {
+ if (isCreateMode.value || !orderId.value || orderId.value === 'new') {
+ return
+ }
+
+ recalculatingCost.value = true
+ costRecalcWarnings.value = []
+
+ try {
+ const body = {
+ mode: opts.mode ?? 'auto',
+ }
+ if (opts.manual_delivery_cost !== undefined && opts.manual_delivery_cost !== null) {
+ body.manual_delivery_cost = opts.manual_delivery_cost
+ }
+
+ const raw = await request.post(`/api/mgr/orders/${orderId.value}/recalculate-cost`, body)
+ const { orderPayload, warnings } = stripRecalculateCostMeta(raw)
+ order.value = { ...(order.value || {}), ...orderPayload }
+ costRecalcWarnings.value = warnings
+ syncShippingPaymentBaselineFromOrder()
+
+ toast.add({
+ severity: 'success',
+ summary: _('success'),
+ detail: _('order_cost_recalculated'),
+ life: 3000,
+ })
+ } catch (error) {
+ console.error('[OrderView] Error recalculateCost:', error)
+ toast.add({
+ severity: 'error',
+ summary: _('error'),
+ detail: error.message || _('error_saving_data'),
+ life: 5000,
+ })
+ } finally {
+ recalculatingCost.value = false
+ }
+ }
+
+ return {
+ savedBaselineDeliveryId,
+ savedBaselinePaymentId,
+ recalculatingCost,
+ costRecalcWarnings,
+ manualDeliveryCost,
+ hasUnsavedShippingPaymentChanges,
+ syncShippingPaymentBaselineFromOrder,
+ recalculateOrderCost,
+ }
+}
diff --git a/vueManager/src/composables/useOrderCustomer.js b/vueManager/src/composables/useOrderCustomer.js
new file mode 100644
index 00000000..7b346006
--- /dev/null
+++ b/vueManager/src/composables/useOrderCustomer.js
@@ -0,0 +1,185 @@
+/**
+ * Customer search / selection and duplicate-customer dialog handling.
+ *
+ * @param {Object} deps
+ * @param {Function} deps._
+ * @param {Object} deps.toast
+ * @param {import('vue').Ref} deps.order
+ * @param {import('vue').ComputedRef} deps.orderId
+ * @param {import('vue').Ref} deps.saving
+ * @param {Object} deps.orderActions
+ * @param {Function} deps.orderActions.finalizeOrder
+ * @param {Function} deps.orderActions.createOrder
+ */
+import { ref } from 'vue'
+
+import request from '../request.js'
+
+export function useOrderCustomer(deps) {
+ const { _, toast, order, orderId, saving, orderActions } = deps
+
+ const selectedCustomer = ref(null)
+ const customerSuggestions = ref([])
+ const searchingCustomers = ref(false)
+ const createCustomerFromData = ref(false)
+
+ const showDuplicateDialog = ref(false)
+ const duplicateCustomer = ref(null)
+ const pendingOrderData = ref(null)
+
+ /**
+ * Search customers for autocomplete
+ */
+ async function searchCustomers(event) {
+ const query = event.query
+ if (!query || query.length < 2) {
+ customerSuggestions.value = []
+ return
+ }
+
+ searchingCustomers.value = true
+ try {
+ const response = await request.get('/api/mgr/references/customers', { query })
+ customerSuggestions.value = response.results || []
+ } catch (error) {
+ console.error('[OrderView] Error searching customers:', error)
+ customerSuggestions.value = []
+ } finally {
+ searchingCustomers.value = false
+ }
+ }
+
+ /**
+ * Handle customer selection from autocomplete
+ */
+ function onCustomerSelect(event) {
+ const customer = event.value
+ if (customer) {
+ order.value.customer_id = customer.id
+
+ order.value.first_name = customer.first_name || order.value.first_name
+ order.value.last_name = customer.last_name || order.value.last_name
+ order.value.email = customer.email || order.value.email
+ order.value.phone = customer.phone || order.value.phone
+ }
+ }
+
+ /**
+ * Clear selected customer
+ */
+ function clearCustomer() {
+ selectedCustomer.value = null
+ if (order.value) {
+ order.value.customer_id = 0
+ }
+ }
+
+ /**
+ * Handle duplicate dialog: use existing customer
+ */
+ async function useDuplicateCustomer() {
+ showDuplicateDialog.value = false
+
+ if (!duplicateCustomer.value || !pendingOrderData.value) {
+ return
+ }
+
+ if (pendingOrderData.value.finalize) {
+ try {
+ await request.put(`/api/mgr/orders/${orderId.value}`, {
+ customer_id: duplicateCustomer.value.id,
+ })
+
+ createCustomerFromData.value = false
+ await orderActions.finalizeOrder()
+ } catch (error) {
+ console.error('[OrderView] Error updating order customer:', error)
+ toast.add({
+ severity: 'error',
+ summary: _('error'),
+ detail: error.message || _('error_saving_data'),
+ life: 5000,
+ })
+ } finally {
+ pendingOrderData.value = null
+ duplicateCustomer.value = null
+ }
+ return
+ }
+
+ selectedCustomer.value = duplicateCustomer.value
+ pendingOrderData.value.customer_id = duplicateCustomer.value.id
+ delete pendingOrderData.value.create_customer
+ delete pendingOrderData.value.force_create_customer
+
+ saving.value = true
+ try {
+ const response = await request.post('/api/mgr/orders', pendingOrderData.value)
+
+ toast.add({
+ severity: 'success',
+ summary: _('success'),
+ detail: _('ms3_order_created'),
+ life: 3000,
+ })
+
+ const createdOrderId = response.id || response.object?.id
+ if (createdOrderId) {
+ window.location.href = `?a=mgr/order&namespace=minishop3&id=${createdOrderId}`
+ }
+ } catch (error) {
+ console.error('[OrderView] Error creating order:', error)
+ toast.add({
+ severity: 'error',
+ summary: _('error'),
+ detail: error.message || _('error_saving_data'),
+ life: 5000,
+ })
+ } finally {
+ saving.value = false
+ pendingOrderData.value = null
+ duplicateCustomer.value = null
+ }
+ }
+
+ /**
+ * Handle duplicate dialog: create new customer anyway
+ */
+ async function createNewCustomerAnyway() {
+ showDuplicateDialog.value = false
+ duplicateCustomer.value = null
+
+ if (pendingOrderData.value?.finalize) {
+ pendingOrderData.value = null
+ await orderActions.finalizeOrder(true)
+ } else {
+ await orderActions.createOrder(true)
+ pendingOrderData.value = null
+ }
+ }
+
+ /**
+ * Handle duplicate dialog: cancel
+ */
+ function cancelDuplicateDialog() {
+ showDuplicateDialog.value = false
+ duplicateCustomer.value = null
+ pendingOrderData.value = null
+ }
+
+ return {
+ selectedCustomer,
+ customerSuggestions,
+ searchingCustomers,
+ createCustomerFromData,
+ showDuplicateDialog,
+ duplicateCustomer,
+ pendingOrderData,
+ searchCustomers,
+ onCustomerSelect,
+ clearCustomer,
+ useDuplicateCustomer,
+ createNewCustomerAnyway,
+ cancelDuplicateDialog,
+ }
+}
diff --git a/vueManager/src/composables/useOrderLoad.js b/vueManager/src/composables/useOrderLoad.js
new file mode 100644
index 00000000..f9124bf5
--- /dev/null
+++ b/vueManager/src/composables/useOrderLoad.js
@@ -0,0 +1,389 @@
+/**
+ * Order loading, references, and initial/empty state for the order view.
+ *
+ * @param {Object} deps
+ * @param {Function} deps._
+ * @param {Object} deps.toast
+ * @param {import('vue').Ref} deps.order
+ * @param {import('vue').ComputedRef} deps.orderId
+ * @param {import('vue').Ref} deps.selectedCustomer
+ * @param {import('vue').ShallowRef} deps.costRecalcWarnings
+ * @param {Function} deps.syncShippingPaymentBaselineFromOrder
+ */
+import { computed, ref } from 'vue'
+
+import request from '../request.js'
+import { parseRepeaterModelValue, REPEATER_XTYPE } from '../utils/repeaterField.js'
+
+export function useOrderLoad(deps) {
+ const {
+ _,
+ toast,
+ order,
+ orderId,
+ selectedCustomer,
+ costRecalcWarnings,
+ syncShippingPaymentBaselineFromOrder,
+ } = deps
+
+ const loading = ref(true)
+ const products = ref([])
+ const productsColumns = ref([])
+ const logs = ref([])
+ const statuses = ref([])
+ const deliveries = ref([])
+ const payments = ref([])
+
+ const orderFields = ref([])
+ const addressFields = ref([])
+ const orderSections = ref([])
+ const addressSections = ref([])
+
+ const orderComboOptions = ref({})
+ const addressComboOptions = ref({})
+
+ const orderExtraFields = ref([])
+ const addressExtraFields = ref([])
+
+ /**
+ * Helper to group fields by section
+ */
+ function groupFieldsBySection(fields, sections) {
+ const sectionMap = new Map()
+
+ for (const section of sections) {
+ sectionMap.set(section.id, {
+ ...section,
+ fields: [],
+ })
+ }
+
+ sectionMap.set(null, {
+ id: null,
+ label: _('ms3_model_field_no_section'),
+ section_key: 'no_section',
+ sort_order: 9999,
+ fields: [],
+ })
+
+ for (const field of fields) {
+ const sectionId = field.section_id || null
+ if (sectionMap.has(sectionId)) {
+ sectionMap.get(sectionId).fields.push(field)
+ } else {
+ sectionMap.get(null).fields.push(field)
+ }
+ }
+
+ return Array.from(sectionMap.values())
+ .filter(section => section.fields.length > 0)
+ .sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0))
+ }
+
+ const orderFieldsBySection = computed(() => {
+ return groupFieldsBySection(orderFields.value, orderSections.value)
+ })
+
+ const addressFieldsBySection = computed(() => {
+ return groupFieldsBySection(addressFields.value, addressSections.value)
+ })
+
+ /** Parse repeater extra field values from API (string JSON → array). */
+ function hydrateRepeaterExtraFields(fields) {
+ if (!order.value || !Array.isArray(fields)) {
+ return
+ }
+
+ for (const field of fields) {
+ if (field.xtype === REPEATER_XTYPE && field.key) {
+ order.value[field.key] = parseRepeaterModelValue(order.value[field.key])
+ }
+ }
+ }
+
+ /**
+ * Load order data and related resources.
+ */
+ async function loadOrder() {
+ if (!orderId.value) {
+ toast.add({
+ severity: 'error',
+ summary: _('error'),
+ detail: _('order_id_required'),
+ life: 5000,
+ })
+ return
+ }
+
+ loading.value = true
+
+ try {
+ const response = await request.get(`/api/mgr/orders/${orderId.value}`)
+ order.value = response
+ syncShippingPaymentBaselineFromOrder()
+ costRecalcWarnings.value = []
+
+ await Promise.all([
+ loadProducts(),
+ loadProductsGridConfig(),
+ loadLogs(),
+ loadOrderFields(),
+ loadAddressFields(),
+ loadOrderExtraFields(),
+ loadAddressExtraFields(),
+ loadOrderCustomer(),
+ ])
+
+ hydrateRepeaterExtraFields(orderExtraFields.value)
+ hydrateRepeaterExtraFields(addressExtraFields.value)
+ } catch (error) {
+ console.error('[OrderView] Error loading order:', error)
+ toast.add({
+ severity: 'error',
+ summary: _('error'),
+ detail: error.message || _('error_loading_data'),
+ life: 5000,
+ })
+ } finally {
+ loading.value = false
+ }
+ }
+
+ /**
+ * Load customer data for the order (if customer_id exists)
+ */
+ async function loadOrderCustomer() {
+ const customerId = order.value?.customer_id
+ if (!customerId || customerId === 0) {
+ selectedCustomer.value = null
+ return
+ }
+
+ try {
+ const response = await request.get(`/api/mgr/customers/${customerId}`)
+ if (response && response.id) {
+ selectedCustomer.value = {
+ ...response,
+ display: `${response.first_name || ''} ${response.last_name || ''} (${response.email || response.phone || ''})`,
+ }
+ }
+ } catch (error) {
+ console.error('[OrderView] Error loading customer:', error)
+ selectedCustomer.value = null
+ }
+ }
+
+ /**
+ * Load visible fields for msOrder model (includes combo options)
+ */
+ async function loadOrderFields() {
+ try {
+ const response = await request.get('/api/mgr/model-fields/visible/msOrder')
+ orderFields.value = response.results || []
+ orderSections.value = response.sections || []
+ orderComboOptions.value = response.comboOptions || {}
+
+ if (orderComboOptions.value.status_id) {
+ statuses.value =
+ orderComboOptions.value.status_id.options || orderComboOptions.value.status_id
+ }
+ if (orderComboOptions.value.delivery_id) {
+ deliveries.value =
+ orderComboOptions.value.delivery_id.options || orderComboOptions.value.delivery_id
+ }
+ if (orderComboOptions.value.payment_id) {
+ payments.value =
+ orderComboOptions.value.payment_id.options || orderComboOptions.value.payment_id
+ }
+ } catch (error) {
+ console.error('[OrderView] Error loading order fields:', error)
+ orderFields.value = []
+ orderSections.value = []
+ orderComboOptions.value = {}
+ }
+ }
+
+ /**
+ * Load visible fields for msOrderAddress model (includes combo options)
+ */
+ async function loadAddressFields() {
+ try {
+ const response = await request.get('/api/mgr/model-fields/visible/msOrderAddress')
+ addressFields.value = response.results || []
+ addressSections.value = response.sections || []
+ addressComboOptions.value = response.comboOptions || {}
+ } catch (error) {
+ console.error('[OrderView] Error loading address fields:', error)
+ addressFields.value = []
+ addressSections.value = []
+ addressComboOptions.value = {}
+ }
+ }
+
+ /**
+ * Load extra fields for msOrder (from Object Extension)
+ */
+ async function loadOrderExtraFields() {
+ try {
+ const response = await request.get('/api/mgr/extra-fields', { class: 'msOrder' })
+ orderExtraFields.value = (response.fields || []).filter(f => f.active)
+ } catch (error) {
+ console.error('[OrderView] Error loading order extra fields:', error)
+ orderExtraFields.value = []
+ }
+ }
+
+ /**
+ * Load extra fields for msOrderAddress (from Object Extension)
+ */
+ async function loadAddressExtraFields() {
+ try {
+ const response = await request.get('/api/mgr/extra-fields', { class: 'msOrderAddress' })
+ addressExtraFields.value = (response.fields || []).filter(f => f.active)
+ } catch (error) {
+ console.error('[OrderView] Error loading address extra fields:', error)
+ addressExtraFields.value = []
+ }
+ }
+
+ /**
+ * Load order products
+ */
+ async function loadProducts() {
+ try {
+ const response = await request.get(`/api/mgr/orders/${orderId.value}/products`)
+ products.value = response.results || response || []
+ } catch (error) {
+ console.error('[OrderView] Error loading products:', error)
+ products.value = []
+ }
+ }
+
+ /**
+ * Load products grid configuration
+ */
+ async function loadProductsGridConfig() {
+ try {
+ const response = await request.get('/api/mgr/grid-config/order_products')
+ productsColumns.value = response.columns || []
+ } catch (error) {
+ console.error('[OrderView] Error loading products grid config:', error)
+ productsColumns.value = getDefaultProductsColumns()
+ }
+ }
+
+ /**
+ * Default columns for products grid (fallback)
+ */
+ function getDefaultProductsColumns() {
+ return [
+ {
+ name: 'name',
+ label: _('order_product_name'),
+ visible: true,
+ type: 'template',
+ template: '{name}',
+ },
+ { name: 'count', label: _('order_product_count'), visible: true, type: 'number' },
+ { name: 'price', label: _('order_product_price'), visible: true, type: 'price' },
+ { name: 'cost', label: _('order_product_cost'), visible: true, type: 'price' },
+ ]
+ }
+
+ /**
+ * Load order logs
+ */
+ async function loadLogs() {
+ try {
+ const response = await request.get(`/api/mgr/orders/${orderId.value}/logs`)
+ logs.value = response.results || response || []
+ } catch (error) {
+ console.error('[OrderView] Error loading logs:', error)
+ logs.value = []
+ }
+ }
+
+ /**
+ * Initialize empty order for create mode
+ */
+ async function initEmptyOrder() {
+ loading.value = true
+
+ try {
+ order.value = {
+ id: null,
+ num: '',
+ status_id: 1, // Draft status
+ delivery_id: null,
+ payment_id: null,
+ customer_id: 0,
+ order_comment: '',
+ cart_cost: 0,
+ delivery_cost: 0,
+ cost: 0,
+ weight: 0,
+ // Address fields
+ first_name: '',
+ last_name: '',
+ phone: '',
+ email: '',
+ country: '',
+ index: '',
+ region: '',
+ city: '',
+ metro: '',
+ street: '',
+ building: '',
+ entrance: '',
+ floor: '',
+ room: '',
+ comment: '',
+ text_address: '',
+ }
+
+ await Promise.all([
+ loadOrderFields(),
+ loadAddressFields(),
+ loadOrderExtraFields(),
+ loadAddressExtraFields(),
+ ])
+
+ products.value = []
+ logs.value = []
+ } catch (error) {
+ console.error('[OrderView] Error initializing empty order:', error)
+ toast.add({
+ severity: 'error',
+ summary: _('error'),
+ detail: _('error_loading_config'),
+ life: 5000,
+ })
+ } finally {
+ loading.value = false
+ }
+ }
+
+ return {
+ loading,
+ products,
+ productsColumns,
+ logs,
+ statuses,
+ deliveries,
+ payments,
+ orderFields,
+ addressFields,
+ orderSections,
+ addressSections,
+ orderComboOptions,
+ addressComboOptions,
+ orderExtraFields,
+ addressExtraFields,
+ orderFieldsBySection,
+ addressFieldsBySection,
+ loadOrder,
+ loadProducts,
+ loadLogs,
+ initEmptyOrder,
+ }
+}
diff --git a/vueManager/src/composables/useOrderPluginTabs.js b/vueManager/src/composables/useOrderPluginTabs.js
new file mode 100644
index 00000000..41b3de93
--- /dev/null
+++ b/vueManager/src/composables/useOrderPluginTabs.js
@@ -0,0 +1,163 @@
+/**
+ * Plugin tab registry integration for the order view (built-in + MS3OrderTabsRegistry tabs).
+ *
+ * @param {Object} deps
+ * @param {Function} deps._
+ * @param {import('vue').Ref} deps.order
+ * @param {import('vue').ComputedRef} deps.orderId
+ * @param {import('vue').ComputedRef} deps.isCreateMode
+ * @param {import('vue').ComputedRef} deps.managerConfig
+ */
+import { computed, ref } from 'vue'
+
+import { normalizeOrderPluginTab } from '../utils/orderPluginTab.js'
+
+export function useOrderPluginTabs(deps) {
+ const { _, order, orderId, isCreateMode, managerConfig } = deps
+
+ const orderActiveTab = ref('info')
+ const pluginTabs = ref([])
+ /** ExtJS plugin panels mounted lazily per tab key; destroyed in onBeforeUnmount */
+ const mountedExtPluginComponents = ref({})
+
+ /** Fixed positions 0–3; must stay in sync with RESERVED_ORDER_TAB_KEYS in orderPluginTab.js */
+ const builtInOrderTabs = computed(() => [
+ { key: 'info', title: _('order_info'), position: 0, hideOnCreate: false, kind: 'builtin' },
+ {
+ key: 'products',
+ title: _('order_products'),
+ position: 1,
+ hideOnCreate: true,
+ kind: 'builtin',
+ },
+ {
+ key: 'address',
+ title: _('order_address'),
+ position: 2,
+ hideOnCreate: false,
+ kind: 'builtin',
+ },
+ { key: 'history', title: _('order_history'), position: 3, hideOnCreate: true, kind: 'builtin' },
+ ])
+
+ /** Built-in + plugin tabs, sorted by `position`; respects hideOnCreate per tab */
+ const orderTabsConfig = computed(() => {
+ const builtIn = builtInOrderTabs.value.filter(t => !(t.hideOnCreate && isCreateMode.value))
+ const plugins = pluginTabs.value
+ .filter(t => !(t.hideOnCreate && isCreateMode.value))
+ .map(t => ({ ...t, kind: 'plugin' }))
+ return [...builtIn, ...plugins].sort((a, b) => (a.position ?? 100) - (b.position ?? 100))
+ })
+
+ /**
+ * Registers a plugin tab (called by window.MS3OrderTabsRegistry or tests).
+ * Validation lives in normalizeOrderPluginTab().
+ */
+ function registerPluginTab(tabData) {
+ const normalized = normalizeOrderPluginTab(tabData)
+ if (!normalized.ok) {
+ console.error(`[OrderView] ${normalized.reason}`, tabData)
+ return false
+ }
+ const exists = pluginTabs.value.some(t => t.key === normalized.tab.key)
+ if (exists) {
+ console.warn(`[OrderView] Tab with key "${normalized.tab.key}" already registered`)
+ return false
+ }
+ pluginTabs.value.push(normalized.tab)
+ return true
+ }
+
+ /**
+ * Props passed to Vue plugin tab components (same contract as ExtJS tabs below).
+ * User `tab.props` is spread first; core fields override name collisions intentionally.
+ */
+ function pluginVueProps(tab) {
+ return {
+ ...(tab.props || {}),
+ orderId: orderId.value,
+ order: order.value,
+ config: managerConfig.value,
+ isCreateMode: isCreateMode.value,
+ }
+ }
+
+ /** Waits for TabPanel DOM element via MutationObserver (consistent with other entry points). */
+ function waitForOrderTabElement(id, callback) {
+ const element = document.getElementById(id)
+ if (element) {
+ callback(element)
+ return
+ }
+ const observer = new MutationObserver(() => {
+ const el = document.getElementById(id)
+ if (el) {
+ observer.disconnect()
+ callback(el)
+ }
+ })
+ observer.observe(document.body, { childList: true, subtree: true })
+ }
+
+ /**
+ * Lazy-mounts an ExtJS panel into the plugin tab container.
+ * Merge order: xtype/renderTo/width, then extConfig, then core fields (order, orderId, config, isCreateMode).
+ *
+ * The Ext instance is created once per tab key when the user first selects the tab. Later changes to
+ * Vue’s `order` (after API load, save, etc.) are not pushed into Ext — plugin panels must implement
+ * their own listeners, polling, or `load` hooks if they need live data.
+ */
+ function mountExtJSOrderPlugin(tab) {
+ if (mountedExtPluginComponents.value[tab.key]) {
+ return
+ }
+ const containerId = `ms3-order-tab-${tab.key}`
+ waitForOrderTabElement(containerId, container => {
+ try {
+ if (typeof Ext === 'undefined') {
+ console.error('[OrderView] Ext is not defined')
+ return
+ }
+ const extComponent = Ext.create({
+ xtype: tab.xtype,
+ renderTo: container,
+ width: '100%',
+ ...tab.extConfig,
+ order: order.value,
+ orderId: orderId.value,
+ config: managerConfig.value,
+ isCreateMode: isCreateMode.value,
+ })
+ mountedExtPluginComponents.value[tab.key] = extComponent
+ } catch (error) {
+ console.error(`[OrderView] Failed to mount ExtJS order tab ${tab.key}:`, error)
+ }
+ })
+ }
+
+ function destroyPluginExtComponents() {
+ Object.keys(mountedExtPluginComponents.value).forEach(key => {
+ const component = mountedExtPluginComponents.value[key]
+ if (component && typeof component.destroy === 'function') {
+ try {
+ component.destroy()
+ } catch (e) {
+ console.warn(`[OrderView] Error destroying plugin ExtJS component ${key}:`, e)
+ }
+ }
+ })
+ mountedExtPluginComponents.value = {}
+ }
+
+ return {
+ orderActiveTab,
+ pluginTabs,
+ mountedExtPluginComponents,
+ builtInOrderTabs,
+ orderTabsConfig,
+ registerPluginTab,
+ pluginVueProps,
+ mountExtJSOrderPlugin,
+ destroyPluginExtComponents,
+ }
+}
diff --git a/vueManager/src/composables/useOrderProductOptions.js b/vueManager/src/composables/useOrderProductOptions.js
new file mode 100644
index 00000000..8e1dc57a
--- /dev/null
+++ b/vueManager/src/composables/useOrderProductOptions.js
@@ -0,0 +1,273 @@
+/**
+ * Product options table/json editing state for the edit-product dialog.
+ *
+ * @param {Object} deps
+ * @param {Function} deps._
+ * @param {import('vue').Ref} deps.editingProduct
+ */
+import { ref } from 'vue'
+
+import request from '../request.js'
+
+export function useOrderProductOptions(deps) {
+ const { _, editingProduct } = deps
+
+ const optionsEditMode = ref('table') // 'table' or 'json'
+ const optionsTableData = ref([]) // Array of { type, key, value, isComplex, fieldValues, loadingValues }
+ const optionsJsonText = ref('') // JSON string for json mode
+ const optionsJsonError = ref('') // JSON parse error message
+
+ const productOptionFields = ref([])
+ const loadingOptionFields = ref(false)
+
+ /**
+ * Load product option fields (color, size, etc.)
+ */
+ async function loadProductOptionFields() {
+ loadingOptionFields.value = true
+ try {
+ const response = await request.get('/api/mgr/references/product-option-fields')
+ productOptionFields.value = response.fields || []
+ } catch (error) {
+ console.error('[OrderView] Error loading product option fields:', error)
+ productOptionFields.value = []
+ } finally {
+ loadingOptionFields.value = false
+ }
+ }
+
+ /**
+ * Check if value is complex (array or object)
+ */
+ function isComplexValue(value) {
+ return Array.isArray(value) || (typeof value === 'object' && value !== null)
+ }
+
+ /**
+ * Load field values for a specific row
+ */
+ async function loadFieldValuesForRow(row) {
+ if (!row.key || row.type !== 'field') return
+
+ const productId = editingProduct.value?.product_id
+ if (!productId) {
+ console.warn('[OrderView] No product_id found for loading field values')
+ row.fieldValues = []
+ return
+ }
+
+ row.loadingValues = true
+ try {
+ const response = await request.get('/api/mgr/references/product-field-values', {
+ field: row.key,
+ product_id: productId,
+ })
+ row.fieldValues = response.values || []
+ } catch (error) {
+ console.error('[OrderView] Error loading field values:', error)
+ row.fieldValues = []
+ } finally {
+ row.loadingValues = false
+ }
+ }
+
+ /**
+ * Initialize options data from product
+ */
+ async function initOptionsFromProduct(options) {
+ let parsed = {}
+
+ if (options) {
+ if (typeof options === 'string') {
+ try {
+ parsed = JSON.parse(options)
+ } catch {
+ parsed = {}
+ }
+ } else if (typeof options === 'object') {
+ parsed = options
+ }
+ }
+
+ const tableData = []
+ for (const [key, value] of Object.entries(parsed)) {
+ const isProductField = productOptionFields.value.some(f => f.name === key)
+ const row = {
+ type: isProductField ? 'field' : 'custom',
+ key,
+ value: isComplexValue(value) ? JSON.stringify(value, null, 2) : value,
+ isComplex: isComplexValue(value),
+ fieldValues: [],
+ loadingValues: false,
+ }
+
+ if (isProductField) {
+ await loadFieldValuesForRow(row)
+ }
+
+ tableData.push(row)
+ }
+
+ optionsTableData.value = tableData
+ optionsJsonText.value = Object.keys(parsed).length > 0 ? JSON.stringify(parsed, null, 2) : ''
+ }
+
+ /**
+ * Handle option type change (field/custom)
+ */
+ async function onOptionTypeChange(row) {
+ if (row.type === 'field') {
+ const isValidField = productOptionFields.value.some(f => f.name === row.key)
+ if (!isValidField && productOptionFields.value.length > 0) {
+ row.key = productOptionFields.value[0].name
+ }
+ row.value = ''
+ row.isComplex = false
+ await loadFieldValuesForRow(row)
+ } else {
+ row.fieldValues = []
+ row.value = ''
+ row.isComplex = false
+ }
+ syncTableToJson()
+ }
+
+ /**
+ * Handle field selection change
+ */
+ async function onFieldKeyChange(row) {
+ row.value = ''
+ row.fieldValues = []
+ await loadFieldValuesForRow(row)
+ syncTableToJson()
+ }
+
+ /**
+ * Add new option row
+ */
+ function addOptionRow() {
+ optionsTableData.value.push({
+ type: 'custom',
+ key: '',
+ value: '',
+ isComplex: false,
+ fieldValues: [],
+ loadingValues: false,
+ })
+ }
+
+ /**
+ * Remove option row
+ */
+ function removeOptionRow(index) {
+ optionsTableData.value.splice(index, 1)
+ syncTableToJson()
+ }
+
+ function buildOptionsObjectFromTable() {
+ const obj = {}
+ for (const row of optionsTableData.value) {
+ if (!row.key.trim()) {
+ continue
+ }
+ if (row.isComplex) {
+ try {
+ obj[row.key] = JSON.parse(row.value)
+ } catch {
+ obj[row.key] = row.value
+ }
+ } else {
+ obj[row.key] = row.value
+ }
+ }
+ return obj
+ }
+
+ /** Sync table data to JSON text. */
+ function syncTableToJson() {
+ const obj = buildOptionsObjectFromTable()
+ optionsJsonText.value = Object.keys(obj).length > 0 ? JSON.stringify(obj, null, 2) : ''
+ optionsJsonError.value = ''
+ }
+
+ /**
+ * Sync JSON text to table data
+ */
+ function syncJsonToTable() {
+ optionsJsonError.value = ''
+
+ if (!optionsJsonText.value.trim()) {
+ optionsTableData.value = []
+ return true
+ }
+
+ try {
+ const parsed = JSON.parse(optionsJsonText.value)
+ if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+ optionsJsonError.value = _('options_json_must_be_object')
+ return false
+ }
+
+ optionsTableData.value = Object.entries(parsed).map(([key, value]) => ({
+ key,
+ value: isComplexValue(value) ? JSON.stringify(value, null, 2) : value,
+ isComplex: isComplexValue(value),
+ }))
+ return true
+ } catch (e) {
+ optionsJsonError.value = _('options_json_invalid') + ': ' + e.message
+ return false
+ }
+ }
+
+ /**
+ * Switch options edit mode
+ */
+ function switchOptionsMode(mode) {
+ if (mode === optionsEditMode.value) return
+
+ if (mode === 'json') {
+ syncTableToJson()
+ } else {
+ if (!syncJsonToTable()) {
+ return
+ }
+ }
+
+ optionsEditMode.value = mode
+ }
+
+ /**
+ * Get options object for saving
+ */
+ function getOptionsForSave() {
+ if (optionsEditMode.value === 'json') {
+ if (!optionsJsonText.value.trim()) return null
+ try {
+ return JSON.parse(optionsJsonText.value)
+ } catch {
+ return null
+ }
+ }
+ const obj = buildOptionsObjectFromTable()
+ return Object.keys(obj).length > 0 ? obj : null
+ }
+
+ return {
+ optionsEditMode,
+ optionsTableData,
+ optionsJsonText,
+ optionsJsonError,
+ productOptionFields,
+ loadingOptionFields,
+ loadProductOptionFields,
+ initOptionsFromProduct,
+ onOptionTypeChange,
+ onFieldKeyChange,
+ addOptionRow,
+ removeOptionRow,
+ syncTableToJson,
+ switchOptionsMode,
+ getOptionsForSave,
+ }
+}
diff --git a/vueManager/src/composables/useOrderProducts.js b/vueManager/src/composables/useOrderProducts.js
new file mode 100644
index 00000000..1b96d537
--- /dev/null
+++ b/vueManager/src/composables/useOrderProducts.js
@@ -0,0 +1,322 @@
+/**
+ * Product CRUD dialog state (edit / add / delete) for the order view.
+ *
+ * @param {Object} deps
+ * @param {Function} deps._
+ * @param {Object} deps.toast
+ * @param {Object} deps.confirm
+ * @param {import('vue').ComputedRef} deps.orderId
+ * @param {import('vue').Ref} deps.products
+ * @param {import('vue').Ref} deps.editingProduct
+ * @param {Function} deps.loadProducts
+ * @param {Function} deps.loadOrder
+ * @param {Object} deps.options
+ */
+import { computed, ref } from 'vue'
+
+import request from '../request.js'
+
+export function useOrderProducts(deps) {
+ const { _, toast, confirm, orderId, products, editingProduct, loadProducts, loadOrder, options } =
+ deps
+
+ const editProductDialogVisible = ref(false)
+ const editProductForm = ref({
+ count: 1,
+ price: 0,
+ weight: 0,
+ })
+ const savingProduct = ref(false)
+
+ const addProductDialogVisible = ref(false)
+ const selectedProduct = ref(null)
+ const productSuggestions = ref([])
+ const searchingProducts = ref(false)
+ const addProductForm = ref({
+ count: 1,
+ price: 0,
+ weight: 0,
+ options: {},
+ })
+ const savingNewProduct = ref(false)
+
+ function productLineCost(form) {
+ return (form.count || 0) * (form.price || 0)
+ }
+
+ const editedProductCost = computed(() => productLineCost(editProductForm.value))
+ const newProductCost = computed(() => productLineCost(addProductForm.value))
+
+ /**
+ * Handle product action (edit, delete)
+ */
+ function handleProductAction(action, data) {
+ switch (action.handler) {
+ case 'edit':
+ editProduct(data)
+ break
+ case 'delete':
+ deleteProduct(data)
+ break
+ default:
+ console.warn('[OrderView] Unknown action handler:', action.handler)
+ }
+ }
+
+ /**
+ * Open edit product dialog
+ */
+ async function editProduct(product) {
+ editingProduct.value = product
+ editProductForm.value = {
+ count: product.count || 1,
+ price: product.price || 0,
+ weight: product.weight || 0,
+ }
+
+ if (options.productOptionFields.value.length === 0) {
+ await options.loadProductOptionFields()
+ }
+
+ await options.initOptionsFromProduct(product.options)
+ options.optionsEditMode.value = 'table'
+ options.optionsJsonError.value = ''
+
+ editProductDialogVisible.value = true
+ }
+
+ /**
+ * Save edited product
+ */
+ async function saveEditedProduct() {
+ if (!editingProduct.value) return
+
+ if (options.optionsEditMode.value === 'json' && options.optionsJsonText.value.trim()) {
+ try {
+ JSON.parse(options.optionsJsonText.value)
+ } catch (e) {
+ options.optionsJsonError.value = _('options_json_invalid') + ': ' + e.message
+ return
+ }
+ }
+
+ savingProduct.value = true
+
+ try {
+ const data = {
+ ...editProductForm.value,
+ options: options.getOptionsForSave(),
+ }
+
+ await request.put(
+ `/api/mgr/orders/${orderId.value}/products/${editingProduct.value.id}`,
+ data
+ )
+
+ toast.add({
+ severity: 'success',
+ summary: _('success'),
+ detail: _('order_product_saved'),
+ life: 3000,
+ })
+
+ editProductDialogVisible.value = false
+
+ await Promise.all([loadProducts(), loadOrder()])
+ } catch (error) {
+ console.error('[OrderView] Error saving product:', error)
+ toast.add({
+ severity: 'error',
+ summary: _('error'),
+ detail: error.message || _('error_saving_data'),
+ life: 5000,
+ })
+ } finally {
+ savingProduct.value = false
+ }
+ }
+
+ /**
+ * Cancel product editing
+ */
+ function cancelEditProduct() {
+ editProductDialogVisible.value = false
+ editingProduct.value = null
+ }
+
+ /**
+ * Open add product dialog
+ */
+ function openAddProductDialog() {
+ selectedProduct.value = null
+ productSuggestions.value = []
+ addProductForm.value = {
+ count: 1,
+ price: 0,
+ weight: 0,
+ options: {},
+ }
+ addProductDialogVisible.value = true
+ }
+
+ /**
+ * Search products for autocomplete
+ */
+ async function searchProducts(event) {
+ const query = event.query
+ if (!query || query.length < 2) {
+ productSuggestions.value = []
+ return
+ }
+
+ searchingProducts.value = true
+ try {
+ const response = await request.get('/api/mgr/references/products', { query })
+ productSuggestions.value = response.results || []
+ } catch (error) {
+ console.error('[OrderView] Error searching products:', error)
+ productSuggestions.value = []
+ } finally {
+ searchingProducts.value = false
+ }
+ }
+
+ /**
+ * Handle product selection from autocomplete
+ */
+ function onProductSelect(event) {
+ const product = event.value
+ if (product) {
+ addProductForm.value.price = product.price || 0
+ addProductForm.value.weight = product.weight || 0
+ }
+ }
+
+ /**
+ * Save new product to order
+ */
+ async function saveNewProduct() {
+ if (!selectedProduct.value || !selectedProduct.value.id) {
+ toast.add({
+ severity: 'warn',
+ summary: _('warning'),
+ detail: _('order_product_select'),
+ life: 3000,
+ })
+ return
+ }
+
+ savingNewProduct.value = true
+ try {
+ const data = {
+ product_id: selectedProduct.value.id,
+ count: addProductForm.value.count || 1,
+ price: addProductForm.value.price || 0,
+ weight: addProductForm.value.weight || 0,
+ options: addProductForm.value.options || {},
+ }
+
+ await request.post(`/api/mgr/orders/${orderId.value}/products`, data)
+
+ toast.add({
+ severity: 'success',
+ summary: _('success'),
+ detail: _('order_product_added'),
+ life: 3000,
+ })
+
+ addProductDialogVisible.value = false
+
+ await Promise.all([loadProducts(), loadOrder()])
+ } catch (error) {
+ console.error('[OrderView] Error adding product:', error)
+ toast.add({
+ severity: 'error',
+ summary: _('error'),
+ detail: error.message || _('error'),
+ life: 5000,
+ })
+ } finally {
+ savingNewProduct.value = false
+ }
+ }
+
+ /**
+ * Cancel add product
+ */
+ function cancelAddProduct() {
+ addProductDialogVisible.value = false
+ selectedProduct.value = null
+ }
+
+ /**
+ * Delete product from order with confirmation
+ */
+ function deleteProduct(product) {
+ if (products.value.length <= 1) {
+ toast.add({
+ severity: 'warn',
+ summary: _('warning'),
+ detail: _('order_product_cannot_delete_last'),
+ life: 5000,
+ })
+ return
+ }
+
+ confirm.require({
+ message: _('order_product_delete_confirm'),
+ header: _('confirm_delete'),
+ icon: 'pi pi-exclamation-triangle',
+ acceptLabel: _('yes'),
+ rejectLabel: _('no'),
+ acceptClass: 'p-button-danger',
+ accept: async () => {
+ try {
+ await request.delete(`/api/mgr/orders/${orderId.value}/products/${product.id}`)
+
+ toast.add({
+ severity: 'success',
+ summary: _('success'),
+ detail: _('order_product_deleted'),
+ life: 3000,
+ })
+
+ await Promise.all([loadProducts(), loadOrder()])
+ } catch (error) {
+ console.error('[OrderView] Error deleting product:', error)
+ toast.add({
+ severity: 'error',
+ summary: _('error'),
+ detail: error.message || _('error_deleting_data'),
+ life: 5000,
+ })
+ }
+ },
+ })
+ }
+
+ return {
+ editProductDialogVisible,
+ editingProduct,
+ editProductForm,
+ savingProduct,
+ editedProductCost,
+ addProductDialogVisible,
+ selectedProduct,
+ productSuggestions,
+ searchingProducts,
+ addProductForm,
+ savingNewProduct,
+ newProductCost,
+ handleProductAction,
+ editProduct,
+ saveEditedProduct,
+ cancelEditProduct,
+ openAddProductDialog,
+ searchProducts,
+ onProductSelect,
+ saveNewProduct,
+ cancelAddProduct,
+ deleteProduct,
+ }
+}
diff --git a/vueManager/src/composables/useOrderSave.js b/vueManager/src/composables/useOrderSave.js
new file mode 100644
index 00000000..93803619
--- /dev/null
+++ b/vueManager/src/composables/useOrderSave.js
@@ -0,0 +1,321 @@
+/**
+ * Order save / finalize / create actions for the order view.
+ *
+ * @param {Object} deps
+ * @param {Function} deps._
+ * @param {Object} deps.toast
+ * @param {Object} deps.confirm
+ * @param {import('vue').Ref} deps.order
+ * @param {import('vue').ComputedRef} deps.orderId
+ * @param {import('vue').Ref} deps.saving
+ * @param {import('vue').Ref} deps.orderFields
+ * @param {import('vue').Ref} deps.addressFields
+ * @param {import('vue').Ref} deps.orderExtraFields
+ * @param {import('vue').Ref} deps.addressExtraFields
+ * @param {import('vue').Ref} deps.selectedCustomer
+ * @param {import('vue').Ref} deps.createCustomerFromData
+ * @param {import('vue').Ref} deps.showDuplicateDialog
+ * @param {import('vue').Ref} deps.duplicateCustomer
+ * @param {import('vue').Ref} deps.pendingOrderData
+ * @param {Object} deps.fieldHelpers
+ * @param {Function} deps.loadOrder
+ * @param {Function} deps.loadLogs
+ * @param {Function} deps.syncShippingPaymentBaselineFromOrder
+ */
+import { ref } from 'vue'
+
+import request from '../request.js'
+
+export function useOrderSave(deps) {
+ const {
+ _,
+ toast,
+ confirm,
+ order,
+ orderId,
+ saving,
+ orderFields,
+ addressFields,
+ orderExtraFields,
+ addressExtraFields,
+ selectedCustomer,
+ createCustomerFromData,
+ showDuplicateDialog,
+ duplicateCustomer,
+ pendingOrderData,
+ fieldHelpers,
+ loadOrder,
+ loadLogs,
+ syncShippingPaymentBaselineFromOrder,
+ } = deps
+
+ const finalizing = ref(false)
+
+ /**
+ * Save order
+ */
+ async function saveOrder() {
+ saving.value = true
+
+ try {
+ const orderData = {}
+ for (const field of orderFields.value) {
+ if (fieldHelpers.isFieldEditable(field.name) && order.value[field.name] !== undefined) {
+ orderData[field.name] = order.value[field.name]
+ }
+ }
+
+ for (const field of addressFields.value) {
+ if (order.value[field.name] !== undefined) {
+ orderData[field.name] = order.value[field.name]
+ }
+ }
+
+ for (const field of orderExtraFields.value) {
+ if (order.value[field.key] !== undefined) {
+ orderData[field.key] = order.value[field.key]
+ }
+ }
+
+ for (const field of addressExtraFields.value) {
+ if (order.value[field.key] !== undefined) {
+ orderData[field.key] = order.value[field.key]
+ }
+ }
+
+ await request.put(`/api/mgr/orders/${orderId.value}`, orderData)
+
+ toast.add({
+ severity: 'success',
+ summary: _('success'),
+ detail: _('order_saved'),
+ life: 3000,
+ })
+
+ syncShippingPaymentBaselineFromOrder()
+
+ await loadLogs()
+ } catch (error) {
+ console.error('[OrderView] Error saving order:', error)
+ toast.add({
+ severity: 'error',
+ summary: _('error'),
+ detail: error.message || _('error_saving_data'),
+ life: 5000,
+ })
+ } finally {
+ saving.value = false
+ }
+ }
+
+ /**
+ * Finalize order (convert draft to final order)
+ * Shows confirmation dialog first
+ */
+ function confirmFinalizeOrder() {
+ confirm.require({
+ message: _('ms3_order_finalize_confirm_desc'),
+ header: _('ms3_order_finalize_confirm'),
+ icon: 'pi pi-check-circle',
+ acceptLabel: _('ms3_order_finalize_btn'),
+ rejectLabel: _('cancel'),
+ accept: () => {
+ finalizeOrder()
+ },
+ })
+ }
+
+ /**
+ * Finalize order API call
+ */
+ async function finalizeOrder(forceCreateCustomer = false) {
+ finalizing.value = true
+
+ try {
+ const requestData = {}
+
+ if (createCustomerFromData.value && !order.value.customer_id) {
+ requestData.create_customer = true
+ if (forceCreateCustomer) {
+ requestData.force_create_customer = true
+ }
+ }
+
+ const response = await request.post(`/api/mgr/orders/${orderId.value}/finalize`, requestData)
+
+ if (response.duplicate_found) {
+ pendingOrderData.value = { finalize: true }
+ duplicateCustomer.value = response.customer
+ showDuplicateDialog.value = true
+ finalizing.value = false
+ return
+ }
+
+ toast.add({
+ severity: 'success',
+ summary: _('success'),
+ detail: _('ms3_order_finalized'),
+ life: 3000,
+ })
+
+ await loadOrder()
+ await loadLogs()
+ } catch (error) {
+ console.error('[OrderView] Error finalizing order:', error)
+
+ const validationErrors = error.data?.object?.errors
+ if (validationErrors && Array.isArray(validationErrors) && validationErrors.length > 0) {
+ validationErrors.forEach(field => {
+ const fieldError = _(`ms3_order_err_${field}`) || field
+ toast.add({
+ severity: 'error',
+ summary: _('ms3_order_err_validation'),
+ detail: fieldError,
+ life: 5000,
+ })
+ })
+ } else {
+ toast.add({
+ severity: 'error',
+ summary: _('error'),
+ detail: error.message || _('ms3_order_finalize_error'),
+ life: 5000,
+ })
+ }
+ } finally {
+ finalizing.value = false
+ }
+ }
+
+ /**
+ * Collect order data from form
+ */
+ function collectOrderData() {
+ const orderData = {}
+
+ for (const field of orderFields.value) {
+ if (order.value[field.name] !== undefined && order.value[field.name] !== null) {
+ orderData[field.name] = order.value[field.name]
+ }
+ }
+
+ for (const field of addressFields.value) {
+ if (order.value[field.name] !== undefined && order.value[field.name] !== null) {
+ orderData[field.name] = order.value[field.name]
+ }
+ }
+
+ for (const field of orderExtraFields.value) {
+ if (order.value[field.key] !== undefined && order.value[field.key] !== null) {
+ orderData[field.key] = order.value[field.key]
+ }
+ }
+
+ for (const field of addressExtraFields.value) {
+ if (order.value[field.key] !== undefined && order.value[field.key] !== null) {
+ orderData[field.key] = order.value[field.key]
+ }
+ }
+
+ if (selectedCustomer.value?.id) {
+ orderData.customer_id = selectedCustomer.value.id
+ }
+
+ if (createCustomerFromData.value && !selectedCustomer.value?.id) {
+ orderData.create_customer = true
+ }
+
+ return orderData
+ }
+
+ /**
+ * Validate customer data before creation
+ * @returns {string|null} Error message or null if valid
+ */
+ function validateCustomerData(orderData) {
+ if (orderData.create_customer) {
+ const email = (orderData.email || '').trim()
+ const phone = (orderData.phone || '').trim()
+
+ if (!email && !phone) {
+ return _('ms3_customer_validation_email_or_phone')
+ }
+
+ if (email && !email.includes('@')) {
+ return _('ms3_customer_validation_invalid_email')
+ }
+ }
+
+ return null
+ }
+
+ /**
+ * Create new order
+ */
+ async function createOrder(forceCreateCustomer = false) {
+ saving.value = true
+
+ try {
+ const orderData = collectOrderData()
+
+ if (forceCreateCustomer) {
+ orderData.force_create_customer = true
+ }
+
+ const validationError = validateCustomerData(orderData)
+ if (validationError) {
+ toast.add({
+ severity: 'warn',
+ summary: _('warning'),
+ detail: validationError,
+ life: 5000,
+ })
+ saving.value = false
+ return
+ }
+
+ const response = await request.post('/api/mgr/orders', orderData)
+
+ if (response.duplicate_found) {
+ pendingOrderData.value = orderData
+ duplicateCustomer.value = response.customer
+ showDuplicateDialog.value = true
+ saving.value = false
+ return
+ }
+
+ toast.add({
+ severity: 'success',
+ summary: _('success'),
+ detail: _('ms3_order_created'),
+ life: 3000,
+ })
+
+ const createdOrderId = response.id || response.object?.id
+ if (createdOrderId) {
+ window.location.href = `?a=mgr/order&namespace=minishop3&id=${createdOrderId}`
+ }
+ } catch (error) {
+ console.error('[OrderView] Error creating order:', error)
+ toast.add({
+ severity: 'error',
+ summary: _('error'),
+ detail: error.message || _('error_saving_data'),
+ life: 5000,
+ })
+ } finally {
+ saving.value = false
+ }
+ }
+
+ return {
+ saving,
+ finalizing,
+ saveOrder,
+ confirmFinalizeOrder,
+ finalizeOrder,
+ collectOrderData,
+ validateCustomerData,
+ createOrder,
+ }
+}
diff --git a/vueManager/src/composables/useOrderView.js b/vueManager/src/composables/useOrderView.js
new file mode 100644
index 00000000..e7a87a3a
--- /dev/null
+++ b/vueManager/src/composables/useOrderView.js
@@ -0,0 +1,283 @@
+/**
+ * Order manager screen orchestrator (#339).
+ *
+ * Thin wiring layer: creates shared order refs and core computeds, then delegates
+ * loading, saving, products, options, cost recalculation, customer handling, and
+ * plugin tab registry to dedicated composables. The public orderContext contract
+ * and the return shape consumed by OrderView.vue are preserved unchanged.
+ */
+import { useLexicon } from '@vuetools/useLexicon'
+import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import { useOrderCostRecalc } from './useOrderCostRecalc.js'
+import { useOrderCustomer } from './useOrderCustomer.js'
+import { useOrderFieldHelpers } from './useOrderFieldHelpers.js'
+import { useOrderFormatters } from './useOrderFormatters.js'
+import { useOrderLoad } from './useOrderLoad.js'
+import { useOrderPluginTabs } from './useOrderPluginTabs.js'
+import { useOrderProductOptions } from './useOrderProductOptions.js'
+import { useOrderProducts } from './useOrderProducts.js'
+import { useOrderSave } from './useOrderSave.js'
+
+export function useOrderView() {
+ const toast = useToast()
+ const confirm = useConfirm()
+ const { _ } = useLexicon()
+
+ // Shared order ref — populated by useOrderLoad, read across composables.
+ const order = ref(null)
+ // Shared saving flag — mutated by useOrderSave, read by useOrderCustomer duplicate flow.
+ const saving = ref(false)
+
+ const orderId = computed(() => {
+ const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
+ const configId = ms3Config?.order_id
+ const rawId = configId || new URLSearchParams(window.location.search).get('id')
+ if (rawId === 'new') {
+ return 'new'
+ }
+ return parseInt(rawId) || 0
+ })
+
+ const isCreateMode = computed(() => {
+ return orderId.value === 'new' || orderId.value === 0
+ })
+
+ const managerConfig = computed(() => {
+ return typeof ms3 !== 'undefined' ? ms3.config : {}
+ })
+
+ // Cost recalculation owns baseline + recalc state; its sync helper is reused on load/save.
+ const costRecalc = useOrderCostRecalc({ order, orderId, isCreateMode, _, toast })
+
+ // Customer + duplicate dialog state — created before save so save can read its refs.
+ const orderActions = { finalizeOrder: null, createOrder: null }
+ const customer = useOrderCustomer({
+ _,
+ toast,
+ order,
+ orderId,
+ saving,
+ orderActions,
+ })
+
+ const load = useOrderLoad({
+ _,
+ toast,
+ order,
+ orderId,
+ selectedCustomer: customer.selectedCustomer,
+ costRecalcWarnings: costRecalc.costRecalcWarnings,
+ syncShippingPaymentBaselineFromOrder: costRecalc.syncShippingPaymentBaselineFromOrder,
+ })
+
+ const { formatDate, formatPrice, getFieldWidthClass } = useOrderFormatters()
+
+ const fieldHelpers = useOrderFieldHelpers({
+ formatDate,
+ formatPrice,
+ order,
+ orderComboOptions: load.orderComboOptions,
+ addressComboOptions: load.addressComboOptions,
+ statuses: load.statuses,
+ deliveries: load.deliveries,
+ payments: load.payments,
+ _,
+ })
+
+ const save = useOrderSave({
+ _,
+ toast,
+ confirm,
+ order,
+ orderId,
+ saving,
+ orderFields: load.orderFields,
+ addressFields: load.addressFields,
+ orderExtraFields: load.orderExtraFields,
+ addressExtraFields: load.addressExtraFields,
+ selectedCustomer: customer.selectedCustomer,
+ createCustomerFromData: customer.createCustomerFromData,
+ showDuplicateDialog: customer.showDuplicateDialog,
+ duplicateCustomer: customer.duplicateCustomer,
+ pendingOrderData: customer.pendingOrderData,
+ fieldHelpers,
+ loadOrder: load.loadOrder,
+ loadLogs: load.loadLogs,
+ syncShippingPaymentBaselineFromOrder: costRecalc.syncShippingPaymentBaselineFromOrder,
+ })
+
+ // Wire circular customer ↔ save dependency now that save.finalizeOrder / createOrder exist.
+ orderActions.finalizeOrder = save.finalizeOrder
+ orderActions.createOrder = save.createOrder
+
+ // Options composable reads editingProduct (owned by orchestrator, shared with products).
+ const editingProduct = ref(null)
+ const options = useOrderProductOptions({ _, editingProduct })
+
+ const products = useOrderProducts({
+ _,
+ toast,
+ confirm,
+ orderId,
+ products: load.products,
+ editingProduct,
+ loadProducts: load.loadProducts,
+ loadOrder: load.loadOrder,
+ options,
+ })
+
+ const tabs = useOrderPluginTabs({
+ _,
+ order,
+ orderId,
+ isCreateMode,
+ managerConfig,
+ })
+
+ const draftStatusId = computed(() => {
+ const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
+ return ms3Config?.status_draft || 1
+ })
+
+ const isDraft = computed(() => {
+ if (!order.value) return false
+ return parseInt(order.value.status_id) === parseInt(draftStatusId.value)
+ })
+
+ function goBack() {
+ window.location.href = '?a=mgr/orders&namespace=minishop3'
+ }
+
+ watch(
+ () => tabs.orderTabsConfig.value.map(t => t.key),
+ keys => {
+ if (keys.length === 0) return
+ if (!keys.includes(tabs.orderActiveTab.value)) {
+ tabs.orderActiveTab.value = keys[0]
+ }
+ },
+ { immediate: true }
+ )
+
+ watch(tabs.orderActiveTab, () => {
+ nextTick(() => {
+ const tab = tabs.orderTabsConfig.value.find(t => t.key === tabs.orderActiveTab.value)
+ if (
+ tab &&
+ tab.kind === 'plugin' &&
+ tab.type === 'extjs' &&
+ tab.xtype &&
+ !tabs.mountedExtPluginComponents.value[tab.key]
+ ) {
+ tabs.mountExtJSOrderPlugin(tab)
+ }
+ })
+ })
+
+ onBeforeUnmount(() => {
+ tabs.destroyPluginExtComponents()
+ if (window.MS3OrderTabsRegistry) {
+ window.MS3OrderTabsRegistry._onUnmounted()
+ }
+ })
+
+ onMounted(async () => {
+ if (isCreateMode.value) {
+ await load.initEmptyOrder()
+ } else {
+ await load.loadOrder()
+ }
+ })
+
+ const orderContext = {
+ order,
+ saving: save.saving,
+ isDraft,
+ isCreateMode,
+ finalizing: save.finalizing,
+ customerSuggestions: customer.customerSuggestions,
+ searchingCustomers: customer.searchingCustomers,
+ ...fieldHelpers,
+ formatDate,
+ formatPrice,
+ getFieldWidthClass,
+ saveOrder: save.saveOrder,
+ createOrder: save.createOrder,
+ goBack,
+ confirmFinalizeOrder: save.confirmFinalizeOrder,
+ handleProductAction: products.handleProductAction,
+ openAddProductDialog: products.openAddProductDialog,
+ searchCustomers: customer.searchCustomers,
+ onCustomerSelect: customer.onCustomerSelect,
+ clearCustomer: customer.clearCustomer,
+ recalculateOrderCost: costRecalc.recalculateOrderCost,
+ recalculatingCost: costRecalc.recalculatingCost,
+ costRecalcWarnings: costRecalc.costRecalcWarnings,
+ manualDeliveryCost: costRecalc.manualDeliveryCost,
+ hasUnsavedShippingPaymentChanges: costRecalc.hasUnsavedShippingPaymentChanges,
+ }
+
+ return {
+ orderContext,
+ registerPluginTab: tabs.registerPluginTab,
+ pluginVueProps: tabs.pluginVueProps,
+
+ loading: load.loading,
+ saving: save.saving,
+ order,
+ products: load.products,
+ productsColumns: load.productsColumns,
+ logs: load.logs,
+ orderFieldsBySection: load.orderFieldsBySection,
+ orderExtraFields: load.orderExtraFields,
+ orderActiveTab: tabs.orderActiveTab,
+ orderTabsConfig: tabs.orderTabsConfig,
+ isCreateMode,
+ selectedCustomer: customer.selectedCustomer,
+ createCustomerFromData: customer.createCustomerFromData,
+ addressFieldsBySection: load.addressFieldsBySection,
+ addressExtraFields: load.addressExtraFields,
+ goBack,
+ formatPrice,
+
+ editProductDialogVisible: products.editProductDialogVisible,
+ editingProduct: products.editingProduct,
+ editProductForm: products.editProductForm,
+ savingProduct: products.savingProduct,
+ optionsEditMode: options.optionsEditMode,
+ optionsTableData: options.optionsTableData,
+ productOptionFields: options.productOptionFields,
+ optionsJsonText: options.optionsJsonText,
+ optionsJsonError: options.optionsJsonError,
+ editedProductCost: products.editedProductCost,
+ switchOptionsMode: options.switchOptionsMode,
+ onOptionTypeChange: options.onOptionTypeChange,
+ onFieldKeyChange: options.onFieldKeyChange,
+ syncTableToJson: options.syncTableToJson,
+ addOptionRow: options.addOptionRow,
+ removeOptionRow: options.removeOptionRow,
+ saveEditedProduct: products.saveEditedProduct,
+ cancelEditProduct: products.cancelEditProduct,
+
+ addProductDialogVisible: products.addProductDialogVisible,
+ selectedProduct: products.selectedProduct,
+ productSuggestions: products.productSuggestions,
+ searchingProducts: products.searchingProducts,
+ addProductForm: products.addProductForm,
+ savingNewProduct: products.savingNewProduct,
+ newProductCost: products.newProductCost,
+ searchProducts: products.searchProducts,
+ onProductSelect: products.onProductSelect,
+ saveNewProduct: products.saveNewProduct,
+ cancelAddProduct: products.cancelAddProduct,
+
+ showDuplicateDialog: customer.showDuplicateDialog,
+ duplicateCustomer: customer.duplicateCustomer,
+ cancelDuplicateDialog: customer.cancelDuplicateDialog,
+ useDuplicateCustomer: customer.useDuplicateCustomer,
+ createNewCustomerAnyway: customer.createNewCustomerAnyway,
+ }
+}