From 45c19be0b4d5bf7e3bb4e4da36e6da26ad830654 Mon Sep 17 00:00:00 2001
From: Kostiantyn Miakshyn <molodchick@gmail.com>
Date: Mon, 19 Jan 2026 17:45:44 +0100
Subject: [PATCH] Refactor: Extract table cell component for better reusability

Signed-off-by: Kostiantyn Miakshyn <molodchick@gmail.com>
---
 .../components/ncTable/partials/TableCell.vue | 138 ++++++++++++++++++
 .../components/ncTable/partials/TableRow.vue  |  79 +---------
 2 files changed, 143 insertions(+), 74 deletions(-)
 create mode 100644 src/shared/components/ncTable/partials/TableCell.vue

diff --git a/src/shared/components/ncTable/partials/TableCell.vue b/src/shared/components/ncTable/partials/TableCell.vue
new file mode 100644
index 0000000000..efcfacb73b
--- /dev/null
+++ b/src/shared/components/ncTable/partials/TableCell.vue
@@ -0,0 +1,138 @@
+<!--
+  - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<component :is="getTableCell(column)"
+		:column="column"
+		:row-id="row.id"
+		:value="getCellValue(column)"
+		:element-id="elementId"
+		:is-view="isView"
+		:can-edit="canEdit" />
+</template>
+
+<script>
+import TableCellHtml from './TableCellHtml.vue'
+import TableCellProgress from './TableCellProgress.vue'
+import TableCellLink from './TableCellLink.vue'
+import TableCellNumber from './TableCellNumber.vue'
+import TableCellStars from './TableCellStars.vue'
+import TableCellYesNo from './TableCellYesNo.vue'
+import TableCellDateTime from './TableCellDateTime.vue'
+import TableCellTextLine from './TableCellTextLine.vue'
+import TableCellSelection from './TableCellSelection.vue'
+import TableCellMultiSelection from './TableCellMultiSelection.vue'
+import TableCellRelation from './TableCellRelation.vue'
+import TableCellTextRich from './TableCellEditor.vue'
+import TableCellUsergroup from './TableCellUsergroup.vue'
+import { ColumnTypes } from './../mixins/columnHandler.js'
+import {
+	TYPE_META_ID, TYPE_META_CREATED_BY, TYPE_META_CREATED_AT, TYPE_META_UPDATED_BY, TYPE_META_UPDATED_AT,
+} from '../../../constants.ts'
+
+export default {
+	name: 'TableCell',
+	components: {
+		TableCellYesNo,
+		TableCellStars,
+		TableCellNumber,
+		TableCellLink,
+		TableCellProgress,
+		TableCellHtml,
+		TableCellDateTime,
+		TableCellTextLine,
+		TableCellSelection,
+		TableCellMultiSelection,
+		TableCellRelation,
+		TableCellTextRich,
+		TableCellUsergroup,
+	},
+	props: {
+		column: {
+			type: Object,
+			default: () => {},
+		},
+		row: {
+			type: Object,
+			default: () => {},
+		},
+		elementId: {
+			type: Number,
+			default: null,
+		},
+		isView: {
+			type: Boolean,
+			default: true,
+		},
+		canEdit: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	methods: {
+		getTableCell(column) {
+			switch (column.type) {
+			case ColumnTypes.TextLine: return 'TableCellTextLine'
+			case ColumnTypes.TextLink: return 'TableCellLink'
+			case ColumnTypes.TextRich:return 'TableCellTextRich'
+			case ColumnTypes.Number: return 'TableCellNumber'
+			case ColumnTypes.NumberStars: return 'TableCellStars'
+			case ColumnTypes.NumberProgress: return 'TableCellProgress'
+			case ColumnTypes.Selection: return 'TableCellSelection'
+			case ColumnTypes.SelectionMulti: return 'TableCellMultiSelection'
+			case ColumnTypes.SelectionCheck: return 'TableCellYesNo'
+			case ColumnTypes.Relation: return 'TableCellRelation'
+			case ColumnTypes.Datetime: return 'TableCellDateTime'
+			case ColumnTypes.DatetimeDate: return 'TableCellDateTime'
+			case ColumnTypes.DatetimeTime: return 'TableCellDateTime'
+			case ColumnTypes.Usergroup: return 'TableCellUsergroup'
+			default: return 'TableCellHtml'
+			}
+		},
+		getCell(columnId) {
+			if (columnId < 0) {
+				// See metaColumns.js for mapping
+				let value
+				switch (columnId) {
+				case TYPE_META_ID:
+					value = this.row.id
+					break
+				case TYPE_META_CREATED_BY:
+					value = this.row.createdBy
+					break
+				case TYPE_META_UPDATED_BY:
+					value = this.row.lastEditBy
+					break
+				case TYPE_META_CREATED_AT:
+					value = this.row.createdAt
+					break
+				case TYPE_META_UPDATED_AT:
+					value = this.row.lastEditAt
+					break
+				}
+				return { columnId, value }
+			}
+			return this.row.data.find(item => item.columnId === columnId) || null
+		},
+		getCellValue(column) {
+			if (!this.row) {
+				return null
+			}
+
+			// lets see if we have a value
+			const cell = this.getCell(column.id)
+			let value
+
+			if (cell) {
+				value = cell.value
+			} else {
+				// if no value is given, try to get the default value from the column definition
+				value = column.default()
+			}
+
+			return column.parseValue(value)
+		},
+	},
+}
+</script>
diff --git a/src/shared/components/ncTable/partials/TableRow.vue b/src/shared/components/ncTable/partials/TableRow.vue
index 68d5e84b4c..82014b2fd0 100644
--- a/src/shared/components/ncTable/partials/TableRow.vue
+++ b/src/shared/components/ncTable/partials/TableRow.vue
@@ -20,10 +20,9 @@
 				'frozen-column--last': index === pinnedColumnIndex,
 			}"
 			@click="handleCellClick(col)">
-			<component :is="getTableCell(col)"
+			<TableCell
 				:column="col"
-				:row-id="row.id"
-				:value="getCellValue(col)"
+				:row="row"
 				:element-id="elementId"
 				:is-view="isView"
 				:can-edit="config.canEditRows" />
@@ -68,20 +67,8 @@ import { NcCheckboxRadioSwitch, NcActions, NcActionButton } from '@nextcloud/vue
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import Pencil from 'vue-material-design-icons/PencilOutline.vue'
 import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
-import TableCellHtml from './TableCellHtml.vue'
-import TableCellProgress from './TableCellProgress.vue'
-import TableCellLink from './TableCellLink.vue'
-import TableCellNumber from './TableCellNumber.vue'
-import TableCellStars from './TableCellStars.vue'
-import TableCellYesNo from './TableCellYesNo.vue'
-import TableCellDateTime from './TableCellDateTime.vue'
-import TableCellTextLine from './TableCellTextLine.vue'
-import TableCellSelection from './TableCellSelection.vue'
-import TableCellMultiSelection from './TableCellMultiSelection.vue'
-import TableCellRelation from './TableCellRelation.vue'
-import TableCellTextRich from './TableCellEditor.vue'
-import TableCellUsergroup from './TableCellUsergroup.vue'
-import { ColumnTypes, getColumnWidthStyle, getFrozenColumnStyle } from './../mixins/columnHandler.js'
+import TableCell from './TableCell.vue'
+import { getColumnWidthStyle, getFrozenColumnStyle } from './../mixins/columnHandler.js'
 import { translate as t } from '@nextcloud/l10n'
 import {
 	TYPE_META_ID, TYPE_META_CREATED_BY, TYPE_META_CREATED_AT, TYPE_META_UPDATED_BY, TYPE_META_UPDATED_AT,
@@ -91,25 +78,13 @@ import activityMixin from '../../../mixins/activityMixin.js'
 export default {
 	name: 'TableRow',
 	components: {
-		TableCellYesNo,
-		TableCellStars,
-		TableCellNumber,
-		TableCellLink,
-		TableCellProgress,
-		TableCellHtml,
+		TableCell,
 		NcActions,
 		NcActionButton,
 		ContentCopy,
 		Pencil,
 		TrashCanOutline,
 		NcCheckboxRadioSwitch,
-		TableCellDateTime,
-		TableCellTextLine,
-		TableCellSelection,
-		TableCellMultiSelection,
-		TableCellRelation,
-		TableCellTextRich,
-		TableCellUsergroup,
 	},
 
 	mixins: [activityMixin],
@@ -180,25 +155,6 @@ export default {
 				this.$emit('edit-row', this.row.id)
 			}
 		},
-		getTableCell(column) {
-			switch (column.type) {
-			case ColumnTypes.TextLine: return 'TableCellTextLine'
-			case ColumnTypes.TextLink: return 'TableCellLink'
-			case ColumnTypes.TextRich:return 'TableCellTextRich'
-			case ColumnTypes.Number: return 'TableCellNumber'
-			case ColumnTypes.NumberStars: return 'TableCellStars'
-			case ColumnTypes.NumberProgress: return 'TableCellProgress'
-			case ColumnTypes.Selection: return 'TableCellSelection'
-			case ColumnTypes.SelectionMulti: return 'TableCellMultiSelection'
-			case ColumnTypes.SelectionCheck: return 'TableCellYesNo'
-			case ColumnTypes.Relation: return 'TableCellRelation'
-			case ColumnTypes.Datetime: return 'TableCellDateTime'
-			case ColumnTypes.DatetimeDate: return 'TableCellDateTime'
-			case ColumnTypes.DatetimeTime: return 'TableCellDateTime'
-			case ColumnTypes.Usergroup: return 'TableCellUsergroup'
-			default: return 'TableCellHtml'
-			}
-		},
 		getCell(columnId) {
 			if (columnId < 0) {
 				// See metaColumns.js for mapping
@@ -224,31 +180,6 @@ export default {
 			}
 			return this.row.data.find(item => item.columnId === columnId) || null
 		},
-		getCellValue(column) {
-			if (!this.row) {
-				return null
-			}
-
-			// lets see if we have a value
-			const cell = this.getCell(column.id)
-			let value
-
-			if (cell) {
-				value = cell.value
-			} else {
-				// if no value is given, try to get the default value from the column definition
-				value = column.default()
-			}
-
-			return column.parseValue(value)
-		},
-		truncate(text) {
-			if (text.length >= 400) {
-				return text.substring(0, 400) + '...'
-			} else {
-				return text
-			}
-		},
 	},
 }
 </script>