Merge pull request #8096 from nextcloud/fix/remove-moment-usage-from-DueDate-badge

fix(ui): remove moment usage from due date badge

Author: grnd-alt

cypress/e2e/cardFeatures.js

@@ -272,16 +272,14 @@ describe('Card', function () {
 
 			cy.get('#app-sidebar-vue [data-cy-due-date-actions]').should('be.visible').click()
 
+			const now = new Date().setHours(11, 0, 0, 0)
+			cy.clock(now)
 			// Set a due date through shortcut
 			cy.get('[data-cy-due-date-shortcut="tomorrow"] button').should('be.visible').click()
 
 			const tomorrow = moment().add(1, 'days').hour(8).minutes(0).seconds(0)
 			cy.get('#card-duedate-picker').should('have.value', tomorrow.format('YYYY-MM-DDTHH:mm'))
 
-			const now = moment().hour(11).minutes(0).seconds(0).toDate()
-			cy.clock(now)
-			cy.log(now)
-			cy.tick(60_000)
 
 			cy.get(`.card:contains("${newCardTitle}")`).find('[data-due-state="Now"]').should('be.visible').should('contain', '21 hours')
 

src/components/cards/badges/DueDate.vue

@@ -18,10 +18,10 @@
 
 <script>
 import { mapState } from 'vuex'
-import moment from '@nextcloud/moment'
 import Clock from 'vue-material-design-icons/Clock.vue'
 import ClockOutline from 'vue-material-design-icons/ClockOutline.vue'
 import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
+import { useFormatTime, useFormatRelativeTime } from '@nextcloud/vue'
 
 const DueState = {
 	Done: 'Done',
@@ -51,7 +51,7 @@ export default {
 			if (this.card.done) {
 				return DueState.Done
 			}
-			const days = Math.floor(moment(this.card.duedate).diff(this.$root.time, 'seconds') / 60 / 60 / 24)
+			const days = Math.floor((new Date(this.card.duedate).getTime() - new Date(this.$root.time).getTime()) / 60 / 60 / 24 / 1000)
 			if (days < 0) {
 				return DueState.Overdue
 			}
@@ -68,16 +68,11 @@ export default {
 			return this.dueState === DueState.Overdue
 		},
 		relativeDate() {
-			const date = this.card.done ? this.card.done : this.card.duedate
-			const diff = moment(this.$root.time).diff(date, 'seconds')
-			if (diff >= 0 && diff < 45) {
-				return t('core', 'seconds ago')
-			}
-			return moment(date).fromNow()
+			return useFormatRelativeTime(this.card.done ? this.card.done : this.card.duedate).value
 		},
 		absoluteDate() {
-			const date = this.card.done ? this.card.done : this.card.duedate
-			return moment(date).format('LLLL')
+			const date = new Date(this.card.done ? this.card.done : this.card.duedate)
+			return useFormatTime(date, { format: { dateStyle: 'full', timeStyle: 'short' } }).value
 		},
 	},
 }

src/mixins/relativeDate.js

@@ -3,17 +3,13 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import moment from '@nextcloud/moment'
+import { useFormatRelativeTime } from '@nextcloud/vue'
 
 export default {
 	computed: {
 		relativeDate() {
 			return (timestamp) => {
-				const diff = moment(this.$root.time).diff(moment(timestamp))
-				if (diff >= 0 && diff < 45000) {
-					return t('core', 'seconds ago')
-				}
-				return moment(timestamp).fromNow()
+				return useFormatRelativeTime(timestamp)
 			}
 		},
 	},