From 6cfeb69fc0c19652c0ad8dae6648a095a7ba8d93 Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Sun, 7 Sep 2025 09:12:41 +0100
Subject: [PATCH] feat(Inline editing): prevent editing read-only values

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../components/ncTable/mixins/cellEditMixin.js    |  5 +++++
 .../ncTable/partials/TableCellDateTime.vue        |  2 +-
 .../ncTable/partials/TableCellEditor.vue          |  2 +-
 .../components/ncTable/partials/TableCellHtml.vue |  2 +-
 .../ncTable/partials/TableCellMultiSelection.vue  |  2 +-
 .../ncTable/partials/TableCellNumber.vue          |  2 +-
 .../ncTable/partials/TableCellProgress.vue        |  2 +-
 .../ncTable/partials/TableCellStars.vue           |  2 +-
 .../ncTable/partials/TableCellTextLine.vue        |  2 +-
 .../ncTable/partials/TableCellUsergroup.vue       |  2 +-
 .../ncTable/partials/TableCellYesNo.vue           | 15 +++++++++++++--
 11 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/shared/components/ncTable/mixins/cellEditMixin.js b/src/shared/components/ncTable/mixins/cellEditMixin.js
index 5076b426f8..b34b445fe9 100644
--- a/src/shared/components/ncTable/mixins/cellEditMixin.js
+++ b/src/shared/components/ncTable/mixins/cellEditMixin.js
@@ -47,6 +47,11 @@ export default {
 				return false
 			}
 
+			// Prevent editing for readonly columns
+			if (this.isView && this.column?.viewColumnInformation?.readonly) {
+				return false
+			}
+
 			return true
 		},
 
diff --git a/src/shared/components/ncTable/partials/TableCellDateTime.vue b/src/shared/components/ncTable/partials/TableCellDateTime.vue
index 4ec6f47520..9a623c3caa 100644
--- a/src/shared/components/ncTable/partials/TableCellDateTime.vue
+++ b/src/shared/components/ncTable/partials/TableCellDateTime.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="cell-datetime">
+	<div class="cell-datetime" :style="{ opacity: !canEditCell() ? 0.6 : 1 }">
 		<div v-if="!isEditing" class="non-edit-mode" role="button" aria-label="Edit date/time"
 			tabindex="0"
 			@click="handleStartEditing">
diff --git a/src/shared/components/ncTable/partials/TableCellEditor.vue b/src/shared/components/ncTable/partials/TableCellEditor.vue
index 4845506a8b..f7a94a8785 100644
--- a/src/shared/components/ncTable/partials/TableCellEditor.vue
+++ b/src/shared/components/ncTable/partials/TableCellEditor.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="cell-editor">
+	<div class="cell-editor" :style="{ opacity: !canEditCell() ? 0.6 : 1 }">
 		<div v-if="!isEditing" @click="handleStartEditing">
 			<NcEditor v-if="value && value.trim()"
 				:can-edit="false"
diff --git a/src/shared/components/ncTable/partials/TableCellHtml.vue b/src/shared/components/ncTable/partials/TableCellHtml.vue
index a4bcaecb29..eddf0b9870 100644
--- a/src/shared/components/ncTable/partials/TableCellHtml.vue
+++ b/src/shared/components/ncTable/partials/TableCellHtml.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="cell-editor tables-tiptap-wrapper">
+	<div class="cell-editor tables-tiptap-wrapper" :style="{ opacity: !canEditCell() ? 0.6 : 1 }">
 		<div v-if="!isEditing" @click="handleStartEditing">
 			<EditorContent :editor="editor" />
 		</div>
diff --git a/src/shared/components/ncTable/partials/TableCellMultiSelection.vue b/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
index 764dffb3d9..c70e108392 100644
--- a/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
+++ b/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="cell-multi-selection">
+	<div class="cell-multi-selection" :style="{ opacity: !canEditCell() ? 0.6 : 1 }">
 		<div v-if="!isEditing" class="non-edit-mode" @click="handleStartEditing">
 			<ul>
 				<li v-for="v in getObjects()" :key="v.id">
diff --git a/src/shared/components/ncTable/partials/TableCellNumber.vue b/src/shared/components/ncTable/partials/TableCellNumber.vue
index ebd749ee1b..9755eef02a 100644
--- a/src/shared/components/ncTable/partials/TableCellNumber.vue
+++ b/src/shared/components/ncTable/partials/TableCellNumber.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="cell-number">
+	<div class="cell-number" :style="{ opacity: !canEditCell() ? 0.6 : 1 }">
 		<div v-if="!isEditing" class="number-display" @click="startEditing">
 			{{ column.numberPrefix }}{{ getValue }}{{ column.numberSuffix }}
 		</div>
diff --git a/src/shared/components/ncTable/partials/TableCellProgress.vue b/src/shared/components/ncTable/partials/TableCellProgress.vue
index ccf8c56908..83d6dcdafc 100644
--- a/src/shared/components/ncTable/partials/TableCellProgress.vue
+++ b/src/shared/components/ncTable/partials/TableCellProgress.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="cell-progress" @click="startEditingProgress">
+	<div class="cell-progress" :style="{ opacity: !canEditCell() ? 0.6 : 1 }" @click="startEditingProgress">
 		<div v-if="!isEditing" class="progress-display">
 			<NcProgressBar :value="getValue" />
 		</div>
diff --git a/src/shared/components/ncTable/partials/TableCellStars.vue b/src/shared/components/ncTable/partials/TableCellStars.vue
index 5a77071b0d..27def7a0c3 100644
--- a/src/shared/components/ncTable/partials/TableCellStars.vue
+++ b/src/shared/components/ncTable/partials/TableCellStars.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="cell-stars">
+	<div class="cell-stars" :style="{ opacity: !canEditCell() ? 0.6 : 1 }">
 		<div v-if="!isEditing" @click="startEditing">
 			<div class="stars-display">
 				{{ getValue }}
diff --git a/src/shared/components/ncTable/partials/TableCellTextLine.vue b/src/shared/components/ncTable/partials/TableCellTextLine.vue
index 6f39463b50..d813c64eac 100644
--- a/src/shared/components/ncTable/partials/TableCellTextLine.vue
+++ b/src/shared/components/ncTable/partials/TableCellTextLine.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="cell-text-line">
+	<div class="cell-text-line" :style="{ opacity: !canEditCell() ? 0.6 : 1 }">
 		<div v-if="!isEditing" @click="startEditing">
 			{{ value || '' }}
 		</div>
diff --git a/src/shared/components/ncTable/partials/TableCellUsergroup.vue b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
index c091474bca..62e079c340 100644
--- a/src/shared/components/ncTable/partials/TableCellUsergroup.vue
+++ b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
@@ -3,7 +3,7 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="cell-usergroup">
+	<div class="cell-usergroup" :style="{ opacity: !canEditCell() ? 0.6 : 1 }">
 		<div v-if="!isEditing" class="non-edit-mode" @click="handleStartEditing">
 			<div v-if="value" class="table-cell-usergroup">
 				<div v-for="item in value" :key="item.id" class="inline usergroup-entry">
diff --git a/src/shared/components/ncTable/partials/TableCellYesNo.vue b/src/shared/components/ncTable/partials/TableCellYesNo.vue
index 62c8552aa0..f774745db3 100644
--- a/src/shared/components/ncTable/partials/TableCellYesNo.vue
+++ b/src/shared/components/ncTable/partials/TableCellYesNo.vue
@@ -3,8 +3,13 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div class="inline-editing-container">
-		<NcCheckboxRadioSwitch v-model="localValue" :loading="localLoading" type="switch" @update:modelValue="onToggle" />
+	<div class="inline-editing-container" :class="{ 'readonly': !canEditCell() }" :style="{ opacity: !canEditCell() ? 0.6 : 1 }">
+		<NcCheckboxRadioSwitch
+			v-model="localValue"
+			:loading="localLoading"
+			:disabled="!canEditCell()"
+			type="switch"
+			@update:modelValue="onToggle" />
 	</div>
 </template>
 
@@ -41,6 +46,12 @@ export default {
 
 	methods: {
 		async onToggle() {
+			// Prevent changes if column is readonly
+			if (!this.canEditCell()) {
+				this.localValue = !this.localValue // revert the change
+				return
+			}
+
 			const response = await this.updateCellValue(this.localValue)
 			if (!response) {
 				this.localValue = !this.localValue // revert to previous value