From 8c36b267a5cdff5d81aee70b3d3c824daf79ce8c Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Tue, 5 Aug 2025 07:25:34 +0100
Subject: [PATCH 1/4] feat: Inline editing - Datetime

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../ncTable/partials/TableCellDateTime.vue    | 226 +++++++++++++++++-
 .../components/ncTable/partials/TableRow.vue  |   3 -
 2 files changed, 222 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellDateTime.vue b/src/shared/components/ncTable/partials/TableCellDateTime.vue
index efb50b56d1..e9d92c2b84 100644
--- a/src/shared/components/ncTable/partials/TableCellDateTime.vue
+++ b/src/shared/components/ncTable/partials/TableCellDateTime.vue
@@ -3,15 +3,46 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div>
-		{{ getValue }}
+	<div class="cell-datetime">
+		<div v-if="!isEditing" class="non-edit-mode" @click="startEditing">
+			{{ getValue }}
+		</div>
+		<div v-else
+			ref="editingContainer"
+			class="inline-editing-container"
+			tabindex="0"
+			@keydown.enter="saveChanges"
+			@keydown.escape="cancelEdit">
+			<div class="datetime-picker-container" :class="{ 'is-loading': localLoading }">
+				<NcDateTimePickerNative
+					v-model="editDateTimeValue"
+					:type="getPickerType"
+					:label="getPlaceholder"
+					:disabled="localLoading || !canEditCell()" />
+				<div v-if="canBeCleared" class="icon-close make-empty" @click="emptyValue" />
+			</div>
+			<div v-if="localLoading" class="loading-indicator">
+				<div class="icon-loading-small icon-loading-inline" />
+			</div>
+		</div>
 	</div>
 </template>
 
 <script>
+import { NcDateTimePickerNative } from '@nextcloud/vue'
+import Moment from '@nextcloud/moment'
+import cellEditMixin from '../mixins/cellEditMixin.js'
+import { translate as t } from '@nextcloud/l10n'
 
 export default {
 	name: 'TableCellDateTime',
+
+	components: {
+		NcDateTimePickerNative,
+	},
+
+	mixins: [cellEditMixin],
+
 	props: {
 		column: {
 			type: Object,
@@ -26,6 +57,13 @@ export default {
 			default: null,
 		},
 	},
+
+	data() {
+		return {
+			editDateTimeValue: null,
+		}
+	},
+
 	computed: {
 		getValue() {
 			// default value is for the form, if you want to present the date from today, you should use the calculating column
@@ -34,17 +72,197 @@ export default {
 			}
 			return this.column.formatValue(this.value)
 		},
+
 		getDefaultValue() {
 			return this.column.formatValue(this.column.datetimeDefault)
 		},
+
+		getPlaceholder() {
+			switch (this.column.type) {
+			case 'datetime-date':
+				return t('tables', 'Select a date')
+			case 'datetime-time':
+				return t('tables', 'Select a time')
+			default:
+				return t('tables', 'Select a date and time')
+			}
+		},
+
+		getPickerType() {
+			switch (this.column.type) {
+			case 'datetime-date':
+				return 'date'
+			case 'datetime-time':
+				return 'time'
+			default:
+				return 'datetime-local'
+			}
+		},
+
+		canBeCleared() {
+			return !this.column.mandatory
+		},
+	},
+
+	watch: {
+		isEditing(newValue) {
+			if (newValue) {
+				this.initEditValue()
+				// Use a small delay to prevent the same click event that triggered editing
+				// from immediately triggering the click outside handler
+				this.$nextTick(() => {
+					setTimeout(() => {
+						document.addEventListener('click', this.handleClickOutside)
+					}, 10)
+				})
+			} else {
+				// Remove click outside listener
+				document.removeEventListener('click', this.handleClickOutside)
+			}
+		},
+	},
+
+	methods: {
+		t,
+
+		initEditValue() {
+			if (this.value !== null && this.value !== 'none') {
+				const format = this.getDateFormat()
+
+				if (this.column.type === 'datetime-time') {
+					// For time-only values, use the same approach as DatetimeTimeForm
+					const timeMoment = Moment(this.value, format)
+					if (timeMoment.isValid()) {
+						this.editDateTimeValue = timeMoment.toDate()
+					} else {
+						this.editDateTimeValue = new Date()
+					}
+				} else {
+					// For date and datetime values, parse normally
+					const parsedMoment = Moment(this.value, format)
+					this.editDateTimeValue = parsedMoment.isValid() ? parsedMoment.toDate() : null
+				}
+			} else if ((this.value === null || this.value === '') && this.column.datetimeDefault) {
+				// Handle default values
+				if (this.column.datetimeDefault === 'now' || this.column.datetimeDefault === 'today') {
+					this.editDateTimeValue = new Date()
+				} else {
+					this.editDateTimeValue = this.column.type === 'datetime-time' ? new Date() : null
+				}
+			} else {
+				// For time columns, always provide a default Date object to prevent errors
+				this.editDateTimeValue = this.column.type === 'datetime-time' ? new Date() : null
+			}
+		},
+
+		getDateFormat() {
+			switch (this.column.type) {
+			case 'datetime-date':
+				return 'YYYY-MM-DD'
+			case 'datetime-time':
+				return 'HH:mm'
+			default:
+				return 'YYYY-MM-DD HH:mm'
+			}
+		},
+
+		emptyValue() {
+			this.editDateTimeValue = null
+		},
+
+		async saveChanges() {
+			if (this.localLoading) {
+				return
+			}
+
+			let newValue = null
+
+			if (this.editDateTimeValue === null) {
+				newValue = 'none'
+			} else {
+				const format = this.getDateFormat()
+				newValue = Moment(this.editDateTimeValue).format(format)
+			}
+
+			if (newValue === this.value) {
+				this.isEditing = false
+				return
+			}
+
+			const success = await this.updateCellValue(newValue)
+
+			if (!success) {
+				this.cancelEdit()
+			}
+
+			this.localLoading = false
+			this.isEditing = false
+		},
+
+		handleClickOutside(event) {
+			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
+				this.saveChanges()
+			}
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
+.cell-datetime {
+	width: 100%;
+
+	.non-edit-mode {
+		cursor: pointer;
+		min-height: 20px;
+	}
+
+	> div:first-child {
+		cursor: pointer;
+		text-align: right;
+	}
+}
+
+.inline-editing-container {
+	.datetime-picker-container {
+		display: flex;
+		align-items: center;
+		width: 100%;
+
+		&.is-loading {
+			opacity: 0.7;
+		}
+
+		div {
+			width: 100%;
+		}
+	}
+
+	.datetime-picker-container input {
+		width: 100%;
+	}
 
-div {
-	text-align: right;
 }
 
+.editor-buttons {
+	display: flex;
+	gap: 8px;
+	margin-top: 8px;
+	align-items: center;
+}
+
+.make-empty {
+	padding-left: 15px;
+	cursor: pointer;
+}
+
+.icon-loading-inline {
+	margin-left: 4px;
+}
+
+:deep(input[type="datetime-local"]),
+:deep(input[type="date"]),
+:deep(input[type="time"]) {
+	width: 100%;
+}
 </style>
diff --git a/src/shared/components/ncTable/partials/TableRow.vue b/src/shared/components/ncTable/partials/TableRow.vue
index f3a268d7ed..1c756e213c 100644
--- a/src/shared/components/ncTable/partials/TableRow.vue
+++ b/src/shared/components/ncTable/partials/TableRow.vue
@@ -114,9 +114,6 @@ export default {
 		nonInlineEditableColumnTypes() {
 			return [
 				ColumnTypes.TextRich,
-				ColumnTypes.Datetime,
-				ColumnTypes.DatetimeDate,
-				ColumnTypes.DatetimeTime,
 			]
 		},
 	},

From c4ac8aa1f00bfe477e786142f22b79beaf45b747 Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Thu, 14 Aug 2025 04:48:56 +0100
Subject: [PATCH 2/4] fix: Remove unused function and label

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../ncTable/partials/TableCellDateTime.vue    | 30 +++++--------------
 1 file changed, 8 insertions(+), 22 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellDateTime.vue b/src/shared/components/ncTable/partials/TableCellDateTime.vue
index e9d92c2b84..7d6d999706 100644
--- a/src/shared/components/ncTable/partials/TableCellDateTime.vue
+++ b/src/shared/components/ncTable/partials/TableCellDateTime.vue
@@ -17,7 +17,6 @@
 				<NcDateTimePickerNative
 					v-model="editDateTimeValue"
 					:type="getPickerType"
-					:label="getPlaceholder"
 					:disabled="localLoading || !canEditCell()" />
 				<div v-if="canBeCleared" class="icon-close make-empty" @click="emptyValue" />
 			</div>
@@ -66,28 +65,12 @@ export default {
 
 	computed: {
 		getValue() {
-			// default value is for the form, if you want to present the date from today, you should use the calculating column
 			if (!this.value || this.value === 'none' || this.value === 'today' || this.value === 'now') {
 				return ''
 			}
 			return this.column.formatValue(this.value)
 		},
 
-		getDefaultValue() {
-			return this.column.formatValue(this.column.datetimeDefault)
-		},
-
-		getPlaceholder() {
-			switch (this.column.type) {
-			case 'datetime-date':
-				return t('tables', 'Select a date')
-			case 'datetime-time':
-				return t('tables', 'Select a time')
-			default:
-				return t('tables', 'Select a date and time')
-			}
-		},
-
 		getPickerType() {
 			switch (this.column.type) {
 			case 'datetime-date':
@@ -116,7 +99,6 @@ export default {
 					}, 10)
 				})
 			} else {
-				// Remove click outside listener
 				document.removeEventListener('click', this.handleClickOutside)
 			}
 		},
@@ -130,7 +112,6 @@ export default {
 				const format = this.getDateFormat()
 
 				if (this.column.type === 'datetime-time') {
-					// For time-only values, use the same approach as DatetimeTimeForm
 					const timeMoment = Moment(this.value, format)
 					if (timeMoment.isValid()) {
 						this.editDateTimeValue = timeMoment.toDate()
@@ -138,19 +119,17 @@ export default {
 						this.editDateTimeValue = new Date()
 					}
 				} else {
-					// For date and datetime values, parse normally
 					const parsedMoment = Moment(this.value, format)
 					this.editDateTimeValue = parsedMoment.isValid() ? parsedMoment.toDate() : null
 				}
 			} else if ((this.value === null || this.value === '') && this.column.datetimeDefault) {
-				// Handle default values
 				if (this.column.datetimeDefault === 'now' || this.column.datetimeDefault === 'today') {
 					this.editDateTimeValue = new Date()
 				} else {
 					this.editDateTimeValue = this.column.type === 'datetime-time' ? new Date() : null
 				}
 			} else {
-				// For time columns, always provide a default Date object to prevent errors
+				// For time columns, have default Date object to prevent errors
 				this.editDateTimeValue = this.column.type === 'datetime-time' ? new Date() : null
 			}
 		},
@@ -236,6 +215,13 @@ export default {
 		div {
 			width: 100%;
 		}
+
+		/*
+		The fully accessible view with labels is always present in the row-editing-dialog. So it's ok if we do not have labels in inline editing.
+		*/
+		:deep(.native-datetime-picker--label) {
+			display: none;
+		}
 	}
 
 	.datetime-picker-container input {

From 58943de1fb4d1b0d0fe5f5891c28572877490bff Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Sun, 17 Aug 2025 11:08:00 +0100
Subject: [PATCH 3/4] fix: Improve editing behavior and accessibility

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../ncTable/partials/TableCellDateTime.vue    | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/shared/components/ncTable/partials/TableCellDateTime.vue b/src/shared/components/ncTable/partials/TableCellDateTime.vue
index 7d6d999706..d7b38e5b2b 100644
--- a/src/shared/components/ncTable/partials/TableCellDateTime.vue
+++ b/src/shared/components/ncTable/partials/TableCellDateTime.vue
@@ -4,7 +4,7 @@
 -->
 <template>
 	<div class="cell-datetime">
-		<div v-if="!isEditing" class="non-edit-mode" @click="startEditing">
+		<div v-if="!isEditing" class="non-edit-mode" @click="handleStartEditing">
 			{{ getValue }}
 		</div>
 		<div v-else
@@ -18,7 +18,8 @@
 					v-model="editDateTimeValue"
 					:type="getPickerType"
 					:disabled="localLoading || !canEditCell()" />
-				<div v-if="canBeCleared" class="icon-close make-empty" @click="emptyValue" />
+				<div v-if="canBeCleared" class="icon-close make-empty" role="button"
+					:aria-label="t('tables', 'Clear value')" @click="emptyValue" />
 			</div>
 			<div v-if="localLoading" class="loading-indicator">
 				<div class="icon-loading-small icon-loading-inline" />
@@ -60,6 +61,7 @@ export default {
 	data() {
 		return {
 			editDateTimeValue: null,
+			isInitialEditClick: false,
 		}
 	},
 
@@ -91,15 +93,12 @@ export default {
 		isEditing(newValue) {
 			if (newValue) {
 				this.initEditValue()
-				// Use a small delay to prevent the same click event that triggered editing
-				// from immediately triggering the click outside handler
 				this.$nextTick(() => {
-					setTimeout(() => {
-						document.addEventListener('click', this.handleClickOutside)
-					}, 10)
+					document.addEventListener('click', this.handleClickOutside)
 				})
 			} else {
 				document.removeEventListener('click', this.handleClickOutside)
+				this.isInitialEditClick = false
 			}
 		},
 	},
@@ -107,6 +106,13 @@ export default {
 	methods: {
 		t,
 
+		handleStartEditing(event) {
+			this.isInitialEditClick = true
+			this.startEditing()
+			// Stop the event from propagating to avoid immediate click outside
+			event.stopPropagation()
+		},
+
 		initEditValue() {
 			if (this.value !== null && this.value !== 'none') {
 				const format = this.getDateFormat()
@@ -179,6 +185,12 @@ export default {
 		},
 
 		handleClickOutside(event) {
+			// Ignore the initial click that started editing
+			if (this.isInitialEditClick) {
+				this.isInitialEditClick = false
+				return
+			}
+
 			if (this.$refs.editingContainer && !this.$refs.editingContainer.contains(event.target)) {
 				this.saveChanges()
 			}
@@ -230,13 +242,6 @@ export default {
 
 }
 
-.editor-buttons {
-	display: flex;
-	gap: 8px;
-	margin-top: 8px;
-	align-items: center;
-}
-
 .make-empty {
 	padding-left: 15px;
 	cursor: pointer;

From 240f3682440cc0901c497d98c786ca6f53268b1c Mon Sep 17 00:00:00 2001
From: "Enjeck C." <patrathewhiz@gmail.com>
Date: Mon, 18 Aug 2025 16:35:51 +0100
Subject: [PATCH 4/4] fix: Add aria-labels to datetime input

Signed-off-by: Enjeck C. <patrathewhiz@gmail.com>
---
 .../components/ncTable/partials/TableCellDateTime.vue       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/shared/components/ncTable/partials/TableCellDateTime.vue b/src/shared/components/ncTable/partials/TableCellDateTime.vue
index d7b38e5b2b..d319ec5a5f 100644
--- a/src/shared/components/ncTable/partials/TableCellDateTime.vue
+++ b/src/shared/components/ncTable/partials/TableCellDateTime.vue
@@ -4,13 +4,17 @@
 -->
 <template>
 	<div class="cell-datetime">
-		<div v-if="!isEditing" class="non-edit-mode" @click="handleStartEditing">
+		<div v-if="!isEditing" class="non-edit-mode" role="button" aria-label="Edit date/time"
+			tabindex="0"
+			@click="handleStartEditing">
 			{{ getValue }}
 		</div>
 		<div v-else
 			ref="editingContainer"
 			class="inline-editing-container"
 			tabindex="0"
+			role="group"
+			aria-label="Edit date/time"
 			@keydown.enter="saveChanges"
 			@keydown.escape="cancelEdit">
 			<div class="datetime-picker-container" :class="{ 'is-loading': localLoading }">