feat(Inline editing): prevent editing read-only values

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>

Author: enjeck

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
 		},
 

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">

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"

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>

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">

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>

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>

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 }}

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>

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">