M_Kececi/bssapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix product performance grouped JSON build

Browse Source
This commit is contained in:
M_Kececi
2026-07-03 21:35:14 +03:00
parent 4ae6475875
commit 3697e35064
2 changed files with 160 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/pages/ProductPerformanceProfitability.vue
+151 -63
View File
@@ -112,6 +112,7 @@
:pagination="{ rowsPerPage: 0, sortBy: 'performance_score_total', descending: true }"
virtual-scroll
:virtual-scroll-item-size="64"
:virtual-scroll-slice-size="tableVirtualSliceSize"
>
<template #header-cell="props">
<q-th :props="props" class="filterable-header-cell">
@@ -224,6 +225,7 @@
:sort-method="sortProductGroupedTableRows"
virtual-scroll
:virtual-scroll-item-size="64"
:virtual-scroll-slice-size="tableVirtualSliceSize"
>
<template #header-cell="props">
<q-th :props="props" class="filterable-header-cell">
@@ -414,6 +416,7 @@
:sort-method="sortProductGroupedTableRows"
virtual-scroll
:virtual-scroll-item-size="64"
:virtual-scroll-slice-size="tableVirtualSliceSize"
>
<template #header-cell="props">
<q-th :props="props" class="filterable-header-cell">
@@ -556,6 +559,7 @@
:sort-method="sortProductGroupedTableRows"
virtual-scroll
:virtual-scroll-item-size="64"
:virtual-scroll-slice-size="tableVirtualSliceSize"
>
<template #header-cell="props">
<q-th :props="props" class="filterable-header-cell">
@@ -711,6 +715,7 @@
:sort-method="sortProductGroupedTableRows"
virtual-scroll
:virtual-scroll-item-size="64"
:virtual-scroll-slice-size="tableVirtualSliceSize"
>
<template #header-cell="props">
<q-th :props="props" class="filterable-header-cell">
@@ -896,6 +901,7 @@
:pagination="{ rowsPerPage: 0 }"
virtual-scroll
:virtual-scroll-item-size="64"
:virtual-scroll-slice-size="tableVirtualSliceSize"
>
<template #header-cell="props">
<q-th :props="props" class="filterable-header-cell">
@@ -1003,6 +1009,7 @@
:sort-method="sortProductGroupedTableRows"
virtual-scroll
:virtual-scroll-item-size="64"
:virtual-scroll-slice-size="tableVirtualSliceSize"
>
<template #header-cell="props">
<q-th :props="props" class="filterable-header-cell">
@@ -1160,6 +1167,7 @@
:pagination="{ rowsPerPage: 0 }"
virtual-scroll
:virtual-scroll-item-size="64"
:virtual-scroll-slice-size="tableVirtualSliceSize"
>
<template #header-cell="props">
<q-th :props="props" class="filterable-header-cell">
@@ -1261,6 +1269,7 @@
:pagination="{ rowsPerPage: 0 }"
virtual-scroll
:virtual-scroll-item-size="64"
:virtual-scroll-slice-size="tableVirtualSliceSize"
>
<template #header-cell="props">
<q-th :props="props" class="filterable-header-cell">
@@ -1532,6 +1541,9 @@ const orderMarketDetailRows = ref([])
const orderAnalysisLoaded = ref(false)
const orderProductCustomersLoaded = ref(false)
const orderMarketDetailsLoaded = ref(false)
const marketRowsLoaded = ref(false)
const countryRowsLoaded = ref(false)
const customerRowsLoaded = ref(false)
const orderAnalysisMode = ref('product')
const marketRows = ref([])
const countryRows = ref([])
@@ -1574,10 +1586,10 @@ const columnFilterSearch = reactive({})
const expandedGroups = ref({})
const lastManualExpandedGroupKey = ref('')
const selectedExpandLevelKeysByTab = reactive({
products: ['urun_ilk_grubu', 'askili_yan', 'kategori', 'urun_ana_grubu', 'urun_alt_grubu'],
product_detail: ['urun_ana_grubu', 'urun_alt_grubu', 'product_code', 'color_yaka'],
sales_color_yaka_market_customer: ['color_yaka', 'urun_ilk_grubu', 'askili_yan'],
idle: ['urun_ilk_grubu', 'askili_yan', 'kategori', 'urun_ana_grubu', 'urun_alt_grubu'],
products: ['urun_ilk_grubu', 'askili_yan', 'kategori'],
product_detail: ['urun_ana_grubu', 'urun_alt_grubu'],
sales_color_yaka_market_customer: ['color_yaka'],
idle: ['urun_ilk_grubu', 'askili_yan', 'kategori'],
sales_product_country_segment_market_customer: ['market_key', 'customer_code', 'customer_name', 'urun_ilk_grubu', 'askili_yan'],
sales_market_customer_product: ['market_key', 'customer_code', 'customer_name', 'urun_ilk_grubu', 'askili_yan'],
sales_country_segment_market_customer_product: ['market_key', 'customer_code', 'customer_name', 'urun_ilk_grubu', 'askili_yan'],
@@ -1586,7 +1598,15 @@ const selectedExpandLevelKeysByTab = reactive({
})
const productKpiFetchLimit = 50000
const reportFetchLimit = 50000
const maxBulkExpandKeys = 1200
const maxBulkExpandKeys = 500
const maxBackendExpandedKeys = 120
const tableVirtualSliceSize = 160
const maxAutoExpandLevelByTab = {
products: 2,
product_detail: 1,
idle: 2,
sales_color_yaka_market_customer: 0
}
const performanceTabs = [
{ name: 'products', icon: 'dashboard', label: 'Genel Özet KPI' },
{ name: 'product_detail', icon: 'category', label: 'Detay KPI' },
@@ -1597,7 +1617,7 @@ const performanceTabs = [
{ name: 'order_product_customers', icon: 'assignment_ind', label: 'Ürün > Piyasa > Müşteri Sipariş' },
{ name: 'order_market_details', icon: 'receipt_long', label: 'Piyasa > Müşteri > Ürün Sipariş' }
]
const pageBusy = computed(() => loading.value || backendGroupedLoading.value || imagePrimeLoading.value || filterBusy.value)
const pageBusy = computed(() => loading.value || filterBusy.value)
const pagination = ref({
page: 1,
@@ -2558,26 +2578,38 @@ const selectedExpandThroughLevel = computed(() => {
return indexes.length ? Math.max(...indexes) : -1
})
function maxAutoExpandThroughLevelForTab (tabKey = activeTab.value) {
return Number.isFinite(maxAutoExpandLevelByTab[tabKey]) ? maxAutoExpandLevelByTab[tabKey] : 1
}
function maxBackendExpandedKeysForTab (tabKey = activeTab.value) {
if (tabKey === 'product_detail') return 160
if (tabKey === 'products' || tabKey === 'idle') return maxBackendExpandedKeys
if (salesBreakdownTabKeys.includes(tabKey)) return 80
return 100
}
const autoExpandThroughLevel = computed(() => {
const selectedLevel = selectedExpandThroughLevel.value
const lastGroupLevel = Math.max(0, activeGroupLevels.value.length - 2)
return selectedLevel >= 0 ? Math.min(selectedLevel, lastGroupLevel) : Math.min(2, lastGroupLevel)
const requestedLevel = selectedLevel >= 0 ? selectedLevel : 2
return Math.min(requestedLevel, lastGroupLevel, maxAutoExpandThroughLevelForTab())
})
const tableFilterSourceMap = computed(() => ({
products: { rows: rows.value, columns: productColumns.value },
product_detail: { rows: detailProductRows.value, columns: productDetailColumns.value },
products: { rows: filterSourceRowsForTab('products', rows.value), columns: productColumns.value },
product_detail: { rows: filterSourceRowsForTab('product_detail', detailProductRows.value), columns: productDetailColumns.value },
general: { rows: generalRows.value, columns: generalColumns },
order_product_customers: { rows: orderProductCustomerRows.value, columns: orderProductCustomerColumns },
order_market_details: { rows: orderMarketDetailRows.value, columns: orderMarketDetailColumns },
idle: { rows: idleRows.value, columns: idleColumns },
order_product_customers: { rows: filterSourceRowsForTab('order_product_customers', orderProductCustomerRows.value), columns: orderProductCustomerColumns },
order_market_details: { rows: filterSourceRowsForTab('order_market_details', orderMarketDetailRows.value), columns: orderMarketDetailColumns },
idle: { rows: filterSourceRowsForTab('idle', idleRows.value), columns: idleColumns },
markets: { rows: marketRows.value, columns: marketColumns },
countries: { rows: countryRows.value, columns: countryColumns },
customers: { rows: customerRows.value, columns: customerColumns },
sales_color_yaka_market_customer: { rows: salesBreakdownRows.sales_color_yaka_market_customer, columns: visibleSalesBreakdownColumns.value },
sales_product_country_segment_market_customer: { rows: salesBreakdownRows.sales_product_country_segment_market_customer, columns: visibleSalesBreakdownColumns.value },
sales_market_customer_product: { rows: salesBreakdownRows.sales_market_customer_product, columns: visibleSalesBreakdownColumns.value },
sales_country_segment_market_customer_product: { rows: salesBreakdownRows.sales_country_segment_market_customer_product, columns: visibleSalesBreakdownColumns.value }
sales_color_yaka_market_customer: { rows: filterSourceRowsForTab('sales_color_yaka_market_customer', salesBreakdownRows.sales_color_yaka_market_customer), columns: visibleSalesBreakdownColumns.value },
sales_product_country_segment_market_customer: { rows: filterSourceRowsForTab('sales_product_country_segment_market_customer', salesBreakdownRows.sales_product_country_segment_market_customer), columns: visibleSalesBreakdownColumns.value },
sales_market_customer_product: { rows: filterSourceRowsForTab('sales_market_customer_product', salesBreakdownRows.sales_market_customer_product), columns: visibleSalesBreakdownColumns.value },
sales_country_segment_market_customer_product: { rows: filterSourceRowsForTab('sales_country_segment_market_customer_product', salesBreakdownRows.sales_country_segment_market_customer_product), columns: visibleSalesBreakdownColumns.value }
}))
const filteredProductRows = computed(() => filterRowsForTable('products', rows.value, productColumns.value))
@@ -2722,11 +2754,34 @@ function buildGroupedTableRows (tableKey, sourceRows) {
}
function backendRowsForTab (tabKey, fallbackRows) {
if (hasActiveTableFilters(tabKey)) return fallbackRows
const rows = backendGroupedRows.value[tabKey]
const backendRows = Array.isArray(rows) && rows.length ? rows : []
const sourceRows = backendRows.length ? backendRows : fallbackRows
if (hasActiveTableFilters(tabKey)) {
return filterRowsForTable(tabKey, sourceRows, columnsForTableKey(tabKey))
}
return sourceRows
}
function filterSourceRowsForTab (tabKey, fallbackRows) {
const rows = backendGroupedRows.value[tabKey]
return Array.isArray(rows) && rows.length ? rows : fallbackRows
}
function columnsForTableKey (tabKey) {
if (tabKey === 'products') return productColumns.value
if (tabKey === 'product_detail') return productDetailColumns.value
if (tabKey === 'general') return generalColumns
if (tabKey === 'order_product_customers') return orderProductCustomerColumns
if (tabKey === 'order_market_details') return orderMarketDetailColumns
if (tabKey === 'idle') return idleColumns
if (tabKey === 'markets') return marketColumns
if (tabKey === 'countries') return countryColumns
if (tabKey === 'customers') return customerColumns
if (salesBreakdownTabKeys.includes(tabKey)) return visibleSalesBreakdownColumns.value
return productColumns.value
}
function collectGroupKeys (out, sourceRows, level, parentKeys, levels = groupLevels, maxLevel = levels.length - 1) {
if (out.length >= maxBulkExpandKeys) return
if (level >= levels.length) return
@@ -3327,7 +3382,8 @@ function collapseAllProductGroups () {
function expandSelectedProductGroups () {
const keys = productAutoExpandKeys.value
const expandableKeys = keys.slice(0, maxBulkExpandKeys)
const maxKeys = Math.min(maxBulkExpandKeys, maxBackendExpandedKeysForTab(activeTab.value))
const expandableKeys = keys.slice(0, maxKeys)
const tabPrefix = `tab:${activeTab.value}|`
const next = Object.fromEntries(
Object.entries(expandedGroups.value).filter(([key]) => !key.startsWith(tabPrefix))
@@ -4132,16 +4188,22 @@ function backendGroupedSupportedTab (tabKey = activeTab.value) {
function activeExpandedGroupKeys () {
const tabPrefix = `tab:${activeTab.value}|`
const validFields = new Set(activeGroupLevels.value.map(level => level.key))
const maxKeys = maxBackendExpandedKeysForTab(activeTab.value)
const keys = Object.entries(expandedGroups.value)
.filter(([, value]) => value === true)
.map(([key]) => key)
.filter(key => key.startsWith(tabPrefix))
.filter(key => key.split('|').slice(1).every(part => validFields.has(String(part).split(':')[0])))
.sort((a, b) => {
const depthDiff = a.split('|').length - b.split('|').length
if (depthDiff !== 0) return depthDiff
return a.localeCompare(b, 'tr', { numeric: true })
})
const manualKey = lastManualExpandedGroupKey.value
const out = []
if (manualKey && keys.includes(manualKey)) out.push(manualKey)
for (const key of keys) {
if (out.length >= maxBulkExpandKeys) break
if (out.length >= maxKeys) break
if (key !== manualKey) out.push(key)
}
return out
@@ -4168,12 +4230,12 @@ function scheduleLoadBackendGroupedRows () {
}
function switchPerformanceTab (tabName) {
if (!tabName || tabName === activeTab.value || pageBusy.value) return
if (!tabName || tabName === activeTab.value || loading.value) return
backendGroupedLoading.value = true
activeTab.value = tabName
}
async function loadBackendGroupedRows () {
async function loadBackendGroupedRows (options = {}) {
const tabKey = activeTab.value
if (!backendGroupedSupportedTab(tabKey)) return
pruneActiveExpandedGroups()
@@ -4189,7 +4251,7 @@ async function loadBackendGroupedRows () {
}
try {
const startedAt = performance.now()
const rows = await performanceStore.fetchGroupedRows(params)
const rows = await performanceStore.fetchGroupedRows(params, { force: options.force === true })
const normalizedRows = Array.isArray(rows) ? rows.map(row => normalizeGroupedDisplayRow(tabKey, row)) : []
backendGroupedRows.value = {
...backendGroupedRows.value,
@@ -4269,13 +4331,10 @@ async function timedProductPerformanceGet (label, url, config = {}) {
async function reload () {
loading.value = true
try {
const salesBreakdownRequests = salesBreakdownTabKeys.map(tabKey => {
return timedProductPerformanceGet(`sales-breakdown:${tabKey}`, '/pricing/product-performance/sales-breakdown', {
params: { limit: reportFetchLimit, mode: salesBreakdownModes[tabKey] },
timeout: 60000
})
})
const [summaryResp, listResp, generalResp, marketResp, countryResp, customerResp, ...salesBreakdownResp] = await Promise.all([
marketRowsLoaded.value = false
countryRowsLoaded.value = false
customerRowsLoaded.value = false
const [summaryResp, listResp, generalResp] = await Promise.all([
timedProductPerformanceGet('summary', '/pricing/product-performance/summary', { timeout: 60000 }),
timedProductPerformanceGet('product-kpi', '/pricing/product-performance', {
params: {
@@ -4284,14 +4343,7 @@ async function reload () {
},
timeout: 60000
}),
timedProductPerformanceGet('general', '/pricing/product-performance/general', { params: { limit: reportFetchLimit }, timeout: 60000 }),
timedProductPerformanceGet('markets', '/pricing/product-performance/markets', { params: { limit: reportFetchLimit }, timeout: 60000 }),
timedProductPerformanceGet('countries', '/pricing/product-performance/countries', { params: { limit: reportFetchLimit }, timeout: 60000 }),
timedProductPerformanceGet('customers', '/pricing/product-performance/customers', {
params: { limit: reportFetchLimit, breakdown: customerBreakdown.value },
timeout: 60000
}),
...salesBreakdownRequests
timedProductPerformanceGet('general', '/pricing/product-performance/general', { params: { limit: reportFetchLimit }, timeout: 60000 })
])
summary.value = summaryResp?.data || {}
const normalizedGeneralRows = (Array.isArray(generalResp?.data) ? generalResp.data : []).map(normalizeGeneralRow)
@@ -4301,25 +4353,8 @@ async function reload () {
return normalizeRow({ ...row, ...generalMetrics })
})
generalRows.value = normalizedGeneralRows
marketRows.value = Array.isArray(marketResp?.data) ? marketResp.data : []
countryRows.value = (Array.isArray(countryResp?.data) ? countryResp.data : []).map(row => ({
...row,
country_key: `${row.country || '-'}|${row.customer_segment || '-'}|${row.market_key || '-'}`
}))
customerRows.value = (Array.isArray(customerResp?.data) ? customerResp.data : []).map(row => ({
...row,
customer_key: `${row.breakdown || '-'}|${row.market_key || '-'}|${row.country || '-'}|${row.customer_segment || '-'}|${row.customer_code || '-'}`
}))
salesBreakdownTabKeys.forEach((tabKey, index) => {
salesBreakdownRows[tabKey] = (Array.isArray(salesBreakdownResp[index]?.data) ? salesBreakdownResp[index].data : []).map(normalizeSalesBreakdownRow)
})
if (activeTab.value === 'order_product_customers') {
await loadOrderProductCustomers(false)
}
if (activeTab.value === 'order_market_details') {
await loadOrderMarketDetails(false)
}
await loadBackendGroupedRows()
await ensureActiveTabData(false)
await loadBackendGroupedRows({ force: true })
} catch (err) {
Notify.create({ type: 'negative', message: err?.response?.data || err?.message || 'Ürün performans verisi alınamadı' })
} finally {
@@ -4353,6 +4388,64 @@ async function loadOrderMarketDetails (showLoading = true) {
}
}
async function loadMarketRows (showLoading = true) {
if (marketRowsLoaded.value) return
if (showLoading) loading.value = true
try {
const resp = await timedProductPerformanceGet('markets', '/pricing/product-performance/markets', { params: { limit: reportFetchLimit }, timeout: 60000 })
marketRows.value = Array.isArray(resp?.data) ? resp.data : []
marketRowsLoaded.value = true
} catch (err) {
Notify.create({ type: 'negative', message: err?.response?.data || err?.message || 'Piyasa performans verisi alınamadı' })
} finally {
if (showLoading) loading.value = false
}
}
async function loadCountryRows (showLoading = true) {
if (countryRowsLoaded.value) return
if (showLoading) loading.value = true
try {
const resp = await timedProductPerformanceGet('countries', '/pricing/product-performance/countries', { params: { limit: reportFetchLimit }, timeout: 60000 })
countryRows.value = (Array.isArray(resp?.data) ? resp.data : []).map(row => ({
...row,
country_key: `${row.country || '-'}|${row.customer_segment || '-'}|${row.market_key || '-'}`
}))
countryRowsLoaded.value = true
} catch (err) {
Notify.create({ type: 'negative', message: err?.response?.data || err?.message || 'Ülke performans verisi alınamadı' })
} finally {
if (showLoading) loading.value = false
}
}
async function loadCustomerRows (showLoading = true) {
if (customerRowsLoaded.value) return
if (showLoading) loading.value = true
try {
const resp = await timedProductPerformanceGet('customers', '/pricing/product-performance/customers', {
params: { limit: reportFetchLimit, breakdown: customerBreakdown.value },
timeout: 60000
})
customerRows.value = (Array.isArray(resp?.data) ? resp.data : []).map(row => ({
...row,
customer_key: `${row.breakdown || '-'}|${row.market_key || '-'}|${row.country || '-'}|${row.customer_segment || '-'}|${row.customer_code || '-'}`
}))
customerRowsLoaded.value = true
} catch (err) {
Notify.create({ type: 'negative', message: err?.response?.data || err?.message || 'Müşteri performans verisi alınamadı' })
} finally {
if (showLoading) loading.value = false
}
}
async function ensureActiveTabData (showLoading = true) {
const tab = activeTab.value
if (tab === 'markets') return loadMarketRows(showLoading)
if (tab === 'countries') return loadCountryRows(showLoading)
if (tab === 'customers') return loadCustomerRows(showLoading)
}
async function loadOrderAnalysis (showLoading = true) {
if (showLoading) loading.value = true
try {
@@ -4388,13 +4481,8 @@ function bucketColor (value) {
}
}
watch(activeTab, tab => {
if (tab === 'order_product_customers' && !orderProductCustomersLoaded.value) {
void loadOrderProductCustomers(true)
}
if (tab === 'order_market_details' && !orderMarketDetailsLoaded.value) {
void loadOrderMarketDetails(true)
}
watch(activeTab, () => {
void ensureActiveTabData(false)
scheduleLoadBackendGroupedRows()
})