Merge remote-tracking branch 'origin/master'

ui/src/pages/OrderPriceList.vue

@@ -150,10 +150,11 @@
     </div>
 
     <div
+      ref="tableWrapRef"
       class="table-wrap"
       :style="{
-        '--sticky-scroll-comp': `${stickyScrollComp}px`,
+        '--sticky-scroll-comp': `${scrollRightComp}px`,
-        '--sticky-left-width': `${stickyLeftWidth}px`
+        '--sticky-left-width': `${topScrollLeftWidth}px`
       }"
     >
       <div v-if="showGuidanceOverlay" class="empty-overlay">
@@ -670,7 +671,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { Notify } from 'quasar'
 import api from 'src/services/api'
 
@@ -722,6 +723,9 @@ const imageListCache = new Map()
 const variantCodeCollator = new Intl.Collator('tr', { numeric: true, sensitivity: 'base' })
 const mainTableRef = ref(null)
 const topScrollRef = ref(null)
+const tableWrapRef = ref(null)
+const tableWrapWidth = ref(0)
+let tableWrapResizeObserver = null
 let syncingScroll = false
 
 const productCardDialog = ref(false)
@@ -1473,9 +1477,16 @@ const filteredRows = computed(() => {
 })
 const tableMinWidth = computed(() => visibleColumns.value.reduce((sum, c) => sum + extractWidth(c.style), 0))
 const measuredTableScrollWidth = ref(0)
+const horizontalOverflowActive = computed(() => {
+  const wrapWidth = Number(tableWrapWidth.value || 0)
+  if (wrapWidth <= 0) return true
+  return tableMinWidth.value > wrapWidth - 8
+})
+const scrollRightComp = computed(() => horizontalOverflowActive.value ? stickyScrollComp.value : 0)
+const topScrollLeftWidth = computed(() => horizontalOverflowActive.value ? stickyLeftWidth.value : 0)
 const tableScrollWidth = computed(() => Math.max(
-  tableMinWidth.value + stickyScrollComp.value + 48,
+  tableMinWidth.value + scrollRightComp.value + (horizontalOverflowActive.value ? 48 : 0),
-  measuredTableScrollWidth.value
+  horizontalOverflowActive.value ? measuredTableScrollWidth.value : tableMinWidth.value
 ))
 const tableStyle = computed(() => ({
   width: `${tableMinWidth.value}px`,
@@ -1740,10 +1751,16 @@ function updateTableScrollWidth () {
   const measured = Math.max(
     Number(middle?.scrollWidth || 0),
     Number(table?.scrollWidth || 0),
-    tableMinWidth.value + stickyScrollComp.value + 48
+    tableMinWidth.value + scrollRightComp.value + (horizontalOverflowActive.value ? 48 : 0)
   )
-  if (measured > 0 && measured !== measuredTableScrollWidth.value) {
+  const nextMeasured = horizontalOverflowActive.value ? measured : tableMinWidth.value
-    measuredTableScrollWidth.value = measured
+  if (nextMeasured > 0 && nextMeasured !== measuredTableScrollWidth.value) {
+    measuredTableScrollWidth.value = nextMeasured
+  }
+  if (!horizontalOverflowActive.value) {
+    const top = topScrollRef.value
+    if (middle && middle.scrollLeft !== 0) middle.scrollLeft = 0
+    if (top && top.scrollLeft !== 0) top.scrollLeft = 0
   }
 }
 
@@ -1774,6 +1791,21 @@ function bindTableScrollSync () {
   }, { passive: true })
 }
 
+function updateTableWrapWidth () {
+  tableWrapWidth.value = Number(tableWrapRef.value?.clientWidth || 0)
+}
+
+function bindTableWrapResize () {
+  updateTableWrapWidth()
+  if (!tableWrapRef.value || tableWrapResizeObserver) return
+  if (typeof ResizeObserver === 'undefined') return
+  tableWrapResizeObserver = new ResizeObserver(() => {
+    updateTableWrapWidth()
+    updateTableScrollWidth()
+  })
+  tableWrapResizeObserver.observe(tableWrapRef.value)
+}
+
 function escapeHtml (value) {
   return String(value ?? '')
     .replace(/&/g, '&amp;')
@@ -1789,7 +1821,7 @@ watch(selectedProductCodes, (list) => {
   }
 })
 
-watch([tableMinWidth, rows, leftDetailsExpanded, selectedPriceOptions], async () => {
+watch([tableMinWidth, tableWrapWidth, rows, leftDetailsExpanded, selectedPriceOptions], async () => {
   await nextTick()
   bindTableScrollSync()
   updateTableScrollWidth()
@@ -1805,10 +1837,18 @@ onMounted(() => {
   void fetchServerFilterOptions('urunAnaGrubu', '')
   void fetchServerFilterOptions('productCode', '')
   void nextTick(() => {
+    bindTableWrapResize()
     bindTableScrollSync()
     updateTableScrollWidth()
   })
 })
+
+onBeforeUnmount(() => {
+  if (tableWrapResizeObserver) {
+    tableWrapResizeObserver.disconnect()
+    tableWrapResizeObserver = null
+  }
+})
 </script>
 
 <style scoped>