feat: Inline editing - Datetime

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

@@ -3,15 +3,50 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<div>
-		{{ getValue }}
+	<div class="cell-datetime">
+		<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 }">
+				<NcDateTimePickerNative
+					v-model="editDateTimeValue"
+					:type="getPickerType"
+					:disabled="localLoading || !canEditCell()" />
+				<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" />
+			</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,25 +61,203 @@ export default {
 			default: null,
 		},
 	},
+
+	data() {
+		return {
+			editDateTimeValue: null,
+			isInitialEditClick: false,
+		}
+	},
+
 	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)
+
+		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()
+				this.$nextTick(() => {
+					document.addEventListener('click', this.handleClickOutside)
+				})
+			} else {
+				document.removeEventListener('click', this.handleClickOutside)
+				this.isInitialEditClick = false
+			}
+		},
+	},
+
+	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()
+
+				if (this.column.type === 'datetime-time') {
+					const timeMoment = Moment(this.value, format)
+					if (timeMoment.isValid()) {
+						this.editDateTimeValue = timeMoment.toDate()
+					} else {
+						this.editDateTimeValue = new Date()
+					}
+				} else {
+					const parsedMoment = Moment(this.value, format)
+					this.editDateTimeValue = parsedMoment.isValid() ? parsedMoment.toDate() : null
+				}
+			} else if ((this.value === null || this.value === '') && this.column.datetimeDefault) {
+				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, have 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) {
+			// 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()
+			}
 		},
 	},
 }
 </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%;
+		}
 
-div {
-	text-align: right;
+		/*
+		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 {
+		width: 100%;
+	}
+
+}
+
+.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>

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

@@ -114,9 +114,6 @@ export default {
 		nonInlineEditableColumnTypes() {
 			return [
 				ColumnTypes.TextRich,
-				ColumnTypes.Datetime,
-				ColumnTypes.DatetimeDate,
-				ColumnTypes.DatetimeTime,
 			]
 		},
 	},