diff options
| author | nfebe <fenn25.fn@gmail.com> | 2025-03-21 16:16:55 +0100 |
|---|---|---|
| committer | nfebe <fenn25.fn@gmail.com> | 2025-03-24 15:44:47 +0100 |
| commit | 94df136e8f781300c9c2e3fc26c05d12b852ec60 (patch) | |
| tree | a95fd7fd1a1c92e09d8f5c143e49cd5fd59b00da | |
| parent | beac7f70ed975a86848dd8eb646b50a9d0a064a8 (diff) | |
| download | nextcloud-server-feat/47176/show-share-expiry.tar.gz nextcloud-server-feat/47176/show-share-expiry.zip | |
feat(files_sharing): Show share expiration time in human friendly mannerfeat/47176/show-share-expiry
Signed-off-by: nfebe <fenn25.fn@gmail.com>
| -rw-r--r-- | apps/files_sharing/src/components/ShareExpiryTime.vue | 52 |
1 files changed, 45 insertions, 7 deletions
diff --git a/apps/files_sharing/src/components/ShareExpiryTime.vue b/apps/files_sharing/src/components/ShareExpiryTime.vue index ab6ed2973c9..46b860e7c45 100644 --- a/apps/files_sharing/src/components/ShareExpiryTime.vue +++ b/apps/files_sharing/src/components/ShareExpiryTime.vue @@ -26,6 +26,31 @@ import NcButton from '@nextcloud/vue/components/NcButton' import NcPopover from '@nextcloud/vue/components/NcPopover' import ClockIcon from 'vue-material-design-icons/Clock.vue' +import { getLocale } from '@nextcloud/l10n' +import dayjs from 'dayjs' +import relativeTime from 'dayjs/plugin/relativeTime' +import utc from 'dayjs/plugin/utc' +import timezone from 'dayjs/plugin/timezone' +import localizedFormat from 'dayjs/plugin/localizedFormat' + +dayjs.extend(relativeTime) +dayjs.extend(utc) +dayjs.extend(timezone) +dayjs.extend(localizedFormat) + +/** + * + * @param locale + */ +async function loadLocale(locale) { + try { + await import(`dayjs/locale/${locale}.js`) + dayjs.locale(locale) + } catch (error) { + console.warn(`Locale ${locale} not found, falling back to English`) + dayjs.locale('en') + } +} export default { name: 'ShareExpiryTime', @@ -45,15 +70,28 @@ export default { computed: { expiryTime() { - return this.share?.expireDate || null + return this.share?.expireDate ? dayjs(this.share.expireDate) : null }, formattedExpiry() { - return this.expiryTime - ? this.t('files_sharing', 'Share expires on {datetime}', { datetime: this.expiryTime }) - : '' + if (!this.expiryTime) { + return '' + } + + const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone + const formattedDate = this.expiryTime.tz(userTimezone).locale(getLocale()).format('LLLL') + const relativeTime = this.expiryTime.tz(userTimezone).fromNow() + + return this.t('files_sharing', 'Share expires on {datetime} ({relative})', { + datetime: formattedDate, + relative: relativeTime, + }) }, }, + + created() { + loadLocale(getLocale()) + }, } </script> @@ -72,7 +110,7 @@ export default { } .hint-body { - padding: var(--border-radius-element); - max-width: 300px; - } + padding: var(--border-radius-element); + max-width: 300px; +} </style> |