Implement config for 'date-time' format

webapp/components/DateTime/Readme.md

@@ -3,5 +3,5 @@
 Relative time from 08.03.2017
 
 ```
-<hc-relative-date-time dateTime="03.08.2017" />
+<date-time dateTime="03.08.2017" />
 ```

webapp/components/DateTime/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <span>{{ dateTimeString }}</span>
+</template>
+
+<script>
+import { getDateFnsLocale } from '~/locales'
+import format from 'date-fns/format'
+import formatRelative from 'date-fns/formatRelative'
+import dateTimeConstants from '~/constants/dateTime'
+
+export default {
+  name: 'DateTime',
+  props: {
+    dateTime: {
+      type: [Date, String],
+      required: true,
+    },
+  },
+  computed: {
+    dateTimeString() {
+      if (dateTimeConstants.RELATIVE_DATETIME) {
+        return formatRelative(new Date(this.dateTime), new Date(), { locale: getDateFnsLocale(this) })
+      } else {
+        return format(new Date(this.dateTime), dateTimeConstants.ABSOLUT_DATETIME_FORMAT, { locale: getDateFnsLocale(this) })
+      }
+    },
+  },
+}
+</script>

webapp/components/DateTime/spec.js

@@ -1,9 +1,9 @@
 import { shallowMount } from '@vue/test-utils'
-import RelativeDateTime from './'
+import DateTime from '.'
 
 const localVue = global.localVue
 
-describe('RelativeDateTime', () => {
+describe('DateTime', () => {
   let mocks
   let locale
   let dateTime
@@ -17,7 +17,7 @@ describe('RelativeDateTime', () => {
   })
 
   const Wrapper = () => {
-    return shallowMount(RelativeDateTime, {
+    return shallowMount(DateTime, {
       mocks,
       localVue,
       propsData: {

webapp/components/Modal/DeleteUserModal.vue

@@ -15,7 +15,7 @@
             <ds-text size="small">
               <span class="bold">{{ $t('modals.deleteUser.created') }}</span>
               <br />
-              <relative-date-time :date-time="userdata.createdAt" />
+              <date-time :date-time="userdata.createdAt" />
             </ds-text>
           </ds-flex-item>
           <ds-flex-item width="15%">
@@ -49,7 +49,7 @@
 import gql from 'graphql-tag'
 import { mapMutations } from 'vuex'
 import { SweetalertIcon } from 'vue-sweetalert-icons'
-import RelativeDateTime from '~/components/RelativeDateTime'
+import DateTime from '~/components/DateTime'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 
 export default {
@@ -57,7 +57,7 @@ export default {
   components: {
     UserTeaser,
     SweetalertIcon,
-    RelativeDateTime,
+    DateTime,
   },
   props: {
     userdata: { type: Object, required: true },

webapp/components/RelativeDateTime/index.vue

@@ -1,23 +0,0 @@
-<template>
-  <span>{{ relativeDateTime }}</span>
-</template>
-
-<script>
-import { getDateFnsLocale } from '~/locales'
-import formatRelative from 'date-fns/formatRelative'
-
-export default {
-  name: 'HcRelativeDateTime',
-  props: {
-    dateTime: {
-      type: [Date, String],
-      required: true,
-    },
-  },
-  computed: {
-    relativeDateTime() {
-      return formatRelative(new Date(this.dateTime), new Date(), { locale: getDateFnsLocale(this) })
-    },
-  },
-}
-</script>

webapp/components/UserTeaser/UserTeaser.vue

@@ -36,7 +36,7 @@
         </div>
         <span v-if="!userOnly" class="text">
           <base-icon name="clock" />
-          <relative-date-time :date-time="dateTime" />
+          <date-time :date-time="dateTime" />
           <slot name="dateTime"></slot>
         </span>
         <span v-else class="text">{{ userName }}</span>
@@ -48,13 +48,13 @@
 <script>
 import { mapGetters } from 'vuex'
 
-import RelativeDateTime from '~/components/RelativeDateTime'
+import DateTime from '~/components/DateTime'
 import ProfileAvatar from '~/components/_new/generic/ProfileAvatar/ProfileAvatar'
 
 export default {
   name: 'UserTeaser',
   components: {
-    RelativeDateTime,
+    DateTime,
     ProfileAvatar,
   },
   props: {

webapp/components/features/FiledReportsTable/FiledReportsTable.vue

@@ -16,7 +16,7 @@
     </template>
     <template #reportedOn="scope">
       <ds-text size="small">
-        <hc-relative-date-time :date-time="scope.row.createdAt" data-test="filed-date" />
+        <date-time :date-time="scope.row.createdAt" data-test="filed-date" />
       </ds-text>
     </template>
     <template #reasonCategory="scope">
@@ -29,12 +29,12 @@
 </template>
 <script>
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
-import HcRelativeDateTime from '~/components/RelativeDateTime'
+import DateTime from '~/components/DateTime'
 
 export default {
   components: {
     UserTeaser,
-    HcRelativeDateTime,
+    DateTime,
   },
   props: {
     filed: { type: Array, default: () => [] },

webapp/constants/dateTime.js

@@ -0,0 +1,5 @@
+// this file is duplicated in `backend/src/config/metadata.js` and `webapp/constants/metadata.js`
+export default {
+  RELATIVE_DATETIME: true,
+  ABSOLUT_DATETIME_FORMAT: 'P',
+}