feat(webapp): use date-fns directly

No need for an extra wrapper as dependency.

Author: Rotzbua

www/webapp/package.json

@@ -14,11 +14,11 @@
     "@mdi/js": "~7.2.96",
     "axios": "^1.4.0",
     "core-js": "^3.27.1",
+    "date-fns": "^2.30.0",
     "pinia": "^2.0.30",
     "vue": "~2.7.14",
     "vue-clipboard2": "^0.3.3",
     "vue-router": "~3.6.5",
-    "vue-timeago": "^5.1.3",
     "vuelidate": "^0.7.7",
     "vuetify": "^2.6.13"
   },

www/webapp/src/components/Field/TimeAgo.vue

@@ -1,19 +1,37 @@
 <template>
   <div
-          class="my-1 py-5"
-          :title="value"
-  ><timeago v-if="value" :datetime="value"></timeago><span v-else>never</span></div>
+      class="my-1 py-5"
+      :title="value"
+  >
+    <span v-text="formattedValue"></span>
+  </div>
 </template>
 
 <script>
+import formatDistanceToNow from 'date-fns/formatDistanceToNow';
+
 export default {
   name: 'TimeAgo',
   props: {
     value: {
       default: '',
       type: String,
     },
+    defaultText: {
+      default: 'never',
+      type: String,
+    },
   },
+  computed: {
+    formattedValue() {
+      const inputTime = this.value;
+      if(!inputTime)
+        return this.defaultText
+
+      const parsedTime = new Date(inputTime);
+      return formatDistanceToNow(parsedTime, {addSuffix: true});
+    }
+  }
 };
 </script>
 

www/webapp/src/main.js

@@ -11,15 +11,13 @@ import "@fontsource/roboto/400-italic.css" /* regular-italic */
 import "@fontsource/roboto/500.css" /* medium */
 import "@fontsource/roboto/700.css" /* bold */
 import '@mdi/font/css/materialdesignicons.css'
-import VueTimeago from 'vue-timeago'
 import {createPinia, PiniaVuePlugin} from "pinia";
 
 
 Vue.config.productionTip = false
 VueClipboard.config.autoSetContainer = true
 Vue.use(VueClipboard)
 Vue.use(Vuelidate)
-Vue.use(VueTimeago, {})
 // `Pinia` replaces `vuex` as store.
 Vue.use(PiniaVuePlugin)
 const pinia = createPinia()