From 20cd949df6ea1d14dbd275fe01e2cbd2cc3dcb1d Mon Sep 17 00:00:00 2001
From: taiebot <13300652+taiebot@users.noreply.github.com>
Date: Mon, 3 Aug 2026 21:32:02 +0200
Subject: [PATCH] Fix(embedded) : column order, sort, scrolls overlays,
 refresh, table height

* Fix: column order for embedded table

Signed-off-by: taiebot <13300652+taiebot@users.noreply.github.com>

* fix(widget): use fresh store data for rows/columns in ContentReferenceWidget

Signed-off-by: taiebot <13300652+taiebot@users.noreply.github.com>

* Fix embed col order (#12)

* Fix: column order for embedded table

Signed-off-by: taiebot <13300652+taiebot@users.noreply.github.com>

* fix(widget): use fresh store data for rows/columns in ContentReferenceWidget

Signed-off-by: taiebot <13300652+taiebot@users.noreply.github.com>

---------

Signed-off-by: taiebot <13300652+taiebot@users.noreply.github.com>

* Embed scroll (#11)

* Adjust height and z-index in ContentReferenceWidget (#7)

Signed-off-by: taiebot <dedreuil@yahoo.fr>

* Fix Change height of tables-content-widget to auto

Signed-off-by: taiebot <13300652+taiebot@users.noreply.github.com>

---------

Signed-off-by: taiebot <dedreuil@yahoo.fr>
Signed-off-by: taiebot <13300652+taiebot@users.noreply.github.com>

* Fix: enable sorting on ContentReferenceWidget

Signed-off-by: taiebot <13300652+taiebot@users.noreply.github.com>

* Fix watcher for localViewSetting with debug logging

Added a watcher for localViewSetting to log changes for debugging purposes.

Signed-off-by: taiebot <13300652+taiebot@users.noreply.github.com>

* Fix Remove debug watcher for localViewSetting

Removed temporary debug watcher for localViewSetting.

Signed-off-by: taiebot <13300652+taiebot@users.noreply.github.com>

* Fix again

Refactor loadColumnsFromBE to improve column sorting logic and add comments for clarity.

Signed-off-by: taiebot <13300652+taiebot@users.noreply.github.com>

---------

Signed-off-by: taiebot <13300652+taiebot@users.noreply.github.com>
Signed-off-by: taiebot <dedreuil@yahoo.fr>
---
 src/store/data.js                    |  25 +++---
 src/views/ContentReferenceWidget.vue | 116 ++++++++++++++++++---------
 2 files changed, 90 insertions(+), 51 deletions(-)

diff --git a/src/store/data.js b/src/store/data.js
index 75fc23a92f..1ef85f989e 100644
--- a/src/store/data.js
+++ b/src/store/data.js
@@ -91,24 +91,27 @@ export const useDataStore = defineStore('data', {
 			this.loading[stateId] = false
 			return columns
 		},
-
+		
 		async loadColumnsFromBE({ view, tableId }) {
 			let allColumns = await this.getColumnsFromBE({ tableId, viewId: view?.id })
 			if (view) {
-				// Transform array to object for faster access
+				// Meta columns aren't real DB columns, so they never come back
+				// from the fetch above -- append any this view has settings for.
 				const columnSettingsMap = view.columnSettings?.reduce((acc, item) => {
 					acc[item.columnId] = item
 					return acc
 				}, {}) ?? {}
-
 				allColumns = allColumns.concat(MetaColumns.filter(col => columnSettingsMap[col.id]))
-				if (view.columnSettings) {
-					allColumns = allColumns.sort((a, b) => {
-						const orderA = columnSettingsMap[a.id]?.order ?? Number.MAX_SAFE_INTEGER
-						const orderB = columnSettingsMap[b.id]?.order ?? Number.MAX_SAFE_INTEGER
-						return orderA - orderB
-					})
-				}
+		
+				// Real columns carry their own order via viewColumnInformation;
+				// meta columns fall back to columnSettingsMap since they were
+				// just concatenated above and never went through server-side
+				// enhancement.
+				allColumns = allColumns.sort((a, b) => {
+					const orderA = a.viewColumnInformation?.order ?? columnSettingsMap[a.id]?.order ?? Number.MAX_SAFE_INTEGER
+					const orderB = b.viewColumnInformation?.order ?? columnSettingsMap[b.id]?.order ?? Number.MAX_SAFE_INTEGER
+					return orderA - orderB
+				})
 			} else {
 				// no view: keep the backend-ordered result (ColumnService::findAllByTable already applies columnOrder)
 			}
@@ -116,7 +119,7 @@ export const useDataStore = defineStore('data', {
 			this.columns[stateId] = allColumns
 			return true
 		},
-
+		
 		async loadPublicColumnsFromBE({ token }) {
 			const stateId = 'public-' + token
 			this.loading[stateId] = true
diff --git a/src/views/ContentReferenceWidget.vue b/src/views/ContentReferenceWidget.vue
index f4749867d1..fca62f12d6 100644
--- a/src/views/ContentReferenceWidget.vue
+++ b/src/views/ContentReferenceWidget.vue
@@ -19,17 +19,18 @@
 		<div v-if="rows && rows.length > 0" class="nc-table">
 			<NcTable
 				:rows="filteredRows"
-				:columns="richObject.columns"
+				:columns="columns"
 				:element-id="richObject.id"
-				:is-view="Boolean(richObject.type)"
+				:is-view="isView"
+				v-model:view-setting="localViewSetting"
 				v-bind="tablePermissions"
 				@edit-row="editRow"
 				@copy-row="copyRow"
 				@delete-row="deleteRow" />
 		</div>
 		<CreateRow
-			:columns="richObject.columns"
-			:is-view="Boolean(richObject.type)"
+			:columns="columns"
+			:is-view="isView"
 			:element-id="richObject.id"
 			:show-modal="showCopyRow"
 			:prefill-data="copyPrefillData"
@@ -38,11 +39,11 @@
 			v-if="rowToDelete !== null"
 			:rows-to-delete="[rowToDelete]"
 			:element-id="richObject.id"
-			:is-view="Boolean(richObject.type)"
+			:is-view="isView"
 			@cancel="rowToDelete = null" />
 	</div>
 </template>
-
+ 
 <script>
 import NcTable from '../shared/components/ncTable/NcTable.vue'
 import Options from '../shared/components/ncTable/sections/Options.vue'
@@ -54,9 +55,9 @@ import { useResizeObserver } from '@vueuse/core'
 import { spawnDialog } from '@nextcloud/vue/functions/dialog'
 import { useTablesStore } from '../store/store.js'
 import { useDataStore } from '../store/data.js'
-
+ 
 export default {
-
+ 
 	components: {
 		NcTable,
 		Options,
@@ -64,9 +65,9 @@ export default {
 		DeleteRows,
 		NcLoadingIcon,
 	},
-
+ 
 	mixins: [permissionsMixin],
-
+ 
 	props: {
 		richObjectType: {
 			type: String,
@@ -81,11 +82,12 @@ export default {
 			default: true,
 		},
 	},
-
+ 
 	data() {
 		return {
 			searchExp: null,
 			localRows: [], // Keep as fallback only
+			localViewSetting: {},
 			showCopyRow: false,
 			copyPrefillData: null,
 			rowToDelete: null,
@@ -93,8 +95,11 @@ export default {
 			dataStore: null,
 		}
 	},
-
+ 
 	computed: {
+		isView() {
+			return Boolean(this.richObject?.type)
+		},
 		tablePermissions() {
 			return {
 				canCreateRows: this.canCreateRowInElement(this.richObject),
@@ -124,7 +129,7 @@ export default {
 			}
 		},
 		getRows() {
-			return this.dataStore ? this.dataStore.getRows(false, this.richObject.id) : []
+			return this.dataStore ? this.dataStore.getRows(this.isView, this.richObject.id) : []
 		},
 		// Use computed property to get rows from store or richObject
 		rows() {
@@ -136,8 +141,19 @@ export default {
 			// Fallback to richObject rows or local rows
 			return this.richObject?.rows || this.localRows
 		},
+		getColumns() {
+			return this.dataStore ? this.dataStore.getColumns(this.isView, this.richObject.id) : []
+		},
+		// Prefer fresh store data over the (possibly stale) richObject snapshot
+		columns() {
+			const storeColumns = this.getColumns
+			if (storeColumns && storeColumns.length > 0) {
+				return storeColumns
+			}
+			return this.richObject?.columns || []
+		},
 	},
-
+ 
 	watch: {
 		richObject: {
 			deep: true,
@@ -161,7 +177,7 @@ export default {
 			},
 		},
 	},
-
+ 
 	async mounted() {
 		useResizeObserver(this.$el, (entries) => {
 			const entry = entries[0]
@@ -169,14 +185,20 @@ export default {
 			// In Vue 3 $el can be a fragment/comment node (no style), so guard it.
 			this.$el?.style?.setProperty?.('--widget-content-width', `${width}px`)
 		})
-
+ 
 		this.tablesStore = useTablesStore()
 		this.dataStore = useDataStore()
-
-		await this.loadRows()
+ 
+		await Promise.all([this.loadRows(), this.loadColumns()])
 	},
-
+ 
 	methods: {
+		// { tableId } or { viewId } payload for loadRowsFromBE
+		elementIdPayload() {
+			return this.isView
+				? { viewId: this.richObject.id }
+				: { tableId: this.richObject.id }
+		},
 		search(searchString) {
 			this.searchExp = (searchString !== '')
 				? new RegExp(searchString.trim(), 'ig')
@@ -186,28 +208,24 @@ export default {
 			const { default: CreateRow } = await import('../modules/modals/CreateRow.vue')
 			spawnDialog(CreateRow, {
 				showModal: true,
-				columns: this.richObject.columns,
-				isView: Boolean(this.richObject.type),
+				columns: this.columns,
+				isView: this.isView,
 				elementId: this.richObject.id,
 			}, async () => {
 				// Reload rows from the backend to get the latest data
-				await this.dataStore.loadRowsFromBE({
-					tableId: this.richObject.id,
-				})
+				await this.dataStore.loadRowsFromBE(this.elementIdPayload())
 			})
 		},
 		async editRow(rowId) {
 			const { default: EditRow } = await import('../modules/modals/EditRow.vue')
 			spawnDialog(EditRow, {
 				showModal: true,
-				columns: this.richObject.columns,
+				columns: this.columns,
 				row: this.getRow(rowId),
-				isView: Boolean(this.richObject.type),
+				isView: this.isView,
 				element: this.richObject,
 			}, async () => {
-				await this.dataStore.loadRowsFromBE({
-					tableId: this.richObject.id,
-				})
+				await this.dataStore.loadRowsFromBE(this.elementIdPayload())
 			})
 		},
 		copyRow(rowId) {
@@ -222,26 +240,37 @@ export default {
 		},
 		async loadRows() {
 			if (!this.dataStore) return
-
+ 
+			// Paint from cached snapshot immediately, but it can be stale --
+			// always reconcile with the backend below.
 			if (this.richObject.rows) {
 				this.localRows = this.richObject.rows
 				this.dataStore.seedRows({
-					isView: Boolean(this.richObject.type),
+					isView: this.isView,
 					elementId: this.richObject.id,
 					rows: this.richObject.rows,
 				})
-				return
 			}
-
+ 
 			try {
-				await this.dataStore.loadRowsFromBE({
-					tableId: this.richObject.id,
-				})
+				await this.dataStore.loadRowsFromBE(this.elementIdPayload())
 				// No need to set local rows as the computed property will use store data
 			} catch (error) {
 				console.error('Error loading rows:', error)
 			}
 		},
+		async loadColumns() {
+			if (!this.dataStore) return
+			try {
+				if (this.isView) {
+					await this.dataStore.loadColumnsFromBE({ view: this.richObject })
+				} else {
+					await this.dataStore.loadColumnsFromBE({ tableId: this.richObject.id })
+				}
+			} catch (error) {
+				console.error('Error loading columns:', error)
+			}
+		},
 	},
 }
 </script>
@@ -249,14 +278,18 @@ export default {
 
 	.tables-content-widget {
 		min-height: max(50vh, 200px);
-		height: 50vh;
+		height: auto;
+		max-height: calc(100dvh - 40px);
 		overflow: scroll;
+		overscroll-behavior: contain;
+		isolation: isolate;
 
 		& .header {
 			position: sticky;
 			top: 0;
 			inset-inline-start: 0;
-			z-index: 1;
+			z-index: 7;
+			background-color: var(--color-main-background);
 
 			:where(.options) {
 				position: sticky;
@@ -285,8 +318,11 @@ export default {
 		.nc-table {
 			min-width: var(--widget-content-width);
 
-			:where(.options.row) {
-				display: none;
+			:deep(.options.row) {
+				height: 0 !important;
+				overflow: hidden !important;
+				margin: 0 !important;
+				padding: 0 !important;
 			}
 
 			:where(thead) {