Fix product performance grouped JSON build

ui/src/pages/ProductPerformanceProfitability.vue

@@ -37,12 +37,14 @@
         />
         <q-btn-dropdown
           v-model="detailLevelMenuOpen"
+          split
           dense
           outline
           color="primary"
           :icon="allProductGroupsExpanded ? 'unfold_less' : 'unfold_more'"
           :label="allProductGroupsExpanded ? 'Detayları Kapat' : 'Tüm Detayları Aç'"
           :disable="pageBusy"
+          @click="toggleAllProductGroups"
         >
           <div class="detail-level-menu">
             <q-option-group
@@ -1623,9 +1625,14 @@ const tableVirtualSliceSize = 160
 const productThumbVirtualItemSize = 236
 const maxAutoExpandLevelByTab = {
   products: 8,
-  product_detail: 4,
+  product_detail: 8,
-  idle: 7,
+  idle: 8,
-  sales_color_yaka_market_customer: 5
+  sales_color_yaka_market_customer: 8,
+  sales_product_country_segment_market_customer: 8,
+  sales_market_customer_product: 8,
+  sales_country_segment_market_customer_product: 8,
+  order_product_customers: 8,
+  order_market_details: 8
 }
 const performanceTabs = [
   { name: 'products', icon: 'dashboard', label: 'Genel Özet KPI' },
@@ -2631,7 +2638,7 @@ const selectedExpandThroughLevel = computed(() => {
 })
 
 function maxAutoExpandThroughLevelForTab (tabKey = activeTab.value) {
-  return Number.isFinite(maxAutoExpandLevelByTab[tabKey]) ? maxAutoExpandLevelByTab[tabKey] : 1
+  return Number.isFinite(maxAutoExpandLevelByTab[tabKey]) ? maxAutoExpandLevelByTab[tabKey] : 8
 }
 
 function maxBackendExpandedKeysForTab (tabKey = activeTab.value) {
@@ -2648,6 +2655,11 @@ const autoExpandThroughLevel = computed(() => {
   return Math.min(requestedLevel, lastGroupLevel, maxAutoExpandThroughLevelForTab())
 })
 
+const fullExpandThroughLevel = computed(() => {
+  const lastGroupLevel = Math.max(0, activeGroupLevels.value.length - 2)
+  return Math.min(lastGroupLevel, maxAutoExpandThroughLevelForTab())
+})
+
 const tableFilterSourceMap = computed(() => ({
   products: { rows: filterSourceRowsForTab('products', rows.value), columns: productColumns.value },
   product_detail: { rows: filterSourceRowsForTab('product_detail', detailProductRows.value), columns: productDetailColumns.value },
@@ -2693,24 +2705,25 @@ const activeGroupSourceRows = computed(() => {
 
 const columnFilterOptionMap = computed(() => {
   const out = {}
-  for (const [tableKey, source] of Object.entries(tableFilterSourceMap.value)) {
+  const tableKey = isProductKpiTab.value ? activeProductTableKey.value : activeTab.value
-    out[tableKey] = {}
+  const source = tableFilterSourceMap.value[tableKey]
-    for (const col of source.columns) {
+  if (!source) return out
-      if (!isColumnFilterable(col.name)) continue
+  out[tableKey] = {}
-      const seen = new Map()
+  for (const col of source.columns) {
-      for (const row of source.rows) {
+    if (!isColumnFilterable(col.name)) continue
-        const value = columnFilterValue(row, col)
+    const seen = new Map()
-        if (!value) continue
+    for (const row of source.rows) {
-        if (!seen.has(value)) {
+      const value = columnFilterValue(row, col)
-          seen.set(value, {
+      if (!value) continue
-            label: columnFilterLabel(row, col),
+      if (!seen.has(value)) {
-            value
+        seen.set(value, {
-          })
+          label: columnFilterLabel(row, col),
-        }
+          value
+        })
       }
-      out[tableKey][col.name] = Array.from(seen.values())
-        .sort((a, b) => String(a.label).localeCompare(String(b.label), 'tr', { numeric: true }))
     }
+    out[tableKey][col.name] = Array.from(seen.values())
+      .sort((a, b) => String(a.label).localeCompare(String(b.label), 'tr', { numeric: true }))
   }
   return out
 })
@@ -2733,6 +2746,18 @@ const displayIdleTableRows = computed(() => backendRowsForTab('idle', idleTableR
 const displayOrderProductCustomerTableRows = computed(() => backendRowsForTab('order_product_customers', orderProductCustomerTableRows.value))
 const displayOrderMarketDetailTableRows = computed(() => backendRowsForTab('order_market_details', orderMarketDetailTableRows.value))
 const displayActiveSalesBreakdownTableRows = computed(() => backendRowsForTab(activeTab.value, activeSalesBreakdownTableRows.value))
+const activeDisplayedTableRows = computed(() => {
+  if (isProductKpiTab.value) return displayProductKpiTableRows.value
+  if (activeTab.value === 'idle') return displayIdleTableRows.value
+  if (activeTab.value === 'order_product_customers') return displayOrderProductCustomerTableRows.value
+  if (activeTab.value === 'order_market_details') return displayOrderMarketDetailTableRows.value
+  if (salesBreakdownTabKeys.includes(activeTab.value)) return displayActiveSalesBreakdownTableRows.value
+  if (activeTab.value === 'general') return filteredGeneralRows.value
+  if (activeTab.value === 'markets') return filteredMarketRows.value
+  if (activeTab.value === 'countries') return filteredCountryRows.value
+  if (activeTab.value === 'customers') return filteredCustomerRows.value
+  return []
+})
 
 const detailMainGroupOptions = computed(() => {
   const grouped = new Map()
@@ -2785,7 +2810,7 @@ const productAutoExpandKeys = computed(() => {
 })
 
 const allProductGroupsExpanded = computed(() => {
-  return selectedExpandThroughLevel.value >= autoExpandThroughLevel.value
+  return selectedExpandThroughLevel.value >= fullExpandThroughLevel.value
 })
 
 function appendGroupRows (out, sourceRows, level, parentKeys, levels = groupLevels) {
@@ -3485,6 +3510,15 @@ function toggleGroup (key) {
   applyActiveExpansionThroughLevel(isGroupExpanded(key) ? level - 1 : level)
 }
 
+async function toggleAllProductGroups () {
+  if (allProductGroupsExpanded.value) await collapseAllProductGroups()
+  else {
+    detailLevelMenuOpen.value = false
+    applyActiveExpansionThroughLevel(fullExpandThroughLevel.value)
+    await nextTick()
+  }
+}
+
 async function collapseAllProductGroups () {
   if (bulkExpandLoading.value) return
   detailLevelMenuOpen.value = false
@@ -3664,26 +3698,8 @@ function selectAllColumnFilterOptions (tableKey, name) {
 }
 
 function runWithFilterBusy (apply) {
-  filterBusy.value = true
+  apply()
-  const done = () => {
+  syncExpansionAfterFilterChange()
-    filterBusy.value = false
-    syncExpansionAfterFilterChange()
-  }
-  const execute = () => {
-    apply()
-    if (typeof window === 'undefined') {
-      setTimeout(done, 0)
-      return
-    }
-    window.requestAnimationFrame(() => {
-      window.requestAnimationFrame(done)
-    })
-  }
-  if (typeof window === 'undefined') {
-    execute()
-    return
-  }
-  window.requestAnimationFrame(execute)
 }
 
 function syncExpansionAfterFilterChange () {
@@ -4819,17 +4835,7 @@ watch(activeTab, () => {
   setupTopScrollbarSync()
 })
 
-watch([
+watch(activeDisplayedTableRows, () => {
-  displayProductKpiTableRows,
-  displayIdleTableRows,
-  displayOrderProductCustomerTableRows,
-  displayOrderMarketDetailTableRows,
-  displayActiveSalesBreakdownTableRows,
-  filteredGeneralRows,
-  filteredMarketRows,
-  filteredCountryRows,
-  filteredCustomerRows
-], () => {
   setupTopScrollbarSync()
 }, { flush: 'post' })
 
@@ -4846,10 +4852,9 @@ watch(selectedDetailMainGroup, () => {
   }
 })
 
-watch(productTableRows, tableRows => {
+watch(activeDisplayedTableRows, tableRows => {
   if (!isProductKpiTab.value) return
-  const sourceRows = activeTab.value === 'product_detail' ? displayDetailProductTableRows.value : tableRows
+  const imageRows = tableRows
-  const imageRows = sourceRows
     .filter(row => !row.__group || groupShowsImage(row))
     .slice(0, 240)
   void primeProductImages(imageRows)