Refactor formatDate composable

assets/vue/components/assignments/TeacherAssignmentList.vue

@@ -30,7 +30,7 @@
       field="sentDate"
     >
       <template #body="slotProps">
-        {{ useAbbreviatedDatetime(slotProps.data.sentDate) }}
+        {{ abbreviatedDatetime(slotProps.data.sentDate) }}
       </template>
     </Column>
     <Column
@@ -39,7 +39,7 @@
       field="assignment.expiresOn"
     >
       <template #body="slotProps">
-        {{ useAbbreviatedDatetime(slotProps.data.assignment.expiresOn) }}
+        {{ abbreviatedDatetime(slotProps.data.assignment.expiresOn) }}
       </template>
     </Column>
     <Column :header="t('Number submitted')">
@@ -114,7 +114,7 @@ import { onMounted, reactive, ref, watch } from "vue"
 import { useI18n } from "vue-i18n"
 import cStudentPublicationService from "../../services/cstudentpublication"
 import { useCidReq } from "../../composables/cidReq"
-import { useAbbreviatedDatetime } from "../../composables/formatDate"
+import { useFormatDate } from "../../composables/formatDate"
 import BaseTag from "../basecomponents/BaseTag.vue"
 import BaseButton from "../basecomponents/BaseButton.vue"
 import { RESOURCE_LINK_DRAFT, RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility"
@@ -137,6 +137,8 @@ const notification = useNotification()
 
 const confirm = useConfirm()
 
+const { abbreviatedDatetime } = useFormatDate()
+
 const sortFields = ref([{ field: "sentDate", order: -1 }])
 const loadParams = reactive({
   page: 1,

assets/vue/components/ccalendarevent/CCalendarEventInfo.vue

@@ -2,11 +2,11 @@
   <div class="flex flex-col gap-4">
     <h5 v-text="event.title" />
 
-    <p v-text="useAbbreviatedDatetime(event.startDate)" />
+    <p v-text="abbreviatedDatetime(event.startDate)" />
 
     <p
       v-if="event.endDate"
-      v-text="useAbbreviatedDatetime(event.endDate)"
+      v-text="abbreviatedDatetime(event.endDate)"
     />
 
     <hr />
@@ -23,10 +23,12 @@
 </template>
 
 <script setup>
-import { useAbbreviatedDatetime } from "../../composables/formatDate.js"
+import { useFormatDate } from "../../composables/formatDate"
 
 import ShowLinks from "../resource_links/ShowLinks"
 
+const { abbreviatedDatetime } = useFormatDate()
+
 // eslint-disable-next-line no-undef
 defineProps({
   event: {

assets/vue/components/social/SocialWallComment.vue

@@ -12,10 +12,10 @@
       </q-item-label>
       <q-item-label v-html="comment.content" />
       <q-item-label
-        :title="$filters.abbreviatedDatetime(comment.sendDate)"
+        :title="abbreviatedDatetime(comment.sendDate)"
         caption
       >
-        {{ $filters.relativeDatetime(comment.sendDate) }}
+        {{ relativeDatetime(comment.sendDate) }}
       </q-item-label>
     </q-item-section>
 
@@ -33,6 +33,9 @@
 import {useStore} from "vuex"
 import {computed} from "vue"
 import WallActions from "./Actions"
+import { useFormatDate } from "../../composables/formatDate"
+
+const { abbreviatedDatetime, relativeDatetime } = useFormatDate()
 
 const props = defineProps({
   comment: {

assets/vue/components/social/SocialWallPost.vue

@@ -26,7 +26,7 @@
           </div>
 
           <small>
-            {{ $filters.relativeDatetime(post.sendDate) }}
+            {{ relativeDatetime(post.sendDate) }}
           </small>
         </div>
 
@@ -93,6 +93,7 @@ import {ENTRYPOINT} from "../../config/entrypoint";
 import {useStore} from "vuex";
 import BaseCard from "../basecomponents/BaseCard.vue";
 import {SOCIAL_TYPE_PROMOTED_MESSAGE} from "./constants";
+import { useFormatDate } from "../../composables/formatDate"
 
 const props = defineProps({
   post: {
@@ -105,6 +106,8 @@ const emit = defineEmits(["post-deleted"]);
 
 const store = useStore();
 
+const { relativeDatetime } = useFormatDate()
+
 const attachment = null;//props.post.attachments.length ? props.post.attachments[0] : null;
 let comments = reactive([]);
 

assets/vue/composables/formatDate.js

@@ -1,16 +1,21 @@
 const { DateTime } = require("luxon")
 
-export function useAbbreviatedDatetime(datetime) {
-  if (!datetime) {
-    return ""
+export function useFormatDate() {
+  const abbreviatedDatetime = (datetime) => {
+    if (!datetime) {
+      return ""
+    }
+
+    return DateTime.fromISO(datetime).toLocaleString({
+      ...DateTime.DATETIME_MED,
+      month: "long",
+    })
   }
 
-  return DateTime.fromISO(datetime).toLocaleString({
-    ...DateTime.DATETIME_MED,
-    month: "long",
-  })
-}
+  const relativeDatetime = (datetime) => DateTime.fromISO(datetime).toRelative()
 
-export function useRelativeDatetime(datetime) {
-  return DateTime.fromISO(datetime).toRelative()
+  return {
+    abbreviatedDatetime,
+    relativeDatetime,
+  }
 }

assets/vue/main.js

@@ -216,23 +216,8 @@ app.config.globalProperties.axios = axios
 app.config.globalProperties.window = window
 
 const prettyBytes = require("pretty-bytes")
-const { DateTime } = require("luxon")
 
 app.config.globalProperties.$filters = {
-  /**
-   * @param {string} datetime
-   * @returns {string}
-   */
-  abbreviatedDatetime(datetime) {
-    return DateTime.fromISO(datetime).toLocaleString({ ...DateTime.DATETIME_MED, month: "long" })
-  },
-  /**
-   * @param {string} datetime
-   * @returns {string}
-   */
-  relativeDatetime(datetime) {
-    return DateTime.fromISO(datetime).toRelative()
-  },
   prettyBytes,
 }
 

assets/vue/views/ccalendarevent/CCalendarEventList.vue

@@ -76,7 +76,7 @@
           v-t="{
             path: 'From: {date}',
             args: {
-              date: useAbbreviatedDatetime(sessionState.sessionAsEvent.start),
+              date: abbreviatedDatetime(sessionState.sessionAsEvent.start),
             },
           }"
         />
@@ -85,7 +85,7 @@
           v-t="{
             path: 'Until: {date}',
             args: {
-              date: useAbbreviatedDatetime(sessionState.sessionAsEvent.end),
+              date: abbreviatedDatetime(sessionState.sessionAsEvent.end),
             },
           }"
         />
@@ -107,7 +107,7 @@ import { computed, reactive, ref, watch } from "vue"
 import { useStore } from "vuex"
 import { useI18n } from "vue-i18n"
 import { useConfirm } from "primevue/useconfirm"
-import { useAbbreviatedDatetime } from "../../composables/formatDate.js"
+import { useFormatDate } from "../../composables/formatDate"
 import { usePlatformConfig } from "../../store/platformConfig"
 
 import Loading from "../../components/Loading.vue"
@@ -131,6 +131,8 @@ const confirm = useConfirm()
 const platformConfigStore = usePlatformConfig()
 const cidReqStore = useCidReqStore()
 
+const { abbreviatedDatetime } = useFormatDate()
+
 const item = ref({})
 const dialog = ref(false)
 const dialogShow = ref(false)

assets/vue/views/documents/DocumentForHtmlEditor.vue

@@ -72,7 +72,7 @@
       field="resourceNode.updatedAt"
     >
       <template #body="slotProps">
-        {{ $filters.relativeDatetime(slotProps.data.resourceNode.updatedAt) }}
+        {{ relativeDatetime(slotProps.data.resourceNode.updatedAt) }}
       </template>
     </Column>
 
@@ -156,6 +156,7 @@ import DataFilter from "../../components/DataFilter"
 import DocumentsFilterForm from "../../components/documents/Filter"
 import { RESOURCE_LINK_PUBLISHED } from "../../components/resource_links/visibility"
 import { useI18n } from "vue-i18n"
+import { useFormatDate } from "../../composables/formatDate"
 
 export default {
   name: "DocumentForHtmlEditor",
@@ -171,6 +172,8 @@ export default {
   mixins: [ListMixin],
   setup() {
     const { t } = useI18n()
+    const { relativeDatetime } = useFormatDate()
+
     const data = {
       sortBy: "title",
       sortDesc: false,
@@ -192,6 +195,7 @@ export default {
       item: {},
       filters: {},
       submitted: false,
+      relativeDatetime,
     }
 
     return data

assets/vue/views/documents/DocumentsList.vue

@@ -124,7 +124,7 @@
       field="resourceNode.updatedAt"
     >
       <template #body="slotProps">
-        {{ useRelativeDatetime(slotProps.data.resourceNode.updatedAt) }}
+        {{ relativeDatetime(slotProps.data.resourceNode.updatedAt) }}
       </template>
     </Column>
 
@@ -292,7 +292,7 @@ import { useI18n } from "vue-i18n"
 import { computed, onMounted, ref, watch } from "vue"
 import { useCidReq } from "../../composables/cidReq"
 import { useDatatableList } from "../../composables/datatableList"
-import { useRelativeDatetime } from "../../composables/formatDate"
+import { useFormatDate } from "../../composables/formatDate"
 import axios from "axios"
 import DocumentEntry from "../../components/documents/DocumentEntry.vue"
 import BaseButton from "../../components/basecomponents/BaseButton.vue"
@@ -317,6 +317,8 @@ const notification = useNotification()
 const { cid, sid, gid } = useCidReq()
 const { isImage } = useFileUtils()
 
+const { relativeDatetime } = useFormatDate()
+
 const item = ref({})
 const usageData = ref({})
 

assets/vue/views/documents/Show.vue

@@ -86,7 +86,7 @@
                 <strong>{{ $t("Created at") }}</strong>
               </td>
               <td>
-                {{ item["resourceNode"] ? $filters.relativeDatetime(item["resourceNode"].createdAt) : "" }}
+                {{ item["resourceNode"] ? relativeDatetime(item["resourceNode"].createdAt) : "" }}
               </td>
               <td />
             </tr>
@@ -95,7 +95,7 @@
                 <strong>{{ $t("Updated at") }}</strong>
               </td>
               <td>
-                {{ item["resourceNode"] ? $filters.relativeDatetime(item["resourceNode"].updatedAt) : "" }}
+                {{ item["resourceNode"] ? relativeDatetime(item["resourceNode"].updatedAt) : "" }}
               </td>
               <td />
             </tr>
@@ -138,6 +138,8 @@ import Toolbar from "../../components/Toolbar.vue"
 
 import ShowLinks from "../../components/resource_links/ShowLinks.vue"
 
+import { useFormatDate } from "../../composables/formatDate"
+
 const servicePrefix = "Documents"
 
 export default {
@@ -148,6 +150,13 @@ export default {
     ShowLinks,
   },
   mixins: [ShowMixin],
+  data() {
+    const { relativeDatetime } = useFormatDate()
+
+    return {
+      relativeDatetime
+    }
+  },
   computed: {
     ...mapFields("documents", {
       isLoading: "isLoading",

assets/vue/views/message/MessageList.vue

@@ -127,7 +127,7 @@
         </Column>
         <Column :header="t('Send date')">
           <template #body="slotProps">
-            {{ useRelativeDatetime(slotProps.data.sendDate) }}
+            {{ relativeDatetime(slotProps.data.sendDate) }}
           </template>
         </Column>
         <Column :header="t('Actions')">
@@ -150,7 +150,7 @@ import { computed, onMounted, ref } from "vue"
 import { useStore } from "vuex"
 import { useI18n } from "vue-i18n"
 import { useRoute, useRouter } from "vue-router"
-import { useRelativeDatetime } from "../../composables/formatDate"
+import { useFormatDate } from "../../composables/formatDate"
 import BaseButton from "../../components/basecomponents/BaseButton.vue"
 import BaseMenu from "../../components/basecomponents/BaseMenu.vue"
 import BaseUserAvatar from "../../components/basecomponents/BaseUserAvatar.vue"
@@ -174,6 +174,8 @@ const notification = useNotification()
 
 const messageRelUserStore = useMessageRelUserStore()
 
+const { relativeDatetime } = useFormatDate()
+
 const user = computed(() => store.getters["security/getUser"])
 
 const mItemsMarkAs = ref([

assets/vue/views/message/MessageShow.vue

@@ -98,7 +98,7 @@
 
     <hr />
 
-    <p v-text="useRelativeDatetime(item.sendDate)" />
+    <p v-text="relativeDatetime(item.sendDate)" />
 
     <div v-html="item.content" />
 
@@ -147,7 +147,7 @@ import { useConfirm } from "primevue/useconfirm"
 import { useI18n } from "vue-i18n"
 import BaseChip from "../../components/basecomponents/BaseChip.vue"
 import BaseAutocomplete from "../../components/basecomponents/BaseAutocomplete.vue"
-import { useRelativeDatetime } from "../../composables/formatDate"
+import { useFormatDate } from "../../composables/formatDate"
 import { useMessageRelUserStore } from "../../store/messageRelUserStore"
 
 const confirm = useConfirm()
@@ -161,6 +161,8 @@ const route = useRoute()
 const router = useRouter()
 const messageRelUserStore = useMessageRelUserStore()
 
+const { relativeDatetime } = useFormatDate()
+
 let id = route.params.id
 if (isEmpty(id)) {
   id = route.query.id

assets/vue/views/page/Show.vue

@@ -64,7 +64,7 @@
                 <strong>{{ $t("Created at") }}</strong>
               </td>
               <td>
-                {{ item["createdAt"] ? $luxonDateTime.fromISO(item["createdAt"]).toRelative() : "" }}
+                {{ item["createdAt"] ? relativeDatetime(item["createdAt"]) : "" }}
               </td>
               <td />
             </tr>
@@ -73,7 +73,7 @@
                 <strong>{{ $t("Updated at") }}</strong>
               </td>
               <td>
-                {{ item["updatedAt"] ? $luxonDateTime.fromISO(item["updatedAt"]).toRelative() : "" }}
+                {{ item["updatedAt"] ? relativeDatetime(item["updatedAt"]) : "" }}
               </td>
               <td />
             </tr>
@@ -92,15 +92,23 @@ import { mapFields } from "vuex-map-fields"
 import Loading from "../../components/Loading.vue"
 import ShowMixin from "../../mixins/ShowMixin"
 import Toolbar from "../../components/Toolbar.vue"
+import { useFormatDate } from "../../composables/formatDate"
 
 const servicePrefix = "Page"
 
+const { relativeDatetime } = useFormatDate()
+
 export default {
   name: "PageShow",
   components: {
     Loading,
     Toolbar,
   },
+  data() {
+    return {
+      relativeDatetime,
+    }
+  },
   mixins: [ShowMixin],
   computed: {
     ...mapFields("page", {

assets/vue/views/personalfile/List.vue

@@ -99,7 +99,7 @@
       field="resourceNode.updatedAt"
     >
       <template #body="slotProps">
-        {{ $filters.relativeDatetime(slotProps.data.resourceNode.updatedAt) }}
+        {{ relativeDatetime(slotProps.data.resourceNode.updatedAt) }}
       </template>
     </Column>
 
@@ -260,6 +260,7 @@ import DataFilter from "../../components/DataFilter"
 import isEmpty from "lodash/isEmpty"
 import { RESOURCE_LINK_PUBLISHED } from "../../components/resource_links/visibility"
 import { useI18n } from "vue-i18n"
+import { useFormatDate } from "../../composables/formatDate"
 
 export default {
   name: "PersonalFileList",
@@ -275,6 +276,8 @@ export default {
   mixins: [ListMixin],
   setup() {
     const { t } = useI18n()
+    const { relativeDatetime } = useFormatDate()
+
     const data = {
       sortBy: "title",
       sortDesc: false,
@@ -313,6 +316,7 @@ export default {
       item: {},
       filters: { shared: 0, loadNode: 1 },
       submitted: false,
+      relativeDatetime
     }
 
     return data

assets/vue/views/personalfile/Shared.vue

@@ -61,7 +61,7 @@
       field="resourceNode.updatedAt"
     >
       <template #body="slotProps">
-        {{ $filters.relativeDatetime(slotProps.data.resourceNode.updatedAt) }}
+        {{ relativeDatetime(slotProps.data.resourceNode.updatedAt) }}
       </template>
     </Column>
 
@@ -87,6 +87,7 @@ import ResourceIcon from "../../components/documents/ResourceIcon.vue"
 import ResourceFileLink from "../../components/documents/ResourceFileLink.vue"
 import DataFilter from "../../components/DataFilter"
 import isEmpty from "lodash/isEmpty"
+import { useFormatDate } from "../../composables/formatDate"
 
 export default {
   name: "PersonalFileShared",
@@ -99,6 +100,8 @@ export default {
     DataFilter,
   },
   data() {
+    const { relativeDatetime } = useFormatDate()
+
     return {
       sortBy: "title",
       sortDesc: false,
@@ -120,6 +123,7 @@ export default {
       item: {},
       filters: { shared: 1, loadNode: 0 },
       submitted: false,
+      relativeDatetime,
     }
   },
   created() {

assets/vue/views/personalfile/Show.vue

@@ -79,7 +79,7 @@
                 <strong>{{ $t("Created at") }}</strong>
               </td>
               <td>
-                {{ item["resourceNode"] ? $filters.relativeDatetime(item["resourceNode"].createdAt) : "" }}
+                {{ item["resourceNode"] ? relativeDatetime(item["resourceNode"].createdAt) : "" }}
               </td>
               <td />
             </tr>
@@ -88,7 +88,7 @@
                 <strong>{{ $t("Updated at") }}</strong>
               </td>
               <td>
-                {{ item["resourceNode"] ? $filters.relativeDatetime(item["resourceNode"].updatedAt) : "" }}
+                {{ item["resourceNode"] ? relativeDatetime(item["resourceNode"].updatedAt) : "" }}
               </td>
               <td />
             </tr>
@@ -129,6 +129,7 @@ import ShowMixin from "../../mixins/ShowMixin"
 import Toolbar from "../../components/Toolbar.vue"
 
 import ShowLinks from "../../components/resource_links/ShowLinks.vue"
+import { useFormatDate } from "../../composables/formatDate"
 
 const servicePrefix = "PersonalFile"
 
@@ -139,6 +140,13 @@ export default {
     Toolbar,
     ShowLinks,
   },
+  data () {
+    const { relativeDatetime } = useFormatDate()
+
+    return {
+      relativeDatetime
+    }
+  },
   mixins: [ShowMixin],
   computed: {
     ...mapFields("personalfile", {

assets/vue/views/usergroup/List.vue

@@ -193,7 +193,7 @@
           field="sendDate"
         >
           <template #body="slotProps">
-            {{ $filters.relativeDatetime(slotProps.data.sendDate) }}
+            {{ relativeDatetime(slotProps.data.sendDate) }}
           </template>
         </Column>
 
@@ -333,6 +333,7 @@ import axios from "axios"
 import { ENTRYPOINT } from "../../config/entrypoint"
 import { RESOURCE_LINK_PUBLISHED } from "../../components/resource_links/visibility"
 import { MESSAGE_TYPE_INBOX, MESSAGE_TYPE_OUTBOX } from "../../components/message/constants"
+import { useFormatDate } from "../../composables/formatDate"
 
 export default {
   name: "UserGroupList",
@@ -347,6 +348,8 @@ export default {
   },
   mixins: [ListMixin],
   setup() {
+    const { relativeDatetime } = useFormatDate()
+
     const store = useStore()
     const filters = ref([])
     const filtersSent = ref([])
@@ -427,6 +430,7 @@ export default {
       tags,
       filters,
       title,
+      relativeDatetime,
     }
   },
   data() {

assets/vue/views/usergroup/Show.vue

@@ -47,7 +47,7 @@
     </p>
 
     <p class="text-lg">
-      {{ $filters.relativeDatetime(item["sendDate"]) }}
+      {{ relativeDatetime(item["sendDate"]) }}
     </p>
 
     <h3 class="text-lg">{{ item.title }}</h3>
@@ -77,6 +77,7 @@ import { ENTRYPOINT } from "../../config/entrypoint"
 import useVuelidate from "@vuelidate/core"
 import { useRoute, useRouter } from "vue-router"
 import NotificationMixin from "../../mixins/NotificationMixin"
+import { useFormatDate } from "../../composables/formatDate"
 
 const servicePrefix = "usergroups"
 
@@ -96,6 +97,8 @@ export default {
     const route = useRoute()
     const router = useRouter()
 
+    const { relativeDatetime } = useFormatDate()
+
     let id = route.params.id
     if (isEmpty(id)) {
       id = route.query.id
@@ -233,6 +236,7 @@ export default {
       removeTagFromMessage,
       asyncFind,
       reply,
+      relativeDatetime,
     }
   },
   mixins: [ShowMixin, NotificationMixin],

assets/vue/views/userreluser/UserRelUserList.vue

@@ -70,7 +70,7 @@
             <div class="friend-options">
               <span
                 class="friend-options__time"
-                v-text="useRelativeDatetime(slotProps.data.createdAt)"
+                v-text="relativeDatetime(slotProps.data.createdAt)"
               />
               <BaseButton
                 icon="user-delete"
@@ -103,7 +103,7 @@ import { useI18n } from "vue-i18n"
 import { useRouter } from "vue-router"
 import { useConfirm } from "primevue/useconfirm"
 import userRelUserService from "../../services/userreluser"
-import { useRelativeDatetime } from "../../composables/formatDate"
+import { useFormatDate } from "../../composables/formatDate"
 import { useNotification } from "../../composables/notification"
 import UserRelUserRequestsList from "../../components/userreluser/UserRelUserRequestsList.vue"
 
@@ -117,6 +117,8 @@ const waitingRequests = ref([])
 
 const notification = useNotification()
 
+const { relativeDatetime } = useFormatDate()
+
 const loadingFriends = ref(true)
 
 const friendFilter = {