Merge pull request #3426 from gradido/admin_fix_date_format

feat(admin): resubmission date localized

admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js

@@ -21,6 +21,7 @@ vi.mock('@vue/apollo-composable', () => ({
 
 vi.mock('vue-i18n', () => ({
   useI18n: () => ({
+    locale: { value: 'en' },
     t: (key) => key,
   }),
 }))

admin/src/components/ContributionMessages/ContributionMessagesFormular.vue

@@ -9,7 +9,13 @@
         </BFormGroup>
         <BFormGroup v-if="showResubmissionDate">
           <div class="d-flex my-2">
-            <Datepicker v-model="resubmissionDate" :lower-limit="now" class="form-control" />
+            <Datepicker
+              v-model="resubmissionDate"
+              :locale="dateLocale"
+              input-format="P"
+              :lower-limit="now"
+              class="form-control"
+            />
             <time-picker v-model="resubmissionTime" class="ms-2" />
           </div>
         </BFormGroup>
@@ -80,9 +86,9 @@
 
 <script setup>
 import { ref, computed } from 'vue'
+import { useDateLocale } from '@/composables/useDateLocale'
 import { useMutation } from '@vue/apollo-composable'
 import { useI18n } from 'vue-i18n'
-
 import Datepicker from 'vue3-datepicker'
 import TimePicker from '@/components/input/TimePicker'
 import { adminCreateContributionMessage } from '@/graphql/adminCreateContributionMessage'
@@ -117,6 +123,7 @@ const emit = defineEmits([
 ])
 
 const { t } = useI18n()
+const dateLocale = useDateLocale()
 const { toastError, toastSuccess } = useAppToast()
 const form = ref({
   text: '',

admin/src/components/Federation/CommunityVisualizeItem.vue

@@ -89,9 +89,9 @@
 <script setup>
 import { ref, computed, toRefs } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useDateLocale } from '@/composables/useDateLocale'
 import { useMutation } from '@vue/apollo-composable'
 import { formatDistanceToNow } from 'date-fns'
-import { de, enUS as en, fr, es, nl } from 'date-fns/locale'
 import EditableGroup from '@/components/input/EditableGroup.vue'
 import FederationVisualizeItem from './FederationVisualizeItem.vue'
 import { updateHomeCommunity } from '@/graphql/updateHomeCommunity'
@@ -99,15 +99,13 @@ import Coordinates from '../input/Coordinates.vue'
 import EditableGroupableLabel from '../input/EditableGroupableLabel.vue'
 import { useAppToast } from '@/composables/useToast'
 
-const locales = { en, de, es, fr, nl }
-
 const props = defineProps({
   item: { type: Object, required: true },
 })
 
 const { item } = toRefs(props)
 
-const { t, locale } = useI18n()
+const { t } = useI18n()
 
 const { toastSuccess, toastError } = useAppToast()
 
@@ -147,7 +145,7 @@ const lastAnnouncedAt = computed(() => {
     return formatDistanceToNow(lastAnnouncedAt, {
       includeSecond: true,
       addSuffix: true,
-      locale: locales[locale.value],
+      locale: useDateLocale(),
     })
   }
   return ''
@@ -158,7 +156,7 @@ const createdAt = computed(() => {
     return formatDistanceToNow(new Date(item.value.createdAt), {
       includeSecond: true,
       addSuffix: true,
-      locale: locales[locale.value],
+      locale: useDateLocale(),
     })
   }
   return ''

admin/src/components/Federation/FederationVisualizeItem.vue

@@ -30,11 +30,9 @@
 </template>
 <script>
 import { formatDistanceToNow } from 'date-fns'
-import { de, enUS as en, fr, es, nl } from 'date-fns/locale'
+import { useDateLocale } from '@/composables/useDateLocale'
 import VariantIcon from '@/components/VariantIcon.vue'
 
-const locales = { en, de, es, fr, nl }
-
 export default {
   name: 'FederationVisualizeItem',
   components: { VariantIcon },
@@ -58,7 +56,7 @@ export default {
         ? formatDistanceToNow(new Date(dateString), {
             includeSecond: true,
             addSuffix: true,
-            locale: locales[this.$i18n.locale],
+            locale: useDateLocale,
           })
         : ''
     },

admin/src/composables/useDateLocale.js

@@ -0,0 +1,10 @@
+import { useI18n } from 'vue-i18n'
+import { de, enUS as en, fr, es, nl } from 'date-fns/locale'
+
+const locales = { en, de, es, fr, nl }
+
+export function useDateLocale() {
+  const { locale } = useI18n()
+  const dateLocale = locales[locale.value] || en
+  return dateLocale
+}