Merge pull request #33915 from nextcloud/enh/33914-replace_expiration_date_picker_with_native_date_picker

Replace vue2-datepicker with native date picker for share expiration dates

Author: szaimen

apps/files_sharing/src/components/SharingEntry.vue

@@ -95,20 +95,15 @@
 				</NcActionCheckbox>
 				<NcActionInput v-if="hasExpirationDate"
 					ref="expireDate"
-					v-tooltip.auto="{
-						content: errors.expireDate,
-						show: errors.expireDate,
-						trigger: 'manual'
-					}"
+					:is-native-picker="true"
+					:hide-label="true"
 					:class="{ error: errors.expireDate}"
 					:disabled="saving"
-					:lang="lang"
 					:value="share.expireDate"
-					value-type="format"
-					icon="icon-calendar-dark"
 					type="date"
-					:disabled-date="disabledDate"
-					@update:value="onExpirationChange">
+					:min="dateTomorrow"
+					:max="dateMaxEnforced"
+					@input="onExpirationChange">
 					{{ t('files_sharing', 'Enter a date') }}
 				</NcActionInput>
 
@@ -380,21 +375,20 @@ export default {
 			},
 			set(enabled) {
 				this.share.expireDate = enabled
-					? this.config.defaultInternalExpirationDateString !== ''
-						? this.config.defaultInternalExpirationDateString
-						: moment().format('YYYY-MM-DD')
+					? this.config.defaultInternalExpirationDate !== ''
+						? this.config.defaultInternalExpirationDate
+						: new Date()
 					: ''
 			},
 		},
 
 		dateMaxEnforced() {
-			if (!this.isRemote) {
-				return this.config.isDefaultInternalExpireDateEnforced
-					&& moment().add(1 + this.config.defaultInternalExpireDate, 'days')
-			} else {
-				return this.config.isDefaultRemoteExpireDateEnforced
-					&& moment().add(1 + this.config.defaultRemoteExpireDate, 'days')
+			if (!this.isRemote && this.config.isDefaultInternalExpireDateEnforced) {
+				return new Date(new Date().setDate(new Date().getDate() + 1 + this.config.defaultInternalExpireDate))
+			} else if (this.config.isDefaultRemoteExpireDateEnforced) {
+				return new Date(new Date().setDate(new Date().getDate() + 1 + this.config.defaultRemoteExpireDate))
 			}
+			return null
 		},
 
 		/**

apps/files_sharing/src/components/SharingEntryLink.vue

@@ -98,20 +98,13 @@
 			</NcActionText>
 			<NcActionInput v-if="pendingExpirationDate"
 				v-model="share.expireDate"
-				v-tooltip.auto="{
-					content: errors.expireDate,
-					show: errors.expireDate,
-					trigger: 'manual',
-					defaultContainer: '#app-sidebar'
-				}"
 				class="share-link-expire-date"
 				:disabled="saving"
-
-				:lang="lang"
-				icon=""
+				:is-native-picker="true"
+				:hide-label="true"
 				type="date"
-				value-type="format"
-				:disabled-date="disabledDate">
+				:min="dateTomorrow"
+				:max="dateMaxEnforced">
 				<!-- let's not submit when picked, the user
 					might want to still edit or copy the password -->
 				{{ t('files_sharing', 'Enter a date') }}
@@ -220,22 +213,16 @@
 					</NcActionCheckbox>
 					<NcActionInput v-if="hasExpirationDate"
 						ref="expireDate"
-						v-tooltip.auto="{
-							content: errors.expireDate,
-							show: errors.expireDate,
-							trigger: 'manual',
-							defaultContainer: '#app-sidebar'
-						}"
+						:is-native-picker="true"
+						:hide-label="true"
 						class="share-link-expire-date"
 						:class="{ error: errors.expireDate}"
 						:disabled="saving"
-						:lang="lang"
 						:value="share.expireDate"
-						value-type="format"
-						icon="icon-calendar-dark"
 						type="date"
-						:disabled-date="disabledDate"
-						@update:value="onExpirationChange">
+						:min="dateTomorrow"
+						:max="dateMaxEnforced"
+						@input="onExpirationChange">
 						{{ t('files_sharing', 'Enter a date') }}
 					</NcActionInput>
 
@@ -435,20 +422,22 @@ export default {
 					|| !!this.share.expireDate
 			},
 			set(enabled) {
-				let dateString = moment(this.config.defaultExpirationDateString)
-				if (!dateString.isValid()) {
-					dateString = moment()
+				let defaultExpirationDate = this.config.defaultExpirationDate
+				if (!defaultExpirationDate) {
+					defaultExpirationDate = new Date()
 				}
 				this.share.state.expiration = enabled
-					? dateString.format('YYYY-MM-DD')
+					? defaultExpirationDate
 					: ''
 				console.debug('Expiration date status', enabled, this.share.expireDate)
 			},
 		},
 
 		dateMaxEnforced() {
-			return this.config.isDefaultExpireDateEnforced
-				&& moment().add(1 + this.config.defaultExpireDate, 'days')
+			if (this.config.isDefaultExpireDateEnforced) {
+				return new Date(new Date().setDate(new Date().getDate() + 1 + this.config.defaultExpireDate))
+			}
+			return null
 		},
 
 		/**
@@ -631,7 +620,7 @@ export default {
 			if (this.config.isDefaultExpireDateEnforced) {
 				// default is empty string if not set
 				// expiration is the share object key, not expireDate
-				shareDefaults.expiration = this.config.defaultExpirationDateString
+				shareDefaults.expiration = this.config.defaultExpirationDate
 			}
 			if (this.config.enableLinkPasswordByDefault) {
 				shareDefaults.password = await GeneratePassword()

apps/files_sharing/src/mixins/SharesMixin.js

@@ -97,7 +97,7 @@ export default {
 		},
 
 		dateTomorrow() {
-			return moment().add(1, 'days')
+			return new Date(new Date().setDate(new Date().getDate() + 1))
 		},
 
 		// Datepicker language
@@ -142,7 +142,7 @@ export default {
 				}
 			}
 			if (share.expirationDate) {
-				const date = moment(share.expirationDate)
+				const date = share.expirationDate
 				if (!date.isValid()) {
 					return false
 				}
@@ -151,16 +151,12 @@ export default {
 		},
 
 		/**
-		 * ActionInput can be a little tricky to work with.
-		 * Since we expect a string and not a Date,
-		 * we need to process the value here
+		 * Save given value to expireDate and trigger queueUpdate
 		 *
-		 * @param {Date} date js date to be parsed by moment.js
+		 * @param {Date} date
 		 */
 		onExpirationChange(date) {
-			// format to YYYY-MM-DD
-			const value = moment(date).format('YYYY-MM-DD')
-			this.share.expireDate = value
+			this.share.expireDate = date
 			this.queueUpdate('expireDate')
 		},
 
@@ -318,17 +314,5 @@ export default {
 		debounceQueueUpdate: debounce(function(property) {
 			this.queueUpdate(property)
 		}, 500),
-
-		/**
-		 * Returns which dates are disabled for the datepicker
-		 *
-		 * @param {Date} date date to check
-		 * @return {boolean}
-		 */
-		disabledDate(date) {
-			const dateMoment = moment(date)
-			return (this.dateTomorrow && dateMoment.isBefore(this.dateTomorrow, 'day'))
-				|| (this.dateMaxEnforced && dateMoment.isSameOrAfter(this.dateMaxEnforced, 'day'))
-		},
 	},
 }

apps/files_sharing/src/models/Share.js

@@ -248,9 +248,9 @@ export default class Share {
 	}
 
 	/**
-	 * Get the expiration date as a string format
+	 * Get the expiration date
 	 *
-	 * @return {string}
+	 * @return {Date|null}
 	 * @readonly
 	 * @memberof Share
 	 */
@@ -259,10 +259,9 @@ export default class Share {
 	}
 
 	/**
-	 * Set the expiration date as a string format
-	 * e.g. YYYY-MM-DD
+	 * Set the expiration date
 	 *
-	 * @param {string} date the share expiration date
+	 * @param {Date|null} date the share expiration date
 	 * @memberof Share
 	 */
 	set expireDate(date) {

apps/files_sharing/src/services/ConfigService.js

@@ -60,57 +60,45 @@ export default class Config {
 	}
 
 	/**
-	 * Get the default link share expiration date as string
+	 * Get the default link share expiration date
 	 *
-	 * @return {string}
+	 * @return {Date|null}
 	 * @readonly
 	 * @memberof Config
 	 */
-	get defaultExpirationDateString() {
-		let expireDateString = ''
+	get defaultExpirationDate() {
 		if (this.isDefaultExpireDateEnabled) {
-			const date = window.moment.utc()
-			const expireAfterDays = this.defaultExpireDate
-			date.add(expireAfterDays, 'days')
-			expireDateString = date.format('YYYY-MM-DD')
+			return new Date(new Date().setDate(new Date().getDate() + this.defaultExpireDate))
 		}
-		return expireDateString
+		return null
 	}
 
 	/**
-	 * Get the default internal expiration date as string
+	 * Get the default internal expiration date
 	 *
-	 * @return {string}
+	 * @return {Date|null}
 	 * @readonly
 	 * @memberof Config
 	 */
-	get defaultInternalExpirationDateString() {
-		let expireDateString = ''
+	get defaultInternalExpirationDate() {
 		if (this.isDefaultInternalExpireDateEnabled) {
-			const date = window.moment.utc()
-			const expireAfterDays = this.defaultInternalExpireDate
-			date.add(expireAfterDays, 'days')
-			expireDateString = date.format('YYYY-MM-DD')
+			return new Date(new Date().setDate(new Date().getDate() + this.defaultInternalExpireDate))
 		}
-		return expireDateString
+		return null
 	}
 
 	/**
-	 * Get the default remote expiration date as string
+	 * Get the default remote expiration date
 	 *
-	 * @return {string}
+	 * @return {Date|null}
 	 * @readonly
 	 * @memberof Config
 	 */
 	get defaultRemoteExpirationDateString() {
-		let expireDateString = ''
 		if (this.isDefaultRemoteExpireDateEnabled) {
-			const date = window.moment.utc()
-			const expireAfterDays = this.defaultRemoteExpireDate
-			date.add(expireAfterDays, 'days')
-			expireDateString = date.format('YYYY-MM-DD')
+			return new Date(new Date().setDate(new Date().getDate() + this.defaultRemoteExpireDate))
 		}
-		return expireDateString
+		return null
 	}
 
 	/**
@@ -190,6 +178,17 @@ export default class Config {
 		return OC.appConfig.core.defaultInternalExpireDateEnabled === true
 	}
 
+	/**
+	 * Is there a default expiration date for new remote shares ?
+	 *
+	 * @return {boolean}
+	 * @readonly
+	 * @memberof Config
+	 */
+	get isDefaultRemoteExpireDateEnabled() {
+		return OC.appConfig.core.defaultRemoteExpireDateEnabled === true
+	}
+
 	/**
 	 * Are users on this server allowed to send shares to other servers ?
 	 *