Merge pull request #6985 from Ocelot-Social-Community/6979-make-relative-date-configurable

feat(webapp): implement config for `date-time` format

CONTRIBUTING.md

@@ -171,11 +171,11 @@ Please copy and paste the following quotes for the languages:
 
 ## Docker – More Closely
 
-### Apple M1 Platform
+### Apple Silicon Platform
 
-***Attention:** For using Docker commands in Apple M1 environments!*
+***ATTENTION:** For using Docker commands in Apple Silicon environments!*
 
-#### Environment Variable For Apple M1 Platform
+#### Environment Variable For Apple Silicon Platform (M1, M2 Chips)
 
 If you encounter trouble building the docker containers on an Apple M1 chip you can try to explicitly define the target platform docker builds and pulls images for:
 

README.md

@@ -172,7 +172,9 @@ Check the correct Docker installation by checking the version before proceeding.
 $ docker --version
 ```
 
-##### Start Ocelot-Social via Docker-Compose
+##### Start Ocelot-Social via Docker Compose
+
+***ATTENTION:** For using Docker commands in Apple Silicon environments see [here](https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/CONTRIBUTING.md#apple-silicon-platform).*
 
 Prepare ENVs once beforehand:
 
@@ -233,7 +235,7 @@ We are happy if you fork our repository, but we don't recommend it for developme
 
 Clone this repository locally as [described above](#clone-the-repository), create your branch named `<issue-number>-<description>`, add your code and push your branch direct to this repository. Then create a PR by comparing it to our `master`.
 
-**_!!! Be aware:_** Please don't compare from a fork, because the tests are breaking caused by credential problems.
+***!!! Be aware:*** Please don't compare from a fork, because the tests are breaking caused by credential problems.
 
 Please run the following commands before you push:
 

deployment/TODO-next-update.md

@@ -2,7 +2,9 @@
 
 When you introduce a new version and branding and deploy it on your network, you need to consider the following changes and actions:
 
-## Version >= 3.1.3 with 'ocelotDockerVersionTag' 3.1.3-XXX
+## Version >= 3.2.0 with 'ocelotDockerVersionTag' 3.2.0-XXX
+
+### Backend and Kubernetes Config `DBMS_DEFAULT_DATABASE`
 
 - We have the new option to configure the default name of the Neo4j database to be used for operations and commands in environment variables (`.env`, `docker-compose.yml` or `values.yaml`).
 For more details see  [deployment-values.md](deployment-values.md):
@@ -13,6 +15,10 @@ DBMS_DEFAULT_DATABASE: "graph.db"
 
 The default value is `neo4j` if it is not set.
 
+### Webapp Config `dateTime`
+
+- You can set `RELATIVE_DATETIME` and `ABSOLUT_DATETIME_FORMAT` in `branding/constants/dateTime.js` originally in main code file `webapp/constants/dateTime.js` to your preferred values.
+
 ## Version >= 3.1.0 with 'ocelotDockerVersionTag' 3.1.0-555
 
 - We have the new option to configure DKIM for sent e-mails in environment variables (`.env`, `docker-compose.yml` or `values.yaml`), see [deployment-values.md](deployment-values.md):
@@ -26,7 +32,7 @@ The default value is `neo4j` if it is not set.
 
 ## Version >= 2.4.0 with 'ocelotDockerVersionTag' 2.4.0-298
 
-- You have to set `SHOW_CONTENT_FILTER_HEADER_MENU` and `SHOW_CONTENT_FILTER_MASONRY_GRID` in `branding/constants/filter.js` originally in main code file `webapp/constants/filter.js` to your preferred value.
+- You have to set `SHOW_CONTENT_FILTER_HEADER_MENU` and `SHOW_CONTENT_FILTER_MASONRY_GRID` in `branding/constants/filter.js` originally in main code file `webapp/constants/filter.js` to your preferred values.
 
 ### Main Code PR –  feat(webapp): map #5843
 

deployment/deployment-values.md

@@ -3,6 +3,21 @@
 For each deployment, you need to set the environment variables and configurations.
 Here is some specific information on how to set the values.
 
+## Webapp
+
+We have several configuration possibilities just in the frontend.
+
+### Date Time
+
+In file `branding/constants/dateTime.js`.
+
+- `RELATIVE_DATETIME`
+  - `true` (default) or `false`
+- `ABSOLUT_DATETIME_FORMAT`
+  - definition see [date-fns, format](https://date-fns.org/v3.3.1/docs/format):
+    - `P`: just localized date
+    - `Pp`: just localized date and time
+
 ## E-Mails
 
 You need to set environment variables to send registration and invitation information or notifications to users, for example.

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,33 @@
+<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/PostTeaser/PostTeaser.vue

@@ -103,7 +103,7 @@
       <client-only>
         <div class="date-row" v-if="post.createdAt">
           <span class="text">
-            <relative-date-time :date-time="post.createdAt" />
+            <date-time :date-time="post.createdAt" />
             <slot name="dateTime"></slot>
           </span>
         </div>
@@ -119,7 +119,7 @@ import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import DateTimeRange from '~/components/DateTimeRange/DateTimeRange'
 import HcRibbon from '~/components/Ribbon'
 import LocationTeaser from '~/components/LocationTeaser/LocationTeaser'
-import RelativeDateTime from '~/components/RelativeDateTime'
+import DateTime from '~/components/DateTime'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import { mapGetters } from 'vuex'
 import PostMutations from '~/graphql/PostMutations'
@@ -134,7 +134,7 @@ export default {
     DateTimeRange,
     HcRibbon,
     LocationTeaser,
-    RelativeDateTime,
+    DateTime,
     UserTeaser,
   },
   props: {

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 && dateTime" class="text">
           <base-icon name="clock" />
-          <relative-date-time :date-time="dateTime" />
+          <date-time :date-time="dateTime" />
           <slot name="dateTime"></slot>
         </span>
       </div>
@@ -47,13 +47,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',
+}