Merge remote-tracking branch 'origin/master'

ui/src/pages/OrderPriceList.vue

@@ -102,7 +102,7 @@
               icon="view_sidebar"
               :label="leftDetailsExpanded ? 'Detaylari Gizle' : 'Detaylari Goster'"
               :disable="pageBusy"
-              @click="leftDetailsExpanded = !leftDetailsExpanded"
+              @click="toggleLeftDetails"
             />
             <q-toggle
               v-model="showInStockOnly"
@@ -1431,23 +1431,13 @@ const allColumns = [
   ])
 ]
 
-const compactHiddenColumnNames = new Set([
-  'variantStocks',
-  'campaignLabel',
-  'campaignRate',
-  'askiliYan',
-  'kategori',
-  'urunIlkGrubu',
-  'urunAnaGrubu',
-  'urunAltGrubu',
-  'icerik',
-  'karisim'
-])
+const compactLeftColumnNames = ['image', 'brandGroupSelection', 'marka', 'productCode', 'variantCodes', 'variantStocks', 'campaignLabel']
+const compactLeftColumnNameSet = new Set(compactLeftColumnNames)
 
 const visibleColumns = computed(() => allColumns.filter((c) => {
   if (/^(usd|eur|try)[1-6]$/.test(c.name)) return selectedPriceSet.value.has(c.name)
   if (/^(usd|eur|try)[1-6]Campaign$/.test(c.name)) return selectedPriceSet.value.has(c.name.replace(/Campaign$/, ''))
-  if (!leftDetailsExpanded.value && compactHiddenColumnNames.has(c.name)) return false
+  if (!leftDetailsExpanded.value) return compactLeftColumnNameSet.has(c.name)
   return true
 }))
 
@@ -1518,8 +1508,7 @@ const stickyColumnNames = computed(() => {
     'icerik',
     'karisim'
   ]
-  const compact = ['image', 'brandGroupSelection', 'marka', 'productCode', 'variantCodes']
-  return (leftDetailsExpanded.value ? expanded : compact).filter((x) => visible.has(x))
+  return (leftDetailsExpanded.value ? expanded : compactLeftColumnNames).filter((x) => visible.has(x))
 })
 const stickyBoundaryColumnName = computed(() => {
   const list = stickyColumnNames.value
@@ -1768,6 +1757,31 @@ function updateTableScrollWidth () {
     if (middle && middle.scrollLeft !== 0) middle.scrollLeft = 0
     if (top && top.scrollLeft !== 0) top.scrollLeft = 0
   }
+  clampTableScroll()
+}
+
+function clampTableScroll () {
+  const middle = getTableMiddleEl()
+  const top = topScrollRef.value
+  if (!middle) return
+  const maxMiddleLeft = Math.max(0, middle.scrollWidth - middle.clientWidth)
+  if (middle.scrollLeft > maxMiddleLeft) middle.scrollLeft = maxMiddleLeft
+  if (top) {
+    const maxTopLeft = Math.max(0, top.scrollWidth - top.clientWidth)
+    if (top.scrollLeft > maxTopLeft) top.scrollLeft = maxTopLeft
+    if (Math.abs(top.scrollLeft - middle.scrollLeft) > 1) {
+      top.scrollLeft = Math.min(maxTopLeft, middle.scrollLeft)
+    }
+  }
+}
+
+async function toggleLeftDetails () {
+  leftDetailsExpanded.value = !leftDetailsExpanded.value
+  measuredTableScrollWidth.value = 0
+  await nextTick()
+  updateTableWrapWidth()
+  bindTableScrollSync()
+  updateTableScrollWidth()
 }
 
 function onTopScroll () {
@@ -1828,6 +1842,7 @@ watch(selectedProductCodes, (list) => {
 })
 
 watch([tableMinWidth, tableWrapWidth, rows, leftDetailsExpanded, selectedPriceOptions], async () => {
+  measuredTableScrollWidth.value = 0
   await nextTick()
   bindTableScrollSync()
   updateTableScrollWidth()