Fix: Properly display removed options in selection columns

src/shared/components/ncTable/mixins/columnsTypes/selection.js

@@ -20,13 +20,12 @@ export default class SelectionColumn extends AbstractSelectionColumn {
 	}
 
 	getLabel(id) {
-		const i = this.selectionOptions?.findIndex((obj) => obj.id === id)
-		return this.selectionOptions[i]?.label
+		return this.getOptionObject(id)?.label
 	}
 
-	isDeletedLabel(value) {
-		const i = this.selectionOptions?.findIndex((obj) => obj.id === value)
-		return !!this.selectionOptions[i]?.deleted
+	getOptionObject(id) {
+		if (id === null || id === undefined) return null
+		return this.selectionOptions?.find((obj) => obj.id === id) || { id, label: String(id), deleted: true }
 	}
 
 	sort(mode, nextSorts) {

src/shared/components/ncTable/mixins/columnsTypes/selectionMulti.js

@@ -41,25 +41,15 @@ export default class SelectionMutliColumn extends AbstractSelectionColumn {
 	}
 
 	getObjects(values) {
-		// values is an array of option-ids as string
-		const objects = []
-		values?.forEach(id => {
-			const optionsObject = this.getOptionObject(parseInt(id))
-			// skip options that not exists anymore
-			if (optionsObject) {
-				objects.push(optionsObject)
-			}
-		})
-		return objects
+		return (values || [])
+			.map(rawId => parseInt(rawId))
+			.filter(id => !Number.isNaN(id))
+			.map(id => this.getOptionObject(id))
 	}
 
 	getOptionObject(id) {
-		const i = this.selectionOptions?.findIndex(obj => {
-			return obj.id === id
-		})
-		if (i !== undefined) {
-			return this.selectionOptions[i] || null
-		}
+		if (id === null || id === undefined) return null
+		return this.selectionOptions?.find(obj => obj.id === id) || { id, label: String(id), deleted: true }
 	}
 
 	isSearchStringFound(cell, searchString) {

src/shared/components/ncTable/partials/TableCellMultiSelection.vue

@@ -6,8 +6,13 @@
 	<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">
-					{{ v.label }}<span v-if="v.deleted" :title="t('tables', 'This option is outdated.')">&nbsp;⚠️</span>
+				<li v-for="v in displayObjects" :key="v.id">
+					<template v-if="v.deleted">
+						<span class="outdated-option-label">{{ v.label }}</span><span
+							class="outdated-option-indicator"
+							:title="t('tables', 'This option is outdated.')">⚠️</span>
+					</template>
+					<span v-else>{{ v.label }}</span>
 				</li>
 			</ul>
 		</div>
@@ -19,7 +24,8 @@
 			@keydown.escape.stop="cancelEdit">
 			<NcSelect v-model="editValues"
 				:tag-width="80"
-				:options="getAllNonDeletedOrSelectedOptions"
+				:options="selectableOptions"
+				:selectable="option => !option?.deleted"
 				:clearable="!column.mandatory"
 				:multiple="true"
 				:aria-label-combobox="t('tables', 'Options')"
@@ -71,20 +77,22 @@ export default {
 	},
 
 	computed: {
-		getOptions() {
+		options() {
 			return this.column.selectionOptions || []
 		},
-		getAllNonDeletedOrSelectedOptions() {
-			const options = this.getOptions.filter(item => {
-				return !item.deleted || this.optionIdIsSelected(item.id)
-			}) || []
-
-			options.forEach(opt => {
-				if (opt.deleted) {
-					opt.label += ' ⚠️'
-				}
-			})
-			return options
+		selectedOptionIds() {
+			return (this.value || [])
+				.map(item => parseInt(item))
+				.filter(id => !Number.isNaN(id))
+		},
+		selectableOptions() {
+			const missingOptions = this.selectedOptionIds
+				.map(id => this.column.getOptionObject(id))
+				.filter(opt => opt.deleted)
+			return [...this.options, ...missingOptions]
+		},
+		displayObjects() {
+			return this.selectedOptionIds.map(id => this.column.getOptionObject(id))
 		},
 		editValues: {
 			get() {
@@ -122,15 +130,6 @@ export default {
 			event.stopPropagation()
 		},
 
-		getObjects() {
-			return this.column.getObjects(this.value)
-		},
-
-		optionIdIsSelected(id) {
-			// Check if the given id is selected (in the value array)
-			return this.value && this.value.includes(id)
-		},
-
 		getIdArrayFromObjects(objects) {
 			const ids = []
 			objects.forEach(o => {
@@ -141,7 +140,7 @@ export default {
 
 		initEditValues() {
 			if (this.value !== null) {
-				this.localEditValues = this.column.getObjects(this.value)
+				this.localEditValues = this.displayObjects
 			} else {
 				this.localEditValues = []
 			}
@@ -215,4 +214,12 @@ ul {
 	list-style-type: disc;
 	padding-inline-start: calc(var(--default-grid-baseline) * 3);
 }
+
+.outdated-option-indicator {
+	cursor: help;
+}
+
+.outdated-option-label {
+	opacity: 0.6;
+}
 </style>

src/shared/components/ncTable/partials/TableCellSelection.vue

@@ -5,7 +5,12 @@
 <template>
 	<div class="cell-selection">
 		<div v-if="!isEditing" class="non-edit-mode" @click="handleStartEditing">
-			{{ column.getLabel(value) }}<span v-if="isDeleted()" :title="t('tables', 'This option is outdated.')">&nbsp;⚠️</span>
+			<template v-if="selectedOption.deleted">
+				<span class="outdated-option-label">{{ selectedOptionId }}</span><span
+					class="outdated-option-indicator"
+					:title="t('tables', 'This option is outdated.')">⚠️</span>
+			</template>
+			<span v-else>{{ selectedOption?.label }}</span>
 		</div>
 		<div v-else
 			ref="editingContainer"
@@ -14,7 +19,8 @@
 			@keydown.enter.stop="saveChanges"
 			@keydown.escape.stop="cancelEdit">
 			<NcSelect v-model="editValue"
-				:options="getAllNonDeletedOptions"
+				:options="selectableOptions"
+				:selectable="option => !option?.deleted"
 				:clearable="!column.mandatory"
 				:aria-label-combobox="t('tables', 'Options')"
 				:disabled="localLoading || !canEditCell()"
@@ -64,13 +70,24 @@ export default {
 	},
 
 	computed: {
-		getOptions() {
+		options() {
 			return this.column?.selectionOptions || []
 		},
-		getAllNonDeletedOptions() {
-			return this.getOptions.filter(item => {
-				return !item.deleted
-			})
+		selectedOptionId() {
+			const optionId = parseInt(this.value)
+			return Number.isNaN(optionId) ? null : optionId
+		},
+		selectedOption() {
+			if (this.selectedOptionId === null) {
+				return null
+			}
+			return this.column.getOptionObject(this.selectedOptionId)
+		},
+		selectableOptions() {
+			if (this.selectedOption?.deleted) {
+				return [...this.options, this.selectedOption]
+			}
+			return this.options
 		},
 	},
 
@@ -101,17 +118,9 @@ export default {
 			event.stopPropagation()
 		},
 
-		isDeleted() {
-			return this.column.isDeletedLabel(this.value)
-		},
-
-		getOptionObject(id) {
-			return this.getOptions.find(e => e.id === id) || null
-		},
-
 		initEditValue() {
-			if (this.value !== null) {
-				this.editValue = this.getOptionObject(parseInt(this.value))
+			if (this.value !== null && this.value !== undefined) {
+				this.editValue = this.selectedOption
 			} else {
 				this.editValue = null
 			}
@@ -170,7 +179,11 @@ export default {
 	}
 }
 
-span {
+.outdated-option-indicator {
 	cursor: help;
 }
+
+.outdated-option-label {
+	opacity: 0.6;
+}
 </style>

src/shared/components/ncTable/partials/rowTypePartials/SelectionForm.vue

@@ -6,7 +6,8 @@
 	<RowFormWrapper :title="column.title" :mandatory="isMandatory(column)" :description="column.description">
 		<NcSelect
 			v-model="localValue"
-			:options="getAllNonDeletedOptions"
+			:options="selectableOptions"
+			:selectable="option => !option?.deleted"
 			:clearable="!column.mandatory"
 			:disabled="column.viewColumnInformation?.readonly"
 			:aria-label-combobox="t('tables', 'Options')" />
@@ -38,7 +39,7 @@ export default {
 		localValue: {
 			get() {
 				if (this.value !== null) {
-					return this.getOptionObject(parseInt(this.value))
+					return this.selectedOption
 				} else {
 					this.$emit('update:value', this.getDefaultId)
 					return this.getDefaultOptionObject
@@ -47,23 +48,29 @@ export default {
 			set(v) { this.$emit('update:value', v?.id) },
 		},
 		getOptions() {
-			return this.column?.selectionOptions || null
+			return this.column?.selectionOptions || []
 		},
 		getDefaultId() {
 			return !isNaN(this.column.selectionDefault) ? parseInt(this.column.selectionDefault) : null
 		},
 		getDefaultOptionObject() {
-			return this.getOptionObject(this.getDefaultId) || null
+			return this.column.getOptionObject(this.getDefaultId)
 		},
-		getAllNonDeletedOptions() {
-			return this.getOptions.filter(item => {
-				return !item.deleted
-			})
+		selectedOptionId() {
+			const optionId = parseInt(this.value)
+			return Number.isNaN(optionId) ? null : optionId
 		},
-	},
-	methods: {
-		getOptionObject(id) {
-			return this.getOptions.find(e => e.id === id) || null
+		selectedOption() {
+			if (this.selectedOptionId === null) {
+				return null
+			}
+			return this.column.getOptionObject(this.selectedOptionId)
+		},
+		selectableOptions() {
+			if (this.selectedOption?.deleted) {
+				return [...this.getOptions, this.selectedOption]
+			}
+			return this.getOptions
 		},
 	},
 }

src/shared/components/ncTable/partials/rowTypePartials/SelectionMultiForm.vue

@@ -7,7 +7,8 @@
 		<NcSelect
 			v-model="localValues"
 			:tag-width="80"
-			:options="getAllNonDeletedOrSelectedOptions"
+			:options="selectableOptions"
+			:selectable="option => !option?.deleted"
 			:clearable="!column.mandatory"
 			:disabled="column.viewColumnInformation?.readonly"
 			:multiple="true"
@@ -40,7 +41,7 @@ export default {
 		localValues: {
 			get() {
 				if (this.value !== null) {
-					return this.column.getObjects(this.value)
+					return this.selectedOptionIds.map(id => this.column.getOptionObject(id))
 				} else {
 					this.$emit('update:value', this.column.default())
 					return this.column.getDefaultObjects()
@@ -51,26 +52,21 @@ export default {
 			},
 		},
 		getOptions() {
-			return this.column.selectionOptions || null
+			return this.column.selectionOptions || []
 		},
-		getAllNonDeletedOrSelectedOptions() {
-			const options = this.getOptions?.filter(item => {
-				return !item.deleted || this.optionIdIsSelected(item.id)
-			}) || []
-
-			options.forEach(opt => {
-				if (opt.deleted) {
-					opt.label += ' ⚠️'
-				}
-			})
-			return options
+		selectedOptionIds() {
+			return (this.value || [])
+				.map(item => parseInt(item))
+				.filter(id => !Number.isNaN(id))
+		},
+		selectableOptions() {
+			const missingOptions = this.selectedOptionIds
+				.map(id => this.column.getOptionObject(id))
+				.filter(opt => opt.deleted)
+			return [...this.getOptions, ...missingOptions]
 		},
 	},
 	methods: {
-		optionIdIsSelected(id) {
-			// check if the given id is selected (in the value array)
-			return this.values.includes(id)
-		},
 		getIdArrayFromObjects(objects) {
 			const ids = []
 			objects.forEach(o => {