convert date filters to composables

generators/vue/__snapshots__/generator.spec.mts.snap

@@ -200,6 +200,12 @@ exports[`generator - vue gateway-jwt-skipUserManagement(true)-withAdminUi(false)
   "src/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/app/shared/composables/date-format.ts": {
+    "stateCleared": "modified",
+  },
+  "src/app/shared/composables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/app/shared/computables/arrays.ts": {
     "stateCleared": "modified",
   },
@@ -224,9 +230,6 @@ exports[`generator - vue gateway-jwt-skipUserManagement(true)-withAdminUi(false)
   "src/app/shared/data/data-utils.service.ts": {
     "stateCleared": "modified",
   },
-  "src/app/shared/date/filters.ts": {
-    "stateCleared": "modified",
-  },
   "src/app/shared/jhi-item-count.component.ts": {
     "stateCleared": "modified",
   },
@@ -700,6 +703,12 @@ exports[`generator - vue gateway-oauth2-withAdminUi(true)-skipJhipsterDependenci
   "src/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/app/shared/composables/date-format.ts": {
+    "stateCleared": "modified",
+  },
+  "src/app/shared/composables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/app/shared/computables/arrays.ts": {
     "stateCleared": "modified",
   },
@@ -727,9 +736,6 @@ exports[`generator - vue gateway-oauth2-withAdminUi(true)-skipJhipsterDependenci
   "src/app/shared/data/data-utils.service.ts": {
     "stateCleared": "modified",
   },
-  "src/app/shared/date/filters.ts": {
-    "stateCleared": "modified",
-  },
   "src/app/shared/jhi-item-count.component.ts": {
     "stateCleared": "modified",
   },
@@ -1173,6 +1179,12 @@ exports[`generator - vue microservice-jwt-skipUserManagement(false)-withAdminUi(
   "src/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/app/shared/composables/date-format.ts": {
+    "stateCleared": "modified",
+  },
+  "src/app/shared/composables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/app/shared/computables/arrays.ts": {
     "stateCleared": "modified",
   },
@@ -1197,9 +1209,6 @@ exports[`generator - vue microservice-jwt-skipUserManagement(false)-withAdminUi(
   "src/app/shared/data/data-utils.service.ts": {
     "stateCleared": "modified",
   },
-  "src/app/shared/date/filters.ts": {
-    "stateCleared": "modified",
-  },
   "src/app/shared/jhi-item-count.component.ts": {
     "stateCleared": "modified",
   },
@@ -1631,6 +1640,12 @@ exports[`generator - vue microservice-oauth2-withAdminUi(true)-skipJhipsterDepen
   "src/main/webapp2/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp2/app/shared/composables/date-format.ts": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp2/app/shared/composables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp2/app/shared/computables/arrays.ts": {
     "stateCleared": "modified",
   },
@@ -1658,9 +1673,6 @@ exports[`generator - vue microservice-oauth2-withAdminUi(true)-skipJhipsterDepen
   "src/main/webapp2/app/shared/data/data-utils.service.ts": {
     "stateCleared": "modified",
   },
-  "src/main/webapp2/app/shared/date/filters.ts": {
-    "stateCleared": "modified",
-  },
   "src/main/webapp2/app/shared/jhi-item-count.component.ts": {
     "stateCleared": "modified",
   },
@@ -2209,6 +2221,12 @@ exports[`generator - vue monolith-jwt-skipUserManagement(false)-withAdminUi(true
   "src/main/webapp2/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp2/app/shared/composables/date-format.ts": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp2/app/shared/composables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp2/app/shared/computables/arrays.ts": {
     "stateCleared": "modified",
   },
@@ -2236,9 +2254,6 @@ exports[`generator - vue monolith-jwt-skipUserManagement(false)-withAdminUi(true
   "src/main/webapp2/app/shared/data/data-utils.service.ts": {
     "stateCleared": "modified",
   },
-  "src/main/webapp2/app/shared/date/filters.ts": {
-    "stateCleared": "modified",
-  },
   "src/main/webapp2/app/shared/jhi-item-count.component.ts": {
     "stateCleared": "modified",
   },
@@ -2697,6 +2712,12 @@ exports[`generator - vue monolith-oauth2-withAdminUi(false)-skipJhipsterDependen
   "src/main/webapp/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp/app/shared/composables/date-format.ts": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp/app/shared/composables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp/app/shared/computables/arrays.ts": {
     "stateCleared": "modified",
   },
@@ -2721,9 +2742,6 @@ exports[`generator - vue monolith-oauth2-withAdminUi(false)-skipJhipsterDependen
   "src/main/webapp/app/shared/data/data-utils.service.ts": {
     "stateCleared": "modified",
   },
-  "src/main/webapp/app/shared/date/filters.ts": {
-    "stateCleared": "modified",
-  },
   "src/main/webapp/app/shared/jhi-item-count.component.ts": {
     "stateCleared": "modified",
   },
@@ -3140,6 +3158,12 @@ exports[`generator - vue monolith-session-skipUserManagement(true)-withAdminUi(f
   "src/main/webapp/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp/app/shared/composables/date-format.ts": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp/app/shared/composables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp/app/shared/computables/arrays.ts": {
     "stateCleared": "modified",
   },
@@ -3164,9 +3188,6 @@ exports[`generator - vue monolith-session-skipUserManagement(true)-withAdminUi(f
   "src/main/webapp/app/shared/data/data-utils.service.ts": {
     "stateCleared": "modified",
   },
-  "src/main/webapp/app/shared/date/filters.ts": {
-    "stateCleared": "modified",
-  },
   "src/main/webapp/app/shared/jhi-item-count.component.ts": {
     "stateCleared": "modified",
   },

generators/vue/cleanup.mjs

@@ -52,5 +52,6 @@ export default function cleanupOldFilesTask({ application } = {}) {
     this.removeFile('tsconfig.spec.json');
     this.removeFile(`${application.clientSrcDir}app/shared/config/formatter.ts`);
     this.removeFile(`${application.clientTestDir}spec/app/shared/config/formatter.spec.ts`);
+    this.removeFile(`${application.clientSrcDir}app/shared/date/filters.ts`);
   }
 }

generators/vue/files-vue.mjs

@@ -111,7 +111,8 @@ export const vueFiles = {
         'core/jhi-navbar/jhi-navbar.component.ts',
         'core/ribbon/ribbon.vue',
         'core/ribbon/ribbon.component.ts',
-        'shared/date/filters.ts',
+        'shared/composables/date-format.ts',
+        'shared/composables/index.ts',
         'shared/computables/arrays.ts',
         'shared/computables/index.ts',
         'shared/sort/jhi-sort-indicator.component.ts',

generators/vue/templates/src/main/webapp/app/admin/metrics/metrics.component.ts.ejs

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n-bridge';
 <%_ } _%>
 import numeral from 'numeral';
 
+import { useDateFormat } from '@/shared/composables'
 import <%=jhiPrefixCapitalized%>MetricsModal from './metrics-modal.vue';
 import MetricsService from './metrics.service';
 
@@ -13,6 +14,7 @@ export default defineComponent({
     'metrics-modal': <%=jhiPrefixCapitalized%>MetricsModal,
   },
   setup() {
+    const { formatDate } = useDateFormat();
     const metricsService = inject('metricsService', () => new MetricsService());
 
     const metrics: Ref<any> = ref({});
@@ -26,6 +28,7 @@ export default defineComponent({
       threadData,
       threadStats,
       updatingMetrics,
+      formatDate,
 <%_ if (enableTranslation) { _%>
       t$: useI18n().t,
 <%_ } _%>

generators/vue/templates/src/main/webapp/app/admin/metrics/metrics.vue.ejs

@@ -78,7 +78,7 @@
         </div>
         <div class="row" v-if="!updatingMetrics">
           <div class="col-md-4">Start time</div>
-          <div class="col-md-8 text-right">{{ metrics.processMetrics['process.start.time'] | formatDate }}</div>
+          <div class="col-md-8 text-right">{{ formatDate(metrics.processMetrics['process.start.time']) }}</div>
         </div>
         <div class="row" v-if="!updatingMetrics">
           <div class="col-md-9">Process CPU usage</div>

generators/vue/templates/src/main/webapp/app/admin/tracker/tracker.component.ts.ejs

@@ -4,11 +4,13 @@ import { useI18n } from 'vue-i18n-bridge';
 <%_ } _%>
 import { Subscription } from 'rxjs';
 
+import { useDateFormat } from '@/shared/composables'
 import TrackerService from './tracker.service';
 
 export default defineComponent({
   name: '<%=jhiPrefixCapitalized%>TrackerComponent',
   setup() {
+    const { formatDateShort: formatDate } = useDateFormat();
     const trackerService = inject<TrackerService>('trackerService');
     const activities: Ref<any[]> = ref([]);
     const subscription: Ref<Subscription> = ref(null);
@@ -46,6 +48,7 @@ export default defineComponent({
 
     return {
       activities,
+      formatDate,
 <%_ if (enableTranslation) { _%>
       t$: useI18n().t,
 <%_ } _%>

generators/vue/templates/src/main/webapp/app/admin/tracker/tracker.vue.ejs

@@ -18,11 +18,7 @@
                     <td>{{activity.userLogin}}</td>
                     <td>{{activity.ipAddress}}</td>
                     <td>{{activity.page}}</td>
-<%_ if (enableTranslation) { _%>
-                    <td>{{$d(Date.parse(activity.time), 'short') }}</td>
-<%_ } else { _%>
-                    <td>{{activity.time | formatDate}}</td>
-<%_ } _%>
+                    <td>{{formatDate(activity.time)}}</td>
                 </tr>
                 </tbody>
             </table>

generators/vue/templates/src/main/webapp/app/admin/user-management/user-management-view.component.ts.ejs

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n-bridge';
 <%_ } _%>
 import { useRoute, useRouter } from 'vue-router/composables';
 
+import { useDateFormat } from '@/shared/composables'
 import UserManagementService from './user-management.service';
 import { useAlertService } from '@/shared/alert/alert.service';
 
@@ -12,6 +13,7 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const router = useRouter();
+    const { formatDateLong: formatDate } = useDateFormat();
 
     const alertService = inject('alertService', () => useAlertService(), true);
     const userManagementService = inject('userManagementService', () => new UserManagementService(), true);
@@ -30,6 +32,7 @@ export default defineComponent({
     loadUser(route.params.userId);
 
     return {
+      formatDate,
       alertService,
       userManagementService,
       user,

generators/vue/templates/src/main/webapp/app/admin/user-management/user-management-view.vue.ejs

@@ -25,24 +25,18 @@
           <dt><span v-text="t$('userManagement.createdBy')">Created By</span></dt>
           <dd>{{user.createdBy}}</dd>
           <dt><span v-text="t$('userManagement.createdDate')">Created Date</span></dt>
-          <dd><%_ if (enableTranslation) { _%>
+          <dd>
             <span v-if="user.createdDate">
-              {{$d(Date.parse(user.createdDate), 'long') }}
+              {{formatDate(user.createdDate)}}
             </span>
-<%_ } else { _%>
-            {{user.createdDate | formatDate }}
-<%_ } _%>
           </dd>
           <dt><span v-text="t$('userManagement.lastModifiedBy')">Last Modified By</span></dt>
           <dd>{{user.lastModifiedBy}}</dd>
           <dt><span v-text="t$('userManagement.lastModifiedDate')">Last Modified Date</span></dt>
-          <dd><%_ if (enableTranslation) { _%>
+          <dd>
             <span v-if="user.lastModifiedDate">
-                {{$d(Date.parse(user.lastModifiedDate), 'long') }}
+                {{formatDate(user.lastModifiedDate)}}
             </span>
-<%_ } else { _%>
-            {{user.lastModifiedDate | formatDate }}
-<%_ } _%>
           </dd>
           <dt><span v-text="t$('userManagement.profiles')">Profiles</span></dt>
           <dd>

generators/vue/templates/src/main/webapp/app/admin/user-management/user-management.component.ts.ejs

@@ -4,7 +4,9 @@ import { computed, defineComponent, inject, Ref, ref } from 'vue';
 <%_ if (enableTranslation) { _%>
 import { useI18n } from 'vue-i18n-bridge';
 <%_ } _%>
+
 import { useStore } from '@/store';
+import { useDateFormat } from '@/shared/composables'
 
 export default defineComponent({
   name: '<%=jhiPrefixCapitalized%>UserManagementComponent',
@@ -13,6 +15,7 @@ export default defineComponent({
   },
   setup(prop) {
     const alertService = inject('alertService', () => useAlertService(), true);
+    const { formatDateShort: formatDate } = useDateFormat();
     const userManagementService = inject('userManagementService', () => new UserManagementService(), true);
 
     const error = ref('');
@@ -35,6 +38,7 @@ export default defineComponent({
     const username = computed(() => useStore().getters.account?.login ?? '');
 
     return {
+      formatDate,
       userManagementService,
       alertService,
       error,

generators/vue/templates/src/main/webapp/app/admin/user-management/user-management.vue.ejs

@@ -53,15 +53,9 @@
               </div>
             </td>
 <%_ if (!databaseTypeCassandra) { _%>
-  <%_ if (enableTranslation) { _%>
-            <td v-if="user.createdDate">{{$d(Date.parse(user.createdDate), 'short') }}</td><td v-else>{{user.createdDate | formatDate}}</td>
+            <td>{{formatDate(user.createdDate)}}</td>
             <td>{{user.lastModifiedBy}}</td>
-            <td v-if="user.lastModifiedDate">{{$d(Date.parse(user.lastModifiedDate), 'short') }}</td><td v-else>{{user.lastModifiedDate | formatDate}}</td>
-  <%_ } else { _%>
-            <td>{{user.createdDate | formatDate}}</td>
-            <td>{{user.lastModifiedBy}}</td>
-            <td>{{user.lastModifiedDate | formatDate}}</td>
-  <%_ } _%>
+            <td>{{formatDate(user.lastModifiedDate)}}</td>
 <%_ } _%>
             <td class="text-right">
               <div class="btn-group">

generators/vue/templates/src/main/webapp/app/entities/_entityFolder/_entityFile-details.component.ts.ejs

@@ -4,16 +4,22 @@ import { useI18n } from 'vue-i18n-bridge';
 <%_ } _%>
 import { useRoute, useRouter } from 'vue-router/composables';
 
-<% if (anyFieldIsBlobDerived) { %>
+<%_ if (anyFieldIsBlobDerived) { _%>
 import useDataUtils from '@/shared/data/data-utils.service';
-<% } %>
+<%_ } _%>
+<%_ if (anyFieldIsDuration || anyFieldIsTimeDerived) { _%>
+import { useDateFormat } from '@/shared/composables'
+<%_ } _%>
 import { I<%= entityAngularName %> } from '@/shared/model/<%= entityModelFileName %>.model';
 import <%= entityAngularName %>Service from './<%= entityFileName %>.service';
 import { useAlertService } from '@/shared/alert/alert.service';
 
 export default defineComponent({
   name: '<%= entityAngularName %>Details',
   setup() {
+<%_ if (anyFieldIsDuration || anyFieldIsTimeDerived) { _%>
+    const dateFormat = useDateFormat();
+<%_ } _%>
     const <%= entityInstance %>Service = inject('<%= entityInstance %>Service', () => new <%= entityAngularName %>Service());
     const alertService = inject('alertService', () => useAlertService(), true);
 
@@ -43,6 +49,9 @@ export default defineComponent({
     };
 
     return {
+<%_ if (anyFieldIsDuration || anyFieldIsTimeDerived) { _%>
+      ...dateFormat,
+<%_ } _%>
       alertService,
       <%= entityInstance %>,
 <% if (anyFieldIsBlobDerived) { %>

generators/vue/templates/src/main/webapp/app/entities/_entityFolder/_entityFile-details.vue.ejs

@@ -26,13 +26,9 @@
                             {{<%= entityInstance %>.<%= fieldName %>ContentType}}, {{byteSize(<%= entityInstance %>.<%= fieldName %>)}}
                         </div>
   <%_ } else if (field.fieldTypeDuration) { _%>
-                        <span>{{<%= entityInstance %>.<%= fieldName %> | duration }} ({{<%= entityInstance %>.<%= fieldName %>}})</span>
+                        <span>{{formatDuration(<%= entityInstance %>.<%= fieldName %>)}} ({{<%= entityInstance %>.<%= fieldName %>}})</span>
   <%_ } else if (field.fieldTypeTimed) { _%>
-    <%_ if (enableTranslation) { _%>
-                        <span v-if="<%= entityInstance %>.<%=fieldName %>">{{$d(Date.parse(<%= entityInstance %>.<%=fieldName %>), 'long') }}</span>
-    <%_ } else { _%>
-                        <span>{{<%= entityInstance %>.<%=fieldName %> | formatDate}}</span>
-    <%_ } _%>
+                        <span v-if="<%= entityInstance %>.<%=fieldName %>">{{formatDateLong(<%= entityInstance %>.<%=fieldName %>)}}</span>
   <%_ } else { _%>
                         <span>{{<%= entityInstance %>.<%= fieldName %>}}</span>
   <%_ } _%>